28일차 - 자바 스크립트 기본 문법 (1)

자바 스크립트

자바 스크립트는 프로그래밍 언어이다.

자바 스크립트는 서버 개발, 어플리케이션 개발 등 다양한 목적을 위해 사용할 수 있는 언어이지만,

주된 활동 분야는 웹 개발 이다.

 

html로 콘텐츠를 정의하고, css로 스타일링하여 java script로 어떤 동작을 하고 상호작용을 할지 정의한다.

 

웹 사이트 개발에 있어, 자바 스크립트의 역할은 웹 브라우저가 가진 기능을 실행 시키거나 HTML / CSS 를 통해 렌더링된 화면을 조작할 수 있다.

 

 

 

웹 페이지에 자바스클비트를 더하는 방법은 두 가지 방법이 있다.

1. HTML문서 내부에 작성하기
2. 자바스크립트 파일을 만들고, 그 안에 작성한 코드를 HTML 문서에 연결하기

 

html문서에 작성할 때 스크립트는 바디의 하단에 들어간다.

 

소스를 통해서 스크립트를 연결할 수 있다.

 

스크립트 구문에는 연결이면 연결 코드면 코드 하나만 작성한다.

 

 

 

자바스크립트에게 객체란?

어떤 사물이나 개념을 소프트웨어적으로 표현하기 위해 사용하는 문법적 수단이다.

자바스크립트 코드 내에서 객체란 ‘값 또는 기능을 가지고 있는 데이터’이다.

 

 

웹브라우저는 소프트웨어 세계에 존재하는 사물, 즉 객체이다.

그리고 자바 스크립트는 웹 브라우저라는 객체에게 명령을 내리기 위해 사용하는 언어이다.

사용자가 웹브라우저에게 명령을 내릴 수 있도록 돕기 위해, 자바스크립트는 웹 브라우저와 관련된 다양한 객체들을 제공한다.

 

 

웹 브라우저 객체의 대표 선수격은 window이다.

window를 이용하면 웹 브라우저에게 다양한 명령을 내릴 수 있다.

객체에 접근할 때는 메소드에 접근하듯 .을 찍어 접근한다.

 

자바스크립트의 주석은 자바에서의 주석과 같다.

 

 

콘솔(console)

콘솔(console)은 브라우저의 디버깅 콘솔을 의미한다.

콘솔은 브라우저 안에 내장된 브라우저의 하위 객체이므로 브라우저 객체를 통해 접근할 수 있다.

 

window.console 으로 접근한다.

 

 

디버깅 콘솔

웹브라우저의 ‘개발자 도구’를 열면 메뉴 중 ‘콘솔(console)’이라는 항목이 존 재하는데,

이것을 누르면 나타나는 화면이 바로 디버깅 콘솔이다.

 

=> 디버깅 콘솔을 이용하면 자바스크립트 코드를 테스트(점검)할 수 있다.

 

 

 

자바 스크립트에서 웹 브라우저에 접근할 수 있게 해주는 객체 window는 console을 비롯한 다양한 하위 객체 및 데이터, 메소드 등을 포함하고 있는데, 사용자는 편의를 위해 window. 을 생략한 채로 코드를 작성할 수 있다.

 

 

 

자바 스크립트 작성 규칙

• 대문자와 소문자를 잘 구분하여 작성한다.

• 구문의 끝에는 세미콜론을 입력해 ‘구문의 끝’을 알릴 수 있다. 세미콜론은 선택 사항이다.

• 가능하면 한 줄에는 두 개 이상의 구문을 쓰지 않는다.

 

 

 

자바 스크립트의 변수

변수란 ‘데이터에 붙이는 이름표’이다.

변수를 이용하면 이름표를 붙여 둔 데이터를 필요할 때마다 재사용 할 수 있게 된다.

 

 

var와 let은 모두 자바스크립트 변수를 만드는 키워드이다.

 

자바 스크립트 초기에 변수생성을 var를 이용했고, let은 그 이후에 생겼다.

