๐Ÿ”– Snippets

๐Ÿ”– Snippets/Javascript

JS์—์„œ ๊ฐ์ฒด์— function์„ ์„ ์–ธํ•ด์•ผ ํ•˜๋Š” ์ด์œ (feat. ์ „์—ญ ๋ณ€์ˆ˜ ์ถฉ๋Œ)

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 ์ด๋ฒคํŠธ ์ถ”๊ฐ€ & ์ค‘๋ณต ์ด๋ฒคํŠธ ๋ฐœ์ƒ ๋ฐฉ์ง€

์•ˆ๋…•ํ•˜์„ธ์š”, ์ด๋ฒˆ์—๋Š” 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

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..

iseunghan
'๐Ÿ”– Snippets' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๊ธ€ ๋ชฉ๋ก