本文链接：https://blog.csdn.net/weixin_55935744/article/details/118710106

一、JS概述

1.简介

（1）JS全称为JavaScript，是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，主要目的是为服务器端脚本语言提供数据验证的基本功能。
（3）JavaScript端web程序开发中，尤其是html的开发，能给html网页添加动态功能，响应用户各种操作，实现诸如信息验证，数字日历，跑马灯，显示浏览器停留时间的特殊功能和效果。
（2）JS.具有简洁性，安全性，动态性，跨平台性等特点。

2.第一个JS程序

Js程序不能独立运行，必须依赖于html文件。通常将js代码放置在script标记内，由浏览器javascript脚本引擎来解释执行。
（1）基本语法

<script type="text/javascript" [src="外部js文件"]>
js语句块;
</script>

（2）语法说明
type属性说明脚本的类型，属性值"text/javascript" 意思是使用javascript编写的程序是文本文件。src属性是可选属性用于加载指定的外部件js文件，如果设置此属性，将忽略script的标记内的所有语句。
（3）实例解释
使用javascript向html页面输出信息。代码如下所示。

<!DOCTYPE html>
<html>
<head>
	<title>第一个js实例</title>
</head>
<body>
	<script type="text/javascript">
		document.write("第一个js实例");//利用document.write()命令向页面写入"第一个js实例".
	</script>
</body>
</html>

页面效果就是显示“第一个js实例”；

3、js放置的位置

js代码一般放置在页面的head或body部分。当放在head部分的时候，js只有被显示调用时才会被执行；当放在body部分的时候，页面载入的时候js会自动执行。除了放在同文件中head和body部分中，还可以放在外部js文件中和直接放在事件处理代码中。下面一一介绍实例。
（1）在head部分：

<!DOCTYPE html>
<html>
<head>
	<title>js在head中</title>
	<script type="text/javascript">
		function message(){    //在head部分写js函数时必须在前面加function
			alert("调用js函数sum(100,200)="+sum(100,200));
		}//用了alert函数来调用告警消息框
		function sum(x,y){
			return x+y;
		}
	</script>
</head>
<body>
	<p>定义两个js函数:</p>
	<p>无参函数message()和有参函数sum(x,y)</p>
	<form>
		<input type="button" name="btnCaLLJS" onclick="message();" value="     计算并显示两个数的和"> 
		  <!--定义了一个普通按钮，当单击该按钮时，触发按钮的onclick事件，即调用message（）函数-->
	</form>
</body>
</html>

（2）在body部分时可以看看一.2.(3)中的实例，这里不再介绍。
（3）外部js文件
可以将js函数单独写成一个js文件，就类似于css文件一样。实例如下：
js1.js文件：

function message(){
	alert("调用外部js文件中的函数!");
}

js1.html文件：

<!DOCTYPE html>
<html>
<head>
	<title>js在外部文件中</title>
	<script type="text/javascript" src="js1.js">
		document.write("这条语句不再执行，被忽略掉了!");
	</script>
</head>
<body>
	<form>
		<input type="button" name="btnCaLLJS" onclick="message();" value="     调用外部js文件">
	</form>
</body>
</html>

需要注意的是，设置scr属性调用外部js文件之后,他所在的script标记之间所有语句都不会执行,所以第五行不会执行。页面显示效果截图就没有在这里一一展示,读者可以自己演示。
(4)js代码还可以直接写在事件处理代码中

<!DOCTYPE html>
<html>
<head>
	<title>直接在事件处理代码中加入js代码</title>
</head>
<body>
	<form>
		<input type="button" name="btnCaLLJS" onclick="alert('直接在事件处理代码中加入js代码')" value="直接调用js代码">
	</form>
</body>
</html>

直接在普通按钮的onclick事件中插入了js代码，单击该按钮时弹出警告框。

4、js程序

