3-4 JS脚本语言

最新推荐文章于 2024-07-24 20:22:36 发布

噫嘻在上

最新推荐文章于 2024-07-24 20:22:36 发布

阅读量178

点赞数

分类专栏：前端学习笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/lgd123abc/article/details/122532805

版权

学习笔记同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

1 Java Script简介

Java Script 简称JS，是一种基于对象Object和事件驱动Event Driver的解释型脚本语言，用于增强HTML页面的动态交互性。

2 特点

嵌套在HTML中；
环境支持，js在运行中需要浏览器环境的支持，如果使用的浏览器不支持js脚本，那么浏览器在运行时将忽略js代码；
解释执行，无需经过专门编译器的编译，在嵌入脚本的HTML文档载入时被浏览器逐行地解释执行；
弱类型语言，js中不需要指定变量的类型；
基于对象，js提供了很多内建对象，也允许定义新的对象，还提供对DOM（文档对象模型）的支持；
事件驱动，HTML中控件（如文本框、按钮）的相关事件触发时可以自动执行js代码；
跨平台，js是依赖浏览器运行的，与具体的操作系统无关。

3 基本语法

3.1 引入JS脚本

内部引入

//js脚本代码

</script>

外部引入js文件

<head>

</head>

3.2 声明变量

JS中的任何数据类型的变量都可以用var关键字声明；

示例：

var no = 1;

var str = "abc";

var obj = {

name: "张三",

age: 12

};

3.3 数据类型

3.3.1 五种原始数据类型

数据类型	说明	示例
Number	数字类型可以声明整数、小数、正数、负数	var no1 = 1; var no2 = new Number(12); var no3 = 12.12; var no4 = -12.123;
Boolean	布尔类型 0-false 1-true	var no_bt = true; var no_bf = false; var no_nf = new Boolean(0); var no_nt = new Boolean(-1); var no_nt2 = new Boolean(2); //赋值非0都是true
String	字符串类型	var str1 = "李四"; var str2 = new String("abc");
Null	空值，属于Object类型	var no = null;
Undefined	无，表示变量未初始化或未接收到函数的返回值；	var no = undefined;

3.3.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.3.3 数据类型转换

1 parseInt()转成数字类型

示例：

var no = "1";

console.info(no+1);//打印结果 11

var no2 = parseInt(no);

console.info(no2+1);//打印结果 2

注意当转换失败时，会报NaN（Not a Number），指不是一个数字，所以导致转换失败；

可以用isNaN()方法验证，将要类型转换的值是否是数字；

示例：

var no = "1";

var tar = isNaN(no);

2 parseFloat()转成小数

3.4 运算符

3.4.1 算术运算符

+	加法运算符
-	减
*	乘
/	除
%	取模（取余）
++	自增	var no = 1; //++在变量后，变量先参与代码执行，后自加1 console.info(no++); //++在变量前，变量先自加1，后参与代码执行 console.info(++no);
--	自减

3.4.2 赋值运算符

=	等于	var no = 1;
+=	加等于	var no += 1; 等价于 var no = no + 1;
-=	减等于
*=	乘等于
/=	除等于
%=	取模等于

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
!=	不等于（判断值）
>	大于（判断值）	var no = 2; var no2 = "1"; console.info(no > no2);//返回true
>=	大于等于
<	小于
<=	小于等于

3.4.4 逻辑运算符

与 and

a && b;

a=true 且 b=true，则返回true，否则返回false

或 or

a || b;

a和b都等于false，则返回false，否则返回true

非 not

!true 等于 false

3.4.5 三元运算符(条件运算符)

Condition ? Value if true : value if false;

示例：

var text = (a > b) ? "yes" : "no";

3.5 分支语句

if语句

if(condition){

} else if(condition){

} else {

}

switch语句

switch(){

case v1:

break;

case v2:

break;//跳出分支

default:

//当所有的case值都不匹配时，执行default分支

}

3.6 循环语句

for/in循环

示例：

//创建对象

var user = {

name:"张三",

age: 12,

sex: "男"

}

for(key in user){

//获取对象的属性值

var value = user[key];

console.info(key + ":"+ value);

}

for循环

var arr = [1,2,3,4];

for(var i = 0; i < arr.length; i++){

console.info(arr[i]);

}

while循环

while(condition){

}

do while()循环

do{

}while(condition);

break与continue关键字

break 跳出循环，循环终止；

continue 跳出本次循环，继续下一次循环；

3.7 函数function

函数用function关键字声明

function [函数名](参数列表){

return [返回值];

}

无参无返回值函数

function f1(){

}

有参无返回值函数

function f2(a, b){

//参数列表中的形参，不需要用var声明

}

有参有返回值函数

