๐Ÿ’ป Programming/Javascript (25)

๋ฌธ์žฅ ๋‚ด์—์„œ ์‚ฌ์šฉ๋œ distinct ๋ฌธ์ž ๊ฐœ์ˆ˜ ๊ตฌํ•˜๊ธฐ

ํ•œ ๋ฌธ์žฅ ์•ˆ์—์„œ ์‚ฌ์šฉ๋œ distinct ๋ฌธ์ž์˜ ๊ฐœ์ˆ˜๋ฅผ ๊ตฌํ•ด์•ผ ํ•œ๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•  ์ˆ˜ ์žˆ์„๊นŒ์š”?

stream์ด ๋‚˜์˜ค๊ธฐ ์ „์ด์—ˆ๋‹ค๋ฉด ๊ทธ์ € String์„ ์บ๋ฆญํ„ฐ ๋ฐฐ์—ด๋กœ ๋งŒ๋“ค์–ด์„œ loop๋ฅผ ๋Œ๋ ค set์— ๋„ฃ์€ ๋’ค set์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ๊ตฌํ•˜๋ฉด ๋๊ฒ ์ฃ .

์•„๋ž˜์ฒ˜๋Ÿผ ๋ง์ด์ฃ .

    String sentence = "Computer users take it for granted that their systems can do more than one thing at a time.";
    
    Set<Character> s = new HashSet<>();
    for (char c : sentence.toCharArray()) {
    	s.add(c);
    }
    
    System.out.println(s.size());

ํ•˜์ง€๋งŒ stream ์„ ์ด์šฉํ•˜๋ฉด ํ•œ์ค„๋กœ ํ•ด๊ฒฐ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

 

Stream์„ ์ด์šฉํ•œ distinct ๋ฌธ์ž ๊ฐœ์ˆ˜ ๊ตฌํ•˜๊ธฐ

stream์—๋Š” distinct() ๋ฉ”์„œ๋“œ๊ฐ€ ์žˆ์œผ๋ฉฐ ์ด๋Š” ํ•ด๋‹น ์ŠคํŠธ๋ฆผ๋‚ด์—์„œ distinctํ•œ ๊ฒƒ๋“ค๋งŒ ์ถ”์ถœํ•ด์ค๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  count()๋ฉ”์„œ๋“œ๋ฅผ ์ด์šฉํ•˜์—ฌ ๊ทธ ๊ฐœ์ˆ˜๋ฅผ ์…€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์œ„์—์„œ set๊ณผ for-loop๋ฅผ ์‚ฌ์šฉํ•œ ๋ถ€๋ถ„์„ stream์„ ์ด์šฉํ•˜์—ฌ ํ•œ์ค„๋กœ ์ค„์ด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    String sentence = "Computer users take it for granted that their systems can do more than one thing at a time.";

    long distinctCharsCount = sentence.chars().distinct().count();

    System.out.println(distinctCharsCount);

ํ›จ์”ฌ ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ตฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

 

 

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” jQuery๋ฅผ ์ด์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ์„ ํƒํ•œ ๋ผ๋””์˜ค ๋ฒ„ํŠผ์ด๋‚˜ ์ฒดํฌ๋ฐ•์Šค๋ฅผ ํ•ด์ œํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ด…๋‹ˆ๋‹ค.

๋ผ๋””์˜ค ๋ฒ„ํŠผ ํ•ด์ œํ•˜๊ธฐ

์šฐ์„  ์•„๋ž˜์™€ ๊ฐ™์€ ํ™”๋ฉด์„ ํ•˜๋‚˜ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค.

html ์€ ์•„๋ž˜์ฒ˜๋Ÿผ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

<div>
    <input type="radio" name="fruit" value="orange"><label>์˜ค๋ Œ์ง€</label>
    <input type="radio" name="fruit" value="apple"><label>์‚ฌ๊ณผ</label>
    <input type="radio" name="fruit" value="banana"><label>๋ฐ”๋‚˜๋‚˜</label>
    <button onclick="deselect()">์„ ํƒํ•ด์ œ</button>
</div>

์—ฌ๊ธฐ์„œ name ๊ฐ’์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ๋ผ์ด์˜ค ๋ฒ„ํŠผ์„ ํ•˜๋‚˜์˜ ๊ทธ๋ฃน์œผ๋กœ ๋ฌถ์–ด์ฃผ๋Š” ์†์„ฑ์ด๊ธฐ ๋•Œ๋ฌธ์ด์ฃ .

์ฒ˜์Œ์—” ์•„๋ฌด๋Ÿฐ ๋ฒ„ํŠผ์ด ์„ ํƒ์ด ์•ˆ๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค. 

 

๊ทธ๋ฆฌ๊ณ  ์Šคํฌ๋ฆฝํŠธ๋Š” ์•„๋ž˜์ฒ˜๋Ÿผ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค.

function deselect() {
  // name์ด fruit์ธ ๋ผ๋””์˜ค ๋ฒ„ํŠผ ์ผ๊ด„ ํ•ด์ œ
  $("input:radio[name='fruit']").prop('checked', false);
}

์„ ํƒํ•ด์ œ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด deselect ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ํ•จ์ˆ˜ ๋‚ด์—์„œ๋Š” radio ๋ฒ„ํŠผํƒ€์ž…์˜ input ์ค‘์—์„œ name๊ฐ’์ด fruit์ธ ๊ฒƒ๋“ค์˜ ์ฒดํฌ์ƒํƒœ๋ฅผ false๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, fruit name์— ์†ํ•œ ๋ชจ๋“  ์ฒดํฌ์ƒํƒœ๊ฐ€ ํ•ด์ œ๋˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๋ผ๋””์˜ค ๋ฒ„ํŠผ ์ฒดํฌ ํ•ด์ œํ•˜๊ธฐ

jQuery๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ง์ ‘ ๊ตฌํ˜„ํ•˜๋ ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function deselect() {
    var fruits = document.getElementsByName("fruit");
    for (var i = 0; i < fruits.length; i++) {
      if (fruits[i].getAttribute('type') === 'radio') {
      		fruits[i].checked = false;
      }
    }
}

 

์ฒดํฌ๋ฐ•์Šค ์„ ํƒ ํ•ด์ œํ•˜๊ธฐ

๋งŒ์•ฝ ๋ผ๋””์˜ค ๋ฒ„ํŠผ์ด ์•„๋‹ˆ๋ผ ์ฒดํฌ๋ฐ•์Šค์ผ ๊ฒฝ์šฐ ์„ ํƒ์ž(selector)๋งŒ ์•„๋ž˜์™€ ๊ฐ™์ด ๋ณ€๊ฒฝํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

function deselect() {
  // name์ด fruit์ธ ์ฒดํฌ๋ฐ•์Šค ์ผ๊ด„ ํ•ด์ œ
  $("input:checkbox[name='fruit']").prop('checked', false);
}

 

์ฒดํฌ๋ฐ•์Šค/๋ผ๋””์˜ค๋ฒ„ํŠผ ์ผ๊ด„ ํ•ด์ œํ•˜๊ธฐ

๊ทธ๋Ÿผ ๋งŒ์•ฝ ๋ผ๋””์˜ค ๋ฒ„ํŠผ๊ณผ ์ฒดํฌ๋ฐ•์Šค๋ฅผ ๋ชจ๋‘ ํ•ด์ œํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ• ๊นŒ์š”?

selector์—์„œ radio๋‚˜ checkbox๋ผ๊ณ  ๋ช…์‹œํ•œ ๋ถ€๋ถ„๋งŒ ๋นผ์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๋‹จ, ๋™์ผํ•œ name ๊ฐ’์œผ๋กœ ๋ฌถ์—ฌ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

function deselect() {
  // name์ด fruit์ธ ๋ชจ๋“  input ์˜ ์ฒดํฌ ์ƒํƒœ ์ผ๊ด„ ํ•ด์ œ
  $("input[name='fruit']").prop('checked', false);
}

์ด๋ ‡๊ฒŒ ๋ง์ด์ฃ .

 

๊ฐ„๋‹จํ•˜์ฃ ?

 

์˜ค๋Š˜๋„ ์ฆ์ฝ”ํ•˜์„ธ์š”~

 

 

๋‘ฅ๊ทผ ํ† ๊ธ€ ๋ฒ„ํŠผ

๋ณธ ํฌ์ŠคํŒ…์—์„œ๋Š” html, css, javascript๋ฅผ ์ด์šฉํ•˜์—ฌ ๋‘ฅ๊ทผ toggle๋ฒ„ํŠผ์„ ๋งŒ๋“ค๊ณ , ๋ฒ„ํŠผ์˜ ์ƒํƒœ๊ฐ€ ๋ณ€๊ฒฝ๋  ๋•Œ๋งˆ๋‹ค ์ƒํƒœ๋ฅผ ์ถœ๋ ฅํ•˜๋Š” ๊ธฐ๋Šฅ๊นŒ์ง€ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค. ๋ณธ ๋ณด์ŠคํŒ…์— ์‚ฌ์šฉ๋˜๋Š” ๊ธฐ๋ณธ์ฝ”๋“œ๋Š” w3schools์—์„œ ๊ฐ€์ง€๊ณ  ์˜จ ๊ฒƒ์ž…๋‹ˆ๋‹ค. w3schools์—์„œ๋Š” ๋‹จ์ˆœํžˆ css๋ฅผ ์ด์šฉํ•ด์„œ ํ† ๊ธ€๋ฒ„ํŠผ์ฒ˜๋Ÿผ ๋ณด์ด๋Š” ๊ฒƒ์„ ๋งŒ๋“œ๋Š” ๊ฒƒ ๊นŒ์ง€๋งŒ ๋ณด์—ฌ์ฃผ์—ˆ๋Š”๋ฐ, ์ €๋Š” ๊ทธ๋ ‡๊ฒŒ ํ† ๊ธ€์ด ๋  ๋•Œ๋งˆ๋‹ค ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ์–ด๋–ค ๊ธฐ๋Šฅ์ด ์‹คํ–‰๋˜๋Š” ๋ถ€๋ถ„๊นŒ์ง€ ํ™•์žฅํ•ด์„œ ํฌ์ŠคํŒ…ํ•ฉ๋‹ˆ๋‹ค.

 

์šฐ์„  toggle.html ํŒŒ์ผ์— input tag๋ฅผ ์ด์šฉํ•ด์„œ ์•„๋ž˜์™€ ๊ฐ™์ด ์ž‘์„ฑํ•ด์ค๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <label class="switch">
        <input type="checkbox" />
        <span class="slider round"></span>
    </label>
</body>

</html>

 

๊ทธ๋ฆฌ๊ณ  toggle.css ํŒŒ์ผ์„ ํ•˜๋‚˜ ๋งŒ๋“ค์–ด์„œ ๊ทธ ์•ˆ์— ์•„๋ž˜์™€ ๊ฐ™์ด ์ž‘์„ฑ์„ ํ•ด์ค๋‹ˆ๋‹ค.

/* ์Šฌ๋ผ์ด๋” ์™ธ๋ถ€๋ฅผ ๊ฐ์‹ธ๋Š” ๋ผ๋ฒจ์— ๋Œ€ํ•œ ์Šคํƒ€์ผ */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* HTML ๊ธฐ๋ณธ ์ฒดํฌ๋ฐ•์Šค ์ˆจ๊ธฐ๊ธฐ */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* ์Šฌ๋ผ์ด๋” - ์‹ค์ œ๋กœ ํ† ๊ธ€๋  ๋ถ€๋ถ„ */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* ์Šฌ๋ผ์ด๋”๋ฅผ ๋™๊ทธ๋ž—๊ฒŒ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•œ ๋ถ€๋ถ„ */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

 

์ด์ œ HTML ํŒŒ์ผ์˜ <head></head> ๋ถ€๋ถ„์— ์œ„ css ํŒŒ์ผ์„ ๋งํฌ์‹œ์ผœ์ค๋‹ˆ๋‹ค.

<head>
	<link rel="stylesheet" type="text/css" href="toggle.css" />
</head>

 

์ด์ œ toggle.html ํŒŒ์ผ์„ ๋”๋ธ”ํด๋ฆญํ•ด์„œ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์—ด์–ด๋ณด๋ฉด ์•„๋ž˜ ์˜์ƒ์ฒ˜๋Ÿผ ์›€์ง์ด๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

๋‘ฅ๊ทผ ํ† ๊ธ€ ๋ฒ„ํŠผ ์›€์ง์ด๋Š” ์˜์ƒ

 

์ž, ์ด์ œ ์—ฌ๊ธฐ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•ด๋ณด๋„๋ก ํ• ๊ฑด๋ฐ์š”,

์ด ํ† ๊ธ€๋ฒ„ํŠผ์€ input ํƒœ๊ทธ์˜ checkbox๋ฅผ ์ด์šฉํ•œ ๊ฒƒ์ด๋ฏ€๋กœ ํ† ๊ธ€์ด ๋  ๋•Œ๋งˆ๋‹ค checked ์†์„ฑ์ด ๋ณ€๊ฒฝ๋˜๋„๋ก ๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๊ธฐ๋ณธ์ ์ธ ๋‚ด์šฉ์„ ๊ธฐ์–ตํ•˜๊ณ  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํ† ๊ธ€๋ฒ„ํŠผ์˜ checked ์†์„ฑ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํŠน์ • ๋ฌธ์ž์—ด์„ ์ถœ๋ ฅํ•˜๋„๋ก ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์€ ๋”ฐ๋กœ ๋งŒ๋“ค์ง€ ์•Š๊ณ  ๊ทธ๋ƒฅ html ํŒŒ์ผ์— ์ถ”๊ฐ€ํ•˜๋„๋ก ํ• ๊ฒŒ์š”.

์šฐ์„ , input ํƒœ๊ทธ์— onclick ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ toggle์ด๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋„๋ก ํ•˜๊ณ , toggle ํ•จ์ˆ˜๋ฅผ ๊ตฌํ˜„ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์•„๋ž˜์ฒ˜๋Ÿผ input  ํƒœ๊ทธ์˜ onclick ์†์„ฑ์„ ๋„ฃ์–ด์ฃผ์„ธ์š”. 

<label class="switch">
    <input type="checkbox" onclick="toggle(this)">
    <span class="slider round"></span>
</label>

์ด๋ ‡๊ฒŒ ํ•ด์ฃผ๋ฉด ํ† ๊ธ€๋ฒ„ํŠผ(์ฒดํฌ๋ฐ•์Šค)๊ฐ€ ํด๋ฆญ๋  ๋•Œ๋งˆ๋‹ค toggle์ด๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด์„œ ์ž๊ธฐ์ž์‹ ์„ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋„˜๊ฒจ์ฃผ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

์ž, ์ด์ œ body ์•„๋ž˜์ชฝ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ž‘์„ฑํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

<script>
    function toggle(element) {
        console.log(element.checked);
    }
</script>

์œ„ ์ฝ”๋“œ๋Š” <head></head> ์— ์œ„์น˜ํ•ด๋„ ๋˜๊ณ  <body></body> ์‚ฌ์ด์— ์œ„์น˜ํ•ด๋„ ๋ฉ๋‹ˆ๋‹ค.

๋‹น์—ฐํžˆ ๋ณ„๋„ ํŒŒ์ผ๋กœ ๋ถ„๋ฆฌํ•˜์—ฌ ์ž‘์„ฑํ•ด๋„ ๋ฉ๋‹ˆ๋‹ค.

๋ถ„๋ฆฌํ•˜์—ฌ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ๊ณผ ๊ด€๋ จํ•ด์„œ๋Š” ์ œ๊ฐ€ ์ž‘์„ฑํ•œ ๋‹ค๋ฅธ ํฌ์ŠคํŠธ์—์„œ ํ™•์ธ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. -> https://keichee.tistory.com/356

์ €๋Š” <body></body> ์‚ฌ์ด์— ๋„ฃ์–ด๋†“์•˜์Šต๋‹ˆ๋‹ค.

<body>
    <label class="switch">
        <input type="checkbox" onclick="toggle(this)">
        <span class="slider round"></span>
    </label>

    <script>
        function toggle(element) {
            console.log(element.checked);
        }
    </script>
</body>

 

์ž, ์—ฌ๊ธฐ๊นŒ์ง€ html ํŒŒ์ผ ์ „์ฒด ์ฝ”๋“œ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋˜๋Š”์ง€ ๋‹ค์‹œ ํ•œ๋ฒˆ ๋ณด์—ฌ๋“œ๋ฆด๊ฒŒ์š”.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="toggle.css" />
</head>

<body>
    <label class="switch">
        <input type="checkbox" onclick="toggle(this)">
        <span class="slider round"></span>
    </label>

    <script>
        function toggle(element) {
            console.log(element.checked);
        }
    </script>
</body>

</html>

 

์—ฌ๊ธฐ๊นŒ์ง€ ์™„์„ฑํ•˜์—ฌ ์‹คํ–‰ํ•˜๋ฉด ์ฒดํฌ๋ฐ•์Šค(ํ† ๊ธ€๋ฒ„ํŠผ)์„ ํด๋ฆญํ•  ๋•Œ๋งˆ๋‹ค toggleํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋ฉด์„œ ํ˜„์žฌ ์ฒดํฌ๋ฐ•์Šค์˜ ์ƒํƒœ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋ฐ”๋€Œ์—ˆ๋Š”์ง€๋ฅผ ์ถœ๋ ฅํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

