'🔖 Snippets' 카테고리의 글 목록

JS에서 객체에 function을 선언해야 하는 이유(feat. 전역 변수 충돌)

2022.06.24

JS에서 스코프 관리 아래의 A.js 코드가 있습니다. A.js function sayHello() { console.log("hello"); } .. Hello 콘솔에 출력하는 sayHello라는 함수가 있습니다. 근데 만약 아래의 B.js 라는 파일이 추가가 되면 어떻게 될까요? B.js function sayHello() { console.log("bye"); } HTML 스크립트에 이렇게 선언이 되어있다면? ... 만약 이런식으로 불러오게 된다면, sayHello()는 어떤 값을 출력하게 될까요? 브라우저의 스코프는 공용 공간으로 쓰이기 때문에 마지막에 로딩된 B.js에 있는 sayHello 함수가 A.js의 sayHello 함수를 덮어쓰게 됩니다. 그래서 결국엔 "bye"가 출력이 되는 것이죠...

🔖 Snippets/Javascript

[javaScript] keydown 이벤트 추가 & 중복 이벤트 발생 방지

2021.05.13

안녕하세요, 이번에는 javaScript에서 input 태그에 enter 키가 눌렸을 때 처리할 keydown 이벤트를 추가하는 방법과, 중복 이벤트 발생을 방지하는 방법에 대해서 알아보겠습니다. html 코드 : js 코드 : $(function() { // .... 생략 var keydown = false; // 중복 발생 방지하기 위한 변수 const $input = document.getElementById('input-title');// id값으로 htmlElement 찾기 // 해당 element에 addEventListener 추가 $input.addEventListener('keydown', function (e) { if (keydown) return;// keydown을 했다면 종료. ..

🔖 Snippets/Javascript

[javaScript] Drag & Drop

2021.04.07

Drag and Drop API에 대해서 정리 해보겠습니다. 제가 공부하고 정리한 내용이기 때문에 다소 장황하고, 틀린 부분이 있을 수 있습니다 :D Drag and Drop API 두 번째 포켓과 위치를 옮길 때, 드래그 중에 해당 영역에 ondragover가 실행이 될 때, 시각적으로 표현을 시키는 것입니다. 코드는 아래와 같이 작성할 수 있습니다. function ondragover_handler(e) { e.preventDefault();// drop 방지 처리 if (e.target.className === 'pocket-item') { const parent = document.getElementById(e.target.id); const child = document.getElementByI..

JS에서 객체에 function을 선언해야 하는 이유(feat. 전역 변수 충돌)

[javaScript] keydown 이벤트 추가 & 중복 이벤트 발생 방지

[javaScript] Drag & Drop

티스토리툴바