[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] JS에서 배열 만들기(Array, Array.of, Array.from)

프론트엔드 직무에서는 JS로 코테를 보는 경우가 많아서,알고리즘을 기존에 풀던 파이썬으로 한 번 풀고, JS로 한번 풀려고 한다. 우선 파이썬에서 만약 0이 10001개로 이루어진 배열을 만들려면,arr = [0 for _ in range(10001)]arr = [[0] * 10001]이 두 방법을 사용하면 된다. 그럼 JS에서는 어떤식으로 배열을 만들 수 있을까? 📌 Array: 빈 배열 만들기우선 길이가 10001인 빈 배열을 만들고 싶다면,const arr = new Array(10001); Array 함수 안에 원하는 길이를 적어주면 된다. 이 때, arr는 크기만 있는 빈 배열이므로 출력하면 다음과 같다당연히 이 안에 값을 일일히 지정해 줄 수도 있다const arr = new Array(10..

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

[JS] 'this' keyword

'this' keyword 함수나 메서드를 호출한 객체를 가리키는 키워드 함수 내에서 객체의 속성 및 메서드에 접근하기 위해 사용 파이썬의 self (인스턴스 자기자신)와 비슷함 const user = { name: 'Yongbok', geeting: fun () { return `hello, ${this.name}` } } // 호출 console.log(user.greeting())// hello, Yonngbok 근데.. JavaScript에서 this는 함수를 호출하는 위치에 따라 가리키는 대상이 다름 → 호출될 때 결정됨(동적 할당) 단순 호출: 전역 객체 // 전역 객체 const myFun = function () { return this } console.log(myFun())// wind..

• format_list_bulleted FrontEnd/JavaScript
• · 2023. 10. 25.
• textsms

[JS] 참조 자료형, 함수

# 참조 자료형이란? 객체의 주소가 저장되는 자료형 가변적이며, 주소가 복사됨 (↔ 원시자료형) 함수의 구조 function name ([para1[, para2[....,]]]) { statements return value } 함수의 정의 방법은 선언식과 표현식이 있음 // 선언식 function add (num1, num2) { return num1 + num2 } // 표현식 const sub = function (num1, num2) { return num1 - num2 } // 둘다 사용할때는 똑같음 add(1, 2)// 3 sub(2, 1)// 1 둘이 뭐가 다른데,..? 표현식은 익명함수를 쓸 수 있음 선언식과 달리 표현식으로 정의한 함수는 호이스팅 되지 않으므로 함수를 정의하기 전에 먼저..

• format_list_bulleted FrontEnd/JavaScript
• · 2023. 10. 25.
• textsms

[JS] 데이터 타입

JavaScript의 데이터 타입은 크게 원시자료형과 참조 자료형으로 나뉜다 원시 자료형 변수에 값이 직접 저장되는 자료형 불변, 값이 복사 → 변수들끼리 서로 영향 없음 Number, String, Boolean, undefined, null 참조 자료형 객체의 주소가 저장됨 가변적, 주소가 복사 → 변수들끼리 서로 영향을 끼침 Objects(Object, Array, Function) const ob1 = { name: 'youngbok', age: 20} const ob2 = ob1 ob2.age = 25 console.log(ob1.age) // 25 console.log(ob2.age) // 25 # 원시 자료형 1. Number: 정수 또는 실수형 숫자 2. String: 텍스트 데이터를 표현..

• format_list_bulleted FrontEnd/JavaScript
• · 2023. 10. 24.
• textsms