코딩자율학습단 3기[HTML+CSS+JS]18 12.5 폼 조작하기 12.6 이벤트 다루기 12.7 이벤트 객체와 THIS 학습 목표 (p.487 ~ p.522) 폼 조작 속성 이해 및 실습 이벤트 이해 및 실습 이벤트 객체 이해 및 this 키워드 사용 폼 조작하기 HTML 폼 요소의 시작은 항상 form 태그로 시작한다. form 태그는 forms 속성과 name 속성으로 선택할 수 있다. ● forms 속성 사용하기 document 객체의 forms 속성은 모든 form 태그의 노드 정보를 HTMLCollection 객체에 담아 반환한다. 코드를 실행하고 개발자 도구의 콘솔창에 document.forms로 값을 출력해 보면 HTMLCollection 객체에 모든 form 요소 노드의 정보가 담겨 있다. 이때 HTMLCollection 객체는 유사 배열이라서 인덱스를 사용해 form 요소 노드에 하나씩 접근할 수 있다. .. 2023. 7. 26. 12.1 문서 객체 모델 이해하기 12.2 노드 선택하기 12.3 노드 조작하기 12.4 노드 추가/삭제하기 학습 목표 (p.456 ~ p. 486) 문서 객체 모델 이해 및 실습 노드 선택 속성 및 메서드 이해 및 실습 노드 조작 속성 이해 및 실습 노드 추가/삭제 속성 및 메서드 이해 및 실습 문서 객체 모델 이해하기 문서 객체 모델은 웹 브라우저에 표시되는 HTML 문서 구조를 객체화한 모델 구조를 의미한다. 문서 객체 모델은 웹 브라우저가 HTML 문서를 해석하고, 해석한 HTML 문서 구조를 객체로 변환하는 방식으로 생성된다. 그리고 생성한 문서 객체 모델을 웹 브라우저에 표시한다. 문서 객체 모델은 트리 구조를 가지기 때문에 DOM 트리라고 한다. DOM 트리는 document 객체 하위에 HTML 태그 요소, 속성, 텍스트, 주석 등이 트리 형태로 구성되는데, 이들을 각각 노드(node)라고 한다.. 2023. 7. 26. 11.3 표준 내장 객체 사용하기 11.4 브라우저 객체 모델 사용하기 학습 목표 (p.433 ~ p. 453) 표준 내장 객체 이해 및 실습 브라우저 객체 모델 이해 및 실습 표준 내장 객체 사용하기 표준 내장 객체는 자바스크립트에 기본으로 내장된 객체들을 말한다. 표준 내장 객체에는 문자열을 다루는 String 객체와 배열 자료형을 다루는 Array 객체, 날짜와 시간을 다루는 Date 객체와 수학 수식을 다루는 Math 객체가 있다. String 객체는 기본 자료형에서 문자열을 다룬다. 그래서 문자열에서 사용할 수 있는 속성과 메서드가 정의되어 있다. String 객체의 속성과 메서드 구분 설명 속성 length 문자열의 길이를 반환한다 메서드 includes() 메서드의 매개변수에 인자로 전달되는 문자열이 대상 문자열에 포함되어 있으면 true, 아니면 false를 .. 2023. 7. 26. 11.1 객체란 11.2 객체 속성 다루기 학습 목표 (p.420 ~ p. 432) 객체 이해 객체 속성 이해 및 실습 객체란 객체는 키(key)와 값(value)으로 구성된 속성의 집합을 의미한다. 객체는 여러 개의 값을 가질 수 있고, 다른 자료형의 값도 가질 수 있다. 객체는 { }를 이용해 생성할 수 있는데, 이런 방법을 리터럴 방식으로 객체를 생성한다고 한다. const person = {}; const person = {name:"Hong Gildong"}; 객체는 데이터의 종류를 가리지 않으므로 모든 자료형의 데이터를 값으로 가진다. const person = { name:["Hong", "Gildong"], age:20, isAdult:true }; 객체 안에 또 다른 객체나 함수가 들어갈 수도 있다. const person = {.. 2023. 7. 21. 10.4 함수의 특징 이해하기 10.5 즉시 실행 함수 사용하기 학습 목표 (p.406 ~ p. 417) 함수의 특징 이해 및 실습 즉시 실행 함수 이해 및 실습 함수의 특징 이해하기 스코프는 변수나 함수와 같은 참조 대상 식별자를 찾아내기 위한 규칙이다. 자바스크립트의 스코프는 함수 스코프 방식이냐 블록 스코프 방식이냐에 따라, 전역 스코프와 지역 스코프의 참조 범위가 달라진다. ● 함수 스코프 함수 스코프는 함수에서 정의한 블록문만 스코프의 유효 범위로 인정하는 방식이다. 함수 내부는 지역 스코프, 함수 외부는 전역 스코프 영역이 된다. let a = 10; // 전역 스코프 function sum(){ console.log(`함수 내부: ${a}`); } sum(); console.log(`함수 외부: ${a}`); ... 함수 내부: 10 함수 외부: 10 결.. 2023. 7. 20. 10.1 함수란 10.2 함수를 정의하는 방법 10.3 함수 기능 확장하기 학습 목표 (p.392 ~ p. 405) 함수 이해 함수 정의하는 방법 이해 및 실습 함수 기능 이해 및 실습 함수란 함수는 어떤 목적을 가지고 작성한 코드를 모아 둔 블록문이다. 코드를 함수로 만들면 함수를 호출해 함수 내부에 모아 둔 여러 줄의 코드를 한 번에 실행할 수 있다. function gugudan(){ // 함수 시작 for(let i = 1; i 인수 gugudan(8); // 8 -> 인수 함수 외부로 데이터를 반환할 때는 return문을 사용해야 한다. return 식(or 값) function sum(num1, num2){ let result = num1 + num2; return result; // return문으로 인해 함수 내부 데이터를 함수 외부로 전달 } const resu.. 2023. 7. 19. 이전 1 2 3 다음
