입문자를 위한 자바스크립트 기초 강의 (유노코딩) - 자바스크립트 기초 (DOM ~ 함수)

---

---

Document Object Model, DOM

 

렌더링 : 해석한 HTML 코드를 화면을 통해 보여주는 과정

 

렌더링의 세부 과정

 

브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서(객체)인 DOM을 생성함. 

브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링함.

 

DOM의 존재 목적

DOM은 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스(interface)임.

 

사진 넣기 (3분쯤 나오는 화면)

---

Document & methods

 

window.document

브라우저 객체 window의 document 속성은 창이 포함한 문서를 참조함.

window.document는 현재 브라우저에 렌더링되고 있는 문서를 의미함.

이 속성을 이용하면 해당 문서에 접근할 수 있음.

 

DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스임.

이를 이용하면 페이지의 정보를 얻거나 웹 요소를 생성 및 조작할 수 있음.

 

document는 문서(HTML, XML, SVG 등)에 대한 공통의 속성과 메소드를 제공함.

다양한 API(Application Programming Interface)를 제공함.

 

대표적인 메소드

- document.querySelector

- document.getElementById

두 메소드는 모두 요소(Element) 객체를 반환함.

 

document.querySelector

document의 querySelector 메소드는 선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 첫 번째 요소(Element)를 반환함. 

일치하는 요소가 없으면 '없다'라는 의미의 null 데이터를 반환함.

인자로 전달되는 선택자는 문자열 타입의 '유효한 CSS 선택자'를 의미함.

// p태그를 선택하자!

document.querySelector("p");

// id가 text인 요소를 선택하자!

document.querySelector("#text");

// claass가 text인 요소를 선택하자!

document.querySelector(".text")

 

document.getElementById

id를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 요소(Element)를 반환함.

일치하는 요소가 없으면 '없다'라는 의미의 null 데이터를 반환함.

인자로 전달되는 선택자는 문자열 타입의 'id'를 의미함.

// id가 text인 요소를 선택하자!

document.getElementById("text");

// id가 image인 요소를 선택하자!

document.getElementById("image");

 

textContent

해당 노드가 포함되고 있는 텍스트 콘텐츠를 표현하는 속성

textContent를 통해 요소가 포함한 텍스트를 읽을 수도, 변경할 수도 있음.

// p 요소를 반환받아 상수로 이름을 붙임

const p = documnet.querySelector("p");

// p 요소의 textContent 속성을 콘솔에 출력해보자!

console.log(p.textContent)

// p 요소의 textContent 값을 변경해보자!

p.textContent = "텍스트를 이걸로 바꿔!"

 

사진 오른쪽 보면 브라우저에서 '렌더링'되는 걸 알 수 있음.

이렇게 렌더링되고 있는 것은 DOM이 있기에 가능한 것임.

 

//querySelector

console.log(document.querySelector("h1"))

console.log(document.querySelector("p"))

console.log(document.querySelector("#text"))

console.log(document.querySelector(".paragraph"))

//getElementByID

console.log(document.getElementById("text"))

console.log(document.getElementById("p"))

// 굳이 앞에 '#' 안 붙여도 됨

 

---

비교 연산과 또 다시 boolean

 

자바스크립트에서 비교

자바스크립트는 주어진 두 항을 비교할 수 있는 '비교 연산자'를 제공함.

자바스크립트에서 할 수 있는 비교 : 대소 비교(크냐 작냐), 등가 비교(같냐 다르냐)

 

비교 연산의 특징

 

비교 연산식은 언제나 boolean 데이터를 반환함.

등가비교나 대소비교나 모두 하나의 질문이며, 답이 true 혹은 false이다.

 

예를 들어)

3이 5보다 작냐? true

6과 6이 다르냐? false

 

대소 비교

연산자의 의미는 앞에 있는 피연산자 기준

의미	연산자	사용 형태
크다	>	A > B
작다	<	A < B
크거나 같다	>=	A >= B
작거나 같다	<=	A <= B

 

등가 비교

등호(이퀄 사인, =) 하나는 대입연산자이므로, 기호 개수를 잘 봐가며 사용하자.

의미	연산자	사용 형태
같다	==	A == B
같지 않다	!=	A != B
완전히 같다	===	A === B
완전히 같지 않다	!==	A !== B

 

== : 추상적(abstract) 같음 비교, 자료형이 서로 다르더라도 같다고 판단할 수 있는 비교

=== : 엄격한(strict) 같음 비교, 자료형과 데이터가 모두 일치해야만 같다고 판단

 

console.log( '1' == 1) // true

console.log ( 2 == 1 ) // false

console.log( '1' === 1 ) // false

console.log( 1 === 1 ) // true

 

---

조건문

 

조건문 : 주어진 조건의 참/거짓 여부에 따라 프로그램의 흐름을 결정할 수 있는 구문

