목차 DOM 1-1. 문서 객체 1-2. 노드 요소 노드, 텍스트 노드 DOM 노드 탐색 텍스트 노드, 요소 노드 모두 탐색 2-1. DOM 컬렉션 NodeList 2-1. DOM 탐색 프로퍼티 , , 2-2. 자식 노드 탐색 2-3. 형제 노드 탐색 2-4. 부모 노드 탐색 DOM 요소 탐색 요소 노드만 탐색 3-1. 자식 요소 탐색 HTMLCollection(숫자) 3-2. 형제 요소 탐색 3-3. 부모 요소 탐색 1. DOM 1-1. 문서 객체 DOM(Document Object Model)은 문서 객체 모델을 의미한다. HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있도록 만든다. 모든 노드 객체에 접근할 수 있는 요소 및 메소드를 제공한다. 1-2. 노드 요소 노드, 텍스트 노드 ❗..
목차 객체 1-1. 객체 선언 및 호출 1-2. key 식별자 ① 객체명.속성명, ② 객체명['속성명'], ③ 객체명[변수명] 1-3. 상수 객체 속성 변경 1-4. 객체 속성 추가 및 제거 함수 활용 객체 생성 in 키워드 true/false for in 반복문 객체의 메소드 속성 생성자 함수 객체 배열 7-1. push() 객체 배열 추가 7-2. find/findIndex 배열 내 객체 검색, 첫 true에 대해서만 반환 7-3. filter true 요소 전체 반환 1. 객체 다른 자료형은 오직 하나의 데이터만 담을 수 있는 원시형(primitive type)인 반면, 객체의 경우는 다양한 데이터를 취급한다는 특징이 있다. 1-1. 객체 선언 및 호출 객체는 프로퍼티(property, key-va..
목차 배열 1-1. 배열 1-2. 배열 선언 1-3. 배열 초기화 [] 1-4. 배열 순회 for문, for of문 Array 객체 메소드 - 요소 추가/제거 2-1. push(값) 맨 뒤 요소 추가 2-2. pop() 맨 뒤 요소 제거 2-3. unshift(값) 맨 앞 요소 추가 2-4. shift() 맨 앞 요소 제거 후 반환 2-5. slice(시작 index, 끝 index) 선택 요소 잘라내기, 원본 배열에 영향X 2-6. splice(index, 제거수, 추가값1, 추가값2, ...) index 위치 요소 제거 및 추가, 원본 배열에 영향O 2-7. concat(배열명1, 배열명2, ...) 두 개 이상의 배열 결합, 원본 배열에 영향X Array 객체 메소드 - forEach() 메소드 A..
목차 함수 1-1. 함수 선언 및 호출 1-2. 변수 범위 함수의 매개변수 함수의 반환형 함수 표현식 함수가 변수의 값, 변수명(); 4-1. 함수 복사 4-2. 함수 선언문과 함수 표현식의 차이 콜백 함수 화살표 함수 1. 함수 함수(function)은 소스 코드의 집합으로 메소드(method), 모듈(module), 프로시저(procedure) 등을 말한다. 함수는 매개변수 및 인자, 리턴값을 가질 수 있다. 1-1. 함수 선언 및 호출 함수 선언(function declaration)에서는 반환값 선언 없이 function 키워드만 쓰인다. 자바 언어의 메소드(method)와의 대표적 차이로서 '반환형'이 존재하지 않는다. 또, 함수는 메소드보다 더 포괄적인 개념이기도 하다. function 키워드..
✅ 답안과 비교하여 스스로 스크립트 작성 개선점 짚어보기 완료(2022.02.21) 기본 문법 실습1. if문 또는 삼항연산자 사용 ✅ prompt 문구를 각 함수에 담는다. if문을 쓸 때 세 가지 외에 해당되지 않는 값이 올 경우를 대비하여 else로 처리한다. 삼항연산자의 경우도 마찬가지다. 그밖에 다른 값이 입력될 때를 위해 빈 값을 남겨두도록 한다. prompt로 "당신의 등급은 무엇입니까?" 라는 질문의 답을 받고 (기본 값 : 손님) "손님"의 경우 "글 읽기", "일반 회원"의 경우 "글 읽기, 글 쓰기", "운영자"의 경우 "글 읽기, 글 쓰기, 글 삭제" 라는 값을 변수에 저장하여 아래와 같이 alert로 출력한다. Ex. 운영자의 경우 글 읽기, 글 쓰기, 글 삭제가 가능합니다. if..
목차 클라이언트-서버 구조 1-1. 클라이언트 주요 언어 1-2. 서버 주요 언어 JavaSrcipt 2-1. JavaScript 2-2. JavaScript 실행 방식 2-3. JavaScript로 수행할 수 있는 기능 2-4. JavaScript 사용 이유 2-5. 개발자 도구 JavaScript 작성 방법 3-1. internal 방식 3-2. external 방식 3-3. inline 방식 1. 클라이언트-서버 구조 클라이언트가 주소 URL(예. 네이버)을 입력하거든 → DNS로부터 해당 IP를 확인 받아 → 이를 기반으로 서버(Server)에 요청을 넣는다: request 그런 뒤 요청한 홈페이지의 메인 .html 페이지를 결과로서 돌려 받을 것이다: response 여기서 Client 영역을 ..
목차 transition 1-1. transition-property 1-2. transition-duration 1-3. transition-timing-function 1-4. transition-delay 1-5. transition transform @keyframes 3-1. from~to 시작 지점-종료 지점 두 개만 있는 경우 3-2. 0%~100% 중간 작업이 있는 경우 1. transition transition-property 적용할 속성 선택 transition-duration 진행시간 선택 transition-timing-function 순차적 속도 선택 transition-delay 트랜지션 지연시간 선택 transition 트랜지션 속성값 일괄 설정 트랜지션(transition)..