Js程序由语句，语句块，函数，对象，方法，属性，注释等构成；通过顺序，分支和循环三种基本程序控制结构来进行编程。这和计算机的其他语言都大致相同，不在一一介绍。下面介绍一下消息对话框。
（1）告警框
基本语法：alert（message）；上面用到过。
（2）确认框
基本语法：confirm（message）；
用于显示带有一个图标，指定消息和“确定”及“取消”按钮的对话框。
用户单击“取消”该函数返回false，单击“确定”该函数返回ture。在用户单击“确定”按钮或“取消”按钮关闭对话框之前，它将阻止用户对浏览器的所有操作。在调用该函数时，将暂停对js代码的执行，在用户做出响应之前不会执行下一条语句。
（3）提示框
基本语法：prompt(“提示信息”,默认值);
如果用户单击提示框的取消按钮，则返回null。如果用户单击确定按钮，则返回文本输入框中输入的值。在用户单击确定按钮或取消按钮关闭对话框之前，它将阻止用户对浏览器的所有操作。在调用该函数时，将暂停对js代码的执行，在用户做出响应之前不会执行下一条语句。

二、标识符和变量

1、命名规范

（1）标识符
标识符是计算机语言中用来表示变量名，函数名等的有效字符序列，简单来说，标识符就是一个名字，js关于标识符的规定如下：
1）必须以英文字母或者下划线开头。
2）必须有英文字母，数字下划线组成，不能出现空格或制表符。
3）不能使用js关键字与js保留字。
4）不能使用js语言内部的单词。例如，Infinity，NaN等。
5）区别大小写，如Name和name是不同的两个标识符。
（2）关键字
关键字指的是js中已经被赋予特定意义的一些单词。如break，else，return等等。
（3）保留字
Js中除了关键字以外，还有一些用于未来扩展时使用的保留字，保留字同样不能使用标识符的意义。

2、数据类型

（1）String字符型
字符型数据又称为字符串，由若干个字符组成，并且需要由单引号或者双引号封装起来。单引号和双引号，效果是一样的。
（2）Number数值型
1）整型
2）浮点型
3）内部常量，如Math.E（自然数）、Math.PI（圆周率）等等。
（3）Boolean布尔型
（4）Null
（5）Undefined
这是一类特殊的值，是指变量创建之后还没有赋值之前所具有的值，则返回值就是Undefined。他与null不同之处，null表示变量已经赋值，只不过是“无值”；而Undefined表示变量不存在或者没有赋值。如果使用未定义的变量也会显示undefined，但通常使用未定义的变量会造成程序错误。
（6）Object对象
复合的数据类型成为对象，对象是属性和方法的集合。属性可以包括以上的类型。甚至是另一种类型的对象。而方法是一个定义在对象中的函数，用于实现特定的功能。

3、变量

Js变量是一个存储或者表示数据的名称，可用来存储和表示各种数据类型的数据，并且这些只在程序运行期间是可以改变的。Js是一种无数据类型的计算机语言，在定义变量时不需要指定变量的数据类型，统一使用关键字var声明，Js会在需要的时候自动对不同的数据类型进行转型。
（1）基本语法：
var 变量名；或var 变量名=初值；或多个变量同时声明和赋值，中间用“,”隔开。

三、运算符和表达式

js运算符主要有算术运算符、关系运算符、逻辑运算符、赋值运算符、自增自减运算符、条件运算符、逗号运算符、位运算符等等。也可以根据操作数（变量、常量、函数等）的个数来讲运算符分为一元运算符、二位运算符和三位运算符。
由操作数和运算符结合在一起构成的式子称为表达式。

1、算术运算符和表达式

常用的一些算术运算符和其他多数语言的一致，如+、-、*、/、%、++、–等等。需要注意的一些地方：
（1）字符型和数值型进行‘-’运算时：

"javascript"+1.6;     //结果为javascript1.6

（2）‘-’运算符可以将字符型转化为数值型：

"325"-0;     //将字符串"325"转换成325

（3）‘*’ 运算符需要注意：

3*"5";     //将“5”转化为数值型后再执行操作，结果为15
3*"A";    //“A”无法转化为数字，结果为NaN

（4）‘/’ 运算符要注意的地方与*运算差不多。如果除数为0，操作结果为（-）Infinity，正负取决于被除数的正负。
（5）“%”运算符

18%"7";   //结果为4
18%"A";  //结果为NaN
20%0;   //结果为NaN

2、关系运算符和表达式

