U E D R , A S I H C RSS
ZeroWiki

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

Difference between r1.12 and the current

@@ -180,177 +180,4 @@
}}}

== 신나는 야구게임 ==
[http://jquery.com/ 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;
}
}}}
* [숫자야구/김수경]


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/>");
        }
    }
}

1.2. 18일 


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

1.3. 신나는 야구게임

Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:23:30
Processing time 0.0295 sec