var는 코드 블록(영역) 간의 구분이 명확하게 처리되지 않아 때때로 기대했던 결과와 다른 결과를 초래했다.

그래서 이를 보완한 let이 등장했다.

 

 

변수는 다음과 같이 선언한다.

 

변수를 생성하는 것을 ‘변수의 선언’이라 하고, 생성된 변수에 첫 데이터를 지정하는 것을 ‘변수의 초기화’라 부른다.

두 과정은 동시에 진행할 수도, 따로 진행할 수도 있다.

 

변수의 생성과 초기화는 따로 진행할 수 있다.

 

 

변수는 데이터를 기억하기 위해 사용한다.

변수는 한 번에 하나의 데이터만 기억 할 수 있으며, 기억하고 있는 값을 바꿔가며 사용할 수 있다.

 

 

변수 이름의 규칙

• 변수명에는 오직 문자와 숫자, 그리고 기호 $과 _ 만이 포함될 수 있다.

• 변수명의 첫 번째 글자로 숫자가 올 수 없다.

• 이미 다른 뜻을 가지고 있는 단어(키워드)는 변수명으로 사용할 수 없다.

 

 

 

변수에 선언 가능한 데이터 유형

변수를 이용하면 자바스크립트로 표현할 수 있는 모든 데이터를 기억할 수 있다. 자바스크립트는 다양한 유형의 데이터를 표현 및 사용할 수 있는데, 여기에서는 다음 두 가지 데이터 유형을 사용한다.

 

* 숫자 - 숫자는 정수와 실수로 구분할 수 있다.

* 문자열 - 문자, 숫자, 특수 문자 등 다양한 기호를 조합해 만들 수 있는 ‘기호의 집합’이다.

 

문자열은 따옴표로 시작 해 따옴표로 끝나는 데이터이다. 시작과 끝에있는 따옴표는 동일해야 한다.

 

 

 

상수

상수란 수식에서 ‘변하지 않는 값’을 뜻한다.

변수와 반대되는 것으로, 상수는 ‘단 하나의 데이터만을 위해 사용하는 이름표’로써, 값의 변경이 불가능하다.

 

상수는 다음과 같이 선언한다.

 

상수도 변수처럼 지정된 데이터 대신 사용할 수 있다.

상수 이름 짓기 규칙은 변수 이름 짓기와 동일하다.

1. 대문자로 쓰기.
2. 단어 사이를 언더바(스네이크 케이스)로 잇는다.

 

 

상수를 만들 때는 선언과 동시에 초기화를 해야 한다. 그러지 않으면 데이터를 지정할 수 없다.

상수는 자신이 선언될 때 지정된 데이터로 고정된다. 선언 이후 데이터를 대입하려고 하면 에러 발생한다.

 

 

 

window.prompt(x)

window 객체의 prompt(x) 메소드는 사용자로부터 문자열을 입력받는 다이얼로그 박스를 여는 메소드이다. 괄호 안에 x로는 다이얼로그 박스에 띄울 메시지(문자열)를 전달할 수 있다.

 

prompt(x)는 입력받은 문자열을 반환한다.

즉, 코드가 변하진 않지만, 메소드가 문자열로 바뀌게 되는 효과를 가진다.

 

 

 

템플릿 리터럴

기존의 문자열은 따옴표를 이용해 표현했지만, 템플릿 리터럴은 백틱을 이용해 표현한다.

=> 백틱은 물결(~) 키를 쉬프트(shift) 없이 누르면 입력할 수 있다.( ` )

 

 

표현식 삽입 방법

템플릿 리터럴은 표현식을 내장할 수 있는 문자열 표현법이다.

이는 문자열의 내용에 데이터를 삽입한다는 것을 의미한다.

템플릿 리터럴로 표현한 문자열 내부에 플레이스 홀더(${})를 기입하고, 그 안에 데이터를 기입하면 데이터는 문자열의 멤버가 된다.

 

 

백틱(`)을 이용해 만든 문자열은 중간에 값을 삽입하는 문자열 포맷팅이 가능한 문자열이다.       

