이벤트(Event)란? 이벤트란, DOM내에서 키보드 버튼을 누르거나 마우스를 클릭 하는 등의 사건을 말한다. 이벤트 발생시에는 그에 맞는 대응을 하여야 하고 이를 위해 이벤트는 일반적으로 함수에 연결되어있다. 해당 함수를 이벤트 핸들러라고 한다. 이벤트 핸들러에는 이벤트에 대응하는 처리를 기술한다 이벤트 종류 자주사용하는 이벤트는 아래와 같다 더 많은 이벤트는 MDN에서 확인할 수 있다 UI Event Event Description load 웹페이지나 스크립트의 로드가 완료되었을 때 unload 웹페이지가 언로드 될 때 (주로 새로운 페이지를 요청한 경우) error 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우 resize 브라우저 창의 크기를 조절했을 때 scroll 사..

💡 DOM(문서 객체 모델)이란? DOM이란 HTML, XML 문서의 프로그래밍인터페이스다. DOM은 문서의 구조화된 표현을 제공하며 자바스크립트 같은 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 노드와 객체로 이루어진 문서를 트리구조로 표현한다. (DOM tree) DOM은 W3C의 공식 표준이며 플랫폼/프로그래밍 언어에 중립적이다. DOM Tree document node (문서 노드) 트리의 최상위 루트 노드. document 객체를 가르킨다. DOM에 진입할 수 있는 진입점 역할을 해줌. HTML 문서에 document node는 1개만 존재한다. window.document, document로 사용할 수 있음..

웹 스토리지(Web storage) 웹 개발시에 데이터를 어딘가에 저장해야 할 일이 생긴다. 웹 스토리지는 클라이언트(브라우저)를 통해 비교적 간단한 데이터를 저장하는 기술이다. 웹 스토리지는 Local storage와 Sesson storage가 존재한다. 두 storage는 아래의 공통점을 갖는다 local 환경에 데이터를 저장 key-value 형태로 저장 문자열 형태로 반환 웹스토리지는 개발자 도구 Application 탭에서 확인할 수 있다 로컬 스토리지(Local storage) 도메인 단위로 구분되며 활용된다 => 도메인이 같다면 path가 다르더라도 데이터가 존재한다 브라우저를 종료해도 존재한다 사용방법 (API) 기본적으로 window.localStorage로 사용한다. window를 생..

