쌓고 쌓다

문서 객체 가져오기 document.body로 body의 요소를 읽어 들일 수 있고 아래와 같은 방법들로도 요소 읽기가 가능하다. document.head ducument.body document.title head, body, 요소 내부에 만든 다른 요소들은 별도의 메소드를 통해 접근한다. document.querySelector(선택자) document.querySelectorAll(선택자) querySelector 메소드는 요소를 하나만 추출하고, querySelectorAll 메소드는 문서 객체 여러 개를 추출한다. 선택자 부분에 CSS 선택자를 사용한다. 이름 선택자 형태 설명 태그 선택자 태그 특정 태그를 가진 요소 추출 아이디 선택자 #아이디 특정 id 속성을 가진 요소 추출 클래스 선택자 ..

HTML에서 html, head, body, title, h1, div 등을 요소(element)라고 부른다. JavaScript에서는 이를 문서 객체(document object)라고 부른다. 문서 객체 모델(DOM:Document Objects Model) : 문서 객체를 조합해서 만든 전체적인 형태 DOMContentLoaded 이벤트 html 페이지는 코드를 위에서 아래로 차례대로 실행한다. body 태그가 생성되기 전에 head 태그에서 body 태그에 무언가 출력은 한다면 문제가 발생한다. 아래의 코드를 보자. document.body.innerHTML로 body 안에 있는 html 코드를 조작한다. 1번째 h1 태그 2번째 h2 태그 실행 결과 head 태그 안에서 body 태그를 조작하는 ..

배열의 얕은 복사(참조 복사) const 물건박스1 = ['우유', '식빵'] const 물건박스2 = 물건박스1 물건박스2.push('감자') 물건박스2.push('고구마') console.log(물건박스1) console.log(물건박스2) 배열을 다른 배열의 이름으로 할당해주면 같은 공간을 가리키는 이름만 다를 뿐 독립적이지 못하다. 배열의 깊은 복사 두 배열을 전개 연산자를 통해 완전히 독립적인 상태로 만들 수 있다. 전개 연산자 : [...배열] const 물건박스1 = ['우유', '식빵'] const 물건박스2 = [...물건박스1] 물건박스2.push('감자') 물건박스2.push('고구마') console.log(물건박스1) console.log(물건박스2) + 배열 요소 추가 const..

속성 존재 여부 확인 객체에 없는 속성에 접근하면 undefined 자료형이 나온다. 조건문을 통해 undefined인지 아닌지 확인하여 속성 여부를 확인한다. const object = { name: '책이름1', pirce: 777 } if(object.name !== undefined){ console.log('name 속성이 존재.') } else { console.log('name 속성이 없음.') } if(object.author !== undefined){ console.log('author 속성이 존재.') } else { console.log('author 속성이 없음.') } 이외 방법들 // 방법 if(object.name) { console.log('name 속성이 있음.') } e..

외부의 script 파일을 읽을 때 script 태그를 사용한다. src 속성에 읽어 들일 파일의 경로를 입력한다. 외부 script 파일 읽기 동일한 폴더에 hello.js를 만들어 코드를 입력했다. hello.js console.log('# hello.js의 script') const i = 777 test.html 실행 결과 Lodash lodash 홈페이지에서 CDN copies를 눌러 링크를 복사한다. 링크: https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js + CDN? 콘텐츠 전송 네트워크(Contents Delivery Netword)라는 뜻으로 가까운 서버에서 다운로드하게 하여 빠르게 전송받는 방법입니다. + min 버전? min 버전의..

문자열로 데이터를 주고받을 때 CSV, XML와 같은 자료 표현 방식을 사용한다. JSON(JavaScript Object Notation) 또한 배열과 객체를 활용한 자료 표현 방식 또는 형식이다. 대부분 프로그래밍 언어는 JSON 형식의 문자열을 읽어 들이는 기능이 있다. 그래서 네트워크를 통해서 각각의 프로그래밍 언어로 만든 애플리케이션이 데이터를 교환할 때 활용한다. JSON을 활용해 책을 표현하면 // 한권의 책 { "name": "종강이 좋아", "price": 7777, "publisher": "야이야" } // 여러권의 책 [{ "name": "종강이 좋아", "price": 7777, "publisher": "야이야" }, { "name": "개강 오지마", "price": 8888, "..

자바 스크립트에서 자료를 기본 자료형과 객체 자료형으로 구분한다. 기본 자료형 숫자 문자열 불 객체 자료형 함수 배열 이외 전부 객체 자료형 속성과 메소드를 가지면 객체이다. 배열도 객체이다. 배열에 속성을 지정한 후 확인 해보자. // 배열 선언 const a = [] // a에 속성 sample을 10으로 초기화 a.sample = 10 // a의 속성 sample 출력 console.log(a.sample) 함수도 객체이다. 함수에 속성을 지정한 후 확인 해보자. // 함수 f 선언 function f() { } // f에 속성 지정 f.sample = 10 // f 속성 출력 console.log(f.sample) 기본 자료형 객체가 아닌 것을 기본 자료형이라고 부른다. 객체가 아니므로 속성을 가..

배열 또한 객체(object)이다. console.log( typeof([]) ) 객체 생성 배열은 인덱스를 이용해 요소에 접근하지만 객체는 키를 사용하여 값에 접근한다. 객체는 중괄호 { }로 생성하고, '키: 값'의 형태로 자료를 쉼표(,)로 연결해서 입력한다. const product = { 제품명: '망고', 원산지: '필리핀' } 객체의 요소 접근 (방법1) - 대괄호 [ ] 와 키 product['제품명'] product['원산지'] (방법2) - 온점 (.) product.제품명 product.원산지 + 식별자로 사용할 수 없는 단어를 키로 사용한 경우 (키를 문자열로) const test = { "hello world": 777, "im good~!": 1 } test["hello worl..