js(JavaScript)
简介
1.什么是JavaScript
JavaScript简称JS,由网景公司开发的客户端脚本语言,不需要编译,可以直接运行
Web前端三层:
结构层HTML,定义页面的结构
样式层CSS,定义页面的样式
行为层JavaScript用来实现交互,提升用户的体验
2.JavaScript作用
在客户端浏览器上动态的操作页面
在客户端浏览器上做数据的校验
在客户端上发送异步请求
3.JavaScript有三个组成:
ECMA Script:基础语法.
BOM:Browser Object Model 浏览器对象模型.
DOM:Document Object Model 文档对象模型.
注释
单行注释
// 注释的内容
多行注释
/*
注释的内容
*/
输入输出语句
输入框
prompt(“提示内容”);
弹出警告框
alert(“提示内容”);
控制台输出
console.log(“显示内容”);
页面内容输出
document.write(“显示内容”);
变量和常量
JavaScript 属于弱类型的语言,定义变量时不区分具体的数据类型。
定义局部变量
let 变量名 = 值;
定义全局变量
变量名 = 值;
var 变量名 = 值;
定义常量
const 常量名 = 值;
数组
数组的使用和 java 中的数组基本一致,但是在 JavaScript 中的数组更加灵活,数据类型和长度都没有限制。
定义格式
let 数组名 = [元素1,元素2,…];
索引范围
从 0 开始,最大到数组长度-1
数组长度
数组名.length
数组高级运算符…
数组复制
合并数组
字符串转数组
数据类型
js中的数据类型:
数值型:number(凡是数字都是数值型,不区分整数和小数)
字符串:string(凡是引号包裹起来的内容全部都是字符串)
布尔:boolean(true、false)
对象类型:object(特殊取值null)
未定义型:undefined
检测数据类型:
typeof(value); 或者typeof value; 返回这个变量的类型.
说明 : 同一个变量, 可以进行不同类型的数据赋值.
< script type= "text/javascript" >
var a;
alert ( typeof a) ;
a = 998 ;
alert ( typeof a) ;
a = "用心学习" ;
alert ( typeof a) ;
a = true ;
alert ( typeof a) ;
< / script>
DOM
DOM(Document Object Model):文档对象模型. 将 HTML 文档的各个组成部分,封装为对象。借助这些对象,可以对 HTML 文档进行增删改查的动态操作。
获取元素的方法 作用 document.getElementById(“id”) 通过id得到一个元素 document.getElementsByTagName (“标签名”) 通过标签名得到一组元素 document.getElementsByName(“name”) 通过name属性得到一组元素 document.getElementsByClassName(“类名”) 通过类名得到一组元素 子元素对象.parentElement 获取当前元素的父元素
根据CSS选择器获取元素 作用 document.querySelector(CSS选择器) 通过css选择器获取一个元素,如:"#id" “.类名” “标签名” document.querySelectorAll(CSS选择器) 通过css选择器获取一组元素
创建元素的方法 作用 document.createElement(“标签名”) 创建一个元素
将元素挂到DOM树上的方法 作用 父元素.appendChild(子元素) 将元素追加成最后一个子元素 父元素.removeChild(子元素) 通过父元素删除子元素(他杀) 元素.remove() 删除自己(自杀)(在ie浏览器中无法使用 ) 父元素.replaceChild(新元素, 旧元素) 用新元素替换子元素
Attribute 属性的操作 作用 setAtrribute(属性名, 属性值) 设置属性 getAtrribute(属性名) 根据属性名获取属性值 removeAtrribute(属性名) 根据属性名移除指定的属性 style属性 为元素添加样式
Text 文本的操作 作用 innerText 添加文本内容,不解析标签 innerHTML 添加文本内容,解析标签
事件
用户在操作网页的过程中,会有各种操作,每种操作都会产生事件。我们可以通过JS来监听这些事件,对这些事件编写函数进行处理,来实现与用户的交互。
常用事件
事件名 作用 onclick 单击 ondblclick 双击 onload 加载完毕 onfocus 获得焦点 onblur 失去焦点 onchange 改变事件 onmouseover 鼠标移上 onmouseout 鼠标移出 onsubmit 当表单提交是触发该事件
绑定事件的方式
方式1
通过标签中的事件属性进行绑定。
<button id="btn" onclick="执行的功能"> </button>
方式2
通过 DOM 元素属性绑定。
document.getElementById("btn").onclick = 执行的功能
类的定义和使用
class Person {
constructor ( name, age) {
this . name = name;
this . age = age;
}
show ( ) {
document. write ( this . name + "," + this . age + "<br>" ) ;
}
eat ( ) {
document. write ( "吃饭..." ) ;
}
}
let p = new Person ( "张三" , 23 ) ;
p. show ( ) ;
p. eat ( ) ;
字面量定义类和使用
let person = {
name : "张三" ,
age : 23 ,
hobby : [ "听课" , "学习" ] ,
eat : function ( ) {
document. write ( "吃饭..." ) ;
}
} ;
document. write ( person. name + "," + person. age + "," + person. hobby[ 0 ] + "," + person. hobby[ 1 ] + "<br>" ) ;
person. eat ( ) ;
内置对象
方法名 作用 substring(startIndex,endIndex) 包头不包尾 split(delimiter) 切割字符串 toLowerCase() 转成小写 toUpperCase() 转成大写 trim() 去掉前后空格
字符串转为数字 说明 parseInt(字符串) 转成整数 parseFloat(字符串) 转成小数 isNaN(字符串) 判断非数字
编码和解码 说明 encodeURI(字符串) URI编码 decodeURI(字符串) URI解码
执行字符串 说明 eval(字符串) 执行字符串中JS代码
方法名 功能 concat() 拼接数组 reverse() 反转 join(separator) 将数组拼接成一个字符串 sort() 排序,默认按字符串大小 pop() 删除 push() 添加
方法名 作用 getFullYear() 得到年份 getDay() 得到周几 getTime() 得到毫秒数 toLocaleString() 转成本地的时间
json
JSON(JavaScript Object Notation, JavaScript对象标记),是一种轻量级的数据交换格式,用于服务器与浏览器之间传输数据。以前我们都是使用XML来传递数据。
描述的数据比需要的真实数据多 占用了更多的传输的带宽 解析XML比较麻烦
< contact>
< name> 貂蝉</ name>
< gender> false</ gender>
< age> 20</ age>
</ contact>
{
name: "貂蝉",
gender: false,
age: 20
}
json的语法格式
类型 语法 解释 对象类型 {键:值, 键:值} 代表一个对象,可以有多个属性 属性与值之间使用冒号,属性与属性之间使用逗号 数组/集合类型 [元素,元素,元素] 数组中每个元素类型是可以不同 混合类型 [{键:值},{键:值},{键:值}] 数组中每个元素是一个对象 {键:[元素,元素,元素]} 是一个对象,但某个属性是一个数组或集合
JS中操作JSON的方法
语法 功能 JSON.parse(字符串) 将一个字符串转成JSON对象 注:JSON字符串中属性名一定要使用双引号引起来 JSON.stringify(JSON对象) 将一个JSON对象转成字符串
BOM
BOM(Browser Object Model):浏览器对象模型。 将浏览器的各个组成部分封装成不同的对象,方便我们进行操作
BOM常用对象 作用 window 浏览器窗口方法: prompt(), alert(), setInterval() confirm() 确定框,有2个选择按钮(确定,取消) location 代表浏览器的地址栏 history 浏览的历史记录
window对象
window中的方法 作用 setTimeout(函数名, 间隔毫秒数) 过一段时间后调用一次指定的函数,单位是毫秒,只调用一次。 返回值是一个整数类型,这就是计时器 clearTimeout(计时器) 清除上面的计时器,参数的计时器就是上面方法的返回值 setInterval(函数名, 间隔毫秒数) 每隔一段时间调用一次指定的函数,单位是毫秒,不停的调用。 返回值是一个整数类型,这就是计时器 clearInterval(计时器) 清除上面的计时器,参数的计时器就是上面方法的返回值
location对象
属性 功能 href 1. 获取属性值,得到当前访问的地址 2. 设置属性值,跳转到指定的页面 search 获取?后面的参数字符串 GET方法提交表单的时候,参数会显示在地址栏上
location常用方法
location的方法 描述 reload() 重载加载当前的页面,类似于刷新
代码
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> BOM:location对象</ title>
</ head>
< body>
< input type = " button" onclick = " location.reload()" value = " 刷新" >
< script type = " text/javascript" >
document. write ( new Date ( ) . toLocaleString ( ) + "<br/>" ) ;
</ script>
</ body>
</ html>
与window对象关系
location对象是window对象的一个属性,完整写法:window.location location对象默认的属性是href
小结
location学习了哪些属性?
href 进行页面跳转 search 获取?后面的参数字符串 学习了哪些方法
reload 重新加载页面 它与window是什么关系?
是window的一个属性
history对象
方法 作用 forward() 相当于浏览器上前进按钮,如果浏览器上前进按钮不可用,这个方法也不起作用 back() 相当于浏览器上后退按钮 go(正数或负数) go(1)相当于前进,go(-1)相当于后退
注:浏览器上的前进和后退按钮可以点的时候,这个代码才起作用。
代码
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> BOM:历史记录对象</ title>
</ head>
< body>
< a href = " demo04_location.html" > 跳转到demo04</ a>
< input type = " button" value = " 前进" onclick = " history.forward()" >
< input type = " button" value = " 前进" onclick = " history.go(1)" >
</ body>
</ html>