[JavaScript] Object(객체), DOM(문서객체모델), function() 함수 기초 실습

1. Object (객체)
2. DOM (Document Object Model)
2-1. DOM(문서객체모델)
2-2. innerHTML vs textContent
2-3. querySelector vs getElementByID
2-4. addEventListener
2-5. 예제1_counting
2-6. 예제2_반복문
2-7. 예제3_keyboardEvent
3. function (함수)
3-1. 함수를 선언하는 세 가지 방식
3-2. 예제1_plus
3-3. 예제2_emoji 별찍기

1. Object (객체)

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object(객체)</title>
</head>
<body>
    <script>
        /* 
        
        * 객체 *
        객체 지향 프로그래밍에서 데이터(속성) &
        데이터에 관련되는 동작(절차, 기능)을 모두 포함한 개념
 
        * 객체의 구조 *
        {key:value, key:value, ...}
        key: 객체의 property(속성) - 문자열로 표현
        value: key의 값(기본자료형, 배열, 함수, 객체타입 데이터)
 
        (1) 내장 객체
         -> 자바스크립트 엔진에 내장된 객체
         -> 날짜, 문자, 배열, 수학 
 
        */
 
        // ex) 연도를 가져오는 객체
        const moonLanding = new Date();
        console.log(moonLanding.getFullYear());
 
        /*
        
        (2) 브라우저 객체 (BOM, browser object model)
         -> 브라우저에에 내장된 객체
         -> alert(), console.log(), ...
         -> window(): 브라우저 객체 중 최상위 객체, 브라우저에 관련된 기능
         -> window.open("http://www.naver.com", "네이버 받아라", "width=500px; height=500px") 
 
        (+) 문서객체모델
         -> 웹문서를 제어할 수 있는 객체
 
        (3) 사용자 정의 객체
         -> 사용자가 직접 만든 객체
         -> 자바스크립트 엔진이 구동되는 시점에 생성
 
        */
 
        // ex) 사용자 정의 객체
        let person = {
            "name" : "dain",
            "Age" : 50,
            "gender" : "female",
            "info" : function() {
                console.log(this);
            }
        }
 
        // person 객체를 출력하는 함수 실행하기
        console.log(person.name);
 
        person.info();
        console.log(person);
    </script>
</body>
</html>

2. DOM (Document Object Model)

2-1. DOM(문서객체모델)

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM(문서객체모델)</title>
</head>
<body>
    <h1 id="tit">문서객체모델(DOM)</h1>
 
    <ul>
        <li class="items">HTML</li>
        <li class="items">CSS</li>
        <li class="items">JS</li>
    </ul>
 
    <script>
        /*
        DOM(문서객체 모델): html 태그를 자바스크립트에서 사용할 수 있도록 객체로 변환
 
        * HTML 문서에 접근하는 방법 *
        document: 현재 HTML 문서에
        .: 접근해서
        getElement: 요소를 가져올거야
        ByID: "tit"라는 id 값을 가진
        */
 
        let title = document.querySelector("tit");
        let anotherTitle = document.getElementById("tit");
        console.log(title);
        console.log(anotherTitle);
 
        /*
        
        document: 현재 HTML 문서에
        .: 접근해서
        getElements: 요소들을 가져올거야
        ByClassName: "itmes"라는 class 값을 가진 */
        
        let items = document.getElementsByClassName("item");
        console.log(items); 
        
    </script>
</body>
</html>

2-2. innerHTML vs textContent

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM innerHTML and textContent</title>
</head>
<body>
    <p id="msg">오늘은 문서객체모델에 대해서 배워보았다</p>
 
    <script>
        let msg = document.getElementById("msg");
        // 태그 + 내용 까지 콘솔에 통째로 찍힘
        console.log(msg);
 
        // html 태그와 같이 내용을 적용할 때: innerHTML
        // 텍스트 내용만 적용할 때: textContent
 
        // p태그의 전체 내용 접근
        // 태그 안쪽 텍스트만 찍힘
        console.log(msg.innerHTML);
 
        // p태그의 전체내용 변경
        // 태그 안쪽 글씨가 바뀜
        msg.innerHTML = "내용 바뀐거 봐라~ㅋㅋㅋ 신기하지?"
        console.log(msg.innerHTML);
 
        // p태그 안쪽 내용에 태그 하나 추가 
        msg.innerHTML += "<span> 이런것도 가능~</span>"
 
        // p태그의 텍스트 값 접근
        console.log(msg.innerHTML);
        
        // p태그의 텍스트 값 변경
        msg.textContent = "텍스트 바뀌는거 룩앳미"
        msg.textContent = "<span> + 와우! 텍스트 바뀐당 >_< + </span>";
        
        
    </script>
