뉴렉처 자바스크립트

유튜브 뉴렉처 채널의 자바스크립트 강의 정리글

자바스크립트는 국비 과정에서 프젝을 하면서

그때그때 구현에 필요한 것들만 찾아서 써본 게 전부였기 때문에

체계적으로 공부해보고 싶어
서블릿, 스프링 강의로 많은 도움을 얻은 뉴렉처 채널의 자바스크립트를 찾아 듣게 됐다.

로드화

HTML 파일이 프로그램으로 접근할 수 있도록 객체화되는 작업

window 브라우저 창 제어

window.location 주소창 제어 (플랫폼)

window.history 페이지의 목록 순회 (뒤로가기, 앞으로가기)

window.document 문서 내용 제어

폼 객체의 유효성 검사

사용자가 입력한 값 확인

유효한 값이 입력되었을 때만 서버로 전송될 수 있도록 한 것

초창기 자바스크립트는 폼객체를 이용해 문서에 있는 데이터를 검사하기 위한 툴이었음

그러나 자바스크립트가 다룰 수 있는 플랫폼이 확장되면서 (브라우저+) 개발자에게도 인기를 얻음

int x = 3;

한정사가 데이터 타입에 따라 달라질 때, 한정사는 값을 담는 그릇 역할을 함.즉 데이터 타입에 맞는 데이터 공간을 가짐

Auto Boxing

자바, C#, C++에서는 박싱, 래핑

이때 변수는 포인터인데, 자체적인 공간을 가지므로 자바스크립트의 참조와는 다른 개념

포인터는 주소를 저장하고 있는 변수

Reference 변수는 객체에 대한 이름

물리적, 내부적으로는 주소를 담는 그릇을 가지고 있지만 개념적으로는 변수가 아님(공간을 가지지 않음)

var x = 3;

그러나 자바스크립트에서 대입이라는 개념이 존재하지 않고 변수는 참조변수임

데이터 공간은 값이 사용되는 순간(할당되어야 할 때) 변수에 담아지는 것이 아니라 스스로가 공간을 가지게 된다모든 데이터가 박싱되고 x는 박스라는 value형 객체를 참조함

var x = new Number(3)과 var x= 3은 완전히 똑같음

자바스크립트는 기본형을 가지지 않는다 (Wrapper 클래스를 기본형이라고 부르기도 하는데, 엄밀히 말하면 다름)Wrapper 클래스만 가진다.

Wrapper 클래스

Boolean Number 정수, 실수String 문자, 문자열

typeof 연산자

wrapper 클래스 확인할 수 있음

alert(typeof x);

alert(x==undefined);

undefined = Null Pointer

Array

var nums = new array();

push/pop 메소드를 이용한 데이터 관리 : Stack

push : 차례로 데이터 쌓음

num.push(1);

pop : 적재된 상태에서 맨 위의 데이터 꺼냄

num.pop();

인덱스를 이용한 데이터 관리 : List

처음부터 차례대로 넣지 않고 nums[3] = 5;

0, 1, 2 인덱스는 값을 참조 하지 않고 비어있는 형태로 만들어짐

nums.length -- 4개의 공간

배열객체 초기화

var nums = new Array();

객체만 만듦

var nums = new Array(5);

5개의 빈공간 만들어짐 = 참조변수 5개 생성

var nums = new Array(5, 10, 21);

3개의 방에 5, 10, 21을 각각 넣음

var nums = new Array(5, 10, 21, "hello");

데이터 형식이 달라도 하나의 배열에 넣을 수 있음

alert(typeof nums[3]);

이런식으로 체크 가능

var nums = new Array(5,10,21,"hello", new Array(2,3,4));

alert(nums[4][1]); -- 3이란 값을 꺼내는 법

배열 값 대체 및 삭제 (splice)

var nums = new Array(5, 10, 21, "hello");

nums.splice(1); -- 10부터 다 지워짐 [삭제]

nums.splice(1,1); -- 10부터 하나만(10) 지워짐 [삭제]

nums.splice(1,2); -- 5, "hello"만 남음 [삭제]

nums.splice(2,1,"hoho"); 두번째에서 하나를 지우고 세번째 인자를 꽂음 [대체]

