본문 바로가기

728x90

📌Development/JavaScript
19

[JS] DOM이란? #2 부모, 자식, 형제 Node *DOM: 문서 객체 모델(The Document Object Model) query와 element의 차이점: pList1 = NodeList pList2 = HTML컬렉션 NodeList(4) HTMLCollection(4) : 모두 4개가 나옴 이제태그를 넣어보자. :다시 실행시켜보니 NodeList는 4개, HTML Collection은 5개가 돼있다. :코드를 다시 작성하지 않았지만 HTMLCollection은 node의 변경사항이 자동으로 반영돼있다.반면 NodeList는 한 번 사용했던 값을 계속 사용한다. 부모, 자식, 형제 Node -red에 접근한다고 가정해보자. //Console const red = document.getElementById( 'red'); < undefined 1... 2023. 3. 26.

[JS] DOM이란? #1 Node에 접근하는 방법 *DOM: 문서 객체 모델(The Document Object Model) 웹브라우저는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여준다. 해석한 HTML 코드를 화면을 통해 보여주는 과정을 '렌더링'이라 한다. - DOM은 html 문서의 각 요소들을 트리형태로 구조화해 표현하는 문서(데이터)를 생성한다. 개발자는 자바스크립트을 이용해서 일을 생성하거나 수정하거나 삭제할 수 있다. 이를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다. DOM목적 Q. Html 코드에 써져 있는 데로 결과를 출력하는게 브라우저 역할인데 굳이 중간에 DOM이라고 하는 데이터를 생성하는 이유? A. 자바스크립트를 사용해 이 문서에 대한 스크립트를 작성할 수 있게 해주기 때문이다. DO.. 2023. 3. 26.

[JS] Arrow Function은 무엇인가? 함수의 선언과 표현 * Function - 기본적인 빌딩블럭 - subprogram이라고도 불리며 여러번 재 사용이 가능하다. - 한가지의 task(작업)나 값을 계산하기 위해 쓰인다. 1. Function declaration (함수 선언) - function 키워드 이용, 이름(name)지정, ( )에 parameter(인자) 나열, { } body 로직 작성, return해주면 된다. - 하나의 함수는 한 가지의 일만 한다. - 함수이름 작성시, 동사형태로 이름을 지정해야한다. ex) createCardAndPoint 라는 함수 이름이 있다고 보자. 우린 이것을 creteCard 혹은 createPoint로 나눠야 할지 말지에 대해 고민해야한다. - 함수는 object이다. ex) function printHello(.. 2023. 3. 13.

[JS] operator(연산자), if, switch, for loops 코드 1. String(문자열) concatenation (연속) console.log('my'+'cat'); : + 기호를 이용한 문자열을 합해서 새로운 문자를 만들 수 있다. console.log('1'+2); : 문자열에 숫자 더하면 숫자가 문자열이 돼 합쳐짐 console.log(`string literals: 1 + 2 = ${1 + 2}`); : 빽틱 기호(``) 활용해서 string literals도 만들 수 있는데 $이용하면 변수 값을 계산해서 string으로 포함해서 문자열을 만들게된다. 📍string literals의 장점: - 줄바꿈 하거나 특수기호인 싱글코트('')를 사용해도 그대로 출력됨 ex) '''' 1 + 2 = ${1 + 2}`); + console.log('ellie's boo.. 2023. 3. 13.

이전 1 2 3 4 5 다음

728x90

최근댓글

최근글

인기글

skin by © 2024 ttutta

티스토리툴바