[[pagelist(^JavaScript/)]] [[TableOfContents]] = JavaScript Source Code = == 11일 == * 2011.html {{{ Javascript // }}} * gugu.js {{{ function gugu(dan){ for(var i = 1; i <= 9; i++){ document.write(dan + " X " + i + " = " + (dan * i) + "
"); } } function gu(){ for(var i = 2; i <= 9; i++){ gugu(i); document.write("
"); } } function g(){ for(var i = 2; i <= 9; i++){ for(var j = 1; j <= 9; j++){ document.write(i + " X " + j + " = " + (i * j) + "
"); } document.write("
"); } } }}} * sum.js {{{ function s(){ var score = {"지혜":{"국어":90, "수학":90},"수경":{"국어":90, "수학":40}, "정근":{"국어":80, "수학":100}}; for(var i in score){ document.write("<" + i + ">
"); for(var j in score[i]){ document.write(j + " : " + score[i][j] + "
"); } } } }}} == 18일 == * [http://ejohn.org/blog/simple-javascript-inheritance/ 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 }}} == 신나는 야구게임 == [http://jquery.com/ JQuery]를 사용한 ToyProgram * Baseball.html {{{ ZeroPage

신나는 야구게임!

세 자리 수 입력 :

새 게임 시작 버튼을 눌러주세요.
}}} * 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!
"); endGame(); }else{ log.append(strike + " strike, " + ball + " ball.
"); } 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("새 게임 시작>>>
"); //$("#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; } }}}