nums.splice(2,0,"hoho"); 두번째 위치에 세번째 인자가 추가됨 [삽입]

객체 지향 언어 C++ C# Java

클래스로 객체에 대한 형식을 정의한 후 인스턴트화 (정의 후 객체화)

Javasript

객체를 만들고 정의함

prototype -- 다음 과정에서 설명할 것 [자바스크립트 객체지향]

class -- ES6 이상 설명할 때

Expand Object

var exam = new Object();

1) exam.kor = 30;

2) exam["kor"]=30; 꺼낼때도 exam["kor"]

exam이 가진 속성을 변수를 이용해서 꺼내야할 때는 2번 사용해야 함

그렇지 않으면 1번이 기본

자바스크립트는 유연한 언어이다.

이는 언어적으로는 위험부담이 크다는 걸 의미한다. 표준을 잡기 어렵고 오류가 나기 쉽다. 컴파일 과정에서 오류가 걸러지지 않는다.

문법적으로 오류가 나지 않는데 실행 중 오류가 남(버그)

자바스크립트는 개념을 잡기 위해 배우더라도, 가능한 타입스크립트(혹은 코틀린)를 쓰는 것이 좋음

타입스크립트 : 일반적인 컴파일 언어의 장점 + 자바스크립트의 장점

안전성이 중요한 기업형에서는 타입스크립트, 그러나 개인홈페이지 단계에서는 자바스크립트도 괜찮음

리액트(자유도가 높음), 앵귤러(가장 기업형에 적합), vue js(모바일보다는 웹기반, 기존 플랫폼(백단) 그대로 쓰면서 프론트만 얹겠다)

키를 이용한 데이터 관리 : Map

데이터를 구분하는 컬럼명 존재

key(hash)값을 이용해서 값 저장한다 Object(Map)형 사용

자바에서는 Hash형(hash : 식별자)

선형으로 데이터 관리 : List

순서를 기반으로 데이터를 뽑는다 Array형 사용

JavaScript Object Notatin(JSON)

자바스크립트가 다루는 Object를 쉽게 표현할 수 있도록 하는 표기법(notation)

JavaScript Object	JavaScript Object Notation(JSON)
var n = new Boolean(true); var n = new Number(3); var s = new String("hello"); var ar = new Array(); var ob = new Object();	var n = true; var n = 3; var s = "hello"; var ar = []; var ob = {};

값을 저장할 공간이 없는 참조변수 n은 true를 직접 참조할 수 없으므로 new를 통해 boolean형 객체로 true를 박싱한다

박싱을 통해 이제 참조 가능

사실상 JSON을 통해 왼쪽의 과정을 단축해 true 값을 n이라는 변수에 담는다, 대입한다고 함

하지만 파이썬 등 자바스크립트를 포함한 스크립트언어들은 표기법이 편할 뿐이지 내부적으로 왼쪽 과정을 통함

자바스크립트에서는 문자와 문자열을 구분하지 않는다.

single quotation, double quotation 모두 가능

자바스크립트에서는 " (더블)이 기본

하지만 html 문서 안에서 함께 사용되면서 충돌을 막기 위해 안쪽에 들어가는 코드에는 '(싱글)을 사용하는 경우가 많음

그래서 요즘엔 아예 처음부터 '를 쓰는 경우가 많음

Object선언 및 이용

배열 안에 배열을 넣을 수 있음
배열은 인덱스로, object는 key로 값을 가져온다
object의 경우 가져올 때 object.key 혹은 object["key"] 모두 가능

XML, CSV, JSON

CSV - 데이터를 중첩시키거나 복잡한 데이터를 쓰고 싶을 때 한계

1, hello json
2, hi json
3, json is

XML - 무겁고 코딩량이 많음

<notices>
<notice id="1" title="heollo json"/>
<notice id="2" title='hi json"/>
<notice id="2" title="title":"json is.." />
</notices>

JSON - 가벼우면서 복잡한 데이터 표현

[
{"id":1, "title":"hello json"},
{"id":2, "title":"hi json"},
{"id":3, "title":"json is ..."}
];

문자열로 넘겨받은 JSON 형식의 데이터를 변환하는 방법

스크립트로 원격에 있는 json 데이터를 불러오면

