가장 평범한 블로그

[카카오 지도 API 얻어오는 과정]
  1. https://developers.kakao.com/
     카카오 개발자 
  2. 내 어플리케이션 - 어플리케이션 추가하기
  3. 앱 키중 자바스크립트 앱 키 사용
  4. 플랫폼 설정하기
     사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. 
     (예: http://localhost:8080)

  그 다음부터 문서에서 API사용법 보고 진행(지도/로컬 -문서보기-Maps API텍스트 클릭-Web 이미지 클릭)

틀은 얻어온 HTML 문서로 !

<fieldset>
        <legend id="main">&nbsp;현재 위치를 지도에 표시하기&nbsp;</legend>
        <div id="map" style="height:500px;border-radius:20px; "></div>
        지도 레벨<input type="range" min='1' max="14" value="3" id="range"/>
      </fieldset>
      <hr style="width:70%"/>
      <fieldset>
        <legend>주소로 위치 찾기</legend>
         <div>
          <input id='address' type='search' placeholder="주소를 입력하세요" autofocus list="data_list"/>
            <datalist id="data_list">
             <option value="가산디지털2로 123 월드메르디앙2차"></option>
             <option value="가로수길 5"></option>
             <option value="벚꽃로 309 가산디지털단지역"></option>
             <option value="양화로 160 홍대입구역"></option>
             <option value="한강대로 405 서울역"></option>
            </datalist>
          <button onclick='searchByAddress()'>주소찾기</button>
          <button onclick='zoomIn()'>줌인</button>
          <button onclick='zoomOut()'>줌아웃</button>
          현재 지도 레벨은 <span id="maplevel" style="font-weight: bold; font-size:1.4em; color: green;"></span>레벨.
         </div>
      </fieldset>  
      <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=6680e56e3c1832d5cc285864a7025d82&libraries=services"></script>  
 <script>

1. 지도 띄우는 코드작성(샘플코드)

<script>
      
        //지도 띄우는 코드작성(샘플코드)
        var container = document.getElementById('map');
            var options = {
                center: new kakao.maps.LatLng(37.4730836, 126.8788276),
                level: 3
            };
            var map = new kakao.maps.Map(container, options);
</script>

2.저건 너무 간단하고 기능도 없음 이제 기능 하나하나씩 추가하면서 지도를 만들것임

   레벨조절용 연결 & positioniption 객체 설정하기(하드코딩을 없애기 위해)

	var map;
	var markers=[];
	//지도 레벨 조절용
	var range = document.getElementById('range');   //볼륨조절하듯이 지도 확대/축소 할 수 있게 할거
	var maplevel = document.getElementById("maplevel");
    maplevel.textContent=range.value;  // 확대/축소 할 때 밑에 숫자도 같이 적용될 수 있게 연결해 놈
    if(navigator.geolocation){  //브라우저의 geolocation지원하는지여부 판단
    	 //positionoption 객체설정용
    	var options = {'timeout':3000, 'maximumAge':5000}; 
         //한 번 얻기
        navigator.geolocation.getCurrentPosition(function(position){
                    var lat = position.coords.latitude;
                    var lng = position.coords.longitude;               
                    showKaKaoMap(lat,lng);
                });  
    }

      현재 위치의 위도/경도를 중심좌표로 표시

	function showKaKaoMap(lat,lng){
            var container = document.getElementById('map');
            var options = {
                center : new kakao.maps.LatLng(lat,lng),
                level : range.value,
                mapTypeId : kakao.maps.MapTypeId.ROADMAP//kakao.maps.MapTypeId.HYBRID//kakao.maps.MapTypeId.SKYVIEW//kakao.maps.MapTypeId.ROADMAP 
            };
            map = new kakao.maps.Map(container,options);    
            //Sample - "오버레이"의 마커 생성하기
            //지도에 마커표시하기(함수는 밑으로 뺌)
            setMarker(lat,lng,'<div style="padding:5px;font-size:.7em;">현재 나의 위치!</div>');
        }

      마커를 표시하는 함수(setMarker 정의)

	function setMarker(lat,lng,content){
            // 마커를 생성합니다
            var marker = new kakao.maps.Marker({
                position: new kakao.maps.LatLng(lat,lng),
                draggable: false,   //마커움직이지 않게(드레그x)
                clickable: true   //클릭은 가능하게!
            });
            //마커객체를 배열에 저장   
                var markerObj={};
                markerObj['marker'+markers.length]=marker;
                markers.push(markerObj);
            // 마커가 지도 위에 표시되도록 설정합니다
               marker.setMap(map);       
            //마커에 클릭 이벤트 등록하기
               setMarkerClick(content);  //(역시 함수는 밑에서 생성)   
        }/////setMarker

      마커 클릭이벤트 등록

 	 function setMarkerClick(content){
               // 인포윈도우를 생성합니다
               var infowindow = new kakao.maps.InfoWindow({
                 			 content : content,
                  			 removable : true
            					}); 
               // 마커에 클릭이벤트를 등록합니다
                markers[markers.length-1].info = infowindow;
                console.log('markers[0]:',markers[0]);  //{'marker0':marker객체,info:info윈도우객체}
                var key='marker'+(markers.length-1);
                kakao.maps.event.addListener(markers[0][key],'click',function() {
               // 마커 위에 인포윈도우를 표시합니다
                infowindow.open(map, markers[0][key]);  
            });   
            }//////setMarkerClick

주소 검색하여 찾기

   		var address=document.querySelector("#address");      //라이브러리 - 주소로 장소표시하기 준비사항
        function searchByAddress(){
               // 주소-좌표 변환 객체를 생성합니다
               var geocoder = new kakao.maps.services.Geocoder();  
               // 주소로 좌표를 검색합니다
               geocoder.addressSearch(address.value,function(result, status) {
                      console.log('result',result);
                      console.log('status:',status);
                // 정상적으로 검색이 완료됐으면 
                      if (status === kakao.maps.services.Status.OK) {
                            var content="<div style='padding:5px'>"+address.value+"</div>";
                            var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
                            //기존 마커의 위치이동
                            markers[0]['marker'+(markers.length-1)].setPosition(coords);
                            //기존 마커의 인포윈도우 변경
                            markers[0]['info'].setContent(content);
                            // setMarkerClick(content);
                            // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
                            map.setCenter(coords);
                        } 
                        else{
                            alert(address.value+"와 일치하는 주소가 없어요");
                            address.value='';
                            address.focus();
                        }
                    });       
            }////searchByAddress

range 요소에 이벤트리스너 부착

		range.oninput=function(e){
              //지도 레벨을 e.target.value로 변경
                map.setLevel(parseInt(e.target.value));      
              	console.log(e.target.value);
               	console.log('지도레벨:',map.getLevel());
                maplevel.textContent=e.target.value;
       };

지도 레벨 줌 인/아웃 시키는 함수

			//지도의 레벨을 확대시키는 함수
            function zoomIn(){
                // 현재 지도의 레벨 (1~14)
             	var level = map.getLevel();
             	/// 지도를 1레벨 내립니다 (지도가 확대됩니다)
             	if(level===1) return;
             		map.setLevel(level-1);
                maplevel.textContent=level-1;
             	range.value=level-1;
            }
    
             //지도의 레벨을 축소시키는 함수
             function zoomOut(){
                // 현재 지도의 레벨 (1~14)을 얻어옵니다
             	var level = map.getLevel();
             	// 지도를 1레벨 올립니다 (지도가 축소됩니다)
             	if(level===14) return;
             		map.setLevel(level+1);
             	maplevel.textContent=level+1;
            	range.value=level+1;
            }

이번엔 움직움직일것

그래서 위치가 갱신하는 

watchPosition() 메소드 호출

	var span = document.getElementById("display");  // 여기다 표시
	var watcher; 
    function start(){
		if(navigator.geolocation){
         	span.innerHTML = "Geolocation API를 지원하는 브라우저 입니다.";
        	var options = {'timeout':3000, 'maximumAge':5000 }    // 5초마다 갱신  
            // 이번엔 콜백 함수 밖에 안빼고 그냥 넣을 것
          	watcher = navigator.geolocation.getCurrentPosition(function(){
            	 var lat = position.coords.latitude;
                 var lng = position.coords.longitude;
                 span.textContent = '위도:'+lat+'경도:'+lng
            },
            function(){
            	switch(error.code){
                   case 0:span.textContent='허용이 거부됨'; break;
                   case 1:span.textContent='위치확인 불가'; break;
                   case 2:span.textContent='시간 초과'; break;
                   default :span.textContent=error.message;
                 }            
            },options);         
          }
	}
    
    function stop(){
    	navigator.geolocation.clearWatch( watcher)
    	span.textContent='위치 추적 중지';
    }

위치정보를 가져올 때

[navigator.geolocation] 이용!

현재 위치를 일회성으로 가져올 땐  getCurrentPosition()

현재 위치를 갱신할 땐  watchPosition() 메소드를 각각 호출 한다.

두 메소드 다 인자로 (successCallback [, errorCallback, options] ) 가능

successCallback: 성공할 때 콜백 함수 (필수)

errorCallback : 에러 났을 때 콜백 함수 (선택)

options : 위치값, 최대시간, 요청 대기시간,정확도 등등 (선택)

successCallback함수에 Position 객체가 첫 번째 파라미터로 전달

[Position  속성들]
coords: Coordinates 객체(여기에 위도/경도가 들어있음  latitude / longitude  )
timestamp:위치를 수집한 시간을 표현하는 숫자

1. 현재 위치정보를 한 번만 얻어올 것

getCurrentPosition() 메소드 호출

우선 콘솔에 찍어보면

console.log(navigator.geolocation);   /// Geolocation { } 객체구만

var span = documen.getElementById('display');
if(navigator.geolocation){   // 브라우저의 geolocation 지원 여부 판단
	span.innerHTML="Geolocation API를 지원하는 브라우저 입니다.";
	  // positionoption객체
	 var options = {'timeout':3000, 'maximumAge':5000}; 
      // 현재 위치 정보 한 번만 얻기 (인자들인 콜백 함수는 밖으로 다 뺌)
    navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);    
}

  function successCallback(position){
    console.log(position);  // GeolocationPosition { coords: GeolocationCoordinates, timestamp: 1667900553940 }
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    span.textContent = '위도:'+lat+'경도:'+lng
 }
 
 function errorCallback(error){
    console.log(error);
    switch(error.code){
        case 0:span.textContent='허용이 거부됨'; break;
        case 1:span.textContent='위치확인 불가'; break;
        case 2:span.textContent='시간 초과'; break;
        default :span.textContent=error.message;
     }
  }