포맷팅을 하지 않을 경우에는 보통 문자열과 동일하게 사용 가능하다.

 

 

 

연산

연산이란 ‘식이 나타낸 일정한 규칙에 따라 계산함’을 뜻한다.

사용자는 자바스크립트 코드를 통해 연산을 처리하는 식을 만들 수 있고, 여기에 사용하는 기호를 ‘연산자’라 한다.

 

 

산술 연산

산술 연산은 더하기, 빼기 등 수를 이용한 계산이다.

두 개의 숫자 데이터를 피연산자로 받아서 하나의 숫자 데이터를 결과로 반환한다.

 

 

산술 연산을 처리하는 식을 사용하면, 해당 식은 연산 결과를 반환한다. 즉, 연산식이 데이터로 대체된다.

 

 

대입 연산

대입 연산은 오른쪽 피연산자의 데이터를 왼쪽 피연산자에 대입한다.

왼쪽 피연산자로는 주로 변수나 상수가 자리하며, 오른쪽 피연산자로는 데이터 또는 데이터를 반환하는 식이 자리한다.

 

 

 

연산자 우선순위

하나의 구문에 여러 개의 연산자가 함께 사용 되는 경우가 있다.

이 경우 연산자 우선순위가 반영되어 우선순위가 높은 것부터 계산된다.

 

곱하기 나누기가 더하기 빼기보다 우선순위가 높다.

대입 연산은 대입 연산자 오른쪽에 있는 식보다 무조건 나중에 처리된다.

 

연산자 우선순위에서 밀리지만 먼저 처리하고자 하는 연산이 있는 경우 사용자는 해당 연산 부분을 소괄호로 감싸주어 연산 순서를 바꿀 수 있다.

 

 

 

 

null, undefined 그리고 boolean

null

널(null) 데이터는 ‘없다’를 의미하는 데이터이다.

의도적으로 데이터가 없음을 나타내기 위해 사용하는 일종의 표현 수단이다.

 

 

undefined

언디파인드(undefined)는 아직 데이터가 정의되지 않았음을 나타낸다.

 

 

boolean

불리언은 숫자, 문자열과 같은 데이터 타입 중 하나이다.

true와 false, 단 두 가지 값만 존재한다. 참과 거짓 여부를 나타내기 위해 사용하는 데이터이다.

 

불리언은 무조건 소문자로만 작성해야 한다.

 

 

 

Document Object Model, DOM

렌더링

웹 브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여준다.

해석한 HTML 코드를 화면을 통해 보여주는 과정을 ‘렌더링’이라 한다.

 

 

랜더링의 세부 과정

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

이를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다.

 

 

 

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

 

 

 

 

document & methods

window.document

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

즉, window.document은 현재 브라우저에 렌더링되고 있는 문서를 의미하며, 이 속성을 이용하면 해당 문서에 접근할 수 있다.

 

window.document는 페이지 콘텐츠, 즉 DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스이다.

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

 

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

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

 

 

관련문서 참고 - Document - Web API | MDN (mozilla.org)

 

 

document.querySelector

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

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

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

 

 

 

document.getElementById

document의 getElementById 메소드는 id를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 요소(Element)를 반환한다.

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

인자로 전달되는 선택자는 문자열 타입의 ‘id’를 의미한다.

 

 

 

textContent

textContent 속성은 해당 노드가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성이다.

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

h1태그와 클래스가 text인 문단, id가 center인 문단을 변수에 대입하고, 그 변수에 textContent로 접근하여 사용하거나 변경할 수 있다.

 

 

비교 연산과 boolean

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

자바스크립트에서는 다음 두 가지 유형의 비교를 할 수 있다.

 

* 크냐 작냐를 구분하는 '대소 비교'

* 같냐 다르냐를 구분하는 '등가 비교'

 

 

비교 연산의 특징

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

크냐 작냐를 비교하는 대소 비교, 같냐 다르냐를 비교하는 등가 비교는 모두 하나의 질문이며, 질문에 대한 답이 참(true) 또는 거짓(false)인 것이다.

 

 

 