'[
{"id":1, "title":"hello json"},
{"id":2, "title":"hi json"},
{"id":3, "title":"json is ..."}
]';

와 같은 문자열 형태로 넘어오기 때문에 객체로써 사용하기 위해 변환 필요

cf. 자바스크립트에서 문자열 내려쓰기가 제공되지 않기 때문에 이를 위해서 [ \] 사용

es6에서는 어금부호 이용해 더욱 간단하지만, 나중에 설명

eval 함수

자바스크립트 코드 실행

제이슨 파싱에도 사용할 수 있음

JSON parser

자바스크립트에서 제이슨 object의 key는 문자열로 표기해도 되고 안해도 됨 [묵시적으로 문자열로 인식하기 때문에]

따라서 일반적으로 표기하지 않는다.

그런데 컬럼명이 유효하지 않은 변수 규칙을 가지고 있을 때는 꼭 문자열 표기를 해줘야한다(따옴표)

꺼내쓸 때는 괄호 안에 key값을 넣어 꺼내쓸 수 있음

JSON parser은 문법 규칙을 엄격하게 확인함

따라서, parser를 사용할 때 json 규칙에 알맞게 key값을 문자열 형태로 표시해야함

var data = JSON.parse('{"id":1, "title":"aaa"}'); //바로 변환할때
var data2 = {id:2, title:"bbb"};
var json= JSON.stringify(data2); -- {"id":2, "title":"bbb"} 로 알아서 변환됨

= = =, != =연산자

같은 공간을 참조하는지에 대한 비교연산

자바스크립트 실행 환경에서 같은 속성에 같은 값을 가진 객체는 두 번 이상 만들지 않고 이전에 만들어진 객체를 동일하게 참조

같은 값의 같은 속성을 가진 객체를 개별 공간을 가지도록 하려면 new

var ob = new Object({ o: "1" }); // 표현식으로 간단하게 표현하면 var ob = { o:"1"}

var ob2 = {o:"1"};

document.write(ob === ob2); //false

덧셈 : 묵시적으로 형변환 후 문자열연산

3+"4" = 34

3.5+"4" = 3.54

뺄셈 : 문자열이 정수 혹은 실수로 형변환되어 산술연산

3.5-"2"=1.5

다른 데이터타입의 값들 비교

비교하려는 값의 자료형이 다를 때, 이를 숫자형으로 바꿈

document.write("32">"4"); //false : 사전순(오름차순)으로 비교

document.write(32>"4"); //true : 32>4

조건문 if, while, do-while

반복문 while, for, for-in

선택문 else, else if, switch

for-in

배열에서는 인덱스, 객체에서는 key를 꺼내어 배열과 객체를 통일감있게 조회

var ar = ["hello", "hi", "greeting"];

var ob = {id:1, title:"hello", writeId:"newlec"};

for(var i in ar)

document.write("<br />"+ar[i]);

for(var i in ob)

document.write("<br />" + ob[i]);

자바스크립트 Reference 참고

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

JavaScript reference - JavaScript | MDN

This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more about this reference.

developer.mozilla.org

함수

자바	자바스크립트 (인자, 식)	자바스크립트 표현식
int add(int x, int y){ return x+y; }	var add = new Function("x, y", "return x+y;"); 자바스크립트에서 함수는 객체이기 때문에 대입할 수 있고 인자로 전달할 수 있음	var add = function(x, y){ return x+y; }; 혹은 function add(x, y) { return x+y; } 내부적으로 function 객체 만들어줌

var add = new Function("x, y", "return x+y;");

document.write(add(3,4));

//가장 많이 쓰는 방법

var add2 = function(x,y){ return x+y; };

document.write(add2(3,4));

function add3(x,y){ return x+y;}

document.write(add3(3,4));

ES6에서는 매개인자에 대한 변화있음. 나중에 다룸

변수의 가시영역

var : 정적인 방식으로 생성되는 변수 (지역변수)

alert(a);

var a = 1;

-- undefined : 참조변수는 선언됐는데 값이 할당되지 않았다는 뜻

순서와 상관없이 해당 지역이 실행되기 위해 해당 지역에 선언된 변수들이 메모리 영역에 올라갔음

global : 동적인 방식으로 생성되는 변수 (전역변수)

어디서든 사용할 수 있음