</body>
</html>

2-3. querySelector vs getElementByID

~~요즘에는 어차피 다 라이브러리 쓰지만~~

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom querySelector and getElementByID</title>
</head>
<body>
    <h1 id="bb">DOM 활용해보기</h1>
    <button id="btn-h1">h1태그 내용 변경</button>
    <button id="btn-a">a 태그 생성</button>
    <button id="btn-ul">ul태그 생성</button>
 
    <div id="area"></div>
 
    <script>
        // 1. h1 내용변경 버큰을 클릭하면 기존 h1 태그의 내용이 "내용 잘 바뀌었다!" 로 바뀌게 하지
        // 2. a태그생성 버튼을 클릭하면 div에 [google.com]로 이동하는 a태그 생성
        // 3. ul태그생성 버튼을 클릭하면 div에 html, css, javascript를 담는 ul 리스트를 생성
 
        let btn1 = document.querySelector("#btn-h1");
        btn1.addEventListener("click", function(){
            document.querySelector("h1").textContent = "내용 잘 바뀌었다!"
        });
 
        let btn2 = document.querySelector("#btn-a");
        btn2.addEventListener("click", function(){
            document.getElementById("area").innerHTML += "<a href=https://google.com>구글</a>"
        });
 
        let btn3 = document.querySelector("#btn-ul");
        btn3.addEventListener("click", function(){
            document.getElementById("area").innerHTML += 
            `<ul>
                <li>html</li>
                <li>css</li>
                <li>js</li>
            </ul>`
        });
    
        // * getElementByID vs querySelector *
 
        // 지원되는 선택자:
        // getElementByID: 오직 id 선택자만 지원한다. 
        // querySelector: id, class, tag 등 다양한 CSS 선택자를 지원한다.
 
        // 결론:
        // 만약 id로 요소를 찾고자 한다면 getElementByID를 사용하는 것이 좋다.
        // 여러 선택자를 사용하여 더 유연하게 요소를 찾고 싶다면, querySelector을 사용하는것이 좋다.
    </script>
</body>
</html>

2-4. addEventListener

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM addEventListener</title>
</head>
<body>
    <input type="text" id="user-input">
    <button id="btn">난버튼이지롱</button>
 
    <script>
        let userinput = document.getElementById("user-input");
        let btn = document.getElementById("btn");
 
        // 요소에 이벤트 적용하는법
        // (이벤트: 사용자가 브라우저에 동작하는 행위 -- 클릭, 스크롤, 마우스오버, 키보드 입력 등)
        // 이벤트 핸들러(콜백함수): 이벤트가 발생했을 때 처리할 함수
        btn.addEventListener("click", function(){
            // alert("클릭 이벤트 발생")
            // 유저가 입력한 값을 console 창에 입력하는
            // input.select.textArea의 값에 접근할 때: value
            console.log(userinput.value);
        })
 
    </script>
</body>
</html>

2-5. 예제1_counting

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM counting</title>
</head>
<body>
    <p id="num">0</p>
    <button id="btn-plus">증가</button>
    <button id="btn-minus">감소</button>
 
    <script>
        let num = document.getElementById("num");
        let plus = document.querySelector("#btn-plus");
        let minus = document.querySelector("#btn-minus")
        plus.addEventListener("click", function(){
            let i = Number(num.textContent)
            i += 1;
            num.textContent = i;
        });
        minus.addEventListener("click", function(){
            let i = Number(num.textContent)
            i -= 1;
 
            if (i <= 0) {
                i = 0;
            };
            num.textContent = i;
        });
    </script>
</body>
</html>

