JavaScript(JS)

介绍

JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互
JavaScript 和Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似

JS引入方式

内部脚本:将JS代码定义在HTML页面中
JavaScript代码必须位于<script></script>标签之间

在HTML文档中，可以在任意地方，放置任意数量的<script>

一般会把脚本置于<body>元素的底部，可改善显示速度

外部脚本:将JS代码定义在外部JS文件中，然后引入到 HTML页面中

外部JS文件中，只包含JS代码，不包含<script>标签
<script>标签不能自闭合：

JS基础语法

书写语法

区分大小写:与Java一样，变量名、函数名以及其他一切东西都是区分大小写的

每行结尾的分号可有可无
注释:
单行注释://注释内容
多行注释:/*注释内容 */
大括号表示代码块

输出语句

使用 window.alert()写入警告框
使用 document.write()写入 HTML 输出

使用 console.log()写入浏览器控制台

变量

JavaScript 中用 var关键字(variable 的缩写)来声明变量。

Javascript 是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循如下规则:
1.组成字符可以是任何字母、数字、下划线(_)或美元符号(S)
2.数字不能开头
3.建议使用驼峰命名

特点1：作用域比较大，全局变量

特点2：可以重复定义的

ECMAScript6 新增了let关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在let关键字所在的代码块内有效(局部变量)，且不允许重复声明。
ECMAScript6新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

数据类型、运算符、流程控制语句

数据类型

JS中分为：原始类型（Java当中的基本数据类型）和引用类型（JS当中的对象）

使用typeof运算符可以获取数据类型：

运算符

算术运算符:+，-，*,/,%，++，--

赋值运算符:=，+=，-=，*=，/=，%=

比较运算符:>，<，>=，<=，!=，==，===
逻辑运算符:&&，||，!
三元运算符:条件表达式?true_value:false_value

==与===
==会进行类型转换，===不会进行类型转换

类型转换

字符串类型转为数字:
将字符串字面值转为数字。如果字面值不是数字，则转为NaN。

其他类型转为boolean:
Number:0和NaN为false，其他均转为true。
String:空字符串为false，其他均转为true。
Null和 undefined:均转为false。

流程控制

JS函数

定义方式二：

var functionName=function(参数1,参数2..){
//要执行的代码

}

注意事项：

JS中，函数调用可以传递任意个数的参数

虽然传入的参数有四个，但是只调用两个，虽然传递了，但是没有接收

JS对象

Array

JavaScript中Array对象用于定义数组

特点：长度可变，类型可变

注意事项：JavaScript中的数组相当于java集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意类型的数据

属性、方法

区别：

for循环是遍历数组中的所有元素，而forEach遍历数组中有值的元素

ES6 箭头函数

function可以省略，（...）里面是方法的形参列表，{...}里面是函数体的内容

如果要给箭头函数起名字：var xxx=(...) =>{...}

push

splice

start：从哪个位置开始删

deleteCount：删几个

String

JSON

概念：JavaScript对象标记法

JSON是通过JavaScript对象标记法书写的文本

由于其语法简单，层次结构鲜明，先多用于作为数据载体，在网络中进行数据传输

基础语法

BOM

概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象

组成:
Window:浏览器窗口对象

Navigator:浏览器对象

Screen:屏幕对象

History:历史记录对象
Location:地址栏对象

Window

介绍:浏览器窗口对象。
获取:直接使用window，其中 window.可以省略。 window.alert("Hello window"); alert("Hello window");
属性
history:对 History 对象的只读引用。请参阅 History 对象
location:用于窗口或框架的 Location 对象。请参阅 Location 对象
navigator:对 Navigator 对象的只读引用。请参阅Navigator 对象

方法
alert():显示带有一段消息和一个确认按钮的警告框
confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式
setTimeout():在指定的毫秒数后调用函数或计算表达式

Location

DOM

概念:Document Object Model，文档对象模型

将标记语言的各个组成部分封装为对应的对象：
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象

JavaScript 通过DOM，就能够对HTML进行操作：
改变 HTML 元素的内容
改变 HTML元素的样式(CSS)
对 HTML DOM 事件作出反应
添加和删除 HTML元素

DOM是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为三个不同的部分：

1.Core DOM-所有文档类型的标准模型
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
2.XML DOM-XML文档的标准模型
3.HTML DOM-HTML文档的标准模型
lmage: <img>
Button : <input type='button'>

如何获取元素对象

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-对象-DOM-案例</title>
</head><body><img id="h1" src="img/off.gif">  <br><br><div class="cls">传智教育</div>   <br><div class="cls">黑马程序员</div>  <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>//1. 点亮灯泡 ：src属性值var img=document.getElementById('h1');//获取元素对象img.src="img/on.gif";//调用元素对象的方法或属性来控制该元素//2. 将所有div标签的内容后面加上:very good （红色字体）var divs=document.getElementsByTagName('div');for (let i = 0; i< divs.length; i++) {const div = divs[i];div.innerHTML="<font color='red'>very good</font>";}//3. 使所有的复选框呈现选中状态//(1).获取复选框var ins=document.getElementsByName('hobby');for (let i = 0; i < ins.length; i++) {const check = ins[i];//(2).设置复选框被选中check.checked=true;//选中}</script>
</html>

JS事件监听

事件:HTML事件是发生在HTML元素上的“事情”。比如:
按钮被点击
鼠标移动到元素上
按下键盘按键
事件监听:JavaScript可以在事件被侦测到时执行代码

事件绑定

常见事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-事件-常见事件</title>
</head><body onload="load()"><form action="" style="text-align: center;" onsubmit="subfn()"><input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()"><input id="b1" type="submit" value="提交"><input id="b1" type="button" value="单击事件" onclick="fn1()"></form>  <br><br><br><table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr align="center"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr></table></body><script>//onload : 页面/元素加载完成后触发function load(){console.log("页面加载完成...")}//onclick: 鼠标点击事件function fn1(){console.log("我被点击了...");}//onblur: 失去焦点事件function bfn(){console.log("失去焦点...");}//onfocus: 元素获得焦点function ffn(){console.log("获得焦点...");}//onkeydown: 某个键盘的键被按下function kfn(){console.log("键盘被按下了...");}//onmouseover: 鼠标移动到元素之上function over(){console.log("鼠标移入了...")}//onmouseout: 鼠标移出某元素function out(){console.log("鼠标移出了...")}//onsubmit: 提交表单事件function subfn(){alert("表单被提交了...");}</script>
</html>

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-事件-案例</title>
</head>
<body><img id="light" src="img/off.gif"> <br><input type="button" value="点亮" onclick="on()"> <input type="button"  value="熄灭" onclick="off()"><br> <br><input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()"><br> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏<br><input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="reverse()"></body><script>//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclickfunction on(){//a. 获取img元素对象var img = document.getElementById("light");//b. 设置src属性img.src = "img/on.gif";}function off(){//a. 获取img元素对象var img = document.getElementById("light");//b. 设置src属性img.src = "img/off.gif";}//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblurfunction lower(){//小写//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为小写input.value = input.value.toLowerCase();}function upper(){//大写//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为大写input.value = input.value.toUpperCase();}//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclickfunction checkAll(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 设置选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = true;}}function reverse(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 设置未选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = false;}}</script>
</html>