GDG shanghai programming one hour by JavaScript

刚在昨天参加了一场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>