목록JS (10)
쯔이's Dev
* jQuery란?JavaScript 기반 라이브러리로 복잡한 JavaScript 구문을 간소화해준다.주요 장점DOM 조작: HTML 요소를 쉽게 선택, 수정, 추가, 삭제 가능.AJAX 지원: 서버와 비동기 통신을 간단하게 구현.확장 플러그인 제공: 슬라이드, 차트, 캘린더 등 다양한 기능 제공.코드 간결화: 복잡한 JavaScript 코드도 몇 줄로 간소화* jQuery 라이브러리 연결 방법:오프라인 방식: jQuery 파일을 다운로드하여 로컬에서 경로를 지정.CDN 방식: CDN URL을 통해 외부에서 jQuery 라이브러리를 불러옴.CDN 방식에서는 보안을 강화하기 위해 `integrity`와 `crossorigin` 속성을 함께 사용하는 것이 권장된다. 이는 CDN 서버에서 제공되는 파일이 손상..
1. 현재 이벤트가 발생한 요소객체에 접근하는 방법기본이벤트방식 표준이벤트방식 인라인이벤트방식 2. 태그별로 기본적으로 가지고 있는 이벤트제거기본적으로 이벤트가 있는 요소a 태그 : 클릭시 href에 제시되어 있는 url로 요청하는 기본이벤트 보유form 내의 submit버튼 : 클릭 시 사용자가 입력한 값들을 action에 제시되어 있는 url로 제출태그 내에 기본적으로 설정되어 있는 이벤트가 실행안되게끔 막고 싶다? => 이벤트 핸들러의 return값을 false로 하면 기본이벤트 실행안됨네이버로 아이디 :
HTML 요소에서 발생하는 특정 이벤트(동작)에 반응하여 실행되는 함수를 의미.예를 들어, 사용자가 버튼을 클릭하거나, 텍스트를 입력하거나, 체크박스를 선택하는 등 "사용자의 동작"을 처리하는 데 사용된다.즉, 이벤트 핸들러는 사용자 동작에 반응하는 함수다. 1. onclickonclick은 요소가 클릭되었을 때 발생하는 이벤트를 의미한다.버튼, 링크, 체크박스 등 클릭 가능한 요소에 주로 사용된다.클릭버튼을 클릭하면 onclick 이벤트 핸들러가 실행되어 "클릭되었습니다!"라는 알림이 뜬다.2. onchangeonchange는 요소의 값이 변경되었을 때 발생하는 이벤트를 의미한다.주로 (텍스트, 숫자, 체크박스 등), (드롭다운)와 같은 입력 요소에서 사용된다.사용자가 값을 입력한 후 포커스가 다른 곳..
이벤트 모델 종류1. 고전 이벤트 모델(기본 이벤트 모델)특정 요소객체를 가지고 와서 해당요소의 이벤트 속성에 접근한 후 이벤트 핸들러를 연결하는 방식이벤트를 제거할 수도 있음실행확인 실행확인 위와 같은 코드const area1 = document.getElementById('area1');const btn1 = document.getElementById('btn1');const btn2 = document.getElementById('btn2'); // btn2를 선언btn1.onclick = function() { area1.innerHTML += "btn1이 클릭되었습니다 ";};btn2.onclick = function() { // btn2를 변수로 참조하여 이벤트 핸들러 ..
1. document.querySelector()사용법:CSS 선택자를 사용해서 하나의 요소를 선택.조건에 맞는 첫 번째 요소를 반환.언제 사용? CSS 선택자를 쓸 수 있는 유연한 선택이 필요할 때.ID, 클래스, 태그 등을 하나의 메서드로 통합적으로 선택하고 싶을 때. // ID 선택const el1 = document.querySelector("#myId"); // // 클래스 선택const el2 = document.querySelector(".myClass"); // // 태그 선택const el3 = document.querySelector("p"); // 첫 번째 태그2. document.querySelectorAll()사용법:CSS 선택자를 사용해서 여러 요소를 선택.조건에 맞는 모든 요..
클로저는 함수가 자신이 생성될 때의 스코프를 기억하고, 그 스코프에 접근할 수 있는 함수를 말한다.쉽게 말해, 함수가 만들어질 때 자기 주변 환경(스코프)을 기억하고, 그걸 나중에도 계속 사용할 수 있는 함수다.예를 들어, 함수 안에 또 다른 함수가 있을 때, 바깥 함수의 변수를 내부 함수에서 계속 쓸 수 있다.신기한 건, 바깥 함수가 실행을 다 끝냈는데도 내부 함수가 그 변수를 기억하고 있다는 것이다 .클로저는 렉시컬 환경을 활용해 함수가 선언될 당시의 스코프를 기억합니다. 렉시컬 환경(Lexical Environment)이란?JavaScript에서 변수와 함수의 스코프를 관리하고, 실행 중에 변수에 접근하거나 값을 변경할 수 있도록 돕는 내부적인 구조를 말한다.이는 JavaScript의 실행 컨텍스트..