JS笔记

一、什么是JS

JS全称JavaScript，是一种简单的脚本语言，可以在浏览器中直接运行，是一种在浏览器端实现网页与客户交互的技术。JS代码可以直接嵌套在HTML网页中，它响应一系列事件，当一个JavaScript函数响应的动作发生时，浏览器就会执行JS的代码。该脚本语言的基本成分有：数据类型、常量、变量、运算符、表达式、控制语句、函数等。

二、JS基本用法

JS与HTML一起使用才有效果，可以通过直接或间接的方式将JS代码嵌入HTML页面中（类似CSS）
行内JS：写在标签内部的JS代码
内部JS：定义在script标签内部的JS代码
外部JS：单独的JS文件，在HTML中通过script标签引入。
注意：推荐将JS代码写在body标签后，因为网页加载的方式是从上到下依次加载，最好等到HTML代码执行完毕后，再执行JS代码。

三、JS基础语法

3.1语句和注释

JS程序的执行单位为行，每一行即一个语句。
语句是为了完成某种任务而进行的操作，语句以分号结尾。 表达式不需要分号。
注释：单行//，多行/**/,兼容HTML注释< !–内容–>

3.2标识符和关键字

同java和C++类似，不能以数字开头，不能是关键字和保留字，且严格区分大小写。注意规范：见名知意，驼峰命名或下划线规则

3.3变量

1.JS是一种弱类型语言，在声明变量时不需要指明数据类型，直接用var修饰符进行声明 var 变量名=值。可以声明任意类型的变量 例：
let x=2；
let str=“你好！”;
2.可以在同一条var命令中声明多个变量
let a=3,b=4,c=5;
3.使用let重新声明一个已经存在的变量并赋值，会覆掉之前的变量。

3.4数据类型

1.数值：Number 整数和小数
2.字符串：String 字符组成的文本
3.Boolean：布尔型 true false
4.Undefined：表示未定义或不存在，即此处没有任何值
5.Null：表示空缺，即此处应该有一个值，但目前为空缺
6.对象：Object 各种值组成的集合
包括：对象，数组，函数

3.5类型转换

1.自动类型转换

2.函数转换

3.显示转换

3.6运算符 控制语句

同javaC++一样

3.7数组

1.数组的定义和特点


特点：
长度可变
数组中数据类型任意
索引从0开始
2.数组的输出

3.8数组方法

1. push 添加元素到最后
2. unshift 添加元素到最前
3. pop 删除最后一项
4. shift 删除第一项
5. reverse 数组翻转
6. join 数组转换成字符
7. indexof 数组元素索引
8. slice 截取数组，原数组不发生变化
9. splice 剪接数组，原数组变化，可以实现前后删除效果
10. concat 数组合并

3.9函数

1.函数声明语句
function 函数名（参数）{

}
2.函数定义表达式
var 函数名=function（参数列表）{

}

注意：、js中出现二个重名的函数名、后者会把前面的覆盖掉
对比java、java有重载（同名不同参）、重写（同名同参同返回值类型、方法体不一样）

3.10对象

内置对象，常用String Math Data（与java中类似）

四、BOM对象

BOM对象的核心对象是window，它表示浏览器的一个实例。它既是通过javas访问浏览器窗口的一个接口，又是ECMAScript规定的全局对象，这意味着在网页中定义的任何一个对象、变量和函数，都以window作为全局对象，因此有权访问parselnt（）这样的方法。如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。

4.1window对象

常用方法
alert（）弹出一个警告对话框
confirm（）显示一个确认对话框，单击确认时返回true，否则返回false---->>一般有变量接收返回结果，
prompt（）弹出一个提示对话框，并要求输入一个简单的字符串---->>需要有一个变量来接受用户填写的值

4.2location对象

实现网页的跳转
window.location.href=“网页路径”

4.3history对象

访问浏览器窗口的浏览历史
length 浏览历史记录的总数
go（index）index为负数时，表示当前地址之前的浏览记录，正数为之后党的浏览记录
forward（）从浏览器历史中加载下一个URL，相当于history. go（1）
back（）相当于history.go（-1）

4.4时间对象 seTimeout

（参数1：要执行的函数，参数2：过多少秒后执行）
功能是经过指定时间后执行代码

五、 DOM对象

DOM：Document Object Model，文档对象模型。DOM提供了用程序控制HTML接口。每个载入浏览器的HTML都会成为Document对象。Document对象使我们可以从脚本中毒HTML页面的所有元素进行访问。Document对象是window对象的一部分，可以通过window.document属性进行访问。

5.1节点概念

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

5.2获取节点

在进行增删改的操作时，都需要指定一个位置，或者找到一个目标，此时可以通过DOcument对象提供的方法，查找、定位某个对象

==注意：操作dom必须等节点初始化完毕后，才能执行
两种处理方式：

1. 把script调用标签移到HTML最末尾
2. 使用onload事件处理JS

5.3节点的创建和插入

创建节点的方法:

插入节点的方法:

例子1：插入文本

其中第二行和第三行可以合并为：p.innerHTML=“这是一段文本”

例子2：插入图片

过程：获取容器、创建img标签元素、设置属性（src为必须属性）、将img放到div容器中
例子3：添加文本框

例子4：添加下拉框选项

5.4节点的删除

removeChild()从元素中移除子节点

注意：想要删除子节点，必须先找到父亲

六、表单

表单是页面向后台传输数据的一种常见方式，在进行数据发送之前，应该在页面进行一系列判断数据合法性的操作，节省不必要的错误数据的传输，提高用户体验度。

6.1获取表单

常用两种：
document.表单名称（name）
document.getElementById(表单 id)

6.2获取表单input元素

常用两种：

1. 通过id获取：
   
2. 通过form.名称形式获取：
   

6.3获取单、多选按钮

1. 获取单选按钮
   因为一组单选按钮的name属性必然相同，所以采用document.getElementsByName（name属性值），然后再遍历每个单选按钮，并查看单选按钮元素的checked属性（看是否被选中）
   选中状态：checked=‘checked’ ,checked ,checked=true
   未选中状态：checked=false,未设置checked属性
   
   获取复选框和单选框同

6.4获取下拉选项

道理同获取按钮类似

七、注意！

当声明变量时，不要用var,用let！！
他们的区别：
1、区别：
var定义的bai变du量是全zhi局变量dao或者函数变量。

let定义的变量是块级的变量。

2、全局变量：
指没有zhuan定义在任何函数内，直接定义在全局作用域中的变量。

特点：随处可用，可重用。

何时：希望随处可用，且可反复使用的变量，都要声明在函数之外的全局。

3、局部变量：
指定义在函数内的参数和变量，都是局部变量。

特点：仅函数内可用，出了函数不可用，不可重用。

何时：希望变量只在函数内有效时，都要在函数内创建变量。