A js脚本_ajs-CSDN博客

本文链接：https://blog.csdn.net/weixin_44145887/article/details/122487265

1.js(java script)定义

是一种基于对象object和事件驱动event driver的解释性脚本语言。用于增强HTML页面的动态交互性

2.特点

嵌套在HTML中
js在运行时需要浏览器环境的支持；
解释执行；无需经过专门的编译器编译，在嵌入js脚本的html文件载入浏览器时，会被逐行的解释执行
弱类型语言。用var声明变量，不需要指定变量类型。eg：var no = “abc”;
事件驱动；html中控件（如按钮、文本框）被触发时，会自动执行js代码
跨平台；js是依赖浏览器运行的，与具体的操作系统无关
基于对象；

3.基本语法：
3.1在html文件中引入js脚本（一般把js引入放在页面尾部）

</body>
<script src="${pageContext.request.contextPath}/js/jquery-1.9.1.min.js"></script>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</html>

1）内部引入

如同css文件中的内部方式表，直接写在head标签内部，不用引入外部js文件
可以通过如下两种引入：

<script type="text/javascript">	
//js脚本代码
</script>

<script language="JavaScript">	
//js脚本语言
</script>

2)外部引入

如同css文件中的外部样式表，在head标签内引入一个js文件，文件内写js脚本代码
如下：

<head>
<script type="text/javascript" src="../js/div.js"></script>
</head>

3.2 声明变量

通过var关键字声明变量
由于js是弱类型语言，不需要指定变量类型

var no = 1;
var str = "abc";
var obj = {
	name: "张三",
	age: 12
};
console.info(“no = ”,no);
console.info(“obj = ”,obj);
console.info(“str = ”,str);

3.3 数据类型
1）五种原始数据类型：

数据类型	         说明	                                     示例
Number	         数字类型
                 可以声明整数、小数、正数、负数	            var no1 = 1;	
                                                            var no2 = new Number(12);
                                                            var no3 = 12.12;
                                                            var no4 = -12.123;
                                                            
Boolean	         布尔类型                                    var no_bt = true;
                 0-false                                    var no_bf = false;
                 1-true	                                    var no_nf = new Boolean(0);
                 //赋值非0都是true(注意这点                   var no_nt = new Boolean(-1);
                 js和java不同，java中boolean                 var no_nt2 = new Boolean(2)
                 只能赋值为true或者false)       
                                              
String	         字符串类型	                                  var str1 = "李四";
                                                              var str2 = new String("abc");
                                                              
Null	         空值，属于Object类型	                      var no = null;

Undefined	     无，表示变量未被赋值；	                      var no = undefined;

2）引用类型：

Array	  数组	           var arr = [1,2,3]; 
                           //一个数组可以存放不同类型的元素
                           var arr2 = [1, "abc", true];
                           //声明数组元素
                           var arr3 = new Array(1,2,3);
                           //声明数组长度
                           var arr4 = new Array(3);
                           arr4[0]='a';
                           arr4[1]='b';
                           arr4[2]='c';
                           //获取数组长度
                           console.info(arr4.length);
                           
Object	对象	           var obj = {
                             //属性
                             name:"张三",
                             age:12,
                             addr:"青岛"
                             }
日期类型 Date()	            var d = new Date();
                            //把Date对象的日期转为字符串
                            //Tue Jul 20 2021	
                            console.info(d.toDateString());
                            //把Date对象转为字符串
                            //Tue Jul 20 2021 17:58:27 GMT+0800 (中国标准时间)
                            console.info(d.toString());
                            //返回四位数字的年份
                            d.getFullYear();
                            //返回月份0-12
                            d.getMonth();
                            //返回一个月中的第几天
                            d.getDate();
                            //返回小时0-23
                            d.getHours()
                            //返回分钟0-59
                            d.getMinutes();
                            //返回秒数0-59
                            d.getSeconds();
                            //返回1970年1月1日至今的毫秒数（时间戳）
                            d.getTime();
正则类型  RegExp()	       var str = "15701238485";
                           //方式1 创建正则表达式
                           var regx = /^1[345789]\d{9}$/;
                           //方式2 创建正则表达式对象
                           var regx = new RegExp("^1[345789]\\d{9}$");
                           //test()方法验证字符串是否跟正则表达式匹配，返回布尔值
                           var tar = regx.test(str);
                           console.info(tar);
Function   函数	            //构造一个名为t的函数
                            var t = function(){};

3）数据类型转换

parsentInt() 转成数字类型
注意当转换失败时，会报NaN（Not a Number），指不是一个数字，所以导致转换失败
可以用isNaN()方法验证，判断类型转换的值是不是数字

var no = "1";
console.info(no+1);//打印结果 11 ---字符串
var no2 = parseInt(no);
console.info(no2+1);//打印结果 2 ---数字

parsentFolat() 转成小数

var n2 = "3.14";
console.info(parseFloat(n2)+1);//4.14 ----小数

整数转字符串

var i = 1.2;
console.info(i.toString()+1);//1.21

3.4 运算符

3.4.1 算数运算符
3.4.2 赋值运算符
3.4.3 比较运算符

==	  等于（判断值）	            var no = 1;
                                var no2 = "1";
                                console.info(no == no2);//返回true
===	  全等（同时判断值和类型）	var no = 1;
                                var no2 = "1";
                                 console.info(no === no2);//返回false

3.4.4 逻辑运算符
3.4.5 三元运算符（条件运算符）

3.5分支语句
1）if语句
2）switch语句（规则一致：如果没有break，会把从入口到后面的case都遍历一遍）

3.6 循环语句
1）for/in循环

//创建对象
var user = {
name："张三",
age:12,
sex:"男"
}
for(key in user){
var value = user[key];
console.info(key + ":" +user[key]);
}

2）for循环
3）while循环
4）do while循环
5）break与continue关键字

3.7 函数function
关键字function
格式：

function [函数名](参数列表){
return [返回值];
}

有参返回值类型：
function f3（a, b）{return a+b;}//参数列表里参数不需要声明类型

3.8 对象
1）创建对象

var user = {
//对象属性
name:"张三",
	age: 12,
	sex: "男",
//对象方法
move:function(){
console.info("user is moving");
}}

2）获取对象属性值

var property = user.name;
或者
var property = user["age"];//分号不能少

3）修改属性值

user.name = "李四";
或
user["age"] = 20;

4）添加属性：user.addr = "青岛";

5）删除属性：delete user.addr;

6）遍历对象

for(key in user){
var value = user[key];
console.info(key + ":" +user[key]);