네이버에서 처럼 메뉴들을 개인화하는 작업 

우선  받은 HTML로 확인

  <fieldset class="favorite-fieldset">
        <legend>네이버의 개인화 메뉴 설정 적용하기</legend>
        <input type="checkbox" name="menu" value="날씨"/>날씨
        <input type="checkbox" name="menu" value="자동차"/>자동차
        <input type="checkbox" name="menu" value="영화"/>영화
        <input type="checkbox" name="menu" value="부동산"/>부동산
        <input type="checkbox" name="menu" value="웹툰"/>웹툰
        <button class="save-button">저장</button><br/>
        <span class="favorite" style='color:red;font-size: 1.2em;font-weight: bold;'></span>
 </fieldset>

//이벤트로드하쟈
window.addEventListener('DOMContentLoaded',function(){
	//객체 얻어올 것 다 얻어와
    var favoritefieldset = document.querySelector('.favorite-fieldset') 
	var saveButton = favoritefieldset.querySelector('.save-button')  //doucument까지 가지말고 얻어온거에서 내려가는게 더 빠름
	var favorite = favoritefieldset.querySelector('.favorite')  //체크된거 표시 할 위치
    var checkboxs = favoritefieldset.querySelectorAll('[name=menu]')  //얜 속성으로 얻어옴
    console.log(checkboxs) // 이거 찍어보면 nodeList 로 나옴 유사배열
    
    //체크한 개인화 메뉴를 저장 할 배열 선언
    var personalizer=[];   // 유사배열!
    
    //DOM 로드 시 로컬 스토리지에 있는 개인화 메뉴를 뿌림
    if(localStorage.lengh !=0 ){
    	for(var i=0 ; i<localStorage.length ; i++){
        	var key = localStrorage.key(i);//키값얻고
            console.log('key:',key)
            var value = localStorage.getItem(key)  // 키값에 해당하는 value 값 가져오기
            //개인화 메뉴를 배열로 저장
            personalizer.push(value);         
        }
        //개인화 메뉴를 span에 뿌려주는 함수(함수는 밑에다 뺌)
        personalDisplay();
        //개인화 메뉴체크박으를 체크하는 함수(역시 밑으로 !)
        personalCheck();
    }
    
    function personalDisplay(){
    		var favoriteMenus='';
            for(var index in personlizer){
            	var value = personalizer[index];
                console.log(isNaN(value));
                //if(isNaN(value))  // 방문횟수 나오는거 빼기   이거 앞에서 한거땜에.. 여기도 나오나?
            	favoriteMenus += value +" &nbsp;"
            }
           favorite.innerHTML = favoriteMenus;
    }
    
    function personlCheck(){
         for(var index in personalizer){
                 var value = personalizer[index];
                     checkboxs.forEach(function(checkbox){
                        if(checkbox.value === value) checkbox.checked=true;
                    });
                }
    }
    
    //체크된 체크박스들 반환하는 함수
    function getCheckedList(){
    	return document.querySelectorAll('[name=menu]:checked')
    }
    
    //fieldset(부모)에 이벤트 걸기
    favoritefieldset.onclick = function(e){
    	if(e.target.nodeName !== 'INPUT') return;
        var checkedList = getCheckedList(); // 이 함수 위로 빼놈
        if(checkedList.length > 3){
        	alert('최대 3개 까지만 선택 할 수 있습니다.');
            e.preventDefault(); //체크박스의 클릭이벤트 기본기능(체크):체크를 막는다.(클릭이벤트취소)
        	return;
        }
        //체크하면 span에 뿌리고 해제하면 지워지게 만듦.. 체크 시 배열에 넣어주고 해제 시 지워줌 
  		if(e.target.checked) //체크 한 경우  
    		personalizer.push(e.target.value);
        else // 해제 한 경우
        	delete personalizer[personalizer.indexOf(e.target.value)]
        //배열에 저장된 메뉴 뿌려주는 함수 호출
        personalDisplay();              
    };
    
    //저장버튼 처리
    saveButton.onclick=function(e){
    //로컬스토리지 클리어
    localStorage.clear();
    e.stopPropagation(); // 부모에게 클릭 이벤트 전파 방지
    //체크한 체크박스만
    var checkedList = getCheckedList();
    //체크한 체크박스 가져와서 (키와 값 쌍으로 )개인메뉴로 
    checkedList.forEach(function(checkbox,index){
    //로컬 스토리지에 저장
    localStorage.setItem("MENU"+(index+1),checkbox.value);
       });
    }   
});

