front_chapter 4

  • 웹 문서의 뼈대를 이루는 것이 HTML, 외형을 꾸미고 미적 효과를 추가하는 것이 CSS, 여기서 다른 사이트 보다 내용을 강조하고 사용자의 동작에 즉시 반응하려면 자바 스크립트를 사용해야 한다.

13 자바스크립트와 첫만남

  • 자바스크립트로 서버나 웹에서 작동하는 프로그램을 만드는 등 웹의 모든 부분을 다룰 수 있다. 따라서 자바스크립트는 웹 개발에 핵심 언어가 되었다. 본 챕터는 따라서 해당 언어의 역할, 언어의 성격을 배운다.

13-1 자바스크립트로 무엇을 할까

웹의 요소를 제어합니다.

  • 동적인 동작을 구현하는데 자바 스크립트가 사용된다.

  • 탭을 클릭하여 새로운 컨텐츠가 나타난다거나, 하면서 공간을 절약하고 필요한 내용만 보이게 만드는 등의 역할을 자바 스크립트가 활용된다.

  • 더불어 서버가 원래는 하던, 폼으로 받은 데이터를 검사하고, 서버로 전달하는 작업도 자바 스크립트가 해준다.

웹 어플리케이션을 만듭니다.

  • 브라우저에서 문서 작업을 하고, 그림을 그리고, 게임을 할 수 있다. 이러한 작업들이 모두 자바 스크립트로 만들고, API를 활용하는 방식을 통해 공개된 선에선 누구나 사용 및 활용이 가능하다.

다양한 라이브러리를 사용할 수 있습니다.

  • 과거에는 서버에서 했던 일을 클라이언트에서 할 수 있게 변했고, 여기서 자바 스크립트의 기능이 더욱 강력해졌기 때문이다.

  • 웹 어플리케이션 개발에는 리액트React, 앵귤러Angular, 뷰Vue.js 같은 프레임 워크가, 그래픽에는 D3.js 나 DOM 을 조작하기 편하게 해주는 제이쿼리jQuery 같은 라이브러리가 이러한 역할을 해준다.

서버 개발을 할 수 있습니다.

  • Node.js 를 사용하면 백엔드 개발이 사용 가능하다.

13-2 웹브라우저가 자바스크립트를 만났을 때

  • 웹 브라우저는 자바스크립트 소스를 읽고 처리하는 해석기(JavaScript interpreter)가 있다. <script> 태그를 이용해 작성할 수 있고, 소스만 별도로 파일을 작성해 웹 문서와 연결하여 사용할 수 있다.

웹 문서 안에 <script> 태그로 자바스크립트 작성하기

  • 위 태그를 활용하면 자바스크립트 소스를 작성한 것으로 자바 스크립트를 실행하는 것이 가능하다.

  • 자바스크립트는 웹 문서에서 이미지나 텍스트 등의 요소를 제어하는 경우가 많으므로 되도록 이면 이미지나 텍스트 등을 다 표시한 후에 실행하는 것이 좋다. 따라서 </body> 태그 직전에 자바 스크립트 소스를 삽입하는 경우가 많다.

  • HTML, CSS 와는 다르게, 영어의 대소문자를 구분한다. 따라서 변수 이름이나 함수 이름에 대소무자 구분이 필수다.

(... 생략 ...)
<body>
	<h1 id "heading">자바스크립트</h1>
	<p id="txt">위 텍스트를 클릭해 보세요</p>
	<script>
		var heading = document.querySelector('#heading');
		heading.oclick = function() {
			heading.style.color = "red";
		}
	</script>
(... 생략 ...)

  • HTML 문서 안에서 자바 스크립트 소스를 작성하면 웹 문서에서 바로 확인이 가능하지만, 단점이 더 많다.

    • 관리 측면에서 어려울 뿐 아니라, 가독성을 해친다.

    • 여러 웹 문서에서 동일한 자바 스크립트 소스를 활용하는 경우 내부 선언은 매번 동일한 내용을 반복 기재해야 함

    • 따라서 외부 스크립트 파일로 저장하여 웹 문서와 연결하는 방법을 많이 사용한다.

외부 스크립트 파일로 연결해서 자바스크립트 작성하기

  • 외부 자바스크립트 파일은 <script> 태그 없이 자바 스크립트 소스만 작성, 확장자는 *.js 파일로 저장한다.

  • <script> 태그에 src 속성을 이용해서 자바스크립트 파일을 연결하면 된다.

  • 이러한 방식을 '외부 스크립트 파일을 연결한다'고 말한다.

  • 기본형 : <script src="external script src directory"></script>

var heading = document.querySelector('#heading');
heading.onclick = function() {
	heading.style.color = "red";
}
(... 생략 ...)
<body>
	<h1 id "heading">자바스크립트</h1>
	<p id="txt">위 텍스트를 클릭해 보세요</p>
	<script src="js/change-color.js"></script>
(... 생략 ...)

웹 브라우저에서 스크립트를 해석하는 과정

  • 웹 문서가 자바스크립트 소스를 해석하는 것은 다음의 과정으로 진행된다.

    1. 1행의 문서 타입을 보고 웹 문서임을 판단한다. HTML 표준에 맞춰 해석을 시작한다.

    2. head태그와 body태그 사이에 어떤 태그가 있고, 관련성을 분석한다.

    3. 7 ~ 14행의 스타일 정보를 분석한다.

    4. 20행의 자바스크립트 태그를 만나면, 웹 브라우저에 포함된 자바스크립트 해석기에게 스크립트를 전달하게 되고, 해석기가 이 내용을 해석한다.

    5. 2번 항목에서 분석한 HTML 과 3번의 CSS 해석 정보에 따라 웹 브라우저 화면이 표시된다.

    6. 마지막으로 자바스크립트 조건에 맞다면(여기선 클릭) 분석기가 자바스크립트를 실행하여 그 결과를 화면에 표시한다.

13-3 자바스크립트 용어와 기본 입출력 방법

식과 문

  • 식expression : 표현식, 연산 식 뿐 아니라 실제 값도 함수를 실행하는 것도 모두 포함된다. 어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있으며, 식은 변수에 저장된다.

  • 문statement : 명령, 문장 끝에 세미콜론(;) 을 붙여서 구분하며, 조건문, 제어문 등이 이에 포함된다. 넓은 의미에서 문이 값이나 식을 포함하는 관계를 가진다.

간단한 입출력 방법

알림 창 출력하기

  • 알림창alert : 가장 많이 사용되는 대화상자이며, 브라우저에서 알림창을 띄워 메시지를 표시하는게 가능하다.

  • 기본형 : alert(message)

확인창 출력하기

  • 확인창confirm 사용자가 '확인' , '취소' 버튼 중 직접 클릭 할 수 있으며, 그 결과에 맞게 동작하는 것이 가능하다.

  • 기본형 : confirm(message)

  • 사용자가 어떤 버튼을 눌렀는지를 변수로 저장하며, 그 값을 기준으로 프로그램을 처리 가능하다.

var reply = confirm("정말 배경 이미지를 바꾸시겠습니까?");

프롬프트 창에서 입력받기

  • 프롬프트 창prompt : 텍스트 필드가 있는 창으로, 간단한 메시지를 입력하면 이를 프로그램에서 사용하는 것이 가능하다.

  • 기본형 : prompt(message) || prompt(message, default)

  • 두 번째 기본형은 값을 지정하면, 뜨는 창에 기본적으로 입력된 값으로 나타나게 된다. 기본값이 없으면 칸은 비워지게 된다.

웹 브라우저 화면에 출력을 담당하는 document.write() 문

  • 단순히 브라우저 화면에서 결괏값을 확인하는 용도로는 이 문을 사하면 된다. (printf 같은 용으로 사용이 가능하다.)

  • 해당 속성을 이해하려면 document객체를 이해해야 하나, 핵심은 웹 문서에서 괄호 안의 내용을 표시하는(write) 명령문 이라고 이해하면 된다.

  • 해당 문 괄호 안에는 실제 웹브라우저 화면에 표시할 내용이나 어떤 결과값이 저장된 변수를 넣을 수 있다. 괄호 안에 따옴표, 작은 따옴표 사이에 입력한 것은 그대로 표시된다.

  • 동일하게 따옴표 안에 HTML 태그도 함께 사용 하는 것이 가능하다.

document.write("<h1>어서오세요</h1>");

  • 표시 할 때 내용과 변수를 섞어서 나타내는 것도 가능하다. + 연산자를 활용하면 되며, 해당 연산자는 더하기(plus) 의 개념이 아닌 연결 연산자 라고 부른다.

var name = prompt("이름을 입력하세요.");
document.write("<b><big>" + name + "</big></b>님, 환영합니다.");

콘솔 창에 출력하는 console.log() 문

  • 괄호 안에 내용을 콘솔 창에 표시하는 역할을 한다.

  • 콘솔 : 웹 브라우저의 개발자 도구 창에 포함된 공간. 소스 코드의 오류 발견이나 변수값을 확인하는 용도로 사용 가능하다.

  • 변수나, 괄호 안에 따옴표로 표시할 텍스트를 넣을 수도 있다. 단, HTML 태그는 사용이 불가능하다.

  • Ctrl + Shift + J 를 누르면 콘솔창을 열수 있다. (맥에선 눌러도 반응은 안하지만, 대신 개발자 도구를 활성화 시키면 콘솔 창이 뜬다.)