a= 1; //선언하지 않고 썼을 때 전역객체 window의 속성으로 추가됨 window.a =1;

alert(a);

자바스크립트는 변수 선언하지 않아도 된다 (X) -- 변수선언이 아니라 전역객체의 속성으로 존재하는 것 (O)

alert(a); //실행시점에 a라는 변수가 선언된 적도 없고, a라는 전역객체의 속성이 존재하지도 않음 -- 에러

a=1;

지역변수의 우선순위가 전역변수의 우선순위보다 높다.

따라서 전역변수가 먼저 선언된 후 같은 이름으로 지역변수가 선언될 때, 해당 이름은 지역변수를 가리킨다.

같은 이름의 변수가 여러번 선언되어도 에러가 발생하지 않는다.

var a = 1;

var a = 2;

중괄호가 변수 영역을 나누지 않는다.

일반적으로 중괄호는 생명주기를 나타내는데, 자바스크립트에서는 변수를 지역화하지 않는다.

쓰나 안쓰나 똑같음

1	undefined
{ var a = 1; } alert(a);	alert(a); { var a = 1; }

유일한 지역개념은 function에만 존재한다.

스크립트에서는 함수영역만 변수의 영역을 나눈다.

지역	전역
function f1(){ var a = 1; } f1(); alert(a); //에러	function f1(){ a = 1; } f1(); alert(a); //1	function f1(){ a = 1; } alert(a); //에러 : 아직 a가 전역변수로 선언되지 않았기 때문에 f1();

클로저

함수를 객체로 만들기 때문에 객체 자체가 반환되거나, 함수 안에서 또 다른 함수가 선언될 수 있음

이때 함수가 가지고 있는 지역변수의 특성으로 인해 생기는 문제

function f1() {

var a = 1;

return function f2(){

return a;

}

var a = f1();

var a = f();

alert(a);

함수 안에 또다른 함수가 정의되어 있을 때

f2가 지역변수를 가지고 있지 않은 상황에서 위에 있는 f1의 변수(a)를 사용

f1은 호출되었을 때 a를 리턴하고 모든 자원을 없애야 함

그런데 여전히 f2가 a를 사용하고 있기 때문에(메소드가 정의되어 있기 때문에)

f1은 이미 호출이 끝났음에도 불구하고 자원을 닫지 못함

f가 다른 값으로 null을 받거나(참조가 사라지거나) 다른 함수로 대체되지 않는 이상 f1의 생명은 끝까지 살아남음

사용하고 있는 참조를 닫을 수 있게 해주는 key를 가지고 있다고 해서 클로저 라고 부름

클로저로 인해 자원이 묶임

알고 묶는 것과 모르고 묶는 것이 다름

클로저가 발생하지 않도록 프로그램을 만들거나, 일부러 알고 만들어야 함 (ES6 - 멤버 메소드에서 일부러 만듦)

브라우저 객체

window : 생략 가능

alert

prompt(a,b) -- a:대화상자에 들어갈 메세지 b:기본값 | 단, 입력받은 값은 문자열로 들어감

//3일차

var x = prompt("x의 값을 입력하세요",0);

var y = prompt("y의 값을 입력하세요",0);

x= parseInt(x);

y= parseInt(y);

alert(x+y);

*parseInt()의 인자로 숫자가 아닌 데이터가 들어간다면 1) Nan을 리턴함

2) 숫자+a일때 a는 자동탈락 후 알아서 숫자로 변환됨 -- 즉 substring 할 필요 없음

ex. parseInt("12abc") -- 12

confirm

사용자로부터 확인받고 싶을 때 returns true or false

parseInt에 대한 사용 방법은 Reference-Javascript에서 찾아야 함

단, alert 같은 메소드는 api에서 찾음

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

parseInt() - JavaScript | MDN

The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).

developer.mozilla.org

window.location

window.history

window.document - [ body, img, form-input ]

이벤트 기반의 프로그래밍

페이지가 열리자마자 이벤트를 실행시키고 싶다면 js코드로 따로 분리

사용자의 행위에 따라 이벤트를 실행시키고 싶다면 html 바디 안의 태그(input, span, button 등) 들 속성으로 이벤트 설정 가능

<input onXXX=" "/>

