-

this의 값은 함수가 호출되는 방식에 따라 다름객체 내 this객체 내 this를 호출하는 경우 해당 객체를 가리킴// 스코프 내 this 호출 const temp = { inner : function(){ console.log(this) } } temp.inner() // 해당 객첼ㄹ 가리킴전역 범위에서의 this전역 범위에서 this 호출 시 Window 객체를 가리킴 'use strict' 를 활용하여 Window 객체 참조 방지 가능strict 모드에서 window 객체 대신 undefined로 값을 설정하는 규칙이 적용되어 undefined가 되는 경우 bind() 함수를 활용하여 this 값을 수동으로 설정 할 수 있음// 전역 범위에서 this 호출 function temp02(){ con..

브라우저 객체 모델자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것 주요 브라우저 내장객체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].valueselect 요소 접근// 배열 활용 select옵션 접근 document.폼 이름.폼 요소이름.options[인덱스] document.폼 이름.폼 요소이름.options[인덱스].value // 선태된 select index document.폼 이름.폼 요소이름.options.seletedIndex document.폼 이름.폼 요소이름.options[폼요소이름.sel..

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

값에 의한 전달 (Copy by Value)값에 의한 전달기본적으로 모든 primitive 값은 copy by value원본 데이터와 복사본의 데이터가 서로 따로 제어 됨let origin = 'hi'let clone = originclone +=' john'console.log(origin); // hiconsole.log(clone); // hi john참조에 의한 전달(Copy by Reference)참조에 의한 전달원본 데이터와 복사본의 데이터가 같이 제어 됨const newObj = { name :'john'}originObj.name = 'Mike'console.log(originObj.name); // Mikeconsole.log(cloneObj.name); // Mikeconsole.l..

nav 모든 내비게이션이 아닌 페이지 주요 내비게이션 링크들만 선언하는 것이 좋음 footer안에서 nav 사용은 불필요 사이트 전반전인 이동을 위한 내비게이션과 페이지 전체를 이동하는 내비게이션을 각각 기술할 수 있음 section 문서나 어플리케이션의 내용을 주제별로 섹션을 구분하는 요소 h1~h6의 헤딩태그를 사용할 수 있으나 h2~h6 태그 사용을 권장 article 문서내의 독립적인 글을 표시하여 블로그 글이나 뉴스 본문이 해당됨 article 요소 안에 article 요소가 들어갈 경우 안쪽의 article요소는 밖에 article 요소의 내용과 관련이 있는 내용이라는 것을 의미 블로그의 글과 사용자가 작성한 댓글이 있을 경우 하나의 댓글을 안쪽으로 기술하고, 전체 블로그 글은 바깥은 arti..

const func = (x) => (x = x + 1); let a = 10; // 함수 내 처리결과는 원시 타입 변수값에 영향을 주지 않음 func(a); console.log(a); // ⇒ 10 const func2 = (x) => (x[0] = 1); let b = [0, 2, 3]; // 함수 내 참조타입의 경우 값 변경됨 func2(b); console.log(b); // ⇒ [ 100, 2, 3 ] 데이터 분류 1. 원시 타입(Primitive Type) 원형데이터로 더이상 단순화 할 수 없는 값으로 데이터 및 정보의 가장 단순한 형태 Boolean, String, Number, Undefined, Null, Symbol 2. 객체 타입(Object Type) 참조데이터로 기본 타입을 제외..

배열자바스크립트의 기본 데이터 타입 []안에 데이터 입력타입에 상관없이 사용 가능배열에 배열, 객체도 저장 가능배열 초기화// 빈 배열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')배열 길이 확인메서드설명결과배열.length배열 길이 반환숫자배열 요소 추가/삭제배열 요소 삭제 시 삭제 가능한 요소가 없을 경우 undefined 반환메서드..

문자열 길이 이모지와 특수문자는 4바이트로 인식하여 문자열의 결과가 2로 나타남 4바이트로 표현되는 문자를 하나의 문자로 인식하기 위해서 Array.from().length 이용 메서드 설명 결과 문자열.length 문자열의 길이 정수 Array.from(문자열).length 문자열의 길이 정수 '😋'.length Array.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 다룰 수 있는 최소 정수값 부정확한 결과로 반환 되는 수 계산 시 부적절한 결과로 반환되는..