JS
JavaScript概述
1.JavaScript简介
- JavaScript是一种直译式脚本语言,是一种动态类型,弱类型,基于原型语言,内置支持语言。它的解析器被称为JS引擎,为浏览器的一部分,广泛用于客户的脚本语言,最早在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能
2.JavaScript发展史
3.JavaScript环境搭建
- 两种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--环境创建方式1-->
<script type="text/javascript">
document.write("hello world");
</script>
<!--环境创建方式2-->
<script type="text/javascript" src="js1.js"></script>
</body>
</html>
JavaScript基本语法
1.变量声明
- 在JavaScript中,任何的变量关键字都用var关键字来声明,var是variable的缩写
- var是声明关键字,a是变量名,语句以分号结尾
- 这里值得注意是,JavaScript中的关键字,不可以作为变量名,就像在Java中一样
- JavaScript的部分关键字
2.基本类型
- 变量的基本类型又有Number,String,Boolean,Underfined,Null五种
- 来声明一个数字Number类型,如下:
- 来声明一个字符串String类型
- 来声明一个布尔Boolean类型
- 在Java中,当一个变量未被初始化的时候,Java中null或者基本数据类型的默认值
- 在JavaScript中,当一个变量未被初始化的时候,它的值为undefined
3.引用类型
- 在Java中需要类定义,然后实例对象:
- 在JavaScript中对象可以直接写出来:
4.数组类型
- 数组就是和我们之前理解的数组概念一致,而在JavaScript中称为Array类型
- 我们说JSON可以标记一个对象,那么它同样可以标记一个数组,就是java基础中我们学过的JSONArray
5.运算符
- 逻辑运算符
名称 | 运算符 | 描述 |
---|---|---|
与 | && | 要求表达式两边的都为true才是true |
或 | || | 要求表达式左右两边只要有一个为true,整体结果就为true |
非 | ! | 将布尔值取反 |
- 关系运算
名称 | 运算符 |
---|---|
等于 | == |
小于 | < |
小于或等于 | <= |
大于 | > |
大于或等于 | >= |
不等于 | != |
值和类型相同 | === |
- 单目运算
名称 | 运算符 | 描述 |
---|---|---|
自增 | ++ | 变量每次加1,再赋给变量 |
自减 | – | 变量每次减1,在赋给变量 |
- 双目运算
- 三目运算符: ? :
6.条件分支结构
- if-else分支
- switch分支
7.循环结构
- for循环
- while循环
- do-while循环
- break与continue关键字
- break用于结束循环
- continue用于结束本次循环
8.函数
- 函数定义:用function关键在声明,后面是方法名字,参数列表不写var。整个方法不写返回值类型
- 方法的定义与调用举例
9.常见弹窗函数
- alert弹框:这是一个只能点击确定按钮的弹窗
- alert方法没有返回值,也就是说如果用一个变量去接受返回值,将会得到undefined。无论你点击“确定”还是右上角的那个x关闭
- confirm弹框:这是一个你可以点击确定或者取消的弹窗
- confirm方法与alert不同,他的返回值是boolean,当你点击“确定”时,返回true,无论你点击“取消”还是右上角的那个x关闭,都返回false
- prompt弹框:这是一个你可以输入文本内容的弹窗
- 第一个参数是提示信息,第二的参数是用户输入的默认值
- 当你点击确定的时候,返回用户输入的内容。当你点击取消或者关闭的时候,返回null
10.事件
事件名称 | 描述 |
---|---|
onchange | HTML元素内容改变 |
onclick | 用户点击html元素 |
onmouseover | 用户将鼠标移入一个html元素中 |
onmousemove | 用户在一个html元素上移动鼠标 |
onmouseout | 用户从一个HTML元素上移开元素 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |
onsubmit | 表单提交 |
11.正则表达式
- 正则表达式是描述字符模式的对象
- 正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具
- 语法:
- var patt=new RegExp(pattern,modifiers);
- var patt=/pattern/modifiers
- 修饰符:用于执行区分大小写和全局匹配
修饰符 | 描述 |
---|---|
i | 执行对大小写不敏感匹配 |
g | 执行全局匹配 |
m | 执行多行匹配 |
- 方括号:用于查找某个范围内的字符
表达式 | 描述 |
---|---|
[abc] | 查找括号之间的任何字符 |
[^abc] | 查找任何不在方括号之间的字符 |
[0-9] | 查找任何从0-9的数字 |
[a-z] | 查找任何从小写a-z的字符 |
[A-Z] | 查找任何从大写A-Z的字符 |
[A-z] | 查找任何从大写·A到小写z的字符 |
[adgk] | 查找给定集合内的任何字符 |
[^adgk] | 查找给定集合外的任何字符 |
(red|blue|green) | 查找任何指定的选项 |
- 元字符:是拥有特殊含义的字符
元字符 | 描述 |
---|---|
. | 查找单个字符,除了换行和结束符 |
\w | 查找单词字符 |
\W | 查找非单词字符 |
\d | 查找数字 |
\D | 查找非数字 |
\ s | 查找空白字符 |
\S | 查找非空白字符 |
\b | 查找单词边界 |
\B | 查找非单词边界 |
\0 | 查找null字符 |
\n | 查找换行符 |
\ f | 查找换页符 |
\r | 查找回车符 |
\t | 查找制表符 |
\xxx | 查找以八进制xxx规定的字符 |
\xdd | 查找以十六进制dd规定的字符 |
\uxxx | 查找以十六进制xxx规定的Unicode字符 |
- 量词:用于表示重复次数的含义
量词 | 描述 |
---|---|
n+ | 匹配任何包含至少一个n的字符串 |
n* | 匹配任何包含0个或多个n的字符串 |
n? | 匹配任何包含0个或一个n的字符串 |
n{X} | 匹配包含X个n的序列的字符串 |
n{X,} | X是一个正整数,前面的模式n连续出现至少X次时匹配 |
n{X,Y} | X和Y为正整数,前面模式n连续出现至少X次,最多Y次时匹配 |
n$ | 匹配任何结尾为n的字符 |
^n | 匹配任何任何开头为n的字符 |
?=n | 匹配任何其后紧接指定字符串n的字符串 |
?!n | 匹配任何其后没有紧接指定字符串n的字符串 |
- RegExp对象方法
方法 | 描述 |
---|---|
compile | 编译正则表达式 |
test | 检索字符串中指定的值,返回true或false |
exec | 检索字符串中指定的值,返回找到的值,并确定其位置 |
- 支持正则表达式的String对象方法
方法 | 描述 |
---|---|
search | 检索与正则表达式相匹配的值 |
match | 找到一个或多个正则表达式的匹配 |
replace | 替换与正则表达式匹配的子串 |
split | 把字符串分割为字符串数组 |
- 正则表达式的使用
- test方法:搜索字符串指定的值,根据结果并返回真或假
- exec()方法:检索字符串中指定的值,返回值是被找到的值。如果没有发现匹配,则返回null
- test方法:搜索字符串指定的值,根据结果并返回真或假
JavaScript的DOM
1.概述
- 通过HTML DOM,可访问JavaScript HTML所有的元素
- 当页面被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
- HTML DOM模型被构造为对象的树:
- 可通过编程的对象模型,JavaScript获得了足够的能力来创建动态的HTML
- JavaScript能够改变页面中的所有HTML元素
- JavaScript能够改变页面中的所有HTML属性
- JavaScript能够改变页面中的所有CSS样式
- JavaScript能够对页面中的所有事件作出反应
2.查找HTML元素
- 通常,通过JavaScript,您需要操作HTML元素
- 为了做到这些事情,您必须要找到该元素,有三种办法来做这个事情:
- 通过id找到HTML元素
- 在DOM中查找HTML元素的最简单方法,是通过使用元素的id
- 方法:document.getElementById(“id属性值”);
- 如果找到该元素,则该方法将以对象(在x中)的形式返回该元素
- 如果未找到该元素,则x将包含null
- 通过标签名找到HTML元素(返回数组)
- 方法:getElementsByTagName(“合法的元素名”)
- 通过类名找到HTML元素(返回数组)
- 方法:getElementsByClassName(“class属性值”)
- 通过id找到HTML元素
3.改变HTML
- 改变HTML输出流:document.write()可用于直接向HTML输出流写内容
- 改变HTML内容:使用innerHTML属性
- 改变HTML属性:document.getElementById(id).attribute=新属性值
- attribute替换成真实的属性名
4.CSS变化
- 对象.style.property=新样式
- 将property替换成真实的css属性名
5.DOM事件
- HTML DOM事件允许我们通过触发事件来执行代码
- 比如以下代码:
- 元素被点击
- 页面被加载
- 输入框被修改
- 本例改变了id=“id1”的HTML元素样式,当用户点击时:
- HTML DOM使JavaScript有能力对HTML事件作出反应
- 本例中,用户在< h1>元素上点击时,会改变其内容:
- 本例中,用户在< h1>元素上点击时,会改变其内容:
- 本例从事件处理器调用一个函数:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function change(id){
id.innerHTML="改变了";
}
</script>
</head>
<body>
<h1 onclick="change(this)">原来</h1>
</body>
</html>
- 如需向HTML元素分配事件,您可以使用时间属性
- HTMl DOM允许您使用JavaScript来向HTML元素分配事件
6.EventListener
-
addEventListener()方法
-
在用户点击按钮时触发监听事件
-
addEventListener()方法用于指定元素添加事件句柄
-
addEventListener()方法添加的事件句柄不会覆盖已存在的时间句柄
-
你可以向一个元素添加多个事件句柄
-
你可以向同个元素添加多个同类型的事件句柄,如:两个click事件
-
你可以向DOM对象添加时间监听,不仅仅是html元素。如window对象
-
addEventListener()方法可以更简单控制事件(冒泡与获取)
-
当你使用addEventListener()方法时,JavaScript从HTML标记中分离开来,可读性更强,在没有控制HTML标记时也可以添加事件监听
-
可以使用removeEventListener()方法来移除事件的监听
参数名 | 描述 |
---|---|
event | 事件的类型(如“click”或“mousedown”) |
function | 事件触发后调用函数 |
useCapture | 用于描述事件是冒泡还是捕获,该参数可选的 |
- 当用户点击元素时弹出hello
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function myfunction(){
alert("hello ")
}
</script>
</head>
<body>
<button type="button" id="mybtn">点击</button>
<script>
document.getElementById("mybtn").addEventListener("click", myfunction);
</script>
</body>
</html>
- addEventListener()方法允许向同一个元素添加多个事件,且不会覆盖已存在的事件
- 你可以向同一个元素添加不同类型的事件:
- addEventListener()允许你在HTML DOM对象添加事件监听,HTML DOM对象如:HTML元素,HTML文档,window对象。或者其他支出事件对象,如:xmlHttpRequest对象
- 当用户重置窗口大小时添加事件监听
- 事件传递有两种方式:冒泡与捕获
- 事件传递定义了元素事件触发的顺序。如果你将< p>元素插入到< div>元素中,用户点击< p>元素,哪个元素的click事件先被触发呢
- 在冒泡 中,内部元素的事件先被触发,然后再触发外部元素的事件,即:< p>元素先被触发,< div>元素后被触发
- 在捕获 中,外部元素的事件先被触发,然后再触发内部元素的事件,即:< div>元素先被触发,< p>元素后被触发
- addEventListener()方法可以指定“userCapture”参数来设置传递类型
- 默认值为false,即为冒泡传递,当值为true时,为捕获传递
- removeEventListener()方法移除由addEventListener()方法添加的事件句柄
7.操作元素
- 如需向HTML DOM添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素
- 创建元素:document.createElement()
- 追加元素:appendChild()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<p>你好</p>
</div>
<script>
var para = document.createElement("p1");
var node=document.createTextNode("天选之子");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
- 删除已有的HTML元素
- 使用方法:removeChild()
浏览器BOM
- 浏览器对象模型(BOM-Brower Object MOdel)使JavaScript有能力与浏览器“对话”
- 由于现代浏览器已经几乎实现了JavaScript交互性方面的相同方法和属性,因此常被认为是BOM的方法和属性
1.window
- 所有浏览器都支持window对象,他表示浏览器的窗口
- 所有的·JavaScript全局对象,函数以及变量均自动成为window对象的成员
- 全局变量是window对象的属性
- 全局函数是window对象的方法
- 甚至HTML DOM的document也是window的对象的属性之一
- window的尺寸
- 对于Internet Explorer,Chrome,Firefox,Opera以及Safari:
- window.innerHeight-浏览器窗口的内部高度(包括滚动条)
- window.innerWidth-浏览器窗口的内部宽度(包括滚动条)
- 对于Internet Explorer8、7、6、5
- document.documentElement.clientHeight
- document.documentElement.clientWidth
- 对于Internet Explorer,Chrome,Firefox,Opera以及Safari:
- Window Screen
- 可用宽度:screen.avaliWidth属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏
- 可用高度:screen.availHeight属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏
- Window Location
- window.location对象用于获取当前页面的地址(URL),并把浏览器重定向到新的页面
- window.loaction对象在编写时可不使用window这个前缀
- location.hostname返回web主机域名
- location.pathname返回当前页面的路径和文件名
- location.port返回web主机的端口
- location.protocol返回所使用的web协议
- loacation.href属性返回当前页面的url
- location.assign()方法加载新的文档
- Window History
- window.history对象包含浏览器的历史
- window.history对象在编写的时候可不使用window这个前缀
- history.back()-与浏览器点击按钮后退相同
- history.forward()-与浏览器点击按钮向前相同
- Window Navigator
- window.navigator对象在编写时可以不使用window这个前缀
- window.navigator对象在编写时可以不使用window这个前缀
2.JavaScript定时器
- 定义定时器
- setInterval(“调用函数”,毫秒时间):每间隔固定毫秒值就执行一次函数
- setTimout(“调用函数”,毫秒时间):在固定的时间之后执行一次调用函数
- 关闭定时器
- clearIntetval(定时器名称)
- clearTimeOut(定时器名称)