대소 비교

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

 

 

 

 

등가 비교

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

 

 

등가 비교를 할 때, 등호(=)의 개수에 따라 비교 규칙에 차이를 보인다.

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

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

 

 

 

 

조건문

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

여기에서 조건이란, 불리언 데이터를 반환하거나 불리언 데이터로 해석할 수 있는 표현식을 의미한다.

 

 

if문

키워드 if를 이용해 만드는 구문 ‘if문’은 가장 일반적인 형태의 조건문이다.

if문의 기본 형태는 다음과 같다.

 

 

if-else문

if는 조건이 참일 때 할 일을 정의하는 구문을 만든다.

원한다면 사용자는 else를 추가하여 조건이 거짓일 때의 할 일을 추가 정의할 수 있다.

 

 

조건문은 ‘주어진 조건에 따라 선택적으로 구문을 실행한다’는 특징을 가진 하나의 구문일 뿐이다.

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

 

 

 

반복문

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

대표적인 반복문은 다음 두 가지이며, 두 반복문은 구조 및 동작방식에서 차이를 보인다.

 

 

 

while문

키워드 while을 이용해 만드는 구문 while문은 ‘주어진 조건이 참일 동안에 구문을 반복하는’ 반복문이다. while문의 기본 형태는 다음과 같다.

=> 조건이란 불리언을 반환하거나 불리언으로 해석될 수 있는 표현식을 사용한다.

=> 반복 구문은 ‘루프loop’라고도 한다.

 

보통 반복문은 반복을 종료할 수 있는 조건을 같이 사용한다.

 

이 경우 number는 1이고, 3보다 작기 때문에 콘솔 구문을 출력한다. 이후 대입연산자로 number에 1이 더해진다.

1을 더하면 2가 되고 3보다 작기 때문에 다시 반복한다. 2번 반복하면 number는 3이되고, 조건은 3보다 작을 때 실행되기 때문에 종료된다.

 

조건문을 구성하는 세 가지 요소는 초기식, 조건식, 반복식이 있다.

while문은 window.confirm()을 통하여 이 세 가지 요소를 모두 사용할 필요가 없다.

window.confirm()은 사용자로 부터 참 또는 거짓의 불리언 데이터를 받는다.

confirm()은 alert()처럼 다이얼로그 박스를 출력하며, 확인을 누르면 참을, 취소를 누르면 거짓을 반환한다.

 

 

for문

for문은 구문 작성시 반복을 위해 위해 필요한 세 가지 요소를 한 곳에 모아 작성함으로써 보다 명시적으로 반복 횟수를 표현할 수 있는 직관적인 구문이다.

 

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

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

 

 

이 경우 초기식 i가 1이고, 반복 조건은 3이하일때 반복한다면 처음 동작한 후 i에 1이 추가된다.

그럼 i는 2가되고 3이하이므로 다시 반복한다.

3번 반복하고 i가 4가 되는 순간 반복문은 종료된다.

 

 

 

함수

함수는 ‘호출될 수 있는 코드 조각’이다.

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

 

함수를 만드는 두 가지 방법이 있다.

 

* 함수 선언식

* 함수 표현식

 

함수 선언식

함수 선언식은 다음과 같은 형태를 가진다.

=> 위와 같은 선언 이후, 함수명은 중괄호{} 안의 기능 대신 사용될 수 있다

 

 

함수 표현식

함수 표현식은 다음과 같은 형태를 가진다.

 

 

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

그리고 함수가 사용되기 위해서는, 함수를 ‘호출’해야만 한다.

 

=> 함수를 호출할 때는 함수의 이름 뒤에 반드시 소괄호를 붙인다.

 

 

호이스팅이란, 함수 생성문이 함수 호출문보다 뒤에 위치할 수 있는 기능이다.

즉, 선언식은 호출문보다 뒤에 위치할 수 있지만, 표현식은 뒤에 위치할 수 없다.

 

