1. JavaScript Source Code ¶

1.1. 11일 ¶

2011.html

<html>
<head>
<title>Javascript</title>
   <script src="gugu.js" type="text/javascript"></script>
   <link rel="stylesheet" type="text/css" href="2011.css" />
</head>
<body onload="gu();">
//<body onload="s();">
</body>
</html>

gugu.js

function gugu(dan){
    for(var i = 1; i <= 9; i++){
        document.write(dan + " X " + i + " = " + (dan * i) + "<br/>");
    }
}

function gu(){
    for(var i = 2; i <= 9; i++){
        gugu(i);
        document.write("<br/>");
    }
}

function g(){
    for(var i = 2; i <= 9; i++){
        for(var j = 1; j <= 9; j++){
           document.write(i + " X " + j + " = " + (i * j) + "<br/>");
        }
        document.write("<br/>");
    }
}

sum.js

function s(){
    var score = {"지혜":{"국어":90, "수학":90},"수경":{"국어":90, "수학":40}, "정근":{"국어":80, "수학":100}};
    for(var i in score){
        document.write("<" + i + "><br/>");
        for(var j in score[i]){
            document.write(j + " : " + score[i][j] + "<br/>");
        }
    }
}

[edit]

1.2. 18일 ¶

Simple JavaScript Inheritance

var Person = Class.extend({
  init: function(isDancing){
    this.dancing = isDancing;
  },
  dance: function(){
    return this.dancing;
  }
});
var Ninja = Person.extend({
  init: function(){
    this._super( false );
  },
  dance: function(){
    // Call the inherited version of dance()
    return this._super();
  },
  swingSword: function(){
    return true;
  }
});

var p = new Person(true);
p.dance(); // => true

var n = new Ninja();
n.dance(); // => false
n.swingSword(); // => true

// Should all be true
p instanceof Person && p instanceof Class &&
n instanceof Ninja && n instanceof Person && n instanceof Class

Simple Class Creation and Inheritance

(function(){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
  // The base Class implementation (does nothing)
  this.Class = function(){};
  
  // Create a new Class that inherits from this class
  Class.extend = function(prop) {
    var _super = this.prototype;
    
    // Instantiate a base class (but only create the instance,
    // don't run the init constructor)
    initializing = true;
    var prototype = new this();
    initializing = false;
    
    // Copy the properties over onto the new prototype
    for (var name in prop) {
      // Check if we're overwriting an existing function
      prototype[name] = typeof prop[name] == "function" && 
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;
            
            // Add a new ._super() method that is the same method
            // but on the super-class
            this._super = _super[name];
            
            // The method only need to be bound temporarily, so we
            // remove it when we're done executing
            var ret = fn.apply(this, arguments);        
            this._super = tmp;
            
            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }
    
    // The dummy class constructor
    function Class() {
      // All construction is actually done in the init method
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }
    
    // Populate our constructed prototype object
    Class.prototype = prototype;
    
    // Enforce the constructor to be what we expect
    Class.constructor = Class;

    // And make this class extendable
    Class.extend = arguments.callee;
    
    return Class;
  };
})();

Initialization

function Person(){}
function Ninja(){}
Ninja.prototype = new Person();
// Allows for instanceof to work:
(new Ninja()) instanceof Person

if ( !initializing )
  this.init.apply(this, arguments);

Super Method

var Person = Class.extend({
  init: function(isDancing){
    this.dancing = isDancing;
  }
});
var Ninja = Person.extend({
  init: function(){
          this._super( false );
  }
});

var p = new Person(true);
p.dancing; // => true

var n = new Ninja();
n.dancing; // => false

[edit]

1.3. 신나는 야구게임 ¶

JQuery를 사용한 ToyProgram

Baseball.html

