My Tech Blog (자바스크립트)

내가 보려고 만든 이벤트 핸들러 🐦목표이벤트, 이벤트 핸들러, 이벤트 버스 및 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()전체 요소 ..

⭐ 문서가 로드된 후 실행하자⭐ 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_반복문 출력..

음악이 재생중일때만 곡 정보(제목, 프로그레스바)가 표시되는 뮤직 플레이어 다크모드에서 이뻐보이도록 노을 색상으로 배경을 넣어 주었다.음악 바뀔 때마다 하늘 색깔이 바뀌게 설정해 보니 이쁘다! 빌딩이랑 달은 무료 svg 사이트에서 가져와서 넣어주었습니다. CSS 로 크기와 위치 조절해서 원하는 곳에 추가하면 된다. 참고로 블로그에서 구글 애드센스나 광고로 수익 창출하시는 분들은 배경음악은 자제해 주세요상업적 목적으로 브금 쓰시면 노노노  [html 코드] ..

# 템플릿 리터럴(Template Literal)ES6부터 새로 도입된 문자열 표기법문자열 생성시 따옴표 대신, 백틱(`)을 사용var str_01 = `hello world`;//백틱 사용const x='x';const y='y';const z='z';console.log(`${x}는 x, ${y}는 y, ${z}는 z이다. `); //x는 x, y는 y, z는 z이다. ▶︎ 백틱(`)은 자바스크립트 JS ES6(ECMAScript 2015)부터 도입되었다.▶︎ 개행 문자(\n)를 사용하지 않아도 자동 줄바꿈 ▶︎ 생김새가 작은따움표(')와 비슷하니 헷갈리지 않도록 주의# 템플릿 리터럴 - 백틱(`)의 기능 줄바꿈(개행: Multi-line strings)  ▶︎ 백틱(`)으로 템플릿 리터럴을 사용하면..

// JSON 데이터 다루기 위한 JS 사용법// [1] : 데이터 const person = [ `{"name":"이순신","age":20,"nationality":"대한민국"}`, {"name":"맥아더","age":30,"nationality":"미국"}, {"name":"엘리자베스","age":40,"nationality":"영국"}, {"name":"잔다르크","age":50,"nationality":"프랑스"},]; console.log(typeof person); // objectconsole.log(typeof person[0]); // stringconsole.log(typeof person[1]); // object 첫번째 요소를 작은 따옴표로 감싸면 string ..

JSON과 XML은 데이터를 표현하고 전송하기 위해 사용하는 두 가지 형식이다.1. XMLXML은 데이터를 저장하고 전달할 목적으로 만들어졌으며, 저장되는 데이터의 구조를 기술하기 위한 언어이며 EXtensible Markup Language의 약자이다. - XML은 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어- XML은 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있도록 해준다.- XML은 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성이 좋다. - XML은 데이터를 보여주지 않고, 데이터를 전달하고 저장하는 것만을 목적으로 한다.- XML은 텍스트 데이터 형식의 언어로 모든 XML 문서는 유니코드 문자로만 이루어진다.XML 기반의 언어 XHTML, SVG,..