본문 바로가기

JS16

[JavaScript] 자바스크립트(Event Listenr & Event 객체, Event 종류 모음) DOM Event“어떠한 버튼을 클릭했을 때 어떠한 액션이 일어나게 하려면 어떻게 해야 할까요?”Event Listener마우스를 이용해서 버튼을 클릭할 때는 클릭 “이벤트"가 발생한다.⇒ 이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수(= 이벤트 리스너)를 호출한다.addEventListener()어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 해당 객체나 요소에 등록해주어야한다. 1. Property Listener자바스크립트 코드에서 프로퍼티(객체의 속성)로 등록 (=onload 같은 속성에 함수(핸들러)를 할당하는 방식)⇒ 이벤트 핸들러를 DOM 객체의 프로퍼티에 할당하는 방식= 즉, 이벤트를 특정 객체에 속성으로 등록하는 것window.onload = func.. 2024. 12. 3.
[JavaScript] 프로퍼티(Property) 프로퍼티(Property)란 객체의 속성을 의미한다.📌 어떤 객체가 가지고 있는 항목들을 프로퍼티라고 하며, 한국어로는 속성이라고 한다. 프로퍼티는 객체의 상태나 특성을 나타내며, 이를 통해 객체의 정보를 읽거나 수정할 수 있다.자바스크립트에서 객체는 프로퍼티로 구성된다.객체는 키-값 쌍으로 데이터를 저장하는데, 이 키를 프로퍼티 이름, 값을 프로퍼티 값이라고한다.자바스크립트에서 프로퍼티자바스크립트의 객체에서 프로퍼티는 속성을 뜻하며, 보통 객체가 가지고 있는 정보나 기능을 나타낸다.let hamster = { name: "metdol", // 'name'은 프로퍼티 이름, "metdol"이는 프로퍼티 값 age: 2 // 'age'는 프로퍼티 이름, 2는 프로퍼티 값};//.. 2024. 12. 3.
[JavaScript] 자바스크립트 (DOM 이란) 졸업프로젝트가 끝났으니 다시 블로그 업뎃! 시작한다. 밀린 JS 강의 들으며 쫓아가는중..DOM 이란HTML을 이용한 화면에 UI 표현하기브라우저에서 UI를 볼 수 있는 것은 ⇒ HTML을 분석해서 보여주는 것이기 때문이다.이 HTML은 요소(Element)들로 구성되어 있다.돔 이란? (Document Object Model): 돔(문서 객체 모델)은 메모리에 웹 페이지 문서 구조를 트리 구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해준다.또한, 위에서 보는 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.돔으로 만든 다음에 이걸 html로 분석하여 보여주는것이다.돔 조작DOM 트리를 DOM 에서 제공해주는 API를 이용하여 조작.. 2024. 12. 3.
[React] 이중리스트 이차원리스트 이차원 배열 병합, 정렬, 중복 제거 하기 현재 진행하는 개인 프로젝트에서 이차원 리스트를 합쳐야했다. 그런데 그냥 합치는게 아니라 각각의 행들끼리 합치고싶었다.합쳐도 그대로 이차원 리스트가 나오도록!✏️병합 : concat()두 개 이상의 배열을 병합할 때 사용한다.기존의 배열을 변경하지 않고, 새로운 배열을 return한다. ✔️사용법const array1 = ['a', 'b', 'c'];const array2 = ['d', 'e', 'f'];const array3 = array1.concat(array2); => 결과로 Array ["a", "b", "c", "d", "e", "f"] 가 도출된다.✏️행끼리 병합 : map() 사용하기이럴때 map을 사용해야한다. let newlist = list3.map((arr, index) => a.. 2024. 9. 11.

티스토리툴바