JavaScript(14)
-
[JavaScript] Array정리
프로그래밍을 할 때 array와 array를 다루는 메소드의 중요성을 느낀 적이 많았다. 이번에 map같은 자료구조도 같이 정리하려고 한다. 1. 배열 선언 / 배열 길이 var data = ['first', 'second', 'third']; //배열 선언 console.log(data.length); //3 var mix = ['str', 1, 50 , null , [2,3,4]]; //배열 안에 모든 타입이 다 들어갈 수 있다. ex) function, array, object ... 2. 배열에 데이터 삽입 var arr = [5]; // length는 1 arr[1000] = 4; // console.log(arr)로 콘솔에 찍어보면 (1001) [4, empty × 999, 3] 이런 배열을 ..
2019.05.08 -
[JavaScript] 브라우저 이벤트
Event브라우저에서는 많은 이벤트가 발생합니다. 브라우저 화면의 크기를 조절한다던가 스크롤을 내리거나 무엇을 클릭할 때, 아니면 html/css를 렌더링을 마쳤다(Load) 등 많은 이벤트가 발생합니다. 그 발생된 Event에 우리는 그 땐 어떤 일을 하라고 할 일을 등록할 수가 있습니다. 즉, HTML Element별로 어떤 event(주로 키보드나 마우스)가 발생했을 때 특정 행위를 일으키고 싶다면, 대상 Element를 찾고 어떤 Event를 등록하면 됩니다. 이것을 JavaScript로 구현할 수 있습니다. Event 등록Event 등록 표준방법입니다.addEventListener() 함수를 사용할 수 있습니다. addEventLister를 사용하면 여러 개의 Event Listener를 등록할..
2019.02.21 -
[JavaScript] DOM(Document Object Model)과 querySelector
DOMDOM TreeDOM APIquerySelector자바스크립트를 배우고 DOM에대한 이해가 없이 무작정 JQuery를 몇 개 외워서 사용했었는데, 참...속 빈 강정이었던 같았습니다.이번 기회에 좀 정리를 해보고가면 좋을 것 같습니다. 보통 컴파일러가 코드를 해석할 때 트리구조로 데이터를 구조화하는 걸 봤었습니다. 브라우저 역시 HTML 코드를 DOM이라는 객체 형태모델로 저장을 합니다. 이런 트리로 저장된 정보를 DOM Tree라 부릅니다 우리가 어떤 웹사이트에서 댓을을 달고, 우리의 반응에 따라서 HTML의 구조와 데이터가 계속적으로 변경됩니다. 자바스크립트로 이런 변경을 해줄 수 있는데 DOM이라는 트리의 구조체가 만들어져 있으므로 변경이 용이합니다. 우리가 이런 DOM Tree를 탐색해서 변..
2019.02.20 -
[JavaScript] window 객체
window객체window객체는 브라우저에서 최상위(root)에 존재하는 중요한 객체입니다. 즉, window객체는 모든 객체의 조상이므로window는 그냥 생략해서 사용합니다. 모두 포함하고 있는 걸 아니까 그냥 편하게 생략하고 사용하자!라고 볼 수 있습니다. window.setTimeout() setTimeout() // window를 생략가능(전역 객체라서) 인터넷 브라우저를 열면 여러가지 창을 제어할 수 있습니다. 흔히 경고창을 띄워줄 때 alert()라는 메소드를많이 사용하고, setTimeout()/setInterval()같은 타이머 기능을하는 메소드 등도 window 객체의 메서드입니다. window.close() // 창을 닫는다. window.open() // 새 창을 연다. window..
2019.02.19 -
[JavaScript] 함수선언식 함수표현식 호이스팅
자바스크립트에서 함수를 표현하는 방식 2가지를 알아보겠습니다. + 자바스크립트는 다른 언어처럼 void는 없고 return값이 없을 경우에 undefined를 반환합니다. function a(){ //return값이 없다. } console.log(a()); 함수 선언식(Function Declarations) 일반적으로 다른 언어에서 함수를 선언하는 것과 비슷한 형식입니다. 함수 선언에서의 특징은 함수 선언부를 다른 코드보다 먼저 읽고 실행합니다. 그래서 함수 선언 전에 호출을해도 정상적으로 동작하게 됩니다. 또한, Parameter 개수와 argument의 개수가 일치하지 않아도 오류가 나지 않습니다. 변수(firstname)은 초기화됐지만, 값이 할당되지 않았기 때문에 undefined라는 값을 가..
2019.02.19 -
[JavaScript] 조건문, 반복문(forEach / for...in / for...of)과 문자열 처리
자바스크립트에서 for문이나 while문으로 반복문을 구현할 수 있습니다. 조건문조건문을 표현하는 방법을 좀 살펴봅시다. 1. 가장 일반적인 표현. block을 이용한 표현 if(true){ }else{ } 2. 한줄로 브레이스 없이, block없이 코딩하는 경우if(true) console.log(true) 3. 삼항연산자const val = trueconst result = (val) ? 'true' : 'false'; console.log(result); 반복문일반적인 for문을 이용해서 반복문을 구현합니다. const arr = [1,2,3,4]; for(var i=0; i< arr.length; i++){console.log(i);} forEach forEach는 Array에서만 사용할 수 있는..
2019.02.15