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. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick
function 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 , onblur
function 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. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
function 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>