<수업내용>
@객체
-> 자바스크립트에서도 객체를 선언해서 사용할 수 있음
@객체 선언 및 호출
-> 객체는 키 값을 사용하여 속성(멤버 변수) 식별
-> 객체 생성 시 중괄호 사용-> { }
-> 객체 접근시 대괄호[ ] 또는.으로 요소 값에 접근
-> 속성에 모든 자료형이 올 수 있음, 함수인 자료형도 가능
-> 객체 내에서 자신의 속성을 호출할 때 반드시 this 키워드 사용
##선언 방법
var 변수명(객체명) = {key1:value,key2:value2,key3:value3
## 속성값 접근 ##
변수명['key']
변수명. key
@BOM
-> Browser Object Model의 약자로 브라우저 객체 모델
-> 브라우저 정보, URL 정보, 모니터 화면정보 등을 취득하거나 제어할 수 있는 객체
-> 브라우저 객체의 최상위 객체는 window 객체
-> document, location, screen, history, navigator 가 있으며 계층적인 구조로 접근 가능
-> document는 DOM에 속함 (Document Object Model)
@window 객체
->자바스크립트에서 최상위 객체
->생성되는 모든 객체가 window객체 하위에 존재
->브라우저 창에 대한 설정
##window.open
->높이와 너비를 입력하면 팝업창이 띄워짐
->첫 번째 인수값 : 주소
->두 번째 인수값 : 열릴 경로
->세 번째 인수값 : 형태
##
setTimeout(함수,시간(ms)) :일정 시간 후 함수를 한번 실행 / id 값 리턴
setInterval(함수, 시간(ms)) :일정 시간마다 함수를 반복 실행/id 값 리턴
clearTimeOut(id) :setTimeout() 함수 실행 종료
clearInterval(id) :setInterval() 함수 종료
@window. onload
-> 윈도우 객체가 로드가 완료되면 자동으로 onload에 설정되어 있는 함수를 실행시키는 속성
-> 윈도우 객체 로드 완료 : 모든 태그가 화면에 나타난 때
@screen 객체
-> 클라이언트 운영체제 화면에 대한 속성 값을 가지는 객체
height : 화면 높이
width : 화면 너비
availWidth : 실제 화면에서 사용 가능한 너비
availHeight: 실제 화면에서 사용 가능한 높이
colorDepth : 사용 가능한 색상 수
pixelDepth : 한 픽셀당 비트 수
@location 객체
-> 브라우저 주소표시줄(URL)과 관련된 객체
-> 프로토콜 종류, 호스트 이름, 문서 위치 등의 정보를 가짐
hash
herf
reload()
@navigator 객체
-> 브라우저에 대한 정보를 가지는 객체
appCodeName : 브라우저 코드명
-> 최신 브라우저의 대부분은 호환성 이유로 "Mozilla"라고 반환
appName : 브라우저 이름
-> FireFox, Chrome, Safari, IE의 경우 모두 Netscape로 출력
appVersion : 브라우저 버전
platform : 사용 중인 운영체제
userAgent : 브라우저 전체 정보
cookieEnabled : 쿠키 가능성
geolocation : 위도와 경도
language : 브라우저 언어
onLine : 브라우저가 온라인/오프라인 환경인지
product : 브라우저 엔진 이름
@DOM
-> Document Object Model
-> HTML에 있는 태그를 객체화해서 자바스크립트에서 다룰 수 있게 한 것
##노드
-> HTML 태그를 구조화했을 때 각각의 태그가 노드
##요소 노드(elements node)와 텍스트 노드(text node)
->요소 노드 : 태그 그 자체
->텍스트 노드 : 태그에 기록되어있는 문자(innerHTML)
->텍스트 노드를 가지는 태그(h, p...), 가지지 않는 태그(img , input..)가 있음
## 텍스트 노드가 있는 문서 객체를 생성
#요소 노드 생성
document.createElement(태그명)
#텍스트 노드 생성
document.createTextNode(내용)
#태그에 자손으로 노드를 추가
객체명. appendChild(node)
<p> Hello </p>
-> p 요소 노드 생성
-> Hello 텍스트 노드 생성
-> p요소 노드에 Hello 텍스트 노드를 추가
##텍스트 노드가 없는 경우
->요소 노드 생성
->생성된 노드의 속성을 설정
->추가
객체명. 속성 = 속성 값
객체명. setAttribute(속성명, 속성 값)
객체명. getAttribute(속성명)
@문서 스타일 수정
-> style 객체를 이용해서 문서의 스타일을 변경
-> 객체명. style. 속성명 = 속성 값;
※ 자바스크립트에서 -를 쓰지 못하기 때문에 카멜 표기 법사용
ex) background-color - backgroundColor
@문서 객체 제거
-> 페이지 내 작성된 문서 객체를 제거하는 것
부모 객체명. removechild(객체명) 자손 태그를 삭제
객체명. remove() 해당 객체 삭제
<실습>
1. 객체
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
function test1(){
var testObj ={a:100,b:200};
console.log(testObj);
console.log(testObj.a); //1개확인
console.log(testObj['b']); //1개확인
testObj.a = 300;
testObj['b'] = 400;
console.log(testObj);
testObj.c = 500; //속성추가
console.log(testObj);
delete(testObj.c); //속성삭제
console.log(testObj);
// 키워드 in 객체명 (해당속성의 여부 확인)
// 해당 키워드가 있으면 true
console.log('a' in testObj);
console.log('c' in testObj);
var testObj2 ={
a:100,
b:200,
c:function(){
alert("Hello");
return "Test"; //결과값을 반환받으려면 return 해줘야됨.
}
}
console.log(testObj2)
console.log(testObj2.c());
testObj2.testFunc = function(){
alert("난 추가된 함수");
}
console.log(testObj2.testFunc());
var testObj3 ={a:1, b:true, c:"Hello"};
//1, true, Hello 라는 모든 값만 얻고 싶을때
//for in 문을 사용해야됨
for(var k in testObj3){
console.log(k+":"+testObj3[k]);
}
}
function test2(){
var name = prompt("당신의 이름은?");
var age = prompt("당신의 나이는?");
var addr = prompt("당신의 주소는?");
var object = {
name:name,
age:age,
addr:addr,
print:function(){
var str = "이름 : "
+this.name+"\n나이 : "
+this.age+"\n주소 : "
+this.addr;
return str;
}
}
console.log(object.print());
}
function test3(){
var objArr = [];
var test1 = {a:100,b:200};
var test2 = {name:"홍길동",addr:"서울"};
var test3 = {subject:"js"};
objArr.push(test1);
objArr.push(test2);
objArr.push(test3);
console.log(objArr);
console.log(objArr[0].a);
console.log(objArr[1].name);
console.log(objArr[1].addr);
}
</script>
<button type = "button" onclick="test1();">객체 확인</button><br><br>
<button type="button" onclick="test2();">객체 확인1</button><br><br>
<button type="button" onclick="test3();">객체 확인2</button><br><br>
</body>
</html>2.DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button type="button" onclick="test1();">
클릭1</button><br><br>
<button type="button" onclick="test2();">
클릭2</button><br><br>
<button type="button" onclick="test3();">
클릭3</button><br><br>
<button type="button" onclick="test4();">
클릭4</button>
<script>
function test1(){
//h1태그 생성!!!!!
var h1 = document.createElement("h1");
//텍스트노드 생성!!!!!
var text = document.createTextNode("Hello");
//요소노드(h1)의 자식으로 텍스트 노드
//(Hello)를 삽입!!!!!
//body 태그의 자식으로 h1태그 삽입
h1.appendChild(text); //<h1>Hello<h1>
var body = document.getElementsByTagName("body");
console.log(body)
body[0].appendChild(h1);
}
function test2(){
//<b> 요소노드생성
//Hello 텍스트노드
//p1의 자식으로 삽입
var b = document.createElement("b");
var text = document.createTextNode("Hello");
b.appendChild(text);
var p = document.getElementsByTagName("p");
p[0].appendChild(b);
//아이디로 해도 상관없음!!
}
function test3(){
//요소 노드 생성!!!!
var img = document.createElement("img");
img.src="img/wz_1_5_1_1522134274.jpg";
img.width ="500";
img.height ="500";
// img.myProperty="123"; 존재하지않는 속성은 들어가지 않음
img.setAttribute("myProperty","123");
document.getElementById("div1").appendChild(img);
}
function test4(){
var div2 = document.getElementById("div2");
div2.style.backgroundColor = "skyblue";
div2.style.borderRadius = "20px";
}
</script>
<p id = "p1">Hello</p>
<div id = "div1" style="border: 5px solid black; width:500px; height: 500px;"> </div>
<div id = "div2" style="border: 5px solid black; width:500px; height: 500px;"> </div>
<div id = "div3" style="border: 5px solid black; width:500px; height: 500px;"> </div>
<button type ="button" onclick="input();">객체 삽입</button>
<button type ="button" onclick="delete1();">부모에서 삭제</button>
<button type ="button" onclick="delete2();">해당객체 삽입</button>
<script>
var pObj;
function input(){
var div3 = document.getElementById("div3");
pObj = document.createElement("p");
pObj.setAttribute("id","pp");
pObj.style.border="5px solid blue";
pObj.style.width="100px";
pObj.style.height="100px";
pObj.style.backgroundColor="orange";
div3.appendChild(pObj);
}
function delete1(){
var div3 = document.getElementById("div3");
div3.removeChild(pObj);
}
function delete2(){
pObj.remove();
// document.getElementById("pp").remove(); 이것도가능
}
</script>
</body>
</html>
3.BOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a name="top"></a>
<button type ="button" onclick="window1();">open</button>
<br><br><br><br>
<script>
function window1(){
window.open("http://www.naver.com","_blank","width=500,height=500");
}
var id;
function window2(){
var myWindow = window.open(); //빈창이 열림 /그것을 변수에 담아둠
myWindow.alert("3초 후 페이지 종료됨");
id = window.setTimeout(
function(){
myWindow.close();},3*1000);
}
function test(){
window.clearTimeout(id);
}
</script>
<button type = "button" onclick="window2();">setTime</button><br>
<button type = "button" onclick="test();">clearTime</button>
<p>window.setInterval 함수</p>
<button type="button" onclick="window3();">
실행 확인</button>
<p id="p1" style="border:5px solid black; height:200px; width:500px; font-size:70px; color:red;"></p>
<button type="button" onclick="stop1();">
중단</button>
<script>
var intervalId;
function window3(){
var p1 =
document.getElementById("p1");
intervalId = window.setInterval(function(){
var date = new Date();
p1.innerHTML = date.getHours()+" : " +
date.getMinutes() + " : " +
date.getSeconds();
},1000);
}
function stop1(){
window.clearInterval(intervalId)
}
</script>
<br><br><br><br><br><br>
<p id="p2" style="border:5px solid black; height:200px; width:500px; font-size:70px; color:red;"></p>
<button type="button" onclick="window4();">
실행 확인</button>
<button type="button" onclick="stop2();">
중단</button>
<script>
var stopId;
function window4(){
var p2 = document.getElementById("p2");
var count = 0;
var milliSeconds;
stopId = window.setInterval(function(){
var date = new Date();
milliSeconds = date.getMilliseconds();
p2.innerHTML = count + " : " + milliSeconds;
if(milliSeconds >= 990){
count++;
}
},10)
}
function stop2(){
window.clearInterval(stopId);
}
</script>
<script>
window.onload = function(){
var p3 = document.getElementById("p3");
}
function window5(){
p3.innerHTML = "onload 버튼 클릭 완료";
}
</script>
<p id="p3"></p>
<button type="button" onclick="window5();">onload</button>
<p id = "p4"></p>
<button type = "button" onclick="screenTest();">
스크린객체테스트</button><br><br>
<script>
function screenTest(){
var p4 = document.getElementById("p4");
var str = "";
str +="화면 너비값:" +screen.width+"<br>";
str +="화면 높이값 :"+screen.height+"<br>";
str +="실제 가용 너비 :"+screen.availWidth+"<br>";
str +="실제 가용 높이 :"+screen.availHeight+"<br>";
str +="사용 가능한 색상 수 :"+screen.colorDepth+"<br>";
str +="한픽셀당 비트 수 :"+screen.pixelDepth+"<br>";
p4.innerHTML = str;
}
function up(){
location.hash = "top";
}
function down(){
location.hash = "bottom";
}
function gogo(){
location.href = "http://www.naver.com";
}
function re(){
location.reload(); //새로고침
}
</script>
<button type = "button" onclick="up();">위로가기</button>
<button type = "button" onclick="down();">아래로 가기</button>
<button type = "button" onclick="gogo();">네이버로 가기</button>
<button type = "button" onclick="re();">새로고침</button>
<p id="p5"></p>
<button type="button" onclick="geoTest();">
네비게이터객체테스트</button>
<script>
var latitude;
var longitude;
window.onload = function(){
navigator.geolocation.getCurrentPosition(showLocation);
}
function showLocation(position){
latitude = position.coords.latitude;
longitude = position.coords.longitude;
}
function geoTest(){
document.getElementById("p5").innerHTML
="위도 : " +latitude+ "경도 : " +longitude;
console.log(latitude);
console.log(longitude);
}
</script>
<a name ="bottom"></a>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
</body>
</html>'이공계전문기술연수 > JavaScript | jQuery' 카테고리의 다른 글
| <이공계기술전문연수> 3. jQuery(3일차) (0) | 2019.09.26 |
|---|---|
| <이공계기술전문연수> 2. jQuery(2일차) (0) | 2019.09.25 |
| <이공계전문기술연수> 2. JavaScript(2일차) (0) | 2019.09.24 |
| <이공계기술전문연수> 1. jQuery(1일차) (0) | 2019.09.23 |
| <이공계전문기술연수> 1. JavaScript(1일차) (0) | 2019.09.22 |