onclick : 사용자가 클릭

onmouseover : 사용자가 마우스를 가져다댈때

스크립트 블럭을 같이 이용

function printResult()

{

var x = prompt("x의 값을 입력하세요",0);

var y = prompt("y의 값을 입력하세요",0);

x = parseInt(x);

y = parseInt(y);

alert(x+y);

}

</script>

엘리먼트 객체 이용하기

우리가 html파일에 태그들을 입력하면 자바스크립트에서 이용할 수 있도록

HTML요소들을 객체화 하는 로드 과정이 포함됨

이때 메모리상에서 객체화된 것 엘리먼트객체, text노드객체, 주석노드객체

페이지가 로드될 때 엘리먼트 객체가 생성되기 때문에, 해당 객체들의 속성을 객체명.속성명으로 제어가능

function printResult()

{

var x = prompt("x의 값을 입력하세요",0);

var y = prompt("y의 값을 입력하세요",0);

x = parseInt(x);

y = parseInt(y);

btnPrint.value = x+y; //아직 btnPrint 객체가 존재하지 않지만, 단순 메소드 정의이기 때문에(실행 전) 오류 발생X

span1.innerText = x+y; //span에는 value라는 속성이 없다. 대신 innerText

btnPrint.type="text"; //type또한 제어가능

}

</script>

<span id="span1" onclick="alert('hello');"> 스팬입니다</span>

input태그에서 onXXX이벤트를 직접 속성으로 넣지 않고 이벤트를 추가하는 방법 : id 활용

스크립트 내에서 함수를 대입할 때는 함수가 참조하고 있는 함수 객체를 대입해야 하기 때문에 소괄호를 쓰지 않는다.
소괄호까지 쓴다면 함수 호출한 결과를 대입하는 것이다.

단 이때 해당 html태그가 스크립트 태그 뒤에 선언된다면 에러 발생의 여지가 있다.

function printResult()

{

var x = prompt("x의 값을 입력하세요",0);

var y = prompt("y의 값을 입력하세요",0);

x = parseInt(x);

y = parseInt(y);

btnPrint.value = x+y; //메소드 수행부 안에서 사용할때는 괜찮음(정의만 되고, 실행 전이라)

}

btnPrint.onclick=printResult; //함수 대입 - 단 btnPrint가 먼저 객체화되지 않아 에러 발생

</script>

<input type="button" value="클릭" id="btnPrint" /><br/> 읽힐때 : btnPrint 객체가 생성되는 시점

실행 순서에 따른 문제점 해결방안

1) html태그를 먼저 선언, 스크립트 태그를 뒤에 선언

2) window의 onload 이벤트 활용

body에도 load 이벤트 추가가 가능하지만,
body가 로드되었다 하더라도 문서 외의 자원들(css, 이미지)가 로드되지 않을 가능성 있다
따라서 window가 가진 자원이 모두 load되었을 때 이벤트를 추가한다.
window는 가장 먼저 생성되는 객체로 다른 스크립트 태그 이전에 이미 존재한다.
따라서 window.onload는 에러를 발생시키지 않는다.

<input type="button" value="클릭" id="btnPrint" /><br/> 1) 먼저 메모리에 올리기 위해 선언

function printResult()

{

var x = prompt("x의 값을 입력하세요",0);

var y = prompt("y의 값을 입력하세요",0);

x = parseInt(x);

y = parseInt(y);

btnPrint.value = x+y; //메소드 수행부 안에서 사용할때는 괜찮음(정의만 되고, 실행 전이라)

}

function init(){

btnPrint.onclick = printResult;

}

window.onload = init; 2)onload 이벤트 추가

스크립트 작성 방식

html, css에서는 id를 명명할 때 대문자를 쓰지 않는다.
btnPrint대신 실제로 명명규칙에 따를 때 btn-print로 표기해야한다.
그런데 스크립트에서 btn-print.onclick과 같이 아이디.속성명으로 제어하려하면 해당 명명규칙은 에러를 발생시킨다.
이로 인해 사람들이 편의성을 위해 btnPrint같은 방식으로 id를 주었는데, 이는 옳은 방법이 아니다.