[세션 스토리지]

-데이터의 저장 기간이 제한 됨 즉 세션이 종료되면 자동 폐기
-각 세션마다 따로 저장 영역을 생성 
-같은 도메인이라고 해도 다른 세션에서 생성되면 서로의 스토리지에 접근 불가능

※세션스토리지는 세션종료 시 즉 브라우저 닫으면 내용이 다 사라짐!
  사용방법는 로컬스토리지와 동일, localStorage객체를 sessionStorage로 변경하면된다.

<fieldset>
        <legend>웹 스토리지를 이용한 방문자 회원수 카운팅(세션 스토리지)</legend>
        <span id="display" style='color:red;font-size:1.2em;font-weight: bold;'></span>
        <button onclick="removeStorage();">세션 스토리지 삭제</button>
      </fieldset>
      
      <script>   
         //브라우저의 웹 스토리지 지원여부 판단
        console.log(typeof Storage !== 'undefined');  // true면 웹스토리지 지원한다는 것
        if(typeof Storage !== 'undefined'){
            var span = document.querySelector("#display");
            span.innerHTML=" 웹 스토리지를 지원하는 브라우저 입니다.";
            console.log(sessionStorage);
            var counter = sessionStorage.getItem('counter')  // 키값 넣어줌 내맴대로
            console.log(counter)  // 아직 아무것도 저장 안되어 있어서 null
            if(counter === null){  // 최초방문
                //방문횟수를 1로 초기화
                sessionStorage.setItem('counter',1);
                span.innerHTML="첫 방문 이십니다.";              
            }
            else{  //세션스토리지에 키값이 있음 == 재방문일 경우
                counter++;   // 방문횟수 증가
                span.innerHTML= counter+"번째 방문 이십니다."; 
                //다시방문 횟수 스토리지 저장
                sessionStorage.setItem('counter',counter);
            }
        }

        function removeStorage(){
            span.innerHTML="방문 횟수가 초기화 되었습니다.";
            sessionStorage.removeItem('counter');
        }

      </script>