콘솔창에서 오류를 찾고 수정하기

  • 자바스크립트 소스 작성 이후 원하는 결과가 안나오는 경우가 발생한다. 이는 보통 오타 때문

  • 이때 콘솔 창을 활성화하면, 오류에 대한 내용이 나오며, 몇 번 자바 스크립트 행에서 잘못 되었는지 등을 확인하는 것이 가능하다.

13-4 자바스크립트 스타일 가이드

코딩 규칙이 왜 필요할까요?

  • 코딩 규칙, 스타일 가이드, 커딩 컨벤션, 코딩 스타일, 표준 스타일 등으로 불리며, 책에선 스타일 가이드라고 부른다.

  • 웹 문서를 위한 언어이다보니 다른 프로그래밍 언어보다 데이터 유형type 이 유연하며, 주의를 기울이지 않으면 오류 발생 가능성이 늘게 된다.

  • 유지보수 용이

자바스크립트 스타일 가이드

  • 스타일 가이드는 큰 회사에서 보통 배포한 것을 기준으로 작성되는 경우가 많다.

자바스크립트 소스를 작성할 때 지켜야 할 규칙

  1. 코드를 보기좋게 들여쓸 것 : space , tab

  2. 세미콜론으로 문장을 구분한다.

  3. 공백을 넣어 읽기 쉽게 작성한다. '

  4. 소스 코드를 설명하는 주석을 작성한다. : 한 줄 주석, 여러 줄 주석

  5. 식별자는 정해진 규칙을 지켜 작성한다.

    1. 영문, 언더스코어, 달러 기호로 시작

    2. 두 단어 이상은 하이픈, 언더바 혹은 카멜 케이스로 형태를 만들어 가독성을 살린다.

  6. 예약어keyword 는 사용할 수 없다.

14 자바스크립트 기본 문법

14-1 변수 알아보기

  • 변수 / 상수

  • 변수를 사용하기 위하여 이름을 붙이는 것, 변수 선언

    • 영문자, 언더스코어, 숫자만 사용 가능하다.

    • 자바스크립트는 영어 대소문자를 구분하며, 예약어 변수 이름으로 쓸수 없다.

    • 여러 단어 연결 시 대문자를 섞는 낙타표기법camel case을 사용한다.

    • 의미있는 이름으로 변수를 지어라.

  • 변수를 선언할 때는 var 이란 키워드를 적고 변수명을 적으면 선언이 된다.

  • = 로 값을 할당할 수 있고, 이를 값 할당이라고 한다.

14-2 자료형 이해하기

  • 자료형data type 컴퓨터가 처리할 수 있는 자료의 형태

  • 숫자형은 정수형과 실수형으로 구분하지만, 기본적으로 계산 자체에 적합하지 않다.

  • 문자열은 따옴표 들로 묶어서 표현하는 문자 데이터이다. 만약 큰 따옴표로 묶은 문자열 안에 다른 문자열을 넣는다고 한다면, 다음처럼 수정해서 넣어야 인식이 된다.

document.write("<span style='color:blue;'>", "Do it", "</span>");

  • 논리형은 온전히 참 거짓을 표현하는 자료형이다.

  • Undefined 형은 자료형이 정의되지 않은 때의 데이터 상태를 말한다. 즉, 변수 선언만 하고 값이 할당되지 않은 자료형을 말한다.

  • null : 데이터의 값이 유효하지 않은 상태를 나타낸다. undeifined 와 비슷하지만, 기본적으로 유효하지 않은 것을 말하므로, 없는 것과 구분된 케이스이다.

  • 배열은 대괄호로 묶어서 선언이 가능하다. 대괄호 안에 숫자를 집어넣으면 변수 배열의 순서상 해당하는 값을 의미하게 된다.

  • 자바스크립트는 기본적으로 데이터가 유연하게 설계되어 자연스럽게 변수 데이터 유형이 바뀌고 계산이 된다는 점이 보이는데, 그렇기 때문에 각종 버그에서 자유롭지 못하다는 점을 갖고 있다.

14-3 연산자 알아보기

  • 산술 연산자

  • 할당 연산자

  • 연결 연산자 '+'

document.write (birthYear + "년에 태어난 사람의 나이는 " + age + "세입니다.");

  • 비교 연산자

  • 문자열 비교는 아스키 값을 비교해서 결정한다.

  • 논리 연산자

14-4 조건문 알아보기

  • 기존 언어들과 유사하기에 그렇지 않은 부분만 정리한다.

  • if 문과 if~else 문

  • 조건 연산자로 조건 체크하기 삼단 연산자 : (조건) ? true case : flase case;

  • 논리 연산자로 조건 체크하기 (or, and, not)

  • switch 문

14-5 반복문 알아보기

반복문은 왜 필요할까?

for 문 사용하기

중첩된 for 문 사용하기

while 문과 do ~ while 문 사용하기

  • do ~ while 문 기본형 :

do {
	commands
} while(조건)

break 문과 continue 문

15 함수와 이벤트

15-1 함수 알아보기

여러 동작을 묶은 덩어리, 함수

  • 동작해야 할 목적대로 묶은 명령을 함수function 이라고 한다.

  • 자바 스크립트의 표준 라이브러리를 활용하면 여러 함수를 활용할 수 있다.

함수는 왜 사용할까?

함수 선언 및 호출

  • 함수 선언 : 함수가 어떤 명령을 처리할지 미리 알려주는 것 함수를 정의한다 라고도 한다.

  • 기본형 :

function 함수명() {
	//명령 	
}

  • 함수 선언과 실행 순서

    • 자바스크립트 소스를 해석 시 함수 선언 부분을 가장 먼저 한다. 즉, 개발자가 어느 곳에서 함수를 선언해도 그 위치를 먼저 읽으므로 함수 실행은 어디서든 가능하다.

    • 단 보통 한 파일 안에 여러 함수를 선언시, 이를 소스 앞 부분에서 선언하고 모아두면서 사용하면 된다.

15-2 var를 사용한 변수의 특징

  • ES6 버전 이후 let, const 라는 새로운 예약어가 생겼고, var, let, const 예약어 키워드의 존재 의의를 이해해야 한다.

변수의 적용 범위 스코프 알아보기

  • 변수가 적용되는 범위를 스코프scope 이라고 한다.

  • 자바 스크립트 함수에서 변수를 사용할 때는 이 영역을 주의해야 한다.

  • 지역 변수 (로컬 변수)

  • 전역 변수 (글로벌 변수)

함수 안에서만 쓸 수 있는 지역 변수

  • var 예약어와 함께 함수 안에서 선언하고 사용하는 경우 함수 밖으로 나와서는 사용이 불가능하다.

스크립트 안에서 자유롭게 쓸 수 있는 전역 변수

  • 어디서든 쓸 수 있고, 적용 범위를 제한하지 않고 쓸 수 있다.

  • var 키워드를 빼고 선언하면, 함수 내외 관계없이 사용이 가능하다.

var 와 호이스팅

  • 호이스팅hoisting : 상황에 따라 변수의 선언과 할당을 분리해서, 선언 부분을 스코프 가장 위쪽으로 끌어 올리는 것을 말한다.

var x = 10;

function displayNumber() {
	console.log("X is " + x);
	console.log("Y is " + y);
	var y = 20;
}

// 자바스크립트 해석기가 인식하는 코드 
var x = 10;
function displayNumber() {
	var y;
	console.log("X is " + x);
	console.log("Y is " + y);
	y = 20;
}
displayNumber();
X is 10
Y is undefined

  • 위의 예시를 통해 알 수 있는 점은 자바스크립트의 해석기interpreter는 함수 소스를 먼저 훑어 var를 사용한 변수를 따로 기억해 둔다.

  • 이로 인해 변수를 실행하기 전이지만 ' 이런 변수가 있다' 고 기억하기에, 이미 선언된 것처럼 사용이 되고 이것이 호스팅의 대표적인 예이다.

변수의 재선언과 재할당

  • var 예약어를 사용하면 재선언과 재할당을 할 수 있다.

function addNumber(num1, num2) {
	return num1 + num2;
}
var sum = addNumber(10, 20);// sum 변수 선언, 함수 호출
console.log(sum);
sum = 50;
console.log(sum);
var sum = 100;
console.log(sum);

15-3 let 와 const의 등장

  • var 예약어가 가지는 특성이 문제를 안고 있고, 이에 ES6에서 var를 보완한 let, const 예약어가 등장하게 된다.

let을 사용한 변수의 특징

  • var 예약어를 빠트리면 전역변수 생성되게 되고, 프로그램 길이가 길어지면 사용하는 변수를 재선언하는 경우, 재할당해버리는 경우 등의 문제가 발생한다.

  • 이러한 var의 특성으로 인해 let, const 가 추가되며, var 예약어를 사용하지 않는 것을 권장하게 된다.

  • 이러한 var와 let, const 사이의 차이는 '스코프의 범위' 다. let, const 는 블록 영역의 스코프를 가진다.

블록 안에서만 쓸 수 있는 변수

  • let 예약어로 선언한 변수는 선언한 블록({ }) 안에서만 유효하다. 블록을 벗어나면 사용이 불가능해 진다.

function calcSum(n) {
	let sum = 0;
	for (let i = 1; i < n + 1; i++) {
		sum += i; // 변수 i 적용 범위는 이 블록 만큼이다. 
	}
	console.log(sum) // 변수 sum 의 적용 범위
}

calcSum(10);

  • 만약 전역변수를 사용하고 싶다면 let 예약어를 쓰지 않고 변수 이름과 초깃값만 할당하면 된다.

