HTML,CSS,JavaScript25 자바스크립트 ] 주소로 카카오 맵 api 장소 표시하기(좌표 얻기) 카카오 지오코드 이용 아래 코드는 카카오 개발자에서 가져온 샘플코드 이다. 카카오 맵 지오코드를 이용하여 주소로 좌표를 얻을 수 있고, 이를 응용하여 활용할 수 있다. apis.map.kakao.com/web/sample/addr2coord/ 수업시간 내용 복습입니다. 경도,위도가 아닌 주소를 json 으로 받아서 주소를 경도,위도로 변경해서 변수에 담은 후에 경도,위도로 마커를 표시한다. 해석부분은 주석처리로 이해한내용 적었습니다. JS var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao .maps .LatLng(33.450701, 126.570667), // 지도의 중심좌표 le.. 2022. 6. 28. 자바스크립트로 지도와 데이터 연동 후 함께 구현해보기 복습 수업시간 내용을 기반으로 작성되었습니다. var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao .maps .LatLng(33.450701, 126.570667), // 지도의 중심좌표 level: 3 // 지도의 확대 레벨 }; let url = "https://api.odcloud.kr/api/3077888/v1/uddi:444645a3-bc90-47fd-aa42-d717c93c464" + "a_201705111713?page=1&perPage=10&serviceKey=COog2VpGwoKjJbuLbsotfPe9FOvhuC5Ax5" + "OLcRW2sAPnLle8ggr2h8GA%2B.. 2022. 6. 27. 자바스크립트로 날씨 구현하기 복습 수업시간 내용 복습 자료입니다. JS // API 요청 URL 변수 var url = 'http://api.openweathermap.org/data/2.5/weather?q=seoul&APPID=e11462160015cffa69954c9f67741b7b'; // 로딩 이미지 표시 $('#weather_info .load_img').show(); $.getJSON(url, function(data){ // 날씨 데이터 객체 var sys = data.sys; // 국가명, 일출/일몰 var city = data.name; // 도시명 var weather = data.weather; // 날씨 객체 var main = data.main; // 온도 기압 관련 객체 var wmain = weather[0].. 2022. 6. 27. 자바스크립트로 맵 구현하기 복습 수업시간 내용 복습 자료입니다 JS function initMap() { //맵 객체를 생성하고 id='map'에 지도 표시 //처음에 변수 선언부터 let my_position = { lat: 34.566554, lng: 126.978546 }; //Map메소드 공부하기 let map = new google.maps.Map(document.getElementById("map"),{ center : my_position, scrollwheel : false, zoom : 17 }); //마커 만들기 let marker = new google.maps.marker({ map: map, position: my_position, title: "내위치" //마커 정보제공 }) //정보창 객체 추가 let inf.. 2022. 6. 27. 자바스크립트로 계산기 구현하기 복습 수업시간에 배운내용 복습입니다. JS window.onload = function () { // 이벤트를 먼저 넣고 시작 //변수의 초기화 설정 let inp = document.forms['cal']; //문서내의 폼중에서 cal 인거 let input = inp.getElementsByTagName('input'); //태그이름이 input인 것들 다 let cls_btn = document.getElementsByClassName('cls_btn')[0]; //클래스가 cls_btn인것중 0번째 let result_btn = document.getElementsByClassName('result_btn')[0]; //클래스가 result_btn 인것중 0번째 function calc(value) {.. 2022. 6. 25. 자바스크립트로 풍선 애니메이션 구현하기 복습 수업시간에 배운내용 토대로 복습겸 정리하였습니다. JS let banner = document.getElementById('banner'), img = banner.getElementsByTagName('img'), toggle = document.getElementById('toggle'), sound_btn = document.getElementById('sound_btn') //배너의 높이값 변수 let banner_height = getComputedStyle(banner).height; // banner의 적용된 css 중에 height; let cast = []; // 각각의 풍선에 대한 객체를 배열의 형태로 담을 것이다. 떨어지는 방식 랜덤으로 주기위해서 각각의 인덱스에 함수 적용예정 풍선 .. 2022. 6. 25. 자바스크립트를 이용한 퀴즈 풀기 만들어보자 수업시간 내용 복습입니다. JavaScript //문제 객체 정보 function Question(text,choice,answer){ this.text = text; this.choice = choice; this.answer = answer; } //퀴즈 정보 객체 function Quiz(questions){ this.score = 0; this.questions = questions; this.QuestionIndex =0; } //정답 확인 메소드 Quiz.prototype.correctAnswer = function(answer){ return answer == this.questions[this.questions.QuestionIndex].answer } // 문제 데이터 let questi.. 2022. 6. 25. JavaScript 자바스크립트 변수 자바스크립트는 동적타입언어라서 변수의 타입을 미리 선언할 필요가 없습니다. 외적으로 타입이 없는 것 뿐이지, 내부적으로 자료형이 존재합니다. 변수 이렇게 적으면 100200으로 출력이 되기 때문에 수정해줘야한다. 처음에 2022. 6. 9. javaScript 자바스크립트 기초문법 1. 내부 스크립트 코드 2 .외부 스크립트 코드 tip) 자바 스크립트 논리 오류의 디버그는 개발툴 콘솔 오른쪽에서 빨간색 x창이 뜨면 창 밑에서 확인이 가능하다 2022. 6. 9. 이전 1 2 3 다음
