目录
（1）实例代码—οnclick="alert('Hello World');
（1）实例代码—script代码块、alert("您好，我是alert自动弹出框！");
（1）实例代码— 在js文件中封装方法、script代码块通过属性src引入
（1）实例代码—document、getElementById、value
-----前言
上篇文章介绍了有关JavaScript 概述、基础语法，详见可参考博文：web快速入门之基础篇-js：1_1、JavaScript 概述、基础语法 ，本来是写一篇博文的，然而感觉篇幅太长不方便查阅，所以另起一篇，这篇将写一些例子来演示。
-----js代码实例演示
1、html页面弹出窗口
（1）实例代码—οnclick="alert('Hello World');
我们先来看看一个例子，如下代码：js01_(html弹出窗口).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- 编码类型,：纯文本html,字符类型utf-8 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<form>
<!--
onclick: 响应单击事件;
alert:输出 ;
字符串可用双引号( “” )或单引号( ' ' ) ;
这里用双引号起冲突, 在Hello前面就认为结束了
-->
<input type="button" value="按钮" οnclick="alert('Hello World');"/>
</form>
</body>
</html>
（2）效果演示
用谷歌浏览器打开运行，效果如下：
运行以后会出现一个按钮，点击按钮以后会出现如上图片效果
2、使用script代码块_自动弹窗口
（1）实例代码—script代码块、alert("您好，我是alert自动弹出框！");
我们先来看看一个例子，如下代码：js02_(script代码块_自动弹窗口).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--
type="text/javascript":类型为纯文本的javascript
language="javascirpt"：语言为javascirpt(新版本一般不写)
-->
<script type="text/javascript" language="javascirpt">
// alert方法： 用于输出；
// 这里没写js方法, 自动弹出
alert("您好，我是alert自动弹出框！");
</script>
</head>
<body>
</body>
</html>
（2）效果演示
用谷歌浏览器打开运行，效果如下：
3、添加调用script代码块的方法
（1）实例代码
我们先来看看一个例子，如下代码：js03_(添加调用script代码块的方法).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" language="javascirpt">
//方法的定义： function 方法名{ ... }
function Method1() {
alert("hello，我是script代码块里面的方法！");
}
</script>
</head>
<body>
<form>
<!-- οnclick="Method1(); 响应script代码块的方法 -->
<input type="button" value="按钮" οnclick="Method1();" />
</form>
</body>
</html>
（2）效果演示
用谷歌浏览器打开运行，效果如下：
运行以后会出现一个按钮，点击按钮以后会出现如上图片效果
4、调用封装在js文件中的方法
（1）实例代码— 在js文件中封装方法、script代码块通过属性src引入
我们先来看看一个例子，如下代码：js04_(调用封装在js文件中的方法).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!-- 把script代码块的方法，封装在js文件中，通过属性src引入 -->
<script src="jsCode1.js" type="text/javascript" language="javascirpt"> </script>
</head>
<body>
<form>
<!-- οnclick="Method2(); 响应script代码块的方法 -->
<input type="button" value="按钮" οnclick="Method2();" />
</form>
</body>
</html>
接下来我们来看看 js 代码：jsCode1.js
//只能包含js代码
//script代码块方法, 定义在这
function Method2(){
alert("js in file");
}
（2）效果演示
用谷歌浏览器打开运行，效果如下：
5、测试js中的特殊字符
（1）实例代码
我们先来看看一个例子，如下代码：js05_(js中的特殊字符).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" language="javascirpt">
function Method3() {
alert("ma\"r\'\ny"); //\ 进行转义：半双引号(")、半单引号(')、换行(\n)
alert("\u4e00");// 一
}
</script>
</head>
<body>
<form>
<input type="button" value="测试特殊字符—按钮" οnclick="Method3();" />
</form>
</body>
</html>
（2）效果演示
用谷歌浏览器打开运行，效果如下：
代码写了2个alert弹出框，点击确定会再次弹出，如下：
6、测试js中的类型转换
（1）实例代码
我们先来看看一个例子，如下代码：js06_(测试js中的类型转换).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" language="javascirpt">
function Method1() {
var s = "a";
var n = 10;
var b1 = true;
var b2 = false;
alert(s + n);//a10 字符串+数字
alert(s + b1);//atrue 字符串+布尔类型
alert(n + b1);//11 数字+布尔类型
alert(b1 + b2);//1 布尔类型+布尔类型
}
</script>
</head>
<body>
<form>
<input type="button" value="类型转换—按钮" οnclick="Method1();" />
</form>
</body>
</html>
（2）效果演示
用谷歌浏览器打开运行，依次会弹出：a10、atrue、11、1 的弹出框，这里就不截图了
7、js输入数据计算平方
（1）实例代码—document、getElementById、value
我们先来看看一个例子，如下代码：js07_(js输入数据计算平方).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jsCode2.js" type="text/javascript" language="javascirpt"></script>
</head>
<body>
<form>
<!--标识id,js文件可以通过对应, 获取相应值-->
<input type="text" id="txtNumber" />
<input type="button" value="计算平方" οnclick="getSquare();" />
</form>
</body>
</html>
接下来我们来看看 js 代码：jsCode2.js
//只能包含js代码
//script代码块方法, 定义在这
//计算录入数值的平方
function getSquare(){
//得到录入的内容
//document:代表整个文档
//getElementById:根据id获取元素
//value：与input的value对应－>获取对应属性值
var s = document.getElementById("txtNumber").value;
//判断是否为一个数值
if(isNaN(s)) {
alert("请输入数值");
}else {
//类型转换，将字符串转换为浮点数
var n = parseFloat(s);//12.35
//计算
alert(n*n);
}
}
（2）效果演示
用谷歌浏览器打开运行，效果如下：
8、js猜数游戏
（1）实例代码—三目运算符、onblur方法
我们先来看看一个例子，如下代码：js08_(js猜数游戏).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jsCode3.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
猜数游戏： 1、内置好结果 2、录入完毕 3、大了或者小了
<!-- onblur: 当元素失去焦点后, 响应方法事件 -->
<input type="text" οnblur="judgeNumber();" id="txt1" />
</form>
</body>
</html>
接下来我们来看看 js 代码：jsCode3.js
//只能包含js代码
//script代码块方法, 定义在这
//猜数字
function judgeNumber(){
var result = 10;
var s = document.getElementById("txt1").value;
var n = parseInt(s);
//三目运算符：
//n和result比较，弹出小了、大了或相等
var r = result > n?"小了":"大了或相等";
alert(r);
}
（2）效果演示
用谷歌浏览器打开运行，效果如下：
9、js中的 == 和＝＝＝, if条件语句
（1）实例代码
我们先来看看一个例子，如下代码：js09_(js中的==和＝＝＝, if条件语句 ).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--
（1）a == b：比较值
（2）严格相等： a === b：比较值以及类型相同 -->
<script type="text/javascript" language="javascript">
function Method1() {
var a = 100;
var b = "100";
if (a == b)
alert("equal");
if (a === b)
alert("same");
if ("" == 0)
alert("sss");
}
</script>
</head>
<body>
<form>
<input type="button" value="按钮" οnclick="Method1();" />
</form>
</body>
</html>
（2）效果演示
用谷歌浏览器打开运行，依次弹出的是： equal、sss，这里就不截图了！
因为双等号比较的是值，三个等号比较的是值和类型
----- ***初学者注意点
1、当忘记写</script>，会出现什么都不显示
2、自己写的 js 文件，src="jsCode1.js" 这个js文件名引入的时候别写错啦
3、VSCode格式化的快捷键 alt + shfit + f
4、刚刚写的 js 方法，其实可以放到一个 js 文件（ jsCode4_all.js ）里面，如下：
script代码块，src 引入的时候名字对应上，别写错了。如： src="jsCode4_all.js"
//只能包含js代码
//script代码块方法, 定义在这
function Method2(){
alert("js in file");
}
//计算录入数值的平方
function getSquare() {
//得到录入的内容
//document:代表整个文档
//getElementById:根据id获取元素
//value：与input的value对应－>获取对应属性值
var s = document.getElementById("txtNumber").value;
//判断是否为一个数值
if (isNaN(s)) {
alert("请输入数值");
} else {
//类型转换，将字符串转换为浮点数
var n = parseFloat(s);//12.35
//计算
alert(n * n);
}
}
//猜数字
function judgeNumber() {
var result = 10;
var s = document.getElementById("txt1").value;
var n = parseInt(s);
//三目运算符：
//n和result比较，弹出小了、大了或相等
var r = result > n ? "小了" : "大了或相等";
alert(r);
}
5、用 VSCode 开发工具，鼠标停留在方法名上，可以看到它的方法说明，如下：
