JavaScript
-
JavaScript(简称”JS“) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发web页面的脚本语言而出名的,但是它也被用到了很多非游览器环境中,JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令和声明式风格。
-
可以通过DOM来操作HTML元素,读写元素的内容,验证提交的数据,检验浏览器的信息,也可以给页面添加动画效果。
-
核心+文档对象模型+浏览器对象模型
-
ECMAScript:核心,包括基本的语法,语句,事件,对象等
-
DOM:Document Object Model,文档对象模型,操作元素
-
BOM:Browser Object Model,浏览器对象模型,操作浏览器
JavaScript的使用方式
行内式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="测试" onclick="javascript:alert('Hello World!')">
</body>
</html>
内嵌式
- 将JS代码写到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
alert("Hello JS!");
</script>
</head>
<body>
</body>
</html>
外链式
-
将JS代码写到一个扩展名为.js的文件中,再将该文件导入到指定的HTML中。
-
注意:
alert("Hello Java!");
HTML文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/demo.js"></script>
</head>
<body>
</body>
</html>
JavaScript基本语法
变量
-
JS本身是一门弱类型语言,只需要使用var关键字即可,不需要指定数据类型。
-
语法:var 变量名; 或者var 变量名1,变量名2; 或者var 变量名=值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//定义变量
var a;
var b = 1,c = 1.23;
var d = "abc",e = true;
//弹框测试
//alert(d);
//控制台输出
console.log(e);
</script>
</head>
<body>
</body>
</html>
数据类型
-
分为两类:基本数据类型和引用数据类型
-
基本数据类型:
-
Number:任意数值
-
Boolean:布尔型,值只有true和false
-
String:字符串类型,可以使用双引号或者单引号定义
-
Undefined:只有一个undefined值,定义的变量未给初始值时,就是undefined
-
Null:只有一个null值,Undefined是Null派生出来的。ECMAScript中将之列为等值。
-
console.log(undefined == null); //true
-
- 引用数据类型
- 通常叫做类(class),JS会将之转换成对象来处理
### 运算符
- 算数运算符:+ - * / % ++ --
- 赋值运算符:= += -= *= /= %=
- 比较运算符:> >= < <= == !=
- 逻辑运算符:&& || !
- 条件运算符:?:
- 使用方式同java
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var a = 10,b = 4;
var res = a / b;
console.log(res); //2.5
</script>
</head>
<body>
</body>
</html>
```
### 分支结构
单分支:if(){}
双分支:if(){}else{}
多分支:if(){}else if(){}else{}
等值多分支:
switch(){
case :
……
break;
default:
……
}
练习:给出一个1到7之间的数字,如果是1到5,输出工作日,6到7输出休息日,其他输出数据不合法
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var num = 8;
//使用if结构完成
if (num <= 5 && num > 0) {
console.log("工作日");
} else if (num == 6 || num == 7) {
console.log("休息日");
} else {
console.log("数据不合法");
}
//使用switch结构完成
switch (num) {
case 1:
case 2:
case 3:
case 4:
case 5:
console.log("工作日");
break;
case 6:
case 7:
console.log("休息日");
break;
default:
console.log("数据不合法");
}
</script>
</head>
<body>
</body>
</html>
```
### 循环结构
- JS中while循环,do while循环,for循环跟Java基本一致。增强型for循环略有差别。
练习:1+2+3+……+100
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var num = 1,res = 0;
while(num < 101){
res += num;
num ++;
}
console.log(res);
var num1 = 1,res1 = 0;
do{
res1 += num1;
num1 ++;
}while(num1 < 101);
console.log(res1);
var res2 = 0;
for (var num2 = 1;num2 < 101;num2 ++) {
res2 += num2;
}
console.log(res2);
</script>
</head>
<body>
</body>
</html>
```
### 数组对象
- 创建空数组
- 创建有长度的数组
- 创建有初始值的数组
- 注意:可以自动扩容
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//1)创建空数组
var array1 = new Array();
//2)创建有长度的数组
var array2 = new Array(5);
//3)创建有初始值的数组
var array3 = [2,1.23,true,"abc"];
//获取数组的长度
//console.log(array3.length);
//遍历数组数据
for (var i = 0;i < array3.length;i ++) {
//console.log(array3[i]);
}
//console.log(array3[8]);
//array3[8] = "陈微";
//alert(array3);
//增强型for循环
//java:for(数据类型 变量:数组名){}
for(var i in array3) {
console.log(array3[i]);
}
</script>
</head>
<body>
</body>
</html>
```
### 日期对象
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var now = new Date();
//console.log(now);
//console.log(now.toLocaleString());
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var week = now.getDay();
var time = year+"年"+month+"月"+date+"日 星期"+week+" "+hour+":"+minute+":"+second;
console.log(time);
</script>
</head>
<body>
</body>
</html>
```
### 函数对象
- 只需要使用关键字function即可。
- 无参函数
- 有参函数
- 有返回值的函数
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function sum(){
var a = 4,b = 7;
var res = a + b;
console.log(res);
}
//sum();
function sum1(a,b){
var res = a + b;
console.log(res);
}
//sum1("abc",3);
function sum2(){
var a = 4,b = 7;
var res = a + b;
return res;
}
var result = sum2();
console.log(result);
</script>
</head>
<body>
</body>
</html>
数学对象
-
创建:Math对象不用创建直接使用。使用时直接调用方法,如:Math.方法名();
-
常用方法:
-
andom():返回 0 ~ 1 之间的随机数
-
max(x,y):返回 x 和 y 中的最大值
-
min(x,y):返回 x 和 y 中的最低值
-
ceil(x):对数进行向上取整
-
floor(x):对数进行向下取整
-
round(x):把数四舍五入为最接近的整数
-
abs(x):返回数的绝对值
-
属性:PI,圆周率
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var a = 1.23,b = 5.91;
console.log(Math.random());
console.log(Math.max(a,b));
console.log(Math.min(a,b));
console.log(Math.ceil(a));
console.log(Math.floor(b));
console.log(Math.round(a));
console.log(Math.abs(-12));
console.log(Math.PI);
</script>
</head>
<body>
</body>
</html>
字符串对象
创建:
var str1 = “abc”;
var str2 = new String(“abc”);
-
可以实现动画效果(有时间可以炫一下)
-
常用方法:
-
获取字符串的长度 str1.length
-
( 返回值是字符串的长度var 类型)
-
是否以某个字符开头 startsWith()
-
是否以某个字符结尾 endsWith()
-
截取字符串
-
substring(起始下标,结束下标)
-
substr(起始下标,截取长度)
-
根据某个字符拆分字符串 返回数组 split()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var str = "I have a dream";
console.log(str.length);
console.log(str.startsWith("b"));
console.log(str.endsWith("m"));
console.log(str.substring(3,5));
console.log(str.substr(3,5));
console.log(str.split(" "));
</script>
</head>
<body>
</body>
</html>
正则表达式对象
-
单个字符:如 [a]、 [ab] 、[a-zA-Z0-9]、[1-9]
-
元字符:\d 表示数字
-
量词符号:
-
?:表示出现0次或1次
-
*:表示出现0次或多次
-
+:表示出现1次或多次
-
{m}:表示m数量
-
{m,n}:表示m=<数量<=n(即数量在双闭区间)
-
开始结束符号:
-
^ 开始 表示以什么开始 :如以数字开始(直接表示开始)
-
$ 结束 如规定以什么结束(直接表示结束)
-
创建正则表达式对象:
-
var reg = new RegExp(“正则表达式”);
-
var reg = /正则表达式/;
-
测试正则验证的方法:
-
test(参数):验证指定的字符串是否符合正则定义的规范
-
案例:验证手机号码是否符合规范,要求:以1开头;第二位为3,4,5,6,7,8,9其中任意一个数;剩余9位为0~9之间的数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var rule = /^1[3-9][0-9]{9}$/;
var phone1 = "jhsfhjksafhk";
var phone2 = "";
var phone3 = "21928374638";
var phone4 = "11928374638";
var phone5 = "139283746380";
var phone6 = "1392837463";
var phone7 = "13928374634";
console.log(rule.test(phone1));
console.log(rule.test(phone2));
console.log(rule.test(phone3));
console.log(rule.test(phone4));
console.log(rule.test(phone5));
console.log(rule.test(phone6));
console.log(rule.test(phone7));
</script>
</head>
<body>
</body>
</html>
DOM对象
- Document Object Model-----》文档对象模型:
- 是w3c组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口API它可以动态地访问程序和脚本,更新其内容、结构和www文档风格目前HTML和XML文档是通过说明部分定义的。文档可以进一步被处理,处理的结果可以加入到当前的页面。DOM是一种基于子树的API文档,它要求在处理的过程中整个文档表示在存储器中。另外一种简单的API是基于事件的SAX,它可以用于处理很大的XML文档,由于大,所以不适合全部放在存储器中处理。
获取页面元素
-
常用方法:
-
document.getElementById(“id”);通过id属性的值查找元素
-
document.getElementsByName(“name”);通过name属性的值查找元素,因为name属性值可以重复,所以返回的是元素数组。
-
document.getElementsByClassName(“class”);通过class属性的值查找元素,因为class属性值可以重复,所以返回的是元素数组。
-
document.getElementsByTagName(“标签名”);通过标签名查找元素,因为标签可以重复,所以返回的是元素数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div name="test">div1</div>
<div id="divId">div2</div>
<div name="test">div3</div>
<div class="demo">div4</div>
<p class="demo">p1</p>
<script>
//var ele = document.getElementById("divId");
//console.log(ele);
var eles = document.getElementsByName("test");
//console.log(eles);
var eles = document.getElementsByClassName("demo");
//console.log(eles);
var eles = document.getElementsByTagName("div");
console.log(eles);
</script>
</body>
</html>
操作页面元素
-
创建dom对象
-
document.createElement(“标签名”);
-
添加dom对象
-
(1)A.appendChild(B) 将B添加到A内部的最后面
-
(2)A.insertBefore(B, C) 将B添加到A内部C的前面
-
删除dom对象
-
(1)A.remove() 将A删除
-
(2)A.removeChild(B) 将A内部的B删除(用于将标签内部的某个标签删除)
-
替换dom对象
-
A.replaceChild(B, C) 用B替换A内部的C
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="test">
<h1>这是div里面的标题</h1>
<p>这是div里面的第一个段落</p>
</div>
<script>
//创建一个能够跳转到淘宝的超链接<a href="http://www.taobao.com">淘宝</a>
var newEle = document.createElement("a");
//给新创建的标签的href属性赋值
newEle.href = "http://www.taobao.com";
//在新建的标签中添加文本
newEle.innerText = "淘宝";
//获取id为test的标签
var demo = document.getElementById("test");
//将新建的标签放到id为test的标签中的最后面
//demo.appendChild(newEle);
//将新建的标签放到id为test的标签中的p标签的前面
var p = document.getElementsByTagName("p")[0];
//demo.insertBefore(newEle,p);
//将新建的标签放到id为test的标签中替换其中的p标签
//demo.replaceChild(newEle,p);
//删除id为test的标签中的p标签
//demo.removeChild(p);
//删除id为test的标签
demo.remove();
</script>
</body>
</html>
操作元素属性
-
页面元素.属性名 = “值”
-
设置:标签对象.setAttribute(“属性名”,“属性值”);
-
获取:标签对象.getAttribute(“属性名”);
-
删除:标签对象.removeAttribute(“属性名”);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="username" name="uname" maxlength="6" value="chenwei">
<script>
//获取id为username的标签
var demo = document.getElementById("username");
//获取该标签value属性的值
//console.log(demo.value);
//console.log(demo.getAttribute("maxlength"));
//设置该标签的value属性的值为mary
//demo.value = "mary";
//demo.setAttribute("value","mary");
//删除该标签的value属性
demo.removeAttribute("value");
</script>
</body>
</html>
操作元素样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#test{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="test"></div>
<script>
var demo = document.getElementById("test");
//demo.style = "width: 200px;height: 200px;background-color: green;";
demo.style.width = "200px";
demo.style.height = "200px"
demo.style.backgroundColor = "pink";
demo.style.borderRadius = "50%";
</script>
</body>
</html>
操作元素内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="test">
</div>
<script>
var demo = document.getElementById("test");
//获取标签中的内容
//console.log(demo.innerText); //只获取文本
//console.log(demo.innerHTML); //获取所有(包括标签)
//设置标签的内容
var str = "<h1>这是div中的p标签</h1>";
//demo.innerText = str; //会将字符串中的标签当作文本放进去
demo.innerHTML = str; //会将字符串中的标签当作标签放进去
</script>
</body>
</html>
-
innerText与innerHTML的区别:
-
获取时,innerText只能获取文本内容,innerHTML不仅能获取文本内容,还能获取标签
-
设置时,innerText会将标签当成文本放进去,innerHTML放进去的标签能被浏览器翻译
事件
事件简介
属性 | 发生于何时 |
---|---|
onabort | 图片的加载被中断 |
onblur | 元素失去焦点 |
onchange | 域的内容被改变 |
onclick | 当用户点击某个对象时调用的事件句柄 |
onblclick | 当用户双击某个对象时调用的事件句柄 |
onerror | 在加载文档或者图像时发生错误 |
onfocus | 元素获得焦点 |
onkeydown | 某个键盘按键被按下 |
onkeypress | 某个按键被按下并松开 |
onload | 一张页面或一幅图像完成加载 |
onmousedown | 鼠标按键被按下 |
onmousemove | 鼠标被移动 |
onmouseout | 鼠标从某元素移开 |
onmouseover | 鼠标移到某元素之上 |
onmouseup | 鼠标按键被松开 |
onreset | 重置按钮被点击 |
onresize | 窗口或框架被重新调整大小 |
onselect | 文本被选中 |
onsubmit | 确认按钮被点击 |
onunload | 用户退出页面 |
事件的绑定
-
方式一:
-
直接在标签上使用对应的属性即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function show(){
console.log("测试事件的绑定方式");
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="show()">
</body>
</html>
-
方式二:
-
先使用JS找到要绑定事件的标签,再给这个标签绑定事件。
-
注意:使用方式二时,关注代码的执行顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="测试" id="btn">
<script>
var demo = document.getElementById("btn");
demo.onclick = function(){
console.log("再试试");
}
</script>
</body>
</html>
-
焦点事件(通常对输入框使用)
-
注意:点击输入框,则该输入框获取焦点,点击非输入框以外的地方,则该输入框失去焦点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
input{
width: 100px;
height: 30px;
border-radius: 5px;
background-color: green;
}
</style>
<script>
function f(){
var demo = document.getElementsByTagName("input")[0];
demo.style.width = "200px";
demo.style.height = "60px";
demo.style.backgroundColor = "yellow";
}
function b(){
var demo = document.getElementsByTagName("input")[0];
demo.style.width = "100px";
demo.style.height = "30px";
demo.style.backgroundColor = "green";
}
</script>
</head>
<body>
<input type="text" onfocus="f()" onblur="b()">
</body>
</html>
- 鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#test{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="test"></div>
<script>
var demo = document.getElementById("test");
demo.onmouseover = function(){
demo.style.width = "200px";
demo.style.height = "200px";
demo.style.borderRadius = "50%";
}
demo.onmouseout = function(){
demo.style.width = "100px";
demo.style.height = "100px";
demo.style.borderRadius = "0%";
}
</script>
</body>
</html>
- 键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function u(){
console.log("键盘松开了");
}
function d(){
console.log("键盘按下去了");
}
</script>
</head>
<body>
<input type="text" onkeyup="u()" onkeydown="d()">
</body>
</html>
-
内容改变事件(通常对下拉列表使用)
-
注意:打开下拉列表,选择了与之前不同的选项才能触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="pro">
<option>四川</option>
<option>云南</option>
<option>贵州</option>
</select>
<script>
var demo = document.getElementById("pro");
demo.onchange = function(){
console.log("内容真的变了");
}
</script>
</body>
</html>
- 页面加载完成事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function l(){
var demo = document.getElementById("pro");
demo.onchange = function(){
console.log("内容真的变了");
}
}
</script>
</head>
<body onload="l()">
<select id="pro">
<option>四川</option>
<option>云南</option>
<option>贵州</option>
</select>
</body>
</html>
ext" οnkeyup=“u()” οnkeydοwn=“d()”>
~~~-
内容改变事件(通常对下拉列表使用)
-
注意:打开下拉列表,选择了与之前不同的选项才能触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="pro">
<option>四川</option>
<option>云南</option>
<option>贵州</option>
</select>
<script>
var demo = document.getElementById("pro");
demo.onchange = function(){
console.log("内容真的变了");
}
</script>
</body>
</html>
- 页面加载完成事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function l(){
var demo = document.getElementById("pro");
demo.onchange = function(){
console.log("内容真的变了");
}
}
</script>
</head>
<body onload="l()">
<select id="pro">
<option>四川</option>
<option>云南</option>
<option>贵州</option>
</select>
</body>
</html>