웹 스토리지

-클라이언트에 간단한 정보를 저장하기 위한 저장 공간. 즉 브라우저의 내부 스토리지를 사용할 수 있도록 제공해주는 기능
-서버로는 전달이 되지 않고 브라우저 로컬에만 저장되기 때문에 네트워크 레벨에서는 안전하다

-웹 스토리지의 저장 데이터는 키와 값의 쌍으로 저장.

-개인화 기능 등을 웹스토리지로 관리하면 아주 편리하게 활용할 수 있다.
-웹 스토리지는 용도에 따라 로컬 스토리지, 세션 스토리지로 나눈다.


로컬 스토리지
[특징]
-사용자가 직접 데이터를 삭제하기 전까지 데이터 저장 시간에 제한이 없어 영구적 보관이 가능, 

-만료 기간을 설정할 수 없다. 
-도메인마다 별도의 저장 영역을 생성

-로컬 스토리지 데이터는 물리적으로 저장된다.
-도메인마다 생성된 로컬 스토리지에 서로 접근 불가
-같은 도메인에 속해 있는 웹페이지들은 모두 접근 가능.
-단,웹브라우저마다 별도의 로컬 스토리지를 가짐 즉 브라우저마다 별도의 저장 장소를 가짐.

[주요 메소드 및 속성]
-long length : 저장되어 있는 데이터 수 반환
-string key(index) : 인덱스에 해당하는  키를 반환
-string getItem(key) : 키에 해당하는 값을 반환,값을 찾지 못했다면, 에러를 발생하지 않고 null을 리턴
-void setItem(key,data) : 키와 값의 쌍으로 데이터 저장
-void removeItem(key) : 키에 해당하는 값 삭제
-void clear() : 저장되어 있는 모든 데이터 삭제

적용!!

웹 스토리지를 이용한 방문자 회원 수 카운팅(로컬 스토리지)

