-

브라우저 객체 모델자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것 주요 브라우저 내장객체Window : 브라우저 창이 열릴 때마다 하나씩 생성되는 객체 Document : 웹 문서에서 태그를 만나면 만들어지는 객체, HTML 문서 정보를 가지고 있음History : 현재 창에서 사용자 방문 기록을 저장하고 있는 객체Location : 현재 페이지에 대한 URL 정보를 저장하고 있는 객체Navigator : 현재 사용 중인 웹 브라우저의 정보를 저장하고 있는 객체Screen : 현재 사용 중인 화면 정보를 저장하고 있는 객체Window 객체브라우저 창이 열릴 때마다 하나씩 생성되는 자바스크립트 최상위 객체 자바스크립트의 모든 객체는 window객체에 포..

name을 활용 Form 제어name을 활용한 폼 제어 시에는 form 뿐만 아니라 접근하려는 form 요소에 name값을 지정해야 함 Name 배열을 활용한 Form 제어폼 요소의 배열을 사용하여 접근하는 경우, form에 접근은 forms, 요소에 접근은 elements를 사용 docuent.forms[0].elements[0].value select 요소 접근 // 배열 활용 select옵션 접근document.폼 이름.폼 요소이름.options[인덱스]document.폼 이름.폼 요소이름.options[인덱스].value// 선태된 select indexdocument.폼 이름.폼 요소이름.options.seletedIndexdocument.폼 이름.폼 요소이름.options[폼요소이름.sel..

addEventListener() 함수이벤트가 발생한 요소에 이벤트 처리기를 연결해 주는 함수 document 객체, window 객체, 웹 문서, 이미지, 텍스트 등 어디에서든 사용 가능 다중 이벤트 한 번에 처리 대상.add 이벤트 유형 : 처리할 이벤트 유형을 지정, 'on'을 붙이지 않고, 'click', 'mouseover'와 같은 이벤트 이름만 사용 가능함수 : 이벤트가 발생했을 때 실행할 명령을 나열하거나 함수 이름을 지정캡쳐여부 : 이벤트를 캡쳐링하는지 여부를 지정, 생략가능 , true이면 캡처링, false(기본값) 이면 버블링이벤트 캡처링 : DOM의 부모노드에서 자식 노드로 이벤트가 전달이벤트 버블링 : DOM의 자식노드에서 부모노드로 이벤트가 전달

데이터 분류1. 원시 타입(Primitive Type)원형데이터로 더 이상 단순화 할 수 없는 값으로 데이터 및 정보의 가장 단순한 형태Boolean, String, Number, Undefined, Null, Symbol2. 객체 타입(Object Type) 참조데이터로 기본 타입을 제외한 모든 타입이 포함원형 데이터가 아닌 다른 데이터를 참조하는 데이터Array, Object, Date...데이터 타입 종류타입설명number숫자로 된 자료형- 정수와 실수 구분없이 모든 숫자 자료형을 number로 간주string문자열로 된 자료형boolean- true: any other value- false : 0, null, undefined, NaNnull명확하게 빈 값인 경우 ※ type은 object 에 ..