ํ™•์ธ์„ ์œ„ํ•ด์„œ ๋ธŒ๋ผ์šฐ์ €์—์„œ toggle.html ํŒŒ์ผ์„ ์ƒˆ๋กœ๊ณ ์นจํ•˜์—ฌ ๋‹ค์‹œ ์—ด์–ด์ฃผ์‹œ๊ณ ,

ํ™”๋ฉด์—์„œ ์šฐํด๋ฆญ > ๊ฒ€์‚ฌ (inspect)๋ฅผ ์„ ํƒํ•˜์—ฌ ๊ฐœ๋ฐœ์ž๋„๊ตฌ(developer tools)๋ฅผ ์—ด์–ด์„œ consoleํƒญ์„ ์—ด์–ด์ฃผ์„ธ์š”.

๊ทธ๋ฆฌ๊ณ  ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅผ๋•Œ๋งˆ๋‹ค ์–ด๋–ค ๊ฐ’์ด ์ถœ๋ ฅ์ด ๋˜๋Š”์ง€ ํ™•์ธํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

 

ํ† ๊ธ€ ๋ฒ„ํŠผ ๋™์ž‘ ์˜์ƒ

 

์ž, ์ด๋ ‡๊ฒŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ํ† ๊ธ€๋ฒ„ํŠผ์˜ ์ƒํƒœ๊ฐ’์„ ์ถœ๋ ฅํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.

์–ด๋–ค๊ฐ€์š”? ๋ณ„๋กœ ์–ด๋ ต์ง€ ์•Š์ฃ ? css ์Šคํƒ€์ผ์„ ํ•ด์„ํ•˜๊ธฐ ํž˜๋“œ์‹ค ์ˆœ ์žˆ๊ฒ ์œผ๋‚˜, ์—ฌ๊ธฐ์„œ ๊ทธ๋Ÿฐ ๋ถ€๋ถ„์„ ์ž์„ธํ•˜๊ฒŒ ๋‹ค๋ฃจ์ง„ ์•Š๊ฒ ์Šต๋‹ˆ๋‹ค.

์ข€ ๋” ๋‚˜์•„๊ฐ€์„œ ํ† ๊ธ€๋ฒ„ํŠผ์˜ ์ƒํƒœ๊ฐ’์— ๋”ฐ๋ผ ajax ์š”์ฒญ์„ ์„œ๋ฒ„์— ๋‚ ๋ ค ์‹ค์ œ DB๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ฑฐ๋‚˜, 

๋˜๋Š” html์˜ ํŠน์ • element๋ฅผ hideํ•˜๊ฑฐ๋‚˜ showํ•˜๋Š” ๋“ฑ์˜ ๊ธฐ๋Šฅ์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”.

 

๊ทธ๋Ÿผ ์˜ค๋Š˜๋„ ์ฆ๊ฑฐ์šด ์ฝ”๋”ฉํ•˜์‹œ๊ธธ ๋ฐ”๋ž˜์š” ^-^

 

- ๊น๊นํ•œ ๊ฐœ๋ฐœ์ž -

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ด๋ฏธ์ง€ ๋งต

์ด๋ฏธ์ง€ ๋งต์ด๋ž€ ๋ญ˜๊นŒ์š”?

์•„๋ž˜ ์˜ˆ์ œ๋Š” ์ด๋ฏธ์ง€์˜ ํŠน์ • ์˜์—ญ์— ๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ ค๋†“์œผ๋ฉด ํŠน์ • ๊ธฐ๋Šฅ์ด ์‹คํ–‰์ด ๋˜๊ณ  ํด๋ฆญ์„ ํ•˜๋ฉด ํŠน์ • URL๋กœ ์ด๋™์‹œ์ผœ์ฃผ๋„๋ก ๋˜์–ด์žˆ์Šต๋‹ˆ๋‹ค.

์†Œ์Šค๋ฅผ ๋ณด์‹œ๋ฉด <map>๊ณผ <area>ํƒœ๊ทธ๊ฐ€ ์‚ฌ์šฉ๋œ ๊ฒƒ์ด ๋ณด์ด๋Š”๊ตฐ์š”.

<area>์—์„œ๋Š” ์˜์—ญ์„ ์ง€์ •ํ•ด์ฃผ๊ณ  ์˜์—ญ๋‚ด์—์„œ ์ผ์–ด๋‚˜๋Š” ์ด๋ฒคํŠธ์— ๋Œ€ํ•ด์„œ ์–ด๋–ค ๊ธฐ๋Šฅ์„ ์‹คํ–‰ํ• ์ง€ ์ง€์ •ํ•ด์ฃผ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์ด ํƒœ๊ทธ๋“ค์„ <map>ํƒœ๊ทธ๊ฐ€ ๊ฐ์‹ธ๊ณ  ์žˆ๋Š” ํ˜•ํƒœ๊ตฐ์š”.

์‹คํ–‰ํ•ด๋ณด์‹œ๋ฉด ์ดํ•ด๊ฐ€ ์ž˜ ๋ ๊ฒ๋‹ˆ๋‹ค.

<area>ํƒœ๊ทธ์—์„œ coords๋Š” ์˜์—ญ์„ ๋‚˜ํƒ€๋‚ด๋Š” ํฌ์ง€์…˜์„ ๋งํ•ฉ๋‹ˆ๋‹ค.

poly์—์„œ๋Š” ์—ฐ์†๋˜๋Š” ๋‘๊ฐœ์˜ ์ˆซ์ž๊ฐ€ ํ•œ ์ ์˜ ์œ„์น˜๋ฅผ ์ง€์ •ํ•ด์ค๋‹ˆ๋‹ค.

์•„๋ž˜ ์˜ˆ์ œ์—์„œ๋Š” 10๊ฐœ์˜ ์ˆซ์ž๊ฐ€ ์žˆ์œผ๋‹ˆ ์ด 5๊ฐœ์˜ ์ ์œผ๋กœ ํ‘œํ˜„๋˜๊ฒ ๊ตฐ์š”.

rect์—์„œ๋Š” ์‚ฌ๊ฐํ˜•์„ ๊ทธ๋ฆฌ๊ธฐ์œ„ํ•œ ๋„ค๊ฐœ์˜ ์ˆซ์ž๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์™ผ์ชฝ ์•„๋ž˜์˜ ์ ์˜ ์ขŒํ‘œ์™€ ๊ทธ ์ ์˜ ๋Œ€๊ฐ์„ ์— ์œ„์น˜ํ•œ ์ ์˜ ์ขŒํ‘œ๊ฒ ์ฃ .

circle์—์„œ๋Š” ์›์„ ๋‚˜ํƒ€๋‚ด๊ธฐ์œ„ํ•œ ์„ธ๊ฐœ์˜ ์ˆซ์ž๊ฐ€ ์žˆ๋„ค์š”.

์ค‘์‹ฌ์  ์ขŒํ‘œ(์ˆซ์ž 2๊ฐœ)์™€ ๋ฐ˜์ง€๋ฆ„์˜ ๊ฐ’์ธ ๊ฒƒ ๊ฐ™๋„ค์š”.

์ขŒํ‘œ๋ฅผ ํ•˜๋“œ์ฝ”๋”ฉํ•˜์ง€ ์•Š๋Š” ๋ฐฉ๋ฒ•์„ ์ƒ๊ฐํ•ด์„œ ๊ตฌํ˜„ํ•˜๋ฉด ์“ธ๋งŒํ•  ๊ฒƒ๋„ ๊ฐ™๋„ค์š”.

 

<html>
<head>
<title>Using JavaScript Image Map</title>
<script type="text/javascript">
<!--
function showTutorial(name){
  document.myform.stage.value = name
}
//-->
</script>
</head>
<body>
<form name="myform">
   <input type="text" name="stage" size="20" />
</form>
<!-- Create  Mappings -->
<img src="/images/usemap.gif" alt="HTML Map" 
        border="0" usemap="#tutorials"/>

<map name="tutorials">
   <area shape="poly" 
            coords="74,0,113,29,98,72,52,72,38,27"
            href="/perl/index.htm" alt="Perl Tutorial"
            target="_self" 
            onMouseOver="showTutorial('perl')" 
            onMouseOut="showTutorial('')"/>

   <area shape="rect" 
            coords="22,83,126,125"
            href="/html/index.htm" alt="HTML Tutorial" 
            target="_self" 
            onMouseOver="showTutorial('html')" 
            onMouseOut="showTutorial('')"/>

   <area shape="circle" 
            coords="73,168,32"
            href="/php/index.htm" alt="PHP Tutorial"
         target="_self" 
            onMouseOver="showTutorial('php')" 
            onMouseOut="showTutorial('')"/>
</map>
</body>
</html>

 

์‹ค์ œ ๋™์ž‘ํ•˜๋Š” ๋ชจ์Šต์€ tutorialspoint ์‚ฌ์ดํŠธ์—์„œ ํ™•์ธ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

 

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_image_map.htm

์›น์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ• ๋•Œ ์‚ฌ์šฉ์ž์˜ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ฌด์—‡์ธ์ง€๋Š” ์ •๋ง ์ค‘์š”ํ•œ ์š”์†Œ์ด๋‹ค. ๋งŒ์•ฝ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋ชจ๋‘ ์ •์ƒ์ ์ธ ํ™”๋ฉด์„ ๋ณด์—ฌ์ฃผ๋ ค๋ฉด ์ •๋ง ๋งŽ์€ ๋…ธ๋ ฅ์„ ํ•ด์•ผํ•œ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ํ™”๋ฉด์— ๋ณด์—ฌ์ง€๋Š” ๋ชจ์Šต์ด ๋‹ค๋ฅผ๋•Œ๊ฐ€ ๋งŽ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. 

์˜ค๋Š˜์€ ์‚ฌ์šฉ์ž์˜ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ฌด์—‡์ธ์ง€๋ฅผ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๊ฒŒํ•ด์ฃผ๋Š” Navigator ๊ฐ์ฒด์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค.


Navigator ์†์„ฑ

๋„ค๋น„๊ฒŒ์ดํ„ฐ ๊ฐ์ฒด์˜ ์†์„ฑ์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค. 

PropertyDescription
appCodeName๋ธŒ๋ผ์šฐ์ € ๊ณ ์œ ์˜ ์ฝ”๋“œ๋ช…์— ๋Œ€ํ•œ ์†์„ฑ์ด๋‹ค. ๋„ท์Šค์ผ€์ดํ”„๋Š” Netscape , ์ต์Šคํ”Œ๋กœ๋Ÿฌ๋Š” Microsoft Internet Explorer ๊ฐ’์„ ๊ฐ€์ง„๋‹ค.
appVersion๋ธŒ๋ผ์šฐ์ € ๋ฒ„์ „, ์–ธ์–ด, ํ˜ธํ™˜์„ฑ ๋“ฑ๋“ฑ์˜ ์ •๋ณด๋ฅผ ๊ฐ–๋Š” ์†์„ฑ์ด๋‹ค.
language๋„ท์Šค์ผ€์ดํ”„์—์„œ๋งŒ ์‚ฌ์šฉ๋˜๋Š” ์†์„ฑ์ด๋‹ค. ์–ธ์–ด์ฝ”๋“œ๋ฅผ ๋‘๊ฐœ์˜ ์ผ€๋ฆญํ„ฐ๋กœ ๊ฐ–๋Š”๋‹ค. ko, en ์ฒ˜๋Ÿผ ๋ง์ด๋‹ค.
mimTypes[]ํด๋ผ์ด์–ธํŠธ(๋ธŒ๋ผ์šฐ์ €)๊ฐ€ ์ง€์›ํ•˜๋Š” ๋ชจ๋“  MIME ํƒ€์ž…์„ ๊ฐ–๊ณ ์žˆ๋Š” ์†์„ฑ์ด๋‹ค.์—ญ์‹œ ๋„ท์Šค์ผ€์ดํ”„ ์ „์šฉ์ด๋‹ค.
platform[]๋ธŒ๋ผ์šฐ์ €์˜ ํ”Œ๋žซ์ข€ ์ •๋ณด๋ฅผ ๊ฐ–๋Š” ์†์„ฑ์ด๋‹ค."Win32" for 32-bit Windows operating systems
plugins[]๋ธŒ๋ผ์šฐ์ €์— ์„ค์น˜๋œ ๋ชจ๋“  ํ”Œ๋Ÿฌ๊ทธ์ธ์˜ ์ •๋ณด๋ฅผ ๊ฐ–๋Š” ์†์„ฑ์ด๋‹ค. ๋„ท์Šค์ผ€์ดํ”„ ์ „์šฉ์ด๋‹ค.
userAgent[]์ฝ”๋“œ๋ช…๊ณผ ๋ธŒ๋ผ์šฐ์ €์˜ ๋ฒ„์ „์„ ๊ฐ–๋Š” ์†์„ฑ์ด๋‹ค. ์„œ๋ฒ„์—์„œ ํด๋ผ์ด์–ธํŠธ๋ฅผ ๊ตฌ๋ถ„์ง“๊ธฐ์œ„ํ•ด ์‚ฌ์šฉ๋œ๋‹ค.

Navigator ๋ฉ”์†Œ๋“œ

๋‹ค์Œ์€ Navigator์— ํŠนํ™”๋œ ๋ฉ”์†Œ๋“œ๋“ค์ž…๋‹ˆ๋‹ค.

MethodDescription
javaEnabled()์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ํ™œ์„ฑํ™”๋œ ํด๋ผ์ด์–ธํŠธ์ธ์ง€๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰์„ ๊ธˆ์ง€ํ–ˆ๋‹ค๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.
plugings.refresh์ด ๋ฉ”์†Œ๋“œ๋Š” ์ƒˆ๋กœ ์„ค์น˜๋œ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜๋„๋ก ์„ค์ •ํ•˜๊ณ  ๋ชจ๋“  ํ”Œ๋Ÿฌ๊ทธ์ธ ๋ชฉ๋ก์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. Netscape only.
preference(name,value)์„œ๋ช…๋œ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋„ท์Šค์ผ€์ดํ”„์˜ ์†์„ฑ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๊ฑฐ๋‚˜ ์„ธํŒ…ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š” ๋ฉ”์†Œ๋“œ์ž…๋‹ˆ๋‹ค. ๋‘๋ฒˆ์งธ ์ธ์ž๊ฐ€ ์—†์œผ๋ฉด getter์˜ ์—ญํ• ์„ ํ•˜๊ณ  ๋‘๋ฒˆ์งธ ์ธ์ž๋ฅผ ๋„ฃ์–ด์ฃผ๋ฉด setter์˜ ๊ธฐ๋Šฅ์„ ํ•˜๊ฒŒ๋ฉ๋‹ˆ๋‹ค. Netscape only.
taintEnabled()๋ฐ์ดํƒ€ tainting ์˜ ํ™œ์„ฑํ™” ์—ฌ๋ถ€๋ฅผ ์ฐธ, ๊ฑฐ์ง“์œผ๋กœ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. 


๋ธŒ๋ผ์šฐ์ € ๊ตฌ๋ณ„ํ•˜๊ธฐ

์•„๋ž˜ ์†Œ์Šค๋ฅผ ๋ธŒ๋ผ์šฐ์ € ์ข…๋ฅ˜๋ณ„๋กœ ํ…Œ์ŠคํŠธํ•ด๋ณด์„ธ์š”. 

<html>
<head>
<title>Browser Detection Example</title>
</head>
<body>
<script type="text/javascript">
<!--
var userAgent   = navigator.userAgent;
var opera       = (userAgent.indexOf('Opera') != -1);
var ie          = (userAgent.indexOf('MSIE') != -1);
var gecko       = (userAgent.indexOf('Gecko') != -1);
var netscape    = (userAgent.indexOf('Mozilla') != -1);
var version     = navigator.appVersion;

if (opera){
  document.write("Opera based browser");
  // Keep your opera specific URL here.
}else if (gecko){
  document.write("Mozilla based browser");
  // Keep your gecko specific URL here.
}else if (ie){
  document.write("IE based browser");
  // Keep your IE specific URL here.
}else if (netscape){
  document.write("Netscape based browser");
  // Keep your Netscape specific URL here.
}else{
  document.write("Unknown browser");
}
// You can include version to along with any above condition.
document.write("<br /> Browser version info : " + version );
//-->
</script>
</body>
</html>

 

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_browsers_handling.htm

 

 


JavaScript์˜ navigator ๊ฐ์ฒด๋Š” plugins ๊ฐ์ฒด๋ฅผ ์ž์‹์œผ๋กœ ๊ฐ–๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฐ์ฒด๋Š” ๋ฐฐ์—ด์˜ ๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”๋ฐ ๋ธŒ๋ผ์šฐ์ €์— ์„ค์น˜๋˜์–ด์žˆ๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ๋งˆ๋‹ค ๊ฐ๊ฐ ํ•˜๋‚˜์˜ ์—”ํŠธ๋ฆฌ ํฌ์ธํŠธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. navigator.plugins ๊ฐ์ฒด๋Š” Netscape, Firefox ๊ทธ๋ฆฌ๊ณ  Mozilla ์—์„œ๋งŒ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