받은 HTML 문서

 <fieldset>
        <legend>웹 스토리지를 이용한 방문자 회원수 카운팅(로컬 스토리지)</legend>
        <span id="display" style='color:red;font-size:1.2em;font-weight: bold;'></span>
        <button onclick="removeStorage();">로컬 스토리지 삭제</button>
      </fieldset>
  <script>

코드작성

<script>
        //로컬스토리지라서 브라우저 닫아도 내용이 삭제되지 않음 반 영구적임
        // 키와 값을 쌍으로 저장 !!
       
        //브라우저의 웹 스토리지 지원여부 판단
        console.log(typeof Storage !== 'undefined');  //true면 웹스토리지 지원한다는 것
        if(typeof Storage !== 'undefined'){
            var span = document.querySelector("#display");
            span.innerHTML=" 웹 스토리지를 지원하는 브라우저 입니다.";
  
            var counter = localStorage.getItem('counter')  // getItem으로 키 값(counter) 넣어줌 내맴대로 
            if(counter === null){   // 최초방문
                //방문횟수를 1로 초기화
                localStorage.setItem('counter',1);  // 요렇게setItem으로 키 값과 value를 쌍으로 넣어줌 
                span.innerHTML="첫 방문 이십니다.";              
            }
            else{      // 로컬스토리지에 키값이 있음 == 재방문일 경우
                counter++;   // 방문횟수 증가
                span.innerHTML= counter+"번째 방문 이십니다."; 
                   //다시방문 횟수 스토리지 저장
                localStorage.setItem('counter',counter);
            }
        }
        
        function removeStorage(){
            span.innerHTML="방문 횟수가 초기화 되었습니다.";
       //   localStorage.removeItem('counter');
            localStorage.clear();
        }

</script>

Convas

웹에다가 그림을 그릴거여요

웹은 하나의 도화지다

캔버스다

졸리다

어휴

<body>
    <h2>canvas태그</h2>  <!--크기들은 꼭 속성으로 주셈! 스타일로 주면 안 됨!-->
    <canvas id="canvas"  width=200px; height=200px  style="background-color: yellow ;"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(0,0); // 왼쪽 맨 위 부터 시작
        ctx.lineTo(50,50);
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.moveTo(50,50);
        ctx.lineTo(100,50);
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();  // 굳이 안써도
        ctx.lineWidth = 5;
        ctx.moveTo(100,50);
        ctx.lineTo(100,100);
        ctx.stroke();
        ctx.closePath();  //  얘도  굳이
        
        //rgba에서 a는 알파 즉 투명도(1에 가까울 수록 완전 불투명,0에 가까울 수록 완전투명)
        ctx.fillStyle='rgba(255,0,0,0.5)';
        ctx.fillRect(100,100,50,50)  // 시작꼭지점(100,100),가로,세로 이 값임!

    </script>    
</body>

2.글자를 그려볼거예요 

글자를 그린다고요?

녜

글자도 그려요 

보세요 

<body>
    <h2>canvas태그</h2> 
    <canvas id="canvas"  width="200"; height="200"  style="background-color: yellow ;"></canvas>
    <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    ctx.font = '25px 굴림체'
   
    //채우기 색상
    ctx.fillStyle='blue';
    
    //기준선 보이기
    ctx.strokeStyle = 'red';
    ctx.moveTo(50,20);
    ctx.lineTo(50,180);
    ctx.stroke();

    //그림자 표시 설정
    ctx.shadowColor = 'rgba(192,192,192,0.8)';
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur = 1;  // 최대값이 100

    //글자그리기
    ctx.textAlign = 'start';
    ctx.fillText('HTML5_START',50,50);

    ctx.textAlign = 'end';
    ctx.fillText('HTML5_END',50,80);

    ctx.textAlign = 'center';
    ctx.fillText('HTML5_CENTER',50,110);

    ctx.textAlign = 'left';
    ctx.fillText('HTML5_LEFT',50,140);

    ctx.textAlign = 'right';
    ctx.fillText('HTML5_RIGHT',50,170);
    </script>    
</body>

3.캔버스에다가 그림도 그려요

그림 안에 그림이요?

녜 

보세요

 <script>// 자바스크립트가 canvas위에있으니까 밑에거 null 값나오니
    window.addEventListener('DOMContentLoaded',function(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    ctx.strokeStyle='red';
      ctx.moveTo(60,313);
      ctx.lineTo(120,166);
      ctx.lineTo(180,76);
      ctx.lineTo(240,256);
      ctx.lineTo(300,70);
      ctx.lineTo(360,200);
      ctx.lineTo(420,120);
      ctx.lineTo(480,70);
      ctx.stroke();
        
       //이미지 그리기용
    var canvas = document.getElementById("canvasimg");
    ctx = canvasimg.getContext('2d');
      
    var img = new Image();  // html의<img/> 랑 같음
    // console.log(img);
    img.src = "./Images/button.jpg";
    img.onload=function(){
        // 이미지 크기 그대로 그림 (그대로 가져 온다고)
    //ctx.drawImage(img,0,0);  //img는 드래그 되는데 여기선 드래그가 안 됨
    	// 내맴대로 크기조절가능
    ctx.drawImage(img,0,0,100,50);
      };
    });       
    </script>