또한 함수 표현식의 경우 함수명이 존재하지 않기에 익명 함수라 부른다.

익명 함수는 1회성으로 사용할 때 사용되는 콜백 함수 등으로 쓰인다.

 

 

함수의 이름을 지을 때의 규칙

함수의 기능을 호출하기 위해서는 함수의 이름을 알아야 한다.

함수 이름을 정할 때의 규칙은 변수 이름 정할 때의 규칙과 유사하나, 다음과 같은 사항들을 추가적으로 고려하는 것이 좋다.

1. 함수의 기능을 적절하게 표현할 수 있는 이름을 사용한다.
2. 명사보다는 동사로 된 이름을 사용한다.(기능이므로) 
3. 소문자로 시작하되, 여러 단어가 섞인 경우 카멜표기법을 사용한다.

 

 

데이터 반환

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

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

 

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

이때 키워드 return이 사용된다.

 

return

return은 함수 내부에서 함수의 부가 기능을 위해 사용하는 키워드이다.

return은 두 가지 기능을 가지고 있다.

 

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

* 함수를 끝낸다.

 

함수를 끝내는 것이 목적일 때, return뒤에 별도의 데이터를 입력하지 않아도 된다.

 

 

함수 호출문은 ‘함수명 + 소괄호’이다.

소괄호의 역할은, 함수가 실행될 때 사용할 재료를 전달받는 것이다. 재료란 데이터를 뜻한다.

 

재료를 받아 기능을 수행하는 함수를 만들 때는, 재료의 이름을 매개변수라고 한다.

 

매개변수는 원하는 만큼 추가할 수 있다.

구분자 쉼표(,)를 이용해 추가하고, 호출시에도 그에 맞게 재료를 전달한다.

 

재료를 전달받기 위해 만들어 둔 변수를 매개변수(parameter), 실제 함수 호출시에 전달하는 데이터를 인자(argument)라 부른다.

즉 함수에 들어가는 재료는 매개변수, 이 함수를 호출할 때 넣는 입력값은 인자 라고 한다.

 

인자로 데이터를 전달받고, 이를 이용해 구문을 수행해서 그에 따른 결과값을 반환하는 함수를 만들 수 있다

 

 

함수를 만들 때 매개변수는 있어도 되고 없어도 된다.

키워드 return을 통한 데이터 반환 또한 있어도 되고 없어도 된다.

이로써 우리가 만들 수 있는 함수의 유형은 다음의 네 가지로 정리된다.

1. 매개변수도, 반환도 없는 함수 
2. 매개변수는 있지만, 반환은 없는 함수 
3. 매개변수는 없지만, 반환은 있는 함수 
4. 매개변수와 반환이 모두 있는 함수

 

이벤트(event)

이벤트란 ‘사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건’을 뜻한다.

이 강의에서 우리는 웹을 다루고 있고, 당연히 웹에서도 이벤트가 발생한다.

 

웹에서 발생하는 이벤트의 예

• 웹페이지 사용자가 버튼을 클릭했다, 클릭 이벤트 발생
• 웹페이지 사용자가 키보드를 눌렀다, 키다운 이벤트 발생
• 웹페이지 사용자가 입력 폼의 내용을 제출했다, 제출 이벤트 발생
• 외 다수

 

각각의 이벤트들은 이벤트 핸들러(handler)를 가질 수 있다. (이벤트 리스너 라고도 한다.)

이벤트 핸들러란 이벤트가 발생되면 실행될 코드 블록을 뜻하며, 주로 함수가 이 역할을 담당한다.

이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라 한다.

 

 

웹 사용자가 버튼(button) 요소를 클릭 했을 때, 경고 다이얼로그 박스로 환영의 메시지를 보여주고 싶다면

이러한 형태를 사용할 수 있다.

alert()를 통해 메시지를 담은 다이얼로그 박스를 설정 하고, 버튼을 클릭하는 이벤트가 발생하면,

이 다이얼로그 박스가 나타난다.

 

 

이벤트 구문 기본 형태

