HTML 전체선택 고양이 토끼 삭제 JAVASCRIPT /*체크 박스 전체 선택*/ function fnCheckAll() { //체크박스 리스트 const checkField = document.listForm.checkField; //전체선택 체크박스 true false const checkAll = document.listForm.checkAll.checked; if (checkField) { // checkField가 NodeList인 경우 (여러 개의 체크박스가 있는 경우) if (checkField instanceof NodeList) { // NodeList인 경우 배열로 변환하여 forEach 메서드 사용 // NodeList는 배열과 유사하지만 배열 메서드를 사용 할 수 없기 때문에 Ar..
jQuery와 JavaScript 차이점 JavaScript는 웹브라우저에서 작동하는 스크립트입니다. 기능을 포함하는 거의 모든 홈페이지들이 사용하고 있습니다. jQuery 또한 역시 자바스크립트 입니다. 다만 JavaScript로 빈번하게 사용되는 기능들을 조금 더 함축적인 코드를 통해 사용하게 만든 라이브러리 입니다 자바스크립트는 아래와 같이 크게 4가지 요소로 구성되어있습니다. 자바스크립트 core 문법 자바스크립트 core 라이브러리 자바스크립트 BOM (Browser Object Model) 자바스크립트 DOM (Document Object Model) jQuery는 이중 자바스크립트 DOM 작업을 쉽게 처리할수있도록 도와주는 라이브러리입니다. 또한 jQuery는 DOM 작업을 쉽게 도와주는 라..
클릭이벤트 onclick과 Click Event 차이점 onclick과 addEventListenr는 덮어쓰기 vs 누적의 차이입니다. onclick 은 하나의 요소에 클릭 이벤트를 걸어줄 때마다 기존에 등록되었던 클릭 이벤트가 덮어씌어집니다. addEventListenr 는 하나의 요소에 여러개의 핸들러를 등록할 수 있으며 HTML element 뿐만 아니라 모든 DOM element에 대해 동작합니다. 예시 click 1. onclick 이벤트 window.onload = function () { const btn = document.querySelector("button"); btn.onclick = () => { console.log("reulst1"); }; btn.onclick = () => ..
클릭이벤트 .click() .on("click") 차이점 .on("click")과 .click()의 가장 큰 차이점은 동적으로 이벤트를 바인딩 할 수 있는지의 차이입니다. .click()은 최초에 선언된 element에만 동작하기 때문에 동적으로 생성된 태그에는 먹히지 않습니다. .on("click")은 동적으로 생선된 태그에 클릭 가능하도록 이벤트 바인딩을 해줍니다. .on("click")는 미리 메모리를 할당하지 않기 때문에 .click() 보다 메모리 관리에 좋습니다. 이벤트 바인딩이란? 서로 묶어서 연결해 준다는 뜻으로, 발생하는 이벤트와 그 후에 어떤 일이 일어날지 알려주는 함수(콜백함수)와 묶어서 연결해 준다는 뜻입니다. 예시 cat dog bird 1. .click() 이벤트 li 태그 클릭..
require import 차이(CommonJs ES6) require와 import는 모듈 키워드로, 외부 파일이나 라이브러리를 불러올때 사용 합니다. require는 NodeJS에서 사용되는 CommonJS 키워드이고 import는 ES2015에서 새로 도입된 키워드 입니다. require const library = require("library") import import library from "library" ES6(ES2015) 모듈 시스템은 점점 더 널리 사용되고 있는 추세이지만 아직까지는 import 키워드가 100% 대체되어 사용 될 수 없습니다. script 태그를 사용하는 브라우저 환경과, NodeJS에서도 CommonJS를 기본 모듈 시스템으로 채택하고 있기 때문에, Babel과 ..
$(document).ready() 외부 리소스 및 이미지 로딩과 관계 없이 DOM(document object model)트리 생성 직후 실행됩니다. 중복으로 사용 가능하기때문에 순서대로 실행됩니다. DOM 생성 -> $(document).ready() -> 외부 리소스 및 이미지 로드 -> window.onload window.onload 모든 자원의 로딩이 모두 끝난 후에 실행됩니다. 페이지가 로드 되면 자동으로 실행되는 전역 콜백함수 입니다. 한 페이지에서 하나의 window.onload 함수만 적용되기 때문에 가장 나중에 호출된 window.onload함수만 실행됩니다. 와 같은 설정이 되어 있는 경우에는 attribute의 onload=”“만 작동할뿐 window.onload 는 동작하지 않습..