function f3(a, b){

return a+b;

}

调用函数

f1();

f2(1, 2);

var c = f3(1, 2);

3.8 对象

创建对象

var user = {

//对象属性

name:"张三",

age: 12,

sex: "男",

//对象方法

move:function(){

console.info("user is moving");

}

获取对象属性值

var property = user.name;

或者

var property = user["age"];

修改属性值

user.name = "李四";

或

user["age"] = 20;

添加属性

user.addr = "青岛";

删除属性

delete user.addr;

3.9 DOM文档对象模型

DOM(Document Object Model) 文档对象模型

当页面被加载时，浏览器会创建页面的DOM，可以把DOM理解为当前被加载的HTML页面的对象；

3.9.1 document对象

getElementById()

根据标签的id，返回一个标签对象(element)

示例：

var ele = document.getElementById("user_name");

console.info(ele.value);

getElementsByName()

根据标签名称（name属性），返回一个标签对象的集合

示例：

var ele = [];

ele = document.getElementsByName("p2");

console.info(ele[0].innerHTML);

getElementsByTagName()

根据标签名，返回一个标签对象的集合

3.9.2 element对象

属性
element.attributes;	返回标签中的属性对象集合
element.innerHTML;	设置或返回标签元素的内容; 内容中包含的子HTML标签会当成字符串处理；	获取标签内容 var c = element.innerHTML; 设置标签内容 element.innerHTML = "abc";
element.innerText	设置或返回标签元素的内容; 内容中的子HTML标签会显示样式；
element.id;	设置或获取元素的id
element.value;	设置或获取元素的value属性值；	//获取value属性值 var v = element.value; //给value属性赋值 element.value = "1";
element.className;	设置或获取元素的class属性值
element.style;	设置会或获取元素的样式	element.style = "font-size: 10px";
方法
ele.getAttribute();	获取元素的指定属性值	var c = ele.getAttribute("align");
ele.setAttribute();	设置元素属性值	ele.setAttribute("align","left");
ele.hasAttribute();	判断元素是否有该属性值，返回布尔值	var bo = ele.hasAttribute("width"); console.info(bo);//true/false
ele.removeAttribute();	从元素中移除指定属性	ele.removeAttribute("width");
ele.toString();	把元素转换为字符串

3.9.3 DOM事件

onBlur	元素失去焦点事件
onfocus	元素获得焦点
onchange	元素内容改变时
onclick	点击触发事件
ondblclick	双击触发事件
onmouseout	鼠标从元素上移开
onmouseover	鼠标移到某元素上
onsubmit	提交按钮被点击<input type="submit">
onreset	重置按钮被点击<input type="reset">

示例：

3.10 BOM浏览器对象模型

3.10.1 window对象

所有浏览器都支持window对象，它表示浏览器窗口；

属性
history	返回History只读对象
location	返回Location只读对象
navigator	返回Navigator只读对象
document	返回Document只读对象
parent	返回父窗口
top	返回最顶层父窗口
方法
alert()	显示一个警告框
prompt()	显示一个输入框
confirm()	显示一个确认框
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，或查找一个已命名的窗口
setTimeout()	设置在指定毫秒数后调用函数或计算表达式

3.10.2 Location对象

URL示例：http://192.168.1.156:8080/mvc/def/i2?content=淘宝&

[protocol]://[pathname]:[prot]?[search]

属性
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	设置并跳转到指定URL；返回完整的URL；	location.href='https://www.1688.com'; location.href='page2.html';
pathname	返回URL路径名
port	返回URL服务器端口号
protocol	返回URL协议
search	返回URL的查询部分
方法
reload()	重新加载当前页面	window.location.reload();

3.10.3 History对象

history对象相当于浏览器中的历史记录，可以通过history跳转到我们之前访问过得指定页面；

方法
back()	加载history列表中的前一个页面的URL并跳转
forward()	加载history列表中的下一个URL
go()	加载history列表中的某一个页面URL

示例：

//页面跳转方式1

//跳转到指定路径的页面

window.location.href='https://www.baidu.com';

//页面跳转方式2

//history 页面访问历史记录

//back() 加载history列表中的前一个url

window.history.back();

//页面跳转方式3

//go()加载history列表中的某一个具体页面

window.history.go(-1);//-1表示当前页面的前一个页面

3.10.4 navigator对象

属性
appName	返回浏览器内核的名称
appVersion	返回浏览器的平台和版本信息
platform	返回运行浏览器的操作系统平台
systemLanguage	返回OS使用的默认语言
userLanguage	返回OS的自然语言设置
userAgent	返回由客户机发送服务器的user-agent头部的值
cookieEnabled	判断浏览器是否启用cookie,返回布尔值