==、!=、<、>、<=、>=等等
需要注意以下3点：
（1）操作数的类型转型。如果被比较的操作数是同类型的，那么等于运算符将直接对操作数进行比较。如果被比较的操作数类型不同，那么等于运算符在比较两个操作数之前会自动对其进行类型转换。转化规则为：
1）如果既有数字又有字符串，那么js将字符串转换为数字，然后进行比较。
2）如果有布尔型，那么将ture转换为1，false转换为0，然后进行比较。
3）如果一个对象，一个是字符串或数字，那么js将把对象转化成与另一个操作数值类型相同的值，然后再进行比较。
（2）**两个对象、数组或者函数的比较不同于有字符串、数字和布尔值参与的比较。**前者比较的是引用内容，换句话说，只有两个变量引用的是同一个对象，数组或者函数的时候，他们才是相等的。如果两个变量引用的不是同一个对象，数组和函数，即使他们的属性元素完全相同，或者他们转化成相等的原始数据类型的值，他们也是不相等的。
（3）特殊值的比较。
1）如果一个操作数是NaN，另一个操作数是数字或NaN，那么结果是不等。
2）如果两个操作数都是null，那么结果相等。
3）如果两个操作数都是undefined类型，那么结果相等。
4）如果一个操作数是null，一个操作数是undefined类型，那么结果相等。

3、逻辑运算符和表达式

!a（逻辑非）、a&&b（逻辑与）、a||b（逻辑或）

4、赋值运算符和表达式

5、位运算符和表达式

位运算符是在数的二进制基础上进行操作，所以要先转化成二进制。
（1）按位与运算符（&）
如果两个操作数对应位置上的数字都是1，运算结果的这一位为1，否则为0。
（2）按位或运算符（|）
如果两个操作数对应位置上的数字都是0，运算结果的这一位为0，否则为1。
（3）按位非运算符（~）
按位取反。
（4）按位异或运算符（^）
将两个整数型操作数不为进行逻辑异或操作。如果两个操作数对应位置上的数字相同，运算结果的这一位为0，否则为1。

6、条件运算符和表达式

条件运算符是一个三元运算符
基本语法：
<变量>=<条件表达式>?<真值表达式>:<假值表达式>
语法说明：
如果条件表达式的结果为真。则将增值表达式的值赋给变量，否则将假值表达式的值赋给变量。

四、JS程序控制结构

1、顺序结构

顺序结构是程序设计中最常用，最基本的一种程序结构是按照语句出现的顺序，从第一句语句开始，一步一步逐条执行，直至最后一条语句。

2、分支结构

（1）if语句
（2）if…else语句
（3）多重if…else语句
（4）switch语句

3、循环结构

（1）for循环
（2）while循环
（3）do…while循环
（4）for…in循环
主要用于数组集合对象的遍历。
基本语法：

for(variable in object){
      需要循环执行的代码;
}

variable可以是一个变量名，数组，元素或对象属性，object可以是一个对象名或者计算结果为对象的表达式。循环将对object对象的每一个属性或每一个元素都执行一次循环，在循环过程中，首先将object对象的一个属性名作为字符串赋给变量variable，这样在循环体内就可以通过变量variable访问对象属性。
实例：

<!DOCTYPE html>
<html>
<head>
	<title>for-in循环</title>
</head>
<body>
	<script type="text/javascript">
		var stu=new Array("张三","李四","王五","赵六");
		var i=1;   //计数器
        document.write("<h3>数组的元素分别为：</h3>");
        for(var student in stu){      //通过for-in来遍历数组中的所有元素
        	document.write(i+"."+stu[student]+"<br>");
        	i++;
        }
	</script>
</body>
</html>

页面效果如下图：
在这里插入图片描述

分支结构和循环结构的这些语句和其他许多计算机语言的用法差别不大。

五、JS函数

js函数分为系统内部函数和系统对象定义的函数，即用户自定义函数函数就是完成一个特定的功能的程序代码。函数只需要定义一次，可以多次使用，从而提高程序代码的复用率，既减轻开发人员的负担，又降低了代码的重复度。
函数需要先定义后使用js函数一般定义在html文件的头部head标记或外部js文件中，而函数的调用可以在html文件的主体body标识中的任何位置。