2-6. 예제2_반복문

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom repeat</title>
</head>
<body>
    <input type="text" id="user-input">
    <button id="btn-plus">출력</button><br>
    <div id="result"></div>
    <script>
        document.querySelector("#btn-plus").addEventListener("click", function(){
            document.querySelector("#result").innerHTML += "<p>" + document.querySelector("#user-input").value+"</p>"
        });
    </script>
</body>
</html>

2-7. 예제3_keyboardEvent

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM keyboardEvent</title>
    <style>
        /* 스타일링된 박스 */
        #box {
            width: 50px;
            height: 50px;
            background-color: rgb(255, 14, 14);
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <!-- 움직이는 박스 -->
    <div id="box"></div>
    <script>
        // 키 입력 이벤트 리스너 추가
        document.addEventListener("keydown", function(event) {
            let box = document.getElementById("box"); // 박스 요소 가져오기
            let step = 10; // 이동 거리 지정
            let top = parseInt(window.getComputedStyle(box).top); // 현재 top 값 가져오기
            let left = parseInt(window.getComputedStyle(box).left); // 현재 left 값 가져오기
            
            // 키 입력에 따라 박스 이동
            switch (event.key) {
                case "w": // 위로 이동
                    box.style.top = top - step + "px";
                    break;
                case "s": // 아래로 이동
                    box.style.top = top + step + "px";
                    break;
                case "a": // 왼쪽으로 이동
                    box.style.left = left - step + "px";
                    break;
                case "d": // 오른쪽으로 이동
                    box.style.left = left + step + "px";
                    break;
            }
        });
    </script>
</body>
</html>

3. function (함수)

3-1. 함수를 선언하는 세 가지 방식

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>function</title>
</head>
<body>
    <script>
        /*
 
        함수: 특별한 목적의 작업을 수행하기 위해 독립적으로 설계된 블럭
         - 내가 편하게 사용하기 위해 만드는 ㄱ니ㅡㅇ
         - 함수를 정의할 때는 input(입력, 매개변수), output(출력, 반환데이터)
        
        함수를 선언하는 세 가지 방식
         - 함수선언문
         - 함수표현식
         - 화살표함수
 
        */
 
        // (1) 함수선언문
        //  - 함수 선언문으로 정의한 후 함수 호출 시 어디에서든 호출이 가능하다
        // ★ 함수 호이스팅 ★
        //  - 함수 선언문이 자바스크립트 엔진에 의해서 먼저 실행되는 방식
        //  - 원치 않는 실행 결과가 나올 수 있기 때문에 최근 트렌드는 함수표현식(+화살표 함수)를 채택하고 있다.
        function greet() {
            console.log("함수선언문go");
        }
        greet();
 
        // (2) 함수표현식
        // - 함수를 값으로 취급
        const greet2 = function () {
            console.log("함수표현식 잘봐");           
        }
        greet2();
 
        // (3) 화살표함수
        let greet3 = (name) => {
            console.log("화살표 함수 이게 찐!");
            return(console.log(name));
        }
        greet3("다인");
 
        // return이 있을 때, 실행문이 한 문장일 경우에는 return과 {} 생략 가능
        let greet4 = (name) => ("안녕하세요?" + name);
        console.log(greet4("다인"));
        
    </script>
</body>
</html>

3-2. 예제1_plus

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>function plus</title>
</head>
<body>
    <div id="result">결과확인</div>
 
    <script>
        let num1 = Number(prompt("첫 번째 정수 입력"));
        let num2 = Number(prompt("두 번째 정수 입력"));
        const add = function(num1, num2) {
            console.log(num1 + num2);
            return num1 + num2;
        }
        let addadd = (num1, num2) => {
            console.log(num1 + num2);
            return num1 + num2;
        }
        document.querySelector("#result").addEventListener("mouseover", function(){
            console.log(add(num1, num2));
            alert(add(num1, num2));
        })
    </script>
</body>
</html>