이벤트가 발생할 수 있는(혹은 발생할 예정인) 타겟을 선택하고, 이벤트 핸들러 속성에 이벤트 핸들러를 대입한다.

 

이벤트 핸들러를 등록하기 위해 속성에 함수를 대입하는 것과 함수 호출문을 대입하는 것은 엄연히 다르다.

함수를 대입하면 이벤트가 발생 시 함수의 기능이 실행된다.

하지만 함수 호출문을 대입하면 이벤트가 발생 시 함수 호출문이 실행되고, 그 후 결과를 반환해서 대입한다.

전혀 그럴 필요가 없는 쓸대없는 구문이 추가된다.

 

addEventListener & 이벤트 객체

addEventListener

onclick, onkeydown 과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것 보다 현대적인 방법은, addEventListener 메소드를 활용하는 것이다.

 

addEventListener 함수를 사용하는 것은 이벤트 핸들러 속성을 사용하는 것에 비해 몇 가지 이점을 제공한다.

1. 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재한다. 
2. 같은 리스너(타겟)에 대해 다수의 핸들러를 등록할 수 있다.
3. 추가적인 옵션 사항들이 제공된다.

 

 

이벤트 객체

이벤트 객체는 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터이다.

이를 위해서 이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생시마다 전달받을 수 있도록한다.

 

이벤트 객체 e를 입력하여 이벤트 발생 시 함수에 포함된 기능을 전달한다.

이 경우 CSS의 hover처럼 버튼위에 마우스을 올릴 때 이벤트가 발생하며, 버튼의 색은 회색으로, 버튼에 쓰인 text는 검은색으로 변경된다.

 

 

createElement & appendChild

document.createElement

document의 createElement 메소드는 지정된 이름의 HTML 요소를 만들어 반환해 준다.

 

HTML 요소가 만들어지고 반환 되었다고 해서, 해당 요소가 곧장 웹 브라우저 화면에 추가되는 것은 아니다.

 

appendChild 메소드는 DOM 내 개별 요소(‘노드’라고도 함)에 자식 요소를 추가할 때 사용하는 메소드이다.

 

 

appendChild vs append

appendChild 메소드와 비슷한 역할을 하는 append 메소드도 있다.

타겟 요소에 자식 요소를 추가한다는 점에서 같으나, 차이점도 존재한다.

 

* appendChild의 경우 추가한 자식 노드를 반환하지만, append는 반환 데이터가 없다.

* append를 이용하면 요소에 노드 객체 또는 문자열을 자식 요소로 추가할 수 있지만,

  appendChild는 노드 객체만을 추가할 수 있다

 

 

 

입력 요소 값 읽기

<input>, <select>처럼 사용자로부터 입력을 받는데 사용 되는 요소들이 있다.

여기에서 사용자가 입력한 값을 읽어들일 때는 요소의 value 속성에 접근한다.

 

* 요소의 텍스트에 접근하고 싶다: textContent 또는 innerText

* 사용자가 요소에 입력한 값에 접근하고 싶다: value

 

 

입력 요소의 value에 접근하여 할 수 있는 일은 크게 두 가지, 읽기와 쓰기이다.

 

여러 입력 요소를 포함할 수 있는 폼 요소로부터 여러 입력 값을 읽을 수 있다.

 

 

로그인 창처럼 form을 만들고 로그인을 시도하듯 제출 이벤트가 발생할 때, 이벤트 객체를 통해서 입력값을 받는 코드이다.

이벤트 객체 e에 .target을 찍어서 식별자 id와 pw가 가르키는 요소의 value(값)을 콘솔에 출력한다.

 

 

 

 

 

자바 스크립트 내용 정리

•자바스크립트는 프로그래밍 언어이다.
•자바스크립트는 주로 웹(웹사이트) 개발을 위해 사용한다.
•자바스크립트는 브라우저가 가진 기능을 실행 시키거나, 웹 페이지의 내용을 조작할 수 있다.