1、常用系统函数

常用系统函数分全局函数和对象定义的函数。
（1）全局函数，它不属于任何一个内置对象，使用时不需要加任何对象的名称直接调用。如eval()、escape()等等。

全局函数名称与说明对照表如下

函数	说明
decodeURI()	解析某个编码的URI
decodeURIComponent()	解析某个编码的URI组件
encodeURI()	把字符串编码为URI
encodeURIComponent()	把字符串编码为URI组件
eval()	计算机js字符串，并把它作为脚本代码来执行
escape()	对字符串进行编码
unescape()	对由escape()编码的字符串进行解码
parseFloat()	解析一个字符串并返回一个浮点数
parseInt()	解析一个字符串并返回一个整数
getClass()	返回一个JavaObject的JavaClass
isNaN()	检查某个值是否是非数
isFinite()	检查某个值是否为有穷大的数
Nuber()	把对象的值转化为数字
String()	把对象的值转化为字符串

（2）对象定义的函数依赖于对象，使用时需要加对象名称；例如，alert()、confirm()等函数是window对象定义的函数。document.write()是document对象的方法。
1）toString(radix)。怎Number型数据转化为字符型数据，并返回指定的基数的结果。其中radix范围为2~36，省略则为10。例如：

var a=12;
alert(a.toString(2));   //告警框输出结果为1100(二进制)
alert(a.toString());    //告警框输出结果为12(默认十进制)

2）toFixed(n)。将浮点数转换为固定小数点位数的数字。n是整数,设置小数的位数，如果省略了，该参数将用零代替。
3）字符串查找和提取常用函数
字符串对象提供了一系列字符串查找和提取的方法。如下表：

方法	说明
indexOf(s,f)	从前向后搜索字符串。返回某个指定的字符串值在字符串中首次出现的位置，如果没有发现,返回-1
lastIndexOf(s,f)	从后向前搜索字符串.返回一个指定的字符串值最后出现的位置，如果没有发现，返回-1
charAt(index)	返回在指定位置的字符
substring(start,stop)	用于提取从start到end（不包括该元素）之间的字符串

2、自定义函数

（1）函数定义
函数是由事件驱动的或者当他被调用时执行的可重复使用的代码块。
基本语法：

function 函数名（参数1，参数2，...参数n）{
      要执行的代码（函数体）;
 }

例如：自定义求长方形面积的函数。
代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>自定义函数的应用</title>
	<script type="text/javascript">
		function area(a,b){    //自定义函数，求面积和弹框
			s=parseInt(a.value)*parseInt(b.value);
			alert("长方形的面积为"+s);
		}
	</script>
</head>
<body>
	<form>
		长：<input type="text" name="a"><br>  <!--文本输入框，输入长和宽-->
		宽：<input type="text" name="b"><br>
		<input type="button" onclick="area(a,b)" value="求面积">
		<!--定了一个普通按钮，用于调用自定义函数area(a,b),onclick事件绑定事件处理程序,完成面积的计算。-->
	</form>
</body>
</html>

页面效果图：
在这里插入图片描述

3、带参数返回的return语句

如果需要返回函数的计算结果，可以使用带参数的return语句。如果不需要返回函数的结果，则使用不带参数的return语句。
基本语法：

return 函数执行结果; //有返回值
return ;      //无返回值，此句可有可无

4、函数变量的作用域

变量分为局部变量和全局变量，局部变量是指在函数内部声明的变量，该变量只能在一段程序中发挥作用；而全局变量是指在函数之外声明的变量，该变量在整个js代码中发挥作用，全局变量的生命周期从声明开始到页面关闭时结束。
局部变量和全局变量可以重名。在函数体内部，局部变量的优先级高于全局变量。即在函数体以内，同名的全局变量被隐藏了。
需要注意的是，专用于函数体内部的变量一定要用var关键字声明，否则该变量将被定义成全局变量。如果函数体外部有同名的变量，可能导致全局变量被修改。

记录自己初步学习js基础的过程，也欢迎网友们关注收藏来一起学习，共同进步。