WebBasicJavaScriptUnit01
1 JavaScript 之HelloWorld案例
1.1 问题
1）创建 html 页面；
2）为页面添加三个按钮；
3）为按钮定义单击事件，并分别用三种方式添加JavaScrip 代码，以弹出 HelloWorld。
1.2 方案
使用JavaScript的三种方式：
1.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建HTML
在day04文件夹下，创建demo1.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>使用JS</title>
<meta charset="utf-8" />
<script type="text/javascript" src="hello.js"></script>
<script type="text/javascript">
function f2() {
alert('嵌入式使用JS');
}
</script>
</head>
<body>
<input type="button" value="按钮1" onclick="alert('事件定义式使用JS');"/>
<input type="button" value="按钮2" onclick="f2();"/>
<input type="button" value="按钮3" onclick="f3();"/>
</body>
</html>
步骤二：创建JS
在day04文件夹下创建hello.js，代码如下：
function f3() {
alert('文件调用式使用JS');
}
步骤三：测试
使用浏览器打开demo1.html，点击按钮1，效果如下图：
图-1
点击按钮2，效果如下图：
图-2
点击按钮3，效果如下图：
图-3
1.4 完整代码
demo1.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>使用JS</title>
<meta charset="utf-8" />
<script type="text/javascript" src="hello.js"></script>
<script type="text/javascript">
function f2() {
alert('嵌入式使用JS');
}
</script>
</head>
<body>
<input type="button" value="按钮1" onclick="alert('事件定义式使用JS');"/>
<input type="button" value="按钮2" onclick="f2();"/>
<input type="button" value="按钮3" onclick="f3();"/>
</body>
</html>
hello.js完整代码如下：
function f3() {
alert('文件调用式使用JS');
}
2 计算平方
2.1 问题
1）判断页面文本框中录入的文本是否为数值
2）如果录入的文本不能转换为数值，则提示重新录入
3）如果录入的文本为数值，则计算平方
2.2 方案
使用数据类型转换函数：
2.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建HTML
创建demo2.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>计算平方</title>
<meta charset="utf-8" />
<script type="text/javascript">
function cal() {
var num_obj = document.getElementById("num");
var result_obj = document.getElementById("result");
var num = num_obj.value;
if(num == "" || isNaN(num)) {
result_obj.innerHTML = "必须输入数字!";
} else {
var n = parseInt(num);
result_obj.innerHTML = n * n;
}
}
</script>
</head>
<body>
<h1>计算平方</h1>
<p>
<input type="text" id="num"/>
<input type="button" value="平方" onclick="cal();"/>
= <span id="result"></span>
</p>
</body>
</html>
步骤二：测试
使用浏览器打开demo2.html，输入数字，点击平方按钮，效果如下图：
图-4
2.4 完整代码
demo2.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>计算平方</title>
<meta charset="utf-8" />
<script type="text/javascript">
function cal() {
var num_obj = document.getElementById("num");
var result_obj = document.getElementById("result");
var num = num_obj.value;
if(num == "" || isNaN(num)) {
result_obj.innerHTML = "必须输入数字!";
} else {
var n = parseInt(num);
result_obj.innerHTML = n * n;
}
}
</script>
</head>
<body>
<h1>计算平方</h1>
<p>
<input type="text" id="num"/>
<input type="button" value="平方" onclick="cal();"/>
= <span id="result"></span>
</p>
</body>
</html>
3 猜数字
3.1 问题
1）判断页面文本框中录入的文本是否为数值
2）如果录入的文本不能转换为数值，则提示重新录入
3）如果可以转换为数值，则与内置好的数值进行比较，并提示比较的结果（“小了”、“大了”或者“猜对了”）
3.2 方案
使用关系运算符：
>：大于
==：等于
使用逻辑运算符：
||：或
3.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建HTML
创建 demo3.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>猜数字</title>
<meta charset="utf-8" />
<script type="text/javascript">
var init_num = parseInt(Math.random()*100)+1;
console.log(init_num);
function guess() {
var num = document.getElementById("num").value;
var result = document.getElementById("result");
if(num == "" || isNaN(num) || num<1 || num>100) {
result.innerHTML = "必须输入1-100之间的数字!";
} else {
if(num>init_num) {
result.innerHTML = "大了!";
} else if(num<init_num) {
result.innerHTML = "小了!";
} else {
result.innerHTML = "对了!";
}
}
}
</script>
</head>
<body>
<h1>猜数字游戏</h1>
<p>
<input type="text" id="num"/>
<input type="button" value="开始猜" onclick="guess();"/>
<span id="result"></span>
</p>
</body>
</html>
步骤二：测试
打开demo3.html，输入任意数字，点击开始猜按钮，效果如下图：
图-5
3.4 完整代码
demo3.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>猜数字</title>
<meta charset="utf-8" />
<script type="text/javascript">
var init_num = parseInt(Math.random()*100)+1;
console.log(init_num);
function guess() {
var num = document.getElementById("num").value;
var result = document.getElementById("result");
if(num == "" || isNaN(num) || num<1 || num>100) {
result.innerHTML = "必须输入1-100之间的数字!";
} else {
if(num>init_num) {
result.innerHTML = "大了!";
} else if(num<init_num) {
result.innerHTML = "小了!";
} else {
result.innerHTML = "对了!";
}
}
}
</script>
</head>
<body>
<h1>猜数字游戏</h1>
<p>
<input type="text" id="num"/>
<input type="button" value="开始猜" onclick="guess();"/>
<span id="result"></span>
</p>
</body>
</html>
4 计算阶乘
4.1 问题
1）在文本框中输入一个1-100的整数
2）计算该整数的阶乘
4.2 方案
4.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建HTML
创建demo4.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>计算阶乘</title>
<meta charset="utf-8" />
<script type="text/javascript">
function cal() {
var num = document.getElementById("num").value;
var result = document.getElementById("result");
if(num == "" || isNaN(num) || num<1 || num>100) {
result.innerHTML = "必须输入1-100之间的数字！";
} else {
var n = parseInt(num);
var sum = 1;
for(var i=n;i;i--) {
sum *= i;
}
result.innerHTML = sum;
}
}
</script>
</head>
<body>
<h1>计算阶乘</h1>
<p>
<input type="text" id="num"/>
<input type="button" value="阶乘" onclick="cal();"/>
= <span id="result"></span>
</p>
</body>
</html>
步骤二：测试
使用浏览器打开demo4.html，输入任意整数，点击计算按钮，效果如下图：
图-6
4.4 完整代码
demo4.html完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>计算阶乘</title>
<meta charset="utf-8" />
<script type="text/javascript">
function cal() {
var num = document.getElementById("num").value;
var result = document.getElementById("result");
if(num == "" || isNaN(num) || num<1 || num>100) {
result.innerHTML = "必须输入1-100之间的数字！";
} else {
var n = parseInt(num);
var sum = 1;
for(var i=n;i;i--) {
sum *= i;
}
result.innerHTML = sum;
}
}
</script>
</head>
<body>
<h1>计算阶乘</h1>
<p>
<input type="text" id="num"/>
<input type="button" value="阶乘" onclick="cal();"/>
= <span id="result"></span>
</p>
</body>
</html>