目录
(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 开发工具,鼠标停留在方法名上,可以看到它的方法说明,如下: