See the Pen ZEGrqey by jaybon (@jaybon1) on CodePen.

'Web > JavaScript' 카테고리의 다른 글

자바스크립트 DIV 객체를 동적으로 생성, 삽입, 삭제하는 예제  (0) 2020.03.12
자바스크립트 HTML 문서 작성기 만들기, 새창띄우기  (0) 2020.03.12
자바스크립트 객체 주요 요소값 출력  (0) 2020.03.12
자바스크립트 this의 활용  (0) 2020.03.12
자바 스크립트 CSS 스타일 동적 변경2 - 이미지  (0) 2020.03.11
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
<!DOCTYPE html>
<html lang="en">
<head id="myHead">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document 객체 주요 요소값</title>
    <script>
        var text = "문서 로딩 중일때 readyState = " + document.readyState + "\n";
    </script>
</head>
<body onload="printProperties()" style="background-color: yellow; color: blue; direction: rtl;"> <!-- 가장 먼저 띄울 때 (팝업창 같은) -->
    <a href="http://naver.com">네이버</a>
    <div>이곳은 div 영역입니다</div>
    <input id="input" value="여기 포커스가 있습니다">
    <script>
        function printProperties(){
            document.getElementById("input").focus();
            text += "1.location = " + document.location +"\n";
            text += "2.URL = " + document.URL +"\n"; // 주소 정보만 보여주는 것
            text += "3.title = " + document.title +"\n";
            text += "4.head.id = " + document.head.id +"\n";
            text += "5.body.color = " + document.body.style.color +"\n";
            text += "6.domain = " + document.domain +"\n";
            text += "7.lastModified = " + document.lastModified +"\n";
            text += "8.defaultView = " + document.defaultView +"\n";
            text += "9.문서의 로드 완료 후 readyState = " + document.readyState +"\n";
            text += "9.documentElement의 태그이름 = " + document.documentElement.tagName +"\n";
            alert(text);
        }
    </script>
</body>
</html>
 
 
 cs

위 코드를 적용하면 크롬에서 아래와 같이 나옵니다.

'Web > JavaScript' 카테고리의 다른 글

자바스크립트 HTML 문서 작성기 만들기, 새창띄우기  (0) 2020.03.12
자바스크립트 배열로 여러 태그에 효과주기  (0) 2020.03.12
자바스크립트 this의 활용  (0) 2020.03.12
자바 스크립트 CSS 스타일 동적 변경2 - 이미지  (0) 2020.03.11
자바 스크립트 CSS 스타일 동적 변경2 - 변경 및 원상복구  (0) 2020.03.11

See the Pen RwPQBXZ by jaybon (@jaybon1) on CodePen.

'Web > JavaScript' 카테고리의 다른 글

자바스크립트 배열로 여러 태그에 효과주기  (0) 2020.03.12
자바스크립트 객체 주요 요소값 출력  (0) 2020.03.12
자바 스크립트 CSS 스타일 동적 변경2 - 이미지  (0) 2020.03.11
자바 스크립트 CSS 스타일 동적 변경2 - 변경 및 원상복구  (0) 2020.03.11
자바 스크립트 CSS 스타일 동적 변경1 - 문자에 효과주기  (0) 2020.03.11

See the Pen OJVQXQO by jaybon (@jaybon1) on CodePen.

'Web > JavaScript' 카테고리의 다른 글

자바스크립트 객체 주요 요소값 출력  (0) 2020.03.12
자바스크립트 this의 활용  (0) 2020.03.12
자바 스크립트 CSS 스타일 동적 변경2 - 변경 및 원상복구  (0) 2020.03.11
자바 스크립트 CSS 스타일 동적 변경1 - 문자에 효과주기  (0) 2020.03.11
자바스크립트 Object 객체 사용하기  (0) 2020.03.11

See the Pen YzXeWYp by jaybon (@jaybon1) on CodePen.




버튼하나로 변경하기



See the Pen yLNvJmd by jaybon (@jaybon1) on CodePen.

'Web > JavaScript' 카테고리의 다른 글

자바스크립트 this의 활용  (0) 2020.03.12
자바 스크립트 CSS 스타일 동적 변경2 - 이미지  (0) 2020.03.11
자바 스크립트 CSS 스타일 동적 변경1 - 문자에 효과주기  (0) 2020.03.11
자바스크립트 Object 객체 사용하기  (0) 2020.03.11
자바스크립트 Math 객체 만들기, 난수, 랜덤, 구구단 테스트  (0) 2020.03.11

See the Pen VwLQjrj by jaybon (@jaybon1) on CodePen.

'Web > JavaScript' 카테고리의 다른 글

자바 스크립트 CSS 스타일 동적 변경2 - 이미지  (0) 2020.03.11
자바 스크립트 CSS 스타일 동적 변경2 - 변경 및 원상복구  (0) 2020.03.11
자바스크립트 Object 객체 사용하기  (0) 2020.03.11
자바스크립트 Math 객체 만들기, 난수, 랜덤, 구구단 테스트  (0) 2020.03.11
자바스크립트 String 객체 사용하기  (0) 2020.03.11

See the Pen yLNvJbR by jaybon (@jaybon1) on CodePen.

'Web > JavaScript' 카테고리의 다른 글

자바 스크립트 CSS 스타일 동적 변경2 - 변경 및 원상복구  (0) 2020.03.11
자바 스크립트 CSS 스타일 동적 변경1 - 문자에 효과주기  (0) 2020.03.11
자바스크립트 Math 객체 만들기, 난수, 랜덤, 구구단 테스트  (0) 2020.03.11
자바스크립트 String 객체 사용하기  (0) 2020.03.11
자바스크립트 Date 객체 사용하기 - 글로벌 시간 표시 및 배경 변경  (0) 2020.03.11

See the Pen PoqQNXz by jaybon (@jaybon1) on CodePen.

'Web > JavaScript' 카테고리의 다른 글

자바 스크립트 CSS 스타일 동적 변경1 - 문자에 효과주기  (0) 2020.03.11
자바스크립트 Object 객체 사용하기  (0) 2020.03.11
자바스크립트 String 객체 사용하기  (0) 2020.03.11
자바스크립트 Date 객체 사용하기 - 글로벌 시간 표시 및 배경 변경  (0) 2020.03.11
자바스크립트 배열만들기  (0) 2020.03.11

+ Recent posts

티스토리툴바