재할당은 가능하지만 재 선언은 할 수 없는 변수

  • let 예약어는 선언시 값을 재할당은 가능하나, 재 선언이 불가능하다.

function calcSum(n) {
	let sum = 0;
	for (let i = 1; i < n + 1; i++) {
		sum += i; // 변수 i 적용 범위는 이 블록 만큼이다. 
	}
	sum = 100; // 변수 재 할당 => ok
	let sum; // 변수 재 선언 => ko
	console.log(sum) // 변수 sum 의 적용 범위
}

calcSum(10);

호이스팅이 없는 변수

  • var 예약어를 사용한 변수는 선언하기 전에 실행하더라도 할당되지 않은 자료형인 undefined 값을 가질 수 있다. 이는 호이스팅 때문이다. 단 let 을 사용한 변수는 변수 사용 정 사용시 오류 메시지를 나타낸다.

var x = 10;

function displayNumber() {
	console.log("x is " + x);
	console.log("y is " + y);
	let y = 20;
}

displayNumber();

const 를 사용한 변수의 특징

  • const 로 선언한 변수는 상수변수constant variable 이다. 재선언, 재할당이 불가능하며 let 예약어 처럼 블록 단위의 스코프 레벨을 가진다.

  • 이러한 예약어를 사용함으로써 변수로 인한 오류를 줄일 수 있다.

  • 결론적으로 값이 자주 바뀌는 변수라면 let 예약어를, 재할당이 없는 변수라면 const 예약어를 사용하면 된다.

자바스크립트 변수, 이렇게 사용하세요

  • 전역변수는 최소한으로 사용한다.

  • var 변수는 함수의 시작부분에서 선언한다.

  • for문에서 카운터 변수를 사용할 때는 var 예약어를 사용하지 않는다.

    • var 는 함수 수준의 스코프를 취하므로, 블록 밖에서 하기보단 let을 활용해 블록 내에서 변수로 선언하기를 추천한다.

  • ES6 샤용시 var보다 let을 사용하는 것이 좋다.

15-4 재사용할 수 있는 함수 만들기

매개변수, 인수, return 알아보기

함수 선언 시 매개변수 지정하기

매개변수 기본값 지정하기

  • ES6 부터는 함수에서 매개변수를 선언 시 기본값을 지정하는 기능도 생겼다.

(... 생략)
function multiple(a, b = 5, c = 10) { return a * b c;}
(생략 ...)

해당 경우 인수가 들어가지 않으면 기본값으로 할당되어 연산이 이루어질 수 있다.

15-5 함수 표현식

익명함수

  • 익명함수 : 이름이 없는 함수, 함수 자체가 식expression 이므로 함수를 변수에 할당할 수 있고, 다른 함수의 매개변수로 사용이 가능하다.

var sum = function (a, b) {return a + b;} // 익명함수 선언 및 변수 sum 에 할당

documen.write("함수 실행 결과: " + sum(10, 20)); // 익명함수 실행

즉시 실행 함수

  • 함수는 선언하고 필요 할 때만 호출해서 사용하는 방식이다.

  • 하지만 한번 실행을 위하여 정의와 동시에 사용하는 경우를 지정해줄 수 있고 이를 즉시 실행 함수라고 부른다.

  • 기본형

// 유형 1
(function() {
	명령
}());

// 유형 2
(function(매개변수) {
	명령
}(인수));

  • 함수를 식 형태로 선언하므로 마지막에 세미콜른(;)을 붙인다.

왜 즉시 실행함수를 사용해야 하는가?

  • 초기화 : 이는 한번 실행이 필요한 부분, 초기화 코드 부분에서 많이 사용하며, 이는 변수를 전역으로 선언하는 것을 피하기 위해서다.

// 예시 코드 
var initText;

(function (number) {
    var textList = ["is Odd Text", "is Even Text"];
    if (number % 2 == 0) {
        initText = textList[1];
    } else {
        initText = textList[0];
    }
})(5);

console.log(initText);
console.log(textList);
// 전역에 textList 가 저장되지 않고, initText 만 초기화된다. textList 는 지역변수로 전역변수와 충돌 없이 초기화를 가능케 한다.

  • 라이브러리 전역 변수의 충돌 : jQuery 나 Prototype 라이브러리는 동일한 $ 라는 전역변수를 사용하고, 이런 경우 라이브러리를 동시에 사용하면 변수끼리 충돌을 발생시킨다. 이럴 때 즉시실행함수 를 사용하면 $ 전역 변수 충돌을 피할 수 있다.

(function ($) {
    // $ 는 jQuery object
})(jQuery);

함수 호이스팅 변수 함수 호이스팅 시 변수 선언이 먼저 올라감.

화살표함수

  • ES6 버전부터 => 표기법(화살표 표기법)을 사용한 간단한 함수 선언 방법이 제시됨. 익명함수에서만 사용이 가능하다.

  • 기본형 : (매개변수) => { 함수 내용 }

매개변수가 없을 경우

const hi = function(){
	return "안녕하세요?";
}

//매개변수가 없는 화살표 함수
const hi = () => {return "안녕하세요?"};

//중괄호 생략
const hi = () => "안녕하세요?";

//매개변수가 1개인 경우
let hi = function(user) {
	document.write(user + "님, 안녕하세요?");
}

//매개변수가 1개인 경우 화살표 함수 
let hi = user => {document.write(user + "님, 안녕하세요?");}

//매개변수가 2개 이상인 경우
let sum = function(a, b) { return a + b; }

//매개변수가 2개 이상인 경우 화살표 함수 
let sum = (a, b) => a + b;

15-6 이벤트와 이벤트 처리기

  • 브라우저 상에서 버튼을 클릭하거나, 어떤 행동을 하는 것을 '이벤트' 라고 부르며, 이벤트가 발생했을 시 실행하는 함수를 '이벤트 처리기'라고 한다.

이벤트 알아보기

  • 웹 브라우저나 사용자가 행하는 동작을 이벤트라고 한다.

  • 웹 브라우저 안에서 이루어지는 모든 동작이 이벤트는 아니다. 웹 문서 영역 안에서 이루어지는 동작만을 말하며, 영역을 벗어난 클릭 행위는 이벤트가 아니며, 예를 들어 웹 브라우저의 제목 표시줄을 클릭하는 것은 이벤트에 포함되지 않는다.

마우스 이벤트

  • 종류 : 설명

  • click : HTML 요소를 클릭할 때

  • dbclick : HTML 요소를 더블 클릭할 때

  • mousedown : 요소 위에서 포인터를 눌렀을 때

  • mousemove : 요소 위에서 포인터를 움직일 때

  • mouseover : 요소 위로 옮겨질 때 이벤트 발생

  • mouseout : 요소에서 벗어날 때 이벤트가 발생

  • mouseup : 요소 위에 놓인 마우스 버튼에서 손을 땔 때 이벤트가 발생

키보드 이벤트

  • 종류 : 설명

  • keydown

  • keypress

  • keyup

문서 로딩 이벤트

  • 종류 : 설명

  • abort : 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트 발생

  • error : 문서가 정확히 로딩 되지 않았을 때 이벤트가 발생한다.

  • load : 문서 로딩이 끝나면 이벤트가 발생한다.

  • resize : 문서 화먼 크기가 바뀌었을 때 이벤트가 발생한다.

  • scroll : 문서 화면이 스크롤 될 때 이벤트가 발생

  • unload : 문서에서 벗어날 때 이벤트가 발생

폼 이벤트

  • 종류 : 설명

  • blur : 폼 요소에 포커스를 잃었을 때 이벤트가 발생한다.

  • change : 목록이나 체크 상태 등이 변경되면 이벤트가 발생한다. <input>, <select>, <textarea> 태그에서 사용한다.

  • focus: 폼 요소에 포커스가 놓였을 때 이벤트가 발생한다. <label>, <select>, <textarea>, <button>태그에서 사용한다.

  • reset : 폼이 리셋이 되었을 때 이벤트가 발생한다.

  • submit : submit 버튼을 클릭했을 때, 이벤트가 발생한다.

이벤트 처리기 알아보기

  • 이벤트 발생하면 처리하는 함수를 이벤트 처리기 또는 이벤트 핸들러 라고도 한다.

  • 가장 기본적인 방법은 이벤트가 HTML 태그에 이벤트 처리기를 직접 연결하는 방법이다.

  • 기본형 <tag on이벤트명 = "함수명">

(... 생략 ...)
<body>
	<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Green</a></li>
	<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Orange</a></li>
	<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Purple</a></li>
</body>
(... 생략 ...)

15-7 DOM을 이용한 이벤트 처리기

  • 이전 절에서 본 이벤트 요소와 이벤트 처리기를 지정하면 태그 속성과 자바스크립트 소스가 섞이게 된다. 그래서 자바스크립트를 수정하려면 HTML의 태그와 속성을 하나씩 찾아봐야 한다. 이때 DOM을 이용하여 이벤트처리기를 지정하면 태그와 자바스크립트 소스를 분리해서 보기 좋게 사용이 가능하다.

  • 기존 방식은 HTML 이 주인이 되어 자바스크립트의 함수를 불러오는 방식이고, 이는 굉장히 복잡하다.

  • 따라서 대안이 DOM을 활용한 자바스크립트가 주인이 되어 HTML 요소를 가져와 이벤트처리기와 연결하는 방식이다.

  • 기본형 : 웹요소.onclick = 함수;

  • 자바스크립트에서는 웹 요소를 여러 방법으로 가져올 수 있고, 쉬운 방법은 함수 querySekector()를 사용하는 방법이다.

    • 해당 방식은 괄호 안에는 클래스 이름이나 id 이름, 또는 다양한 선택자를 넣을 수 있다.

    • 주의사항은 함수 이름만 사용하고 괄호는 붙이지 않아야 한다.

