1. map()이란?자바스크립트에서 map()은 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아서 새로운 배열을 만드는 메서드이다. 원본 배열은 변경되지 않는다.const newArray = oldArray.map(function(currentValue, index, array) { // return 변환할 값});currentValue 현재 처리 중인 요소index 현재 요소의 인덱스 (선택 사항)array map이 호출된 원래 배열 (선택 사항) 또는 화살표 함수로 아래와 같이 쓸 수 있다.const newArray = oldArray.map((item, index) => { return item * 2;}); 2. 기본 예제 2.1 배열의 각 숫자에 2를 곱하기const num..
1. 스코프란?`스코프(scope)`란 변수에 접근할 수 있는 위치를 제어한다.`전역 스코프(global scope)`를 가지는 변수는 코드의 어느 곳에서나 접근할 수 있다.`블록 스코프(block scope)`를 가지는 변수는 변수가 선언된 블럭 내부에서만 접근 가능하다.여기서 `블록(block)`은 함수, 루프, 혹은 중괄호({})로 구분되는 모든 영역을 뜻한다. 1-1. varvar myInt = 1;if (myInt === 1) { var mySecondInt = 2; console.log(mySecondInt); // 2}console.log(mySecondInt);// 2var 키워드로 선언된 변수 myInt 는 블럭 스코프를 가지지 않기 때문에 블록 외부에서도 그 값에 접근할..
내가 보려고 만든 이벤트 핸들러 🐦목표이벤트, 이벤트 핸들러, 이벤트 버스 및 addEventListener에 대해 알아보자.그리고 jQuery와 Vanilla JavaScript에서 이벤트를 다루는 법에 대해 알아보자. 다시 한 번 말하지만 jQuery는 한때 웹 개발에서 필수적인 라이브러리였지만, 이제는 Vanilla JavaScript(순수 JS)나 React, Vue, Svelte 같은 프레임워크가 대체하면서 사용이 줄어들고 있다. 그래서 addEventListener 위주로만 정리했고 순수하게 이벤트 종류만 궁금한 사람은 6번부터 읽으면 된다. 1. 자바스크립트 이벤트 (JavaScript Event)이벤트(Event)는 사용자나 시스템이 웹 페이지에서 일으키는 동작이다.예를 들어, 버튼 클..
탐색선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있다. 대표적인 예로 배열의 인덱스를 사용해서 선택하는 `위치탐색 선택자`와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 `속성 탐색 선택자`가 있다. 1. 위치 탐색 선택자 ▼기본 선택자로 선택한 요소는 배열에 담기게 된다.그래서 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있게 되는 것이다. 종류용법설명$("요소 선택:first")$("요소 선택").first()$("li:first")$("li").first()전체 요소 중 첫번째 요소만 선택$("요소 선택:last")$("요소 선택").last()$("li:last")$("li").last()전체 요소 ..
함께 보면 좋은 관련 포스팅 ▼ [JavaScript] jQuery를 사용할 때 유의해야 할 사항들⭐ 문서가 로드된 후 실행하자⭐ jQuery 라이브러리 먼저 로드하자⭐ $ 충돌 방지 필요 시 noConflict ⭐ 이벤트 중복 방지 off()⭐ AJAX 캐싱 방지 (cache: false) ⭐ 동적 요소에 이벤트 적용 on()⭐ 성능 최awesomepossum.tistory.com [JavaScript] Object(객체), DOM(문서객체모델), function() 함수 기초 실습1. Object (객체) 2. DOM (Document Object Model)2-1. DOM(문서객체모델) 문서객체모델(DOM) HTML CSS JS 2-2. innerHTML vs textContent 오늘은 문서객..
⭐ 문서가 로드된 후 실행하자⭐ jQuery 라이브러리 먼저 로드하자⭐ $ 충돌 방지 필요 시 noConflict ⭐ 이벤트 중복 방지 off()⭐ AJAX 캐싱 방지 (cache: false) ⭐ 동적 요소에 이벤트 적용 on()⭐ 성능 최적화 (map(), .append() 최소화) 1. 문서가 완전히 로드된 후 실행하기선택자를 사용하기 위해서는 문서 객체를 먼저 불러와야 한다. 그래서 HTML이 로드되기 전에 jQuery 코드가 실행되면 요소를 찾을 수 없는 문제가 발생한다.📌 해결책: $(document).ready() 사용 또는 변경될 텍스트 ⭕ [방법 2] $(document).ready() 사용 변경될 텍스트$(document).ready()를 사용하면 문서가 완전히 ..
1. Object (객체) 2. DOM (Document Object Model)2-1. DOM(문서객체모델) 문서객체모델(DOM) HTML CSS JS 2-2. innerHTML vs textContent 오늘은 문서객체모델에 대해서 배워보았다 2-3. querySelector vs getElementByID요즘에는 어차피 다 라이브러리 쓰지만 DOM 활용해보기 h1태그 내용 변경 a 태그 생성 ul태그 생성 2-4. addEventListener 난버튼이지롱 2-5. 예제1_counting 0 증가 감소 2-6. 예제2_반복문 출력..
