728x90
반응형
■ css와 js 분리 (loveline)
□ CSS1.css
@charset "EUC-KR";
body{background-color:yellow}
body{background-color:yellow}
#fdiv{font-size:30px;}
#sdiv{font-size:30px;}
.kongjoo{font-size:25px}
□ event.js
//이 파일명은 event.js
// <body onload="kaja();"> // 웹페이지가 로딩될 때 // 이러면 여기에 html이 들어감
window.onload = function(){ // 객체.속 = 값 --> 객체.이벤트 = 이벤트처리함수
// tag 사용없이 load
// 평강공주러브라인 버튼을 click하는 문법이 필요하므로 dom 접근을 사용하여
var kong = document.getElementById('kong'); // id = "kong"
// 객체
// 버튼을 click하는 것은 onclick ==> 대신에 kong.addEventListener(인자1, 인자2, 인자3)를 사용
if(kong != null){ //객체가 에러없이 제대로 만들어졌으면 click이 가능함
// 평강공주러브라인버튼을 누르면 --> JJIK 함수 처리하러 가
if(kong.addEventListener) // 브라우저가 표준형인가? 이런 용어를 쓸 수 있는 브라우저인가? // dom의 동적메소드
// 객체.메소드 호출형식인데 인자는 x
kong.addEventListener('click', Kaja.JJIK, false); // 표준형
else // 이벤트(on x), 처리할 함수(호출문), event-capture
// (캡쳐 부모x이므로 targer-bubble)
kong.attachEvent('onclick', Kaja.JJIK); // ie // capture 이벤트 x
// document.form1.onclick=kaja // ie 7, 8
} // if-end
}
//var kaja1=30; //변수 var kaja2={ } //객체 //new x
//자바 객체.속성 클래스명.속성
var Kaja = { // Kaja 객체, new x --> Kaja.메소드() Kaja.속성
// 속성:값 // 현재 속성은 x
// JJIK 메소드 o
JJIK:function(event){ // JJIK 메소드, do you remember JSON?
// 브라우저마다 맞춰서 하자 : cross browsing
if(document.getElementById('kaja1') != null // <div> 에러가 아니면
&& document.getElementById('kaja2') != null){ // kaja1, kaja2가 접근 가능하다면 (해당 id가 존재해야 함)
document.getElementById('kaja1').innerHTML = "babo"; // div의 내부에다 "babo" 문자를 넣어
document.getElementById('kaja2').innerHTML = "ondal";
// 객체.속성 = 값의 형식이므로 setText()
// <div id=kaja1"></div><br>
// <div id=kaja2"></div><br>
}
} // JJIK 메소드-end
} // Kaja-객체-end
□ loveline.html
<!DOCTYPE html>
<html>
<head>
<!-- 웹브라우저와 웹서버가 서로 정보를 주고 받는 -->
<!-- name meta에 있는 내용의 형식 등 -->
<meta charset="UTF-8">
<!-- 이 정의를 먼저 실행하고 웹페이지 로딩 -->
<meta name="auther" content="박미래"> <!-- 개발자 -->
<meta name="keywords" content="MVC,html5"> <!-- 검색엔진에서의 검색 키워드 -->
<title>LOVELINE</title>
<!-- 이 파일명은 loveline.html -->
<!-- 지금 파일에는 반드시 html만 존재, 왜? MVC -->
<link rel="stylesheet" href="CSS1.css">
<!-- 추후 작성시 webapp - 마오 - new - css file(file) - CSS1.css -->
<script src="event.js"></script><!-- 외부파일 call하여 사용 -->
<!-- 추후 작성시 webapp - 마오 - new - javascript file(file) - event.js -->
</head>
<body>
<!-- 여기에는 html 문법만 나와야 한다 -->
<div id="fdiv">
<ul>
<li>옛날 옛날에............</li>
<li>평강공주가 사랑한 사람은...........</li>
</ul>
<input type="button" id="kong" class="kongjoo" value="평강공주의 러브라인">
<ul>
<li>믿을만한 소식통이........</li>
<li>말하기를...그사람은 바로</li>
</ul>
<div id="sdiv">
<div id="kaja1"></div><br>
<div id="kaja2"></div>
</div>
</div>
</body>
</html>
□ onclick의 문제
onclick이 한개의 버튼에 onclick이 두 개 등록되어 있다면?
- 맨 뒤의 것만 수행한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function f2(){
alert("아예")
}
function f3(){
alert("오예")
}
</script>
</head>
<body>
<!--
onclick = "kaja()
두번 이상 나올 경우 맨 뒤의 것만 수행 ex) alert("오예")
-->
<form name="form1">
<input type="button" name="button1" value="가자">
</form>
<script> // 객체.이벤트 = 이벤트처리함수
document.form1.button1.onclick = f2
document.form1.button1.onclick = f3
</script>
</body>
</html>
ㅁ addEventListener
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function f2(){
alert("아예")
}
function f3(){
alert("오예")
}
</script>
</head>
<body>
<form name="form1">
<input type="button" name="button1" value="가자">
</form>
<script> // 객체.이벤트 = 이벤트처리함수
/* document.form1.button1.onclick = f2
document.form1.button1.onclick = f3 */
// f2, f3 전부 출력 (가자 버튼을 한번 클릭하니 "아예" "오예"가 차례대로 출력)
// event flow에서 capturing 없다는 뜻.
document.form1.button1.addEventListener('click', f2, false)
document.form1.button1.addEventListener('click', f3, false)
</script>
</body>
</html>
□ addEventListener (비표준)
다음은 비표준 방식이기 때문에 한번 보기만 하자.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function f2(){
alert("아예")
}
function f3(){
alert("오예")
}
</script>
</head>
<body>
<form name="form1">
<input type="button" name="button1" value="가자">
</form>
<script> // 객체.이벤트 = 이벤트처리함수
/* document.form1.button1.onclick = f2
document.form1.button1.onclick = f3 */
// f2, f3 전부 출력 (가자 버튼을 한번 클릭하니 "아예" "오예"가 차례대로 출력)
// event flow에서 capturing 없다는 뜻.
/* document.form1.button1.addEventListener('click', f2, false) // true면 capture를 먼저 해야 함
document.form1.button1.addEventListener('click', f3, false) */
// 이것이 표준형
document.form1.button1.attachEvent("onclick", f2)
document.form1.button1.attachEvent("onclick", f3)
// 실행하면 답이 제대로 안 나온다.
// 왜? 비표준이기 때문
</script>
</body>
</html>
□ 버블링 캔슬
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function mut(){
alert("멋있어")
}
function sa(){
alert("사랑해")
}
function ebbu(){
alert("이-뻐")
}
</script>
</head>
<body>
<!--
이벤트 flow
구조 document - div - span / 나를 target이라고 한다면 부모는 capture(나보다 먼저 수행되는 이벤트), bubble(나보다 나중에 수행되는)
이벤트는 나만 하는 게 아니라 부모것도 같이 하게 되어있음
-->
<script>
document.onclick = ebbu // 오리지널 문법이 값이므로 ()가 없다
/* 객체.속성 = 값 / 객체.이벤트 = 이벤트핸들러 */
</script>
<div onclick="mut()">
나 어때?
</div>
<div onclick="mut()">
<span onclick="sa();event.stopImmediatePropagation()"> <!-- ;event.stopImmediatePropagation() : target만 실행하고 바로 종료 -->
신상 입은 나 어때?
</span>
</div>
<!-- <span onclick="sa();event.stopImmediatePropagation()"> -->
</body>
</html>
□ 토글(toggle)
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
.menu1{ /* 큰메뉴 디자인 */
cursor:pointer; /* old : hand */
color:blue;
background-color:pink;
font-size:20pt;
}
.menu2{ /* 소메뉴 디자인 */
color:red;
background-color:yellow;
font-size:10pt;
}
</style>
<script>
function kaja(bada){
// 지금 소메뉴가 숨어있어 ==> 보이게 해
// 아니면 숨겨
// css의 속성을 자바스크립트에서 사용할 경우
// style을 붙여서 사용
if(bada.style.display == "none")
bada.style.display = "block"; // show
else
bada.style.display = "none"; // hide
}
</script>
</head>
<body>
<!--
toggle 메뉴 방식
버튼 누르고 지금 on ==> off, off=> on
-->
<!-- 주메뉴 -->
<div class="menu1" id="bigmenu1" onclick="kaja(document.getElementById('somenu1'))">
CEO
</div>
<!-- 부메뉴 -->
<div class="menu2" id="somenu1" style="display:none;"> <!-- 지금 내용 숨김. 보이는 것은 display:block -->
<ul>
<li><a href="#">CEO 철학</a>
<li><a href="#">CEO 소개</a>
</ul>
</div>
<div class="menu1" id="bigmenu2" onclick="kaja(document.getElementById('somenu2'))">
회사소개 및 연혁
</div>
<div class="menu2" id="somenu2" style="display:none;"> <!-- 지금 내용 숨김. 보이는 것은 display:block -->
<ul>
<li><a href="#">회사소개</a>
<li><a href="#">회사연혁</a>
</ul>
</div>
</body>
</html>
메뉴를 클릭하면
□ 토글(toggle) 2
이번에는 가장 마지막으로 누른 메뉴의 소메뉴만 열리도록
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
.menu1{cursor:pointer; color:blue; background-color:pink; font-size:20pt;}
.menu1{color:red; background-color:yellow; font-size:10pt;}
</style>
<script>
// 우선 소제목은 다 숨기고 드런 다음 내가 누른 마지막 소제목만 나오게.
function kaja(bada){
// (1) 현재 메뉴가 3개이므로 3개의 소메뉴를 무조건 닫음
var somenu1 = document.getElementById('somenu1')
somenu1.style.display = "none" // 자바스크립트에서는 객체.속상 = 값 // css
// <style> 태그를 사용시 display:none;
var somenu2 = document.getElementById('somenu2')
somenu2.style.display = "none"
var somenu3 = document.getElementById('somenu3')
somenu3.style.display = "none"
// (2) 최근 누른 것을 bada가 받았으니 그것만 보이게 함
bada.style.display = "block" // display:block
// 내가 누른 것만 소제목 나와
}
</script>
</head>
<body>
<!-- 주메뉴 -->
<div class="menu1" id="bigmenu1" onclick="kaja(document.getElementById('somenu1'))">
CEO
</div>
<!-- 부메뉴 -->
<div class="menu2" id="somenu1" style="display:none;"> <!-- 지금 내용 숨김. 보이는 것은 display:block -->
<ul>
<li><a href="#">CEO 철학</a>
<li><a href="#">CEO 소개</a>
</ul>
</div>
<div class="menu1" id="bigmenu2" onclick="kaja(document.getElementById('somenu2'))">
회사소개 및 연혁
</div>
<div class="menu2" id="somenu2" style="display:none;"> <!-- 지금 내용 숨김. 보이는 것은 display:block -->
<ul>
<li><a href="#">회사소개</a>
<li><a href="#">회사연혁</a>
</ul>
</div>
<div class="menu1" id="bigmenu3" onclick="kaja(document.getElementById('somenu3'))">
회사게시판
</div>
<div class="menu2" id="somenu3" style="display:none;"> <!-- 지금 내용 숨김. 보이는 것은 display:block -->
<ul>
<li><a href="#">공지사항</a>
<li><a href="#">자유게시판</a>
</ul>
</div>
<!-- 지금 만들어야하는것은 ?
최근 클릭한 것 한개만 소제목 나오고 나머지 소제목은
몇개가 되던 모두 close되어야 하는 문제
==> 그리고 모두 kaja() 함수를 찾아감
그러므로
-->
</body>
</html>
□ window.location + setTimeout
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
function kaja(){
// bom(browser object model) 객체 (정의나 생성 x, 사용 o)
window.location = "http://www.daum.net" // 객체.속성 = 값
}
</script>
</head>
<body onload="setTimeout('kaja()', 5000)"> <!-- 자바스크립트에서는 window.onload = -->
<h1>
홈페이지가 변경되었습니다<br>
조금만 기다려 주세요. http://www.daum.net으로 이동합니다<br>
물론 안 기다리고 바로가는 사이트도 있습니다.<br>
http://www.dhteumeuleu.com 같은 경우<br>
</h1>
</body>
</html>
<!--
자바에서 thread 일종
Timer
html에서는 marquee
setTimeout(인자1, 인자2)
ㄴ 인자1 : 처리할 내용 인자2 : 간격
setInterval
-->
□ document.referrer
직전주소값을 알아내어 kaja.html을 거치지 않으면 kaja.html로 이동시킨다.
* kaja.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h2>여기를 거쳐야 한다.</h2>
<h1>(공지) 즐거운 프로그래밍</h1>
<a href="512_002_js_document_referrer.html">이동</a>
</body>
</html>
* 512_002_js_document_referrer.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>document</title>
<!-- 지금 여기가 메인 사이트 페이지라고 가정해보자. -->
<!-- 자바 indexOf :
(1) 해당 단어의 첫글자가 몇번째에 있느냐 indexOf("babo")
(2) babo라는 글자가 포함되어 있어? -- 내포된 또다른 의미
-->
<script>
function kaja(){
// 반드시 거쳐야 할 페이지가 있다면
if(document.referrer.indexOf('kaja.html') == -1){ // -1 없는 경우
alert("kaja.html 페이지를 거쳐서 오셔야 합니다!");
window.location.href = "kaja.html"; // 객체.속성 = 값
} else{
alert("절차를 잘 따라오셨네요.");
alert("document.referrer : " + document.referrer); // 직전주소 가지고 있는 곳
}
}
</script>
</head>
<body>
<h3>document.referrer</h3>
<script>
kaja();
</script>
</body>
</html>
<!--
어떤 사이트를 들어갈 때
(1) 회원가입을 하고 (2) 로그인해서 (3) 사이트로 들어간다
그런데 웹페이지 구조상 사이트로 바로 가는 경우가 생길 수 있다.
이 경우에는 거쳐온 [전체]경로를 확인할 수 있을까? history 객체 > history.go(-1)
직전 주소를 물어봐서 체크할 경우도 문제해결이 가능
[직전] 주소를 알 수 있는 것은 document.referrer
-->
□ 팝업
* 512_003_popup_n_Cookie.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>공지사항</title>
<script>
var wopen;
function kaja_pop(){
wopen = window.open("512_popupWin1.html", "popwin1", "width=500, height=300, top=20, left=500")
}
</script>
</head>
<body onload="kaja_pop();">
<h1>오늘 날씨가 좋다</h1>
<h2>BUT popup 창이 안 보인다면</h2>
<h2>당황하지 말고 우측 위에서 팝업차단을 해제</h2>
</body>
</html>
<!--
쿠키(cookie) : 서버에서 만들어서 클라이언트로 전송하는 작은 파일
-->
<!--
1) 공지사항 창 = popup window
2) + 오늘 하루 이 창문 열지 않음 ==> 쿠기 popup창
공지사항 창 parent창에 child window로 열림
window.open("공지사항파일명", alias, "상태정보1, 정보2, 정보3, ...") ==> 인지갯수 총 3개
<!--
커피숍과 수리 안내 공지사항 뜨게(잘하는 것임)
window.open("popupWin2.html", "popupWin1",
"width=370, height=300, top=20, left=350, location=no, menubar=0") // 커피숍 공지사항
window.open("popupWin3.html", "popupWin2",
"width=370, height=300, top=20, left=350 location=no, menubar=0") //2층 출입문 수리공지사항
커피숍 공지사항만 2번 쯤(문제있음)
window.open("popupWin2.html", "popupWin1",
"width=370, height=300, top=20, left=350, location=no, menubar=0") // 커피숍 공지사항
window.open("popupWin2.html", "popupWin2",
"width=370, height=300, top=20, left=350 location=no, menubar=0") // 커피숍 공지사항
-->
* 512_popupWin1.html
<!DOCTYPE html>
<html>
<head>
<!-- 512_popupWin1.html 이름으로 만든다 -->
<meta charset="EUC-KR">
<title>알려드립니다</title>
</head>
<body style="background-color:yellow;">
<h3>공지사항</h3>
<h1>
<pre>
3층 커피숍에서 1+1 행사중입니다
많은 이용바랍니다.
</pre>
</h1>
<hr>
<div onclink="self.close()">닫기</div>
<!-- 우측상단 x표시를 클릭해도 닫김 -->
</body>
</html>
□ 쿠키와 팝업
쿠키를 이용해서 하루동안 이 창을 띄우지 않습니다. 활성화
* 512_cookieWin1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<!-- 512_cookieWin1 (팝업창) -->
<title>Insert title here</title>
<script>
// (1) 체크표시 안 하고 팝업창을 닫음 -> 그냥 끝남 (실행시마다 팝업창이 뜸)
// (2) 체크표시하고 팝업창을 닫음 -> 꼭 하루동안(24h) 팝업창이 안 뜸
// onunload는 popup창을 닫았다는 의미
// 객체.속성 = 값
window.onunload = function(){
kajaCookie(); /* 함수호출문 */
// 체크해도 가고 안 해도 감
}
function kajaCookie(){ // 메소드(함수) 정의문
// javascript는 계층구조이므로
if(document.f1.chk1.checked == true){// 객체.속성
var oneul1 = new Date() // 10월 11일 14시 35분이라면
oneul1.setDate(oneul1.getDate() + 1)
// 11일에서 +1 = 12일을 넣으니까 10월 12일 14시 35분
// 객체.속성 = 값 // 쿠키이름 = 쿠키값;유효기간
document.cookie = "annaeCookie=kongji1;expires="
+ oneul1.toUTCString() // 객체.속성 = 값 // GMT
// 10월 12일 14시 35분 - 9 ==> 10월 12일 05시 35분이 저장된다.
// 우리나라인 경우 천문대시간 -9시간 = 그리니치천문대시간()
// GMT ==> toGMTString() ==> toUTCString()
// path=/;secure
// ㄴ http인 경우 쿠키가 암호화 없이 전송 (secure를 사용하면 https)
} // if-end // check가 안 되어있으면 쿠키 만들지 않고 끝
} // kajaCookie()-end
</script>
</head>
<!--
+ oneul1.toGMTString() ==> 이전방식(그리니치천문대)
universal time + coordinate (세계협정시)
우리나라 +9 (9시간 빠름)
// 날짜가 지나면 쿠키는 자동 삭제됨
-->
<body style="background-color:yellow">
<h3>오늘의 이벤트</h3>
<pre>
오늘 5시까지 3층 커피숍을 이용하시면
무료 시음권 2장 드립니다.
많은 이용 바랍니다
</pre>
<hr>
<!-- 만일 체크 여부를 확인할 경우 쇼핑몰 구매일 경우에는 서버쪽에서 판단을 해서 금액을 정산하고 배달까지 -->
<!-- 서버사 아니라 클라이언트에서 판단을 할 경우 판단 자체는 가능 -->
<form name="f1">
<input type="checkbox" name="chk1">
지금부터 하루동안 이 창문 띄우지 않습니다
</form> <!-- 계층구조 document.f1.chk1 -->
</body>
</html>
* 512_004_cookie_main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--
<쿠키형식>은
쿠키명 = 쿠키값; expires = 유효기간
쿠키가 사라지는 경우는 : (1) 유효기간 종료 (2) 고객이 직접 삭제
alert(document.cookie) : 모든 쿠키정보가 들어가는 것
(참고) alert(document.referrer) :
indexOf("ondal") babo is not ondal, ondal is smsart..
- o라는 글자는 앞에서부터 20번째에 있네 (or ondal이라는 글자가 있어?)
<로그인> <서점검색>
c언어 strcmp("자바) strstr("자바")
자바 .equals("자바") indexOf("자바")
자바스크립트 == indexOf("자바")
-->
<script>
// 객체.속성 = 값 객체.이벤트 = 이벤트핸들러(event handler)
window.onload=function(){kaja();}
function kaja(){ // 쿠키명 = 쿠키값
if(document.cookie.indexOf("annaeCookie=kongji1") == -1){ // not이면 아래 popup창 띄우자
window.open("512_cookieWin1.html", "cookieWin2",
"width=500, height=300, top=20, left=500, location=no")
} // window.open(인자1, 인자2, 인자3)
}
</script>
</head>
<body style="background-color:cyan">
<h3>popup창 열자</h3>
<pre>
여기는 본문이 있는 곳으로
본문은 말 그대로 본문이다.
</pre>
</body>
</html>
□ google - geolocation
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
// 객체.속성 = 값 -> 객체.이벤트 = 이벤트 핸들러(handler)
window.onload = function(){
if(navigator.geolocation){ // 객체.속성 // 이런 것 사용가능해
// navigator 객체(브라우저에 대한 정보 등을 알아내는) - geolocation(현재 나의 위치)
// cf. NETSCAPE사 (modila) navigator
// mobile : gps 모듈로 pc : geolocation api로
// IE는 x
navigator.geolocation.getCurrentPosition(kajaWichi1) // user의 현재 위치
// kajaWichi1은 [호출문] 역할
}else
alert("지금의 경우 위치를 알아낼 수 없습니다.")
} // onload - end
// 현재 위치를 알아내는 정의문 // wichi1 -> 보이진 않지만 내부적으로 인자를 전달, 처리할 때
function kajaWichi1(wichi1){ // coords : 위치객체 (Coordinates)
var wido1 = wichi1.coords.latitude // 위도는 -90 ~ +90 degree
var kyungdo1 = wichi1.coords.longitude // 경도는 -180 ~ +180 degree
alert("위도는" + wido1 + " 경도는" + kyungdo1)
}
</script>
</head>
<body>
<!-- edge ? chrome? 누가 더 정확한가 -->
<h1>나의 위치</h1>
<pre><h3>지도를 그리기위해 위도와 경도를 알아보자
자바스크립트 geolocation API </h3></pre>
<h3>잘 나오는 구만~</h3>
<!-- 위도는37.5818549 경도는126.986331 -->
</body>
</html>
<!--
geolocation
위치를 찾아주는데 pc의 경우는 web browser 사용중 ip address를 통해
모바일
-->
<!--
mashup 매쉬업
미국부동산
구글지도 + 부동산
융합
http://www.housingmaps.com/ ==> 중간 map view 클릭
-->
콜백함수에 대한 추가설명
□ 구글맵
등록키 없는 상태에서 구글지도 출력.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<!-- 반응형 웹과 연관, viewport를 통해서 모바일에서도 제대로 지도내용을 볼 수 있고 확인할 수 있다. -->
<!--
맛집 띄우기, 찾아오시는 길
구글지도에서 이곳이 궁금한가요?를 해도 위도, 경도 알려주는 것 안 함
여기서는 구글지도 등록키 없이 나오는 것을 보자.
아쉬운 대로 카카오지도를 사용해보자.
-->
<!--
내용화면크기(contents 영역), apple에서 시작,
1.0 뷰포트의 초기 화면배율은 1 (0~10 사용)
(device-width, device-height)
no : 크기조절 안 함
-->
<script src="https://maps.google.com/maps/api/js?sensor=false"> </script>
<script>
window.onload = function(){ // IE나 chrome중 더 정확한 값 넣기
if(navigator.geolocation){ // 지금 브라우저에서 geolocation을 사용 가능해?
navigator.geolocation.getCurrentPosition(kajaWichi1)
}
} // window.onload-end
function kajaWichi1(wichi1){
var wido1 = wichi1.coords.latitude
var kyungdo1 = wichi1.coords.longitude
// 그릴 지도 내용 준비
var joongang1 = new google.maps.LatLng(wido1, kyungdo1)
// var joongang1 = new google.maps.LatLng(37.5818549, 126.986331) // 위도, 경도
// 해당 위도, 경도를 지도의 중앙으로 위치하기 위한 것
var mapDesign1 = { // json 속성:값
zoom:15,
center:joongang1,
mapTypeId:google.maps.MapTypeId.ROADMAP
// mapTypeId:google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("jido1"), mapDesign1);
// 지도를 그리자
}
</script>
</head>
<body>
<div id="jido1" style="width:700px; height:700px">이 안에 지도 너 있다.</div>
</body>
</html>
<!--
api : application programming interface
(미리 작성을 해놓아서 쉽게 완성이 가능, 개발사에서 작성한 규칙대로 만들어야 한다.
.sort() 모듈 <- 회사 api(library)
결제 프로그램 작성 <- 결제 api(아임포트)
지도 api(api key를 요구) : kakao map을 사용(자바스크립트 key를 받아 저장)
-->
<!--
### 카카오맵 키 발급 설명
http://apis.map.daum.net/web/guide/
### 발급을 위한 순서
- https://developers.kakao.com/ 로 가서 회원가입 및 로그인
- 내 애플리케이션 - 애플리케이션 추가하기("앱 만들기") 클릭
- 계속 진행
- 아이콘 상관없이 이름 넣고 - [앱 만들기]로 키 발급받음
- 발급된 자바스크립트키 확인 (자바스크립트 키가 app키)
- 플랫폼 클릭 - web 등록 클릭 - (설정 - 플랫폼 - 플랫폼 추가 버튼 클릭)
- 웹을 선택 - 도메인은 https://localhost:8080 후
(url 2개 등록도 가능) - [추가]버튼 (꼭 잊지 않고 해야 함, 이것 안 하면 가동 안 됨)
-->
□ 카카오맵
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>kakao map</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=4f69f9719e9fd31d1821a3687e9f245a"></script>
<script>
window.onload = function(){
var joongang1 = new kakao.maps.LatLng(37.5818549, 126.986331);
var mapDesign1 = {
zood:15,
center:joongang1,
mapTypeId:kakao.maps.MapTypeId.ROADMAP // HYBRID
};
var map = new kakao.maps.Map(document.getElementById("jido1"), mapDesign1)
// 맛집의 위, 경도를 알아내서 marker를 표시하려면
// 위 사이트에서 "클릭이벤트등록하기"를 클릭해서 제주도가 나오므로
// 서울로 올라와서 찾고자 하는 음식점 위치에 마우스를 클릭하면
// 바로 아래에서 위도와 경도를 확인 가능하다. 즉 해당 위, 경도에 마커를 붙이면 된다. (마커 생성하기를 찾는다.)
// 마커가 표시될 위치
var markerPosition = new kakao.maps.LatLng(37.5818549, 126.986331)
// 마커 생성
var marker = new kakao.maps.Marker({
position:markerPosition
})
marker.setMap(map)
}
</script>
</head>
<body>
<div id="jido1" style="width:700px; height:700px;">
여기에 지도 나온다.
</div>
</body>
</html>
□ localStorage
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>ohye</h1>
<div id="coun_div"></div>
<script>
if(localStorage.counter == null){
localStorage.counter = 1;
} else{
localStorage.counter ++;
}
var counter_div = document.getElementById("coun_div")
counter_div.innerHTML = localStorage.counter
</script>
</body>
</html>
<!--
실행은 새로고침을 누를 때마다 카운터가 1씩 증가함
그렇다면 저장은 F12(브라우저 검사) - application - 왼쪽 storage 아래 localStrorage 아래
해당 url을 클릭하면 key-value를 확인 (key는 counter, value 숫자)
주로 session 등을 저장할 때..
-->
<!--
자료를 저장 > file / db
어플(앱)에서 자료를 저장 sqlite (폰에 저장, 파일 하나) (예) 명함 어플
-->
□ json - stringify
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<script>
var d1 = new Date(2023, 5-1, 15, 13, 47, 00)
alert(d1) // Mon May 15 2023 13:47:00 GMT+0900 (한국 표준시)
// 문자열출력 ("2023-05-13...")
var str2 = JSON.stringify(d1); // javascript to 문자열 (decoding)
alert(str2) // "2023-05-15T04:47:00.000Z" (-9시간으로 출력)
// 문자열 to javascript
// var str1 = {"irum":"hong", "na2":35} // json
var str1 = '{"irum":"hong", "na2":35}' // 문자열
var jsonObj1 = JSON.parse(str1); // 문자열 to javascript (encoding)
alert(jsonObj1.irum + " " + jsonObj1.na2) // 객체.속성 출력
</script>
</body>
</html>728x90
반응형
