JavaScript_5분_가이드


Youngrok Pak at 5 years, 10 months ago.
  • 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




Wiki at WikiNamu