<html>
<head>
<title>ZeroPage</title>
    <link rel="stylesheet" type="text/css" href="Baseball.css" />
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script src="Baseball.js" type="text/javascript"></script>
</head>
<body>
    <div id="container" class="ui-widget">
        <h1>신나는 야구게임!</h1>
        <form onsubmit="return false;">
            세 자리 수 입력 : <input type="text" id="number" maxlength="3"/>
            <input type="submit" id="guess" value="Go!"/><br/>
            <div class="box ui-widget-content ui-corner-all" id="log" readonly="true"></div><br/>
            <input type="button" id="new" value="New Game"/>
            <span class="box ui-widget-content" id="notification">새 게임 시작 버튼을 눌러주세요.</span>
        </form>
    </div>
</body>
</html>

Baseball.js

(function ($, undefined) {
    var isNumber = function(key){
        return ((key >= 48) && (key <= 57)) || ((key >= 96) && (key <= 105));
    }

    var isSpecialKey = function(key){
        return (key === 13) || (key === 8) || (key === 37) || (key === 39) || (key === 46) || (key === 116);
    }
    var makeQuestion = function(){
        var number, index;
        for(index = 0; index < 3; index++){
            do{
                number = makeNumber();
            }while(isIn(number, answer));
            answer[index] = number;
        }
    }

    var isIn = function(number, set){
        for(var i in set){
            if(number === set[i]) return true;
        }
        return false;
    }
    
    var makeNumber = function(){
        return Math.floor(Math.random() * 10);
    }

    var checkNumber = function(number){
        var strike = 0, ball = 0;
        for(var index = 0; index < 3; index++){
            if(isBall(number, index)) ball++;
            if(isStrike(number, index)) strike++;
        }
        printResult(strike, ball);
    }

    var printResult = function(strike, ball){
        var log = $("#log");
        log.append(count + ">>> [" + $("#number").val() + "] ");
        if(strike === 3){
            log.append("Bingo!<br/>");
            endGame();
        }else{
            log.append(strike + " strike, " + ball + " ball.<br/>");
        }
        log.scrollTop(999999999);
    }

    var endGame = function(){
        //$("#number").readonly = "true";
    }

    var isProper = function(input){
        return (input.length === 3)
    }

    var getNumber = function(number, input){
        var index, square;
        for(index = 0; index < 3; index++){
            square = Math.pow(10, 2-index);
            number[index] = Math.floor(input/square);
            input -= number[index]*square;
        }
    }

    var isBall = function(number, index){
        return ((number[index] === answer[(index+1)%3]) || (number[index] === answer[(index+2)%3]));
    }

    var isStrike = function(number, index){
       return number[index] === answer[index];
    }

    $(document).ready(function() {
        $(":button, :submit").button();
        $("#new").click(function (){
            $("#notification").text("새로운 게임이 시작되었습니다.");
            $("#log").html("새 게임 시작>>><br/>");
            //$("#number").readonly = "false";
            answer = [];
            count = 0;
            makeQuestion();
            $("#number").focus();
        });
        $("form").submit(function (){
            var number = [], input = $("#number").val();
            if(isProper(input)){
                count++;
                getNumber(number, input);
                checkNumber(number);
            }
            $("#number").val("");
        });
        $("#number").keydown(function(e){
            if(!(isNumber(e.keyCode) || isSpecialKey(e.keyCode))){
                return false;
            }
        });
        $("#container").dialog({width: "380px", resizable: "false", title: "Linflus"});
    });
}) (jQuery);

Baseball.css

*{
    font-family: 'NanumGothic', '나눔고딕', sans-serif;
    font-size: small;
}
h1 {
    font-family: 'NanumPen', '나눔손글씨 펜', sans-serif;
    font-size: 50px;
    text-align: center;
    color: deepskyblue;
}

.box{
    width: 100%;
}
#notification{
    display: block;
    position: relative;
    top: 13px;
    border-width: 1px 0 0 0;
    padding-top: 2px;
    clear: both;
}

#log{
    height: 100px;
    overflow: auto;
    padding: 2px;
    clear: both;
}

#number{
    width: 40%;
}

#new, #guess{
    float: right;
}

JavaScript/2011년스터디/김수경 (rev. 1.13)

Java Script/2011년스터디/김수경

Contents

1. JavaScript Source Code ¶

1.1. 11일 ¶

1.2. 18일 ¶

1.3. 신나는 야구게임 ¶