//버튼 클릭해서 글자색 바꾸기
(... 생략 ...)
<body>
	<button id="change">글자색 바꾸기</button>
	<p>flasflsdjkfjsdafjsdlfjlsd blah blah </p>
(... 생략 ...)
function changeColor() { document.querySelector("p").style.color = "#f00";}

// 방법 1 : 웹 요소를 변수로 지정 & 미리 만든 함수 사용(여러번 사용하는 경우 변수로 할당 가능)
var changeBttn = document.querySelector("#change");
changeBttn.onclick = changeColor; // 함수를 지정하지만, 함수 이름 뒤에 괄호는 뺀다. 

// 방법 2 : 웹 요소를 따로 변수로 만들지 않고 사용(종종 쓰지 않고, 바로 쓰는 경우 사용 가능)
document.querySelector("#change").oneclick = changeColor;

// 방법 3 : 함수를 직접 선언(딱 한 번만 사용하는 경우)
document.querySelector("#change").oneclick = function() {
	document.querySelector("p").style.color = "#f00";
};

16 자바스크립트와 객체

16-1 객체 알아보기

  • 객체란 컴퓨터에서 인식할 수 있는 대상으로 만든 것을 말한다.

객체란?

  • 자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상. 웹 사이트나 웹 어플리케이션을 개발하는 언어이므로 웹과 관련된 대상을 모두 객체로 인식한다.

  • 자바스크립트에서 사용하는 객체는 다음과 같다.

    • 문서 객체 모델(DOM) :

    • 브라우저 관련 객체 : 웹 브라우저에서 사용하는 정보로 객체형태로 되어 있고, navigator, history, location, screen 객체 등이 있다.

    • 내장 객체 : 자바스크립트 안에 미리 객체로 정의되어 이를 내장객체라고 한다. 시간과 관련된 프로그램을 개발하려면 Date 객체를 가져와 쉽게 사용한다.

객체의 인스턴스 만들기

  • 자바스크립트에서 객체는 참조 형태로 사용해야 한다. 객체자체를 건드리는 것이 아닌 인스턴스instance 의 형태로 만들어서 사용해야 한다. >> '참조'의 의미를 명확히 이해해야 할 것 같다.

  • 객체는 그대로 두고, 그 객체와 똑같은 속성과 기능을 가진 인스턴스를 만들수 있다.

  • 기본형 : new 객체명

(...생략...)
var now = new Date(); // Date 인스턴스를 만들고 변수에 저장하기 
document.write("현재 시각은 " + now);
(...생략...)

프로퍼티와 메서드 이해하기

  • 프로퍼티property : 객체의 특징이나 속성

  • 메서드method : 객체에서 할 수 있는 동작

마침표 표기법으로 프로퍼티와 메서드 작성하기

  • 인스턴스는 객체의 프로퍼티와 메서드를 그대로 물려받기에 동일하게 사용한다. 프로퍼티와 메서드를 표시하려면 인스턴스 명 뒤에 마침표(.) 를 붙이고 객체의 프로퍼티나 메서드 이름을 작성한다.

    • 이때, 메서드는 함수 역할을 하므로 instance.getHours()처럼 이름 옆에 괄호를 넣어야 한다.

(...생략...)
var now = new Date();
document.write("현재 시각은 " + now.toLocaleString());
(...생략...)

16-2 자바스크립트의 내장 객체

  • 웹 문서의 계층 구조와 상관없이 나타낼 수 있는 객체인 내장 객체 라고 한다.

Array 객체

Array 객체로 배열 만들기

  • 자바스크립트에서 배열을 설정하기 편한 Array 객체가 내장되어 있다.

  • 기본형

var numbers = new Array(); // 배열 크기를 지정하지 않음.
var numbers = new Array(4); // 배열의 크기를 지정함.

Array 객체의 length 프로퍼티 사용하기

  • 배열의 길이와 관련된 것을 위해선 length 프로퍼티를 활용하면 된다.

(...생략...)
var numbers = ["one", "two", "three", "four"]; // 배열 선언
for (i = 0; i < numbers.length; i++) {
	document.write("<p>" + numbers[i] + "</p>"); // 해당 프로퍼티를 활용해 출력 
}
(...생략...)

Array 객체의 메서드

  • Array 객체 여러 메서드들이 존재하고, 그중 자주 이용하는 것들은 다음과 같이 정리 된다.

  • concat : 기존 배열에 요소를 추가하여 새로운 배열을 만든다.

  • every : 배열의 모든 요소가 주어진 함수에대해 참이면 true 를 반환. (아니면 false)

  • filter : 배열 요소 중에서 주어진 필터링 함수에 대해 true 인 요소만 골라 새로운 배열을 만든다.

  • forEach : 모든 요소에 대해 주어진 함수를 실행한다.

  • indexOf : 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾는다. -> 확인필요

  • join : 배열 요소를 문자열로 합치며, 구분자 지정이 가능.

  • push : 배열의 맨 끝에 새로운 요소를 추가한 후에 새로운 length 를 반환한다.

  • unshift : 배열의 시작 부분에서 새로운 요소를 추가함

  • pop : 마지막 요소를 꺼내 그 값을 결과로 반환

  • shift : 첫 요소를 꺼내 그 값을 결과로 반환

  • splice : 요소를 추가하거나 삭제한다

  • slice : 배열의 특정 부분만 잘라냄

  • reverse : 배열의 배치 순서를 역순으로 바꾼다.

  • sort : 배열의 요소를 지정한 조건에 따라 정렬한다.

  • toString : 배열에서 지정한 부분을 문자열로 반환한다. 각 요소는 쉼표(,) 로 구분한다. 링크

배열끼리 합치는 concat() 메소드

  • 서로 다른 배열을 합쳐서 새로운 배열을 만들어준다. 입력하는 배열의 순서에 따라 배열 순서가 달라진다.

// 배열 두개 합치기 
var nums = [1, 2, 3]; // 이건 숫자인가 문자열인가...
var chars = ["a", "b", "c", "d"];

var numsChars = nums.concat(chars);
var charsNums = chars.concat(nums);

document.write("numbs에 chars를 합치면: ", numsChars, "<br>chars에 nums를 합치면: ", charsNums);
(...생략...)

배열 안의 요소끼리 합치는 join() 메소드

  • 각 요소를 연결해서 하나의 문자열로 만들어주는 역할을 한다.

  • 이때 인자로 구분자를 따로 넣어줄 수 있고, 아무것도 넣지 않으면 쉼표(,) 로 구분된다.

var nums = [1, 2, 3];
var chars = ["a", "b", "c", "d"];
...

var string1 = nums.join();
document.write("구분자 없이: ", string1);
document.write("<br>");
var string2 = chars.join('/');
document.write("구분자 지정('/'): ", string2);

새로운 요소를 추가하는 push(), unshift() 메서드

var nums = [1, 2, 3]
...
var ret1 = nums.push(4, 5); // 배열 맨 끝에 새로운 요소 두 개 추가
document.write("length: ", ret1, "| 배열: ", nums);
document.write("<br>");
var ret2 = nums.unshift(0); // 첫 부분에 새로운 요소 추가
document.write("length: ", ret2, "| 배열: ", nums);
// 더불어 이 방식을 사용하면 원본 배열 인스턴스에도 영향을 준다.(새로운 값으로 만들어내기만 하는 메소드는 concat 이다.)

배열에서 요소를 꺼내는 pop(), shift()\

var chars = ["a", "b", "c", "d"];
...;
var popped1 = chars.pop();
document.write("꺼낸요소: ", popped1, "| 배열: ", chars, "<br>");
var popped2 = chars.pop();
document.write("꺼낸요소: ", popped1, "| 배열: ", chars, "<br>");

원하는 위치에 요소를 추가, 삭제하는 splice() 메소드

  • 배열의 중간의 부분부터 요소를 추가나 삭제를 하는 것이 가능하다.

  • 해당 메서드를 사용하면, 괄호 안에 인수에 따라 배열의 요소를 삭제나 혹은 새로운 요소를 추가하며, 해당 삭제 요소로 이루어진 하위 배열을 결과값으로 반환한다.

  1. 인수가 1개인 경우 : 인수가 지정한 인덱스의 요소부터 맨끝까지 삭제한다. (이를 결과로 받으면 해당 영역을 가지는 새로운 배열이 생성된다. )

  2. 인수가 2개인 경우 : 첫 번째 인수 = 기준 인덱스, 두 번째 인수 = 삭제할 요소 개수

  3. 인수가 3개인 경우 : 첫 번째 인수 = 기준 인덱스, 두 번째 인수 = 삭제할 요소 개수, 세 번째 인수 = 삭제한 위치에 추가로 삽입할 요소

// 인자 1개
var numbers = [1, 2, 3, 4, 5];
var newNumbers = numbers.splice(2);
document.write("반환된 배열: " + newNumbers + "<br>");
document.write("변경된 배열: " + numbers);

// 인자 2개
var study = ["html", "css", "web", "jquery"];
var newStudy = study.splice(2, 1);
document.write("반환된 배열: " + newStudy + "<br>");
document.write("변경된 배열: " + study);

// 인자 3개
var newStudy2 = study.splice(2, 1, "js");
document.write("반환된 배열: " + newStudy2 + "<br>");
document.write("변경된 배열: " + study);

