국비 42-1

냐아암·2023년 6월 20일
JavaScript
0

국비

목록 보기
53/114

요소 접근 방법

📍 DOM을 이용한 HTML 요소 접근하기(해당 요소 객체 가져오기)
1. id로 접근하기 : document.getElementById("id 속성값");
2. name으로 접근하기 : document.getElementsByName("name 속성값");
3. class로 접근하기 : document.getElementsByClassNmae("class 속성값");
4. 태그로 접근하기 : document.getElementsByTagName("태그명");
5. css 선택자로 접근하기

  • document.querySelector("CSS 선택자");
    -> 선택된 요소가 여러 개일 경우, 첫 번째 요소만 접근하기
  • document.querySelectorAll("CSS 선택자");
    -> 선택된 요소 모두 접근

elements는 복수이기 때문에 선택된 요소들을 배열에 저장

cf.

  • onkeydown : 키가 눌러졌을 때

  • onkeypress : 키가 눌러지고 있을 때

  • onkeyup : 키가 올라왔을 때

  • .checked : radio, checkbox 전용 속성으로 해당 요소가 체크되어 있으면 true, 아니면 false

  • trim : 문자열 양 끝 공백 모두 제거

  • 요소.scrollTop : 요소 내부 현재 스크롤 위치 반환

  • 요소. scrollTop = 위치 : 스크롤을 특정 위치로 이동

  • 요소.scrollHeight : 스크롤 전체 높이

변수와 자료형

  • 전역변수
  • 지역변수

📍 변수 선언 방식

  • var : 변수, 변수명 중복 O(덮어쓰기), 함수 레벨 scope (3순위)
  • let : 변수, 변수명 중복 X, 블록 레벨{} scope (2순위)
  • const : 상수, 변수명 중복 X, 블록 레벨{} scope (1순위)

📍 자바스크립트의 자료형
자바스크립트는 변수 선언 시 별도의 자료형을 지정하지 않음
-> 변수에 대입되는 값(리터럴)에 의해 자료형이 결정됨

  • string (문자열)
  • number (숫자) -> 정수 / 실수 모두 포함
  • boolean (논리값)
  • object (객체) -> 배열(Array), 자바스크립트 객체{k:v, k:v}
  • function (함수)
  • undefined (정의되지 않은 변수) -> 변수가 선언만되고, 값이 대입되지 않은 경우

cf.

  • typeof : 자료형
  • 객체 내용 출력하는 for 문
    for(let key in user) {
    user[key] }
  • 객체 내용 출력
    user.key값
  • 괄호 없이 함수명만 작성한 경우에는 그 함수의 내용이 출력됨
    -> 함수를 실행하기 위해서는 괄호를 붙여주어야 한다.

03_요소 접근 방법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03_요소접근방법</title>

    <script src="JS/03_요소접근방법.js"></script>

    <style>
        .area{
            width: 300px;
            height: 100px;
            border: 1px solid black;
        }

        /* 카카오톡 채팅 만들기 */
        #chatting-bg{
            width: 360px;
            height: 400px;
            border: 1px solid black;
            background-color: rgb(178,199,217);
            overflow: auto;
        }

        /* 채팅내용 */
        #chatting-bg > p > span{
            background-color: rgb(254, 234, 51);
            padding: 5px;
            border-radius: 8px;
        }

        /* 채팅 출력 라인 */
        #chatting-bg>p{
            margin: 20px 10px;
            text-align: right;
        }
    </style>
