8. 지도 나타내기 (현재위치 화살표표시 & 위/경도 출력)

구글맵 API를 이용해서 지도 나타내기 (현재위치 표시, 위경도 출력) 어떻게 만들건지 기본적인 틀을 짜도록 하자. 위치찾기버튼 중단버튼 위경도를 보여줄 div 지도를 보여줄 div => 총 버튼2개, div2개를 만들어놓도록 하자. 1 2 3 4 5 6 7 위치확인시작 위치확인중단 맵 로딩 예정입니다. 이제 본격적으로 기능을 작성해야하는데, 다소 주석처리들로 인해서 보기 불편할 수 있을까봐 재차 코드를 작성하면서 풀어서 설명하겠습니다. 가장 먼저 구글 맵 API를 가져와서 사용해야하기때문에 구글맵API를 아래와 같이 적용시켜줍니다. 그리고, 위치찾기버튼을 눌럿을경우, getCurrentPosition대신에 geolocation.watchPosition를 써도 됩니다. 매개변수도 똑같이 작성하면 됩니다...

• format_list_bulleted WEB 기초/Jquery
• · 2018. 4. 21.
• textsms

7. navigator를 이용한 현재 위도,경도 출력하기

BOM의 navigator 내장객체란? Jquery에는 DOM과 BOM이 있다고 했어요. 그 중에서 BOM (Browser Object Model)의 내장객체중에서 navigator이 있습니다. 인터넷 웹 서칭을 하다보면 지도를 많이 볼 수 있을거에요. 지도를 직접 웹에 불러오도록 하는 것을 아래 코드를 통해서 보여드릴게요. 우선, 이번 글에서는 navigator를 통해서 현재 ip의 위도,경도를 브라우저에 출력하도록 할게요. 버튼타입을 누름으르써, 해당 결과값이 출력되도록 설계를 할 수 있습니다. 그렇다면, 아래와 같이 input타입의 button과 결과를 받아볼 수 있도록 div를 만들어 주면 됩니다. 1 2 3 4 5 기본적인 틀이 만들어 졌다면, 이제 Jquery를 통한 기능들을 작성해야겠죠? S..

• format_list_bulleted WEB 기초/Jquery
• · 2018. 4. 21.
• textsms

6. 이미지나열 이벤트 & 타이머 (심화문제)

이미지나열& 타이머를 통한 이벤트_심화문제 !! 모두들 이번 문제까지 열심히 풀고 마스터 고고!! 지정된 이미지배열을 for문안에서 after이벤트를 이용해서 순나열한다. 그리고, 타이머이벤트를 통해서 끝에서부터 하나씩 그림을 없애면서 경고창으로 이미지배열길이를 보여준다. 마지막으로, 이미지가 없어지면 타이머를 종료하도록 설정하는 문제. 우선, 제일 먼저 알아야할 것은 1) 가 작성되어 있는지 확인한다. 2) 현재 작성파일과 같은 경로에 jquery-3.2.1.min.js파일이 있는지 확인한다. 3) 있다면, 가장 먼저 JQuery시작문법으로 작성은 $(document).ready(function(){});를 해야한다. 4) 이미지배열을 통해 이미지를 브라우저에 보여주기위해서 경로설정을 잘 해야한다. /..

• format_list_bulleted WEB 기초/Jquery
• · 2018. 4. 21.
• textsms

5. 버튼클릭 이벤트 (심화문제)

문제1) 클릭버튼1개, 중단버튼1개, 한번만버튼1개 클릭버튼을 누르면 클릭횟수가 증가하고, 브라우저로 "클릭 x번 했습니다."를 출력된다. 중단버튼을 누르면 클릭버튼이 비활성화된다. 한번만 버튼을 누르고, 클릭버튼누르면 alert로 "한번만 전달하겠습니다"가 출력된다. (횟수증가 x) 이 코드에서 버튼을 눌럿을 때, 중단되도록 off이벤트를 사용했다. 또한, one이벤트를 이용해서 버튼클릭함수안에서 one이라는 이벤트는 단 한번만 실행되는 함수. 클릭횟수를 증가시키기위하여 함수안에서 cnt라는 변수를 전역변수로 사용함으로써, 버튼이 눌릴때마다 초기화가 되지않고 누적이 되도록한다. 간단하게 버튼이벤트를 이용하는 코드이지만, 추가적으로 함수안에 함수를 넣는 내용들을 조금은 주의깊게 보시기 바랍니다. 1 2 ..

• format_list_bulleted WEB 기초/Jquery
• · 2018. 4. 19.
• textsms

4. jquery 이벤트 총정리 (on, off, one, click, mouseover, mouseout)

이번에는 jquery를 이용한 이벤트처리 총정리 !! Jquery에는 많은 이벤트가 있는데, 우선 이벤트를 사용하는 방법부터 설명할게요. jquery기본문법 $(document).ready(function(){ 여기안에 새로운 함수를 작성합니다. $(선택자 또는 태그명) . 이벤트 (함수기능)을 작성하면 됩니다. 기본적으로 이벤트는 on이라고 붙여야합니다. on이 가장 기본이 된다고 생각하시면 됩니다. 첫번쨰) $(이미지).append(태그) : (앞).append(뒤) == 앞 뒤로 표시 $(이미지).prepend(태그): (뒤).prepend(앞) == 뒤 앞로 표시 $(선택자).after(태그): (뒤).after(앞) == 뒤 앞로 표시 $(선택자).before(태그): (앞).before(뒤) ..

• format_list_bulleted WEB 기초/Jquery
• · 2018. 4. 18.
• textsms

3. Css 제어_응용하기

안녕하세요. 스크립트태그내에서 제이쿼리사용하시면서 CSS태그 제어를 이전 게시글에서 언급햇엇죠? 조금 더 심화된 기능에 대해서 작성하려고 합니다. 하지만, 간단하기 때문에 어렵지 않게 읽어주셨으면 좋겠습니다. 이번에도 이 전 글과 똑같이 body를 아래와 같이 임의로 작성했습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 저녁에 뭐 먹을까요? 짜장 짬뽕 탕수육 군만두 우동 게시판이에요 번호제목작성자 번호제목작성자 번호제목작성자 번호제목작성자 번호제목작성자 번호제목작성자 번호제목작성자 번호제목작성자 그렇다면, 이제 이 글의 핵심내용을 아래의 코드를 통해서 설명해..

• format_list_bulleted WEB 기초/Jquery
• · 2018. 4. 16.
• textsms