Javascript

🌳 예시 html 코드아래는 이 글에서 사용될 전체 html 코드입니다. Cat-1 Ragdoll British Shorthair Scottish Fold Bengal Cat-2 Sphynx Munchkin Persian  🌳 태그 선택 메서드1) getElementById('id_명칭')document.getElementById('id_명칭')html의 id 속성을 이용하여 해당 id를 가진 태그를 반환선택된 태그 안에 다른 태그가 있다면 함께 선택됨id라고 명시했기 때문에 '#'을 작성할 필요 없음코..

🐝 스코프(Scope)스코프란 어떤 변수에 접근할 수 있는 범위를 의미합니다.스코프의 종류는 아래와 같습니다.전역(global) 스코프: 어디서나 해당 변수에 접근 가능지역(local) 스코프: 한정적인 범위 내에서만 해당 변수에 접근 가능블록 스코프함수 스코프 🐝 블록 스코프블록 스코프란 중괄호로 둘러싸인 { 블록 } 내부에서 선언된 변수는 해당 블록 안에서만 호출 가능한 것을 의미합니다.ES6 이후에 등장한 let과 const를 이용하여 선언한 변수가 블록 스코프의 개념을 따릅니다. 예를 들어, 아래와 같은 코드가 있을 때{ let test = 'block scope'; console.log(test); // 블록 내부에서 접근👍}console.log(test); // !블록 외부에서 접근👎블..

🌳 정의DOM이란 Document Object Model의 약자로 문서 객체 모델을 의미합니다.한 마디로 웹 페이지에 나타나는 html 문서 전체를 객체로 표현한 것이라고 할 수 있습니다. DOM에서의 객체는 '노드(node)'라고 불리며html 태그 = 요소(element) 노드태그를 제외한 문자 = 텍스트(text) 노드주석 = 주석(element) 노드로 구성됩니다. 따라서 DOM을 활용하면 자바스크립트로 html 태그를 객체처럼 다룰 수 있게 됩니다. 🌳 DOM 트리html은 태그들이 계층을 이루고 있습니다.그리고 이 계층 구조는 DOM에서도 반영되며 이를 DOM 트리라고 합니다.DOM 트리는 노드로 구성되어 있으며 노드들은 서로 부모/형제/자식의 관계를 가집니다. 예를 들어, 아래와 같은 코..

🌱 정의 객체란?키(key) : 값(value)의 형태로 이루어진 값들의 집합객체 안에 존재하는 키:값 형태의 쌍 전체를 프로퍼티(property, 속성)이라고 부릅니다.  🌱 생성 객체는 두 가지 방법으로 생성할 수 있습니다. 방법 1) 생성자(new 키워드)를 사용방법 2) 리터럴을 사용 예를 들어, 아래와 같은 코드가 있을 때// 방법 1) 생성자let object1 = new Object();// 방법 2) 리터럴let object2 = { name: "emma", age: 1004,};방법 1은 생성자를 활용한 방법으로 일단 빈 객체를 선언한 뒤에 필요한 프로퍼티를 추가합니다.방법 2는 {key:value} 형식으로 객체 생성과 동시에 프로퍼티를 할당합니다.  🌱 접근 객체는 두 가지..