JS7 [JavaScript] 자바스크립트 this 키워드 (메소드, 함수, 생성자함수, 화살표함수, Lexical this) 시험기간이 겹쳐서 이제야 올리는 블로그 포스팅자주 사용하지만 잘 모르는 this에 대해 공부하였다.this라는 키워드는 여러 상황에서 다른 것들을 참조한다.메소드에서는 객체를 가리키고함수에서는 window 객체를 가리킴생성자 함수에서는 빈 객체를 가리킴1. 메소드에서 this 사용 ⇒ 해당 객체를 가리킨다 (참조한다): 메소드에서 this를 사용할 경우 해당 메서드를 호출한 객체를 참조한다. ✏️ 메소드 : 객체의 속성으로 추가된 함수// Method => Object// 객체 audioconst audio = { // 속성타이틀은 a라는 속성값을 가짐 title: 'a', // play는 객체 안에 있으니 메소드 play() { console.log('play this.. 2024. 12. 22. [JavaScript] 자바스크립트 (이벤트의 세 단계 흐름, Event Bubbling, Event Capturing, Event Delegation) Event Bubbling: 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달되는것을 말함. (bubble up)그림에서는 3번이 가장 깊게 중첩되었음.3번→ 2번 → 1번 순으로 진행됨.3번요소, 2번 요소, 1번 요소에 그 이벤트에 대한 핸들러가 있다면3번→ 2번 → 1번 순으로 진행됨. div -> form 순으로 alert 뜸 --> FORM DIV P 이벤트 버블링 중단: event.stopPropagation()FORM DIV P Event Capturing: 이벤트 버블링과 다르게 제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것이걸 이해하려면 실제로 이벤트가 어.. 2024. 12. 4. [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. [합주시간표 프로젝트] 01# 기획과 구상, 시간표 만들기 01. 문제상황밴드 동아리에서 사용할 합주 시간표 마법사가 필요했다. 밴드 동아리 특성 상 합주를 해야하는 일이 많은데 기타2, 베이스1, 드럼1, 키보드1, 보컬1 총 6명이 공통으로 비어있는 시간을 맞추기란 쉽지가 않았다. 그래서 파이썬을 잘 다루는 동아리 부원중 한명이 파이썬 라이브러리로 히트맵을 만들어시각화해서 보여주는 합주 시간표 마법사를 만들었으나,일일이 데이터를 입력하여 캡쳐해서 단톡에 보내주는것이 꽤 불편해 보였다.. 그래서 그냥 필요한 사람들의 이름만 입력하면 자동으로 합주 가능한 시간을 보여주는웹사이트를 만들어 배포하면 친구의 수고로움도 덜고,다른 부원들도 직접 들어가서 확인할 수 있으니 좀 더 편리할것이라는 생각이 들었다. 그래서 경험도 쌓아 볼 겸 개인 프로젝트를 진행하기로 하였다... 2024. 9. 11. 이전 1 2 다음