์•„๋ž˜ ์˜ˆ์ œ๋Š” ๋ธŒ๋ผ์šฐ์ €์— ์„ค์น˜๋˜์–ด์žˆ๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ๋“ค์˜ ๋ชฉ๋ก์„ ๋ชจ๋‘ ์ถœ๋ ฅํ•˜๋Š” ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค.  

<html>
<head>
<title>List of Plug-Ins</title>
</head>
<body>
<table border="1">
<tr>
    <th>Plug-in Name</th>
    <th>Filename</th>
    <th>Description</th>
</tr>
<script language="JavaScript" type="text/javascript">
for (i=0; i<navigator.plugins.length; i++) {
   document.write("<tr><td>");
   document.write(navigator.plugins[i].name);
   document.write("</td><td>");
   document.write(navigator.plugins[i].filename);
   document.write("</td><td>");
   document.write(navigator.plugins[i].description);
   document.write("</td></tr>");
}
</script>
</table>
</body>
</html>

 


ํ”Œ๋Ÿฌ๊ทธ์ธ ๊ฒ€์‚ฌ

๊ฐ ํ”Œ๋Ÿฌ๊ทธ์ธ์€ ๋ฐฐ์—ด์— ํ•˜๋‚˜์˜ ์—”ํŠธ๋ฆฌ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ ์—”ํŠธ๋ฆฌ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

  • name - is the name of the plug-in.

  • filename - is the executable file that was loaded to install the plug-in.

  • description - is a description of the plug-in, supplied by the developer.

  • mimeTypes - is an array with one entry for each MIME type supported by the plug-in.

์•„๋ž˜ ์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ๋ณด์‹ค๊นŒ์š”? 

<html>
<head>
<title>Using Plug-Ins</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
media = navigator.mimeTypes["video/quicktime"];
if (media){
  document.write("<embed src='quick.mov' height=100 width=100>");
}
else{
  document.write("<img src='quick.gif' height=100 width=100>");
}
</script>
</body>
</html>

video/quiktime ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ์„ค์น˜๋˜์–ด์žˆ๋Š”์ง€๋ฅผ ๊ฒ€์‚ฌํ•œ ๋’ค, ์„ค์น˜๊ฐ€ ๋˜์–ด์žˆ์œผ๋ฉด quick.mov๋ฅผ embedํ•˜์—ฌ ํ”Œ๋ ˆ์ด ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€๊ณ  ์„ค์น˜๊ฐ€ ๋˜์–ด์žˆ์ง€ ์•Š์œผ๋ฉด quick.gif๋ผ๋Š” ์ด๋ฏธ์ง€ ํŒŒ์ผ์„ ๋ณด์—ฌ์ฃผ๋„๋ก ํ•˜๋Š” ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค. 

 


๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ๋‹ค๋ฃจ๊ธฐ

๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•˜๋Š” ์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ๋ณด๋„๋ก ํ•  ๊นŒ์š”???

<html>
<head>
<title>Using Embeded Object</title>
<script type="text/javascript">
<!--
function play()
{
  if (!document.demo.IsPlaying()){
    document.demo.Play();
  }
}
function stop()
{
  if (document.demo.IsPlaying()){
    document.demo.StopPlay();
  }
}
function rewind()
{
  if (document.demo.IsPlaying()){
    document.demo.StopPlay();
  }
  document.demo.Rewind();
}
//-->
</script>
</head>
<body>
<embed id="demo" name="demo"
    src="http://www.amrood.com/games/kumite.swf"
    width="318" height="300" play="false" loop="false"
    pluginspage="http://www.macromedia.com/go/getflashplayer"
    swliveconnect="true">
</embed>
<form name="form" id="form" action="#" method="get">
<input type="button" value="Start" onclick="play();" />
<input type="button" value="Stop" onclick="stop();" />
<input type="button" value="Rewind" onclick="rewind();" />
</form>
</body>
</html>

์œ„ ์˜ˆ์ œ๋Š”  

http://www.amrood.com/games/kumite.swf ํŒŒ์ผ์„ ๋กœ๋”ฉํ•ด์„œ ํ™”๋ฉด์— ๋ณด์—ฌ์ฃผ๋Š”๋ฐ,
Start๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด kumite.swfํŒŒ์ผ์ด ์‹คํ–‰์ด ๋˜๋ฉด์„œ ํ”Œ๋ž˜์‰ฌ๊ฒŒ์ž„์ด ์ง„ํ–‰์ด ๋˜์•ผ ํ•˜๋Š”๋ฐ,
์ œ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ๋™์ž‘์„ ์•ˆํ•˜๋„ค์š”? ใ…‹ใ…‹ ์™œ ์•ˆ๋˜๋Š”์ง€ ์ด์œ ๋ฅผ ๋ฐํ˜€์„œ ์˜ฌ๋ฆฌ๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ใ…‹ใ…‹
(embedํƒœ๊ทธ์˜ play์˜ต์…˜์„ true๋กœ ์ฃผ๋ฉด ์‹คํ–‰์ด ๋˜๋Š”๋ฐ ์•„๋งˆ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด
์˜ˆ์ œ์— ๋‚˜์™€์žˆ๋Š” ๊ฒƒ๊ณผ ๋‹ฌ๋ผ์ง„๊ฒƒ์ด ์•„๋‹Œ๊ฐ€ ์‹ถ๋„ค์š”.)

 --------------------------

swfํŒŒ์ผ ์‹คํ–‰์‹œํ‚ค๋Š” ๊ฑฐ ํ•œ์ฐธ ์ฐพ์•„๋ดค๋Š”๋ฐ๋„ ์ž˜ ๋ชจ๋ฅด๊ฒ ๋„ค์š”. UI์ชฝ์€ ์—ญ์‹œ ํž˜๋“ค๊ตฐ์š”...์•„ํ‘....

์•„์‹œ๋Š” ๋ถ„ ๊ณ„์‹œ๋ฉด ๋Œ“๊ธ€์ข€ ๋‚จ๊ฒจ์ฃผ์„ธ์š” ใ… ใ…  

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_multimedia.htm

 

 

 


์ž, ์ด๋ฒˆ์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ํ™”๋ฉด์— ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋ณด์—ฌ์ฃผ๋Š” ๋ฐฉ๋ฒ•์„ ํ•œ๋ฒˆ ๋ฐฐ์›Œ๋ณผ๊นŒ์š”?

 

์‹œ์ž‘ํ•˜๊ธฐ ์ „์— ์ด๋ฏธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ฐ˜์˜ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์กด์žฌํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ๋„˜์–ด๊ฐ‘์‹œ๋‹ค. ( Script.Aculo.us. )

์ด๋Ÿฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐ„ํŽธํ•˜๊ฒŒ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒ ์ง€๋งŒ ๊ทธ๋ž˜๋„ ์–ด๋–ค์‹์œผ๋กœ ๋™์ž‘์„ ํ•˜๋Š”์ง€๋Š” ์•Œ๊ณ ๋„˜์–ด๊ฐ€์•ผ ๋‚˜์ค‘์— ๋ณธ์ธ์ด ์ด๋Ÿฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ˆ˜์ •ํ•ด์„œ ๋” ์ข‹๊ฒŒ ๋ฐ”๊ฟ€ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. 

 

๊ทธ๋Ÿผ ์‹œ์ž‘ํ•ด๋ณผ๊นŒ์š”? ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๊ธฐ๋ณธ์ ์ธ ๊ฐœ๋…์— ๋Œ€ํ•ด์„œ ๋‹ค๋ฃฐ ๊ฒ๋‹ˆ๋‹ค. ์–ด๋–ค ์‹์œผ๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์™„์„ฑ์ด ๋˜๋Š”์ง€ ๋ง์ด์ฃ . 

๊ฐ€์žฅ ๋งŽ์ด ์“ฐ์ด๋Š” ํ•จ์ˆ˜๋ถ€ํ„ฐ ํ™•์ธ์„ ํ•ด๋ณผ๊นŒ์š”?  

  • setTimeout( ํ•จ์ˆ˜๋ช…, ๋ฐ€๋ฆฌ์ดˆ) - ์ง€์ •ํ•œ ๋ฐ€๋ฆฌ์ดˆ ํ›„์— ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œํ‚ต๋‹ˆ๋‹ค. ( ํ•จ์ˆ˜๊ฐ€ ์ข…๋ฃŒ๋œ ๋’ค์— ํŠน์ • ์‹œ๊ฐ„์ด ์ง€๋‚˜๋ฉด ๋‹ค์‹œ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œํ‚ต๋‹ˆ๋‹ค. ) 

  • setInterval( ํ•จ์ˆ˜๋ช…, ๋ฐ€๋ฆฌ์ดˆ) - ์ง€์ •ํ•œ ๋ฐ€๋ฆฌ์ดˆ๊ฐ€ ์ง€๋‚  ๋•Œ๋งˆ๋‹ค ํ•œ๋ฒˆ์”ฉ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œํ‚ต๋‹ˆ๋‹ค. ( ์‹คํ–‰์‹œํ‚จ ํ•จ์ˆ˜๊ฐ€ ๋๋‚˜์ง€ ์•Š์•„๋„ ํŠน์ • ์‹œ๊ฐ„์ด ์ง€๋‚˜๋ฉด ๋˜ ์‹คํ–‰์‹œํ‚ต๋‹ˆ๋‹ค. ) 

  • clearTimeout( setTimeout() ํ•จ์ˆ˜์˜ ๋ณ€์ˆ˜ ) - setTimeout() ํ•จ์ˆ˜์˜ ๋ณ€์ˆ˜์˜ ํƒ€์ด๋จธ๋ฅผ ํด๋ฆฌ์–ด์‹œํ‚ต๋‹ˆ๋‹ค. ( ๋ฌด์Šจ ๋ง์ธ์ง€๋Š” ์˜ˆ์ œ๋ฅผ ๋ณด๋ฉด ์ดํ•ด๊ฐ€ ๊ฐ€์‹ค๊ฒ๋‹ˆ๋‹ค. ) 

๋ณธ๊ฒฉ์ ์œผ๋กœ ์‹œ์ž‘ํ•˜๊ธฐ ์ „์— DOM ๊ฐ์ฒด์˜ ์†์„ฑ์„ ์ด์šฉํ•ด์„œ ํŠน์ • ๊ฐ์ฒด์˜ ์œ„์น˜๋ฅผ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ ๋„˜์–ด๊ฐ€์‹œ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. top ์ด๋‚˜ left ๊ฐ™์€ ์†์„ฑ์„ ์ค„ ์ˆ˜ ์žˆ๋Š”๊ฑฐ์ฃ . ๊ฐ„๋‹จํ•œ ๋ฌธ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or
// Set distance from top edge of the screen.
object.style.top = distance in pixels or points; 

์ˆ˜๋™์  ์• ๋‹ˆ๋ฉ”์ด์…˜

์ด๋ฒˆ ์˜ˆ์ œ๋Š” ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ์ด๋ฏธ์ง€๋ฅผ ์˜ค๋ฅธ์ชฝ์œผ๋กœ 10ํ”ฝ์…€์”ฉ ์›€์ง์—ฌ์ฃผ๋Š” ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค. ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด moveRight()ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœ์„ ํ•˜๋Š”๋ฐ ์ด ํ•จ์ˆ˜๋Š” imgObj.style.left๋ฅผ ์ด์šฉํ•ด์„œ ์™ผ์ชฝ์—์„œ ์–ผ๋งˆ๋‚˜ ๋–จ์–ด์ ธ ์žˆ๋Š”์ง€๋ฅผ ์ง€์ •ํ•ด์ค๋‹ˆ๋‹ค. init()์—์„œ๋Š” left์˜ ์ดˆ๊ธฐ๊ฐ’์„ ์ง€์ •ํ•ด์ฃผ๋Š”๋ฐ ์ด ์ดˆ๊ธฐ๊ฐ’์„ ์ˆซ์ž๋กœ ๋ณ€ํ™˜ํ•œ๋‹ค์Œ 10์„ ๋”ํ•œ๊ฐ’์„ ๋‹ค์‹œ left์— ๋„ฃ์–ด์ฃผ๊ณ  ์žˆ๋„ค์š”. ์ฆ‰, ์ดˆ๊ธฐ์œ„์น˜์—์„œ ๊ณ„์† 10์”ฉ ๋”ํ•ด์ง€๋Š” ํ•จ์ˆ˜๊ฐ€ ๋˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ดํ•ด๊ฐ€ ์•ˆ๋˜์‹œ๋ฉด init()์—์„œ left์˜ ์ˆซ์ž๋ฅผ ๋ณ€๊ฒฝํ•ด์ค€๋‹ค์Œ moveRight()์—์„œ parseInt(...)๋ถ€๋ถ„์„ ๋นผ๊ณ  ๊ทธ๋ƒฅ 10 + 'px'๋งŒ left์— ํ• ๋‹นํ•ด์ค˜ ๋ณด์„ธ์š”. 

<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">

