프론트엔드/JAVASCRIPT(21)
-
[JS] 객체
객체(Object) - 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(KEY)와 값(VALUE)로 구성됨. - 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있기에 함수는 일급 객체이므로 값으로 취급되어 프로퍼티의 값으로 사용될 수 있으며, 일반 함수와 구분하기 위해 메서드라고 부름. 자바스크립트 객체 생성방법 - 객체 리터럴 - Object 생성자 함수 - 생성자 함수 - Object.create 메서드 - 클래스(ES6) 객체리터럴에 의한 객체 생성방법 var obj = { num :0, increase : function(){ this.num++; } }
2021.07.11 -
[JS] 자바스크립트 객체 KEY 동적 할당
자바스크립트 객체 KEY 동적 할당 var something = { name: 'zincider', job: 'student' } 위와 같이 Object는 KEY와 VALUE의 쌍으로 이루어진 키는 임의로 작성할 수 있고 또는 쌍따옴표를 이용해서 "name" : "zincoder"와 같이 작성할 수 있지만, KEY에는 문자열을 그대로 사용하기 때문에 KEY를 동적으로 할당해주어야 할 필요가 있을 때는 바로 사용이 불가능함. var keyname = 'name'; var something = {keyname : 'zincoder'} //원래 의도는 {name: "zincoder"} console.log(something) //{keyname: "zincoder"} 위와 같은 코드를 작성하였을 때, 원래 의..
2021.07.11 -
[JS] this
this this는 함수의 실행컨텍스트를 가리키는 예약어인데, 다시 말해 '함수가 실행되는 환경(함수가 실행될 때의 컨텍스트)'라고 할 수 있음. console.log(this); //window - this의 가장 기본적인 컨텍스트는 글로벌(전역) 컨텍스트이기 때문에 여기서 출력된 window는 자바스크립트의 최상위 객체를 가리킴 var obj = { num:10, printNum: function(){ console.log(this.num); } } obj.printNum(); //10 - 객체 속성 함수 안에서의 this는 기본적으로 해당 객체를 가리킴 function showComment(){ consloe.log(this); } shoeComment(); //window - 위 함수를 실행시키면..
2021.06.24 -
[JS] EVENT
이벤트(EVENT) 웹을 탐색하는 동안 브라우저는 여러 종류의 이벤트를 등록함. 이벤트(event)는 어떤 사건을 의미하는데, 브라우저에서의 사건이란 사용자가 클릭했을 '때', 스크롤을 했을 '때', 텍스트를 입력했을 '때'와 같은 것을 의미함. 이벤트의 종류 사용자의 이벤트를 다루기 위해서는 먼저, 이벤트의 종류에 대해 알아야함. 1) 사용자 인터페이스 이벤트 사용자 인터페이스(UI) 이벤트는 브라우저가 로드한 HTML페이지가 아닌 브라우저 창을 사용할 때 발생하는 이벤트를 의미함. 예를 들어, 페이지가 로드되었거나 브라우저 창의 크기가 조정된 경우에 발생하는 이벤트들이 포함됨. - load : 웹페이지의 로드가 완료되었을 때 - unload : 웹 페이지가 unload될 때(새로운 페이지를 요청한 경..
2021.06.14 -
[JS] 자바스크립트의 Data Type
Javascript Data Type 자바스크립트의 모든 값은 데이터 타입을 가지는데, 크게 2가지로 기본형(Primitive Type)과 참조형(Reference Type)이 있음. Primitive Type(원시값) - 원시값은 변경 불가능한 값으로 한번 생성된 원시 값은 읽기 전용인 값으로써 변경할 수 없음. - 원시값은 불변성(immutability)를 가짐. *불변성이란? 변수는 하나의 값을 저장하기 위해 확보된 메모리 공간 자체 또는 메모리 공간을 식별하기 위해 붙인 이름이고, 값은 변수에 저장된 데이터. 그래서 원시 값은 불변성을 가진다는 말은 원시 값 자체를 변경할 수 없다는 것이지, 변수 값을 변경할 수 없다는 것이 아님. 변수는 언제든지 재할당을 통해 변수 값을 변경할 수 있기에 '변할..
2021.06.13 -
[JS] BOM(Browser Object Model)
BOM : Browser Object Model BOM (Browser Object Model)은 웹 브라우저 환경의 다양한 기능을 객체처럼 다루는 모델. 대부분의 브라우저에서 구현은 되어있지만 정의된 표준이 없어 브라우저 제작사마다 세부사항이 다르고 다소 한정적이라는 특징이 있음. BOM의 역할은 웹 브라우저의 버튼, URL 주소 입력 창, 차이츨 바 등 웹브라우저 윈도우 및 웹페이지의 일부분을 제어할 수 있게끔 하는것이며, window객체를 통해 접근이 가능함. 대표적인 BOM객체들 - window : Global Context. 브라우저 창 객체 - screen : 사용자 환경의 디스플레이 정보 객체 - location : 현재 페이지의 url을 다루는 객체 - navigator : 웹브라우저 및 ..
2021.06.13