</head>
<body>

    <h1>DOM(Document Object Model)</h1>

    <pre>
        웹 문서(HTML)의 모든 요소를 객체 형식으로 표현한 것

        -> 문서 내 특정 요소에 접근하는 방법을 제공
    </pre>

    <hr>

    <h1>DOM을 이용한 HTML 요소 접근하기(해당 요소 객체 가져오기)</h1>
    <pre>
        1. id로 접근하기 : document.getElementById("id 속성값");

        <!-- 복수형태 Elements로 작성 -->
        2. name으로 접근하기 : document.getElementsByName("name 속성값");

        <!-- 같은 class는 여러 요소를 가질 수 있으므로 복수 Elements로 작성 -->
        3. class로 접근하기 : document.getElementsByClassNmae("class 속성값");

        4. 태그로 접근하기 : document.getElementsByTagName("태그명");

        5. css 선택자로 접근하기 
           1) document.querySelector("CSS 선택자");
              -> 선택된 요소가 여러 개일 경우, 첫 번째 요소만 접근하기
           2) document.querySelectorAll("CSS 선택자");
              -> 선택된 요소 모두 접근
    </pre>

    <h3>id로 접근하기</h3>

    <button onclick="accessId()">클릭할 때마다 배경색 변경</button>
    <div id="div1" class="area"></div>

    <hr>

    <h3>class로 접근하기</h3>

    <div class="area div2"></div>
    <div class="area div2"></div>
    <div class="area div2"></div>

    <button onclick="accessClass()">배경색 변경하기</button>

    <hr>

    <h3>태그명으로 접근하기</h3>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <button onclick="accessTagName()">배경색 변경</button>

    <hr>

    <h1>input 태그의 값(value)얻어오기/변경하기</h1>

    <input type="text" id="input-test">
    <button onclick="inputTest()">입력</button>

    <h3>name으로 접근하기</h3>
    <table>
        <tr>
            <td>
                <input type="checkbox" name="hobby" id="game" value="게임">
                <label for="game">게임</label>
            </td>
            <td>
                <input type="checkbox" name="hobby" id="music" value="음악감상">
                <label for="music">음악감상</label>
            </td>
            <td>
                <input type="checkbox" name="hobby" id="movie" value="영화감상">
                <label for="movie">영화감상</label>
            </td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="hobby" id="coding" value="코딩">
                <label for="coding">코딩</label>
            </td>
            <td>
                <input type="checkbox" name="hobby" id="exercise" value="운동">
                <label for="exercise">운동</label>
            </td>
            <td>
                <input type="checkbox" name="hobby" id="book" value="독서">
                <label for="book">독서</label>
            </td>
        </tr>
    </table>

    <div class="area" id="name-div"></div>

    <button onclick="accessName()">출력하기</button>

    <hr>

    <h3>CSS 선택자로 접근하기</h3>

    <div id="css-div">
        <div class="area">test1</div>
        <div class="area">test2</div>
    </div>

    <button onclick="accessCss()">확인하기</button>

    <hr>

    <h3>카카오톡 채팅 화면 만들기</h3>

    <div id="chatting-bg">
        <p> <span> 추가입력</span></p>

        <p> <span> 입력되는 채팅 출력</span></p>

        <p> <span> 입력되는 채팅 출력</span></p>
    </div>

    <!-- onkeydown : 키가 눌러졌을 때 -->
    <!-- onkeypress : 키가 눌러지고 있을 때 -->
    <!-- 쭉 누르고 있을 경우 무분별한 함수 호출 발생 -->

    <!-- onkeyup : 키가 올라왔을 때 -->
    <input type="text" id="chatting-input" size="50" onkeydown="inputEnter(event)">

    <button onclick="readValue()">입력</button>
    
</body>
</html>

03_요소 접근 방법.js

// id로 접근하기
function accessId(){
    const div1 = document.getElementById("div1");

    // 접근한 요소의 배경색 얻어오기
    const bgColor = div1.style.backgroundColor;

    // ** 자바스크립트는 문자열 비교 시에도 비교 연산자를 사용한다 !! **
    if(bgColor == "red"){
        // div1의 배경색을 yellow로 변경
        div1.style.backgroundColor="yellow";
    }else {
        // div1의 배경색을 red로 변경
        div1.style.backgroundColor="red";
    }
}