기존 배열을 바꾸지 않으면서 요소를 꺼내는 slice() 메소드

  • 시작과 끝 인덱스를 지정해서 요소를 꺼내오되, 기존 배열은 값이 변하지 않는게 특징이다.

  • splice와 동일하게 인자 개수에 따라 의미가 매소드 의미가 달라진다.

// 인자 1개인 경우
var colors = ["red", "green", "blue", "white", "black"];
var colors2 = colors.slice(2); // 인덱스 2인 부분부터 마지막 요소까지 꺼내기 
document.write(colors2);

// 인자 2개인 경우 
var colors3 = colors.slice(2, 4); // 인덱스 2번부터, 3인 요소까지만 꺼낸다(4는 포함되지 않음)
document.write(colors3);

Date 객체

  • 현재 날짜와 시간을 출력하거나, 달력 표시, 특정 일까지 얼마나 남았는지 등 사이트에서 여러가지로 응용이 가능하다.

Date 객체 인스턴스 만들기

  • new 예약어를 사용하여 Date 객체의 현재 날짜를 지정할 수 있다.

  • 특정 날짜를 저장한 Date 객체를 만들고 싶은 경우, Date에 괄호를 넣어 구체적인 날짜 정보를 입력하는 것으로 가능하다. new Date(); new Date("2020-02-25")

  • 시간 정보를 추가로 입력하려면 'T' 를 뒤에 적고 시간을 입력하면 된다. new Date("2022-2-25T18:00:00)"

자바스크립트의 날짜, 시간 입력 방식 알아보기

  • Date 객체 사용을 위해선 자바스크립트가 인식 할 형식으로 날짜와 시간을 사용해야 한다.

    1. YYYY-MM-DD 형식 : 굳이 전체를 다 입력할 필요는 없다.

    2. YYYY-MM-DDTHH형식 : HH:MM:SS 형태로 시간을 입력하면되며, 끝에 'Z'를 붙이면 UTC(국제 표준시)로 표시된다.

    3. MM/DD/YYYY

    4. 이름 형식 : new Date("Mon Jan 20 2020 15:00:41 GMT+0900 (대한민국 표준시)")

Date 객체의 메서드

  • 해당 객체의 메서드는 크게 3가지로 구분된다.

    • 날짜/ 시간 정보를 가져오는 메서드

    • 사용자가 원하는 날짜/시간으로 설정하는 메서드

    • 날짜/시간 형식을 바꿔주는 메서드

  • 날짜/ 시간 정보 가져오기

    • getFullYear()

    • getMonth()

    • getDate()

    • getTime()

    • getHours()

    • getMinutes()

    • getSeconds()

    • getMilliseconds()

  • 날짜/ 시간 설정하기

    • setFullYear()

    • setMonth()

    • setDate()

    • setTime()

    • setHours()

    • setMinutes()

    • setSeconds()

    • setMilliseconds()

  • 날짜/ 시간 형식 바꾸기

    • toLocaleString()

    • toString()

Math 객체

  • 이 객체는 따로 인스턴스를 만들진 않는다.

  • 기본형 Math.Property || Math.Method

Math객체의 프로퍼티

  • E : 오일러 상수

  • PI : 원주율

  • SQRT2 : $√2$

  • SQRT1_2 : $1/√2$

  • LN2 : $log_e2$

  • LN10 : $log_e10$

  • LOG2E : $log_2e$

  • LOG10E : $log_{10}e$

Math 객체의 메서드

  • Math 객체의 메서드는 주로 수확과 관련된 함수의 결과값을 반환한다.

  • abs() : 절대값을 반환한다.

  • acos() : 아크 코사인값을 반환한다.

  • atan() : 아크 탄젠트 값

  • atan2() : 아크 탄젠트 값

  • ceil() : 매개변수의 소수점 이하부분을 올린다.

  • cos() : 코사인 값

  • exp() : 지수 함수를 나타낸다

  • floor() : 매개변수의 소수점 이하 부분을 버린다.

  • log() : 매개변수에 대한 로그값을 반환한다.

  • max() : 매개변수 중 최댓값을 반환한다.

  • min() : 매개변수 중 최솟값을 반환한다.

  • pow() : 매개변수중 지숫값을 반환한다.

  • random() : 0과 1 사이의 무작위 수를 반환한다.

  • round() : 매개변수의 소수점 이하 부분을 반올림한다.

  • sin() : 사인 값

  • sqrt() : 매개변수에 대한 제곱근을 반환

  • tan() : 탄젠트 값을 반환

16-3 브라우저와 관련된 객체

  • 웹브라우저와 관련된 여러가지 효과를 자바스크립트를 가지고 만들수 있다. 이는 자바스크립트 내부에 웹 브라우저와 관련된 객체가 미리 정의되어 있기 때문이다.

브라우저와 관련된 객체 알아보기

  • 브라우저는 HTML 소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어낸다.

  • 웹 브라우저가 열리면 가장 먼저 window 라는 객체가 만들어지고 이를 기반으로 하위요소에 해당하는 객체들이 나타난다. 이 하위객체는 웹 문서와 주소 표시줄과같은 브라우저 요소에 해당하며 각각다른 하위 객체를 가진다.

  • 브라우저와 관련된 내장객체

    • window : 브라우저 창 열릴 때마다 하나씩 만들어지며 창 안의 요소 중 최상위에 있다.

    • document : 웹 문서마다 하나씩 있으며, <body> 태그를 만나면 만들어지며, HTML 문서 정보가 담겨 있다.

    • navigator : 브라우저 정보가 있다.

    • history : 현재 창에서 사용자의 방문 기록을 저장한다.

    • location : 현재 페이지의 URL 정보가 담겨 있다.

    • screen : 현재 사용하는 화면 정보를 다룬다.

window 객체의 프로퍼티

  • 자바스크립트의 모든 객체는 window 객체 안에 포함되어 있다.

  • window 객체의 프로퍼티

    • document : 브라우저 창에 표시된 웹 문서에 접근할 수 있다.

    • frameElement : 현재 창이 다른 요소 안에 포함되어 있는 경우, 그 요소를 반환, 반대면 null 반환

    • innerHeight : 내용 영역의 높이를 나타낸다.

    • innerWidth : 내용 영역의 너비를 나타낸다.

    • localStroage : 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환한다.

    • location : window 객체의 위치 또는 현재 URL을 나타낸다.

    • name : 브라우저 창의 이름을 가져오거나 수정한다.

    • outerHeight : 브라우저 창의 바깥높이

    • outerWidth : 브라우저 창의 바깥너비

    • pageXOffset : 스크롤했을 때 수평으로 이동하는 픽셀 수로 scrollX와 같다.

    • pageYOffset : 스크롤했을 때 수직으로 이동하는 픽셀 수로 scrollY와 같다.

    • parent : 현재 창이나 서브 프레임의 부모다.

    • screenX : 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타낸다.

    • screenY : 브라우저 창의 왼쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타낸다.

    • scrollX : 스크롤 했을 때 수평으로 이동하는 픽셀 수

    • scrollY : 스크롤 했을 때 수직으로 이동하는 픽셀 수

    • sessionsStorage : 웹 브라우저에서 데이터 저장하는 세션스토리지를 반환한다.

window 객체의 메서드

  • 웹브라우저 창 자체와 관련된 메서드들이며, 기본 객체들에 대하여 window. 를 생략하여 사용한다.

  • window 객체의 메서드

    • alert() : 알림 창을 표시한다.

    • blur() : 현재 창에서 포커스를 제거한다.

    • close() : 현재 창을 닫는다.

    • confirm() : [확인], [취소] 버튼이 있는 확인창 을 표시한다.

    • focus() : 현재 창에 포커스를 부여한다.

    • moveBy() : 현재 창을 지정한 크기 만큼 이동한다.

    • moveTo() : 현재 창을 지정한 좌표로 이동한다.

    • open() : 새로운 창을 연다.

    • postMessage() : 메시지를 다른 창으로 전달한다.

    • print() : 현재 문서를 인쇄한다.

    • promt() : 프롬프트 창에서 입력한 텍스트를 반환

    • resizeBy() : 지정한 크기만큼 현재 창의 크기를 조절한다.

    • resizeTo() : 동적으로 브라우저 창의 크기를 조절한다.

    • scroll() : 문서에서 특정위치로 스크롤 한다.

    • scrollBy() : 지정한 크기만큼씩 스크롤 한다.

    • scrollTo() : 지정한 위치까지 스크롤한다.

    • sizeToContent() : 내용에 맞게 창의 크기를 맞춘다.

    • stop() : 로딩을 중지한다.

새 브라우저 창을 여는 open() 메서드

  • 홈페이지 팝업창을 띄울 때 사용한다.

  • 새 브라우저에서 창 열기 : window.open(경로, 창 이름, 창 옵션)

    • 경로 : 팝업 창에 표시할 문서나 사이트의 경로를 나타낸다.

    • 창 이름 : 이름을 지정 시 항상 이 창에 팝업 내용이 나타나게 가능하며, 이름 미지정시 팝업 창이 계속 새로 나타난다.

    • 창 옵션 : 여러 옵션을 활용해 창의 크기 지정 할 수 있고, 위치 미 지정시 팝업창은 화면 맨 왼쪽 위에 나타난다.

창 이름 지정하기

  • 예시 16/popup.html 파일을 열고 웹 브라우저 화면 왼쪽 상단에서 새로고침을 눌러보면 팝업창이 계속 새롭게 생기는 것을 볼 수 있다. 이때 팝업창의 이름을 지정하면 이를 해결할 수 있다.

  • 창 이름을 지정하면 팝업 창에 이름이 생기면서 지정한 창에만 내용이 나타나게 된다.

(... 생략 ...)
<script>
	window.open("notice.html", "pop", "width=500, height=400");
</script>
(... 생략 ...)

팝업 창 위치 지정하기

  • open() 메서드로 팝업창 메서드에 left, top 속성을 지정할 수 있고, 이를 통해 왼쪽과 위쪽을 기준으로 팝업창의 위치를 표시할 수 있다.

(...생략...)
<script>
	window.open("notice.html", "pop", "width=500, height=400, left=100, top200");
</script>

팝업 차단 고려하기

  • 대부분의 팝업창에서는 사용자에게 광고나 정보를 강제로 전달하기에 최신 웹 브라우저에서는 이를 열리지 않도록 하는 것이 기본값으로 설정되어 있다.

  • 또한 보안 프로그램이나 관련 유틸리티를 설치하면 웹 브라우저의 팝업이 자동으로 차단된다.

  • 이에, 이를 팝업창으로 보여주어야 한다면, 차단된 상태임을 사용자에게 알려주는게 중요하다.

  • 이를 위한 팝업창을 여는 함수가 존재하고, 이를 사용하면 팝업차단시 null을 반환한다.

<script>
	function openPopup() {
		var newWin = window.open("notice.html", "pop", "widht=500, height=400");
		if (newWin == null) {
			alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해주세요.")
		}
		newWin.moveBy(100, 100);
	}
</script>

브라우저 창을 닫는 close() 메서드

  • 팝업창 내용을 모두 살펴본 후 닫기 버튼이나, 링크를 눌렀을 때 해당 팝업창을 삭제하도록 하는 것이 close() 메서드 이다.

  • 기본형 : window.close()

(... 생략 ...)
<button onclick="javascript:window.close();">닫기</button>
(... 생략 ...)

요즘 팝업창은....

  • 위에서 언급한 메서드를 사용하는 것은 기능적으로는 유용하나, 웹 브라우저 창의 형태 그대로이므로 트렌드를 반영한 사이트 디자인과 동털어질 수 있다.

  • 이에 문서의 일부처럼 보이는 팝업창을 사용하기도 하며, 이때 <div> 태그를 사용해 만든다. 레이어 방식으로 기존 사이트 위에 팝업창을 겹쳐 놓는다.

  • 이 밖에도 DOM 객체를 사용해 만들 수도 있고, 자바스크립트의 '쿠키'로 제어도 할 수 있다.

navigator 객체

  • 이 객체는 웹 브라우저의 버전을 비롯해, 플러그인 설치 정보, 온오프라인 등의 여러 정보가 담겨 있다. 이 정보는 수정 불가이며, 오로지 읽기만 가능하다.

웹 브라우저와 렌더링 엔진

  • 웹 브라우저의 다양화로 여러 웹 브라우저를 고려하여 개발하는 것은 어려운 부분이며, 특히 중요한 것이 렌더링 엔진(레이아웃 엔진)이다.

  • 왜냐하면 웹 브라우저마다 엔진의 차이로 HTML, CSS 해석이 달라지기 때문이다.

  • 브라우저 별 렌더링 엔진과 자바스크립트 엔진

    • 브라우저 - 렌더링 엔진 - 자바스크립트 엔진

    • 크롬 - 블링크(Blink) - V8

    • 파이어폭스 - 게코(Gecko) - 스파이더 몽키

    • 인터넷 익스플로러 - 트라이덴트 - 차크라

    • 사파리 - 웹킷 - 자바스크립트 코어

    • 오페라 - 블링크 - V8

userAgent 프로퍼티 알아보기

  • 사용자 에이전트 문자열을 의미한다. 이는 사용자의 웹 브라우저 정보를 서버로 보낼 때 사용한다.

  • 여기에는 웹 브라우저 버전, 자바스크립트 엔진 종류 등 정보가 내제 된다.

크롬 
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/81.0.4044.138 Safari/537.36”

엣지
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36 Edg/81.0.416.72"

파이어폭스
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:76.0) Gecko/20100101 Firefox/76.0"

  • Mozilla 라는 예약어는 넷스케이프 사용자 에이전트 문자열과 호환을 위한 키워드

  • 크롬, 마소 엣지, 사파리 브라우저는 모두 웹킷 엔진을 기반으로 하며 웹킷 엔진은 KTHML 이라는 오픈소스 렌더링 엔진을 기반으로 한다.

  • like Gecko 키워드는 기존 웹 브라우저와 호환된다고 알려준다.

  • 사용자 에이전트 문자열에는 여러 의미가 있고 이를 정리하면 다음과 같다.

    • Mozilla/x.x

    • Windows NT x.x

    • Win64; x64 : 윈도우 64비트 버전을 나타낸다.

    • WOW64 : 윈도우 64비트 버전을 나타낸다.

    • Trident/x.x : 인터넷 익스플로러의 트라이덴트 엔진 버전을 나타낸다.

    • rv: x.x

    • AppleWebkit/x.x

    • KHTML

    • like Gecko

    • Firefox/ x.x

    • Chrome/ x.x

    • Safari/ x.x

