17.6、JavaWeb-JavaScript简介、引入方式、基础语法、相关函数、对象、DOM、时间监听、正则表达式
- List item
1、简介
JavaScript是一门跨平台，面向对象的脚本语言，来控制网页行为的，它能使网页可交互
2、JavaScript引入方式
1. 内部脚本：将JS代码定义在HTML页面中
对位置没有限制，一般方body元素底部
- 外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
定义一个js的文件demo.js
alert("hello")
3、JavaScript基础语法
1）书写语法
1. 区分大小写：与java一样，变量名、函数名、函数名以及其他一切东西都是区分大小写的
2. 每行结尾的分号可有可无
3. 注释
a. 单行注释：//
b. 多行注释：/*...*/
4. 大括号表示代码块
2）输出语句
window.alert() // 写入警告框
document.write() // 写入HTML输出
console.log(“hello”)； //写入浏览器的控制台
3）变量
JavaScript中使用val关键字来声明变量
val test = 20;
test = "张三"
弱类型语言：变量可以存放不同类型的值
ECMAScript6新增了let关键字来定义变量，类似val，但是所声明的变量，只在let
关键字所在的代码块内有效，且不允许重复声明
ECMAScript6新增了const关键字，用来声明一个只读的常量，一旦声明，常量的值就不能改变
4）数据类型
原始类型和引用类型
5中原始类型
● number：数字（整数，小数，NaN）
● string：字符、字符串、单双引都可
● boolean：布尔，true、false
● null：对象为空 ,弹出的为object
● undefined：当声明的变量未初始化时，该变量的默认值时undefined
使用typeof运算符可以获取数据类型
alert(typeof age);
5）运算符
==：判断类型是否一样，如果不一样，则进行类型转换，在进行比较
===：判断类型是否一样，如果不一样，直接放回false，再去比较其值
类型转换：
其他类型转number:
1.string:按照字符串的字面值，称为数字，如果字面值不是数字，则转为NaN
一般使用parseInt转换
2.boolean：true转为1，flase转为0
其他类型转为boolean：
1.number：0和NaN转为false，其他转为true
2.string：空字符串转为flase，其他字符串转为true
3.null
4.undefined
6）流程控制语句
与Java中的流程控制语句一样
1.if:
2.switch:
3.for:
4.while:
5.do...while:
7）函数
函数（方法）是被设计为执行特定任务的代码块
- ● 定义：JavaScript函数通过function关键字进行定义
function functionName(参数1，参数2){
要执行的代码
}
● 注意：形式参数不需要类型，因为JavaScript是弱类型的语言
● 返回值也不想要定义类型，可以在函数内部直接使用return返回即可
function add(a,b){
return a+ b;
}
调用：函数名称（实际参数列表）
let result = add(1,2)
● 定义方式二
var functionName = function(参数列表){
要执行的代码
}
var add = function(a,b){
return a + b;
}
● 调用：JS中，函数调用可以传递任意个数参数
let result = add(1,2,3)
4、JavaScript对象
- Array
Array对象定义数组
● 定义
var 变量名 = new Array(元素列表)； // 方式一
var 变量名 = [元素列表]; // 方式二
● 访问
arr[索引] = 值
arr[0] = 1;
● 注意
JS数组类似于Java集合，长度，类型都可变
● 方法（重要）
push:添加元素
arr5.push(10)
splice:删除元素
arr5.replce(a,b)
a:从哪个下表开始删除
b：删除几个
- String
● 定义
var 变量名 = new String(s); //方式一
var 变量名 = s; // 方式二
- 自定义对象
var 对象名称 = {
属性名称：属性值1，
属性名称2：属性值2
...
函数名称：function（形参列表）{}
};
访问
对象名称.属性名称
5、BOM对象（Browser）
- Window - 浏览器对象模型
● 获取：直接使用window，其中window.可以省略
window.alert("abc");
● 属性：获取其他BOM对象
● 方法
var flag = confirm("确认删除") // 删除的弹框
- History：历史记录
● 获取：使用window.history获取，其中window.可以省略
window.history.方法();
history.方法()；
● 方法（浏览器中的前进后退）
back()：加载history列表中的前一个URL forword（）：加载history列表中的下一个URL
- Location:地址栏对象
● 获取:window.location获取,其中window.可以省略
window.location.方法();
location.方法();
● 属性
href:设置或返回完整的URL
6、DOM文档对象模型
将标记语言的各个组成部分封装为对象
● JavaScrpt通过DOM，可以对HTML进行操作
7、事件监听
● 事件：HTML事件是发生在HTML元素上的“事情”
○ 按钮被点击
○ 鼠标移动到元素之上
○ 按下键盘按键
● 事件监听：JavaScript可以在事件被侦测到时执行代码
- 事件绑定
事件绑定有两种方式：
○ 方式一：通过HTML标签中的事件属性进行绑定
function on(){
alert("点击了")
}
○ 通过DOM元素属性绑定
document.getElementById("btn").onclick = function (){
alert("点击了")
}
8、正则表达式