조건 : boolean 데이터를 반환하거나 boolean 데이터로 해석할 수 있는 표현식

조건문이 실행을 마치고 나면 코드 진행 흐름은 이어지는 다음 구문으로 자연스럽게 이동함.

 

예)

게임 캐릭터의 HP가 0입니까? → true일 경우 캐릭터는 사망

지하철 요금을 낼 만큼의 돈이 있습니까? → true일 경우 지하철을 탈 수 있음

 

if문

조건이 참일 때 할일을 정의하는 구문을 생성함.

 

if(조건) {

// 조건이 true일 때 실행 코드

}

 

let number = 3

if(number === 3){

    console.log("It is true!")

}

/*

변수 number의 값이 3과 같다면 콘솔에 "It is true!"를 출력해라

3과 같지 않을 경우 아무 일도 일어나지 않음

*/

 

if~else문 (else를 추가한 if문)

 

if(조건){

 // 조건이 true일 때 실행할 코드

}else{

 //조건이 false일 때 실행할 코드, else는 독립 사용 불가

}

 

let number = 5

if(number === 3){

    console.log("It is true!")

}else{

    console.log("It is false!")

}

/*

변수 number의 값이 3과 같다면 콘솔에 "It is true!"를 출력해라

3과 같지 않을 경우 콘솔에 "It is false!"를 출력해라

*/

let number = 5 // 1개

if(number == 3){

    console.log("조건으로 사용된 비교연산식이 참을 반환했다!")

}

else{

    console.log("틀림~~")    

} // 2개

console.log("독립적으로 사용된 콘솔로그")  // 3개

document.querySelector("none")  // 4개

let hello = "hello"  // 5개

console.log(hello)  // 6개

//실행하려는 구문은 6개임

if~else구문은 아무리 길어도 하나의 구문으로 실행됨.

---

반복문

 

비슷하거나 동일한 구문을 반복해서 수행할 수 있는 구문

대표적인 반복문 : while문, for문

 

while문

주어진 조건이 참일 동안에 구문을 반복하는 반복문

한번만 작성해도 여러번 동작할 수 있음

 

while(조건){

 // 조건이 true인 동안에 반복 수행할 코드

}

 

조건 : 불리언을 반환하거나 불리언으로 해석될 수 있는 표현식

반복 구문 : 루프(loop)

let number = 1;

while(number < 3){

    console.log(number); // 1) number가 1일 때 => 1 출력 -------> 1

    number += 1; // 2) number에 2라는 값이 들어감 (출력X)

}

/*

3) number = 2이므로 => 2 출력 ----------------------------------> 2

4) number에 3이라는 값이 들어감 (출력X)

5) number = 3 이므로 해당 조건을 만족하지 않으므로 더이상 출력 X

결론적으로 출력되는 값은 1, 2임

*/

 

confirm : 확인 (true 반환) / 취소(false 반환)

alert : 확인 

 

/*

console.log(confirm())

confirm에 '확인'을 누르면 'true'라고 나옴.

'취소'를 누르면 'false'라고 나옴.

*/

while(confirm("메시지!")){

    console.log("확인 버튼을 누르고 있군요")

}

console.log("취소 버튼을 눌렀군요")

 

for문

구문 작성시 반복을 위해 필요한 세 가지 요소를 한 곳에 모아 작성함.

보다 명시적으로 반복 횟수를 표현할 수 있는 직관적인 구문

 

for(초기식; 조건식; 반복식){

 // 조건이 true인 경우 반복 수행할 코드

}

 

초기식 : 반복 조건의 초기화 작업

반복식 : 반복이 한 번 끝날 때마다 실행될 작업

 

for(let i = 1; i <= 3; i += 1){

    console.log(i)

}

/*

1) 초기식은 처음 한 번만. i는 1임.

2) 조건식이 i <= 3이므로 이때 값은 true

3) 중괄호 안에 있는 결과 출력

   현재 i값을 출력 --> 1

4) 반복식 i += 1에서 i에 1을 더해서 다시 i에 대입

   i가 2가 됨.

5) i=2이므로 조건식 i <= 3을 만족하므로 i를 출력 -----> 2

6) i에 1을 더해서 대입하니까 i = 3

7) i = 3 이므로 조건 만족해서 출력 -----> 3

8) i에 1더해서 대입하니까 현재 i는 4가 됨.

9) 근데 조건식에 만족하지 않으니까 이제 출력 안 됨.

결과적으로 1, 2, 3이 출력됨.

*/

초기식 → 조건식 → true면 중괄호 안 내용 출력 → 반복식 ....

이 과정은 조건식이 false를 반환할 때까지 반복됨. 

 

 

// 반복식의 증감폭은 상관 없음

for(let i = 1; i <= 8; i += 2){

  console.log(i)

  }