navigator 객체 정보 살펴보기

  • 크롬 브라우저에서 콘솔창을 열고, navigator 를 입력 하면 관련 정보를 모두 볼 수 있다.

  • 이 객체에는 최근에 많은 웹 애플리케이션이 등장하면서 다양한 상태 속성이 포함된다.

    • battery

    • cookieEnabled

    • geolocation

    • language

    • oscpu

    • userAgent

  • 전체 프로퍼티나 메서드 목록은 mozilla 페이지의 공식 문서를 참고 해야 한다.

history 객체

  • 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장되며, 이는 보안의 문제로 읽기 전용이다.

  • 프로퍼티

    • length : 현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문 사이트 개수가 저장된다.

  • 메서드

    • back() : 이전 페이지를 현재 화면으로 불러 온다.

    • forward() : 다음 페이지를 현재 화면으로 불러온다.

    • go() : 현재 페이지를 기준으로 상대적 위치에 있는 페이지를 현재 화면으로 불러온다. 1은 다음페이지를, -1은 이전 페이지를 불러온다.

location 객체

  • 브라우저의 주소표시줄과 관련된 객체이다.

  • 프로퍼티

    • hash : #으로 시작하는 해시 부분의 정보를 담고 있다.

    • host : URL 호스트의 이름과 포트번호를 담고 있다.

    • hostname : URL 호스트 이름이 저장된다.

    • href : 전체 URL 이다.

    • pathname : URL 경로가 저장된다.

    • port : URL 포트 번호를 담고 있다.

    • protocol : URL 프로토콜을 저장한다.

    • password : 도메인 이름 앞에 username 과 password 를 함께 입력해서 접속하는 사이트의 URL 일 경우 password 정보를 저장한다.

    • search : URL 중에서 ? 로 시작하는 검색 내용을 저장한다.

    • username : 도메인 이름 앞에 username 을 함께 입력해서 접속하는 사이트의 URL일 경우 username 정보를 저장한다.

  • 메서드

    • assign() : 현재 문서에 새문서 주소를 할당해서 새 문서를 가져온다.

    • reload() : 현재 문서를 다시 불러온다.

    • replace() : 현재 문서의 URL을 지우고, 다른 URL 문서로 교체한다.

    • toString() : URL을 문자열로 반환한다.

screen 객체

  • 사용자의 화면 크기나 정보를 알아낼 때 사용하는 것으로, 화면이란 PC, 모니터, 모바일 기기의 화면 자체를 의미한다.

  • 프로퍼티

    • availHeight : UI 영역(윈도우 작업 표시줄 등)을 제외한 영역의 높이

    • availWidth : UI 영역을 제외한 내용 표시 영역의 너비

    • colorDepth : 화면에서 픽셀을 렌더링 할 때 색상의 수

    • height : UI영역을 포함한 화면 높이

    • orientation : 현재 화면 방향을 나타낸다.

    • pixelDepth : 화면에서 픽셀을 렌더링할 때 사용하는 비트 수

    • width : UI 영역을 포함한 화면 너비를 나타낸다.

  • 메서드

    • lockOrientation() : 화면 방향을 잠근다.

    • unlockOrientation() : 화면 방향 잠금을 해제 한다.

17 문서 객체 모델(DOM)

17-1 문서 객체 모델 알아보기

  • DOM은 문서 객체 모델document object model은 자바 스크립트 프로그래밍에서 가장 중요한 개념이다.

문서 객체 모델이란

  • 웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것이고, 이렇게 하기 위해선 웹 문서에서의 모든 요소를 따로 제어할 수 있어야 한다.

  • 이러한 문서 정보 요소를 객체화 한 것이 바로 문서 객체 모델DOM: document object model 이다.

  • 문서 객체 모델의 정의 : 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

  • DOM 이라는 것은 HTML 만 있는 것은 아니지만, 본 교재는 HTML 을 기준으로 하여 설명한다.

  • DOM은 웹 문서를 하나의 객체로 정의한다. 그 안에 모든 요소들은 하위 객체가 되어서 인식하고 처리한다. 이러한 객체들은 당연히 그 안에 다양한 프로퍼티와 메서드가 존재한다.

DOM 트리

  • 웹 문서의 요소를 부모와 자식 요소로 구조화 되어 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>DOM Tree 알아보기</title>