배열자바스크립트의 기본 데이터 타입 객체의 한 종류[] 안에 데이터 입력배열의 요소는 자료형에 제한이 없음 (boolean, 숫자, 문자열, 배열, 객체 등을 가질 수 있음객체와는 달리 데이터를 요소로만 저장하는 형태 배열 초기화// 빈 배열const arr1 = []// 데이터가 있는 배열 정의const arr2 = [2,3,1]// 배열 안에 배열 정의const arr3 = [[11,22], [33,44]]// 배열 안에 객체 정의const arr4 = [{name :'a'}, {name:'b'}]// new Array 활용 (단, 인수를 1개 정의 시 배열에 넣을 수 있는 데이터 수가 결정됨)const arr5 = new Array('1', '2')배열 요소 접근메서드설명반환배열[해당 요소의 ind..

문자열 길이이모지와 특수문자는 4바이트로 인식하여 문자열의 결과가 2로 나타남4바이트로 표현되는 문자를 하나의 문자로 인식하기 위해서 Array.from().length 이용메서드설명결과문자열.length문자열의 길이정수Array.from(문자열).length문자열의 길이정수 '😋'.lengthArray.from('😀').length // ⇒ 1문자열 길이형식문자열이 지정한 길이가 될 때까지 작업을 반복지정한 길이가 실제 문자열 길이보다 짧은 경우 변한없이 기존 문자 반환추가문자열 생략하면 공백으로 입력메서드설명결과문자열.padStart(전체길이, [추가문자열])해당 문자열의 시작부터 전체길이가 될때까지 추가 문자열을 반복문자문자열.padEnd(전체길이, [추가문자열])해당 문자열의 끝부터 전체길이가..

숫자 표현 자바스크립트의 기본 데이터 타입 중 하나로 정수와 소수를 사용하며, 타입은 Number 16진수, 10진수, 8진수, 2진수의 표현이 가능 최대 표현 범위가 정해져 있다 MIN_SAFE_INTEGER ~ MAX_SAFE_INTEGER를 벗어난 값은 계산 결과에 오차가 발생' 정수 결과 설명 Number.MAX_VALUE 1.7976931348623157e+308 최대 정수 값 Number.MIN_VALUE 5e-324 최소 정수 값 Number.MAX_SAFE_INTEGER 9007199254740991 다룰 수 있는 최대 정수값 Number.MIN_SAFE_INTEGER -9007199254740991 다룰 수 있는 최소 정수값 부정확한 결과로 반환 되는 수 계산 시 부적절한 결과로 반환되는..

클래스 객체 지향 프로그래밍언어에서 객체를 효율적으로 사용가능하게 하는 문법 추상화 : 프로그램에서 필요한 요소만을 사용하여 객체를 표현하는 것 객체 지향 프로그래밍 : 객체들을 정의하고 객체를 활용하여 프로그램을 만드는 것 인스턴스(객체) : 클래스를 기반으로 생성한 객체 클래스 생성 클래스를 기반으로 만든 객체를 기본적으로 인스턴스(객체)라고 부름 // [형식] 클래스 생성 class 클래스명 { // 클래스명은 대문자로 시작 } // 클래스 생성 [형식] const temp = new 클래스명 생성자 (Constructor) 객첼를 초기화하고 클래스의 속성을 설정 객체가 클래스로 부터 생성될 때 자동으로 호출 생성자 이름은 항상 constructor로 정의 생성자의 주요역할 1. 객체 초기화 : 클..

구문오류 (Syntax error) 프로그램 실행 전에 발생하는 오류 괄호, 문자열 기재 누락으로 인한 오류 예외 / 런타임 오류 오타 등으로 인해 코드 실행 중간에 발생하는 오류 자바스크립트에서 구문 오류 이외의 모든 오류는 예외로 분리(Type Error, Reference Error, Range Error) 예외 처리 기본 예외 처리 : 조건문을 사용하여 에러가 발생하지 않게 만드는 것 document.addEventListener('DOMContentLoaded', () => { const h1 = document.querySelector('h1') if (h1) { h1.textContext = 'hi' } else { // 기본 예외 처리 return 0 } }) 고급 예외 처리 : try c..

속성 존재 여부 확인 객체에 없는 속성 접근 시 undefined가 리턴 되므로 해당 조건을 통한 존재여부 확인 가능 특정 속성이 false로 반횐될 수 있는 값(0, false,빈 문자열)이 아닐 떄에는 단순 조건문 처리로 처리 const person = { name: 'John', age: 20, hobby: '', }; person.gender === undefined ? console.log('속성 존재하지 않음') : console.log('속성 존재'); // false로 반환될 수 있는 경우를 대비한 전제한 상태로 조건 처리 person.hobby || console.log('속성존재') // false로 변환될 수 있는 값이 들어오지 않을 것이라는 전제가 있을 시 기본 속성을 지정해둠 pe..