/* 이렇게 쓰면 무한대로 연산됨

for(let i = 1; i <= 8; i -= 2){

    console.log(i)

   }

*/

for(let i = 8; i >= 1; i -= 2){

    console.log(i)

}

for문의 초기식에서 선언한 변수는 for문의 실행이 끝나면 사라져서 사용할 수 없음.

---

함수

 

함수 : 호출될 수 있는 코드 조각

변수를 선언하고 데이터를 대입하면 변수의 이름을 데이터 대신 사용할 수 있는 것처럼, 함수를 선언하면 함수 이름을 코드 조각 대신 사용할 수 있음.

 

let value = "문자열"

// value는 "문자열" 대신 사용된다!

console.log(value)

let work = console.log("!")

// work는 콘솔에 !를 출력하는 기능 대신 사용된다? (X)

work

// 당연히 아님!

 

함수를 만드는 두 가지 방법

함수 선언식, 함수 표현식

 

함수 선언식

 

function 함수명(){

 // 함수의 기능을 표현한 구문

}

→ 위와 같은 선언 이후, 함수명은 중괄호 안의 기능 대신 사용될 수 있음.

 

함수 표현식 

 

const 함수명 = function(){

  // 함수의 기능을 표현한 구문

}

→ 마찬가지로 선언 이후, 함수명은 중괄호 안의 기능 대신 사용될 수 있음.

 

함수가 만들어지고 나면, 함수명은 스스로 보관하고 있는 구문 대신 사용될 수 있음.

함수가 사용되기 위해서는 함수를 호출해야만 함.

함수를 호출할 때는 함수 이름 뒤에 반드시 소괄호를 붙여줘야 함.

 

const sayHello = function(){

    let number = 3 + 3

    console.log(number)

}

sayHello() // 함수 호출!

// sayHello만 쓰면 아무것도 안 나옴. 소괄호 꼭!

 

함수 이름 짓는 규칙

함수의 기능을 적절하게 표현할 수 있는 이름을 사용하자

함수는 기능이니까 명사보다는 동사로 된 이름을 사용하자

소문자로 시작하되, 여러 단어가 섞인 경우 카멜표기법을 사용하자

 

let number = 3;

// ♠ 카멜표기법 : 두번째 단어의 첫번째 글자를 대문자로 하는 거

let myNumber = 5; //카멜표기법 (낙타 등 튀어나온거랑 비슷함)

console.log(myNumber)

// 숫자 5를 부르는 것

function sayHello(){

    console.log("Hello!")

    console.log("Hi!")

    console.log("안녕!")

}

// 함수 선언식 : 처음부터 이름이 있는 함수를 만듦.

const sayBye = function(){

    console.log("good bye~")

    console.log("잘가~")

}

// 함수 표현식 : 이름이 없는 함수 만들고, 나중에 이름 붙여줌

// 선언식 vs 표현식 차이는?

함수 선언식 vs 표현식 :

선언식은 함수 정의보다 호출문을 앞서 작성할 수 있지만, 표현식은 그럴 수 없다.

선언식은 호이스팅이 가능함.

 

Hoisting(호이스팅) :

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

 

함수 안에서 선언한 변수는 함수 안에서만 쓸 수 있다. (지역변수)

 

함수의 데이터 반환

함수를 만들 때, 함수가 데이터를 반환하도록 할 수 있음.

함수가 데이터를 반환한다는 것 = 함수 호출문이 데이터로 대체됨을 뜻함.

// 그냥 3을 출력

console.log(3)

// 3을 반환하는 함수 호출문을 출력

console.log(getThree())

// 이게 어떻게 가능? (아래에 씀 ↓)

 

function getThree(){

    // 이 함수를 호출하면, 호출문이 3을 반환할 것!

    return 3;

}

console.log(getThree())

// 그럼 3이 나옴.

 

함수가 데이터를 반환하려면, '이 데이터를 반환한다'라는 구문을 함수 내부에 추가해 주어야 함.

이때 키워드 return이 사용됨.

 

return

- 함수 내부에서 함수의 부가 기능을 위해 사용하는 키워드

return의 두 가지 기능

함수로부터 데이터를 반환한다.

함수를 끝낸다.

 

데이터를 반환한다.

return은 뒤에 붙은 데이터를 반환함.

이때 데이터는 딱 하나씩만 반환할 수 있음

 

function getData(){

    let result = 1 + 2 + 3

    return result;

}

console.log(getData())

// 출력값으로 6이 나옴

 

function getData(){

    let result1 = 1 + 2 + 3

    let result2 = 4 + 5 + 6

    return result1;

    return result2; // 소용없음. 안 나옴.

}

console.log(getData())

// 출력값으로 result1인 6만 나옴.

 

함수를 끝낸다

return은 데이터 반환 뿐만 아니라 함수를 강제 종료하는 역할도 수행할 수 있음.