</head>
<body>
    <h2>canvas태그</h2>
    <canvas id="canvas"  width="550"; height="450"  style="background-color: yellow ;"></canvas><br/>
    <canvas id="canvasimg"  width="300"; height="300"  style="border:1px green solid ;"></canvas>
</body>

video

오디오 했으면 비디오도 해야지 ...

오디오랑 똑같다 단지 화면이 있을 뿐...

[오디오 처럼 기본 비디오 태그를 이용]

<body>
<h2>기본 비디오 태그</h2>
    <!---자동재생
    <video src="Media/video.mp4" controls width="300" height="300" autoplay loop>
        -->
    <video src="Media/video.mp4" controls width="300" height="300">             
     video 태그를 지원하지 않는 브라우저 입니다. <br/>
    여기를 <a hrdf="Media/video.mp4"> 클릭</a>하세요   
    </video>
    </body>

기본 비디오 태그

지원하지 않는 브라우저의 경우 (source 태그 사용)

  <body>
  <h2>기본 audio 하위태그인 &lt;source&gt;태그사용</h2>
    <video controls width="200"  height="200">
        <source src="Media/video.3gp" type="video/3gp"/>
        <source src="Media/video.mp4" type="video/mp4"/>
    </video>
    </body>

기본 audio 하위태그인 <source>태그사용

[비디오 직접 만들기]

<body>

    <h2>커스텀 비디오</h2>
    <div>
    <video width="300" height="200" id="video" src="Media/video.mp4" hidden></video>
    </div>  // 숨기기 기능 추가!
    <div>
       <progress value="0" ></progress>
    </div>
    <div>
        <input type="button" value="PLAY" onclick="play();"/>
        <input type="button" value="PAUSE" onclick="pause();"/>
        <input type="button" value="STOP" onclick="stop();"/>        
        <input type="range" id="volume" value="0" min="0" max="1" step="0.1" style="width:80px"/>
        &nbsp;&nbsp;<span id="current"></span> / <span id="total"></span>
     </div>
     
     <script>
//비디오 객체 얻어오기
var video = document.getElementById("video");
//span객체 얻기
var currentSpan = document.getElementById("current");
var totalSpan = document.getElementById("total");
 //progress객체 얻기
var progress = document.querySelector("progress");  
//이번엔 볼륨 추가요 !
var volume = document.getElementById("volume");
//오디오객체에 이벤트처리
//video객체에 timeupdate이벤트 처리를 위한 리스너 부착
	video.addEventListener('timeupdate',function(){
    	//오디오 재생시간
    totalSpan.textContent = video.duration;
    	//현재재생
    currentSpan.textContent= video.currentTime;
		//진행정도 표시(최댓값 설정)
    progress.max = video.duration;
  		//진행정도 표시
    progress.value= video.currentTime;        

});


    //볼륨 조절
    //마우스를 드래그하다 놓았을때 이벤트(change)가 발생
       /*  volume.onchange = function(){
        consol.log('볼륨', video.volume);
        };*/
    //드래그시에도 이벤트(input)가 발생 !
    volume.oninput = function(){  
        console.log('볼륨', video.volume);
        video.volume = volume.value;
    };

    var play = function(){
        video.hidden='';
        video.play();        
      };
    var pause = function(){
    video.pause();
    };
    
      //역시 stop()함수 지원안함 stop효과 기능 구현!
    var stop = function(){
    if(video.played){  
        video.currentTime=0;
        video.pause();
        video.hidden = 'block';  //비디오 숨기기
      }    
    };
     </script>
</body>

커스텀 비디오

Audio

이거 진짜 그 오디오 제어하는 태그임!

오오 이거 좀 신기함

시간 날 때 좀 더 가지고 놀면 재미.... 있을 까  ...?? 

오디오 태그를 이용해서 브라우저에서 음악 재생시켜보자

[기본태그 사용해서 실행]

<body>
    <h2>기본 audio(src 속성과 controls만 사용) 태그</h2>
    <audio src="Media/audio.mp3" controls>
    <!--이건 그냥 바로 재생됨
  	<audio src="Media/audio.mp3" controls autoplay loop>
  	-->
 </body>

이것도 기본속성으로 재생하는 건데

브라우저마다 audio 태그를 지원하지 않을 수 도 있다고 함.

