전체 글

HTML 클래스 적극 활용하기 Element.classList classList속성은 웹 요소(Element)로부터 클래스 컬렉션을 반환하는 속성 관련 메소드 메서드 기능 사용 예 add 지정한 클래스 값 추가 add(”new_class”) remove 지정한 클래스 값 제거 remove(’old_class”) item 인덱스를 이용해 클래스 값 반환 item(1) toggle 클래스 값 토글링 toggle(’some_value”) contains 지정한 클래스 값 존재 여부 확인 contains(”is_contains”) replace 기존 클래스를 새 클래스로 대체 replace(”old”,”new”)

배열 여러 개의 데이터를 보관하는 역할을 수행하는 객체 let numbers = [1,2,3] 배열을 만드는 두 가지 방법 배열 리터럴로 생성 const arr = [1,2,3] Array 생성자로 생성 const arr = new Array(1,2,3) 특징 배열에 포함된 값 하나하나를 배열 요소라고 함 각 배열 요소는 왼쪽부터 순서가 매겨짐(인덱스 번호) 인데스 번호는 0부터 시작 배열 요소 수는 원하는 개수만큼 포함시킬 수 있으며 0개일 수도 있음 다양한 유형의 데이터를 포함시킬 수 있음 대괄호 연산자(‘[]’)를 이용해 특정 인데스 번호의 배열 요소를 참조할 수 있음 배열 메소드 및 속성(대표적인 것들) 메소드 또는 속성 기능 push 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 길이 반환 ..

빌트인 생성자 개발자의 편의를 위해 유용한 기능을 제공하는 빌트인 생성자 or 빌트인 객체를 지원 빌트인 생성자 JS에 내장된 생성자, 이를 이용해 객채 생성할 수 있음 빌트인 객체 JS에 내장된 객체, 이를 이용해 값이나 기능을 호출할 수 있음/ 빌트인 생성자 Date 날짜와 시간을 처리하는 다양한 메소드가 정의된 빌트인 생성자 월은 0부터 시작(6월 입력하기 위해서는 5를 입력) 사용 예시 const then = new Date(2008,5,10) //2008년 6월 10일 날짜끼리 연산시 밀리초 단위로 연산됨 주요 기능들 메소드 기능 특이사항 getFullYear 연도를 뜻하는 숫자 값 반환 getMonth 월을 뜻하는 숫자 값 반환 0부터 시작 getDate 날짜를 뜻하는 숫자값 반환 getDay..

객체를 만드는 생성자 객체 자바스크립트 명령문으로 어떤 처리를 지시하고자 하는 대상 객체에 내릴 수 있는 명령 객체 데이터 객체가 가지고 있는 다양한 데이터를 사용할 수 있음(속성 사용) 객체 기능() 객체가 가지고 있는 다양한 기능을 수행할 수 있음(메서드 사용) 개발자는 자신이 원하는 값이나 기능으로 구성된 객체를 직접 만들 수 있음 생성자 객체를 생성할 때 사용하는 함수(생성자 함수) 사용할 기능을 정희한 일반 함수와 생성자 함수 사이에는 특별한 문법적 차이가 존재 X 생성자 함수는 객체생성을 목 전으로 만드는 것 생성자 함수를 통해 자바스크립트가 제공하지 않는 유형의 데이터 창조 가능 this 키워드 생성자 함수 정의 시 this 키워드는 객체 그 자신을 의미 this를 이용해 해당 객체의 속성이..

이벤트 핸들링 이벤트 DOM에서 발생하는 다양한 액션 또는 상호작용 동작을 나타내는 프로그래밍 인터페이스 이벤트 발생의 예 웹페이지 사용자가 버튼 클릭 웹페이지 사용자가 키보드를 누름 웹페이지 사용자가 입력 폼의 내용 제출 외 다수 각 이벤트에 대한 이벤트 핸들러(handler)를 정의할 수 있음 이벤트 핸들러 : 이벤트가 발생되면 실행될 코드 블록으로 주로 함수가 이 역할을 담당 이벤트 핸들러 역할을 수행하는 함수를 정의하는 것이 이벤트 핸들러 등록 이벤트를 처리할 타겟을 선택하고 이벤트 핸들러 속성에 이벤트 핸들러를 대입 이벤트 속성에 함수를 대입할 때는 소괄호(’()’)없이 대입 addEvnetListenet() onclick, onkeydonw과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 ..

함수 정의하고 호출하기 함수란? 함수는 ‘불러서 쓸 수 있는 코드 조각’ 함수를 선언하고 기능을 정의 하면 함수의 이름을 코드 조각으로 사용 가능 함수도 직접 만들수 있지만 변수와 만드는 법이 다름 함수를 만드는 대표적인 두 가지 방법 함수 선언식 function 함수명(){ 함수의 기능 표현 구문 } 함수 표현식 const 함수명 = function(){ 함수의 기능 표현 구문 } 표현식으로 선언한 함수는 호이스팅기능이 불가 호이스팅 기능: 함수 만드는 부분이 호출하는 부분보다 아래에 있어도 됨 함수를 호출할 때는 함수의 이름 뒤에 반드시 소괄호를 붙여줘야 함 인수와 반환 인수 함수에서 소괄호는 함수가 실행될때 필요한 재료를 받는 것이고 전달되는 데이터를 인수(argumnet)라고 함 인수를 전달받아 ..

createElement, appendChild createElement document.createElement() 메서드는 지정된 이름의 HTML 요소를 만들어 반환 document.createElement('div') HTML요소가 만들어 지고 반환되었다고 해서 요소가 곧장 브라우저에 추가되는 것이 아님 자바스크립트 단계에서 만들어져 있는 요소를 화면에 표시하는 작업으로 추가해줘야 함 appendChild appendChild메서드는 DOM 내 개별 요소(’노드’)에 자식 요소를 추가할때 사용하는 메소드 사용방법 target.appendChild(자식으로 추가할 요소) 예제 const p = document.createElement('p') document.body.appendChild(p) app..

조건문 참/거짓 여부에 따라 프로그램의 흐름을 결정할 수 있는 구문 조건문의 시작 if 키워드 ‘if문’은 가장 일반적인 형태의 조건문 if(조건){ 실행문 } else를 추가하여 조건이 미 충족일 때 할 일을 추가 정의 할 수 있음 else if문을 조건문들 사이에 삽입하면 조건을 여러 가지 제시할 수 있음 반복문 for문 구문 작성시 반복을 위해 필요한 세 가지 요소를 한 곳에 모아 작성함으로 직관적으로 반복 횟수를 표현할 수 있는 구문 for(초기식; 조건식; 반복식){ 조건식이 충족될때 수행할 코드 } while문 주어진 조건이 참일 동안에 구문을 반복하는 반복문 while(조건){ 조건이 true인 동안에 반복 수행할 코드 }