本文共 3053 字，大约阅读时间需要 10 分钟。

目录

---

-----前言

上篇文章介绍了有关JavaScript 概述、基础语法，详见可参考博文： ，本来是写一篇博文的，然而感觉篇幅太长不方便查阅，所以另起一篇，这篇将写一些例子来演示。

-----js代码实例演示

1、html页面弹出窗口

（1）实例代码—οnclick="alert('Hello World');

我们先来看看一个例子，如下代码：js01_(html弹出窗口).html

（2）效果演示

用谷歌浏览器打开运行，效果如下：

运行以后会出现一个按钮，点击按钮以后会出现如上图片效果

2、使用script代码块_自动弹窗口

（1）实例代码—script代码块、alert("您好，我是alert自动弹出框！");

我们先来看看一个例子，如下代码：js02_(script代码块_自动弹窗口).html

 

（2）效果演示

用谷歌浏览器打开运行，效果如下：

3、添加调用script代码块的方法

（1）实例代码

我们先来看看一个例子，如下代码：js03_(添加调用script代码块的方法).html

（2）效果演示

用谷歌浏览器打开运行，效果如下：

运行以后会出现一个按钮，点击按钮以后会出现如上图片效果

4、调用封装在js文件中的方法

（1）实例代码— 在js文件中封装方法、script代码块通过属性src引入

我们先来看看一个例子，如下代码：js04_(调用封装在js文件中的方法).html

接下来我们来看看 js 代码：jsCode1.js

//只能包含js代码//script代码块方法, 定义在这function Method2(){	alert("js in file");}

（2）效果演示

用谷歌浏览器打开运行，效果如下：

5、测试js中的特殊字符

（1）实例代码

我们先来看看一个例子，如下代码：js05_(js中的特殊字符).html

（2）效果演示

用谷歌浏览器打开运行，效果如下：

代码写了2个alert弹出框，点击确定会再次弹出，如下：

6、测试js中的类型转换

（1）实例代码

我们先来看看一个例子，如下代码：js06_(测试js中的类型转换).html

（2）效果演示

用谷歌浏览器打开运行，依次会弹出：a10、atrue、11、1 的弹出框，这里就不截图了

7、js输入数据计算平方

（1）实例代码—document、getElementById、value

我们先来看看一个例子，如下代码：js07_(js输入数据计算平方).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

 	
   		
   
    		猜数游戏： 1、内置好结果  2、录入完毕   3、大了或者小了		
    		
    	
   

接下来我们来看看 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

（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 开发工具，鼠标停留在方法名上，可以看到它的方法说明，如下：

 

 

 

 

 

 

 

 

 

 

 

转载地址：https://blog.csdn.net/YuDBL/article/details/104195519 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！