3-3. 예제2_emoji 별찍기

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>function emoji</title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <div class="emo">출력되는 이모지: </div>
    <div class="num">숫자: </div>
    <br>
    <script>
        /*
        문제) 이모지와 숫자를 입력받은 후 피라미드 모양을 출력하는 pyramid()
        1. 이모지와 숫자를 입력받는다.
        2. 두 입력값을 pyramid() 에 전달한다
        3. 전달받은 값을 이용하여 피라미드 모양을 출력한다.
        */
 
        let emoji = prompt("이모지를를 입력하세요.");
        let num1 = Number(prompt("숫자를 입력하세요."));
        // ex) ★, 5
        
        $(".emo").append(emoji);
        $(".num").append(num1);
 
        let pyramid = (emoji, num1) => {
            for (let i=0; i<num1; i++) {
                for (let j=0; j<=i; j++) {
                    document.write(emoji);
                }
                document.write("<br>");
            }
        }
        pyramid(emoji, num1);
    </script>
</body>
</html>

'프로그래밍언어 > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 제이쿼리 (jQuery) 기본선택자에 대해 알아보자! (10)	2025.02.07
[JavaScript] jQuery를 사용할 때 유의해야 할 사항들 (8)	2025.02.05
[JavaScript] 자바스크립트 백틱(``), 달러(${ }) 표현식 (템플릿 리터럴) (32)	2025.01.04
[JavaScript] JSON 데이터 다룰때 기본적인 JS 사용법(배열, 객체 등) (41)	2024.12.28
[JavaScript] 서버 통신과 JSON (7)	2024.12.22

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

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

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

[JavaScript] Object(객체), DOM(문서객체모델), function() 함수 기초 실습

1. Object (객체)

2. DOM (Document Object Model)

2-1. DOM(문서객체모델)

2-2. innerHTML vs textContent

2-3. querySelector vs getElementByID

2-4. addEventListener

2-5. 예제1_counting

2-6. 예제2_반복문

2-7. 예제3_keyboardEvent

3. function (함수)

3-1. 함수를 선언하는 세 가지 방식

3-2. 예제1_plus

3-3. 예제2_emoji 별찍기

'프로그래밍언어 > JavaScript' 카테고리의 다른 글

1. Object (객체)

2. DOM (Document Object Model)

2-1. DOM(문서객체모델)

2-2. innerHTML vs textContent

2-3. querySelector vs getElementByID

2-4. addEventListener

2-5. 예제1_counting

2-6. 예제2_반복문

2-7. 예제3_keyboardEvent

3. function (함수)

3-1. 함수를 선언하는 세 가지 방식

3-2. 예제1_plus

3-3. 예제2_emoji 별찍기

'프로그래밍언어 > JavaScript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Object(객체)</title>
	</head>
	<body>
	<script>
	/*

	* 객체 *
	객체 지향 프로그래밍에서 데이터(속성) &
	데이터에 관련되는 동작(절차, 기능)을 모두 포함한 개념

	* 객체의 구조 *
	{key:value, key:value, ...}
	key: 객체의 property(속성) - 문자열로 표현
	value: key의 값(기본자료형, 배열, 함수, 객체타입 데이터)

	(1) 내장 객체
	-> 자바스크립트 엔진에 내장된 객체
	-> 날짜, 문자, 배열, 수학

	*/

	// ex) 연도를 가져오는 객체
	const moonLanding = new Date();
	console.log(moonLanding.getFullYear());

	/*

	(2) 브라우저 객체 (BOM, browser object model)
	-> 브라우저에에 내장된 객체
	-> alert(), console.log(), ...
	-> window(): 브라우저 객체 중 최상위 객체, 브라우저에 관련된 기능
	-> window.open("http://www.naver.com", "네이버 받아라", "width=500px; height=500px")

	(+) 문서객체모델
	-> 웹문서를 제어할 수 있는 객체

	(3) 사용자 정의 객체
	-> 사용자가 직접 만든 객체
	-> 자바스크립트 엔진이 구동되는 시점에 생성

	*/

	// ex) 사용자 정의 객체
	let person = {
	"name" : "dain",
	"Age" : 50,
	"gender" : "female",
	"info" : function() {
	console.log(this);
	}
	}

	// person 객체를 출력하는 함수 실행하기
	console.log(person.name);

	person.info();
	console.log(person);
	</script>
	</body>
	</html>