Programming (77) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ ํฐ์คํ ๋ฆฌ ํ ์ด๋ธ ์์ฑ, ํฌ๊ธฐ ์กฐ์ ํ๋๋ฒ / ํ ์ด๋ธ ์ ๋ ์ฑ์ฐ๊ธฐ, ๊ฐ์ด๋ฐ ์ ๋ ฌ ํ ์ด๋ธ์ ๋ค์ํ ์ ๋ณด๋ฅผ ์์ฝํ๊ธฐ์ ์์ฃผ ์ข์ ์๋จ์ผ๋ก ์ฌ์ฉ๋ฉ๋๋ค. ํฐ์คํ ๋ฆฌ์ ๊ฒฝ์ฐ HTML์ ์ด์ฉํ ์์ ์ด ๋ง์ ๊ด๊ณ๋ก ๋ฐฉ๋ฒ์ ์ต์ํ์ง ์๋ค๋ฉด ์กฐ์์ด ์ด๋ ค์ธ ์ ์์ต๋๋ค. ๊ทธ๋ ๊ธฐ์ ์ค๋์ ํ ์ด๋ธ์ ์์ฑํ๊ณ ์ ์ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๊ณ ๋ง์ถคํ๋ ๋ฐฉ๋ฒ์ ๋ํด์ ์์๋ณด๊ฒ ์ต๋๋ค. ๐ ํ ์ด๋ธ ์์ฑํ๊ธฐ ํฐ์คํ ๋ฆฌ์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๊ณต๋๋ UI๋ฅผ ํตํด์ ๊ฐ๋จํ๊ฒ ์์ฑํ์ค ์ ์์ต๋๋ค. ์ต์๋จ ๋ชฉ๋ก์์ ์ฌ๊ฐํ ๋ชจ์์ ์์ด์ฝ์ ํด๋ฆญํด์ฃผ์๋ฉด ์ํ๋ ํ/์ด์ ํ ์ด๋ธ์ ์์ฑํ ์ ์์ต๋๋ค. ํ ์ด๋ธ์ ์ต์ 1x1๋ถํฐ ์ต๋ 10 x 10ํฌ๊ธฐ๋ก ์์ฑํ ์ ์์ต๋๋ค. ํ ๋ง๋ค ๋ค๋ฅธ ๊ฐ์์ ์ด์ ๊ฐ์ง ํ ์ด๋ธ์ HTML์ฝ๋๋ฅผ ์์ ํ์ฌ ๋ง๋์ค ์ ์์ต๋๋ค. ํ์ง๋ง, ์ ๋ ฌ์ด ์ด๋ ต๊ณ ์ด์ด ๋ค๋ฅธ ํ ์ด๋ธ์ ์ ์ฌ์ฉํ์ง ์์ผ๋ ์ด ๊ธ์์ ๋ค๋ฃจ์ง ์์์ต๋๋ค... ํฐ์คํ ๋ฆฌ ๋ชจ๋ฐ์ผ ํ / ๊ด๋ฆฌ ํ์ด์ง ๋ค์ด๊ฐ๊ธฐ ๋ฐ ๋จ์ถํค / ๋ชจ๋ฐ์ผ๋ก html ํธ์ง / ๋ชจ๋ฐ์ผ ๊ธ ์ฐ๊ธฐ ํ ์ ๊ฐ ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ๋ฅผ ์ด์ํ์ง ๋ณด๋ฆ ์ ๋๊ฐ ๋์ด ๊ฐ๋๋ค. ๊ทธ ๋์ ํฐ์คํ ๋ฆฌ๋ฅผ ์์ํ๋ฉด์ ํท๊ฐ๋ ค ํ์๋ ๋ณธ์ธ ๋ธ๋ก๊ทธ์์๊ด๋ฆฌ ํ์ด์ง ๋ค์ด๊ฐ๊ธฐ๋ ๋ฐฉ๋ฒ๊ณผ ๋ชจ๋ฐ์ผ์ ์ด์ฉํ ๊ธ์ฐ๊ธฐ์ ์ ์ฉํ ๊ธฐ๋ฅ์ ๋ํด์ ์์ ๋ณด๊ฒ ์ต๋๋ค. ์ด ๊ธ์ ์ ์ฒ๋ผ ๋ธ๋ก๊ทธ๋ฅผ ์ด์ํ์์ง ์ผ๋ง์๋์ ์ด๋ณด์ ๋ถ๋ค์ ์ํด์ ์์ฑํ์์ต๋๋ค. ๋ธ๋ก๊ทธ ๊ด๋ฆฌ ํ์ด์ง ์ด์ํ๋ ๋ธ๋ก๊ทธ๋ฅผ ๊ด๋ฆฌํ ์ ์๋ ์ฐฝ ์ ๋๋ค. ๊ธ์ด๋ ์นดํ ๊ณ ๋ฆฌ, ์คํจ ๋ฑ์ ํธ์งํ ์ ์๋ ๊ณต๊ฐ์ ๋๋ค. ์ ๊ฐ ์ฒ์ ๋ถํธํด ํ์๋ ๋ถ๋ถ์ ๋ธ๋ก๊ทธ ๊ด๋ฆฌ ํ์ด์ง์ ๋ธ๋ก๊ทธ ์์ฒด๋ฅผ ์ด๋ํ๊ธฐ ์ด๋ ค์ํ๋ ์ ์ ๋๋ค. ์ฐ์ธก ์๋จ ํ๋กํ์ ํด๋ฆญํ๋ฉด ์ด๋ ๋ฏ ์ด์ ์ค์ธ ๋ธ๋ก๊ทธ ๊ธ์ฐ๊ธฐ ๋ฒํผ๊ณผ ๋ธ๋ก๊ทธ ์ค์ ๋ฒํผ์ด ์์ต๋๋ค. ์ด์์ค์ธ ๋ธ๋ก๊ทธ์ ๋ค์ด๊ฐ์ ๋ ๋ค์ ๊ด๋ฆฌ ํ์ด์ง์ ๋ค์ด๊ฐ๋ ๋ฒํผ์ด ์์ด์ ๋นํฉ ํ์์ต๋๋ค. .. ์๋ฐ ์คํฌ๋ฆฝํธ ๋ ํ ๊ธฐ์ด / jQuery / ์๋ฐ ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ ์ค์ด๊ธฐ ์๋ ํ์ธ์ ๋ฆฌ๋ฌด๋ฆฌ๋ฌด์ ๋๋ค. ์ค๋์ ์๋ฐ ์คํฌ๋ฆฝํธ๋ฅผ ์กฐ๊ธ ๋ ํจ์จ์ ์ฌ์ฉํ ์ ์๊ฒ ํด์ฃผ๋ "jQuery"์ ๋ํด์ ์์๋ณด๊ฒ ์ต๋๋ค. jQuery๋? jQuery๋ HTML์ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์กฐ์์ ๋จ์ํํ๋๋ก ์ค๊ณ๋ ํฌ๋ก์ค ํ๋ซํผ์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค. ์กด ๋ ์์ด 2006๋ ๋ด์ ์ ๋ฐ ์บ ํ์์ ๊ณต์์ ์ผ๋ก ์๊ฐํ์๋ค. ์ถ์ฒ: ์ํค๋ฐฑ๊ณผ jQuery๋ ์๋ฐ ์คํฌ๋ฆฝํธ์ ๋ฌธ์ฅ์ ์กฐ๊ธ ๋ ์งง๊ณ ๊ฐ๋จํ๊ฒ ์ธ ์ ์๊ฒ ๋์์ค๋๋ค. ex) getElementIdBy('content') -> $('#content') ์ฌ์ฉ ๋ฐฉ๋ฒ 1. code.jquery.com/์ ์ 2. ๊ฐ์ฅ ์ต์ ๋ฒ์ ์ jQuery code๋ฅผ minified ์ฌ์ดํธ ์ ์ ํ ์ต์ ๋ฒ์ ์ชฝ์ด minified ํด๋ฆญ 3. code๋ฅผ ๋๋๊ทธ ํ ๋ณต์ฌ ํน.. ์๋ฐ ์คํฌ๋ฆฝํธ ๊ธฐ์ด / ๊ธ์์ ๊ณ์ฐ๊ธฐ ๊ธ์์ ๊ณ์ฐ๊ธฐ ๋ง๋ค๊ธฐ with ์๋ฐ์คํฌ๋ฆฝํธ ํ์์ง์ 1. getElementById๋ฅผ ์ด์ฉํด ใด DOM(Document Object Model)์ id ๊ฐ์ ธ์ค๊ธฐ 2. onkeydown ์ด๋ฒคํธ HTML ์ฝ๋ ์๊ธฐ์๊ฐ // ์ ๋ชฉ ์ ๋ ฅ ์ ๋ ฅํ์ธ์ (0/200) ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ์๋ฐ ์คํฌ๋ฆฝํธ ๋ ํ ๊ธฐ์ด / ์ฝ๋ ๋ฏ์ด ๋ณด๊ธฐ #1 / ๋๋ ๋ฒํธ ์์ฑ๊ธฐ DOCTYPE html> ๋ฒํธ ์์ฑ๊ธฐ ์น ํ์ด์ง ์ด๋ฆ ๋๋ค ๋ฒํธ ์ถ์ฒจ๊ธฐ ํ์ด์ง ์๋จ ์ ๋ชฉ var lotto = []; lotto ๋ผ๋ ์ด๋ฆ์ array(๊ธ์๋ ์ซ์๋ฅผ ๋ด๋ ๊ณต๊ฐ) ์์ฑ while (lotto.length 0 ์ด์ 46๋ฏธ๋ง์ ์ค์๋ฅผ ์์ฑ parseInt() -> () ์์ ๊ฐ์ '์ ์'๋ก ๋ณํ if (lotto.indexOf(num) == -1) { ์กฐ๊ฑด๋ฌธ if๋ฅผ ์ฌ์ฉ, '(์กฐ๊ฑด)'์ ๋ง์กฑํ๋ ๋์ '{๋ด์ฉ}'์ ์งํ ์กฐ๊ฑด lotto.indexOf(num) -> ๋ณ์ num์ด lotto array ์์ ์กด์ฌ ๋ช ๋ฒ์งธ ํญ๋ชฉ ๋ํ๋ ์กด์ฌํ์ง ์์ผ๋ฉด -1 ๋๋ค์ผ๋ก ์์ฑ๋ ์ซ์๊ฐ ์ค๋ณต์ ์ผ๋ก array์ ๋ค์ด๊ฐ์ง ์๊ฒ ํด์ฃผ๊ธฐ ์ํจ lotto.push(num); ์กฐ๊ฑด์ ๋ง์กฑํ๋ค๋ฉด lotto array.. ์ด์ 1 ยทยทยท 7 8 9 10 ๋ค์