JavaScript
1、什么是JavaScript
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言
2、javaScript有什么作用
- 嵌入HTML中，与Css一样。
- 对浏览器事件作出响应
- 操作HTML元素及节点。
- 可以动态操作CSS样式。
- 在数据被提交到服务器之前验证数据。
3、快速入门
3.1、引入JavaScript
- 内部标签
<script> alert("hello")</script>
- 外部引入
<script src="js/js.js"></script>
- 测试代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--第一种方式，内部引用 --><script> /** * script标签内写JavaScript代码，script标签必须成对出现。 */ alert("hello")</script><!--第二种方式，外部引用--><script src="js/js.js"></script></body></html>
3.2浏览器控制台调试
在页面上可以按F12调出控制台，可以在这里输出当前页面的变量值（或者写脚本），非常方便。
4、数据类型
4.1、快速入门
-
因为js是弱语言，里面不用声明类型。
-
统一用
var来声明变量 -
在ES6新增加了
let和const来声明变量。//--- numbervar a = 1;a = 123//整数a = 123.1//浮点数a = -99//负数a = NaN//not a number//--- 字符串var b = "abc";b = 'cba';//--- 布尔值var c = true;c = false; -
运算符
//--- 逻辑运算符&& //两个都为真，结果为真|| //一个为真，结果为真! //真即假，假即真//--- 比较运算符= //赋值预算法== //等于（类型不一致，值一样，也会判断为true 即判断1=='1'）=== //绝对等于（类型一样，值一样，结果为true）
须知：
- NaN，与所有的数值都不相等，包括自己
-
NaN === NaN; //false - 只能通过isNaN()来判断这个数是不是NaN
浮点数问题：
(1/3)===(1-2/3) //结果为false
尽量避免使用浮点数进行运算，存在精度问题
Math.abs(1/3-(1-2/3))<0.00000001 //结果为true
null和undifined
- null 空
- undefined 未定义
数组
Java的数组必须是相同类型的对象。JS中不需要这样！
//保证代码的可读性，尽量使用[]var arr = [1,2,3,'hello',null,true];//取数组下标：如果越界了，就会报undefinedarr[1]; //2arr[9]; //undefined
对象
对象是大括号，数组是中括号
每一个属性之间使用逗号隔开，最后一个不需要加逗号
var student = { name: "张三", tags: ['学习','吃饭', '打豆豆']}
取对象的值
student.name"张三"student.tags[0]"学习"
4.2、严格检查格式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--前提：Idea，设置支持ES6语法'use strict';严格检查模式，预防JavaScript随意性导致产生的一些问题必须写在script标签内的第一行！局部变量建议都使用let去定义--><script> 'use strict'; let a = 1;</script></body></html>
4.3、字符串
1、正常字符串我们使用单引号或者双引号包裹。
2、注意转义字符
let a = '\u4e2d ' //\u#### Unicode 字符let a = '\x41' //Ascll字符
3、多行字符串编写 ``
var msg = ` hello 你好,张三。 `
4、模板字符串
let name = '张三';let msg = `你好呀，${name}`; //'你好呀，张三'
5、字符串长度：
msg.length;//6
6、大小写转换
let a = "student";a.toUpperCase(); // 'STUDENT'a.toLowerCase(); // 'student'
7、字符串查找
a.indexOf(‘t’); //1
8、截取
a.substring(2) //udent, 下标几到最后a.substring(2,3) //u, 下标几到下标几
4.4、数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6]//通过下标取值和赋值arr[0];arr[0] = 1;
1、获取长度
arr.length; // 6//假如给arr.length赋值，数组的大小就会发生变化，如果赋值过小，元素就会丢失arr.length = 5; // a = [1, 2, 3, 4, 5]
2、获得下标索引
arr.indexOf(2); // 1
3、 数组截取
arr.slice(2); //[3, 4, 5] 类似于String中的substringarr.slice(2,4); //[3, 4]
4、元素操作
//插入最后一位arr.push("a"); //[1, 2, 3, 4, 5, 'a']//插入最前一位arr.unshift("b") //['b', 1, 2, 3, 4, 5, 'a']//删除最后一位arr.pop(); //['b', 1, 2, 3, 4, 5]//删除最前一位arr.shift(); //[1, 2, 3, 4, 5]
5、排序
arr.sort(); //[1, 2, 3, 4, 5]
6、反转
arr.reverse();// [5, 4, 3, 2, 1]
7、合并
let arr2 = ['a','b','c']arr.concat(arr2); //[1, 2, 3, 4, 5, 'a', 'b', 'c']//返回一个新的数组，不改变原来的数组arr
8、连接符
// join();//默认，去拼装数组。可以指定arr.join("-");//'1-2-3-4-5'
4.5、对象
以K,V形式存在。
/*var 对象名 = { 属性名: 属性值, 属性名: 属性值, 属性名: 属性值}*/let obj = { name : "张三", tags : ['吃饭','睡觉','打豆豆']}
js中的对象， {…..}表示一个对象，键值对描述属性xx : xx，多个属性之间使用逗号隔开，最后一个属性不加逗号！
js 中的所有键都是字符串，值是任意对象！
1、对象操作
//定义let obj = { name : "张三",
tags : ['吃饭','睡觉','打豆豆']}//赋值
obj.name = "法外狂徒";//取值
obj.name;//法外狂徒
obj.sex;//取一个不存在的对象属性，不会报错！会显示:undefined
//添加属性,直接给新的属性添加值即可
obj.sex = '男';//删除属性
delete obj.sex;//判断属性值是否在这个对象中！
"name" in obj; //true'toString' in obj;
//true,父类中有。
//判断属性值是否在这个对象的自身上
obj.hasOwnProperty("toString");
//falseobj.hasOwnProperty("name");
//true
4.6、流程控制
// if 判断let a = 1;
if (a > 1){
console.log("判断一")
}else if (a > 5){
console.log("判断二")
}else {
console.log("判断三")
}
// while循环while(a < 10){
a ++;
console.log(a);
}
// for循环
for(let i = 0; i < 10; i++){
console.log(i);
}
//forEach循环
let tags = ['吃饭','睡觉','打豆豆'];
tags.forEach((value,index)=>{
console.log(value+','+index);
})
// for in 遍历下标
for (let tag in tags){
console.log(tag[num]);
}
//通过for of遍历值
for (let tag of tags){
console.log(tag);
}
4.7、Map 和 Set
ES6中增加了Map 和 Set
Map：
let map = new Map([['1',"小明"],['2',"小华"],['3',"张三"]]);map.get('3');//张三 map.delete('1');//删除元素 map.set('6',"kuangstudy");//存在就修改，不存在就添加//遍历mapfor (let x of map){ console.log(x);}
Set: 无序不重复的集合
var set = new Set([3,2,1]);
set.add(5);//增加元素
set.delete(3);//删除元素、
set.has(1);//判断是否包含元素
set.size;//长度
//遍历遍历
setfor (var x of set){
console.log(x);
}
5、函数
5.1、定义函数
定义方式一
绝对值函数
function abs(x){ if(x >= 0){ return x; }else{ return -x; }}
一旦执行到return 代表函数结束，返回结果！
如果没有执行return ， 函数执行完也会返回结果，结果就是undefined
定义方式二
var abs = function(x){ if(x >= 0){ return x; }else{ return -x; }}
function(x){….} 这是一个匿名函数，把结果赋值给abs，通过abs可以调用函数！
方式一和方式二等价！
调用函数
abs(10);//10abs(-10);//10
参数问题：JavaScript 可以传任意多个参数，也可以不传
abs(-10,-12,-13); //只有定义了的参数才会生效// arguments：代表传递进来的所有参数，是一个数组function abs(x){ for(let i of arguments){ console.log(i); } if(x >= 0){ return x; }else{ return -x; }}
5.2、 变量的作用域
在js中， var 定义的变量实际上有作用域的范围的。
在函数体中声明变量，在函数体外不可以访问。
访问不存在的变量名会报XXX is not defined
function abs(x) { var a = 1;}a = a + 2; //报错：a is not defined
内部函数可以访问外部函数的成员，反之则不行
var a = 1;function abs(x) { var b = a + 2;}a = b + 2;//报错：b is not defined
假设，内部函数变量和外部函数的变量重名
var a = 1;function f(){ var a ="A"; console.log("内部"+a);}f();//内部Aconsole.log("外部"+a);//外部1
使用闭包可以解决外部访问函数内部变量的方法。
5.3、全局对象 window
JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有函数作用范围内找到，就会向外查找，如果全局作用域都没有找到，就报XXX is not defined错误
规范
由于我们所有的全局变量都会绑定到我们的window 上，如果不同的js文件，使用了相同的全局变量，会产生冲突，那如何减少冲突？
//唯一全局变量var xxXObj={};//定义全局变量xxXObj.name = "张三";xxXObj.version = 1;
let关键字，解决局部作用域冲突问题
for (var i = 0; i < 10; i++) {}console.log(i);//10for (let a = 0; a < 10; a++) {}console.log(a);//报错：a is not defined
定义常量。一般用全部大写字母命名的变量就是常量。
var PI = 3.14console.log(PI);//3.14PI = 123;//可以修改console.log(PI);//123
如何解决常量被修改的问题，在ES6引入了常量关键字 const。
const PI = 3.14; //只读变量PI = 123;//报错 Attempt to assign to const or readonly variableconsole.log(PI);
6、内部对象
6.1、 Date
let date= new Date();
console.log(date);//Sun Dec 26 2021 22:12:50 GMT+0800 (中国标准时间)//获取年date.getFullYear();//获取月(从0开始)
date.getMonth();//获取日
date.getDate();//获取时
date.getHours();//获取分
date.getMinutes();//获取秒
date.getSeconds();//获取毫秒date.getMilliseconds();
//getDay():获取星期几（从0开始）
//getTime():获取1970年1月1日到当前时间的毫秒数
转换
data.toLocaleDateString();//'2021/12/26'
data.toJSON();//'2021-12-26T14:12:50.650Z'
6.2、JSON
早期，所有的数据传输习惯都使用XML文件！
- JSON（JavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript 中 一切皆为对象，任何js支持的类型都可以用JSON来表示
格式：
- 对象都用{}
- 数组都用[]
- 所有的键值对都用key:value
JSON字符串和JSON对象的转换
var user = {
name: "张三",
tags: ['学习','吃饭', '打豆豆']
}
//JSON对象转换字符串
JSON.stringify(user);
//'{"name":"张三","tags":["学习","吃饭","打豆豆"]}'
//字符串转JSON对象
JSON.parse(jsonUser);
//{name: '张三', tags: Array(3)}
7、 JS中的继承
class关键字，是在ES6引入的
class Skill{// 创建类 constructor(name){// 类构造方法 this.name = name;// 类主体/属性 } swin(){ console.log(this.name+"会游泳") }}var xiaoming = new Skill("xiaoming");xiaoming.swin();//xiaoming会游泳//继承class Fish extends Skill{ constructor(name) { super(name); //引用父类。 } bubble(){ console.log(this.name+"吐泡泡") }}var zhangsan = new Fish("大白鲨")zhangsan.swin();//大白鲨会游泳zhangsan.bubble();//大白鲨吐泡泡
8、BOM对象（重点）
8.1、浏览器BOM
浏览器对象模型 (BOM)
window
window 代表游览器窗口
window.alert(1);
window.innerHeight;
window.innerwidth;
window.outerHeight;
window.outerWidth;//大家可以调整游览器窗口
Navigator
Navigator，封装了游览器的信息
navigator.appName;
navigator.appVersioin;
navigator.userAgent;
navigator.platform;
大多数时候，我们不会使用navigator对象，因为会被人为修改~
不建议使用这些属性来判断和编写代码
screen
screen.widthscreen.height//代表屏幕尺寸
location(重要)
location 代表当前页面的URL信息
location.host;//'www.kuangstudy.com'
location.href;//'https://www.kuangstudy.com/'
location.protocol;//'https:'
location.reload(); //刷新网页
location.assign('https://www.kuangstudy.com/');// 设置新的地址
document
document 当前的页面，HTML DOM文档树
document.title="我的页面"
获取cookie
document.cookie;
劫持cookie原理(获取你的cookie上传到他的服务器)
history
history.back() //后退
history.forward() //前进
8.2、操作DOM对象（重点）
核心
浏览器网页就是一个DOM树形结构！
- 添加：添加Dom节点
- 查询：查询Dom节点
- 更新：更新Dom节点
- 删除：删除Dom节点
要操作一个Dom节点，就必须先获得这个Dom节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="title">Hello,JavaScript</h1>
<p class="describe"> 穿过挪威的森林,让我走进你梦里/</p>
<div id="div1"> 今日兴趣：</div>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<script> // 获取节点，根据CSS选择器查询
var byId = document.getElementById(`title`);//根据id查找,返回单个对象
var byClass = document.getElementsByClassName(`describe`);//根据class查找，返回多个对象
var byTag = document.getElementsByTagName("li");//根据标签名查找，返回多个对象
// 更新节点
byId.innerText="今天，天气很好。"//修改文本内容
byClass[0].style.color="#1a73e8";//修改样式
//删除节点,删除节点的步骤： 先获取父节点，再通过父节点删除自己
var parent = document.getElementsByTagName("ul");
parent[0].removeChild(byTag[0]);
//添加元素
var para=document.createElement("li");
var node=document.createTextNode("这是一个新li");
para.appendChild(node);
parent[0].appendChild(para);//追加在已有的元素后面
var newLi=document.createElement("li");
var newNode=document.createTextNode("这是一个新新新li。");
newLi.appendChild(newNode);
var element=document.getElementById("div1");
parent[0].insertBefore(newLi,byTag[0]);//添加在li之前
</script>
</body>
</html>
9、 操作表单（验证）
表单的目的：提交信息
主要是对提交的信息做判断处理，不合法的数据在前端判断，减少后端服务器的压力。
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id="title">注册中心</h1>
<form action="#" method="post" onsubmit="return submitForm()" id="registerForm">
<p>名字：
<input type="text" name="name" placeholder="请输入你的名字" id="name">
</p>
<p>性别:
<input type="radio" name="sex" value="1" checked>男
<input type="radio" name="sex" value="2">女
</p>
<p>密码：
<input type="password" name="password" placeholder="请输入你的密码" id="password">
</p>
<input type="submit">
</form>
<script>
function submitForm() {
let name = document.getElementById('name');
let password = document.getElementById('password');
if (!name.value){
alert("请输入你的名字")
return false;
}
if (!password.value){
alert("请输入你的密码")
return false;
}
return true;
}
</script>
</body>
</html>
扩展：在提交表单的时候，可以对表单的值进行修改再发送到服务器上。
例如：防止用户登录时，密码被拦截到，可以通过md5加密密码
10、Jquery学习
jquery库，里面存在大量的javascript函数，就是对javascript进行了方法上的封装。
为什么要使用jquery？因为简单，好用。
jquery下载：www.bootcdn.cn/jquery/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- CDN引用 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">
</script>
</head>
<body>
</body>
</html>
使用jquery
<button id="btn1">点我</a>
<script>
//选择器就是css选择器
$('#btn1').click(function () {
alert('hello,jquery');
})
</script>
选择器
//jquery css 中的选择器他全部都能用，原生态js，选择器少，麻烦不好记
$('p'); //标签选择器，等于于 document.getElementsByTagName();
$('#id'); //id选择器，等价于 document.getElementById()
$('.class1'); //class选择器，等价于 document.getElementsByClassName()
事件
公式：$(选择器).操作()
//点击事件
$("#btn1").click();
//隐藏
$("#btn1").hide();
//显示
$("#btn1").show();
操作DOM
//获取元素
$('#btn1').text(); //获得值
//添加元素
$("p").append("1.追加文本");
$("p").prepend("2.在开头追加文本");
$("p").after("3.在后面添加文本");
$("p").before("4.在前面添加文本");
//修改元素
$('#btn1').text('本事来点我呀');
//删除元素
$("#btn1").remove();
//删除子元素
$("ul").empty();
css操作
$('#btn1').css("color","red");
添加class样式
<style>
.btn{
background: lightblue;
color: #ffffff;
}
</style>
<script>
$("btn1").addClass("btn");
</script>
