SONOTREE 2025. 1. 2. 21:27

๋ฌธ์ œ

๋ณ„ ์‚ฌ์ง„๊ณผ 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+\) ํ‚ค๋ฅผ ๋ˆ„๋ฅด๋ฉด ๋ฌธ์ œ๊ฐ€ ํ’€๋ฆฐ๋‹ค.

์ถœ์ฒ˜: https://zidarn87.tistory.com/186


์ •๋ฆฌ: 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"

 

๋Œ“๊ธ€์ˆ˜0