Purple Bobblehead Bunny

Frontend/JAVASCRIPT 5

[JAVASCRIPT] Map

Map Map은 키-값 쌍을 저장하며, 각 쌍의 삽입 순서도 기억하는 컬렉션이다. 배열일 순회하며 실행되는 콜백함수의 결과값들을 새로운 배열로 반환한다. Java의 HashMap과 같은 자료구조이다. key : value의 형식으로 저장되며, key 값을 사용하여 해당 key에 맞는 value 값을 가져온다. Map.* Map.length 값이 0인 속성 Map.size Map의 키-값 개수 Map.clear() Map 초기화 Map.entries() Map의 모든 키와 값을 [key, value] 형태의 array로 만들어서 반환 Map.forEach() Map 모든 키와 값에 대해서 콜백 함수 사용 Map.get(key) key값에 맞는 value값 반환 Map.delete(key) key-value..

Frontend/JAVASCRIPT 2022.06.20

[JAVASCRIPT] Event

Event Handle Event : 사용자가 하는 행동 (ex. 마우스 이동, 클릭 키보드 입력..) Event Handle : 이벤트 발생 시, 원하는 동작을 할 수 있도록 선언 하는 것. Event Handler : 이벤트 발생 시, 실행 할 문장을 작성한 부분 자바 스크립트에서 이벤트 핸들러를 등록하는 방법 1. HTML 요소의 속성으로 등록 HTML의 input 이벤트 요소의 속성에는 여러가지가 있다. onclick 마우스 클릭 ondbclick 마우스 더블 클릭 onmousemove 마우스 포인터가 HTML 요소 위에서 움직일 때 onmouseout 마우스 포인터가 HTML 요소를 벗어날 때 onmouseover 마우스 퐁니터가 HTML 요소 위에 있을 때 onkeypress 키보드의 키를 누..

Frontend/JAVASCRIPT 2022.06.19

[JAVASCRIPT] Hoisting, 호이스팅

호이스팅 Hoisting Hoist는 밧줄이나 장비를 이용하여 끌어올리는다. 라는 뜻을 가진다. 어원 그대로 변수나 함수가 선언이 되면, 선언 된 위치와 상관없이 코드 최상단으로 끌어올리는 것을 말한다. 자바스크립트의 모든 선언에서 호이스팅이 일어난다. var는 선언과 함께 undefined로 초기화되어 저장되지만, let과 const는 초기화 되지 않은 상태로 올라가기 때문에 에러가 발생한다. addString("ABC","DEFG"); function addString(str1, str2){ return str1 + str2; } // 출력 값 : ABCDEFG 선언 되어 있지 않은 값을 참조할 때 addStirng 실행 하는 과정에 addString 함수가 선언되어 있지 않아서 오류가 발생해야 하지..

Frontend/JAVASCRIPT 2022.06.13

[JAVASCRIPT] 변수 선언, let, var, const

변수 변수(variable)는 값을 저장하기 위해 확보한 그 공간을 식별하기 위해 사용되는 이름 변수 생성 과정 1. 선언 단계 (Declaration) 변수를 변수 객체에 등록 변수 객체는 스코프가 참조하는 대상이 된다. 2. 초기화 단계 (Initialization) 변수 객체에 들어간 변수를 위한 공간을 메모리에 확보 초기화 단계에서 변수는 undefined로 초기화 된다. 3. 할당 단계(Assignment) undefined로 초기화된 변수에 실제 값을 할당 var 키워드로 선언한 변수는 선언 단계, 초기화 단계가 동시에 이루어진다. let 키워드로 선언된 변수는 선언 단계, 초기화 단계가 분리되어 실행 let,const의 경우에 초기화는 실행 후, 변수 선언문에 도달했을 때 이루어진다. -> ..

Frontend/JAVASCRIPT 2022.06.13

[JAVASCRIPT] 자바스크립트 기본 문법

JavaScript 객체기반의 스크립트언어이다. 정적인 HTML 콘텐츠를 프로그램 구현을 통해 동적으로 변경하거나 사용자와의 상호작용을 담당한다. HTML이나 CSS와 달리 자바스크립트는 C언어, 자바와 같은 일반 프로그램언어와 비슷한 구조를 가지고 있다. 동적이며 타입을 명시할 필요가 없는 인터프리터 언어 객체지향 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다. HTML의 내용, 속성, 스타일을 변경 할 수 있다. 이벤트를 처리하고 사용자와의 상호작용을 가능하게 한다. AJAX 기술을 이용해 서버와 실시간 통신 기능을 제공 Alert, Conform alert 알람창 띄우기 // 기본형 기존내용 change // id값 d1 요소를 찾아 Hello 출력을 한다 innerText 태그 안의 텍스트..

Frontend/JAVASCRIPT 2022.06.11