정석은 btn-print와 같이 명명규칙에 따라 id값을 주고,
document.getElementById함수를 통해 자바스크립트에 맞는 이름으로 btnPrint변수를 주는 것이다.

function printResult(){
var btnPrint = document.getElementById("btn-print");
}

function init(){
var btnPrint = document.getElementById("btn-print");
btnPrint.onclick = printResult;
}
window.onload = init;

여기서 또다시, 중복을 피하기 위해 btnPrint를 전역변수로 주고 btn-print는 한번만 얻으려고 할 수 있는데

이 또한 바람직한 방법이 아니다.

~~var btnPrint = null;~~

function printResult(){
}

function init(){
btnPrint = document.getElementById("btn-print");
btnPrint.onclick = printResult;
}
window.onload = init;

스크립트 코드의 지역화
엘리먼트 객체를 선택하는 코드는 지역화되어야 한다.
스크립트 내에서 전역변수는 조심스럽게 사용되어야 한다.
남이 만든 코드를 같이 쓰는 과정에서 전역변수의 충돌이 일어날 수 있기 때문이다.

이벤트 함수는 서비스 함수가 아니기에, 사실 이름을 명명할 필요가 없다.
이벤트를 위임할 때 한 번만 쓰이기 때문이다.

따라서 이름을 명명하지 않고 직접 이벤트 함수(익명함수)를 대입한다.

window.onload = function (){
var btnPrint = document.getElementById("btn-print");

var add = function(x, y) { //다른 함수도 정의 가능 (일종의 캡슐화)
return x+y;
};

btnPrint.onclick = function(){ //바로 이벤트 함수 대입
//수행부
};
}

단일 태그로 사용할 수 없고, 불편해도 범위태그로 표현

코드 분리와 이벤트 바인딩

<script src="code1.js"></script> <script src="code2.js"></script> <script src="code3.js"></script>	function init(){ ... } window.onload = init; - 1 (실행X)
	function init(){ ... } window.onload = init; - 2 (실행X)
	function init(){ ... } window.onload = init; - 3 마지막 대입으로 덮어씌워짐

이벤트는 대입도 가능하지만, 누적도 가능하다

window.onload = function() { alert("test1"); } -- 무효

window.onload = function() { alert("test2"); } -- 유효

window.addEventListener("load", function(){ alert("test1"); }); -- 유효

window.addEventListener("load", function(){ alert("test2"); }); -- 유효

리스너 : 자바, 자바스크립트에서 이벤트 핸들러(처리 함수)의 이름

하위 엘리먼트 선택하기

getElementsByTagName | getElementByClassName

<section id="sec1">
<h1></h1>
<ul>
<li>번호1</li>
<li>번호2</li>
<li>번호3</li>
</ul>
</section>

var sec1 = document.getElementById("sec1");

var lis = sec1.getElementsByTagName("li");

lis[0].textContent = "Hello";

//textContent : 웹표준에서 제공하고 있는 태그가 감싸고 있는 안의 Text

InnerText는 원래 익스플로러에서만 제공됐는데,

다른 브라우저에서도 사용 가능해지면서 표준 아닌 표준처럼 됨

즉 같은 기능

var inputs = section2.getElementsByTagName("input");

    var txtX = inputs[0];
    var txtY = inputs[1];
    var btnAdd = inputs[2];
    var txtSum = inputs[3];

id는 문서당 하나만 존재해야 하기 때문에 전역이라 할 수 있다.

동일한 내용의 input 그룹들이 있어도 전역으로 둘 수 없으니, id로 선택하는 것은 지양된다.

또한 마찬가지로 태그이름으로 선택하는 것도 좋지 않다.

js 코드가 html 구조의 영향을 받기 때문이다. (input의 순서가 변경됨에 따라 선택 순서도 바꿔야하기 때문에)

이때 사용되는 것이 Class이다. 클래스명은 그룹명이라 유일한 식별자도 아니고, 의미있는 이름을 부여할 수 있어 좋다.

getElementsByClassName

window.addEventListener("load", function () {
    var section2 = this.document.getElementById("section2");

    var txtX = section2.getElementsByClassName("txt-x")[0];
    var txtY = section2.getElementsByClassName("txt-y")[0];
    var btnAdd = section2.getElementsByClassName("btn-add")[0];
    var txtSum = section2.getElementsByClassName("txt-sum")[0];
    btnAdd.onclick = function () {
        var x = parseInt(txtX.value);
        var y = parseInt(txtY.value);
        txtSum.value = x + y; //자동으로 문자열변환
    };
});

