目录
一、概念
1.总体概要
JavaScript简称为JS，这门语言诞生主要用于完成页面的数据验证，因此运行在客户端，需要浏览器来解析JavaScript的代码。是世界上最流行的脚本语言。
2.来源说明
JS是网景公司的产品，1995年布兰登·艾奇仅用了10天开发完成的。最早取名为LiveScript，为了吸引更多的程序员，取名为JavaScript。并于1997年成为一部ECMA标准，ECMAScript（ES6）是最新的JavaScript版本（发布于2015年）
3.JavaScript和java的关系
JavaScript和java没有什么关系，就像老婆和老婆饼一样。
JS是弱类型语言，JAVA是强类型语言
4.JS的特点
（1）交互性：它可以做的就是信息的动态交互
（2）安全性：不允许直接访问本次磁盘
（3）跨平台性：只要是可以解释JS的浏览器都可以执行，和平台无关
5.浏览器执行JS的简介
浏览器分成渲染引擎和JS引擎两部分
渲染引擎：用来解释HTML和CSS，也叫内核。例如谷歌浏览器的bilk
JS引擎：读取网页中的JS代码，也叫JS解释器。例如谷歌浏览器的V8
6.JS的组成
ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商都去共同遵守的一套JS语法标准。
DOM：也叫页面文档对象模型。是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的元素进行各种的样式操作，例如颜色：大小，位置等等。
BOM：也叫浏览器对象模型。是 各个浏览器厂商根据 DOM在各自浏览器上的实现。就是Window 是 BOM 对象，而不是 js 对象；javacsript是通过访问BOM对象来访问、控制、修改客户端(浏览器)
7.目前版本和开发状态
ECMAScript可以理解为是JavaScript的一个标准。目前版本最新的已经到了ES6.但是大部分浏览器只支持到ES5。所以开发环境和线上环境版本不一致
二、引入方式
（1）内部脚本：将JS代码定义在HTML页面中
（2）外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
1.内部脚本例子
步骤
1.新建一个html文件，在里面添加一个script标签（建议放在body底部，可以优先加载其他HTML代码，显示运行效率更快），标签里面添加一个弹窗语句测试
即
<script>
alert("hello JS")
</script>加自动模板的完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--在<script>标签中写一个弹窗语句alert测试-->
<script>
alert("hello JS")
</script>
<body>
</body>
</html>运行结果
2. 外部脚本例子
步骤
1.idea新建里面新建一个js文件，并在js文件中添加一个弹窗语句
alert("hello js")2.idea新建一个html文件， 然后标签里面输入一个src引用js的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--script这里添加引入的js文件-->
<script src="demo1.js"></script>
</body>
</html>运行结果
三、使用规则
1.书写语法
（1）区分大小写：与Java一样，变量名，函数名以及其他一切东西都区分大小写
（2）每行结尾的分号可有可无
（3）注释：单行注释：//注释内容 多行注释：/*注释内容*/
（4）大括号表示代码块
（5）定义的语句都要写在script标签里面（script标签建议写在html的body里面）
2.报错的查看方式
1.键盘F12（或者右键-检查）---2.点击顶部的Sources里面的报红查看
3.输出语句
ps：以下语句都是再html文件的body里面写的
（1）写入警告框
<script>
window.alert("hello js");//写入警告框
</script>运行结果
（2） 写入HTML（浏览器）页面里面
<script>
document.write("hello js")//写入HTML页面里面
</script>运行结果
（3）写入浏览器的控制台
<script>
console.log("hello js")
</script>运行结果（运行后，浏览器页面F12点开，点击Console就可以查看了）
4.JS的变量
简介：变量就是用来保存数据的，JavaScript是一门弱类型语言，变量可以用来存放任意的数据类型的值
（1）var关键字
说明：JS使用var（variable的缩写）关键字来声明变量。var相当于一个全局变量，用来定义什么都可以，而且值可以被重复定义
<script>
//1.代码块内可以定义相同的var，不过最下面的会覆盖上面之前的
var age = 30;
var age = 20;
//测试
alert(age);//运行结果为弹窗出来20
//2.变量值可以被重复定义，但是会覆盖上面的
var Test = 10;
Test = "帅哥"
//测试
alert(Test)//运行结果为弹窗出来帅哥
</script>（2） let关键字
说明：ECMAScript6新增了let关键字来定义变量，他的语法类似var，但是所声明的变量，只能在在let关键字的代码块里面有效，有点像局部变量，并且不能重复声明。
<script>
{//如果被代码块包裹住，就只能在代码块里面生效
let age = 20;
alert(age)//运行结果：黑色页面（因为代码块内）弹窗出来20
}
</script>（3）const关键字
说明：ECMAScript6新增了const关键字，用来声明一个只读的常量，一旦声明，常量的值就无法改变
5.数据类型
（1）JavaScript（简称JS）的数据类型
数值类型：number
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function
（2）特殊的值
初始默认值：undefined
空值：null
非数字、非数值：NAN-----全称是Not a Number
ps：要查看属于什么数字类型可以用：弹窗标签（typeof 查看的数据）
6.运算符
JS的运算符和Java运算符都差不多，不过多了一个===（全等于的运算符）
ps：==就不是全等。例如23可以==”23“
这里的全等就是===了
7.流程控制语句
JS的流程控制语句和Java的一样，正常去使用就好了
java三种循环（for、while、do while）和终止语句（break、continue、return）_云边的快乐猫的博客-CSDN博客_java跳出本次循环进入下一次循环
8.函数（通俗讲就像是Java中的方法）
ps：我习惯称为方法，知道一个意思就可以了
（1）方法一
通过function关键词进行定义
注意：形式参数不需要类型。返回值也不需要定义类型，直接return返回就好了
语法为：
function 自定义方法名 (自定义参数名1，自定义参数名2......){
要执行的代码
}
<script>
function hello(a,b){
return a+b;
}
//传值并赋值给一个变量
var h = hello(5,6);
alert(h);//弹窗测试运行结果弹窗出来11
</script>（2）方法二
也是通过function关键词进行定义，区别在于实际传参个数和方法里面的形参个数不一样情况。对比方法一特点：可以任意个参数进去，但是
实际传参个数>形参个数。结果：实际传参多余的个数不会不生效
实际传参个数<形参个数。结果：传参+默认值计算结果（这个类型和传进去的参数类型一样，没有就默认值）。ps：谁会吃饱了没事干传多或者传少啊
语法为：
var 自定义名字 function（参数列表）{
要执行的代码
}
<script>
//1.编写方法
var Test = function (a,b){
return a+b;
}
//2.把方法的值赋值给自定义的result
var result = Test(1,2);
//3.弹窗测试
alert(result)//运行结果为3
</script>9.Array对象(类似Java中的集合)
这个在JS里面叫数组或者对象的，但是除了{}换成了[ ],实际使用方式还是和Java中的集合差不多,因为长度，类型都可以变。
语法格式为：
var 变量名 =new Array(元素列表); //方法一 但是不怎么常用，因为麻烦
var 变量名 =[元素列表]; //方式二 常用
访问方式
arr[索引值] = 自定义值;
（1）使用方式
ps：这些都是在html的body里面运行
<script>
//一、
//1.编写方式
var arr =[1,2,3];
//2.弹窗测试
alert(arr);//运行结果为弹窗1，2，3
//3.根据索引访问并修改索引对应的值
arr[1] = 10;//访问集合中的第一个元素的位置。并重新给他定义一个值
alert(arr);//运行结果为弹窗1,10,3
//ps:根据索引直接访问方式:alert(arr[1]);
</script>（2）遍历方式
//二、遍历方式
//1.定义一个数组
<script>
var name = ["张三","李四","王五"];
//2.for循环遍历--快捷键为变量名.fori+回车键
for (let i = 0; i < name.length; i++) {
//3.弹窗测试
alert(name[i]);//弹窗依次弹出张,三,李,四,王,五。如果想只弹出弹出一次，那就直接访问呗//alert(name)
}
</script>（3）添加和删除
<script>
//一、添加：push
//1.编写方式
var arr =[1,2,3];
//添加值
arr.push(10);
//弹窗测试
alert(arr);//运行结果：弹窗出1,2,3,10
//二、删除：
arr.splice(0,2);//删除了从第0个开始，删除2个
alert(arr);//运行结果弹窗3,10
</script>10.String关键字对象
String里面常用的方法就是去除多余的空格------trim()
语法为：
var 自定义名称 = "值"
<script>
//一、创建String类型对象
var str1 = "abc";
//运行测试
alert(str1);//运行结果为弹窗出来abc
//二、常用方法：去除多余的空格,用trim()方法
//创建String类型对象
var str2 =" abc "
//运行测试
alert(str2.trim());//运行结果为弹窗出来abc，没有多余的空格
</script>11.自定义对象
简介：可以在自定义对象当中定义很多的方法或者函数这些，就像一个大麻袋，需要的东西就可以装里面。
语法为：
var 对象名称 = {
属性名称1：属性值1,
属性名称2：属性值2,
......
函数名称：function（形参列表）{}
......
};
<script>
//一、创建自定义对象
var boy = {
name:"小明",
age:18,
eat:function () {
alert("吃饭")
}
}
//二、调用测试
alert(boy.name);//运行结果为弹窗出小明
alert(boy.eat())//运行结果为弹窗出吃饭
//还有弹窗出来一个默认值undefined，因为age还没有被调用
</script>12.BOM
简介：全称为：Browser Object Model-----浏览器对象模型
JS将浏览器的各个组成部分封装为对象
参考的w3school网站：JavaScript Window - 浏览器对象模型
组成：
（1）window对象
之前一直用的alert弹窗语句完整写法就是这样。通过window对象还可以获取其他4个BOM对象
常用的方法
alert()
显示一段话和带有一个确认按钮的警告框
<script>
//window浏览器窗口对象
window.alert("666");//运行结果为弹窗出来666
</script>confirm()
显示带有一段消息以及确认按钮和取消按钮的对话框
<script>
//确认取消按钮，点击确定按钮会返回true,取消会返回false
var b = confirm("你确定执行吗？");
//扩展代码
if (b){
//可以写上逻辑代码
alert("6666")
}
</script>setTimeout()------单次定时器
在指定的毫秒数后调用函数或者计算表达式。在一定时间后执行一个function，只执行一次
<script>
//单次定时器，只执行一次
setTimeout(function (){
alert("666")
},3000);//运行结果为3秒后弹窗出来666一次
</script>setInterval()----循环定时器
按照指定的周期（毫秒）来调用函数或者计算表达式。在一定时间后执行一个function，循环执行
<script>
//循环定时器，循环执行
setInterval(function (){
alert("快乐")
},2000);//运行结果为每2秒执行一次快乐，一直循环
</script>（2）History历史记录对象
使用window.history获取，其中的window可以忽略
语法为：
history.方法（）；
常用的方法
返回网页的上一步：history.back();
进入下一个网页：history.forward();
（3）Location地址栏对象
使用window.Location获取，其中的window可以忽略
语法为：
Location.方法（）;
常用的方法
跳转到指定的网页：
跳转到百度的例子
location.href="https://www.baidu.com"
13.DOM
简介：全称为：Document Object Model -----文档对象模型。是w3c（万维网联盟）的标准。DOM定义了访问HTML和XML文档的标准
将标记语言的各个组成部分封装成对象
（1）DOM树
（2）DOM的作用
JS通过DOM，就能够对HTML进行操作了。
改变HTML元素的内容--------------方法.innerHTML="改变后"
改变HTML元素的样式（CSS）--------方法.style.样式方法="样式"
对HTML DOM事件作出反应
添加和删除HTML元素
（3）DOM大全
1.核心DOM：针对任何结构化文档的标准模型
⚪Document：整个文档对象
⚪Element：元素对象
获取：使用Document对象来获取
<body>
<!--测试标签1-->
<img id="light" src="D:\图片\壁纸\111.jpg" >
<!--测试标签2-->
<div class="cla">云边的快乐猫</div>
<!--测试标签3-->
<input type="checkbox" name="hobby">吃
<input type="checkbox" name="hobby">睡
<!--二、以下是调用测试上面的-->
<script>
//测试1
//getElementById:根据id属性值获取，返回一个Element对象
var img = document.getElementById("light");
alert(img);//弹窗运行结果为[object HTMLImageElement]
//测试2
//getElementsByTagName：根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName("div");
//遍历访问数组
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);//弹窗运行结果为[object HTMLDivElement]
}
//测试3
//getElementsByName：根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
alert(hobbys[i]);//弹窗结果运行为[object HTMLInputElement]和[object HTMLInputElement]
}
//测试4
//getElementsByClassName，根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName("cls");
for (let i = 0; i < clss.length; i++) {
alert(clss[i]);
}
</script>
</body>⚪Attribute：属性对象
⚪Text：文本对象
⚪Comment：注释对象
2.XML DOM：针对XML文档的标准模型
3.HTML DOM：针对HTML文档的标准模型
14.事件监听
简介：事件：HTML事件是发生在HTML元素上的"事情" 。比如按钮被点击、鼠标移到元素上、按下键盘按键。
事件监听：JavaScript可以在事件被侦测到时执行代码
（1）事件绑定
方式一、通过HTML标签中的事件属性进行绑定-----不怎么推荐，因为耦合度高
方式二、通过DOM元素属性进行绑定
<body>
<!--HTML代码-->
<!--按钮1-->
<input type="button" value="点我" onclick="on()"><br>
<!--按钮2-->
<input type="button" value="再点我" id="btn">
<!--JS代码-->
<script>
//方式一
function on(){
alert("我被点了");
}
//方式二
document.getElementById("btn").onclick=function (){
alert("我也被点了");
}
</script>
</body>（2）常见事件
参考w3sccool:HTML DOM 事件
常用的有：元素失去焦点 、获得元素焦点
15.正则表达式
简介：正则表达式定义了字符串的组成规则，一般用来进行验证使用。非常的方便
语法：
^：表示开始
$：表示结束
[]：代表某个范围内的单个字符，比如[0~9]单个数字字符
.：代表任意单个字符，除了换行和结束符
\w：代表单词字符：字母、数字、下划线
\d：代表数字字符，相当于[0~9]
量词
+：至少一个
*：零个或者多个
？：零个或者一个
{x}：x个
{m}：至少m个
{m，n}：至少m个，最多n个
1.直接量
var reg = /^\w{6,12} $/;
2.创建RegExp对象
var reg =new RegExp( /^\w{6,12} $/);
3.测试方法
test（str）：判断指定字符串是否符合规则，返回turn或者false
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