매개변수와 인자 매개변수와 인자는 헷갈리기 쉬운 개념으로, 한번 정확히 정리해보려 한다 전달인자와 매개변수를 활용해 함수의 재활용성을 높일 수 있다 매개변수(parameter)란? 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수 (메서드 선언의 변수 목록) 매개변수 값을 return을 통해 출력할 수 있음 인자(argument)란? 함수가 호출될 때 함수로 값을 전달해주는 값 (메서드 호출 시 실제 값) function sum (num1, num2){ // 매개변수(parameter) console.log(num1+num2) } sum(1,5) // 인자(argument) 만약 함수 호출시에 함수를 정의할 때 보다 적은 인자를 입력할경우, 입력하지 않은 매개변수는 undefine..

반복문이란? 반복문은 반복적인 일을 수행해야할 때 사용한다 똑같은 코드를 10번 반복하는 것은 굉장히 비효율적임 때문에 반복적인 코드의 양을 획기적으로 압축하고 반복적인 일의 수행을 효율적으로 처리하도록 도와줌 for, while이 대표적이며 for in, for of, do-while이 존재함 반복문에서 사용할 수 있는 break와 continue도 알아보자 for문 for (let i = 0; i

조건문은 간단하게 말해 어떠한 조건이 성립되는 경우에 로직을 실행시키고, 성립이 되지 않는 경우 해당 로직을 건너뛰는 기능을 한다. 조건의 성립여부를 알기위해 우리는 비교연산자에 대해 알아야한다 비교연산자 : 자바스크립트의 데이터를 서로 비교해 boolean 값으로 반환해준다 - 비교연산자에는 느슨한 비교연산자, 엄격한 비교연산자가 존재. 실무에서는 엄격한 비교연산자만을 사용한다 느슨한 비교연산자 1 == '1' // true 0 == '0' // true 0 == [] // true '0' = [] // false - 데이터 값은 비교하지만, 타입은 비교하지 않음. - 문자열 0과 숫자 0은 엄격히 구분되어야 하기에 느슨한 비교연산자의 사용을 지양하여야 한다 엄격한 비교연산자 1 === '1' //fa..

D-day카운터를 만들면서 함수의 개념도 같이 이해해보도록 하자 함수 : 특정 기능을 수행하거나 계산을 수행하는 코드의 집합 (재사용): 호출을 통해 실행, 사용할 수 있다: 함수 내부의 로직은 함수 호출시 동작한다 문법 function 함수이름([매개변수1, 매개변수2]){ //여러개의 변수+연산자+형변환+조건문+반복문을 활용해 만들어진 특정 기능을 하는 구문(알고리즘) [return 값;] // 반환데이터 } 매개변수란? (parameter) : 외부 데이터를 함수 내부로 전달하는 매개체 역할을 하는 변수 - 함수가 호출되어 실행되기 시작하면 함수 내부는 외부에서 접근할 수 없게 된다 이때, 함수 외부에서 함수 내부로 값을 전달하는 방법 = 매개변수 이용! 함수에따라 매개변수가 없을수도 있고 1개이상..

배열(Array) - 순서가 있는 데이터를 저장할 때 사용 - 데이터 모음이 논리적으로 정의된 규칙에 의해 나열된 것 배열의 생성 - 대괄호([])를 이용해 배열을 생성 할 수 있다 - 각각의 데이터는 콤마(,)로 구분한다 - 각각의 데이터를 배열의 요소(element)라고 한다 - 모든 데이터는 배열의 요소로서 존재할 수 있다(문자열, 숫자, 배열....등) let age = [14,17,12,23,20] - 배열의 각 요소는 index* 값을 가진다 : index는 각 요소에 순서를 부여하고, 해당 요소에 접근이 가능하도록 한다 : 0번부터 시작한다 인덱스번호로 배열의 요소에 접근하는 방법 // 변수명[index번호] let age = [14,17,12,23,20] console.log(age[0])..

자바스크립트란? - 웹 페이지를 동적으로 동작할 수 있도록 만들어주는 프로그래밍 언어 ex) 어떤 사이트에 로그인하는 것, 이미지를 업로드 하는 것, 메뉴를 눌러 다른페이지로 이동하는것 등..... - 처음 웹 페이지를 조작하기 위해 탄생하였으나 현재 서버구축, 비디오 스트리밍, 게임 등 많은 분야에서 활용되고 있다. 변수란? - 데이터 보관함(원하는 데이터를 담을 수 있는 상자)과 같은 개념 - 나중에 다시 사용하기 위해 기억해야할 정보를 저장해야하는 공간 (쉽게 말하자면 변수명이라는 이름의 박스에 데이터를 넣는다) 변수 선언과 데이터 할당 변수 선언시에 변수명은 반드시 이름만으로도 어떠한 데이터가 담겨있는지 알 수 있도록 명시적이어야 한다. var aaa; // x var age; // o 프로그래밍..

Pseudo-class(가상 클래스) - 여러 상태에 따른 스타일을 지정해 줄 수 있다 문법 selector:pseudo-class { property: value; } 주로 btn, a, input 태그와 결합하여 사용한다 .btn {background: blue;} /* 기본 상태 */ .btn:hover {background: pink;} /* 마우스 호버시 */ .btn:focus {background: plum;} /* 클릭 후 계속 포커스 상태일 때 */ .btn:active {background: yellow;} /* 클릭 중일 때 */ 단 hover, focus, active를 동시에 스타일링 할 경우 해당 순서대로 작성하여야 정상작동 한다 입력 요소의 가상 클래스 (input) :auto..