// class로 접근하기
function accessClass(){

    // 요소를 여러 개 접근하는 경우 [배열] 형태로 반환됨
    const arr = document.getElementsByClassName("div2");

    // 인덱스를 이용해서 요소 하나씩 접근
    arr[0].style.backgroundColor = "pink";
    arr[0].innerHTML="첫 번째 요소";
    arr[1].style.backgroundColor = "tomato";
    arr[1].innerHTML="두 번째 요소";
    arr[2].style.backgroundColor = "skyblue";
    arr[2].innerHTML="세 번째 요소";
}

// 태그명으로 접근하기
function accessTagName(){
    // 문서 내 모든 li 태그 접근(배열 반환)
    const arr = document.getElementsByTagName("li");

    // 반복문(Java와 비슷)
    for(let i=0; i<arr.length; i++){

        const num = arr[i].innerText; // 요소에 작성된 내용(숫자) 얻어오기

        arr[i].style.backgroundColor="rgb(130,220," + (50*num) + ")";
    }
}

// input 태그의 값(value)얻어오기/변경하기
function inputTest(){
    const input = document.getElementById("input-test");

    // ** innerText, innerHTML은 요소의 내용(시작태그, 종료태그 사이의 내용)을
    //    얻어오거나 변경할 때만 사용 가능

    // ** input은 [value]를 이용해서 값을 얻어오거나 변경할 수 있음

    console.log(input.value);
    
    // input에 작성된 값 변경하기
    input.value=""; // 빈 문자열 == value 지우기

    // input에 초점 맞추기 -> focus()

    input.focus();
}

// name으로 접근하기
function accessName(){
    const hobblyList = document.getElementsByName("hobby");

    let str = "";
    let count = 0;

    for(let i = 0; i<hobblyList.length; i++){
        // *radio/checkbox 전용 속성*
        // .checked : 해당 요소가 체크되어 있으면 true, 아니면 false 반환

        if(hobblyList[i].checked){ // 현재 요소가 체크되어 있으면

            // str 변수에 value 누적
            str += hobblyList[i].value + " ";

            count++; // 개수 증가
            
        }
    }

    // #name-div에 출력
    document.getElementById("name-div").innerHTML = str +  "<br>"+ "선택된개수 :" + count;
}

// CSS 선택자로 접근하기
function accessCss(){

    // querySelector() : 요소 1개 선택 시 사용
    //                  (여러 요소가 선택되면 첫 번째 요소만 선택)

    // 1개만 있는 요소 선택
    document.querySelector("#css-div").style.border = "3px solid red";

    // 여러 개 있는 요소 선택(첫 번째 요소 선택 확인)
    document.querySelector("#css-div>div").style.fontSize = "30px";

    // querySelectorAll() : 모든 요소 선택 시 사용
    const arr = document.querySelectorAll("#css-div>div");

    // 배경색을 원하는 색상으로 바꾸고 실행
    for(let i = 0; i<arr.length; i++){
        arr[i].style.backgroundColor="gold";
    }

}

/* 카카오톡 채팅 만들기 */
function readValue(){

    // 채팅 입력에 사용되는 요소 모두 얻어오기
    const bg = document.getElementById("chatting-bg");

    const input = document.querySelector("#chatting-input");

    // input에 입력된 값이 있을 경우
    if(input.value.trim().length >0){

        // 문자열.trim(): 문자열 양 끝의 공백을 모두 제거
        // ex)"            k    h               ".trim() -> "k   h"

        // input에 입력된 값을 얻어와 bg에 추가(누적)
        bg.innerHTML += "<p><span>" +  input.value +"</span></p>";

        // 요소.scrollTop : 요소 내부 현재 스크롤 위치 반환
        // 요소. scrollTop = 위치 : 스크롤을 특정 위치로 이동
        // 요소.scrollHeight : 스크롤 전체 높이

        // bg의 스크롤을 제일 밑으로 내리기
        bg.scrollTop=bg.scrollHeight
    }

    // input에 작성된 값 변경하기
    input.value = ""; // 빈 문자열 == value 지우기

    // input에 초점 맞추기
    input.focus();
}

