๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Lect & Tip/javascript, jQuery37

์—๋ผํ† ์Šคํ…Œ๋„ค์Šค์˜ ์ฒด JS ์†Œ์ˆ˜ ์ฐพ๊ธฐ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋งŒ๋“ค๊ธฐ ์—๋ผํ† ์Šคํ…Œ๋„ค์Šค์˜ ์ฒด: ์ˆ˜ํ•™๊ณผ ์ปดํ“จํ„ฐ ๊ณผํ•™์—์„œ์˜ ์ค‘์š”์„ฑ ์ˆ˜ํ•™๊ณผ ๊ณ ๋Œ€ ์—ญ์‚ฌ์—์„œ์˜ ์—๋ผํ† ์Šคํ…Œ๋„ค์Šค์˜ ์ฒด ์—๋ผํ† ์Šคํ…Œ๋„ค์Šค์˜ ์ฒด๋Š” ๊ณ ๋Œ€ ๊ทธ๋ฆฌ์Šค ์ˆ˜ํ•™์ž ์—๋ผํ† ์Šคํ…Œ๋„ค์Šค๊ฐ€ ๋ฐœ๊ฒฌํ•œ ์†Œ์ˆ˜๋ฅผ ์ฐพ๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ, ๊ฐ„๋‹จํ•˜๋ฉด์„œ๋„ ํšจ์œจ์ ์ธ ์•Œ๊ณ ๋ฆฌ์ฆ˜์œผ๋กœ ์•Œ๋ ค์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฐฉ๋ฒ•์€ ์ •ํ•ด์ง„ ๋ฒ”์œ„ ์•ˆ์˜ ๋ชจ๋“  ์†Œ์ˆ˜๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•ด, 2๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ๊ทธ ๋ฐฐ์ˆ˜๋ฅผ ์ง€์›Œ๋‚˜๊ฐ€๋Š” ๊ณผ์ •์„ ๋ฐ˜๋ณตํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, 2์˜ ๋ฐฐ์ˆ˜๋ฅผ ๋ชจ๋‘ ์ง€์šฐ๊ณ , ๋‹ค์Œ์œผ๋กœ ๋‚จ์€ ๊ฐ€์žฅ ์ž‘์€ ์ˆ˜์ธ 3์˜ ๋ฐฐ์ˆ˜๋ฅผ ์ง€์›๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ณผ์ •์„ ๋ฐ˜๋ณตํ•˜๋ฉด ๊ฒฐ๊ตญ ๋‚จ๋Š” ์ˆ˜๋“ค์ด ๋ฐ”๋กœ ์†Œ์ˆ˜๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. ์ด ์•Œ๊ณ ๋ฆฌ์ฆ˜์€ ๋‹จ์ˆœํ•จ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๋งค์šฐ ์ค‘์š”ํ•œ ์˜๋ฏธ๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค. ์†Œ์ˆ˜๋Š” ์ˆ˜ํ•™์˜ ๋‹ค์–‘ํ•œ ๋ถ„์•ผ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์•”ํ˜ธํ•™์—์„œ๋„ ๋งค์šฐ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ, ํšจ์œจ์ ์œผ๋กœ ์†Œ์ˆ˜๋ฅผ ์ฐพ๋Š” ๋ฐฉ๋ฒ•์€ ๊ณ ๋Œ€๋ถ€ํ„ฐ ํ˜„๋Œ€์— ์ด๋ฅด.. 2023. 11. 10.
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ”์ธ๋”ฉ: ํ™œ์šฉ๊ณผ ์ฃผ์˜์  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ”์ธ๋”ฉ: ํ™œ์šฉ๊ณผ ์ฃผ์˜์  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ฐ”์ธ๋”ฉ(binding)์ด๋ž€, ํŠน์ • ๊ฐ์ฒด์˜ ๋ฉ”์„œ๋“œ๋‚˜ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ์‚ฌ์šฉ๋˜๋Š” this์˜ ๊ฐ’์„ ๊ณ ์ •ํ•˜๋Š” ๊ฒƒ์„ ๋งํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” this๊ฐ€ ๊ฐ€๋ฆฌํ‚ค๋Š” ๊ฐ์ฒด๊ฐ€ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง€๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํŠน์„ฑ ๋•Œ๋ฌธ์— ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. this์˜ ๋™์ ์ธ ํŠน์„ฑ์€ ์œ ์šฉํ•  ๋•Œ๋„ ์žˆ์ง€๋งŒ, ์˜ˆ๊ธฐ์น˜ ์•Š์€ ๋ฌธ์ œ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๊ธฐ์— ๋ฐ”์ธ๋”ฉ์„ ํ†ตํ•ด ์•ˆ์ •์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ”์ธ๋”ฉ์˜ ํ•„์š”์„ฑ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ•จ์ˆ˜๋Š” ํ˜ธ์ถœ๋˜๋Š” ๋ฐฉ์‹์— ๋”ฐ๋ผ this ๊ฐ’์ด ๊ฒฐ์ •๋ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋ฉ”์„œ๋“œ๋กœ ํ˜ธ์ถœ๋  ๋•Œ๋Š” this๊ฐ€ ๊ทธ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค์ง€๋งŒ, ์ผ๋ฐ˜ ํ•จ์ˆ˜๋กœ ํ˜ธ์ถœ๋  ๋•Œ๋Š” this๊ฐ€ ์ „์—ญ ๊ฐ์ฒด(๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” window, Node.js์—์„œ๋Š” global)๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ฑฐ๋‚˜ un.. 2023. 11. 7.
Jquery ์Šค์™€์ดํผ ์Šฌ๋ผ์ด๋” ํ”Œ๋Ÿฌ๊ทธ์ธ idangerous.swiper.js pagination ์Šคํƒ€์ผ ๋ณ€๊ฒฝํ•˜๊ธฐ Jquery ์Šค์™€์ดํผ ์Šฌ๋ผ์ด๋” ํ”Œ๋Ÿฌ๊ทธ์ธ idangerous.swiper.js pagination ์Šคํƒ€์ผ ๋ณ€๊ฒฝํ•˜๊ธฐ ์„œ๋ก  ๋ชจ๋ฐ”์ผ ์›น ๊ฐœ๋ฐœ์—์„œ ์Šฌ๋ผ์ด๋“œ ๊ธฐ๋Šฅ์€ ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. idangerous.swiper.js ํ”Œ๋Ÿฌ๊ทธ์ธ์€ ๋ชจ๋ฐ”์ผ์—์„œ ํ„ฐ์น˜ ์ œ์Šค์ฒ˜๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์Šฌ๋ผ์ด๋“œ๋ฅผ ํŽธ๋ฆฌํ•˜๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ํ›Œ๋ฅญํ•œ ๋„๊ตฌ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด ํ”Œ๋Ÿฌ๊ทธ์ธ์˜ ํŽ˜์ด์ง• ๊ธฐ๋Šฅ์€ ์ˆซ์ž๋‚˜ ๋ถˆ๋ฆฟ ํ˜•ํƒœ๋กœ๋งŒ ์ œ๊ณต๋˜์–ด, ํ…์ŠคํŠธ ๋ฌธ์žฅ์œผ๋กœ ํŽ˜์ด์ง€๋„ค์ด์…˜์„ ํ‘œํ˜„ํ•˜๊ธฐ ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ์ด์— ๋Œ€์‘ํ•˜๊ธฐ ์œ„ํ•ด ํ…์ŠคํŠธ ๋ฌธ์žฅ์„ ํŽ˜์ด์ง• ์ฒ˜๋ฆฌํ•˜๋Š” ๊ผผ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ ค ํ–ˆ์œผ๋ฉฐ, ์ฒ˜์Œ์—๋Š” ๋Œ€๋žต 6~8๊ฐœ์˜ ํŽ˜์ด์ง€๋ฅผ ํ‘œ์‹œํ•˜๋„๋ก ์„ค์ •ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋””์ž์ด๋„ˆ์˜ ์š”์ฒญ์œผ๋กœ 10๊ฐœ์˜ ํŽ˜์ด์ง€๊ฐ€ ๋“ฑ๋ก๋˜์—ˆ์„ ๋•Œ ์ดˆ๋ฐ˜ 6๊ฐœ๋งŒ ๋ณด์ด๊ณ , ๋‚˜๋จธ์ง€๋Š” ๋‹ค์Œ ํŽ˜์ด์ง€์—์„œ ๋ณด์ด๋„๋ก ์ฒ˜๋ฆฌํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌ.. 2023. 9. 7.
jquery .sort() ํ•จ์ˆ˜๋ฅผ ํ™œ์šฉํ•œ ์š”์†Œ ์ด๋™๊ณผ ์ •๋ ฌ jquery .sort() ํ•จ์ˆ˜๋ฅผ ํ™œ์šฉํ•œ ์š”์†Œ ์ด๋™๊ณผ ์ •๋ ฌ ์†Œ๊ฐœ ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” jQuery์˜ .sort() ํ•จ์ˆ˜๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์š”์†Œ๋ฅผ ์ด๋™ํ•˜๋ฉด์„œ ์ •๋ ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ, ๋ถ€์„œ๋‚˜ ํŠธ๋ฆฌ ๊ตฌ์กฐ์˜ ๋ชฉ๋ก์—์„œ ํŠน์ • ์š”์†Œ๋ฅผ ์„ ํƒํ•˜์—ฌ ๋‹ค๋ฅธ ๋ชฉ๋ก์œผ๋กœ ์ด๋™ํ•œ ํ›„, ํ•ด๋‹น ๋ชฉ๋ก์„ ์ •๋ ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๋‹ค๋ฃฐ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ƒํ™ฉ ์„ค์ • ๊ฐ€์ •ํ•ด๋ด…์‹œ๋‹ค. ์—ฌ๋Ÿฌ ๋ถ€์„œ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋ชฉ๋ก์ด ์žˆ๊ณ , ์šฐ๋ฆฌ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์„ ํƒํ•œ ๋ถ€์„œ๋ฅผ ๋‹ค๋ฅธ ๋ชฉ๋ก์œผ๋กœ ์ด๋™์‹œํ‚จ ํ›„, ๊ทธ ๋ชฉ๋ก์„ ์ˆœ์„œ๋Œ€๋กœ ์ •๋ ฌํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, '๋””์ง€ํ„ธ ๋ฏธ๋””์–ด' ํŒ€๋“ค์˜ ๋ชฉ๋ก์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋จผ์ € ๋ณต์‚ฌ ์ด๋™์€ ํด๋ฆญ ์ด๋ฒคํŠธ ๋ฐœ์ƒ๊ณผ ๋™์‹œ์— .appendTo() ํ•จ์ˆ˜๋กœ ์ด๋™๋œ๋‹ค. ์ด ์˜ˆ์‹œ์—์„œ๋Š” jQuery์˜ .sort() ํ•จ์ˆ˜๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋ถ€์„œ ์ด๋™๊ณผ ์†ŒํŠธ.. 2023. 9. 1.
jQuery ๋™์  click ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌํ•˜๊ธฐ jQuery๋กœ ๋™์  click ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌํ•˜๊ธฐ ๊ฐœ์š” ์›น ๊ฐœ๋ฐœ์—์„œ jQuery๋Š” ๋งŽ์€ ์œ ์šฉํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š”๋ฐ, ๊ทธ ์ค‘ ํ•˜๋‚˜๋Š” ๋™์ ์œผ๋กœ ์ƒ์„ฑ๋œ ์š”์†Œ์— ํด๋ฆญ ์ด๋ฒคํŠธ๋ฅผ ์ ์šฉํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด ๋ธ”๋กœ๊ทธ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋™์ ์œผ๋กœ ์ƒ์„ฑ๋œ ๋ฒ„ํŠผ์— ํด๋ฆญ ์ด๋ฒคํŠธ๋ฅผ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ƒํ™ฉ ์„ค์ • ๋ณดํ†ต ์›น ํŽ˜์ด์ง€์—์„œ ๋ฒ„ํŠผ์— ํด๋ฆญ ์ด๋ฒคํŠธ๋ฅผ ๋ถ€์—ฌํ•  ๋•Œ, $(document).ready() ํ•จ์ˆ˜ ๋‚ด์—์„œ ์ด๋ฒคํŠธ๋ฅผ ์„ ์–ธํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋™์ ์œผ๋กœ ์ƒ์„ฑ๋œ ๋ฒ„ํŠผ์˜ ๊ฒฝ์šฐ, ์ดˆ๊ธฐํ™” ๋‹จ๊ณ„์—์„œ๋Š” ํ•ด๋‹น ๋ฒ„ํŠผ์ด ์กด์žฌํ•˜์ง€ ์•Š์•„ ์ด๋ฒคํŠธ๊ฐ€ ์ ์šฉ๋˜์ง€ ์•Š๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ ๋ฒ„ํŠผ ์œ„ ์ฝ”๋“œ์—์„œ ๋‘ ๋ฒˆ์งธ ๋ฒ„ํŠผ (secondButton)์„ ํด๋ฆญํ•ด๋„ ๊ฒฝ๊ณ  ๋ฉ”์‹œ์ง€๊ฐ€ ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๋Š” ๋‘ ๋ฒˆ์งธ ๋ฒ„ํŠผ์˜ ์ด๋ฒคํŠธ๊ฐ€ ์ดˆ๊ธฐํ™” ๋‹จ๊ณ„์—์„œ ์ด๋ฏธ ์„ ์–ธ.. 2023. 8. 23.
jQuery๋ฅผ ์ด์šฉํ•˜์—ฌ ์š”์†Œ์˜ ์ด๋ฆ„์œผ๋กœ ํ˜„์žฌ ์š”์†Œ์˜ ํƒ€์ž… ์•Œ์•„๋‚ด๊ธฐ jQuery๋ฅผ ์ด์šฉํ•˜์—ฌ ์š”์†Œ์˜ ์ด๋ฆ„์œผ๋กœ ํ˜„์žฌ ์š”์†Œ์˜ ํƒ€์ž… ์•Œ์•„๋‚ด๊ธฐ ์•ˆ๋…•ํ•˜์„ธ์š”! ์ด๋ฒˆ ๋ธ”๋กœ๊ทธ ํฌ์ŠคํŒ…์—์„œ๋Š” jQuery๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์š”์†Œ์˜ ์ด๋ฆ„์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ˜„์žฌ ์š”์†Œ์˜ ํƒ€์ž…์„ ์–ด๋–ป๊ฒŒ ์•Œ์•„๋‚ผ ์ˆ˜ ์žˆ๋Š”์ง€ ์•Œ๋ ค๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. ์†Œ๊ฐœ ์›น ๊ฐœ๋ฐœ์—์„œ ์ข…์ข… ํŠน์ • ์š”์†Œ์˜ ํƒ€์ž…์„ ์•Œ์•„๋‚ด๋Š” ์ผ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋‹ค์–‘ํ•œ ์ž…๋ ฅ ํผ ์š”์†Œ ์ค‘์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๋ ค๊ณ  ํ•  ๋•Œ ํ•ด๋‹น ์š”์†Œ๊ฐ€ ์ธ์ง€, ์ธ์ง€, ์•„๋‹ˆ๋ฉด ์ธ์ง€ ๋“ฑ์„ ๊ตฌ๋ถ„ํ•ด์•ผ ํ•  ๋•Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐฉ๋ฒ• prop("tagName") ์‚ฌ์šฉํ•˜๊ธฐ var element = $("input[name='text']"); var tagName = element.prop("tagName"); console.log(tagName); // ๊ฒฐ๊ณผ ์˜ˆ์‹œ: "INPUT" [0].tagName .. 2023. 8. 15.