문서 객체 모델(DOM) HTML에 접근하기 위한 모델(인터페이스)이며, HTML을 컨트롤하기 위한 방법 그 자체를 기술한 것이다. 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 우리는 이 DOM으로 모든 HTML요소 및 속성, CSS스타일을 변경할 수 있으며, 이벤트를 추가하고, 이벤트에 반응할 수 있다. DOM은 W3C의 표준 객체 모델이다. DOM에 접근해 보자 문서가 로드될 때(모든 DOM을 사용할 수 있게 되는 때) 실행되는 함수를 정의하였다. 새로운 H1 element를 생성하고, element에 text를 추가하며, H1을 이 문서의 트리에 추가한다. 브라우저는 HTML문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이 때 생성된 객체들의 구조를 D..

this 자바의 this와는 다르게 클래스에 종속되지 않으며 자바스크립트에서의 this는 함수의 호출방식에 따라 가져오는 객체가 달라지므로 this의 사용 위치가 중요하다. 기본적으로는 최상위객체인 window를 가리킨다. console.log(this); // window function test1(){ console.log("test1 ", this); // test1 window function test2(){ console.log("test2 ", this); // test2 window } test2(); } test1(); 함수 안에서의 this 함수 안에서의 this는 함수의 주인에게 바인딩된다. 아래의 예시에서 this.num의 this는 window객체를 가리킨다. var num = 0;..

타이머 Window 객체의 메서드 중 하나이며 익명, 기명함수를 통해 값을 제어한다. 일정시간이 지난 뒤 함수를 호출하거나, 특정 함수를 지속적으로 반복하여 실행할 때 사용한다. ms단위를 사용한다. setTimeout / clearTimeout 지정한 시간 이후, 단 한번만 지정된 콜백함수 호출 clearTimeout을 통해 setTimeout 호출 취소 See the Pen Untitled by magic (@mag11c) on CodePen. setInterval / clearInterval 지정된 시간 간격마다 지정된 함수를 반복적으로 호출 및 호출취소 See the Pen Untitled by magic (@mag11c) on CodePen.

목차 이벤트(Event) 사용자가 버튼을 눌렸을 때, 웹 페이지가 로드될 때, 특정 영역에 마우스가 올라갔을 때 등등등. 이벤트의 요소는 다양하다. 이 이벤트들은 DOM요소와 관련이 깊다. ​이벤트가 발생하면 무언가가 이를 감지할 수 있어야 하며, 그에 대응하는 반응을 하여야 한다. 이를 위해 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다. ​이 함수를 이벤트 핸들러라 하며 이벤트에 대응하는 처리를 기술한다. 이벤트리스너와 이벤트핸들러 이벤트 핸들러는 addEventListener() 메서드를 사용하지 않고 이벤트와 함수를 연결하는 것이다. 이벤트 종류 UI Event Event 설명 load 웹, 스크립트 페이지 로드 완료시 unloa..

객체(Object) 생성자를 통해 객체를 만들 수 있으며, 객체를 직관적으로 선언하여 사용할 수 있다. Key, Value로 구성된 속성(프로퍼티)들의 집합이다. 자바스크립트의 함수를 프로퍼티에 사용할 수 있으며, 객체 내부에 선언된 함수를 메서드라 한다. 자바스크립트의 객체는 프로퍼티와 그 객체에 관련된 동작(메서드)를 모두 포함할 수 있다. 프로토타입 객체의 프로퍼티와 메서드를 상속받는 것이 가능하다. var obj2 = { prop1: "this", // 프로퍼티 prop2: "is", // 프로퍼티 prop3: "property", // 프로퍼티 hello: function () { // 행동을 정의하는 메서드 console.log("메서드"); } } obj2.hello(); >> 메서드 객체 ..

[ 서브쿼리 (SUBQUERY) ] 다른 쿼리 내부에 포함되어 있는 SELECT문을 말한다. 서브쿼리는 괄호() 로 묶어서 표현한다. 서브쿼리 실행 후 메인쿼리를 실행한다. 서브쿼리는 단일 행 연산자(=, >=)와 다중 행 연산자(IN, NOT IN, ANY, EXISTS 등)들을 사용하여 표현한다. 메인쿼리와 서브쿼리 메인쿼리 = 부모쿼리 = 외부쿼리(outer query) 서브쿼리 = 자식쿼리 = 내부쿼리(inner query) SELECT FROM WHERE 조건식 연산자 (SELECT FROM WHERE); 장점 1. 쿼리의 구조화를 통한 가독성 상승 2. 복잡한 JOIN, UNION과 같은 동작을 수행할 수 있는 또 다른 방법을 제공 서브쿼리를 사용 가능 한 곳 ​MySQL에서 서브쿼리를 포함할..

문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/148653 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 문제 설명에서 간단하게 추론할 수 있는것은 두 가지였다. 첫 번째는 1의 자리 수 부터 순차적으로 처리해야 한다는 것이다. 내려갔을 때는 상관이 없지만 올라갔을 때, 현재 층의 값이 증가하기 때문에, 큰 자리 수부터 계산하게 되면 한번 더 처리를 해야한다. 두 번째는 돌을 적게 쓰는 최적의 방법이다. 돌을 가장 적게 쓰는 방법은 5를 기준으로 5보다 크면 올라가고, 5보다 작다면..

[ JavaScript ] JavaScript란? 객체(Object) 기반의 프로그래밍 언어이다. HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다. (HTML은 웹의 '뼈대', CSS는 뼈대의 '디자인', 자바스크립트는 '뇌' 라고 생각하자) Node.js와 같은 프레임워크를 사용하면 서버영역에서도 사용할 수 있다. 자바스크립트는 1995년에 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 만들어졌다. 처음에는 모카(Mocha)라는 이름으로 개발되었으나, 그 후에 라이브스크립트(LiveScript), 최종적으로는 자바스크립트(JavaScript)라는 이름으로 변경됐다. 1996년에 넷스케이프(Netscape)는 자바..