GDG shanghai programming one hour by JavaScript

浏览数：24 / 时间：2015年06月09日

刚在昨天参加了一场JS入门编程的活动，目的就是提升对JS的兴趣。

因为是针对零基础开发者的，一上来就是“Hello World!”了

当然，想用JS输出"Hello World!"也有不止一种方法

第一种：

document.write("Hello World!");
alert("Hello World");

第二种：

var str ="Hello World!";
alert(str);

随后提到了，JS是一种弱类型的语言

比如JS的变量可以赋值为：

var str = undifined;

在JS中，下列两种操作也都会得出不同的结果：

var str = "2"+1;
document.write(str);

var str = "2"-1;
document.write(str);

这也是一种神奇的现象

在JS中写出“确定取消”选择窗口弹出时，可以这么写：

var str = prompt("Enter:
                 ");
alert("Hello" + str);
var bln = confirm("你确定要删除吗？
                  ");
if(bln === true){
  //do something
alert("已经删除");
}

此处注意：

三个等号不会做类型的匹配，尽量使用三个等号

在JS中尽量少使用两个等号

函数的表达也类似C语言：

function add(a,b)
{
  return a+b;
}
alert("2 + 3 = " + add(2,3));

但是随后讲到的东西我感觉听懂了但是写不出正确的代码：

错误代码：

function Person(name)
{
  this.myName = name;
  
  this.SayHello = function(friend)
  {
      document.write("Hello,"+firend+"!My name is "+this.myName);
  }
}
                     
var Jessica = new Person("Jessica");
alert(Jessica.myName);

要求输出应该为在屏幕内输出一行Hello......，但是我这么写只能输出Jessica，不知道哪里出错了

随后将的一个东西是和上面这个有点联系，在函数外对对象赋值，具体看如下代码：

Jessica.sex = "Female";
alert(Jessica.sex);
Jessica.SayHello("XiaoMa");
var XiaoMa = {
  myName:"XiaoMa";
  SayHello:function(friend){
    documet.write("Hello,"+firend+"!My name is "+this.myName);
  }
};

同样，也有错误

有关JS是面向对象的语言，还提到了一个例子：

  var TrainingRoom1 = {
    temprature: 21,
    person:[XiaoMa,Jessica,Lookon,Leo],
    AddPeople:function(people){person.push(people);}
  }

alert(XiaoMa.myName);
XiaoMa.Sayhello("Jessica");

在最后，我写了一道题目，只是补充了JS中缺漏的函数部分，HTML,CSS已经完整提供

完整的网页就是可以让用户和计算机猜拳比拼胜负

<div class="finger-guessing">
  <div id="choice" class="choice">
    <label><input name="custom" type="radio" value="石头" checked/>石头</label>
    <label><input name="custom" type="radio" value="剪刀" />剪刀</label>
    <label><input name="custom" type="radio" value="布" />布</label>
  </div>
  <div class="info">
    <span class="choice-result">PLAYER: <span id="player"></span></span>
    <span class="choice-result">COMPUTER: <span id="computer"></span></span>
    <br /><button id="start" type="button">START</button>
    <div id="result"></div>
  </div>
</div>

View HTML

@c1: #FF6138;
@c2: #FFFF9D;
@c3: #BEEB9F;
@c4: #79BD8F;
@c5: #00A388;
body {
  background-color: @c5;
}
.finger-guessing {
  width: 100%;
  height: 100%;
  background: @c5;
  .choice {
    height: 100px;
    text-align: center;
    padding: 50px 0;
    border-bottom: 5px dotted @c3;
    label {
      display: inline-block;
      width: 150px;
      padding: 20px 0;
      margin: 0 10px;
      font-size: 36px;
      // font-weight: bold;
      color: @c3;
      border-width: 5px;
      border-style: solid;
      border-color: @c3;
      &:hover {
        cursor: pointer;
        color: @c2;
        border-color: @c2;
      }
    }
  }
  .info {
    padding: 50px 0;
    text-align: center;
    width: 100%;
    // background-color: @c4;
    .choice-result {
      display: inline-block;
      text-align: left;
      width: 200px;
      height: 30px;
      line-height: 30px;
      // border: 1px solid black;
      color: @c3;
      font-size: 24px;
      // font-weight: bold;
      padding: 10px 30px;
    }
    #start {
      margin: 40px 0 30px;
      cursor: pointer;
      width: 200px;
      height: 60px;
      font-size: 30px;
      color: @c5;
      background: @c3;
      border: 5px solid @c2;
      border: none;
      &:hover {
        color: @c5;
        background: @c2;
      }
    }
    #result {
      font-size: 64px;
      // font-weight: bold;
      color: @c3;
    }
  }
}