Selectors API [노드 선택 - 개선된 방법, CSS 셀렉터 구문을 쓸 수 있음]

querySelector | querySelectorAll

"태그명"

".클래스명"

"#아이디명"

"태그명='네임명'" //CSS 셀렉터를 쓸 수 있음

//Ex3 : Selectors API Level1

window.addEventListener("load", function () {

var section3 = this.document.getElementById("section3");

var txtX = section3.querySelector("input[name='x']");

var txtY = section3.querySelector("input[name='y']");

var btnAdd = section3.querySelector(".btn-add");

var txtSum = section3.querySelector(".txt-sum");

btnAdd.onclick = function () {

var x = parseInt(txtX.value);

var y = parseInt(txtY.value);

txtSum.value = x + y; //자동으로 문자열변환

};

});

<h1> Ex3 : Selectors API Level1 </h1>

<div>

</div>

</section>

Node와 Element Node [childNodes, children]

계보를 통해 자식을 찾아나가는 경우 childNodes와 children 유용함

태그를 기준으로 찾는 경우가 많아 children을 더 많이 쓰게 된다.

주석, 텍스트도 노드가 된다

childNoses를 통해 선택할 때 공백 또한 그 다음 노드로 인식되기 때문에,

태그들 간의 공백이 하나도 없어야만 바로 다음 노드로 인식 가능

children을 통해 선택한다면 주석, 텍스트는 무시되고 태그 형태만이 노드로 인식된다.

문서를 구성하는 Node의 종류(Type)들

Node는 가장 상위에 있는 공통분모로

각각의 OO 노드가 존재하는데, Element, Text, Document, Attr 노드를 가장 많이 쓰게 될 것

Document 자체를 조작하는 일은 잘 없지만 Document노드가 Element나 Text를 감싸고 있음

DOM - Document Object Model

로드해서 Document Type으로 객체화된 것을 DOM이라고 한다 (DOM은 객체구조의 한 형태)

예전에는 브라우저마다 docType을 제각각 정의하고 객체화했는데, 지금은 표준모델을 따르기 때문에 DOM이라고 부른다.

각종 태그와 문자들이 문서에서 읽혀지면 객체화되는데, 객체화 되기 위한 타입들은 다음과 같이 구성된다.

Document Type

<!DOCTYPE ~~> 을 객체화할 때 객체의 형식

Element 객체

태그로 되어있는 것들

Attribute
- 태그 안의 속성들
Entity
- 꺾음새는 태그를 표현하기 위한 예약어로, 꺾음새를 쓸 수 없어 대신 lt, gt, nbsp같은 키워드를 사용해야 함.
  이러한 키워드를 일컬어 Entity라고 한다.
EntityReference
- 꺾음새 키워드를 사용하기 위한 접두사, 전치사로 &, ; 포함
Text

Comment

주석

CDTASection

꺾음새를 자유롭게 사용하기 위해 <![CDATA[ <, >, ] ]>으로 감싸 사용한다..

Notation

속성의 값으로 설정하는 것 중 표현형식을 사용할 수 있게 해주는 표기법

Node 인터페이스

w3.org/TR
Technical Report: 기술 문서

DOM: 문서 조작을 위한 API

In its original sense,
"The DOM" is an API for accessing and manipulating documents
(in particular, HTML and XML documents).

In this specification,
the term "document" is used for any markup-based resource,
ranging from short static documents
to long essays or reports with rich multimedia,
as well as to fully-fledged interactive applications.

These documents are presented as a node tree.
Some of the nodes in the tree can have children,
while others are always leaves.

최상위 추상인터페이스 Node는 다음과 같은 내용을 가지고 있으므로, 해당 내용이 Node를 물려받는 하위 node들에게 적용됨

Note: Node is an abstract interface and does not exist as node.
It is used by all nodes
(Document, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction, and Comment).

W3C DOM 4.1

www.w3.org