</head>
<body>
	<h1>Do it!</h1>
	<img src="images/doint.jpg" alt="공부하는 이미지">
</body>
</html>

  • 위의 예시 코드를 HTML 요소 계층 관게를 기반으로 설정되어 있는 모습을 보여준 것이 저 이미지다.

  • 부모와 자식관계를 표시하면 마치 나무 형태가 되므로 DOM 트리 라고 한다.

  • DOM 트리의 시작부분인 html 노드는 모든 노드의 뿌리에 해당하기에 루트root 노드 라고 부른다.

  • 각 노드 간의 관계는 다음과 같이 지정되어 있다

    • 부모 노드 : 지정 노드 기준으로 상위 노드

    • 자식 노드 : 지정 노드 기준으로 하위 노드

    • 형제 노드 : 동일한 부모 노드를 가지는 노드 관계

  • DOM 구성의 기본 원칙

    • 모든 HTML 태그는 요소element 노드 이다.

    • HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드이다.

    • HTML 태그에 있는 속성은 자식 노드인 속성attribute 노드이다.

    • 주석은 주석comment 노드이다.

17-2 DOM 요소에 접근하고 속성 가져오기

DOM 접근하기

  • CSS 에서는 class, id 태그 등의 스타일을 각각 구별해서 정의하며, 이를 선택자라고 한다. 그리고 이 선택자를 사용하여 DOM에 접근할 수 있다.

id 선택자로 접근하는 getElementByld() 메서드

  • 특정 id가 포함된 DOM 요소에 접근이 가능하다.

  • 기본형 : 요소명.getElementByID("id명")

class값으로 접근하는 getElementsByClassName() 메서드

  • class 선택자 이름이 들어가면, 해당 요소에 접근하는 것이 가능하다.

  • 기본형 : 요소명.getElementsByClassName("class명")

  • class 선택자는 웹 문서 안에서 여러 요소에서 사용될 수 있기에, 메서드를 사용하면 반환하는 요소가 두개 이상일 수 있고, 그렇기에 이름에 's' 가 붙는 것이다.

  • getElementsByIdClassName() 메서드를 사용하게 되면, 클래스 이름이 같은 DOM 요소들이 HTMLCollection 객체로 저장된다. HTMLCollection 객체는 배열과 비슷하고 배열처럼 사용할 수 있다. 단, 배열은 아니다.

태그 이름으로 접근하는 getElementsByTagName() 메서드

  • class, id 선택자로 지정이 되지 않은 DOM 요소를 접근하려면 태그를 이용한다.

  • 기본형 : 요소명.getElementsByTagName("태그명")

  • 웹 문서 안에서 같은 태그를 사용하는 요소가 2개 이상 있을 수 있기에, 이 역시 HTMLCollection 형태로 저장된다.

