old-16
๋ฌธ์
๋ณ ์ฌ์ง๊ณผ js-3์ด ๋ณด์ธ๋ค. ์ค๋ช ์ ๋ฐ๋ก ์๋ ๊ฒ ๊ฐ๋ค.

๋ฌธ์ ํ์ด: ์ฝ๋ ๋ถ์
#(1) onload๋ฅผ ์ฌ์ฉํด kk() ํจ์๊ฐ ํ์ด์ง ๋ก๋ ์งํ ์คํ๋๋๋ก ํ๋ค. onkeypress๋ ์ฌ์ฉ์๊ฐ ํค๋ณด๋์ ํค๋ฅผ ๋๋ฅด๋ฉด ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋๋ก ํ๋ค. ์ฌ๊ธฐ์๋ ํค๋ฅผ ๋๋ฅด๋ฉด mv ํจ์๊ฐ ํธ์ถ๋๋ค.
#(3) <font> ํ๊ทธ๋, ํ ์คํธ์ ํฐํธ, ์์ ๊ทธ๋ฆฌ๊ณ ํฌ๊ธฐ๋ฅผ ์ ์ํ ๋ ์ฌ์ฉํ๋ค.ํ๋ฉด์ ๋ณด์ด๋ ๊ฐ์ฅ ํฐ ๋ณ์ ์ ์ํ๋ ๋ถ๋ถ์ด๋ค.
<body bgcolor="black" onload="kk(1,1)" onkeypress="mv(event.keyCode)"> #(1)
<font color="silver" id="c"></font> #(2)
<font color="yellow" size="100" style="position:relative" id="star">โ
</font> #(3)
<body onload="myFunction()">
ํ์ด์ง๊ฐ ๋ก๋๋ ์งํ Javascript๋ฅผ ์คํํ๋ค.
-> ๊ฐ์ฒด๊ฐ ๋ก๋๋ ๋ ๋ฐ์ํ๋ฉฐ, ์น ํ์ด์ง์ ๋ชจ๋ ์ฝํ ์ธ (์ด๋ฏธ์ง, ์คํฌ๋ฆฝํธ ํ์ผ)๊ฐ ์์ ํ ๋ก๋๋๋ฉด ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ๊ธฐ ์ํด <body> ์์ ๋ด์์ ๊ฐ์ฅ ์์ฃผ ์ฌ์ฉ๋๋ค.
์๋ ์ฝ๋๋ฅผ ์ดํด๋ณด๋ฉฐ ์ดํดํด๋ณด์. <body> ํ๊ทธ์ onload๋ฅผ ์ฌ์ฉํ์ฌ ํ์ด์ง ๋ก๋ ์งํ helloFunction() ํจ์๊ฐ ์คํ๋๋๋ก ํ๋ค. helloFunction()์ <script>๋ถ๋ถ์ ์ ์ํ๋ค.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>onload test</title> </head> <body onload="helloFunction()"> <script> function helloFunction() { alert("Nice to meet you"); } </script> </body> </html>โ
mv() ํจ์์ kk() ํจ์๊ฐ ์ ์๋๋ ๋ถ๋ถ์ด๋ค.
onkeypress = "mv(event.KeyCode)"๋ผ๊ณ ๋์ด์๋ ๋ถ๋ถ์ผ๋ก ์ ์ถํด๋ณผ๋, mv ํจ์๋ ๋ณ์ ์ด๋์ํค๋ ํจ์, kkํจ์๋ ๋ณ์ ์์ฑํ๋ ํจ์์ธ ๊ฒ ๊ฐ๋ค.
<script>
document.body.innerHTML += "<font color=yellow id=aa style=position:relative;left:0;top:0>โ
</font>";
function mv(cd) {
kk(star.style.left - 50, star.style.top - 50);
if (cd == 100) star.style.left = parseInt(star.style.left) + 50 + "px";
if (cd == 97) star.style.left = parseInt(star.style.left) - 50 + "px";
if (cd == 119) star.style.top = parseInt(star.style.top) - 50 + "px";
if (cd == 115) star.style.top = parseInt(star.style.top) + 50 + "px";
if (cd == 124) location.href = String.fromCharCode(cd) + ".php"; // do it!
}
function kk(x, y) {
rndc = Math.floor(Math.random() * 9000000);
document.body.innerHTML += `<font color="#${rndc}" id=aa style="position:relative;left:${x}px;top:${y}px" onmouseover="this.innerHTML=''">โ
</font>`;
}
</script>
#๋ ๋ฒ์งธ ๋ณ
<font color="yellow" id="aa" style="position:relative; left:0; top:0"></font>
#์ธ ๋ฒ์งธ ๋ณ
<font color="#4250573" id="aa" style="position:relative;left:1;top:1" onmouseover="this.innerHTML=''">*</font>
</body>
</html>
๋ฌธ์ ํ์ด:
์๋ฌด ํค๋ ๋๋ฅด๋ฉด ๋ณ์ด ์ถ๊ฐ๋๋ค. ์ด๋ ๊ธฐ์กด์ ๊ฐ์ฅ ํฐ ๋ณ์ ์์น๋ฅผ ์ด๋ํ๊ฑฐ๋ ๊ฐ๋งํ ์๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ณ์ด ์ถ๊ฐ๋ ๋๋ง๋ค ์๋์ ๊ฐ์ ์ฝ๋๋ค์ด html์ ์๋กญ๊ฒ ์ถ๊ฐ๋๋ค. kk ํจ์์ ์ํด ์์ฑ๋๋ ๊ฒ ๊ฐ๋ค.
<font color="#1959439" id="aa" style="position:relative;left:-50;top:-50" onmouseover="this.innerHTML=''">*</font>
mv ํจ์์ cd๋ ๋์ฒด ๋ญ๊น? onkeypress = mv๋ก ์ ์๋์ด์๊ธฐ ๋๋ฌธ์ mv ํจ์๋ ํค๋ฅผ ๋๋ฅด๋ฉด ์คํ๋๋ค.
mv์ ๋งค๊ฐ ๋ณ์์ธ event.KeyCode๋ ASCII ์ฝ๋์ ๊ธฐ๋ฐํ๋ฉฐ ์ด๋ค ํค๊ฐ ๋๋ ธ๋์ง ํ์ธํ๊ฒ ํด์ฃผ๋ ํค์๋๋ผ๊ณ ํ๋ค. ๋ง์ง๋ง if๋ฌธ์ ์๋ do it! ์ฃผ์์ ๋ณด๋ฉด cd==124 ์กฐ๊ฑด์ ๋ง์กฑํด์ผํ๋ ๊ฒ ๊ฐ์๋ฐ, cd๊ฐ ๋ญ์ง ์ ๋ง ๋ชจ๋ฅด๊ฒ ๋ค.
function mv(cd) {
kk(star.style.left - 50, star.style.top - 50);
if (cd == 100) star.style.left = parseInt(star.style.left) + 50 + "px";
if (cd == 97) star.style.left = parseInt(star.style.left) - 50 + "px";
if (cd == 119) star.style.top = parseInt(star.style.top) - 50 + "px";
if (cd == 115) star.style.top = parseInt(star.style.top) + 50 + "px";
if (cd == 124) location.href = String.fromCharCode(cd) + ".php"; // do it!
}
ํค๋ณด๋์ A,S,D,W ๋ฒ๋ ์ ๋๋ฅด๋ฉด left์ top๊ฐ NaN ๊ฐ์ผ๋ก ๋ณํ๋ ๊ฒ์ ์์๋๋ค. NaN๊ฐ์ Not a Number์ผ๋ก ์ซ์๊ฐ ์๋ ๋๋ ๋ ์ ์๋ ๊ฒ๋ค์ ์๋ฏธํ๋ค.
if๋ฌธ์ ์๋ parseInt()๋ ๋ฌธ์์ด์ intํ์ผ๋ก ๋ณํํด์ค๋ค๊ณ ํ๋ค. cd๊ฐ ๊ฐ ์กฐ๊ฑด์ ๋ง์กฑํ๋ฉด left๊ฐ๊ณผ top๊ฐ์ intํ์ผ๋ก ๋ฐ๊พธ๊ณ +- 50 ์ฐ์ฐ์ ํ๋ค? ๊ณ์ ๊ณ ๋ฏผํ๋ค๊ฐ event.KeyCode ๋ฐํํ๊ฐ ๋ ์ฌ๋๋ค. ํ๋ฅผ ์ ๋ฆฌํด๋ณด๋ฉด ์๋์ ๊ฐ๋ค. ๊ทธ๋ฐ๋ฐ Fnํค๋ ์ ๋ ฅ๋๋ ํค๋ก ์ธ์๋์ง ์๋ ๊ฒ ๊ฐ๋ค. ๋ฌธ์ ํ๋ฉด์์ Fnํค๋ฅผ ๋๋ฅด๋ฉด ์๋ฌด๋ฐ ๋ฐ์์ด ์๋ค.
100 | (NumberPad)4 |
97 | (NumberPad)1 |
119 | F8 |
115 | F4 |
124 | F13 |
์ต์คํ๋ก์
๊ฒฐ๋ก ์ ์ผ๋ก cd๋ event.KeyCodeํ์ ์ซ์๋ฅผ ๋งํ๋๊ฒ ๋ง์๋ค. ๋ค๋ง ์์ธ์ง๋ ๋ชจ๋ฅด๊ฒ ์ง๋ง keycode ํ๊ฐ ์ฌ๋ฌ๊ฐ์ฌ์ ํค๋งธ๋ค. 124๋ฒ์ธ |(shifr+\) ํค๋ฅผ ๋๋ฅด๋ฉด ๋ฌธ์ ๊ฐ ํ๋ฆฐ๋ค.


