Frontend/JavaScript30 [JS] 6강 Event 란? 1. Event Listener & Event 객체ex) 버튼을 클릭했을 때 어떠한 액션이 일어나게 하려면 어떻게 해야할까? 1) Event Listener마우스를 이용해서 버튼을 클릭할 때는 클릭 "이벤트"가 발생이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는데 -> 그 함수가 이벤트 리스너 2) addEventListener()어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 해당 객체나 요소에 등록해줘야 함 [등록 방법]JS 코드에서 프로퍼티로 등록HTML 태그에 속성으로 등록addEventListener 메소드를 사용: element.addEventListener(이벤트명, 실행할 함수명 (listener), 옵션);// 1번 프로퍼티 등록window.. 2025. 3. 26. [JS] 5강 createElement & removeChild & replaceChild 1. CreateElementdocument.createElement(tagName); : createElement 메서드에 태그 이름을 넣어서 요소를 생성함 index.html item 1 item 2 script.js// element 생성 const li = document.createElement('li');// 클래스 추가하기li.className = 'list-group-item';// id 추가하기li.id = 'new-item';// 속성 추가li.setAttribute('name','New list item');// 추가하기document.querySelector('ul.list-group').app.. 2025. 3. 25. [JS] 4강 DOM과 Document 탐색하기 1. HTML을 이용한 화면에 UI 표현하기: 브라우저에서 UI를 볼 수 있는 것은 이 HTML을 분석해서 보여줄 수 있습니다.: 이 HTML은 요소(Element)들로 구성되어 있습니다.2. 돔 이란 (Document Object Model): 돔 (문서 객체 모델)은 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML페이지를 인식하게 해줌: 위에서 보는 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저 트리구조로 만든 객체 모델을 의미3. 돔 조작: 위에 보이는 DOM트리를 DOM에서 제공해주는 API를 이용해서 조작할 수 있음: 이 API를 이용해서 DOM구조에 접근하거나 원하는 요소(Element)를 수정하거나 없애거나 할 수 있음 이렇게 DOM을 조작해.. 2025. 3. 24. [JS] 3강 Window object [window 객체]: 브라우저에 의해 자동으로 생성되며 웹 브라우저 창(window)을 나타냄: window는 브라우저의 객체이지 javascipt의 객체가 아님 이 window 객체를 이용해서1) 브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어하고 할 수도 있음2) 또한 var키워드로 변수를 선언하거나 함수를 선언하면 window 객체의 프로퍼티가 됨 let val;// outter height and widthval = window.outerHeight;val = window.outerWidth;// inner height and widthval = window.innerWidth;val = window.innerWidth;// Scroll pointsval = window.scrollY;.. 2025. 3. 23. [JS] 2강 자바스크립트 타입 [Data Type in Javascript] 1. 자바스크립트 타입- 원시 타입 : Boolean, String, Number, null, undefined, Symbol (불변성을 가지고 있음)- 참조 타입 : Object, Array 기본적으로 js는 원시타입에 대한 값을 저장하기 위해 Call Stak 메모리 공간을 사용하지만참조타입의 경우 Heap이라는 별도의 메모리 공간을 사용함이 경우 Call Stack은 개체 및 배열 값이 아닌 Heap 메모리 참조 ID를 값으로 저장함 원시 타입 -> 고정된 크기로 Call Stack 메모리에 저장, 실제 데이터가 변수에 할당참조 타입 -> 데이터 크기가 정해지지 않고 Call Stack 메모리에 저장, 데이터의 값이 heap에 저장되며 변수에 heap.. 2025. 3. 17. [JS] 1강 var, let, const [자바스크립트에서 변수 선언]var중복선언 O재할당 Olet중복선언 X재할당 Oconst중복선언 X재할당 X 1. var: 중복 선언과 재할당이 가능하여 마지막 할당된 값이 변수에 저장됨- 자율성이 있음- but, 소스코드가 복잡해질 경우 잊어버리고 재선언 하거나 재 할당하여 어떤 부분에서 값이 변경되는지 파악이 어려워짐var greeting = 'hello';console.log(greeting);var greeting = 'hi';console.log(greeting); 2. let: 중복 선언은 불가하고 재할당은 가능함let greeting = 'hello';console.log(greeting);let greeting = 'hi';console.log(greeting); let greeting .. 2025. 3. 14. 이전 1 2 3 4 5 다음
