[마스터 개념] 2 | 객체, 클래스, 빌트인 객체

[마스터 개념] 2 | 객체, 클래스, 빌트인 객체1 variable 변수2 operator 연산자3 function 함수4> object 객체5> class 클래스7> built-in 빌트인 객체8 array 배열9 iterator 이터러블10 map11 more-operators 유용한 연산자들12 module 모듈13 promise 프로미스14 scope 스코프15 prototype 프로토타입16 closure 클로져17 this 4 object 객체key : 문자, 숫자, 문자열, 심볼value : 원시값, 객체, 함수 속성, 데이터에 접근 // 마침표 표기법 dot notationconsole.log(apple.name);// 대괄호 표기법 bracket notation ('-'가 있을 때 사용..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 10. 26.
• textsms

[마스터 개념] 1 | 변수, 연산자, 함수

[마스터 개념] 1 | 변수, 연산자, 함수1> variable 변수2> operator 연산자3> function 함수4 object 객체5 class 클래스7 built-in 빌트인 객체8 array 배열9 iterator 이터러블10 map11 more-operators 유용한 연산자들12 module 모듈13 promise 프로미스14 scope 스코프15 prototype 프로토타입16 closure 클로져17 this 1 variable 변수변수 이름 규칙 1. 라틴문자 (0 ~ 9, a ~ z, A ~ Z), _, $2. 대소문자 구분함3. camelCase4. 한국어, 예약어, 숫자로 시작, 특수문자( _, $ 제외) => 사용불가변수 이름은 최대한 의미 있게, 구체적으로 작성하는 것이 좋..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 10. 25.
• textsms

[정리] 3 | DOM 트리, 접근하기 & 새로운 요소 추가, 노드 삭제 정리

[정리] 3 | DOM 트리, 접근하기 & 새로운 요소 추가, 노드 삭제 정리DOM 트리의 노드요소 노드 : 모든 HTML 태그 의미텍스트 노드 : 태그의 텍스트 내용속성 노드 : 태그의 속성주석 노드 : 주석DOM 에 접근하기getElementById(id) : id 명으로 접근getElementsByClassName(class) : class 명으로 접근, 배열 형태로 저장getElementsByTagName(tag) : 태그명으로 접근, 배열 형태로 저장querySelector() : id 명이나 선택자를 사용하여 접근querySelectorAll() : 클래스명이나 태그명의 선택자를 사용해 접근, 노드 리스트 형태로 저장- 속성 가져오기 및 수정하기getAttribute(속성) // 태그..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 29.
• textsms

[기본 개념] 3 | (1.3) DOM 에서 노드 추가, 삭제하기

[기본 개념] 3 | (1.3) DOM 에서 노드 추가, 삭제하기1 문서 객체 모델 (DOM)2 DOM 요소에 접근, 속성 가져오기3 DOM 에서 이벤트 처리하기4> DOM 에서 노드 추가, 삭제하기4 DOM 에서 노드 추가, 삭제하기노드 리스트란?  DOM 에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드 리스트를 사용해야 하는데, querySelectorAll( ) 메서드를 사용하여 노드를 여러 개 가져올 때 이 노드 정보를 여러 개 저장한 데이터 형식이 노드 리스트이다.  노드 리스트는 배열은 아니지만 배열과 비슷해서 인덱스 번호로 특정 노드에 접근할 수 있다. (ex. li 노드 리스트 중 두 번째 노드 가져오기) document.querySelectorAll("li")[1]  새로운 노드를 ..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 27.
• textsms

[기본 개념] 3 | (1.2) DOM 에서 이벤트 처리하기

[기본 개념] 3 | (1.2) DOM 에서 이벤트 처리하기1 문서 객체 모델 (DOM)2 DOM 요소에 접근, 속성 가져오기3> DOM 에서 이벤트 처리하기4 DOM 에서 노드 추가, 삭제하기3 DOM 에서 이벤트 처리하기DOM 요소에 함수 직접 연결하기  이벤트 처리기 함수가 간단하면 DOM 요소에 직접 연결할 수 있다.  (ex. 이미지를 클릭하면 알림 창 표시하기) ... ...... 함수 이름을 사용해 연결하기  이벤트가 발생했을 때 실행 함수를 정의해 놓았다면 함수 이름을 사용해 연결할 수 있다. 이 경우 함수 이름 다음 괄호(( )) 를 추가하지 않는다. (ex. 이미지를 클릭하면 함수 실행하기) ... ...... DOM 의 event 객체  DOM 에는 이벤트 정보를 저장하는 ..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 25.
• textsms

[기본 개념] 3 | (1.1) DOM 의 접근, 속성 가져오기

[기본 개념] 3 | (1.1) DOM 의 접근, 속성 가져오기1> 문서 객체 모델 (DOM)2> DOM 요소에 접근, 속성 가져오기3 DOM 에서 이벤트 처리하기4 DOM 에서 노드 추가, 삭제하기1 문서 객체 모델 (DOM)문서 객체 모델이란?  문서 객체 모델이란 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법이다.  DOM 은 웹 문서를 하나의 객체로 정의하고, 모든 요소도 각각 객체로 정의한다. DOM 트리  DOM 은 웹 문서의 요소를 부모 요소와 자식 요소로 구분하는데, 문서 안의 요소뿐만 아니라 각 요소에서 사용한 내용과 속성도 자식으로 나타낸다.  부모와 자식 구조로 표시하는 것을 DOM 트리라고 하며, 트리에서 가지가 갈라져..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 24.
• textsms

[정리] 2 | 객체, 자바스크립트의 내장 객체 정리

[정리] 2 | 객체, 자바스크립트의 내장 객체 정리객체 알아보기객체(object) : 프로그램에서 인식할 수 있는 모든 대상프로퍼티(property) : 객체의 특징이나 속성메서드(method) : 객체에서 할 수 있는 동작- 객체 인스턴스 만들기new 객체명- 객체의 프로퍼티와 메서드 사용하기객체명.프로퍼티객체명.메서드자바스크립트의 내장 객체종류설명window브라우저 창이 열릴 때마다 하나씩 만들어짐. 브라우저 창 안의 요소 중 최상위document웹 페이지마다 하나씩 있으며, 태그 만나면 만들어짐. HTML 문서의 정보가 담겨있음navigator현재 사용하는 브라우저 정보가 담겨있음history현재 창에서 사용자의 방문 기록을 저장location현재 페이지의 URL 정보가 담겨있음screen현재 ..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 23.
• textsms

[기본 개념] 2 | (2.2) 브라우저와 관련된 객체

[기본 개념] 2 | (2.2) 브라우저와 관련된 객체1 객체2 자바스크립트의 내장 객체3> 브라우저와 관련된 객체3 브라우저와 관련된 객체 웹 브라우저가 열리면 가장 먼저 window 라는 객체가 만들어지고 그 하위 요소에 해당하는 객체들이 나타난다.   window       ㅣ        ㅏㅡㅡㅣ  document  ㅡㅡㅜㅡㅡㅣarea         「  ¯¯ ¯¯ㅣtextareaㅣ        ㅏㅡㅡㅣnavigatorㅣ        ㅏㅡㅡㅣimageㅣ        ㅏㅡㅡㅣbuttonㅣ        ㅏㅡㅡㅣhistoryㅣ        ㅏㅡㅡㅣ  form  ㅣㅡㅡㅣㅡㅡㅣtextㅣ        ㅏㅡㅡㅣlocationㅣ          ㄴㅡㅡanchorㅣ        ㅏㅡㅡㅣcheckbox   ㅣ   ..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2022. 8. 23.
• textsms