TIL 20 - Javascript, JQuery

TIL | 07.14의 기록....

Javascript에서 Google Map 사용하기

• https://cloud.google.com/maps-platform/ 에 접속하여 API 키를 발급받는다.

• js와 google map 라이브러리 연결하기

  • <script async defer src="https://maps.googleapis.com/maps/api/js?key=본인의 API Key 작성&callback=함수명"></script>

• 콜백 함수 작성하기 : googlemap이 호출하는 함수

  • function 콜백함수명(){
    	실행문 작성....
    }

  • 원하는 위치의 위도와 경도를 선언한다. (전역변수로)

  • 위도, 경도 정보가 담긴 객체 생성
    var myCenter = new google.maps.LatLng(latitude, logitude);

  • 표시할 맵 옵션
    var mapProperty{
    	center:myCenter, 
    	zoom:14, //0~21사이, 숫자가 클수록 확대됨
    	mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    • mapTypeId 지도 종류 : ROADMAP, HYBRID, STEELITE, TERRAIN

  • map 객체 생성
    var map = new google.maps.Map(document.getElementById("지도를 표시할 곳"), 맵옵션);

  • 마커 표시하기
    var marker = new google.maps.Marker({//Json 데이터
    	position:위치객체, //마커를 표시할 위치
    	map:map객체, //마커를 표시할 지도
    	title:"마우스오버시 표시할 내용",
    	icon:"마커로 표시할 아이콘 이미지" //생략하면 기본 아이콘으로 생성
    })

  • 마커 클릭하면 정보 대화상자 표시
    var infoMsg = "위도 : "+latitude+"<br>경도 : "+longtitude;
    	infoMsg += "<br><a href="링크"><img src="원하는 이미지 링크"></a>"
    var info = new google.maps.InfoWindow({
    	content:infoMsg //표시할 정보내용 
    })

  • 이벤트 등록하기			이벤트 발생대상, 이벤트종류, 대화상자
    google.maps.event.addListener(marker, 'click', function(){info.open(map, marker);})

  • 여러곳에 마커 표시하기(위도,경도 데이터가 배열에 들어있을때)
    반복문 작성한다...
    for(var i=0; i<lat.length; i++){
    	var mk = new google.maps.Marker({
    		position:new.google.maps.LatLng(위도배열[i], 경도배열[i]),
    		map:map객체,
    		title:"위도="+위도배열[i]+",경도="+경도배열[i]
    	})
    }

  • 위치 주위로 반경 표시하기
    var myCity = new google.maps.Circle({
    	center : 위치객체,
    	radius : 반지름,
    	strokeColor : 선의 색상,
    	strokeWidth : 선의 두께,
    	strokeOpacity : 선의 투명도 (0~1)
    	fillColor : 면의 색상,
    	fillOpacity : 면의 투명도
    })

  • 지명을 이용한 지도표시를 하기위해서 Geocoder객체가 필요하다.

    • geoCode = new google.maps.Geocoder();
      
      //배열의 지명을 이용하여 마커 표시하기
      for(var i=0;i<배열.length;i++){
      	setMapPosition(주소배열[i],홈페이지배열[i],이미지배열[i])
      }

  • 위치이동하는 함수 
    function setMapPosition(주소값, 홈페이지값, 이미지값){
    	geoCode.geocode({address:지도에서 찾을 위치}, function(results지도에서 찾은 정보, status검색성공여부){//status='OK'면 성공
    		if(status=='OK'){
    			//지도의 중앙위치 변경               위도,경도 객체 ->console에서 확인
    			map.setCenter(results[0].geometry.location);
    			//마커표시
    			var marker = new google.maps.Marker({
    				map:map객체, icon:'사용할 이미지',....
    			})
    		}else{
    			alert("입력한 주소가 존재하지 않습니다.")
    		}
    	})
    }

  • //지역명을 이용한 지도 검색
    function searchMap(){
    	var addr = document.getElementById("address").value;
    	if(addr==""){//검색한게 없을때
    		alert("검색할 지역 또는 건물명을 입력하세요.");
    	}else{
    		setMapPosition(addr, "홈페이지", '이미지');
    	}
    }

JQuery란?

• 제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스, 이벤트 기반의 자바스크립트 라이브러리이다.
• JQuery의 특징
  • 웹페이지 상에서 엘리먼트(Element)를 쉽게 찾고 조작할 수 있다.
  • 거의 모든 웹브라우저에 대응할 정도로 호환성이 매우 뛰어나다.
  • 네트워크, 애니메이션 등 다양한 기능을 제공한다.
  • 메소드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원한다.
  • 관련 플러그인들이 웹상에 공개되어 있으며 플러그인을 직접 구현하거나 확장할 수 있다.
  • 공식 웹사이트(www.jquery.com)와 수많은 레퍼런스를 통해 쉽게 접근 가능하다.

JQuery 사용하기

• JQuery는 라이브러리를 다운로드하여 외부 자바스크립트 파일로 추가하거나 cdn방식으로 링크를 걸어서 사용할 수 있다.

• cdn방식으로 사용하기 : www.jquery.com -> 다운로드 클릭 -> cdn링크로 이동 -> 첫번째 링크 복사하여 사용

• <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> //jquery링크를 추가한 코드

• Jquery 실행하기

  • $(document).ready(function(){
    	실행문;
    })

  • JQuery(document).ready(function(){
    	실행문;
    })

  • $(function(){
    	실행문;
    })

• JQuery에서 CSS 사용하기

  • CSS 사용하기
    $("body").css("background-color","#ddd");
    $(".c1").css("border","1px solid red");
    $("#t1").css("background-color","lightblue");

• JQuery에서 HTML 사용하기

  • 속성=속성값이 존재하는 속성 : attr 사용

    • $("img").attr("src","../img/03.jfif");
      $("#txt").attr("value","홍길동");

  • 속성만 존재하는 속성 : prop 사용

    • readonly, checked, selected, disabled, controls ..
      $("#txt").prop("readonly",true); // true(적용)/false(해제)

선택자

• 태그 선택자 : $("태그")
• 클래스 선택자 : $(".클래스")
• 아이디 선택자 : $("#아이디")
• 자손 선택자 : $('a>b')
• 후손 선택자 : $('a b')
• 인접 선택자
  • children() : 자손 객체를 선택
  • parent() : 부모 객체를 선택
  • siblings() : 형제 객체를 선택
  • next() : 선택자의 다음 객체를 선택
  • prev() : 선택자의 이전 객체를 선택
• 위치 선택자
  • first : 첫번째 객체 선택
  • last : 마지막 객체 선택
  • even : 짝수번째 객체 모두 선택(객체 순서 0부터 시작)
  • odd : 홀수번째 객체 모두 선택(객체 0부터 시작)
  • nth-last-of-type(n) : 뒤에서 n번째 객체 선택
  • nth-child(3n) : 3의 배수번째 객체 모두 선택 (객체 1부터 시작)
  • only-child : 부모 중 자식이 1개인 부모를 선택
  • index를 이용한 선택자
    • slice(n) : index n부터 끝까지 선택
    • eq(n) : index n인 객체 선택
    • lt(n) : less than, index n보다 작은 객체 모두 선택
    • gt(n) : greater than, index n보다 큰 객체 모두 선택