View CSS

// 随机产生一个选择
var randomComputerChoice = function() {
  var computerChoice = Math.random();
  if (computerChoice < 0.34) {
        computerChoice = "石头";
  } else if(computerChoice <= 0.67) {
        computerChoice = "布";
  } else {
        computerChoice = "剪刀";
  }
  return computerChoice;
};

/** 
 * 定义一个函数 getCustomChoice，这个函数用来获取玩家当前选择的是石头、剪刀还是布
 * js 中函数声明的方式为，你可以参考上面的函数：
 *   function foo(arg_1, arg_2) {
 *     return 0;
 *   }
 * tips: 1. 通过 document.getElementsByName() 来获取 DOM 节点的数组
 *       2. 遍历获取的数组，检查节点的 checked 属性
 *          如果节点的 checked 属性是 true，那么该元素就是用户当前选中的节点
 *       3. 你可以通过 alert(value) 来调试这个函数的返回值
 */

var getCustomChoice = function()
{
  var choices = document.getElementsByName(‘custom‘);
  for(var i = 0, len = choices.length; i < len ; i++ )
  {
    if(choices[i].checked === true )
    {
      //alert(choices[i].checked);
       return choices[i].value;
    }
  }
};

/** 
 * 定义一个函数 compare，这个函数有两个参数 choice1 和 choice2
 * 这个函数用来判断 choice1 和 choice2 那个获胜
 * 输入: choice1 和 choice2 为 ["石头", "剪刀", "布"] 中的一个值
 * 返回值: choice1 获胜返回 1
 *         choice2 获胜返回 -1
 *         平手返回 0
 * tips: 1. 使用 if 语句，js 的 if 语句语法：
 *            if (expression_1) {
 *              // your code
 *            } else if (expression_2) {
 *              // your code
 *            } else {
 *              // your code
 *            }
 */


var compare = function(choice1, choice2){
  if(choice1 === choice2){
    return 0;
  }
  if(choice1 === ‘石头‘)
  {
    if(choice2 === ‘布‘)
    {
      return -1;
    } 
    else 
    {
      return 1;
    }
  }
  if(choice1 === ‘剪刀‘)
  {
    if(choice2 === ‘石头‘)
    {
      return -1;
    } 
    else 
    {
      return 1;
    }
  }
  if(choice1 === ‘布‘)
  {
    if(choice2 === ‘剪刀‘)
    {
      return -1;
    } 
    else 
    {
      return 1;
    }
  }
};

// 显示结果
document.getElementById(‘start‘).onclick = function(){
  var customChoice = getCustomChoice();
  var computerChoice = randomComputerChoice();
  document.getElementById(‘player‘).innerHTML = customChoice;
  document.getElementById(‘computer‘).innerHTML = computerChoice;
  var result = compare(customChoice, computerChoice);
  var resultStr = ‘‘;
  if (result === 0) {
    resultStr = ‘平局‘;
  } else if (result === 1) {
    resultStr = ‘你赢了‘;
  } else {
    resultStr = ‘你输了‘;
  }
  document.getElementById(‘result‘).innerHTML = resultStr;
};

 暂时成品代码：

<html>
<body>
<script>
function Person(name)
{
  this.myName = name;
  
  this.SayHello = function(friend)
  {
      document.write("Hello,"+firend+"!My name is "+this.myName);
  }
}
                   
var Jessica = new Person("Jesica");
//alert("Hello,"+"firend"+"!My name is "+Jessica.myName);
document.write("Hello,"+"firend"+"!My name is "+Jessica.myName);

var str = prompt("Plz scan ur name:");
alert("Hello , " + str);
var bln = confirm("Next ,I‘ll ask u a question , " + str + ", r u foolish enough?");
if(bln === true){
  //do something , 三个等号不会做类型的匹配，尽量使用三个等号
alert("to be closed");
} else {
  alert("We‘ll continue!");
}

</script>
</body>
</html>