// input태그 키가 눌러졌을 때 엔터인 경우를 검사하는 함수
function inputEnter(event){
   // console.log(event.key); // 현재 눌러진 키를 반환
   
   if(event.key == "Enter"){
    readValue(); // 함수 호출
   }
}

04_변수와 자료형

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04_변수와자료형</title>

    <!-- external 방식 JS 파일 연결 -->
    <script src="JS/04_변수와자료형.js"></script>

    <style>
        #typeBox{
            border: 2px solid black;
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
        <h1>변수 선언 위치에 따른 구분</h1>

        <h4>Java</h4>
        <pre>
            public class Student{

                // 필드 (멤버변수)
                private String name; // 인스턴스 변수
                public static String schoolName; // 클래스 변수, static변수

                // 메소드
                public setName(String name <!-- 메소드 지역 변수 -->){
                    this.name = name;
                    int num = 10; // 메소드 지역 04_변수와자료형
                    
                    if(){
                        int a = 20; // if 지역 변수
                    }
                }
            }
        </pre>

        <hr>

        <h4>Javascript</h4>

        <pre>
            (JS 파일)
            var num1; // 전역변수 (선언된 후 같은 문서 내 어디서든 사용 가능)
            num2;     // 전역변수 (변수명 앞에 키워드가 없으면 전역변수가 된다.)

            function test() {

                var num3; // function 지역 변수 
                num4; // 전역변수 (변수명 앞에 아무 키워드도 없으면 전역변수가 된다.) 

                if(조건식){

                    var num5; // function 지역변수 (밖에다가 num5 선언해버림)
                    num6; // 전역변수 (변수명 앞에 아무 키워드도 없으면 전역변수가 된다.)

                }

                num5;


            }
        </pre>

        <script>
            console.log("[script 태그 내부]")
            console.log("num1 : " + num1);
            console.log("num2 : " + num2);
        </script>

        <hr>

        <h1>변수 선언 방식</h1>
        <pre>
            var : 변수, 변수명 중복 O(덮어쓰기), 함수 레벨 scope
            let : 변수, 변수명 중복 X, 블록 레벨{} scope
            const : 상수, 변수명 중복 X, 블록 레벨{} scope

            1순위 : const
                    (JS는 특정 요소를 선택해서 사용하는 경우가 많아서 상수에 고정시켜둠)

            2순위 : let

            3순위 : var (EX6 이후부터 사용 빈도가 적어짐)

        </pre>

        <hr>

        <h1>자바스크립트의 자료형</h1>

        <pre>
            자바스크립트는 변수 선언 시 별도의 자료형을 지정하지 않음
            -> 변수에 대입되는 값(리터럴)에 의해 자료형이 결정됨

            - string (문자열)
            - number (숫자) -> 정수 / 실수 모두 포함
            - boolean (논리값)
            - object (객체) -> 배열(Array), 자바스크립트 객체{k:v, k:v}
            - function (함수)
            - undefined (정의되지 않은 변수) -> 변수가 선언만되고, 값이 대입되지 않은 경우 

            (참고)
            - null (참조하는 게 없음) -> document.getElementById("오타") -> 가장 흔한 경우 
                                        -> id가 일치하는 경우가 없어서 참조할 수 없다.
             (null은 타입보다는 값(리터럴)의 개념)
        </pre>

        <button onclick="typeTest()">자료형 확인</button>
        
        <div id="typeBox"></div>

        <h1>원시타입과 참조타입</h1>
        <pre>
            * 원시타입 : 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장
                -> 숫자(Number), Boolean, null, undefined, 문자열(string)

            * 찹조타입 : 메모리의 위치(주소)에 대한 간접적인 참조를 통해 메모리에 접근
        </pre>



</body>
</html>

04_변수와 자료형.js

var str = "JS 코드를 함수 내부가 아닌"
        + " JS파일 또는 script 태그 밑에 바로 작성하면"
        + "HTML 랜더링 시 바로 수행된다."
