- open.html
새로운 window 객체 생성
moveTo(x, y) : 절대적 위치 이동
moveBy(x, y) : 상대적 위치 이동
<script>
// var child = open("http://www.naver.com", "child", "width=600, height=300. location=no, resizeble=no", true); // open되는 새 창은 자식의 형태.
// 자식이 부모를 제어하기 위해 사용되는 객체 opener
var child = open("", "", "width=300, height=500"); // 부모에서 자식을 제어
child.document.write("<h1>hello world</h1>");
alert(child); // [object Window]
child.moveTo(0,0);
var timer = setInterval(function() {
child.moveBy(10, 10);
}, 500); // 500ms동안 함수를 하겠다.
setTimeout(function() {
clearInterval(timer);
child.close();
}, 5000); // 5초이후에 timer 해제 > 자식창 닫음.
</script>
- window, location, navigator, history, screen, document 객체
<script>
// 위치 기반 서비스
// 1. GPS : 매우 정확, 배터리 광탈 watchPosition
// 2. 통신의 위치 : 부정확, 배터리 효율 좋은 편 getCurrentPosition
var obj = navigator.geolocation;
for(var i in obj) {
document.write("<h3>", i + " ::: " + obj[i] + "</h3>");
}
alert(onload); // null
window.onload = function() {
alert("안녕");
}
alert("세상"); // 안녕보다 먼저 뜸
</script>
</head>
<body>
<h1>hello world</h1>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<script>
window.onload = function() {
var h1 = document.createElement("h1");
var text = document.createTextNode("hello world");
var body = document.getElementsByTagName("body"); // 배열
h1.appendChild(text);
body[0].appendChild(h1);
var img = document.createElement("img");
img.src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"; // attribute 추가
img.alt="구글로고";
img["style"] = "width:200px";
img.setAttribute("id", "img1");
img.setAttribute("data-java", "자바"); // 커스텀
body[0].appendChild(img);
// javabean : getter 파라미터0, setter 파라미터1 >>
// 일반적으로 getter보다 setter가 파라미터가 한 개 더 많음.
// alert(document.body.innerHTML);
// alert(document.body.innerText);
document.body.innerHTML += "<h1>추가된 내용</h1>"; // 엄청 많이 씀.
// appned는 태그개수가 많아지면 느려짐.
var myId = document.getElementById("myId");
alert(myId.innerText); // 하이1만 나옴 > id 중복되면 안 됨!!!
// 기본이벤트
document.getElementById("myId2").onclick = function(e) {
// alert(this.innerText);
this.style.color = "blue";
this.style.border = "1px solid"; // this : 가장 가까운 문서객체 찾으면 됨. myId2
console.log(e);
console.log(event); // 이벤트 생성될 때 자동 생성
console.log(event == e);
}
document.getElementById("myId2").click(); // 이벤트 강제실행
}
</script>
</head>
<body>
<h1 id="myId" style="color: red;" onclick="alert(this.innerText)">하이1</h1>
<h1 id="myId2">하이2</h1>
<h2>안녕안녕</h2>
</body>
</html>
<body>
<button id="btn1">버튼1</button>
<button id="btn2">버튼2</button>
<h1 id="h11">0</h1>
<h1 id="h12">0</h1>
<!-- 이벤트 중첩 상태 >> 이벤트 전달 버블(기본)-->
<div onclick="alert(0)">
<div onclick="alert(1); event.stopPropagation();">
<div onclick="alert(2)">
<h2 onclick="alert(3)">헬로</h2>
</div>
</div>
</div>
<a href="https://www.naver.com" title="네이버" onclick="return confirm(this.title + '로 이동?');">네이버로 이동</a> <!-- 기본 이벤트 -->
<!-- return confirm으로 true, false를 리턴함. -->
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var h11 = document.getElementById("h11");
var h12 = document.getElementById("h12");
btn1.addEventListener("click", function() {
var text = h11.innerText / 1;
text++;
h11.innerText = text;
});
var fn = function() {
alert('고전맨');
};
btn2.addEventListener("click", fn);
btn2.addEventListener("click", function() {
var text = h12.innerText / 1;
text++;
h12.innerText = text;
btn1.click();
btn2.removeEventListener("click", fn);
});
// onload :
// 클라이언트(0) 요청중(반시계)(1) 서버(2) 응답중(시계)(3) 클라이언트(4) readystate
// server status
// 100번대 : 준비, 전송중
// 200번대 : 수신 완료 v
// 300번대 : 일시적 장애
// 400번대 : 클라이언트 귀책 v
// 500번대 : 서버 귀책 v
// === !== 타입까지 비교
// 10 == "10" true
// 10 === "10" false
// 표준 이벤트 > 두 개 이상 등록 가능
// function() {
// var text = h11.innerText / 1; // 문자타입을 숫자타입으로.
// text++;
// h11.innerText = text;
// }
btn2.onclick = function() { // 덮어씌워짐 고전이벤트의 한계
var text = h12.innerText / 1;
text++;
h12.innerText = text;
btn1.click(); // 이벤트 강제발생
}
btn2.onclick = function() {
alert('고전맨');
}
// 이벤트와 관련해 발생될 수 있는 사항
// 기본 이벤트
// 태그별 기본적으로 동작하는 이벤트 (a href, input submit ..)
// 기본 이벤트 제거 함수 event.preventDefault();
// 이벤트 전달
// 기본형식 : 버블링 (자손 > 부모로 이벤트 전달)
// 이벤트 전달 방지 함수 event.stopPropagation();
</script>
</body>
'자바스크립트' 카테고리의 다른 글
| jQuery 이벤트, ajax 21. 03. 04. (0) | 2021.03.05 |
|---|---|
| jQuery 21. 03. 03. (0) | 2021.03.03 |
| 속성과 메서드 21. 02. 26. (0) | 2021.03.02 |
| Part 03. js 코어 라이브러리(Date, Array) 21. 02. 25. (0) | 2021.02.25 |
| Part 03. js 코어 라이브러리(타이머 함수, Math, String) 21. 02. 24. (0) | 2021.02.25 |
