[마스터 개념] 5 | map, 유용한 연산자들

[마스터 개념] 5 | map, 유용한 연산자들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 10 mapSet  중복 X, 집합체이다. // 생성const set = new Set([1, 2, 3]);console.log(set); // Set(3) { 1, 2, 3 }// 사이즈 확인console.log(set.size); // 3// 존재하는지 확인conso..

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

[마스터 개념] 4 | 이터러블

[마스터 개념] 4 | 이터러블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 9 iterator 이터러블[Symbol.iterator]( ) : Iterator{ next( ) : {value, done}};  Iterable 은 순회가 가능하다. Iterable 은 객체가 [Symbol.iterator]( )를 가지고 있어야 하며, 호출했을 때 Iterator 를 반환..

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

[마스터 개념] 3 | 배열

[마스터 개념] 3 | 배열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 8 array 배열 일반적인 배열은 동일한 메모리 크기, 연속적, 자바스크립트의 배열은 동일한 메모리 크기를 가지지 않고, 연속적으로 이어져 있지 않다.   오브젝트와 유사하며 일반적인 배열의 동작을 흉내 낸 특수한 객체이다. 자바스크립트 배열은 다른 타입의 데이터를 넣을 수 있으므로 타입이 정해져..

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

[마스터 개념] 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

06. 새로운 요소 추가하기

06. 새로운 요소 추가하기다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. 행과 열의 개수를 입력한 값에 따라 표를 그리는 프로그램을 작성한다.2. table 요소 노드를 만든다.3. 입력한 행의 개수만큼 반복하면서 tr 요소 노드를 만든다.4. 입력한 열이 개수만큼 다음 과정을 반복한다. - td 요소 노드를 만든다. - 텍스트 노드를 만든다. - 텍스트 노드를 td 요소 노드의 자식 노드로 만든다. - td 요소 노드를 tr 요소 노드의 자식 노드로 만든다.5. tr 요소 노드를 table 요소 노드의 자식 노드로 만든다.6. table 요소 노드를 필요한 위치에 추가한다.  행 열 작성 결과 화면A. 해설1. 행과 ..

• format_list_bulleted 💠문제 풀이/JavaScript 문제 풀이
• · 2022. 8. 29.
• textsms

05. DOM 에 접근하기

05. DOM 에 접근하기다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. 항목 앞 체크 표시를 누르면 항목 텍스트의 글자색이 바뀌며 가로줄이 그려지는 프로그램을 작성한다.2. 체크 표시 부분을 가져와 노드 리스트를 만든다. 요소를 이용한다.3. 노드 리스트에 있는 요소 전체를 반복하면서 click 이벤트가 발생하면 실행할 함수를 연결한다.4. 클릭이 발생한 요소에서 글자 색상 스타일을 회색(#CCC) 으로 바꾼다. 5. 클릭한 요소의 부모 노드에서 밑줄 스타일(text-decoration) 을 가로줄(line-through) 로 바꾼다.  할 일 목록 ✓할 일 1 ✓할 일 2 ✓할 일 3 ✓할 일 4 ..

• format_list_bulleted 💠문제 풀이/JavaScript 문제 풀이
• · 2022. 8. 29.
• 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