์ ๋ฆฌ: Write - up ์ฐธ๊ณ ํ๋ฉฐ
์ด ๋ถ๋ถ๋ง ์ ๋ณด๋ฉด ๋์๋ค. String.fromCharCode()๋ ์ ๋์ฝ๋ ๊ฐ์ ๋ฌธ์๋ก ๋ณํํ๋ ํจ์์ด๋ค. ์ด ํจ์๋ cd๊ฐ์ ๋งค๊ฐ๋ณ์๋ก ๊ฐ์ง๋ฉฐ, ์ด cd๊ฐ์ด ๋ฌธ์๋ก ๋ณํ๋ ๊ฒฐ๊ณผ์ ๋ฌธ์์ด .php์ด ๋ถ๊ฒ ๋๋ค.
location.href๋ ํ์ฌ ๋ธ๋ผ์ฐ์ ์ url์ ๋ณ๊ฒฝํ๋ ์์ฑ์ผ๋ก "cd=124์ธ ๋ฌธ์.php"๊ฐ ํ์ผ๋ช ์ด ๋์ด ์๋ฒ์ ์๋ ํด๋น ํ์ผ์ด ์ด๋ฆฌ๊ฒ ๋๋ ๊ตฌ์กฐ์ด๋ค.
if (cd == 124) location.href = String.fromCharCode(cd) + ".php"; // do it!
๋ฐ๋ผ์, ํ๋ฅผ ์ฐพ์ง ์์๋ ์ฝ์์ฐฝ์ ์ด์ฉํด cd๊ฐ์ ์์๋ผ ์ ์์๋ค.

์ฝ๋์ ํํธ๊ฐ ์๋ค๋ฉด, ๊ทธ ๋ถ๋ถ์ ๋จผ์ ์์ธํ ์ดํด๋ณด์. ์ด ๋ฌธ์ ๋ ๋ชจ๋ ์ฝ๋๋ฅผ ํด์ํ์ง ์์๋ ๋๋ ๋ฌธ์ ์๋ค.
์ ๋ฆฌ: location.href
let์ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฌธ๋ฒ์ด๋ค. ์๋์ ๋ช ๋ น์ด๋ ํ์ฌ ํ์ด์ง์ URL์ ๊ฐ์ ธ์ค๋ ๊ธฐ๋ฅ์ ํ๋ค,
let url = location.href;
์๋๋ ํ์ฌ ํ์ด์ง์ URL์ ์ ์ํ๋ ์ฝ๋์ด๋ค.
location.href = "https://www.naver.com"