JavaScript
文档查询：
W3School 在线教程
1.引入方式
第一种方式：内部脚本，将JS代码定义在HTML页面中
JavaScript代码必须位于<script></script>标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度
例子：
<script> alert("Hello JavaScript") </script>第二种方式：外部脚本将， JS代码定义在外部JS文件中，然后引入到HTML页面中
外部JS文件中，只包含JS代码，不包含<script>标签
引入外部js的<script>标签，必须是双标签
例子：
<script src="js/demo.js"></script>注意：demo.js中只有js代码，没有<script>标签。
2.基础语法
2.1 书写语法
区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
大括号表示代码块
注释：
单行注释：// 注释内容
多行注释：/* 注释内容 */
js中3钟输出语句：
api | 描述 |
|---|---|
window.alert() | 警告框，window.可以省略，即alert() |
document.write() | 在HTML 页面输出内容 |
console.log() | 写入浏览器控制台 |
2.2 变量
js中主要通过如下3个关键字来声明变量：
关键字 | 解释 |
|---|---|
var | 早期ECMAScript5中用于变量声明的关键字 |
let | ECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效 |
const | 声明常量的，常量一旦声明，不能修改 |
在js中声明变量还需要注意如下几点：
JavaScript 是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循如下规则：
组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
数字不能开头
建议使用驼峰命名
var和let的区别：
var声明的变量的作用域是全局的，而且可以重复定义
let所声明的变量，只在 let关键字所在的代码块内有效，且不允许重复声明
2.3 数据类型和运算符
2.3.1 数据类型
虽然js是弱数据类型的语言，但是js中也存在数据类型，js中的数据类型分为 ：原始类型 和 引用类型，具体有如下类型：
数据类型 | 描述 |
|---|---|
number | 数字（整数、小数、NaN(Not a Number)） |
string | 字符串，单双引皆可 |
boolean | 布尔。true，false |
null | 对象为空 |
undefined | 当声明的变量未初始化时，该变量的默认值是 undefined |
使用typeof函数可以返回变量的数据类型
2.3.2 运算符
js中的运算规则绝大多数还是和java中一致的，具体运算符如下：
运算规则 | 运算符 |
|---|---|
算术运算符 | + , - , * , / , % , ++ , -- |
赋值运算符 | = , += , -= , *= , /= , %= |
比较运算符 | > , < , >= , <= , != , == , === 注意 == 会进行类型转换，=== 不会进行类型转换 |
逻辑运算符 | && , || , ! |
三元运算符 | 条件表达式 ? true_value: false_value |
==和===是有区别的：
==：只比较值是否相等，不区分数据类型，哪怕类型不一致，==也会自动转换类型进行值得比较
===：不光比较值，还要比较类型，如果类型不一致，直接返回false
2.3.3 数据类型转换
通过parseInt()函数来进行将其他类型转换成数值类型：
如果是纯数字字符串，直接转换成对应的数字
如果是非纯数字字符串，会把开始的最长数字子串转换成数字，如parseInt('123Afe2')的结果为123，但是parseInt('Afe2')的结果为NaN
通过Boolean()函数可以将其他类型转换成布尔类型：
除了0、null、undefined、""、NaN 会被认为是false，其他都会被认为是true
3.函数
JavaScript中的函数被设计为执行特定任务的代码块，通过关键字function来定义。
3.1 第一种定义格式
function 函数名(参数1,参数2..){ 要执行的代码 } //示例 function add(a, b){ return a + b; }注意点：
形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。
返回值也不需要声明类型，直接return即可
3.2 第二种定义格式
var 函数名 = function (参数1,参数2..){ //要执行的代码 }JavaScript的流程控制语句if，switch，for等和java保持一致，这里不多阐述
4.JavaScript对象
JavaScript对象可以分为三类：
基本对象，我们主要学习Array和JSON和String
BOM对象，主要是和浏览器相关的几个对象
DOM对象，JavaScript中将html的每一个标签都封装成一个对象
4.1 基本对象
4.1.1 Array对象
Array对象时用来定义数组的。常用语法格式有如下2种：
方式1：
var 变量名 = new Array(元素列表); //例如： var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）方式2：
var 变量名 = [ 元素列表 ]; //例如： var arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）通过索引可以获取数组中的值：
arr[索引] = 值;细节：
JavaScript中的数组长度是可变的，而且因为JavaScript是弱类型语言，所以数组可以存放各种类型的数据，例如：
var arr = [1,2,3,4]; arr[10] = 50; console.log(arr[10]); //50 console.log(arr[9]); //undefined属性和方法
属性：
属性 | 描述 |
|---|---|
length | 设置或返回数组中元素的数量。 |
方法：
方法方法 | 描述 |
|---|---|
forEach() | 遍历数组中的每个有值得元素，并调用一次传入的函数 |
push() | 将新元素添加到数组的末尾，并返回新的长度 |
splice() | 从数组中删除元素 |
length属性：可以用来获取数组的长度，可以借助这个属性，来遍历数组中的元素
forEach()函数：这个方法的参数，需要传递一个函数，而且这个函数接受一个参数，就是遍历时数组的值
//e是形参，接受的是数组遍历时的值 arr.forEach(function(e){ console.log(e); }) //在ES6中，引入箭头函数的写法，语法类似java中lambda表达式 arr.forEach((e) => { console.log(e); })push()函数：用于向数组的末尾添加元素，其中函数的参数就是需要添加的元素
splice()函数：用来删除数组中的元素，函数中填入2个参数。
参数1：表示从哪个索引位置删除
参数2：表示删除元素的个数
4.1.2 String对象
String对象的创建方式有2种：
方式1：
var 变量名 = new String("…") ; //例如： var str = new String("Hello String");方式2：
var 变量名 = "…" ; //例如： var str = 'Hello String';属性和方法
属性：
属性 | 描述 |
|---|---|
length | 字符串的长度。 |
方法：
方法 | 描述 |
|---|---|
charAt() | 返回在指定位置的字符。 |
indexOf() | 检索字符串。 |
trim() | 去除字符串两边的空格 |
substring() | 提取字符串中两个指定的索引号之间的字符。 |
length属性：可以用于返回字符串的长度
charAt()函数：用于返回在指定索引位置的字符，函数的参数就是索引
indexOf()函数：用于检索指定内容在字符串中的索引位置，返回值是索引，参数是指定的内容
trim()函数：用于去除字符串两边的空格，并返回去除空格后的字符串
substring()函数：用于截取字符串，函数有2个参数
参数1：表示从哪个索引位置开始截取，包含
参数2：表示到哪个索引位置结束，不包含
4.1.3 JSON对象
自定义对象
在 JavaScript 中自定义对象特别简单，其语法格式如下：
var 对象名 = { 属性名1: 属性值1, 属性名2: 属性值2, 属性名3: 属性值3, ... 函数名称: function(形参列表){} };我们可以通过如下语法调用属性：
对象名.属性名通过如下语法调用函数：
对象名.函数名()json对象
JSON对象：JavaScriptObjectNotation，JavaScript对象标记法，是通过JavaScript标记法书写的文本，其格式如下：
{ "key":value, "key":value, "key":value }其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。
例如我们可以直接百度搜索“json在线解析”，随便挑一个进入，然后编写内容如下：
{ "name": "李传播" }JSON对象经常用来作为前后台交互的数据载体。如下图所示：前后台交互时，我们需要传输数据，但是java中的对象我们该怎么去描述呢？我们可以使用如图所示的xml格式，可以清晰的描述java中需要传递给前端的java对象。
但是xml格式存在如下问题：
标签需要编写双份，占用带宽，浪费资源
解析繁琐
所以我们可以使用json来替代，如下图所示：
var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}'; alert(jsonstr.name); //undefinedjsonstr是一个json字符串，不是json对象，所以结果是undefined，需要借助parse函数来进行json字符串和json对象的转换：
var obj = JSON.parse(jsonstr); alert(obj.name); //Tom通过stringify函数可以将json对象再次转换成json字符串：
alert(JSON.stringify(obj)); //{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}4.2 BOM对象
BOM的全称是Browser Object Model。JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。
BOM中提供了如下5个对象：
对象名称 | 描述 |
|---|---|
Window | 浏览器窗口对象 |
Navigator | 浏览器对象 |
Screen | 屏幕对象 |
History | 历史记录对象 |
Location | 地址栏对象 |
4.2.1 Window对象
window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window，例如window.alert('hello')和alert('hello')是一样的。
window对象提供了获取其他BOM对象的属性：
属性 | 描述 |
|---|---|
history | 用于获取history对象 |
location | 用于获取location对象 |
Navigator | 用于获取Navigator对象 |
Screen | 用于获取Screen对象 |
也就是说我们要使用location对象，只需要通过代码window.location或者简写location即可使用
window也提供了一些常用的函数，如下表格所示：
函数 | 描述 |
|---|---|
alert() | 显示带有一段消息和一个确认按钮的警告框。 |
comfirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
alert()函数：弹出警告框，参数的内容就是警告框的内容
confirm()函数：弹出确认框，并且提供用户2个按钮，分别是确认和取消；用户点击确认时，返回true，点击取消时，返回false
setInterval(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是循环执行。该函数需要传递2个参数
fn：函数，需要周期性执行的功能代码
毫秒值：间隔时间
var i = 0; setInterval(function(){ i++; console.log("定时器执行了"+i+"次"); },2000);setTimeout(fn,毫秒值) ：定时器，只会在一段时间后执行一次功能。参数和上述setInterval一致
//定时器 - setTimeout -- 延迟指定时间执行一次 setTimeout(function(){ alert("JS"); },3000);浏览器打开，3s后弹框，关闭弹框，发现再也不会弹框了。
4.2.2 Location对象
location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息
//获取浏览器地址栏信息 alert(location.href); //设置浏览器地址栏信息 location.href = "https://www.itcast.cn";4.3 DOM对象
DOM：Document Object Model 文档对象模型，也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
DOM的作用是通过修改HTML元素的内容和样式等来实现页面的各种动态效果，HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。document对象提供的用于获取Element元素对象的api如下表所示：
函数 | 描述 |
|---|---|
document.getElementById() | 根据id属性值获取，返回单个Element对象 |
document.getElementsByTagName() | 根据标签名称获取，返回Element对象数组 |
document.getElementsByName() | 根据name属性值获取，返回Element对象数组 |
document.getElementsByClassName() | 根据class属性值获取，返回Element对象数组 |
document.getElementById()： 根据标签的id属性获取标签对象，id是唯一的，所以获取到是单个标签对象，例如
document.getElementById('h1')document.getElementsByTagName() : 根据标签的名字获取标签对象，同名的标签有很多，所以返回值是数组，例如
document.getElementsByTagName('div')document.getElementsByName() ：根据标签的name的属性值获取标签对象，name属性值可以重复，所以返回值是一个数组，例如
document.getElementsByName('hobby')document.getElementsByClassName() : 根据标签的class属性值获取标签对象，class属性值也可以重复，返回值是数组，例如
document.getElementsByClassName('cls')
获取到标签了，可以通过参考书得到标签对象的属性来操作标签的内容，例如可以通过div标签对象的innerHTML属性来修改标签的内容
5.JavaScript事件
5.1 事件绑定
JavaScript对于事件的绑定提供了2种方式：
方式1：通过html标签中的事件属性进行绑定，例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个函数
<input type="button" id="btn1" value="事件绑定1" onclick="on()"> <script> function on(){ alert("按钮1被点击了..."); } </script>方式2：通过DOM中Element元素的事件属性进行绑定
<input type="button" id="btn2" value="事件绑定2"> <script> document.getElementById('btn2').onclick = function(){ alert("按钮2被点击了..."); } </script>事件绑定的函数，只有在事件被触发时，函数才会被调用
5.2 常见事件
事件属性名 | 说明 |
|---|---|
onclick | 鼠标单击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onload | 某个页面或图像被完成加载 |
onsubmit | 当表单提交时触发该事件 |
onmouseover | 鼠标被移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
)