console.log(str);

// 변수 선언 위치에 따른 구분
var num1 = 10; // 전역변수
num2 =20; // 전역변수

var num1 = 20;


console.log("num1 : " + num1);
console.log("num2 : " + num2);

function test(){
    console.log(num2);

    var num3 = 3; // function의 지역변수
    num4 = 4; // 전역변수

    if(true){ // if문 무조건 수행
        var num5 = 5; // function 지역변수(괄호 밖에서도 사용했기 때문에)
        num6 = 6; // 전역변수
    }

    console.log("num5 : " + num5);
}

test();

//console.log("num3 : " + num3); // error(지역변수)
console.log("num4 : " + num4); // function 종료 후에도 사용 가능

// console.log("num5 : " + num5); // error(지역변수)
console.log("num6 : " + num6); //function 내부 if 문 종료 후에도 사용 가능

// 자료형 확인
function typeTest(){
    const typeBox = document.getElementById("typeBox");

    let temp; // 선언 후 값을 초기화하지 않았음 == undefined

    typeBox.innerHTML = "temp: " + temp;

    // string
    const name ="김민석";

    // typeof 변수명 : 해당 변수의 자료형을 검사하는 연산자
    typeBox.innerHTML += "<br>name : " + name + " / " + typeof name;

    const gender = 'm';
    typeBox.innerHTML += "<br> gender: " + gender + " / " + typeof gender;
    // 자바스크립트는 char 자료형이 존재하지 않는다.
    // "" '' 모두 string 리터럴 표기법

    // number
    const age =20;
    const height = 178.3;

    typeBox.innerHTML += "<br> age: " + age + " / " + typeof age;
    typeBox.innerHTML += "<br> height: " + height + " / " + typeof height;

    // boolean
    const isTrue =true;
    typeBox.innerHTML += "<br> isTrue: " + isTrue + " / " + typeof isTrue;

    // object

    // java ({사용})
    // int[]arr = {1,2,3,4,5}; 
    
    // javascript ([]사용)
    const arr = [10,30,50,70];
    typeBox.innerHTML += "<br> arr: " + arr + " / " + typeof arr;

    for(let i =0; i<arr.length; i++) {
        typeBox.innerHTML +="<br>arr[" + i +"] :" + arr[i] + " / " + typeof arr;
    }

    // 자바스크립트 객체는 K:V(Map 형식)
    const user = {"id":"user01", "pw":"pass01"};

    typeBox.innerHTML += "<br>user : " + user + " / " + typeof user;

    // 객체 내용 출력 방법1
    typeBox.innerHTML += "<br>user.id : " + user.id;
    typeBox.innerHTML += "<br>user.pw : " + user.pw;

    // 객체 내용 출력 방법2 (객체 전용 for문 for...in)
    for(let key in user){
        // user객체의 키(id, pw)를 반복할 때마다 하나씩 얻어와 key 변수에 저장
        typeBox.innerHTML += "<br>user[" + key + "] : " + user[key];

        
    }
    
    console.log(user); // 콘솔 출력 시 보기 더 좋음

    // function(함수도 자료형)

    // 1) 변수명 == 함수명
    const sumFn = function(n1, n2) { // 익명함수
        return n1 + n2
    }

    // 함수명만 작성한 경우 -> 함수에 작성된 코드가 출력됨
    typeBox.innerHTML += "<br>sumFn: " + sumFn + " / " + typeof sumFn;
    
    // 함수명() 괄호를 포함해 작성한 경우 -> 함수 호출(수행)
    typeBox.innerHTML += "<br>sumFn(10,20): " + sumFn(10,20);

    typeBox.innerHTML += "<br>tempFn(30,sumFn): " + tempFn(30, sumFn);

}

function tempFn(n3,fn){
    return n3+fn(10,20);
}
profile
냐아암
개발 일지
이전 포스트

도서관4

다음 포스트

국비 42-2

0개의 댓글