그래서 소스태그를 이용해서 재생시키는 방법 도있다!

근데 소스태그를 이용해도 지원하는 미디어들이 또 다 다르다보니

여러 종류의 파일을 넣어 놓고 지원하는 한 파일만 재생할 수 있도록 만든다! 

겉보기에는 위와 별 다를게 없지만 실제로는 여러 종류의 파일소스들이  내장되어 있다 !

 <h2>기본 audio 하위태그인 &lt;source&gt;태그사용</h2>
    <audio controls>  <!--여러 개를 넣어도 지원하는미디어 하나만 재생 함 -->
        <source src="Media/audio.ogg" type="audio/ogg"/>
        <source src="Media/audio.mp3" type="audio/mp3"/>
    </audio>

기본 audio 하위태그인 <source>태그사용

[오디오 직접 만들기]

기본사용 말고 직접 이벤트 만들어서 재생시켜 보자!!

자바스크립트 위주로  큰 흐름부터 보자

1. 객체 생성 : 당연히 음악 파일을 준비 해놔야 합니다.

2. span 객체 얻기

3.progress객체 얻기 : timeupdate 이벤트 처리를 위한 리스너 부착 .addEventLister()함수 사용!

4. 오디오의 총 재생시간 얻고 설정

5. 오디오 현재 재생시간 얻고 설정

6. 타입업데이트에 따른 프로그레스 진행정도 표시(최대값 설정)

7. 진짜 진행정도 표시

<body>

 <h2>커스텀 오디오</h2>
    <div>
        <progress value="0" ></progress>
      </div>
      <div>
        <input type="button" value="PLAY" onclick="play();"/>
        <input type="button" value="PAUSE" onclick="pause();"/>
        <input type="button" value="STOP" onclick="stop();"/>
        <input type="range" value="volume" onclick="volume();"/>         
        &nbsp;&nbsp;<span id="current"></span><span id="total"></span>
     </div>

<script>
//객체생성
//var audio = new Audio();
//audio.currentSrc = "Media/audio.mp3";  이렇게 선언 후 나중에 파일 넣어도 되고
var audio = new Audio("Media/audio.mp3"); // 선언과 동시에 파일 넣어도 됨!

//span객체 얻기
var currentSpan = document.getElementById("current");
var totalSpan = document.getElementById("total");

//progress객체 얻기
var progress = document.querySelector("progress");

//오디오객체에 이벤트처리 (이 밑으로 함수 식이 기니 잘 따라와랏)
audio.addEventListener('timeupdate',function(){
		//오디오 총 재생시간
	totalSpan.textContent = audio.duration;
		//현재재생
	currentSpan.textContent= audio.currentTime;
		//프로그레스의 진행정도 표시(최댓값 설정)
	progress.max = audio.duration;
 		//진행정도 표시
	progress.value= audio.currentTime;	
});


//우리가 직접 누르는 버튼들 함수로 이벤트 처리 
var play = function(){
    audio.play();
};
var pause = function(){
    audio.pause();
};
 //stop()함수 지원 안해서 stop효과 기능 구현해야 함
var stop = function(){
    if(audio.played){  //재생중일 때
        audio.currentTime=0;
        audio.pause();
     }   
};
var volume = function(){
    audio.volume=0.3; 
}

</script>
</body>

커스텀 오디오

FieldSet

특정 영역을 하나로 묶을 때 사용하는 태그

마치 수학에서 벤다이어그램처럼 묶을 때 사용하는 것과 생긴게 비슷하다

아주 큰 내용은 없고 그냥 보면 아하 이거구나 이해되는 태그다하위태그로 legend 태그를 사용해서 머리말을 표시 할 수 있다.!

<div>
<h2>&lt;fieldset&gt;태그</h2>
<fieldset>
<legend>당신이 좋아하는 스포츠는?</legend>
    <ul style="list-style: decimal;">
        <li>축구</li>
        <li>배구</li>
        <li>야구</li>
        <li>농구</li>
</ul>
</fieldset>
</div>

Address

주소표시할 때 사용하는 태그!

글자가 기울어진 형태로 보인당 근데 보통형태로 조절 할 수 도 있다!!

 <div>
 	<h2>&lt;address&gt;태그</h2>
    <address style="font-style: normal ; text-align: center;"> 서울시 금천구 가산동 한국소프트웨어 인재개발원</address>

</div>

SPAN

스팸 말고 스팬 !!

그냥 기본 텍스트랑 겉보기엔 크게 다르지 않음심지어 마크업기능이 없어서 글자 꾸미기도 어려움근데 이걸 왜 씀?자바스크립트랑 CSS로 span이 감싸져 있는 부분을 활용(제어)할 수 가있기 때문에 많이 사용한다!결국 나중에 자바스크립트로 쓰려고 sapn 으로 감싸주는 것임

