[JS] 이벤트

40.1 이벤트 드리븐 프로그래밍클릭, 키보드 입력, 마우스 이동 등의 일이 일어나면 → 감지 → 특정한 타입의 이벤트 발생이 때, 이벤트가 발생하면 호출할 함수를 이벤트 핸들러라고 함!그리고 이벤트가 언제 발생할지 몰라서 개발자가 명시적으로 함수를 호출하지 못함 → 브라우저한테 ‘너가 처리해’(= 함수 호출 위임)라 하는 게 이벤트 핸들러 등록이런식으로 이벤트를 중심으로 제어하는 프로그래밍 방식 == 이벤트 드리븐 프로그래밍 40.2 이벤트 타입= 이벤트의 종류를 나타내는 문자열 (예를 들어, click, mouseenter….)약 200개 정도가 있고 머가 있는지는 너무 많아서 책 참고하셔서 그때 그때 보시면 될듯요마우스 이벤트(click, mouseup, mousedown, mouseleave…등등..

• format_list_bulleted FrontEnd/JavaScript
• · 2025. 2. 4.
• textsms

[JS] Set과 Map

📌Set= 중복되지 않는 유일한 값들의 집합중복이 안됨순서에 의미가 없음인덱스로 요소 접근 불가능 Set 객체 생성 = Set 생성자 사용// 빈객체 const set = new Set()console.log(set) // Set(0) {size: 0}// 이터러블을 인수로 받음const set1 = new Set([1, 2, 3, 4])console.log(set1) // Set(3) {1, 2, 3}const set2 = new Set('hello')console.log(set2) // Set(4) {'h', 'e', 'l', 'o'} 중복된 l은 한개만 들어감 중복된 요소가 인수로 들어가면 한개만 들어감 -> 이를 이용해서 배열에서 중복된 요소를 제거할 수 있다.const uniq = ar..

• format_list_bulleted FrontEnd/JavaScript
• · 2024. 12. 22.
• textsms

[JS] 정규표현식

🔎 정규 표현식이란?문자열을 대상으로 패턴 매칭 기능을 제공 = 특정 패턴과 일치하는 문자열을 검색 or 추출 or 치환하는 기능const tel = 010-1234-5678;const regExp = /^\d{3}-\d{4}-\d{4}/;// tel이 조건에 맞는지 테스트regExp.test(tel); // true  🔨사용하는 방법1. 정규표현식 리터럴→ 패턴과 플래그로 구성const target1 = 'Is this all there is?';const target2 = 'Is this all?';// 패턴: is// 플래그: i => 대소문자를 구별하지 않고 검색const regexp = /is/i;regexp.test(target1); // trueregexp.test(target2); /..

• format_list_bulleted FrontEnd/JavaScript
• · 2024. 12. 21.
• textsms

[Javascript] 프로토타입(2) 프로토타입 객체

🎯 __proto__ 접근자 프로퍼티브라우저 콘솔창에 객체를 생성하고 찍어보면 내가 입력한 프로퍼티 외에도 [[Prototype]]: Object라는 항목이 같이 뜬다.이때 얘를 펼쳐보면 뭔가 잔뜩 나오는데, 이게 프로토타입이다.  __proto__는 접근자 프로퍼티여기서 [[Prototype]]에 있는 프로토타입에 접근하기 위해 사용되는 것이 __proto__ 접근자 프로퍼티이다.접근자 프로퍼티는 자체적인 값을 가지고 있는게 아니라, get / set와 같은 함수를 호출하여 사용된다.const obj = {}const parent = {x: 1}obj.__proto__ // 여기서는 get __object__를 호출하고obj.__proto__ = parent // 여기서는 set __objec..

• format_list_bulleted FrontEnd/JavaScript
• · 2024. 11. 10.
• textsms

[Javascript] 프로토타입(1) 객체지향 프로그래밍과 상속

들어가기에 앞서,객체지향 프로그래밍이 뭔지를 먼저 알아보자. 🧱객체지향 프로그래밍프로그램을 여러 개의 독립적 단위(= 객체)의 집합으로 표현하려는 프로그래밍 페러다임 객체는 각자 속성을 가지고 있고, 이를 통해 인식이나 구별을 할 수 있다.예를 들어, 사람은 이름, 성별, 나이, 성격 등의 다양한 속성을 가지고 있다. 이러한 속성을 구체적으로 '이름은 김자바고 나이는 20살이고 성별은 여자인 사람' 이라고 하면 특정한 사람을 구별해서 인식할 수 있다. 이런식의 방식을 프로그래밍에 접목시키면 다양한 속성들 중에서 프로그램에 필요한 속성만을 간추려 내는 것을 추상화라고 한다. const person = { name: 'Kim', address: 'Seoul'}이런식으로 속성을 통해 여러 개의 값을 하나..

• format_list_bulleted FrontEnd/JavaScript
• · 2024. 11. 9.
• textsms

[Javascript] 일급 객체, 함수의 프로퍼티

📦일급 객체란? 1. 무명의 리터럴로 생성할 수 있다 = 런타임에 생성이 가능하다.2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.3. 함수의 매개변수에 전달할 수 있다.4. 함수의 반환값으로 사용할 수 있다. 여기서 1번 조건의 말이 어려운데 런타임에 생성된다는 건정적으로 코드에 작성된 함수가 아니라, 프로그램이 실행되는 동안 필요할 때 새로운 함수를 만들어 낼 수 있다는 것.// 사용자 입력을 받아서 그에 맞는 인사 함수를 생성하는 경우function createGreeting(name) { // 여기 함수가 런타임에 생성되는 부분 return function() { console.log(`안녕하세요, ${name}님!`); };}// 프로그램 실행 중에 사용자..

• format_list_bulleted FrontEnd/JavaScript
• · 2024. 10. 27.
• textsms