JavaScript (12) 썸네일형 리스트형 javascript "..." operator(spread syntax) 배열의 값들을 전개해 줌. ex) const numbers = {1, 2, 3} const newNumber = {...numbers} 를 하면 numbers 배열에 있는 값들이 복사됨. 자세한 내용 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax 전개 구문 - JavaScript | MDN 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시 developer.mozilla.org 국비 수업 43일 차(22.12.02.) - 이벤트 ※ 이벤트(Event) - 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정한 동작을 수행한다. 자바스크립트는 비동기식 이벤트 중심 프로그래밍 모델이라고 한다. 이벤트 타입 발생한 이벤트의 종류이다. 이벤트명이라고도 한다. 가장 많이 사용하는 키보드, 마우스, DOM, window 객체 등을 처리하는 이벤트가 많이 제공된다. (onclick, onkeyup, onload 등) 이벤트 타깃 이벤트가 일어날 대상 객체이다. 이벤트 리스너 이벤트가 발생했을 때 그 처리를 담당하는 함수이다. 이벤트 핸들러라고도 한다. 지정한 타입의 이벤트가 대상 요소에 발생하면 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행한다. ex) .. 국비 수업 42일 차(22.12.01.) - 폼 유효성 검사 함수 function sendit() { const joinform = document.joinForm; const userid = joinform.userid; // 아이디 입력란이 공백인지 확인하는 함수 if(userid.value == "") { alert("아이디를 입력하세요!"); userid.focus(); return false; } // 아이디 글자 수 확인하는 함수 if(userid.value.length 12) { alert("아이디는 5자 이상 12자 이하로 입력하세요!"); userid.focus(); return false; } // 비밀번호 입력란이 공백인지 확인하는 함수 const userpw = joinform.userpw; co.. 국비 수업 42일 차(22.12.01.) - 폼 객체 ※ 폼 객체 document.폼이름 - 내부의 input 태그 접근 폼객체.input태그이름 폼객체.elements[n] 폼객체.elements[input태그이름] 예제) 폼 객체 국비 수업 42일 차(22.12.01.) - 노드 ※ 노드(Node) - HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장한다. 노드트리는 노드들의 집합이며 노드 간의 관계를 보여준다. - 노드 종류 문서 노드(Document Node) 문서 자체를 나타내는 노드이다. 요소 노드(Element Node) HTML 요소(태그)는 요소 노드이며 속성 노드를 가질 수 있는 유일한 노드이다. 속성 노드(Attribute Node) HTML 요소의 속성 노드이며 요소 노드에 관한 정보를 가지고 있다. 텍스트 노드(Text Node) HTML 문서의 모든 텍스트는 텍스트 노드이다. 주석 노드(Comment Node) HTML 문서의 모든 주석은 주석 노드이다. - 노드 간의 관계 parentNode 부모 노드 childNodes 자식 노드들 firstC.. 국비 수업 41일 차(22.11.30.) - 문서 객체 모델 ※ 문서 객체 모델(Document Object Model) - XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소를 정의하고 요소에 접근하는 방법을 제공한다. 초간단 문서 문서의 내용 document 객체 초간단 문서 초간단 문서 문서의 내용 - document 객체 : 웹 페이지 자체를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근할 때에는 반드시 document 객체로부터 시작한다. getElementById() 해당 값을 id 속성으로 가지고 있는 요소 선택 getElementByClassName() 해당 값을 class 속성으로 가지고 있는 요소들을 선택(Array) getElementByTagName() 해당 태그들로 만들어진 요소들을 선택(Array).. 국비 수업 41일 차(22.11.30.) - Date 객체 예시(현재 시간) HTML 삽입 미리보기할 수 없는 소스 국비 수업 41일 차(22.11.30.) - 객체, Window·Date 객체 ※ 객체 - 프로퍼티와 메소드들을 하나로 가지고 있는 집합체를 말한다. - 객체 선언 1. 리터럴 표기법 const 객체명 = { 프로퍼티1: 값1, 프로퍼티2: 값2, ... 메소드명: function() { ... }, ... } 예제) 객체 2. 생성자를 이용한 선언 function 생성자명(매개변수1, 매개변수2, ...) { this.프로퍼티1 = 값1; this.프로퍼티2 = 값2; ... this.메소드명 = funtion() { ... } ... } new 생성자() 예제) 객체 - 프로토타입(prototype) : 자바스크립트의 모든 객체는 프로토타입이라는 객체를 상속받는다. 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며 그 상속되는 정보를 제공하는 객체를 .. 이전 1 2 다음