우선 바디부분에다가 구현 할 것들을 작성 해 준다

자바스크립트로 이벤트 구현해 줄것들은 span으로 미리 감싸준다. 이 때 이벤트로 구현 할 게 한 두가지가 아닐꺼 아님? 다른 것들 과 구분하기 위해서 마크 ! 표시를 해줘야 하는데 그게 (id = " 표시! ") 요걸로 연결 해 놈!! 요렇게 해 놓고 나중에 스크립트태그 안 에서  span  = document.querySelector(' #표시 !' );  #으로 소환하면 됨 !

CSS에서 활용하는 건 지금 정리하려는 주 목적이 아니니까 대충 해놓고 넘어갈거얌

이런게 있었구나 하고 기억만 해 놓자!

구현 전 HTML 문서 코드

<body>

    기본 텍스트
    <h2>&lt;span&gt;태그</h2>
    <span>기본 텍스트</span>  //  <!--겉보기에는 span 으로 감싸나 안감싸나 똑같아 보임.----> 
    <h3>자바스크립트에서 활용</h3>
    오늘의 첫 수업은 <span id="text">JavaScript</span> 입니다.<br/>
    여기에 <span id="image"> 이미지</span> 표시하기<br/>
    아래에 구구단 표시하기<br/>  <!-- 요건 나중에 할 거----> 
    
    <fieldset>
        <legend>버튼들</legend>
        <button onclick="toggleText()">텍스트 변경</button>
        <button onclick="SetImage()">이미지 교체</button>
        <button>구구단 표시</button>
    </fieldset>
    
    <h3>CSS에서 활용</h3>
    오늘은 <Span class="monday">월요일</Span> 입니다. <br/>
    <Span class="html5">HTML5</Span> 수업입니다.
    
</body>

script 태그 안에다가 위해 span 해논것들 이벤트로 구현 해 보자!

+toggle 이벤트

스위치 처럼 껐다 켰다 반복하는 이벤트 라고만 먼저 알아두자!

버튼 누르면 자바스크립트가 영문자가 되었다가 한글로 되었다가 바뀐다

+SetImage 

버튼 누르면 이미지 파일 생성됨 !

+구구단은 제어문 배우고 나서 구현 할 것! (추가 완료 !!)

 <script>
 		// 토글
        var toggle = false;
        function toggleText(){
        var span  = document.querySelector('#text'); // CSS 이용! 아이디가 text인 거 찾아와서 적용
        if(!toggle)
         span.textContent = "자바스크립트";
        else
        span.textContent = "JavaScript";
        toggle = !toggle;
        } 

		// 이미지
        var SetImage = function(){
        var span  = document.querySelector('#image');  // CSS활용 아이디가 image인것 찾아와            
        //방법1
        //span.innerHTML="<img src='./Images/button.jpg' alt='이미지'/>"; // 찾아온 곳에 innerHTML을 적용해서 이미지를 넣을 것임
        //방법2 - DOM API
        var imgNode = document.createElement('img');   // 돔 사용 이 의미는 <img > 이거고
        //imgNode.setAttribute('src', './Images/button.jpg'); // src속성 입히고  의미가 <img src='./Images/button.jpg'> 여기까지고
        //imgNode.setAttribute('alt', '이미지');             // alt속성 입히고 의미가 <img src='./Images/button.jpg' alt='이미지'/> 여기까지인거 !!
        imgNode.src = './Images/button.jpg';       // 더 간편하게 코드작성 하는 법
        imgNode.alt = '이미지';             //노드 연결 하면 .으로 불러오는게 가능하군!!
        span.appendChild(imgNode);    // 노드에 추가가면 끝 !
        };
    </script>
    
    //+구구단 추가!
    function printGugudan(){
    var span  = document.querySelector('#gugudan');
         var table ="<table style='text-align:center;width:700px; background-color: black; border-spacing: 1px; width: 50; height: 50;'>"              
           
           for( i=1 ; i<=9 ; i++ ){
                    table += "<tr style = 'background-color:white';>";  // 테이블에 누적해서 넣음
                for( k=2 ; k<=9 ; k++){
                    table +="<td>"+k+" * "+i+" = "+k*i+"</td>";
                }
            table += "</tr>";     // 마찬가지로 테이블에 누적해서 넣음
          }       
         table += "</table>" ;  // 최종 테이블 넣음
         span.innerHTML=table;    // span 테그에 다가 내가 만들어논 HTML table style속성을 적용 시키겠다 !
         }
    
    <style>
        .monday{
            font-size:.8em;
            color: gray;
        }
        .html5{
            font-size: 1.8em;
            color: rgb(35, 187, 73);
            font-weight: bold;
        }

    </style>

 이벤트 구현 후 

<span>태그

자바스크립트에서 활용

CSS에서 활용