•객체는 자바스크립트의 핵심 개념으로, 값 또는 기능을 가지고 있는 데이터!
•사용자는 자바스크립트 코드를 이용해 웹 브라우저 객체에 접근할 수 있다.
•객체 뒤에 점을 찍으면, 객체가 가진 데이터나 기능을 사용할 수 있다.
•객체가 가진 기능을 ‘메소드’라 한다.
•자바스크립 문법에도 주석이 있다. 두 가지 방법으로 주석을 만들 수 있다. /* 또는 //

•console 객체는 브라우저의 디버깅 콘솔에 접근할 수 있게 해 준다.
•console 객체는 window의 하위 객체이다.
•자바스크립트 코드에서, window. 은 생략이 가능하다.
•console.log(x) 는 ‘x를 콘솔에 기록해두자’라는 기능의 메소드 호출이다.
•코드에서 세미콜론(;)은 ‘구문의 끝’을 의미하는 기호이다. 세미콜론의 사용 은 선택사항이다.

•변수는 데이터를 기억하기 위해 사용하는 수단이다.
•변수는 한 번에 하나의 데이터를 기억하며, 변수에 데이터를 대입(=)하면, 그 때부터 해당 데이터 대신 사용할 수 있다.
•키워드 let을 사용해 변수를 선언하며, 데이터는 얼마든지 변경할 수 있다.
•변수의 이름은 기본적으로 자유롭게 지어줄 수 있으나, 제약사항이 있다.
•자바스크립트 코드로 표현할 수 있는 모든 데이터는 변수에 대입될 수 있다.

•상수는 ‘변하지 않는 값’이라는 뜻이다.
•자바스크립트 상수는 const 키워드를 이용해 선언할 수 있으며, 선언과 동시에 데이터를 초기화 해주어야 한다.
•상수는 데이터를 바꿀 수 없다.
•window 객체의 prompt(x) 메소드는 사용자로부터 문자열 입력을 받는 다이얼 로그를 생성해 준다.
•prompt(x)는 입력받은 문자열을 반환해주어 코드에서 활용할 수 있게 해준다.

•템플릿 리터럴은 표현식을 내장할 수 있는 문자열 표현법이다.
•백틱을 이용해 표현하며, 문자열에 데이터를 삽입할 수 있다.
•데이터 삽입 시에는 플레이스홀더(${})를 사용하며, 삽입된 데이터는 문자열의 멤버가 된다.
•데이터를 대신해 사용될 수 있는 것이라면 무엇이든 템플릿 리터럴에 삽입될 수 있다. 변수, 메소드 모두 가능하다.

•연산이란 ‘식이 나타낸 일정한 규칙에 따라 계산함’을 뜻한다.
•산술 연산은 두 항을 계산한 결과를 반환한다.
•대입 연산은 연산자 오른쪽 항을 왼쪽 항에 대입한다. 주로 변수 초기화에 사용하며, 복합 대입 연산자를 이용해 연산 처리를 추가하기도 한다.
•연산자가 여러 개 사용된 구문을 만들 수 있다. 이 경우 우선순위가 적용된다.

•null은 데이터가 없음을 나타내기 위해 사용하는 데이터이다.
•undefined는 정의되지 않은 상태임을 나타내기 위해 사용하는 데이터이다.
•boolean은 자료형으로, 참 또는 거짓 둘 중 한 가지 상태를 나타내기 위해 사용하는 논리적인 데이터 타입이다.

•HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 형식이다.
•DOM은 자바스크립트를 사용해서 웹 화면의 콘텐츠를 추가, 수정, 삭제하거나 이벤트를 처리할 수 있도록 프로그래밍 인터페이스를 제공한다.

•window의 document 속성은 창이 포함한 문서를 참조한다.
•document는 모든 종류의 문서에 대한 공통의 속성과 메소드를 제공한다.
•document의 querySelector 메소드는 선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 첫 번째 요소(Element)를 반환한다.
•document의 getElementById 메소드는 id를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 요소(Element)를 반환한다.
•textContent 속성은 노드가 포함하고 있는 텍스트 콘텐츠를 표현한다.

•비교 연산자를 이용하면 대소 및 등가 비교를 수행할 수 있다.
•비교 연산식은 언제나 boolean 데이터를 반환한다.
•이퀄(=) 하나는 대입 연산자를, 두 개부터는 비교 연산자 역할을 담당한다. •등가 비교에는 추상적 비교와 엄격한 비교가 각각 존재한다.

•조건문은 조건의 참/거짓 여부에 따라 프로그램의 흐름을 결정하는 구문이다.
•키워드 if를 이용해 만드는 if문이 대표적인 조건문이다.
•if문은 조건이 참일 경우에만 실행될 코드를 정의할 수 있는 구문이다.
•키워드 else를 추가하여 조건이 거짓일 경우에 실행될 코드를 추가 정의할 수 있다.

•반복문은 비슷하거나 동일한 구문을 반복해서 수행할 수 있는 구문이다.
•while문은 주어진 조건이 true ‘동안에’ 구문을 반복하는 반복문이다.
•다르게 말하면, 조건이 false가 될 때까지 구문을 반복한다.
•조건 확인 -> 구문 실행 -> 조건 확인 ->  반복 or 종료
•반복 구문은 ‘루프loop’라고도 한다

•for문은 초기식, 조건식, 반복식으로 반복 횟수를 명시적으로 표현할 수 있다.
•for문의 초기식에서 let 키워드를 사용해 선언한 변수는 for문의 실행이 끝나면 사용할 수 없다

•함수는 ‘호출될 수 있는 코드 조각’이다.
•함수는 선언식, 표현식 같은 방법을 이용해 만들 수 있고, 사용을 위해서는 함수를 호출해야 한다.
•함수 호출시에는 반드시 함수명 뒤에 소괄호를 붙인다.
•함수 안에서 선언한 변수는 함수 안에서만 쓸 수 있다.
•선언식은 함수 정의보다 호출문을 앞서 작성할 수 있지만, 표현식은 그럴 수 없다.

•함수를 만들 때, 함수가 데이터를 반환하도록 할 수 있다.
•함수가 데이터를 반환하면, 함수 호출문이 데이터로 대체된다.
•return은 함수로부터 데이터를 반환하는 역할을 한다.
•return은 함수를 강제로 종료시키는 역할도 한다.

•함수 호출 시 데이터를 재료로 전달할 수 있다.
•함수 정의시 재료를 전달받기 위해 소괄호 안에 만드는 변수를 매개변수라 한다.
•함수 호출시 전달하는 재료를 인자라 한다.
•매개변수의 사용 여부는 자유롭게 결정할 수 있으며, 개수 또한 자유롭게 결정할 수 있다.

•이벤트란 ‘시스템 내에서 일어나는 사건’을 뜻한다. (마우스 클릭, 키보드 입력, 마우스 휠 스크롤 등 다양하다.)
•각각의 이벤트들은 이벤트 발생 시 대응으로 이벤트 핸들러를 가질 수 있다.
•이벤트 핸들러 정의하는 작업을 이벤트 핸들러 등록이라 한다.
•이벤트 속성에 함수를 대입하는 것과 함수 호출문을 대입하는 것은 다르다.

•addEventListener 메소드를 활용해 이벤트 핸들러 등록을 할 수 있다.
•이는 이벤트 핸들러 속성을 사용하는 것보다 현대적인(좋은) 방법이다.
•이벤트 객체는 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터이다.
•이벤트 발생 시에 이벤트 핸들러가 호출될 때 이벤트 객체가 전달되는데, 이때 이벤트 핸들러 함수의 매개변수를 통해 이벤트 객체를 받을 수 있다.

•document의 createElement 메소드는 지정된 이름의 HTML 요소를 만들어 반환해 준다.
•appendChild 메소드는 노드에 자식 요소를 추가할 때 사용하는 메소드이다.
•append 메소드 또한 자식 요소를 추가할 때 사용할 수 있는 메소드인데, appendChild 와 기능적으로 다른 면이 있다.