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

GDG shanghai programming one hour by JavaScript的更多相关文章

  1. Head First HTML5 Programming笔记--chapter2 介绍Javascript和DOM

    你已经了解了HTML标记(也称为结构),而且知道了CSS样式(也称为表示),剩下的就是Javascript(也称为行为). JavaScript的工作方式 1. 编写 你创建HTML标记和JavaSc ...

  2. JavaScript资源大全中文版(Awesome最新版)

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  3. [Javascript] How to use JavaScript's String.replace

    In JavaScript, you can change the content of a string using the replace method. This method signatur ...

  4. 第十五章:Python の Web开发基础 (二) JavaScript与DOM

    本課主題 JavaScript 介绍 DOM 介绍 JavaScript 介绍 JavaScript 是一门编程语言,它可以让网页动起来的,JavaScript 的变量有两种,一个是局部变量:一个是全 ...

  5. Jerry的ABAP, Java和JavaScript乱炖

    写这个系列的初衷是SAP Chengdu office有越来越多的应届毕业生加入,这些新同事通过在大学的专业学习,具备了Java和JavaScript背景,但是进入SAP之后大家觉得ABAP没有Jav ...

  6. Browser Render Engine & Javascript Engine

    Browser Render Engine Programming Language Open Source Javascript Engine Comparation for CSS Compati ...

  7. WHY JAVASCRIPT NEEDS TYPES

    Types have a bad reputation for making code harder to read, adding unnecessary ceremony, and in gene ...

  8. 上海GDG活动有感

    本周参加了场上海的GDG活动.本次活动的主办方 先介绍一下: GDG Shanghai 上海GDG(Google开发者社区,以前是GTUG, Google技术用户组) ,众所周知,Google的搜索引 ...

  9. Javascript——概述 && 继承 && 复用 && 私有成员 && 构造函数

    原文链接:A re-introduction to JavaScript (JS tutorial) Why a re-introduction? Because JavaScript is noto ...

随机推荐

  1. [LeetCode]题解(python):122-Best Time to Buy and Sell Stock II

    题目来源: https://leetcode.com/problems/best-time-to-buy-and-sell-stock-ii/ 题意分析: 和上题类似,给定array,代表第i天物品i ...

  2. java 类排序

    参考文档:Java排序: Comparator vs Comparable 入门 java类经常面临排序问题,据我所知:java提供comparable和comparator两种比较方式: 1. co ...

  3. 1_HelloWorld

    学iOS开发与学Swift是两件事情,Swift只是一种语言,它有官方手册,里面包含了全部的语法.对其他任何一门语言很熟悉的人,学习Swift可能只需要几天的时间.而这之后,学习iOS开发才是难点,有 ...

  4. 转: Nodejs概述

    目录 简介 安装与更新 版本管理工具nvm 基本用法 REPL环境 异步操作 全局对象和全局变量 模块化结构 概述 核心模块 自定义模块 fs模块 Stream模式 http模块 实例:搭建一个HTT ...

  5. HDU 1130 How Many Trees?

    裸的卡特兰数 C++#include<iostream> #include<cstdio> using namespace std; #define base 10000 #d ...

  6. C++中struct和class的总结

    一.在语法上的一些区别 由于C++是从C发展而来,C++中的struct更多的是去做了兼容的C的部分.在语法层面他们有以下的区别: 1. struct中所有的成员是是public,也就是说你可以对一个 ...

  7. Baby Step Gaint Step

    给定同余式,求它在内的所有解,其中总是素数. 分析:解本同余式的步骤如下 (1)求模的一个原根 (2)利用Baby Step Giant Step求出一个,使得,因为为素数,所以有唯一解. (3)设, ...

  8. 你能相信吗?这些都是由一个DIV元素实现的动画,纯CSS3技术

    http://www.webhek.com/misc/css-loaders

  9. UIWebvView 解决onClick 延迟相应问题

    在使用 UIWebView 的过程中, 发现 onClick 触发需要等待300-500ms, Google了一下, 发现是因为ScrollView 在等待doubleTap, 所以有延迟 使用如下代 ...

  10. 我的Python成长之路---第六天---Python基础(20)---2016年2月20日(晴)

    一.面向对象基础 面向对象名词解释: 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公 ...