종료 목적만 있는 경우에는 return 뒤에 데이터를 기입하지 않아도 됨.

 

function sayHello(){

    console.log("Hi!")

    console.log("Hello!")

    return; // return 뒤에 데이터가 있으면 반환 & 함수 끝냄

    console.log("안녕!")

}

sayHello()

const result = window.confirm("확인해봐요!")

/*

창 뜰 때 '확인' 누르면

const result = true랑 똑같이 됨.

*/

console. log(result)

result는 noReturn함수를 실행하는 변수임.

변수는 있지만 데이터는 대입되지 않은 상태라서 'undefined'가 뜸.

 

function thereIsReturn(){

    console.log("반환한다, 무엇인가를!")

    return 10;

}

const result = thereIsReturn()

console.log(result)

return 10, 20, 30, 40, 50 → 50만 나옴

return 여러번 쓰는거 → 불가능

return 10

return 20

function thereIsReturn(){

    console.log("반환한다, 무엇인가를!")

    return 10

    return 20 // (X)

    // return은 10을 반환 & 함수를 종료시킴

}

const result = thereIsReturn()

console.log(result)

function thereIsReturn(){

    console.log("반환한다, 무엇인가를!")

   let num = 100 // 지역변수 사용 가능

   return num

}

const result = thereIsReturn()

console.log(result)

 

함수에 재료를 전달하세요

 

함수 호출문 : 함수명 + 소괄호

소괄호의 역할 : 함수가 실행될 때 사용할 재료(데이터)를 전달받는 것

 

yourFunc( 여기 )

 

매개변수 :

- 함수 호출 시 전달될 데이터에 이름을 붙여주는 것

- 변수가 호출될 때마다 이름이 바뀔 수 있음.

 

매개변수는 개수제한이 없이 원하는 만큼 호출할 수 있음.

구분자 쉼표(,) 이용해 추가함.

매개변수(parameter) : 인자(재료)를 전달받기 위해 만들어 둔 변수

인자(argument) : 실제 함수 호출 시에 전달하는 데이터

 

function sayFood(food1, food2){

    console.log(food1)

    console.log(food2)

    console.log("먹고싶다!")

}

sayFood("치킨", "돈까스")

sayFood("피자", "햄버거")

수업 예시 응용 : if, else if, else

 

function whatIsBigger(n1, n2){

    if( n1 > n2 ){

       return n1

    } else if ( n1 == n2 ){

        // *주의 : n1 = n2라고 쓰면 안 됨

       return ("두 수가 같아요!")

    } else {

       return n2

    }

   

}

console.log(whatIsBigger(3, 50)) //예상: 50

console.log(whatIsBigger(10, 6)) // 예상 : 10

console.log(whatIsBigger(99, 99)) // 예상 : 두 수가 같아요!

 

만들 수 있는 함수 유형 네 가지

매개변수 X, 반환 X

매개변수 O, 반환 X

매개변수 X, 반환 O

매개변수 O, 반환 O

function sayAnything(ant, number){

    for( let i = 0; i < number; i++  ){

        console.log(ant)

    }

}

sayAnything("다이어트 언제 끝나냐", 10)

sayAnything("몸무게 멈춤", 18)

// 인자로 전달된 숫자만큼 ant를 반복해서 출력한다

/* 숫자 하나를 전달 받아서,

짝수면 => 짝수

홀수면 => 홀수

*/

function oddEven(A){

    if ( A % 2 == 0){

        return "짝수입니당!"

    }else {

        return "홀수입니당당숭구리당당!"

    }

}

console.log( oddEven(10) )

console.log( oddEven(55) )

 

배운 내용 스스로 응용해보기

/*

<<< 응용 >>>

숫자 하나를 prompt로 전달 받아서,

prompt(문자열)로 전달받은 수를 정수형으로 변환해야함!

그 정수형이

짝수면 => 짝수

홀수면 => 홀수

라고 안내메시지 출력하는 거

*/

var A = prompt( "숫자를 입력해주세요", "1부터 10까지만 쓰시오!!!" )

document.write(A);

// A가 웹페이지에 표시됨.

var B = Number( A )

/*

Number()는 안에 있는 것을 숫자형으로 바꿔줌.

변수 B는 숫자형 데이터를 받음.

B를 oddEven함수에 대입

그 결과를 출력함

*/

function oddEven(B){

    if ( B % 2 == 0){

        return "짝수입니당!"

    }else {

        return "홀수입니당당숭구리당당!"

    }

}

console.log( oddEven(B) )

document.write( `은 ${oddEven(B)}` )

원하는 대로 나옴.

다음에는

1) 1~10사이 숫자만 나오게 하는 거

2) 1~10사이 숫자 범위 벗어나면 에러메시지 뜨게 하는 거

-> 추가하고 싶음.