<이공계전문기술연수> 3. JavaScript(3일차)

<수업내용>

@객체
-> 자바스크립트에서도 객체를 선언해서 사용할 수 있음

@객체 선언 및 호출
-> 객체는 키 값을 사용하여 속성(멤버 변수) 식별
-> 객체 생성 시 중괄호 사용-> { }
-> 객체 접근시 대괄호[ ] 또는.으로 요소 값에 접근
-> 속성에 모든 자료형이 올 수 있음, 함수인 자료형도 가능
-> 객체 내에서 자신의 속성을 호출할 때 반드시 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

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

<이공계전문기술연수> 3. JavaScript(3일차)

'이공계전문기술연수 > JavaScript | jQuery' 카테고리의 다른 글

'이공계전문기술연수 > JavaScript | jQuery' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역