모든 노드는 nodeType이란 상수값을 가지고 있음
- Element Node는 1, Text Node는 3
nodeName, textContent
- Element Node의 태그명을 확인할 때 사용
- Element Node의 태그가 감싸고 있는 내용을 얻을 때 사용
textContent
childNodes
firstChild, lastChild, previousSibling, nextSibling
nodeValue
- text node의 경우 nodeName 무의미, nodeValue를 통해 값을 얻어옴
노드 조작
- insertBefore
- appendChild
- replaceChild
- removeChild

Document Node

Node로부터 물려받고 있는 기능들을 확장하는 document interface는 문서 내의 노드를 생성(createXXX)하는 기능을 가지고 있다

문서 전체에서 노드를 선택, 생성하는 기능 담당

ex) getElementByXXX, querySelector

노드 조작 시 노드를 생성하려고하면 document를 쓰면 됨

ex) document.createElement → (Element 국한) insert, replace etc.

엘리먼트 노드의 속성변경

element노드 객체를 가져왔다면 html이 가지고 있던 속성을 거진 쓸 수 있음

input

단순 텍스트 입력

select - option

객관식 선택

선택지 중 사용자가 선택한 값

data-list

일반적인 text box(input)에 목록을 사용할 수 있게끔 보강한 것,
id를 입력하여 사용

input 속성으로 list="datalist의 id명"를 추가

인풋 박스 클릭하면 선택지가 나옴

//Ex5 : 엘리먼트 노드의 속성 변경

window.addEventListener("load", function () {

var section = document.querySelector("#section5");

var srcInput = section.querySelector(".src-input");

var imgSelect = section.querySelector(".img-select");

var changeButton = section.querySelector(".change-button");

var img = section.querySelector(".img");

changeButton.onclick = function(){

img.src = "images/"+srcInput.value;

//img.src = "images/" +imgSelect.value;

};

});

<div>

</datalist>

</select>

</div>

<div>

</div>

</section>

<hr />

https://www.youtube.com/watch?v=fXYxiLiH5IQ&list=PLq8wAnVUcTFWhQrIXNN6kPYXJA6X2IQM4&index=31

'FRONT-END > JavaScript & JQuery' 카테고리의 다른 글

자바스크립트 정렬 및 배열에서 검색 후 제거 (0)	2021.07.05
캘린더 구현(자바스크립트) (0)	2021.07.02

코딩 공부중

뉴렉처 자바스크립트

Auto Boxing

Wrapper 클래스

Array

배열객체 초기화

배열 값 대체 및 삭제 (splice)

JavaScript Object Notatin(JSON)

문자열로 넘겨받은 JSON 형식의 데이터를 변환하는 방법

eval 함수

JSON parser

= = =, != =연산자

함수

변수의 가시영역

클로저

브라우저 객체

이벤트 기반의 프로그래밍

엘리먼트 객체 이용하기

스크립트 작성 방식

하위 엘리먼트 선택하기

Selectors API [노드 선택 - 개선된 방법, CSS 셀렉터 구문을 쓸 수 있음]

Node와 Element Node [childNodes, children]

문서를 구성하는 Node의 종류(Type)들

Node 인터페이스

엘리먼트 노드의 속성변경

input

select - option

data-list

'FRONT-END > JavaScript & JQuery' 카테고리의 다른 글

티스토리툴바

뉴렉처 자바스크립트

Auto Boxing

Wrapper 클래스

Array

배열객체 초기화

배열 값 대체 및 삭제 (splice)

JavaScript Object Notatin(JSON)

문자열로 넘겨받은 JSON 형식의 데이터를 변환하는 방법

eval 함수

JSON parser

= = =, != =연산자

함수

변수의 가시영역

클로저

브라우저 객체

이벤트 기반의 프로그래밍

엘리먼트 객체 이용하기

스크립트 작성 방식

하위 엘리먼트 선택하기

Selectors API [노드 선택 - 개선된 방법, CSS 셀렉터 구문을 쓸 수 있음]

Node와 Element Node [childNodes, children]

문서를 구성하는 Node의 종류(Type)들

Node 인터페이스

엘리먼트 노드의 속성변경

input

select - option

data-list

'FRONT-END > JavaScript & JQuery' 카테고리의 다른 글

'FRONT-END/JavaScript & JQuery' Related Articles

티스토리툴바