var imgObj = null;
function init(){
   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'relative'; 
   imgObj.style.left = '0px'; 
}
function moveRight(){
   imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init; 

</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>

์œ„ ์˜ˆ์ œ์— ๋Œ€ํ•œ ๋‹จ๊ณ„์  ์‹คํ–‰์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. 

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ getElementById() ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด์„œ DOM ๊ฐ์ฒด๋ฅผ ์–ป์–ด์˜ต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” ์ด๋ฏธ์ง€๊ฐ€ ๋˜๊ฒ ์ฃ . ๊ทธ๋ ‡๊ฒŒ ์–ป์–ด์˜จ ๊ฐ์ฒด๋ฅผ imgObj ๋ณ€์ˆ˜์— ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค.  

  • Window๊ฐ€ ๋กœ๋“œ๋  ๋•Œ init() ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰์ด ๋˜๋ฉด์„œ imgObj ๊ฐ์ฒด์˜ position ๊ณผ left ์†์„ฑ์„ ์ดˆ๊ธฐํ™” ํ•ด์ค๋‹ˆ๋‹ค. 

  • ๊ทธ๋ฆฌ๊ณ  ๋ฒ„ํŠผ์ด ํ™”๋ฉด์— ์ƒ์„ฑ์ด ๋˜๊ณ , ์ด ๋ฒ„ํŠผ์ด ํด๋ฆญ์ด ๋˜๋Š” ์ˆœ๊ฐ„ moveRight() ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋˜๋ฉด์„œ left ๊ฑฐ๋ฆฌ๊ฐ€ 10 ํ”ฝ์…€ ์ฆ๊ฐ€ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด ์ˆซ์ž์— ๋งˆ์ด๋„ˆ์Šค ๋ถ€ํ˜ธ๋ฅผ ๋ถ™์ด๋ฉด ๋ฐ˜๋Œ€์ชฝ์œผ๋กœ ์›€์ง์ด๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

์ž๋™ ์• ๋‹ˆ๋ฉ”์ด์…˜

์œ„์—์„œ๋Š” ๋ฒ„ํŠผ์„ ํด๋ฆญํ–ˆ์„ ๋•Œ ์›€์ง์ด๋„๋ก ํ–ˆ์ง€๋งŒ ์ด๋ฒˆ์—๋Š” ์‹œ๊ฐ„์— ๋”ฐ๋ผ์„œ ์›€์ง์ด๋„๋ก ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ œ์ผ ์ฒ˜์Œ์— ์„ค๋ช…๋“œ๋ฆฐ ์„ธ๊ฐ€์ง€ ํ•จ์ˆ˜๋“ค ์ค‘์—์„œ setTimeout() ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜๋Š” ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค.

<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">

var imgObj = null;
var animate ;
function init(){
   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'relative'; 
   imgObj.style.left = '0px'; 
}
function moveRight(){
   imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
   animate = setTimeout(moveRight,20); // 20 ๋ฐ€๋ฆฌ์ดˆ ๋งˆ๋‹ค moveRight ํ•จ์ˆ˜ ํ˜ธ์ถœ
}
function stop(){
   clearTimeout(animate);
   imgObj.style.left = '0px'; 
}
window.onload =init;

</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>

์ด๋ฒˆ์—๋Š” ์‹œ์ž‘๊ณผ ์ข…๋ฃŒ๋ฒ„ํŠผ ๋‘๊ฐœ๊ฐ€ ์ƒ๊ฒผ๊ณ  ์‹œ์ž‘๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด moveRight()ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ์ด ๋˜๋Š”๋ฐ ์ฒซ๋ฒˆ์งธ ์˜ˆ์ œ์—์„œ ์“ฐ์˜€๋˜ moveRight()๊ณผ๋Š” ์กฐ๊ธˆ ๋‹ค๋ฅด๋„ค์š” ๊ทธ์ตธ? ํ•œ์ค„์ด ๋” ์ƒ๊ฒผ์Šต๋‹ˆ๋‹ค. animate๋ณ€์ˆ˜์— setTimeout(moveRight, 20)์„ ํ• ๋‹นํ•ด์ฃผ์—ˆ๋„ค์š”. setTimeout ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด์„œ moveRightํ•จ์ˆ˜๋ฅผ 20๋ฐ€๋ฆฌ์ดˆ ๋งˆ๋‹ค ์‹คํ–‰์„ ์‹œํ‚ค๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

 

๋งˆ์šฐ์Šค ์ด๋ฒคํŠธ๋ฅผ ์ด์šฉํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜

์•„๋ž˜ ์˜ˆ์ œ๋Š” ๋งˆ์šฐ์Šค๊ฐ€ ํŠน์ • ์ด๋ฏธ์ง€ ์œ„์— ์˜ฌ๋ผ๊ฐ”์„ ๋•Œ ์ด๋ฏธ์ง€๋ฅผ ๋‹ค๋ฅธ ์ด๋ฏธ์ง€๋กœ ๋ณ€๊ฒฝํ•ด์ฃผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. 

<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type="text/javascript">

if(document.images){
    var image1 = new Image();      // Preload an image
    image1.src = "/images/html.gif";
    var image2 = new Image();      // Preload second image
    image2.src = "/images/http.gif";
}

</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href="#" onMouseOver="document.myImage.src=image2.src;"
            onMouseOut="document.myImage.src=image1.src;">
<img name="myImage" src="/images/html.gif" />
</a>
</body>
</html>

์œ„ ์†Œ์Šค๊ฐ€ ์‹คํ–‰๋˜๋Š” ์ˆœ์„œ๋ฅผ ํ•œ๋ฒˆ ๋ณผ๊นŒ์š”? 

  • ํŽ˜์ด์ง€๊ฐ€ ๋กœ๋”ฉ๋  ๋•Œ if ๋ฌธ์—์„œ ์ด๋ฏธ์ง€ ๊ฐ์ฒด๊ฐ€ ์กด์žฌํ•˜๋Š”์ง€ ๊ฒ€์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฏธ์ง€ ๊ฐ์ฒด๊ฐ€ ์กด์žฌํ•˜๋ฉด ๋ธ”๋ฝ๋‚ด์˜ ๋ช…๋ น์„ ์‹คํ–‰ํ•˜์ง€๋งŒ ์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฉด ์‹คํ–‰ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

  • Image() ์ƒ์„œ์ž๋ฅผ ์ด์šฉํ•ด์„œ 2๊ฐœ์˜ ์ด๋ฏธ์ง€ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๊ฐ๊ฐ์˜ ์ด๋ฏธ์ง€ ์†Œ์Šค๋ฅผ ์ง€์ •ํ•ด์ค๋‹ˆ๋‹ค.

  • <a>์—์„œ # (hash mark) ๋Š” ๋งํฌ๋ฅผ ์—†์• ์ฃผ๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ํด๋ž™ํ–ˆ์„ ๋•Œ ํŠน์ • URL๋กœ ๊ฐ€๋ ค๋Š” ์‹œ๋„๋ฅผ ์•ˆํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

  • onMouseOver ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋Š” ๋งˆ์šฐ์Šค๊ฐ€ ๋งํฌ(์ด๋ฏธ์ง€) ์œ„์— ์˜ฌ๋ผ์˜ฌ ๋•Œ ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ฐ˜๋Œ€๋กœ  onMouseOut ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋Š” ๋งˆ์šฐ์Šค๊ฐ€ ๋งํฌ(์ด๋ฏธ์ง€)๋ฐ–์œผ๋กœ ๋‚˜๊ฐˆ ๋•Œ ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค.

 

์ง์ ‘ ํ…Œ์ŠคํŠธํ•ด๋ณด๊ณ  ์ด๊ฒƒ์ €๊ฒƒ ๋ฐ”๊ฟ”์„œ๋„ ํ•ด๋ณด์„ธ์š”. ๊ทธ๋ž˜์•ผ ์‹ค๋ ฅ์ด ์ƒ๊น๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋กœ์„œ์˜ ํž˜์ด ์ƒ๊ธฐ๋Š” ๊ฑฐ์ฃ .

๊ฒŒ์ž„์ผ€๋ฆญํ„ฐํ•œํ…Œ ์•„์ดํ…œ๋งŒ ์‚ฌ์ฃผ์ง€ ๋ง๊ณ  ์—ฌ๋Ÿฌ๋ถ„์˜ ํž˜์„ ๊ธธ๋Ÿฌ๋ณด์„ธ์š”. 

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_animation.htm

 

 

 

 

์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋ผ๋Š” ๋ง์€ ์ข€ ์–ด๋ ต์ฃ ? ๊ฐ„๋‹จํžˆ ๋งํ•˜๋ฉด ๊ทธ๋ƒฅ ๊ฒ€์‚ฌํ•˜๋Š”๊ฒ๋‹ˆ๋‹ค. ๋ณด๋‚ด๋ ค๋Š” ๋ฐ์ดํƒ€๊ฐ€ ์ œ๋Œ€๋กœ ๋œ ํฌ๋งท์œผ๋กœ ์ „๋‹ฌ์ด ๋˜๋Š”์ง€ ์•„๋‹ˆ๋ฉด ํ•„์ˆ˜ ์ž…๋ ฅ๊ฐ’์ด ๋นˆ์นธ์œผ๋กœ ๋‚จ์•„์žˆ์ง€๋Š” ์•Š์€์ง€ ๋“ฑ๋“ฑ์„ ๋ง์ด์ฃ .
์ž ๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋Š” โ€‹ํฌ๊ฒŒ ๋‘๊ฐ€์ง€๋กœ ๋‚˜๋ˆ•๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ๊ฒ€์‚ฌ์™€ ํฌ๋งท๊ฒ€์‚ฌ. ๊ธฐ๋ณธ๊ฒ€์‚ฌ์—์„œ๋Š” ํ•„์ˆ˜์ž…๋ ฅ๊ฐ’์ด ๋นˆ์นธ์œผ๋กœ ๋‚จ์•„์žˆ์ง€๋Š” ์•Š์€์ง€์— ๋Œ€ํ•œ ๊ฒ€์‚ฌ๋ฅผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํฌ๋งท๊ฒ€์‚ฌ์—์„œ๋Š” ์ž…๋ ฅํ•œ ๋ฐ์ดํƒ€์˜ ํฌ๋งท์ด ์„œ๋ฒ„์—์„œ ํ•„์š”๋กœ ํ•˜๋Š” ํฌ๋งท์ด ๋งž๋Š”์ง€๋ฅผ ๊ฒ€์‚ฌ๋ฅผ ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ๋ณผ๊นŒ์š”?? ๊ฒ€์‚ฌ๋ฅผ ํ• ๋•Œ๋Š” ์•„๋ž˜์ฒ˜๋Ÿผ ์ฝ”๋”ฉ์„ ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ฒ€์‚ฌ๋ฅผ ํ•  ๋•Œ ํ•˜๋‚˜์˜ ํ…์ŠคํŠธํ•„๋“œ ๋‹จ์œ„๋กœ ํ•  ์ˆ˜๋„ ์žˆ์„ ๊ฒƒ์ด๊ณ  ๋ชจ๋“  ํ•„๋“œ๋ฅผ ๋Œ€์ƒ์œผ๋กœ ๊ฒ€์‚ฌ๋ฅผ ์ง„ํ–‰ํ•  ์ˆ˜๋„ ์žˆ์„ํ…๋ฐ ์ด๊ฑด ๊ฐœ๋ฐœ์ž์˜ ์žฌ๋Ÿ‰๊ป ์–ด๋–ค์‹์œผ๋กœ ๊ตฌํ˜„ํ•˜๊ฒ ๋‹ค~๋ผ๊ณ  ์ •ํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™๋„ค์š”. 

<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
 <form action="/cgi-bin/test.cgi" name="myForm"  
          onsubmit="return(validate());">
 <table cellspacing="2" cellpadding="2" border="1">
 <tr>
   <td align="right">Name</td>
   <td><input type="text" name="Name" /></td>
 </tr>
 <tr>
   <td align="right">EMail</td>
   <td><input type="text" name="EMail" /></td>
 </tr>
 <tr>
   <td align="right">Zip Code</td>
   <td><input type="text" name="Zip" /></td>
 </tr>
 <tr>
 <td align="right">Country</td>
 <td>
 <select name="Country">
   <option value="-1" selected>[choose yours]</option>
   <option value="1">USA</option>
   <option value="2">UK</option>
   <option value="3">INDIA</option>
 </select>
 </td>
 </tr>
 <tr>
   <td align="right"></td>
   <td><input type="submit" value="Submit" /></td>
 </tr>
 </table>
 </form>
 </body>
 </html>


๊ธฐ๋ณธ๊ฒ€์‚ฌ:

์œ„์—์„œ ๋ณธ ๊ธฐ๋ณธ ํ‹€์—์„œ validationํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.:

<script type="text/javascript">
<!--
// Form validation code will come here.
function validate()
{
 
   if( document.myForm.Name.value == "" )
   {
     alert( "Please provide your name!" );
     document.myForm.Name.focus() ;
     return false;
   }
   if( document.myForm.EMail.value == "" )
   {
     alert( "Please provide your Email!" );
     document.myForm.EMail.focus() ;
     return false;
   }
   if( document.myForm.Zip.value == "" ||
           isNaN( document.myForm.Zip.value ) ||
           document.myForm.Zip.value.length != 5 )
   {
     alert( "Please provide a zip in the format #####." );
     document.myForm.Zip.focus() ;
     return false;
   }
   if( document.myForm.Country.value == "-1" )
   {
     alert( "Please provide your country!" );
     return false;
   }
   return( true );
}
//-->
</script>

์†Œ์Šค๋ฅผ ์‹คํ–‰ํ•ด๋ณด์„ธ์š” ^__^

 

ํฌ๋งท๊ฒ€์‚ฌ:

 ์ด๋ฒˆ์—๋Š” ํฌ๋งท๊ฒ€์‚ฌ๋ฅผ ํ•ด๋ณด๋„๋ก ํ• ํ…๋ฐ์š” ์ด ํฌ๋งท๊ฒ€์‚ฌ๋Š” ์–ด๋–ค ์ž…๋ ฅ์ฐฝ์— ๋“ค์–ด์™€์•ผ ํ•˜๋Š” ์ž…๋ ฅ๊ฐ’์˜ ํฌ๋งท์„ ์ •์˜ํ•˜๋Š” ์ •์ฑ…์ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด ์ด๋ฉ”์ผ์„ ์ž…๋ ฅํ•ด์•ผํ•˜๋Š” ์ž…๋ ฅ๋ž€์—๋Š” asdf@bbc.com๊ณผ ๊ฐ™์€ ํ˜•ํƒœ์˜ ์ด๋ฉ”์ผ ํฌ๋งท์„ ๊ฐ–๊ณ ์žˆ๋Š” ๋ฌธ์ž์—ด์ด ๋“ค์–ด๊ฐ€์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์•„๋ž˜ ์˜ˆ์ œ๋Š” ์ด๋ฉ”์ผ ํ•„๋“œ์— ์ž…๋ ฅ๋œ ๊ฐ’์ด ์ด๋ฉ”์ผ ํ˜•์‹์— ๋งž๋Š”์ง€๋ฅผ ๊ฒ€์‚ฌํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ์ด๋„ค์š”.

<script type="text/javascript">
<!--
function validateEmail()
{
 
   var emailID = document.myForm.EMail.value;
   atpos = emailID.indexOf("@");
   dotpos = emailID.lastIndexOf(".");
   if (atpos < 1 || ( dotpos - atpos < 2 )) 
   {
       alert("Please enter correct email ID")
       document.myForm.EMail.focus() ;
       return false;
   }
   return( true );
}
//-->
</script>

์ง์ ‘ ํ…Œ์ŠคํŠธ ํ•ด๋ณด์‹ค๊ฑฐ์ฃ ?? ^___^

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_form_validations.htm

 

 

 


ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—๋Š” ์„ธ๊ฐ€์ง€ ์ข…๋ฅ˜์˜ ์—๋Ÿฌ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

 (a) ๋ฌธ๋ฒ•์—๋Ÿฌ (b) ๋Ÿฐํƒ€์ž„ ์—๋Ÿฌ (c) ๋…ผ๋ฆฌ์  ์—๋Ÿฌ

๋ฌธ๋ฒ• ์—๋Ÿฌ

๋ฌธ๋ฒ•์—๋Ÿฌ๋Š” ํŒŒ์‹ฑ์—๋Ÿฌ๋ผ๊ณ ๋„ ํ•ฉ๋‹ˆ๋‹ค. ๋ฌธ๋ฒ•์ƒ ๋งž์ง€ ์•Š์•„์„œ ๋ฐœ์ƒํ•˜๋Š” ์—๋Ÿฌ์ฃ . ๋ฌธ๋ฒ•์—๋Ÿฌ๋Š” ์ปดํŒŒ์ผ์‹œ์— ์—๋Ÿฌ๊ฐ€ ์žˆ๋‹ค๊ณ  ์•Œ๋ ค์ฃผ๊ธฐ๋•Œ๋ฌธ์— ์ฐพ๊ธฐ์‰ฌ์šด ์—๋Ÿฌ์ž…๋‹ˆ๋‹ค.

์•„๋ž˜ ์˜ˆ์ œ๋Š” ๋‹ซ๋Š” ๊ด„ํ˜ธ๋ฅผ ๋นผ๋จน์€ ๋ฌธ๋ฒ•์—๋Ÿฌ์ž…๋‹ˆ๋‹ค.

<script type="text/javascript">
<!--
window.print(;
//-->
</script>

 

๋Ÿฐํƒ€์ž„ ์—๋Ÿฌ

๋Ÿฐํƒ€์ž„์—๋Ÿฌ๋Š” ์˜ˆ์™ธ๋ผ๊ณ ๋„ ํ•˜๋ฉฐ ์‹คํ–‰์‹œ์— ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜ ์˜ˆ์ œ๋Š” ๋ฌธ๋ฒ•์€ ์–ด๊ธ‹๋‚˜์ง€ ์•Š์ง€๋งŒ ์‹คํ–‰์‹œ์— ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ์กด์žฌํ•˜์ง€ ์•Š๋Š” ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๋ ค๊ณ  ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด์ฃ .

<script type="text/javascript">
<!--
window.printme();
//-->
</script>

 

๋…ผ๋ฆฌ์  ์—๋Ÿฌ

๋…ผ๋ฆฌ์ ์œผ๋กœ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ ๊ฒƒ์€ ์ฐพ๊ธฐ๊ฐ€ ํž˜๋“  ์—๋Ÿฌ์ž…๋‹ˆ๋‹ค. ๋ฌธ๋ฒ•์ ์œผ๋กœ๋„ ๋งž๊ณ  ์‹คํ–‰์‹œ์— ์•„๋ฌด๋Ÿฐ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š์ง€๋งŒ ์›ํ•˜๋Š” ๊ฐ’์ด ์•ˆ๋‚˜์˜ค๋Š” ๊ทธ๋Ÿฐ ์—๋Ÿฌ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋‚ด๊ฐ€ ๊ตฌํ˜„ํ•œ ๋กœ์ง์ด ์ž˜๋ชป๋˜์–ด์„œ ๋ฐœ์ƒํ•˜๋Š” ์—๋Ÿฌ๋ผ๊ณ  ๋ณด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

try...catch...finally

์ž๋ฐ”์—์„œ ์“ฐ๋Š” try-catch์ ˆ์„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋„ ์“ธ ์ˆ˜๊ฐ€ ์žˆ๋„ค์š”
<script type="text/javascript">
<!--
try {
    // Code to run
    [break;]
} catch ( e ) {
    // Code to run if an exception occurs
    [break;]
}[ finally {
    // Code that is always executed regardless of 
    // an exception occurring
}]
//-->
</script>

 

์˜ˆ์ œ:

์กด์žฌํ•˜์ง€ ์•Š๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ๊ฒฝ์šฐ ์–ด๋–ป๊ฒŒ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š”์ง€ ํ•œ๋ฒˆ ๋ณผ๊นŒ์š”? ์—๋Ÿฌ๋Š” ๋ธŒ๋ผ์šฐ์ €๋ณ„๋กœ ๋‹ค๋ฅธ๊ฒŒ ๋ณด์ผ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ๋ช…์‹ฌํ•˜์„ธ์š”. 

<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
var a = 100;

alert("Value of variable a is : " + myFunc2() );

} //--> </script> </head> <body> <p>Click the following to see the result:</p> <form> <input type="button" value="Click Me" onclick="myFunc();" /> </form> </body> </html>

 

 

์ด์ œ try...catch ์ ˆ์„ ์ด์šฉํ•ด์„œ ์—๋Ÿฌ๋ฅผ ์žก์•„๋ณด๋„๋ก ํ•˜์ฃ .

<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
   var a = 100;
   
   try {
      alert("Value of variable a is : " + myFunc2() );
   } catch ( e ) {
      alert("Error: " + e.description );
   }
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

 

 

finally ๋Š” try-catch์ ˆ์—์„œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋“  ์•ˆํ•˜๋“  ํ•ญ์ƒ ์‹คํ–‰์ด ๋˜๋Š” ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.

<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
   var a = 100;
   
   try {
      alert("Value of variable a is : " + myFunc2()  );
   }catch ( e ) {
      alert("Error: " + e.description );
   }finally {
      alert("Finally block will always execute!" );
   }
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

 

 

throw ์ ˆ

throw์—ญ์‹œ ์ž๋ฐ”์— ์žˆ๋Š” ๊ฐœ๋…์ด์ฃ . ์˜ˆ์™ธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ๋‚ด๊ฐ€ ์ฒ˜๋ฆฌ์•ˆํ•˜๊ณ  ๋‹ค๋ฅธ๋…€์„ํ•œํ…Œ ์ฒ˜๋ฆฌํ•ด๋‹ฌ๋ผ๊ณ  ๋˜์ง€๋Š” ๋†ˆ์ž…๋‹ˆ๋‹ค. throw์˜ ์‚ฌ์ „์  ์˜๋ฏธ๊ฐ€ "๋˜์ง€๋‹ค" ์ž…๋‹ˆ๋‹ค. ์•„๋ž˜ ์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ๋ณด์ฃ .
<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
   var a = 100;
   var b = 0;
   
   try{
      if ( b == 0 ){
         throw( "Divide by zero error." ); 
      }else{
         var c = a / b;
      }
   }catch ( e ) {
      alert("Error: " + e );
   }
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

 

b์— 0์„ ํ• ๋‹นํ•˜๊ณ  b๊ฐ€ 0์ด๋ฉด throw ํ•˜๋„๋ก ๋งŒ๋“  ์˜ˆ์ œ๋„ค์š”. throw๊ฐ€ ์–ด๋–ค ์‹์œผ๋กœ ํ™”๋ฉด์— ํ‘œํ˜„๋˜๋Š”์ง€ ํ•œ๋ฒˆ ์‹คํ–‰ํ•ด๋ณด์„ธ์š”. 

 

onerror() ๋ฉ”์†Œ๋“œ

 onerror ๋ฉ”์†Œ๋“œ๋Š” JavaScript์—์„œ ์—๋Ÿฌํ•ธ๋“ค๋ง์„ ์œ„ํ•ด์„œ ์ œ์ผ ์ฒ˜์Œ ๋‚˜์˜จ ๊ธฐ๋Šฅ์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.  error ์ด๋ฒคํŠธ๋Š” ์›นํŽ˜์ด์ง€์—์„œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„๋•Œ window๊ฐ์ฒด์—์„œ ๋ฐœ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค. ์•„๋ž˜ ์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ๋ณผ๊นŒ์š”.

<html>
<head>
<script type="text/javascript">
<!--
window.onerror = function () {
   alert("An error occurred.");
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ๊ฒฝ๊ณ ์ฐฝ์„ ๋„์šฐ๋„๋ก ํ•ด๋†“๊ณ  ์กด์žฌํ•˜์ง€ ์•Š๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ์˜ˆ์ œ๊ตฐ์š”.

ํ•œ๋ฒˆ ์‹คํ–‰ํ•ด๋ณด์„ธ์š”. 

 

 onerror ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋Š” ์„ธ๊ฐ€์ง€ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

  • ์—๋Ÿฌ๋ฉ”์‹œ์ง€ . ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ณด์—ฌ์ฃผ๋Š” ์—๋Ÿฌ๋ฉ”์‹œ์ง€์ž…๋‹ˆ๋‹ค.

  • URL . ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ ํŒŒ์ผ์„ ์•Œ๋ ค์ค๋‹ˆ๋‹ค.

  • ๋ผ์ธ ๋„˜๋ฒ„ . ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œํ‚จ ๋ผ์ธ์ด ๋ช‡๋ฒˆ์งธ ๋ผ์ธ์ธ์ง€๋ฅผ ์•Œ๋ ค์ค๋‹ˆ๋‹ค.

์ด ์„ธ๊ฐ€์ง€ ์ •๋ณด๋ฅผ ์–ด๋–ป๊ฒŒ๋ฐ›์•„์˜ค๋Š”์ง€ ํ•œ๋ฒˆ ๋ณผ๊นŒ์š”?

<html>
<head>
<script type="text/javascript">
<!--
window.onerror = function (msg, url, line) {
   alert("Message : " + msg );
   alert("url : " + url );
   alert("Line number : " + line );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

 

 

 

 onerror ๋ฉ”์†Œ๋“œ๋Š” ์•„๋ž˜์™€๊ฐ™์ด ์ด๋ฏธ์ง€๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ๋•Œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•ด์„œ ์‚ฌ์šฉ๋  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

<img src="myimage.gif"
    onerror="alert('An error occurred loading the image.')" />

 

์ด onerror๋ฉ”์†Œ๋“œ๋Š” ์ด๋ฏธ์ง€ ํƒœ๊ทธ ์ด์™ธ์—๋„ ๋‹ค๋ฅธ ํƒœ๊ทธ์—์„œ๋„ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•„๋‘์‹œ๋ฉด ์ข‹์„ ๋“ฏ ์‹ถ๋„ค์š”.

 

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_error_handling.htm 

 

 

 

 


์ด๋ฒˆ ํฌ์ŠคํŠธ์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ฐ์ฒด์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณผํ…๋ฐ์š” ๊ฐ์ฒด๊ฐ€ ๋ฌด์—‡์ธ์ง€๋Š” ์•Œ๊ณ ๊ณ„์‹ ๋‹ค๋Š” ์ „์ œํ•˜์— ์‹ค๋ฌด ์œ„์ฃผ์˜ ๋‚ด์šฉ์„ ์–˜๊ธฐํ•ด๋ณด๋„๋ก ํ• ๊ฑฐ์—์š”. ์ž๋ฐ”์˜ ๊ฐ์ฒด์™€ ๋™์ผํ•œ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๋ฉด ๋˜๊ณ  ๋‹จ์ง€ ์‚ฌ์šฉ๋ฒ•์ด ์–ด๋–ค์ง€์— ๋Œ€ํ•ด์„œ ์•Œ๊ณ  ๋„˜์–ด๊ฐ€๋Š” ์ •๋„๋กœ ์Šต๋“ํ•˜์‹œ๋ฉด ๋ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. 

๊ฐ์ฒด์˜ ์†์„ฑ

์ž๋ฐ”๋ฅผ ๊ณต๋ถ€ํ•ด ๋ณด์‹ ๋ถ„๋“ค์ด๋ผ๋ฉด ์•„์‹œ๊ฒ ์ง€๋งŒ ๊ฐ์ฒด ์•ˆ์—๋Š” ํ”„๋ฆฌ๋ฏธํ‹ฐ๋ธŒ ๋ฉค๋ฒ„๋ณ€์ˆ˜๋‚˜ ๋‹ค๋ฅธ ๊ฐ์ฒด๋ฅผ ํ•˜๋‚˜์˜ ๋ณ€์ˆ˜์ฒ˜๋Ÿผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฐ ๋ฉค๋ฒ„๋ณ€์ˆ˜๋“ค์„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ์†์„ฑ์ด๋ผ๊ณ  ์–˜๊ธฐ๋ฅผ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ทธ ์†์„ฑ๋“ค์— ๊ฐ’์„ ๋„ฃ๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.:
๊ฐ์ฒด๋ช….์†์„ฑ๋ช… = ์†์„ฑ๊ฐ’;

์˜ˆ์ œ:

์•„๋ž˜ ์˜ˆ์ œ๋Š” document๊ฐ์ฒด์˜ title์ด๋ผ๋Š” ์†์„ฑ์„ str๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜๋Š” ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค. 

var str = document.title;

๊ฐ์ฒด์˜ ๋ฉ”์†Œ๋“œ

์ด๋ฒˆ์—๋Š” ๋ฉ”์†Œ๋“œ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ฃ .

์˜ˆ์ œ:

์•„๋ž˜ ์˜ˆ์ œ๋Š” document๊ฐ์ฒด ๋‚ด๋ถ€์— ์„ ์–ธ๋˜์–ด์žˆ๋Š” write()๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค. ์ด๋ฏธ ์—ฌ๋Ÿฌ๋ฒˆ ๋ณด์…จ์„ ๊ฒ๋‹ˆ๋‹ค. hello world ๋ญ ์ด๋Ÿฐ ์˜ˆ์ œ์—์„œ ๋ง์ด์ฃ .

document.write("This is test");


์‚ฌ์šฉ์ž ์ •์˜ ๊ฐ์ฒด

๋‹ค ์•„์‹œ๊ฒ ์ง€๋งŒ ๋ชจ๋“  ์‚ฌ์šฉ์ž์ •์˜ ๊ฐ์ฒด์™€ ์ด๋ฏธ ์ •์˜๋˜์–ด์žˆ๋Š” built-in ๊ฐ์ฒด๋“ค์€ Object๋ผ๋Š” ๊ฐ์ฒด์˜ ํ•˜์œ„ ํด๋ž˜์Šค๋“ค์ž…๋‹ˆ๋‹ค.

The new Operator:

์•„๋ž˜ ์˜ˆ์ œ๋Š” new ์˜คํผ๋ ˆ์ดํ„ฐ๋ฅผ ์ด์šฉํ•ด์„œ built-in JavaScript ๊ฐ์ฒด๋“ค์„ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์„ ๋ณด์—ฌ์ฃผ๊ณ ์žˆ์Šต๋‹ˆ๋‹ค.

var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");


Object() ์ƒ์„ฑ์ž:

์ƒ์„ฑ์ž๋ผ๋Š” ๊ฒƒ์€ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์ดˆ๊ธฐํ™”ํ•˜๋Š” ๋ฉ”์†Œ๋“œ์ž…๋‹ˆ๋‹ค. ์œ„ ์˜ˆ์ œ์—์„œ new Object(); ์˜ Object()๋Š”  Object๊ฐ์ฒด์˜ ์ƒ์„ฑ์ž์ž…๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ์ƒ์„ฑ๋œ ๊ฐ์ฒด์— ๋Œ€ํ•œ ๋ ˆํผ๋Ÿฐ์Šค๋ฅผ var๋กœ ์„ ์–ธํ•œ employee์— ํ• ๋‹นํ•ด์ฃผ๋ฉด ๋‚˜์ค‘์— ์ด ๊ฐ์ฒด์— ์ ‘๊ทผํ•  ๋•Œ employee๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋งŒ์•ฝ employee๊ฐ€ ์ด๋ฆ„๊ณผ ๋‚˜์ด๋ฅผ ์†์„ฑ์œผ๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๊ณ  ํ•œ๋‹ค๋ฉด ์ด๋Ÿฐ ๊ฒƒ์€ ์–ด๋–ป๊ฒŒ ๊ฐ’์„ ๋„ฃ์„ ์ˆ˜ ์žˆ์„ ๊นŒ์š”? ์†์„ฑ์€ ๋ณ€์ˆ˜๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ varํ‚ค์›Œ๋“œ๋กœ ์„ ์–ธ์„ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ๋ณด๋„๋ก ํ•˜์ฃ . 

์˜ˆ์ œ 1:

์•„๋ž˜ ์˜ˆ์ œ๋Š” ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๊ทธ ๊ฐ์ฒด์˜ ์†์„ฑ์„ ์ •์˜ํ•ด์ค๋‹ˆ๋‹ค.

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
var book = new Object();   // Create the object
    book.subject = "Perl"; // Assign properties to the object
    book.author  = "Mohtashim";
</script>
</head>
<body>
<script type="text/javascript">
   document.write("Book name is : " + book.subject + "<br>");
   document.write("Book author is : " + book.author + "<br>");
</script>
</body>
</html>

 

 

์˜ˆ์ œ 2:

์ด๋ฒˆ ์˜ˆ์ œ๋Š” ์‚ฌ์šฉ์ž ์ •์˜ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“œ๋Š” ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ this ํ‚ค์›Œ๋“œ๋Š” ํ•จ์ˆ˜๋กœ ์ „๋‹ฌ๋œ ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ•˜๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">
function book(title, author){
    this.title = title; 
    this.author  = author;
}
</script>
</head>
<body>
<script type="text/javascript">
   var myBook = new book("Perl", "Mohtashim");
   document.write("Book title is : " + myBook.title + "<br>");
   document.write("Book author is : " + myBook.author + "<br>");
</script>
</body>
</html>

 

 

๊ฐ์ฒด์˜ ๋ฉ”์†Œ๋“œ ์ •์˜ํ•˜๊ธฐ

์ด๋ฒˆ์—๋Š” ๊ฐ์ฒด์˜ ๋ฉ”์†Œ๋“œ๋ฅผ ์ •์˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์˜ˆ์ œ:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">

// ๊ฐ์ฒด์˜ ๋ฉ”์†Œ๋“œ๊ฐ€ ๋  ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
function addPrice(amount){
    this.price = amount; 
}

function book(title, author){
    this.title = title; 
    this.author  = author;
    this.addPrice = addPrice; // ๋ฉ”์†Œ๋“œ๋ฅผ ์†์„ฑ์œผ๋กœ ํ• ๋‹น(์„ ์–ธ)ํ•ฉ๋‹ˆ๋‹ค.
}

</script>
</head>
<body>
<script type="text/javascript">
   var myBook = new book("Perl", "Mohtashim");
   myBook.addPrice(100);
   document.write("Book title is : " + myBook.title + "<br>");
   document.write("Book author is : " + myBook.author + "<br>");
   document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>

 

 

with ํ‚ค์›Œ๋“œ

with ํ‚ค์›Œ๋“œ๋Š” ๊ฐ์ฒด์˜ ์†์„ฑ์ด๋‚˜ ๋ฉ”์†Œ๋“œ๋ฅผ ์ฐธ์กฐํ•˜๊ธฐ์œ„ํ•œ ๋‹จ์ถ•ํ‚ค์›Œ๋“œ ๊ฐ™์€ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

with์— ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ์ „๋‹ฌ๋œ ๊ฐ์ฒด๋Š” ํ•ด๋‹น ๋ธ”๋ฝ๋‚ด์—์„œ ๊ธฐ๋ณธ์ ์ธ ์ฐธ์กฐ๋ณ€์ˆ˜์ฒ˜๋Ÿผ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.๋”ฐ๋ผ์„œ ํ•ด๋‹น ๊ฐ์ฒด์˜ ์†์„ฑ์ด๋‚˜ ๋ฉ”์†Œ๋“œ์— ์ ‘๊ทผํ•  ๋•Œ ๊ถ‚์ด ํ•ด๋‹น ๊ฐ์ฒด์ด๋ฆ„๊ณผ ์ ์„ ์•ˆ์ฐ์–ด๋„ ๋ฉ๋‹ˆ๋‹ค.

๋ฌธ๋ฒ•:

with (object){
    properties used without the object name and dot
}

์˜ˆ์ œ:

<html>
<head>
<title>User-defined objects</title>
<script type="text/javascript">

// Define a function which will work as a method
function addPrice(amount){
    with(this){
       price = amount; 
    }
}
function book(title, author){
    this.title = title; 
    this.author  = author;
    this.price = 0;
    this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body>
<script type="text/javascript">
   var myBook = new book("Perl", "Mohtashim");
   myBook.addPrice(100);
   document.write("Book title is : " + myBook.title + "<br>");
   document.write("Book author is : " + myBook.author + "<br>");
   document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>

 

 

 

 

 

 Reference : http://www.tutorialspoint.com/javascript/javascript_objects.htm 

 

 

 


์ด๋ฒˆ์—๋Š” void ํ‚ค์›Œ๋“œ์— ๋Œ€ํ•ด์„œ ํ•œ๋ฒˆ ์•Œ์•„๋ณด๋„๋ก ํ• ๊นŒ์š”?  

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” void๋Š” ์ž๋ฐ”์˜ void์™€ ๋ณ„๋ฐ˜ ๋‹ค๋ฅผ๊ฒŒ ์—†์–ด๋ณด์ž…๋‹ˆ๋‹ค.

์šฐ์„  ์ œ๊ฐ€ ์กฐ์‚ฌํ•œ ๋ฐ”์— ์˜ํ•˜๋ฉด void์˜ ์—ญํ• ์„ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

void keyword evaluates the expression and always returns undefined.

ํ•œ๋งˆ๋””๋กœ "ํ‘œํ˜„์‹์„ ํ‰๊ฐ€ํ•˜๊ณ  ํ•ญ์ƒ undefined๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค"๋„ค์š”. ์ด๊ฒŒ ๋ฌด์Šจ ๋ง์ผ๊นŒ์š”? ์•„์‹œ๋Š” ๋ถ„์€ ๋Œ“๊ธ€์ข€ ๋‚จ๊ฒจ์ฃผ์„ธ์š” ใ…Žใ…Ž   

์‚ฌ์‹ค ํฌ์ŠคํŒ…์€ ํ•˜๋Š”๋ฐ ์ด๊ฒŒ ๋„๋Œ€์ฒด ์–ธ์ œ ์–ด๋–ป๊ฒŒ ์“ฐ์ด๋Š”์ง€์— ๋Œ€ํ•ด์„œ๋Š” ์ €๋„ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ์–ด์จŒ๋“  ์ด๋Ÿฐ ๊ฒƒ๋„ ์žˆ๊ตฌ๋‚˜ ํ•˜์‹œ๋ฉด์„œ ๋ณด์‹œ๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค. 

์ผ๋‹จ ์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ๋ณด๋Š”๊ฒŒ ๋‚ซ๊ฒ ์ฃ ?  

์•„๋ž˜์— ๊ธฐ๋ณธ์ ์ธ ์˜ˆ์ œ๊ฐ€ ๋‚˜์™€์žˆ๋„ค์š”.

 

<head>
<script type="text/javascript">
<!--
void func()
javascript:void func()

or:

void(func())
javascript:void(func())
//-->
</script>
</head>

์˜ˆ์ œ 1:

void ํ‚ค์›Œ๋“œ๊ฐ€ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ๊ณณ์€ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ์˜ javascript: URLโ€‹ ์ด๋ผ๊ณ  ํ•˜๋„ค์š”. ์ด ์˜ˆ์ œ์—์„œ๋Š” alertํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ์š”

ํ•œ๋ฒˆ ์‹คํ–‰์‹œ์ผœ ๋ณด์„ธ์š”. void ( )๋ฅผ ์—†์• ๊ณ  ๊ทธ๋ƒฅ alert('Warning!!!')๋งŒ ์จ๋„ ๊ฒฐ๊ณผ๋Š” ๋˜‘๊ฐ™์ด ๋‚˜์˜ต๋‹ˆ๋‹ค. ์ฐจ์ด๊ฐ€ ๋ญ”์ง€ ์ €๋„ ์•„์ง ์ž˜ ๋ชจ๋ฅด๊ฒ ๋„ค์š”. 

<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<a href="javascript:void(alert('Warning!!!'))">Click me!</a>
</body>

 

 

 

์˜ˆ์ œ 2:

์ด๋ฒˆ ์˜ˆ์ œ์—์„œ๋Š” void( )์•ˆ์— "0" ๋งŒ ์จ๋„ฃ์—ˆ๋„ค์š”. ์‚ฌ์‹ค ์ €๋„ ์ด๊ฒŒ ์ •ํ™•ํžˆ ๋ญ˜ ์˜๋ฏธํ•˜๋Š”์ง€ ์ž˜์€ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ ์ œ๊ฐ€ ์ฐธ์กฐํ•œ ์‚ฌ์ดํŠธ์— ์˜ํ•˜๋ฉด ๋‹ค์Œ์ฒ˜๋Ÿผ ์–˜๊ธฐํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. Here the expression "0" is evaluated but it is not loaded back into the current document. 0 ์ด๋ผ๋Š” ๊ฐ’์ด ํ‰๊ฐ€๊ฐ€ ๋˜๊ธฐ๋Š” ํ•˜๋Š”๋ฐ ํ˜„์žฌ๋ฌธ์„œ๋กœ load๋˜์ง€๋Š” ์•Š๋Š”๋‹ค๊ณ  ๋ง์ด์ฃ . ์ž, ๊ฒฐ๊ณผ๊ฐ€ ์˜ˆ์ œ 1๊ณผ ๋ญ๊ฐ€ ๋‹ค๋ฅธ๊ฐ€์š”? ๋งํฌ๋ฅผ ๋ˆŒ๋Ÿฌ๋„ ์•„๋ฌด๋Ÿฐ ๋ณ€ํ™”๊ฐ€ ์•ˆ๋ณด์ด์ฃ ? 

<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<a href="javascript:void(0))">Click me!</a>
</body>

 

 

์˜ˆ์ œ 3:

์ด๋ฒˆ ์˜ˆ์ œ์—์„œ๋Š” void ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•จ์œผ๋กœ์จ ๊ณ ์˜์ ์œผ๋กœ undefined ๊ฐ’์„ a์— ํ• ๋‹นํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ญ ์‹ค์ œ๋กœ ์ด๋ ‡๊ฒŒ ์“ธ๋งŒํ•œ ์ผ์€ ์—†์„ ๊ฒƒ ๊ฐ™์ง€๋งŒ ์ด๋Ÿฐ ์˜ˆ์ œ๋„ ์žˆ๊ตฌ๋‚˜ ํ•˜์‹œ๋ฉด ๋  ๊ฒƒ ๊ฐ™๋„ค์š”. 

<head>
<script type="text/javascript">
<!--
function getValue(){
   var a,b,c;

   a = void ( b = 5, c = 7 );
   document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="getValue();" />
</body>

 

 

 

์˜ˆ์ œ 4:

๋งˆ์ง€๋ง‰ ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ์˜ˆ์ œ์—์„œ๋Š” void( )์•ˆ์—์„œํŠน์ • ๋ณ€์ˆ˜์— ๊ฐ’์„ ํ• ๋‹นํ•˜๊ณ  ํ• ๋‹น๋œ ๊ฐ’์„ ๊ฒฝ๊ณ ์ฐฝ์„ ์ด์šฉํ•ด์„œ ๋ฟŒ๋ ค์ฃผ๊ณ ์žˆ์Šต๋‹ˆ๋‹ค.

์‚ฌ์‹ค voidํ‚ค์›Œ๋“œ๊ฐ€ ์—†์–ด๋„ ๊ฒฐ๊ณผ๋Š” ๋™์ผํ•˜๊ฒŒ ๋‚˜์˜ต๋‹ˆ๋‹ค๋งŒ....๋„๋Œ€์ฒด ์™œ voidํ‚ค์›Œ๋“œ๋ฅผ ์“ฐ๋Š”์ง€๋Š” ๋ชจ๋ฅด๊ฒ ๋„ค์š” ใ…Žใ…Ž;;;; 

<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<a href="javascript: void(myNum=10);alert('myNum = '+myNum)">
Set myNum Please</a>
</body>

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_void_keyword.htm

 

 

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์„ธ ์ข…๋ฅ˜์˜ ๋‹ค์ด์–ผ๋กœ๊ทธ ๋ฐ•์Šค๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์–ด๋–ค ๊ฒƒ๋“ค์ด ์žˆ๋Š”์ง€ ํ•œ๋ฒˆ ๋ณผ๊นŒ์š”??  

๊ฒฝ๊ณ 

์‚ฌ์šฉ์ž์—๊ฒŒ ๊ฒฝ๊ณ ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด์—ฌ์ค„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ•์Šค์ฃ . ํ•„์ˆ˜๊ฐ’์„ ์ž…๋ ฅํ•˜์ง€ ์•Š๊ณ  ์ง„ํ–‰ํ•˜๋ ค๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ๊ฒฝ๊ณ ๋ฅผ ํ•  ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. 

 

<head>
<script type="text/javascript">
<!--
   alert("Warning Message");
//-->
</script>
</head>

๊ฒฝ๊ณ ์ฐฝ์€ OK๋ฒ„ํŠผ ํ•˜๋‚˜๋งŒ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ญ”๊ฐ€๋ฅผ ์•Œ๋ ค์ฃผ๊ณ  ์•Œ๊ฒ ๋‹ค๋Š” ๋ง์„ ํ•ด์ฃผ๊ณ  ์‚ฌ์šฉ์ž๊ฐ€ ๊ทธ ๋ง์„ ํ™•์ธํ–ˆ๋‹ค๋Š” ํ™•์ธ๋ฒ„ํŠผ๋งŒ ์žˆ๋Š”๊ฑฐ์ฃ . 


ํ™•์ธ

ํ™•์ธ์ฐฝ์€ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ •๋ง ์‹คํ–‰ํ•˜๊ฒ ์Šต๋‹ˆ๊นŒ? ์™€ ๊ฐ™์€ ์งˆ๋ฌธ์„ ํ•˜๊ณ  ํ™•์ธ์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.๊ทธ๋ž˜์„œ ๋ฒ„ํŠผ์ด ๋‘๊ฐœ๊ฐ€ ์žˆ์ฃ . ํ™•์ธ๋ฒ„ํŠผ๊ณผ ์ทจ์†Œ๋ฒ„ํŠผ์ด์š”.

์‚ฌ์šฉ์ž๊ฐ€ ํ™•์ธ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด confirm() ๋ฉ”์†Œ๋“œ๋Š” ์ฐธ์„ ๋ฐ˜ํ™˜ํ•˜๊ณ  ์ทจ์†Œ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ๊ฑฐ์ง“์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.๊ทธ๋ฆฌ๊ณ  ๊ฑฐ๊ธฐ์— ๋”ฐ๋ผ์„œ ์–ด๋– ํ•œ ๋กœ์ง์„ ํƒœ์šธ์ง€๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ฒฐ์ •ํ•˜๋ฉด ๋˜๋Š”๊ฑฐ์ฃ .

 

<head>
<script type="text/javascript">
<!--
   var retVal = confirm("Do you want to continue ?");
   if( retVal == true ){
      alert("User wants to continue!");
   return true;
   }else{
      alert("User does not want to continue!");
   return false;
   }
//-->
</script>
</head>

 


ํ”„๋กฌํ”„ํŠธ

ํ”„๋กฌํ”„ํŠธ ์ฐฝ์€ ์‚ฌ์šฉ์ž๋กœ๋ถ€ํ„ฐ ์–ด๋–ค ์ž…๋ ฅ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ์ฐฝ์ž…๋‹ˆ๋‹ค. prompt() ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ ๋‘๊ฐœ์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๋ฐ›์Šต๋‹ˆ๋‹ค. ํ”„๋กฌํ”„ํŠธ์ฐฝ์˜ ๋ผ๋ฒจ๊ณผ ์ฐฝ์— ํ‘œ์‹œ๋  ํ…์ŠคํŠธ. ์—ญ์‹œ ๋ฒ„ํŠผ์€ ํ™•์ธ๊ณผ ์ทจ์†Œ ๋‘๊ฐœ์˜ ๋ฒ„ํŠผ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ํ™•์ธ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด prompt() ๋ฉ”์†Œ๋“œ๋Š” ์ž…๋ ฅ๋œ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜๊ณ  ์ทจ์†Œ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด null์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.


<head>
<script type="text/javascript">
<!--
   var retVal = prompt("Enter your name : ", "your name here");
   alert("You have entered : " +  retVal );
//-->
</script>
</head>

 

 ์ง์ ‘ ํ…Œ์ŠคํŠธ ํ•ด๋ณด์„ธ์š”. ์—ฐ์Šต์€ 10๋ฒˆ์”ฉ ํ•ด์•ผ ์†์— ์ต๊ณ  ๋ˆˆ์— ์ต๊ณ  ์‹ค๋ ฅ์œผ๋กœ ๋‚จ์Šต๋‹ˆ๋‹ค. 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_dialog_boxes.htm

 


๊ธฐ๋ณธ์ ์ธ ํŽ˜์ด์ง€ ๋ฆฌ๋””๋ ‰์…˜

๊ฐ„๋‹จํ•œ ํŽ˜์ด์ง€ ๋ฆฌ๋””๋ ‰์…˜์€ ์•„๋ž˜์ฒ˜๋Ÿผ ํ•˜์‹œ๋ฉด ๋˜์š”~

<head>
<script type="text/javascript">
<!--
   window.location="http://www.newlocation.com";
//-->
</script>
</head>

 

 


๋ฆฌ๋””๋ ‰์…˜ ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ  ํŠน์ • ์‹œ๊ฐ„ ํ›„์— ๋ฆฌ๋””๋ ‰์…˜ํ•˜๊ธฐ

<head>
<script type="text/javascript">
<!--
function Redirect()
{
    window.location="http://www.newlocation.com";
}

document.write("You will be redirected to main page in 10 sec.");
setTimeout('Redirect()', 10000);
//-->
</script>
</head>

์—ฌ๊ธฐ์„œ ์‚ฌ์šฉ๋œ setTimeout() ๋ฉ”์†Œ๋“œ๋Š” JavaScript์—์„œ ๊ธฐ๋ณธ์œผ๋กœ ์ œ๊ณตํ•˜๋Š” ๋ฉ”์†Œ๋“œ๋กœ ํŠน์ • ์‹œ๊ฐ„ ํ›„์— ๋‹ค๋ฅธ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๊ฒŒ๋” ํ•ด์ค๋‹ˆ๋‹ค.

 


๋ธŒ๋ผ์šฐ์ € ์ข…๋ฅ˜์— ๋”ฐ๋ฅธ ๋ฆฌ๋””๋ ‰์…˜

<head>
<script type="text/javascript">
<!--
var browsername=navigator.appName; 
if( browsername == "Netscape" )
{ 
   window.location="http://www.location.com/ns.htm";
}
else if ( browsername =="Microsoft Internet Explorer")
{
   window.location="http://www.location.com/ie.htm";
}
else
{
  window.location="http://www.location.com/other.htm";
}
//-->
</script>
</head>

 

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_page_redirect.htm

 

 

 


์ด๋ฒˆ์—๋Š” ์ฟ ํ‚ค๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ^___^

Cookies ๋งŒ๋“ค๊ธฐ

๋ฌธ๋ฒ•๋ถ€ํ„ฐ ๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.
document.cookie = "key1=value1;key2=value2;expires=date";

์—ฌ๊ธฐ์„œ expires ์†์„ฑ์€ ์˜ต์…˜์ž…๋‹ˆ๋‹ค. ์ฟ ํ‚ค์˜ ์ƒ๋ช…์ฃผ๊ธฐ๋ฅผ ์ง€์ •ํ•ด์ฃผ๋Š” ์†์„ฑ์ด์ฃ . ์ง€์ •๋œ ์‹œ์ผ์ด ์ง€๋‚˜๋ฉด ์ฟ ํ‚ค๋Š” ๋”์ด์ƒ ์œ ํšจํ•˜์ง€ ์•Š๊ฒŒ๋ฉ๋‹ˆ๋‹ค.

Note: ์ฟ ํ‚ค ๊ฐ’์€ ์„ธ๋ฏธ์ฝœ๋ก ์ด๋‚˜ ์‰ผํ‘œ ๋˜๋Š” ์ŠคํŽ˜์ด์Šค๋ฅผ ํฌํ•จํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ €์žฅํ•˜๊ธฐ ์ „์— escape() ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด์„œ ์ธ์ฝ”๋”ฉํ•œ ๊ฐ’์„ ์ด์šฉํ•˜๊ธฐ๋„ ํ•˜์ฃ . escape()ํ•จ์ˆ˜๋กœ ์ธ์ฝ”๋”ฉํ•ด์„œ ์ €์žฅ์„ ํ–ˆ์„ ๋•Œ๋Š” unescape() ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด์„œ decodeํ•ด์•ผ ์ฟ ํ‚ค๊ฐ’์„ ์ œ๋Œ€๋กœ ์ฝ์–ด์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

 

์•„๋ž˜ ์˜ˆ์ œ๋Š” input์ฟ ํ‚ค์— customer์˜ ์ด๋ฆ„์„ ์ €์žฅํ•˜๋Š” ๊ฒƒ์„ ๋ณด์—ฌ์ฃผ๊ณ ์žˆ์Šต๋‹ˆ๋‹ค.

<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
   if( document.myform.customer.value == "" ){
      alert("Enter some value!");
      return;
   }

   cookievalue= escape(document.myform.customer.value) + ";";
   document.cookie="name=" + cookievalue;
   alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie();"/>
</form>
</body>
</html>

Cookies ์ฝ๊ธฐ

โ€‹์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์ฟ ํ‚ค๋Š” document.cookie ๊ฐ์ฒด๋ผ๋Š” ๊ฒƒ์€ ์œ„์—์„œ ์•Œ๊ฒŒ๋˜์…จ์„๊ฒ๋‹ˆ๋‹ค. ์ฟ ํ‚ค์—๋Š” key, valueํŽ˜์–ด๊ฐ€ ์—ฌ๋Ÿฌ๊ฐœ๊ฐ€ ๋“ค์–ด๊ฐ€์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  key์™€ value๋Š” ๊ฐ๊ฐ ์„ธ๋ฏธ์ฝœ๋ก ์œผ๋กœ ๊ตฌ๋ถ„์ด ๋˜์–ด์ง‘๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ฟ ํ‚ค๋ฅผ ์ฝ์„๋•Œ๋Š” split() ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

 

์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ๋ณด์‹œ์ฃ .

<html>
<head>
<script type="text/javascript">
<!--
function ReadCookie()
{
   var allcookies = document.cookie;
   alert("All Cookies : " + allcookies );

   // Get all the cookies pairs in an array
   cookiearray  = allcookies.split(';');

   // Now take key value pair out of this array
   for(var i=0; i<cookiearray.length; i++){
      name = cookiearray[i].split('=')[0];
      value = cookiearray[i].split('=')[1];
      alert("Key is : " + name + " and Value is : " + value);
   }
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
<input type="button" value="Get Cookie" onclick="ReadCookie()"/>
</form>
</body>
</html>

 

 

์œ„ ์†Œ์Šค๋Š” ์—ฌ๋Ÿฌ๋ถ„ ์ปดํ“จํ„ฐ์— ์ €์žฅ๋œ ์ฟ ํ‚ค๋ฅผ ์ฝ์–ด๋“ค์—ฌ์„œ ํ‚ค, ๊ฐ’ ํŽ˜์–ด๋ฅผ ํ™”๋ฉด์— ์ถœ๋ ฅํ•˜๊ฒŒ๋ฉ๋‹ˆ๋‹ค. 

์ง์ ‘ ํ•œ๋ฒˆ ์‹คํ–‰ํ•ด ๋ณด์„ธ์š”~~ ^__^ 

Cookies ๋งŒ๋ฃŒ์ผ์ž ์„ค์ •ํ•˜๊ธฐ

์˜ˆ์ œ๋กœ ๋ฐฐ์›Œ๋ด…์‹œ๋‹ค~~ ์•„๋ž˜ ์˜ˆ์ œ๋Š” ์ฟ ํ‚ค์˜ ๋งŒ๋ฃŒ์ผ์ž๋ฅผ 1๋‹ฌ๋’ค๋กœ ์„ค์ •ํ•˜๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

 

<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
   var now = new Date();
   now.setMonth( now.getMonth() + 1 ); 
   cookievalue = escape(document.myform.customer.value) + ";"
   document.cookie="name=" + cookievalue;
   document.cookie = "expires=" + now.toUTCString() + ";"
   alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>

Cookie ์‚ญ์ œํ•˜๊ธฐ

์‚ญ์ œ๋ฅผ ํ•˜๋Š” ๊ฒƒ์€ ์‹ค์ œ๋กœ ์‚ญ์ œ๋ฅผ ํ•˜๋Š”๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๋‹จ์ง€ ๋งŒ๋ฃŒ์ผ์ž๋ฅผ ๊ณผ๊ฑฐ์ผ์ž๋กœ ์„ธํŒ…ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์•„๋ž˜ ์˜ˆ์ œ๋ฅผ ๋ณด์‹ค๊นŒ์š”?


<html>
<head>
<script type="text/javascript">
<!--
function WriteCookie()
{
   var now = new Date();
   now.setMonth( now.getMonth() - 1 ); 
   cookievalue = escape(document.myform.customer.value) + ";"
   document.cookie="name=" + cookievalue;
   document.cookie = "expires=" + now.toUTCString() + ";"
   alert("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="formname" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>

 

 

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_cookies.htm 

 

 

 


Event ๋ž€?

์ด๋ฒคํŠธ๊ฐ€ ๋ญ˜๊นŒ์š”? ์ด๋ฒคํŠธ๋Š” ์–ด๋–ค ๋™์ž‘์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์›น๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋˜๋Š” ์›น๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์–ด๋–ค ๋™์ž‘์„ ํ•˜๋Š” ๊ฒƒ์„ ์ด๋ฒคํŠธ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ƒ์ผํŒŒํ‹ฐ๋‚˜ ์ถ•ํ•˜์ด๋ฒคํŠธ ๊ฐ™์€ ๊ทธ๋Ÿฐ ๊ฒƒ๊ณผ ํ˜ผ๋™ํ•˜์‹œ๋ฉด ์•ˆ๋ฉ๋‹ˆ๋‹ค ใ…‹ใ…‹ใ…‹

 

๊ฐ€์žฅ ํ”ํ•˜๊ฒŒ ์“ฐ์ด๋Š” ์ด๋ฒคํŠธ๋Š” ํด๋ฆญ์ž…๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋Š” ๊ฒƒ. ์ด๊ฒƒ๋„ ํ•˜๋‚˜์˜ ์ด๋ฒคํŠธ์ด์ฃ .

๊ทธ๋Ÿผ ์˜จํด๋ฆญ ์ด๋ฒคํŠธ์— ๋Œ€ํ•ด์„œ ํ•œ๋ฒˆ ์‚ดํŽด๋ณผ๊นŒ์š”? 

onclick ์˜ˆ์ œ

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

 

์œ„ ์†Œ์Šค๋Š” ํ™”๋ฉด์— ๋ฒ„ํŠผ์„ ํ•˜๋‚˜ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ทธ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด sayHello()ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

onsubmit ์˜ˆ์ œ

onclick ์ด๋ฒคํŠธ ๋‹ค์Œ์œผ๋กœ ๋งŽ์ด ์“ฐ์ด๋Š”๊ฒŒ ์•„๋งˆ onsubmit์ด๋ฒคํŠธ์ผ๊ฒ๋‹ˆ๋‹ค. ์ด ์ด๋ฒคํŠธ๋Š” ํผ ํƒœ๊ทธ์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ submitํ•˜๊ฒŒ ๋˜๋ฉด ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ์ฃ .

  

<html>
<head>
<script type="text/javascript">
<!--
function validation() {
   // ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ์—ฌ๊ธฐ๋‹ค๊ฐ€ ํ•˜์‹œ๋ฉด๋ฉ๋‹ˆ๋‹ค.
   .........
   return true  // or false
}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>

 

์œ„ ์†Œ์Šค๋ฅผ ๋ถ„์„ํ•ด๋ณด๋ฉด...์Œ...submit๋ฒ„ํŠผ์ด ์žˆ๊ณ  submit๋ฒ„ํŠผ์ด ๋ˆŒ๋ฆด๋•Œ return validate()๋ฅผ ํ•˜๋Š”๋ฐ ์ด๋Š” validate()์—์„œ ๋ฐ›์€ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ฒ ๋‹ค๋Š” ์˜๋ฏธ์ž…๋‹ˆ๋‹ค.

โ€‹

onmouseover ์™€ onmouseout:

์ด ์ด๋ฒคํŠธ๋“ค์€ ๋งˆ์šฐ์Šค๊ฐ€ ํ™”๋ฉด์˜ ํŠน์ • ์ง€์—ญ ์•ˆ์— ์žˆ๋Š”์ง€ ๋˜๋Š” ํŠน์ • ์ง€์—ญ ์•ˆ์— ์žˆ๋‹ค๊ฐ€ ๋ฐ–์œผ๋กœ ๋‚˜๊ฐ”๋Š”์ง€๋ฅผ ์ฒดํฌํ•˜์—ฌ ํŠน์ • ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค.

์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ์‚ดํŽด๋ณด์ฃ .

 

<html>
<head>
<script type="text/javascript">
<!--
function over() {
   alert("Mouse Over");
}
function out() {
   alert("Mouse Out");
}
//-->
</script>
</head>
<body>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

 

๋งˆ์šฐ์Šค๊ฐ€ <div>ํƒœ๊ทธ ๋‚ด์˜ ๋‚ด์šฉ๋ฌผ ( ํ™”๋ฉด์— ๋ณด์—ฌ์ง€๋Š” ) ์œ„์— ์žˆ์œผ๋ฉด over()ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ๋ฐ–์œผ๋กœ ๋‚˜๊ฐ€๋ฉด out()ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค. 

 

HTML 4 ํ‘œ์ค€ ์ด๋ฒคํŠธ

์•„๋ž˜๋Š” ํ‘œ์ค€ ์ด๋ฒคํŠธ๋“ค์˜ ๋ชฉ๋ก์ž…๋‹ˆ๋‹ค. ์œ„์—์„œ ํ•ด๋ณธ๊ฒƒ์„ ๋ฐ”ํƒ•์œผ๋กœ ์ด๋Ÿฐ์ €๋Ÿฐ ๊ธฐ๋Šฅ๋“œ์„ ํ•œ๋ฒˆ ํ…Œ์ŠคํŠธ ํ•ด๋ณด์„ธ์š”~~ ^___^

 

EventValueDescription
onchangescriptScript runs when the element changes
onsubmitscriptScript runs when the form is submitted
onresetscriptScript runs when the form is reset
onselectscriptScript runs when the element is selected
onblurscriptScript runs when the element loses focus
onfocusscriptScript runs when the element gets focus
onkeydownscriptScript runs when key is pressed
onkeypressscriptScript runs when key is pressed and released
onkeyupscriptScript runs when key is released
onclickscriptScript runs when a mouse click
ondblclickscriptScript runs when a mouse double-click
onmousedownscriptScript runs when mouse button is pressed
onmousemovescriptScript runs when mouse pointer moves
onmouseoutscriptScript runs when mouse pointer moves out of an element
onmouseoverscriptScript runs when mouse pointer moves over an element
onmouseupscriptScript runs when mouse button is released

 

 

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_events.htm 

 

 


์ด๋ฒˆ์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ•จ์ˆ˜์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.  

ํ•จ์ˆ˜๊ฐ€ ๋ญ๋ƒ? ๋ชจ๋ฅด์‹œ๋Š” ๋ถ„์ด ๊ณ„์‹œ๋ ค๋‚˜์š”? ์ž๋ฐ”๋‚˜ C์˜ ๋ฉ”์†Œ๋“œ, ํ•จ์ˆ˜๋ž‘ ๋˜‘๊ฐ™์€ ๊ฒ๋‹ˆ๋‹ค.

ํ•จ์ˆ˜๋Š” function ํ‚ค์›Œ๋“œ๋ฅผ ์ด์šฉํ•ด์„œ ์ •์˜ํ•˜๋Š”๋ฐ function์˜ ์˜์–ด ์˜๋ฏธ๋ฅผ ์ฐพ์•„๋ณด๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

1.๋ช…์‚ฌ (์‚ฌ๋žŒ์‚ฌ๋ฌผ์˜) ๊ธฐ๋Šฅ
2.๋ช…์‚ฌ ํ–‰์‚ฌ, ์˜์‹
3.๋™์‚ฌ (์ œ๋Œ€๋กœ) ๊ธฐ๋Šฅํ•˜๋‹ค[์ž‘์šฉํ•˜๋‹ค] (=operate)

๋”ฐ๋ผ์„œ ํ•จ์ˆ˜๋Š” ํŠน์ • ๊ธฐ๋Šฅ์„ ํ•˜๋Š” ๋†ˆ์ด๊ตฌ๋‚˜~ ๋ผ๊ณ   ์ดํ•ดํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ์›ํ•˜๋Š” ์–ด๋–ค ๊ธฐ๋Šฅ์„ ํ•˜๋„๋ก ๋งŒ๋“œ๋Š” ๊ฒƒ์ด์ฃ .

 

์ž, ๊ทธ๋Ÿผ ๋ฌธ๋ฒ•์„ ํ•œ๋ฒˆ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

<script type="text/javascript">

function ํ•จ์ˆ˜๋ช…( ํŒŒ๋ผ๋ฏธํ„ฐ ๋ฆฌ์ŠคํŠธ )
{
  // statements
}

</script>

 

 

์œ„ ๋ฌธ๋ฒ•์€ ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์•„๋ž˜์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์ฃ . 

<script type="text/javascript">

function sayHello()
{
   alert("Hello there");
}

</script>

 

 

 

์ž, ๊ทธ๋Ÿผ ์ด๋ ‡๊ฒŒ ์„ ์–ธํ•ด๋†“์€ ํ•จ์ˆ˜๋ฅผ ์–ด๋–ป๊ฒŒ ํ˜ธ์ถœ์„ ํ• ๊นŒ์š”?

 

๋„ค~ ๊ทธ๋ ‡์ฃ ~ ์ œ๊ฐ€ ๋Š˜ ๋งํ•˜๋Š” "์•„๋ž˜์ฒ˜๋Ÿผ" ํ˜ธ์ถœํ•˜๋ฉด ๋˜๋Š”๊ฒ๋‹ˆ๋‹ค~

 

<script type="text/javascript">

sayHello();

</script>

 

 

ํŒŒ๋ผ๋ฏธํ„ฐ

์ด๋ฒˆ์—๋Š” ํŒŒ๋ผ๋ฏธํ„ฐ ์‚ฌ์šฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํŠน์ง• ์ค‘ ํ•˜๋‚˜๊ฐ€  undefined type์ด์—ˆ๋‹ค๋Š” ๊ฒƒ์„ ๊ธฐ์–ตํ•˜์‹œ๋‚˜์š”? ๋ณ€์ˆ˜๋ฅผ ์ง€์ •ํ• ๋•Œ ํƒ€์ž…์„ ์ง€์ •ํ•˜์ง€๋ฅผ ์•Š์ฃ ?  

ํ•จ์ˆ˜๋‚ด์— ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๋„ฃ์„๋•Œ๋„ ํƒ€์ž…์„ ์ง€์ •ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์ฒ˜๋Ÿผ ๋ง์ด์ฃ . 

<script type="text/javascript">

function sayHello(name, age)
{
   alert( name + " is " + age + " years old.");
}

</script>

 

์œ„ ์†Œ์Šค๋ฅผ ๋ณด์‹œ๋ฉด sayHello()๊ฐ€ ํŒŒ๋ผ๋ฏธํ„ฐ ๋‘๊ฐœ๋ฅผ ๋ฐ›๊ณ ์žˆ๋„ค์š”. name๊ณผ age.  

์ด ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ์—๋Š” ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๋‘๊ฐœ ๋„ฃ์–ด์ฃผ๋ฉด ๋˜๋Š” ๊ฒ๋‹ˆ๋‹ค. 

<script type="text/javascript">

sayHello('Zara', 7 );

</script>

 

sayHello ํ•จ์ˆ˜์— 'Zara' ๋ž‘ 7์„ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋„˜๊ฒผ๋„ค์š”. Zara์˜ ํ™‘๋”ฐ์˜ดํ‘œ๋Š” ์ŠคํŠธ๋ง์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. Zara๋ผ๋Š” ์ŠคํŠธ๋ง์„ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋„˜๊ธด๋‹ค๋Š” ๋ง์ด์ฃ . 

return๋ฌธ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ•จ์ˆ˜๋„ ๊ฒฐ๊ณผ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

 

์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ๋ณผ๊นŒ์š”? 

 

<script type="text/javascript">

function concatenate(first, last)
{
   var full;

   full = first + last;
   return  full;
}

</script>

์œ„ ์†Œ์Šค๋Š” ๋‘๊ฐœ์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๋ฐ›์•„์„œ ๋‘๊ฐœ๋ฅผ ํ•ฉ์นœ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.

 

์ด์ œ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ด์„œ ํ•จ์ˆ˜์—์„œ ์–ป์€ ๊ฒฐ๊ณผ๊ฐ’์„ ๊ฒฝ๊ณ ์ฐฝ์— ๋„์›Œ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. 

<script type="text/javascript">

   var result;
   result = concatenate('Zara', 'Ali');
   alert(result );

</script>

 

 

ํ•จ์ˆ˜์— ๋Œ€ํ•ด์„œ ์ข€ ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์„ ์•Œ๊ณ ์‹ถ์œผ๋ฉด ์•„๋ž˜ ๋งํฌ๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š” ^____^

 

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_functions.htm 

 

 

 

์˜ค๋Š˜์€ break๋ฌธ๊ณผ continue๋ฌธ, ๊ทธ๋ฆฌ๊ณ  label์„ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”์ง€ ํ•œ๋ฒˆ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์—ญ์‹œ๋‚˜ ์˜ˆ์ œ๊ฐ€ ์šฐ๋ฆฌ์—๊ฒ ์ตœ๊ณ ์˜ ์Šค์Šน์ด์ฃ ? ใ…‹

 

<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 20)
{
  if (x == 5){ 
     break;  // while๋ฃจํ”„์—์„œ ๋น ์ ธ๋‚˜๊ฐ‘๋‹ˆ๋‹ค
  }
  x = x + 1;
  document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

 

x๊ฐ€ 5์ผ ๋•Œ break;๋ฌธ์ด ์‹คํ–‰๋˜๋ฉด์„œ ๋ฃจํ”„์—์„œ ๋น ์ ธ๋‚˜์˜ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ฒฐ๊ณผ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ๋‚˜์˜ค๊ฒŒ ๋˜๊ฒ ์ฃ . 

Entering the loop
2
3
4
5
Exiting the loop!

 

 

 

 continue ๋ฌธ์€ ๊ทธ๋Ÿผ ๋ญ˜๊นŒ์š”? ์™ ์ง€ break๋ฌธ์˜ ๋ฐ˜๋Œ€๊ฐ™์€๋ฐ ๋ง์ด์ฃ . continue๋ฌธ์€ ๋‹ค์Œ ๋ฃจํ”„๋กœ ๋„˜์–ด๊ฐ€๋ผ๋Š” ๋ช…๋ น์ž…๋‹ˆ๋‹ค. ์•„์ง ํ˜„์žฌ ๋ฃจํ”„์—์„œ ์‹คํ–‰๋˜์–ด์•ผ ํ•  ๋ฌธ์žฅ๋“ค์ด ๋‚จ์•„์žˆ๋”๋ผ๋„ ๋ง์ด์ฃ .

์•„๋ž˜ ์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ๋ณผ๊นŒ์š”?

 

 

<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10)
{
  x = x + 1;
  if (x == 5){ 
     continue;  // x == 5 ์ด๋ฉด x๋ฅผ ์ถœ๋ ฅํ•˜์ง€์•Š๊ณ  ๋‹ค์Œ ๋ฃจํ”„๋กœ ๋„˜์–ด๊ฐ‘๋‹ˆ๋‹ค. 
  }
  document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

 

๊ฒฐ๊ณผ๋ฅผ ์•„๋ž˜์ฒ˜๋Ÿผ ๋‚˜์˜ค๊ฒ ์ฃ . x๊ฐ€ 5์ผ๋•Œ๋Š” continue๋ฌธ ๋•Œ๋ฌธ์— document.write( x + "<br />"); ๋ฌธ์ด ์‹คํ–‰๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ 2๋ถ€ํ„ฐ 10๊นŒ์ง€ ์ถœ๋ ฅํ•˜๋Š”๋ฐ 5๋งŒ ๋นผ๊ณ  ์ถœ๋ ฅ์„ ํ•˜๊ฒŒ๋˜๊ฒ ์ฃ . 

Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!

 

 

Labels

JavaScript 1.2 ๋ฒ„์ „๋ถ€ํ„ฐ label์„ beak, continue๋ฌธ๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋์Šต๋‹ˆ๋‹ค.  

 label ์€ ๊ฐ„๋‹จํžˆ ๋งํ•˜๋ฉด ํŠน์ • ์œ„์น˜๋ฅผ ์ง€์ •ํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.   

์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ์‚ดํŽด๋ณด๋„๋ก ํ•ฉ์‹œ๋‹ค. 

Example 1 : break๋ฌธ๊ณผ ํ•จ๊ป˜ label์‚ฌ์šฉํ•˜๊ธฐ

<script type="text/javascript"> <!-- document.write("Entering the loop!<br /> "); outerloop: // 1๋ฒˆ ๋ผ๋ฒจ์ž…๋‹ˆ๋‹ค. for (var i = 0; i < 5; i++) // 1๋ฒˆ ๋ฃจํ”„ { document.write("Outerloop: " + i + "<br />"); innerloop: // 2๋ฒˆ ๋ผ๋ฒจ์ž…๋‹ˆ๋‹ค. for (var j = 0; j < 5; j++) // 2๋ฒˆ ๋ฃจํ”„ { if (j > 3 ) break ; // ์ด ๋ฌธ์žฅ์„ ํฌํ•จํ•˜๋Š” ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ๋ฃจํ”„๋ฅผ ๋น ์ ธ๋‚˜์˜ต๋‹ˆ๋‹ค. (์—ฌ๊ธฐ์„œ๋Š” 2๋ฒˆ ๋ฃจํ”„๊ฒ ์ฃ ) if (i == 2) break innerloop; // ์ด ๋ฌธ์žฅ์€ innerloop๋ฅผ ๋น ์ ธ๋‚˜์™€๋Š” ๋ง์ž…๋‹ˆ๋‹ค. ( 2๋ฒˆ ๋ฃจํ”„์—์„œ ๋‚˜์˜ค๋Š”๊ฑฐ์ฃ  ) if (i == 4) break outerloop; // ์ด ๋ฌธ์žฅ์€ outerloop๋ฅผ ๋น ์ ธ๋‚˜์˜ต๋‹ˆ๋‹ค. ( 1๋ฒˆ ๋ฃจํ”„์—์„œ ๋น ์ ธ๋‚˜๊ฐ€๋Š” ๊ฒƒ์ด์ฃ  ) document.write("Innerloop: " + j + " <br />"); } } document.write("Exiting the loop!<br /> "); //--> </script>

 

๊ฒฐ๊ณผ๋Š” ์•„๋ž˜์ฒ˜๋Ÿผ ๋‚˜์˜ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. 

Entering the loop!
Outerloop: 0
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 1
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 2
Outerloop: 3
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 4
Exiting the loop!

 

Example 2 : continue๋ฌธ๊ณผ ํ•จ๊ป˜ label์‚ฌ์šฉํ•˜๊ธฐ

<script type="text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop:   // This is the label name
for (var i = 0; i < 3; i++)
{
   document.write("Outerloop: " + i + "<br />");
   for (var j = 0; j < 5; j++)
   {
      if (j == 3){
         continue outerloop;
      }
      document.write("Innerloop: " + j + "<br />");
   } 
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

 

๊ฒฐ๊ณผ๋Š” ์•„๋ž˜์ฒ˜๋Ÿผ ๋‚˜์˜ต๋‹ˆ๋‹ค. 

Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!

 

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_loop_control.htm 

 

 


์ž~ ์˜ค๋Š˜์€ for ๋ฃจํ”„์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

 

for ๋ฃจํ”„์™€ while๋ฃจํ”„๋Š” 100% ๋ฐ”๊ฟ”์น˜๊ธฐ๊ฐ€ ๊ฐ€๋Šฅํ•œ ๋…€์„๋“ค์ž…๋‹ˆ๋‹ค. ์–ด๋–ค ์ƒํ™ฉ์—์„œ ์–ด๋–ค ๋ฐ˜๋ณต๋ฌธ์„ ์‚ฌ์šฉํ•˜๋Š๋ƒ๋Š” ๊ฐœ๋ฐœ์ž์ธ ์—ฌ๋Ÿฌ๋ถ„๋“ค์—๊ฒŒ ๋‹ฌ๋ ค์žˆ์Šต๋‹ˆ๋‹ค!!  

์šฐ์„  ๋ฌธ๋ฒ•๋ถ€ํ„ฐ ํ™•์ธํ•ด์•ผ๊ฒ ์ฃ ? ์–ด๋–ป๊ฒŒ ์ƒ๊ธด๋†ˆ์ธ์ง€ ์•Œ์•„์•ผ ๋ญ˜ ์จ๋จน๋”๋ผ๋„ ์จ๋จน์ฃ  ใ…‹ใ…‹ 

 

for ( ์ดˆ๊ธฐํ™” ; ์กฐ๊ฑด๋ฌธ ; ๋ฐ˜๋ณต์‹คํ–‰๋ฌธ ){
     ์กฐ๊ฑด๋ฌธ์ด ์ฐธ์ธ ๋™์•ˆ ์‹คํ–‰๋˜์–ด์•ผ ํ•  ๋ฌธ์žฅ
}

์—ญ์‹œ ์šฐ๋ฆฌ๋Š” ์˜ˆ์ œ๊ฐ€ ์žˆ์–ด์•ผ ๋ญ˜ ์•Œ๊ฒƒ ๊ฐ™์•„์š” ๊ทธ์ฃ ์ž‰?
<script type="text/javascript">
<!--
var count;
document.write("Starting Loop" + "<br />");
for(count = 0; count < 10; count++){
  document.write("Current Count : " + count );
  document.write("<br />");
}
document.write("Loop stopped!");
//-->
</script>

 

์ž ์œ„ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด ์–ด๋–ค ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ฌ๊ฑฐ๋ผ๊ณ  ์˜ˆ์ƒ์ด ๋˜์‹œ๋‚˜์š”??  

์•„๋ž˜ ํ•ด๋‹ต์„ ๋ณด์‹œ์ฃ .  

 

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped! 

 

์–ด๋•Œ์š”? ์‰ฝ์ฃ ? ์–ด๋ ค์šฐ์‹œ๋‹ค๊ตฌ์š”? ๊ทธ๋Ÿผ ์„ค๋ช…์„ ์ข€ ํ•ด๋“œ๋ฆด๊ฒŒ์š”.

 

for ( count = 0 ; count < 10 ; count++ ) : for๋ฃจํ”„๋ฅผ ์‹œ์ž‘ํ•˜๋Š” ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค. ๋ณ€์ˆ˜ count๋ฅผ 0์œผ๋กœ ์ดˆ๊ธฐํ™” ํ•ฉ๋‹ˆ๋‹ค. count๋ณ€์ˆ˜์˜ ๊ฐ’์ด 10๋ณด๋‹ค ์ž‘์„ ๋™์•ˆ ์‹คํ–‰ํ•˜๋ผ๋Š” ์กฐ๊ฑด์„ ์คฌ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ ๋‚˜์„œ ๋งค ๋ฃจํ”„๊ฐ€ ๋๋‚˜๋ฉด count๋ฅผ 1์”ฉ ์ฆ๊ฐ€์‹œํ‚ค๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์„œ ์„ธ๋ฏธ์ฝœ๋ก  ( ; ) ์žŠ์–ด๋จน์ง€ ์•Š๋„๋ก ์กฐ์‹ฌํ•˜์„ธ์š”.

๋ฌธ๋ฒ•์ด ์–ด๋ ต๋‹ค๋ฉด ์—ฐ์Šต๋งŒ์ด ๋‹น์‹ ์„ ์‚ด๋ฆด ์ˆ˜ ์žˆ์œผ๋‹ˆ ์—ฐ์Šตํ•˜์„ธ์š”. ใ…‹ใ…‹

 

 

์ž, ๋˜ ๋‹ค๋ฅธ for ๋ฃจํ”„๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•˜๋Š” ๊ฒƒ์ธ๋ฐ์š”~ ํ˜•์‹์„ ํ•œ๋ฒˆ ๋ณผ๊นŒ์š”?

 

 

for (๋ณ€์ˆ˜๋ช… in ๊ฐ์ฒด){
  ์‹คํ–‰ํ•  ๋ฌธ์žฅ
}

 

 

 

์•„๋ž˜ ์˜ˆ์ œ๋Š” ์›น๋ธŒ๋ผ์šฐ์ €์˜ Navigator๊ฐ์ฒด์— ์žˆ๋Š” ์†์„ฑ์„ ์ถœ๋ ฅํ•˜๋Š” ๊ธฐ๋Šฅ์„ for๋ฃจํ”„๋กœ ๊ตฌํ˜„ํ•ด๋†“์€ ๊ฒƒ์ž…๋‹ˆ๋‹ค. 

<script type="text/javascript">
<!--
var aProperty;
document.write("Navigator Object Properties<br /> ");
for (aProperty in navigator)
{
  document.write(aProperty);
  document.write("<br />");
}
document.write("Exiting from the loop!");
//-->
</script>

 

๊ฒฐ๊ณผ๋Š” ์•„๋ž˜์ฒ˜๋Ÿผ ๋‚˜์˜ค๊ฒ ์ฃ ? ์•„๋‹Œ๊ฐ€์š”? ๋งž๋‚˜? ํ™•์ธํ•ด๋ณด์„ธ์š”~~ ^___^ 

Navigator Object Properties
appCodeName
appName
appMinorVersion
cpuClass
platform
plugins
opsProfile
userProfile
systemLanguage
userLanguage
appVersion
userAgent
onLine
cookieEnabled
mimeTypes
Exiting from the loop! 

 

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_for_loop.htm 

 

 


์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ while ๋ฃจํ”„๋ฌธ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

 

์šฐ์„  ๋ฌธ๋ฒ•๋ถ€ํ„ฐ ํ™•์ธํ•ด๋ณผ๊นŒ์š”??

 

 

while (์กฐ๊ฑด๋ฌธ){
   ์กฐ๊ฑด๋ฌธ์ด ์ฐธ์ธ๋™์•ˆ ์‹คํ–‰ํ•ด์•ผํ•  ๋ฌธ์žฅ
}

 

์ด์ œ ์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ๋ณผ๊นŒ์š”??
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br />");
while (count < 10){
  document.write("Current Count : " + count + "<br />");
  count++;
}
document.write("Loop stopped!");
//-->
</script>

 

๊ฒฐ๊ณผ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋‚˜์˜ฌ๊ฒƒ ๊ฐ™๋‚˜์š”??

์•„๋ž˜์ฒ˜๋Ÿผ ๋‚˜์™€์•ผ๊ฒ ์ฃ ??

 

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped! 

 

 

 

 

์ž while๋ฌธ๊ณผ ๋น„์Šทํ•œ do-while๋ฌธ์„ ์•„์‹œ๋‚˜์š”? do-while๋ฌธ์€ ์ผ๋‹จ ๋จผ์ € ํ•œ๋ฒˆ ์‹คํ–‰์‹œํ‚จ ๋‹ค์Œ์— while๋ฌธ์„ ํƒ€๋Š”๊ฒ๋‹ˆ๋‹ค.

์—ญ์‹œ ๋ง๋ณด๋‹ค๋Š” ์‹ค์Šต์ด์ฃ ? 

 

๋ฌธ๋ฒ•๋ถ€ํ„ฐ ํ™•์ธํ•ด๋ณผ๊นŒ์š”??
do{
  ์ตœ์†Œ ํ•œ๋ฒˆ์€ ์‹คํ–‰๋˜์–ด์•ผ ํ•˜๋Š” ๋ฌธ์žฅ
} while (์กฐ๊ฑด๋ฌธ);

๊ทธ๋Ÿผ ์ด์ œ ์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ๋ด…์‹œ๋‹ค.
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br />");
do{
  document.write("Current Count : " + count + "<br />");
  count++;
}while (count < 0);
document.write("Loop stopped!");
//-->
</script>

 

๊ฒฐ๊ณผ๊ฐ€ ์˜ˆ์ƒ์ด ๋˜๋‚˜์š”?

์•„๋ž˜์ฒ˜๋Ÿผ ๊ฒฐ๊ณผ๋ฅผ ์˜ˆ์ƒํ•˜์…จ๋‹ค๋ฉด ๋‹น์€์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ค‘์ˆ˜๊ฐ€ ๋˜์‹ ๊ฒ๋‹ˆ๋‹ค~ ์ถ•ํ•˜๋“œ๋ ค์šฉ~~ใ…‹ใ…‹ 

Starting Loop
Current Count : 0
Loop stopped! 

 

๊ฐ„๋‹จํ•˜์ฃ ??

๋ณ„๊ฑฐ ์—†์Šต๋‹ˆ๋‹ค ใ…Žใ…Ž

 

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_while_loop.htm

 

 


JavaScript 1.2๋ถ€ํ„ฐ switch๋ฌธ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. switch๋ฌธ์ด ๋ญ๋ƒ? ๋ฌธ๋ฒ•๋ถ€ํ„ฐ ์ผ๋‹จ ๋ณด์‹œ์ฃ . 

 

switch ๋ฌธ์€ ํฌ๊ฒŒ switch์ ˆ๊ณผ case์ ˆ ๊ทธ๋ฆฌ๊ณ  default์ ˆ์ด ์žˆ์Šต๋‹ˆ๋‹ค. switch์ ˆ์—๋Š” ๋ณ€์ˆ˜๊ฐ€ ๋“ค์–ด๊ฐ€๋Š”๋ฐ if๋ฌธ์—์„œ์ฒ˜๋Ÿผ ์ฐธ, ๊ฑฐ์ง“์„ ๋ฐ˜ํ™˜ํ•˜๋Š”์กฐ๊ฑด์ด ๋“ค์–ด๊ฐ€๋Š” ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค. ์ด ๋ณ€์ˆ˜๋Š” ์–ด๋–ค ๊ฐ’์„ ๊ฐ€์ง€๊ณ  ์žˆ๊ฒ ์ฃ ? ๊ทธ ๊ฐ’๋“ค์„ case ์ ˆ์— ์จ์ฃผ๋Š” ๊ฒ๋‹ˆ๋‹ค. case์ ˆ์€ ์—ฌ๋Ÿฌ๊ฐœ๊ฐ€ ์˜ฌ ์ˆ˜ ์žˆ๋Š”๋ฐ ๋งŒ์•ฝ ๋ชจ๋“  case์ ˆ์—์„œ ๋งค์น˜๋˜๋Š” ๊ฐ’์„ ๋ชป์ฐพ์œผ๋ฉด default์ ˆ์˜ ๋ฌธ์žฅ์„ ์‹คํ–‰ํ•˜๊ณ  switch๋ฌธ์€ ์ข…๋ฃŒ๋ฉ๋‹ˆ๋‹ค.

switch (๋ณ€์ˆ˜)
{
  case ๊ฐ’1: statement(s)
                    break;
  case ๊ฐ’2: statement(s)
                    break;
   ...
  case ๊ฐ’n: statement(s)
                    break;
  default: statement(s)
}

break ๋ฌธ์€ ํŠน์ • case๊ฐ€ ๋๋‚ฌ๋‹ค๊ณ  ์•Œ๋ ค์ฃผ๋Š” ๋ฌธ์žฅ์ž…๋‹ˆ๋‹ค. ๋งŒ์•ฝ ์ด break๋ฌธ์ด ์—†์œผ๋ฉด ๋ฐ‘์—์žˆ๋Š” case์•ˆ์— ์žˆ๋Š” ๋ฌธ์žฅ๋“ค๋„ ์‹คํ–‰์„ ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

 

๊ทธ๋Ÿผ ์˜ˆ์ œ๋ฅผ ํ•œ๋ฒˆ ๋ณด์‹ค๊นŒ์š”??

 

<script type="text/javascript">
<!--
var grade='A';
document.write("Entering switch block<br />");
switch (grade)
{
  case 'A': document.write("Good job<br />");
            break;
  case 'B': document.write("Pretty good<br />");
            break;
  case 'C': document.write("Passed<br />");
            break;
  case 'D': document.write("Not so good<br />");
            break;
  case 'F': document.write("Failed<br />");
            break;
  default:  document.write("Unknown grade<br />")
}
document.write("Exiting switch block");
//-->
</script>

 

๊ฒฐ๊ณผ๊ฐ€ ์•„๋ž˜์ฒ˜๋Ÿผ ๋‚˜์˜ค๋ฉด ๋งž๋Š”๊ฑด๊ฐ€์š”? ์—ฌ๋Ÿฌ๋ถ„์ด ์ง์ ‘ ํ•œ๋ฒˆ ํ•ด๋ณด์‹œ๊ณ  ๋ง์”€ํ•ด์ฃผ์„ธ์š” ^___^ 

Entering switch block
Good job
Exiting switch block

 

 

 

์ด๋ฒˆ์—๋Š” break๋ฌธ์„ ์ƒ๋žตํ–ˆ์„ ๋•Œ ์–ด๋–ป๊ฒŒ ์‹คํ–‰๋˜๋Š”์ง€ ํ•œ๋ฒˆ ์•Œ์•„๋ณด์ฃ . 

 

<script type="text/javascript">
<!--
var grade='A';
document.write("Entering switch block<br />");
switch (grade)
{
  case 'A': document.write("Good job<br />");
  case 'B': document.write("Pretty good<br />");
  case 'C': document.write("Passed<br />");
  case 'D': document.write("Not so good<br />");
  case 'F': document.write("Failed<br />");
  default:  document.write("Unknown grade<br />")
}
document.write("Exiting switch block");
//-->
</script>

 

๊ฒฐ๊ณผ๋Š” ์•„๋ž˜์ฒ˜๋Ÿผ ๋‚˜์˜ต๋‹ˆ๋‹ค. 

Entering switch block
Good job
Pretty good
Passed
Not so good
Failed
Unknown grade
Exiting switch block

 

 

 

Reference : http://www.tutorialspoint.com/javascript/javascript_switch_case.htm