다양한 방법으로 접근하는 querySelector(), querySelectorAll() 메서드

  • 앞서 나온 방법 메서드는 HTMLCollection 객체 이다.

  • DOM트리의 텍스트, 속성 노드까지 자유롭게 제어하려면 위의 두 메서드를 사용해야 한다.

  • 만약 반환 값이 하나라면 querySelector, 여러 값을 한꺼번에 반환될 경우 querySelectorAll()메서드를 사용한다.

  • 기본형 :

    • 노드.querySelector(선택자)

    • 노드.querySelectorAll(선택자 또는 태그)

  • 메서드에서 선택자를 표시할 때, id 이름 앞에는 샵(#) 기호를 붙이며, class 이름 앞에는 온점(.)을 붙인다.

  • querySelector() 메서드에서 class 이름으로 접근할 때 class 이름을 사용한 여러 요소 중에서 첫번째 요소만 반환한다.

querySelector("#heading") // id = "heading"인 요소
querySelectorAll(".heading") // class = "bright"인 요소

  • 위 메서드를 사용하면 반환값은 노드 이거나, 노드 리스트node list이다.

웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티

  • 자바스크립트에서는 웹 요소의 내용 수정도 할 수 있고, 가장 쉬운 방법이 두 프로퍼티를 사용하는 방법이다.

  • 다음 예시를 통해 현재 날짜와 시간을 그대로 innerText 프로퍼티로 표시할 때, 거기서 <em> 태그가 같이 표시 되도록 만드는 것을 볼 수 있다.

  • 기본형 : 요소명.innerText = 내용 / 요소명.innerHTML = 내용

(... 생략 ...)
<button onclick="inntext()">innerText로 표시하기</button>
<button onclick="innhtml()">innerHTML로 표시하기</button>
<h1>현재 시각 : </h1>
<div id="current"></div>

<script>
var now = new Date();

function innntext() {
	document.getElementByID("current").innerText = now;
}
function innhtml() {
	document.getElementByID("current").innterHTML = "<em>" + now + "</em>"
}

</script>
(... 생략 ...)

  • 이렇게 진행 시 이벤트에 맞춰 실행되도록 하면, CSS 가 수정되어 태그가 추가되는 형태로 바뀌게 된다.

속성을 가져오거나 수정하는 getAttribute(), setAttribute() 메서드

  • 웹 요소를 문서에 삽입 할 때 태그 속성을 함께 사용시, DOM 트리에 속성 노드를 추가되면서, 속성 값이 저장 된다. 이때 속성에 접근하는 메서드가 getAttribute() 이며, 이를 바꾸는 것이 setAttribute() 다.

  • 기본형 : getAttribute("속성명")

  • 기본형 : setAttribute("속성명", "값")

// 태그의 특정 소스에 접근하기
(... 생략 ...)
<div id="prod-pic">
	<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200" onclick="displaySrc()">
	(... 중략 ...)
</div>

<script>
function displaySrc() {
	var cup = document.querySelector("#cup"); // id="cup" 인 요소에 접근하기
	alert("이미지 소스: " + cup.getAttribute("src")); // cup 속성을 알림창에 표시
}
</script>
// 태그의 속성을 수정하기 
(... 생략 ...)
<script>
function changePic() {
	var newPic = this.src;
	cup.setAttribute("src", newPic);
}
</script>
(... 생략 ...)

17-3 DOM에서 이번트 처리하기

  • 태그와 스크립트 소스가 섞이면, 굉장히 복잡하고, 관리하기 어렵다. 복잡하고 보다 세밀한 프로그램의 경우 DOM 에서 이벤트 처리기를 연결하는 방식을 사용하여, HTML 태그와 스크립트 소스를 분리한 상태로 짤 수 있다.

DOM 요소에 함수 직접 연결하기

  • 다음 예시처럼 DOM 자체에서 이벤트 처리기를 직접 연결하는 것이 가능하다.

<img src="images/cup-1.png" id="cup">
...
var cup = document.querySelector("#cup") // id = cup 요소 
cup.onclick = function() {
	alert("이미지를 클릭했습니다.");
}

함수 이름을 사용해 연결하기

  • 함수 이름이 지정되어 있는 경우, 실행할 함수로 바로 지정이 가능하고, 이렇게 하면, 뒤에 () 를 붙일 필요가 없어진다.

<img src="images/cup-1.png" id="cup">
...
var cup = document.querySelector("#cup") // id = cup 요소 
cup.onclick = changePic; // 클릭시 함수를 실행할 것을 지정함. 

function changePic() {
	cup.src = "images/cup-2.png";
}

DOM event 객체 알아보기

  • DOM 이벤트 정보를 저장하는 event 객체가 DOM 내부엔 존재한다. 이 객체는 이벤트 발생 요소가 무엇인지를, 어떤 이벤트인지 등의 정보가 들어 있다.

(... 생략 ...)
<img src="images/cup-1.png" id="cup">
...
var cup = document.querySelector("#cup");
cup.onclick = function(event) {
	alert("이벤트유형: " + even.type + ", 이벤트 발생 위치: " + event.pageX + "," + event.pageY);
}

  • event 객체의 프로퍼티와 메서드

    • 프로퍼티

      • altKey : 특정 Key 눌렸을 때 그 여부를 boolean 값으로 반환한다. 이 퍼로퍼티의 경우 alt 에 대응하는 프로퍼티이다.

      • button : 마우스에서 누른 버튼의 키 값을 반환한다.

      • charCode : keypress 이벤트가 발생할 때 어떤 키를 눌렀는지 유니코드 값으로 반환한다.

      • clientX : 이벤트가 발생한 가로 위치를 반환

      • clientY : 이벤트가 발생한 세로 위치를 반환

      • ctrlKey

      • pageX : 현재 문서 기준, 이벤트가 발생한 가로 위치 반환한다.

      • pageY : 현재 문서 기준, 이벤트가 발생한 세로 위치 반환한다.

      • screenX : 현재 화면 기준, 이벤트가 발생한 가로 위치 반환한다.

      • screenY : 현재 화면 기준, 이벤트가 발생한 세로 위치 반환한다.

      • shiftKey

      • target : 이벤트가 최초로 발생한 대상을 반환한다.

      • timeStamp : 이벤트가 발생한 시간을 반환한다.

      • type : 발생한 이벤트 이름을 반환한다.

      • which : 키보드 관된 이벤트가 발생할 때 키의 유니코드 값을 반환한다.

    • 메서드

      • preventDefault() : 이벤트를 취소할 수 있는 경우에 취소한다.

  • 전체 이벤트 객체는 링크를 참고할 것

  • 만약 이벤트가 발생한 대상에 접근하려면 이벤트 처리기의 예약어 this를 사용해야 한다.

(... 생략 ...)
	<img src="images/card.png" id="card">
	(... 중략 ...)
<script>
	var card=document.querySelector("#card");
	card.onclick = fucntion(event) {
		alert("클릭한 이미지 파일 : " + this.src);
	}
</script>

addEventListener() 메서드 사용하기

  • 이 메서드를 사용하면 event 객체를 사용하면 한 요소에 여러 이벤트 처리기를 연결해 실행할 수 있다.

  • 기본형 : 요소.addEventListener(이벤트, 함수, 캡처 여부);

    • 이벤트 : 이벤트 유형을 지정한다. click, keypress 처럼 on을 붙이지 않고 쓴다.

    • 함수 : 이벤트 실행 시 수행할 명령이나 함수를 지정한다. 함수 정의시 event 객체를 인수로 받는다.

    • 캡처 여부 : 이벤트를 캡처 하는지 여부를 지정하며, 기본값 false, true 는 캡처링, false 는 버블링 한다는 의미이다. 이벤트 캡처링은 DOM의 부모 노드에서 자식 노드로 전달되는 것이고, 이벤트 버블링은 DOM 의 자식 노드에서 부모 노드로 전달되는 것을 말한다.

  • 다음 예제는 마우스 포인터를 위로 올리면 이미지가 바뀌었다가, 내려 놓으면 다시 원래 이미지로 돌아오는 예제.

(... 생략 ...)
	<img src="images/easys-1.jpg" id="cover">
	...
<script>
	var cover = document.getElementById("cover");
	cover.addEventListener("mouseover", changePic);
	cover.addEventListener("mouseout", originPic);

	function changePic() {
		cover.src = "images/easys-2.jpg";
	}

	function originPic() {
		cover.src = "images/easys-1.jpg";
	}
</script>

CSS 속성에 접근하기

  • 자바스크립트를 이용하면 스타일 속성값을 가져와서, 그 값을 원하는 대로 수정할 수 있다.

  • 한 단어의 CSS 속성의 경우 그대로 작성하면 되지만, 하이픈(-)으로 연결된 여러 단어의 속성들은 하이픈을 제거하고 단어별로 첫 글자는 대문자로 표시하는 방식으로 하면 된다.

// 도형의 테두리와 배경색 바꾸기 
(... 생략 ...)
	<div id="rect"></div>
	...
<script>
	var myRect = document.querySelector("#rect");
	myRect.addEventListenr("mouseover", function(){
		myRect.style.backgroundColor = "green";
		myRect.style.borderRadius = "50%";
	});
	myRect.addEventListener("mouseout", function(){
		myRect.style.backgroundColor = "";
		myRect.style.borderRadius = "";
	});
</script>

17-4 DOM에서 노드 추가 • 삭제 하기

노드 리스트란

  • DOM 에서 새로운 노드를 만들어 추가하거나 삭제하는 경우 노드 리스트node list를 사용해야 한다.

  • 이러한 접근에는 querySelectorAll() 메서드를 사용하면, 배열처럼 접근이 가능하다.

  • 노드 리스트를 만들고, 이를 콘솔 창에서 document.querySelectorAll() 를 입력 후 엔터를 누르면, 지정한 요소의 리스트를 표시하게 된다.

  • 여기서 알 수 있는 점은 몇개의 노드가 저장된지 표시를 하기 때문에 배열은 아니지만, 배열처럼 인덱스를 활용해 특정 노드에 접근하는 것도 가능하다.

document.querySelectAll("li")[1] -> 해당 노드 리스트의 두번째 요소를 가져온다.

새로운 노드 추가 과정

  • HTML DOM 트리를 구성하는 기본 원칙

    1. 모든 HTML 태그는 요소 노드다.

    2. HTML 텍스트 내용은 자식 노드인 텍스트 노드이다.

    3. HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드 이다.

    4. 주석은 주석 노드이다.

  • 이러한 원칙을 기준으로 보면, 요소 노드를 추가한다면 단순히 태그에 해당하는 요소 노드 뿐 아니라, 텍스트 노드와 속성 노드를 추가 해야 한다.

    • <img> 태그를 요소로 추가한다면 -> 요소 노드와 속성에 해당하는 src, alt 노드가 추가 된다.

  • 결론적으로 새로운 노드를 추가 시, 웹 문서에 어떤 소스를 추가할 지 먼저 생각하고, 그에 따르는 요소 노드, 텍스트, 속성 노드 등을 동시에 만들어야 한다.

텍스트 노드를 사용하는 새로운 요소 추가하기

  • 더보기 링크를 클릭하면 아래에 간단한 텍스트를 표시하는 스크립트 소스로 새로운 요소를 추가해보는 예시

  1. 요소 만들기 - createElement() 메서드 :

    • 기본형 : document.createElement(노드명)

    • 새로운 p 요소를 만드는 예시는 다음과 같이 작성한다 : var newP = document.createElement("p")

    • 이 메서드는 새로운 노드를 만들어 낼 뿐이며, 웹 문서에 추가된 것은 아니다. 이를 추가한 것이 다음과 같은 이미지로 표현할만 하다.

  1. 텍스트 노드 만들기 - createTextNode() 메서드

    • 우선 새로운 요소 노드를 만들었다면, 내용을 담는 텍스트 노드를 자식 노드로 만들어 연결하는게 필요하다.

    • 텍스트 노드 생성 : document.createTextNode(텍스트);

    • p 요소의 텍스트 노드 만들기 var textNode = document.create.TextNode("DOM은 document object model의 줄임말 입니다.");

  1. 자식노드 연결하기 - appendChild() 메서드

    • 이 메서드를 통해 텍스트 노드나 속성 노드를 만든 후 요소 노드에 연결할 때 사용하면 된다.

    • 기본형 : 부모노드.appendChild(자식노드)

    • p 요소 노드에 텍스트 노드를 자식 노드로 연결하기

newP.appendChild(txtNode);
document.getElementByID("info").appendChild(newP); // info 생성자를 가진 연결요소의 자식으로 newP를 연결시킨다.

  1. 전체 소스 코드 완성하기

    • 지금까지 요소의 연결을 했으니, 이 부분의 전체 코드를 추가하면 된다.

    • addP 함수와 this.onclick='' 이라고 코드가 추가되어 있는데, 이는 addP() 함수가 한번만 실행되어서 <p> 요소가 한 번만 추가되게 만들기 위함이다.

(... 생략 ...)
<div id="container">
	<h1>DOM을 공부합시다</h1>
	<a href="#" onclic="addP(); this.onclick='';">더보기</a>
	<div id="info"></div>
</div>

<script>
	function addP() {
		var newP = document.createElement("P");
		var txtNode = document.createTextNode("DOM은 document object model의 줄임말이다.")
		newP.appendChild(txtNode);
		document.getElementById("info").appendChild(newP);
	}
</script>
(... 생략 ...)

속성값이 있는 새로운 요소 추가하기

  • 새로운 요소를 노드로 추가시, 위의 것과 유사하게 진행되는데, 속성 노드도 만들어 자식 노드로 연결하면 된다.

  • 앞의 예제 + 이미지 표시 되는 스크립트 소스를 추가 작성해본다.

  1. 요소 노드 만들기 - createElement() 메서드

    • var newImg = document.createElement("img");

  2. 속성 노드 만들기 - createAttribute() 메서드

    • img 요소는 src 속성을 가지고, 이미지 파일 경로를 지정해야 브라우저에서 이미지를 보여줄 수 있다.

    • var srcNode = document.createAttribute("src");

    • var altNode = document.createAttribute("alt");

    • srcNode.value = "images/dom.jpg";

    • altNode.value = "돔 트리 예제 이미지";

  3. 속성 노드 연결하기 - setAttributeNode() 메서드

    • newImg.seAttributeNode(srcNode);

    • newImg.seAttributeNode(altNode);

  4. 자식 노드 연결하기 - appendChild() 메서드

    • document.getElementById("info").appendChild(newImg);

  5. 전체 코드 완성하기

<div id="container">
	<h1>DOM을 공부합시다</h1>
	<a href="#" onclic="addContents(); this.onclick='';">더보기</a>
	<div id="info"></div>
</div>

<script>
	function addContents() {
		var newP = document.createElement("p");
		var txtNode = document.createTextNode("DOM은 document object model의 줄임말이다.")
		newP.appendChild(txtNode);

		var newImg = document.createElement("img");
		var srcNode = document.createAttribute("src");
		var altNode = document.createAttribute("alt");
		srcNode.value = "images/dom.jpg";
		altNode.value = "동 트리 예제 이미지"
		newImg.setAttributeNode(srcNode);
		newImg.setAttributeNode(altNode);

		document.getElementById("info").appendChild(newP);
		document.getElementById("info").appendChild(newImg);
	}
</script>
(... 생략 ...)

#텍스트필드입력값화면표시하기

노드 삭제하기

  • 노드를 삭제 할 때 기억할 사항은 반드시 부모 노드에서 자식 노드를 삭제 해야 한다는 점이다. 따라서 부모 노드가 어떤 노드인지 찾아가는 것이 필요하다.

  • 기본형 : 노드.parentNode

    • 자식 노드를 알고 싶다면? childNodes 프로퍼티를 사용한다.

  • 콘솔에서 부모 노드를 찾을 때는 다음처럼 입력하면 부모 노드를 확인할 수 있다. : document.querySelectorAll("li")[1].parentNode

  • removeChild() 메서드 : 알아낸 부모 노드에서 자식 노드를 삭제 하는 역할을 한다.

    • 기본형 : 부모노드.removeChild(자식노드)

Previousfront_chapter 3Nextback_Java_01

Last updated