JavaScript_5분_가이드 - 영록이 홈페이지

function 대입 가능

function add(a, b) {
        return a + b
}

func = add
alert(func(3, 5))

prototype ${}

<form>
  <label for="fruit">fruit</label>
  <input id="fruit" type="text" name="fruit" value="apple"/>
  <label for="buy">buy</label>
  <input id="buy" type="checkbox"/>
</form>
<a href="javascript:alert($('fruit').value)">show fruit name</a>
<a href="javascript:alert($('buy').checked)">show buy checked?</a>

dialog using $(), css

<div id="dialog" style="display: none; position: absolute; left:200px; top:200px; background-color: #E0F0E0">
  안녕하세요
</div>
<a href="#" onClick="$('dialog').style.display=''">show</a>
<a href="#" onClick="$('dialog').style.display='none'">hide</a>

객체는 Map(혹은 Dictionary) 형태의 자료구조로도 활용 가능하다.

var apple = {name:'apple', price:500};
var banana = {name:'banana', price:100};
alert(apple.name)
alert(banana.price)

배열 사용법

var apple = {name:'apple', price:500};
var banana = {name:'banana', price:100};
var kiwi = {name:'kiwi', price:1000};
var orange = {name:'orange', price:1500};

var fruits = [apple, banana, kiwi, orange]

for (var i = 0; i < fruits.length; i++) {
    alert(fruits[i].name)
}

prototype each로 for loop 개선하기

<div id="result">
</div>
<script type="text/javascript">
var apple = {name:'apple', price:500};
var banana = {name:'banana', price:100};
var kiwi = {name:'kiwi', price:1000};
var orange = {name:'orange', price:1500};

var fruits = [apple, banana, kiwi, orange]

fruits.each(function(element, index) {
        $('result').innerHTML += '[' + index + ']' + element.name + '<br/>'
});
</script>

prototype each의 구현이 어떻게 되어 있나

var Enumerable = {
  each: function(iterator) {
    var index = 0;
    try {
      this._each(function(value) {
        try {
          iterator(value, index++);
        } catch (e) {
          if (e != $continue) throw e;
        }
      });
    } catch (e) {
      if (e != $break) throw e;
    }
  },
  ...
}

Object.extend(Array.prototype, Enumerable);

이미 존재하는 객체에 속성 추가하기

var obj = new Object()
obj.hello = function() {
        alert('Hello World')
}
obj.hello()

위의 기능을 활용한 Object.extend

Object.extend = function(destination, source) {
  for (property in source) {
    destination[property] = source[property];
  }
  return destination;
}

Array.prototype을 통해서 prototype에 대한 설명

Array.prototype.alertLength = function() {
        alert(this.length)
}
var array = [1, 2, 3, 4]
array.alertLength()

위로 돌아가서 each의 구현 다시 설명

Comments