1、JavaScript 介绍
2、JavaScript与Html结合的第一种方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js01</title>
<script type="text/javascript">
//alert是JavaScript语言提供的一个警告框函数
//它可以接收任意类型的参数,这个参数就是警告框的提示信息
alert("hello,javascript!")
</script>
</head>
<body>
</body>
</html>
3、JavaScript与Html结合的第二种方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js02</title>
<!--
src 属性专门用来引入js文件路径(可以是相对路径,也可以是绝对路径)
script标签可以用来定义js代码,也可以用来引入js文件
但是,两个功能二选一使用,不能同时使用两个功能
-->
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript">
alert("see you againt");
</script>
</head>
<body>
</body>
</html>
1.js:
alert("hello,JavaScript!")
4、变量
什么是变量?变量是可以存放某些值得内存和命名
JavaScript的变量类型:
- 数值类型: number
- 字符串类型: string
- 对象类型: object
- 布尔类型: boolean
- 函数类型: function
JavaScript里的特殊的值:
- undefined 未定义,所有js变量未赋于初始值时,默认值都是undefined
- null 空值
- NAN 全程是:Not a Number 非数字、非数值
JS中的定义变量格式:
var 变量名;
var 变量名 = 值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var i;
i = 12;
//typeof是JavaScript语言提供的一个函数
// alert(typeof(i) );//number
i = "abc"
// alert(typeof(i));//String
var a = 12;
var b = "abc"
alert(a*b);//NaN是非数字,非数值
</script>
</head>
<body>
</body>
</html>
5、关系(比较)运算
等于: == 等于是简单的做字面值比较
全等于: === 除了做字面值比较之外。还会比较两个变量的数据类型
6、逻辑运算
且运算:&&
或运算:||
取反运算:!
在JavaScript语言中,所以的变量,都可以做为一个boolean类型的变量去使用
0、null、undefined、“”(空串)都认为是 flase;
/* &&运算
有两种情况:
第一种,当表达式全为真的时候。返回最后一个表达式的值
第二种情况:当表达式中,有一个为假的时候,返回第一个格为假的表达式的值
*/
/* ||或运算
第一种情况:当表达式全为假时。返回最后一个表达式的值
第二种情况:只有一个表达式为真,就会返回第一个为真的表达式的值
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/* &&运算
有两种情况:
第一种,当表达式全为真的时候。返回最后一个表达式的值
第二种情况:当表达式中,有一个为假的时候,返回第一个格为假的表达式的值
*/
var a = "abc";
var b = null;
var c = 12;
var d = 0;
// alert(a&&b);//null
// alert(c&&a);//abc
// alert(a&&c);//12
// alert(a&&d);//0
/* ||或运算
第一种情况:当表达式全为假时。返回最后一个表达式的值
第二种情况:只有一个表达式为真,就会返回第一个为真的表达式的值
*/
// alert(b||d);//0
// alert(a||b||d);//abc
alert(b||c);//12
</script>
</head>
<body>
</body>
</html>
7、数组定义方式
格式:
var 数组名 = []; //空数组
var 数组名 = [1,‘abc’,true]; //定义数组同时赋值元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var arr = [];//定义一个空数组
// alert(arr.length);//0
arr[0] = 12;
// alert( arr[0] );//12
// alert(arr.length);//1
//JavaScript 语言中的数组,只要我们通过数组下标赋值,那么最大的下标值,就会自动的给数组进行扩容
arr[2] = "abc";
// alert(arr.length);//3
// alert(arr[1]);//undefined
for (var i = 0; i < arr.length; i++) {
alert(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
8、函数
8.1、函数的第一种定义方式
用function 关键字来定义函数
使用的格式如下:
function 函数名(形参列表){
函数体
}
在 JavaScrript 语言中,如何定义带有返回值的函数?
只需要在函数体内直接使用return语句返回值即可!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//定义一个无参函数
function fun1() {
alert("无参函数fun()被调用了");
}
//函数调用才会被执行
// fun1();
function fun2(a,b) {
alert("有参函数fun2()被调用了,a = " + a + ",b = " +b);
}
// fun2(50,100);
//定义带有返回值的函数
function sum(a,b) {
var result = a +b;
return result;
}
alert(sum(50,100));
</script>
</head>
<body>
</body>
</html>
8.2、函数的第二种定义方式
使用格式:
var 函数名 = function(形参列表){ 函数体}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var fun1 = function () {
alert("无参函数fun1()被调用了");
}
// fun1();
var fun2 = function (a,b) {
alert("有参函数fun2()被调用了,a=" + a +",b=" +b)
}
// fun2(1,2);
var sum = function (num1,num2) {
var rs = num1 + num2;
return rs;
}
alert(sum(20,30));
</script>
</head>
<body>
</body>
</html>
8.3、函数的 arguments 隐形函数(在作用在function函数内)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var fun1 = function (a) {
alert(arguments[0]);
alert(arguments[1]);
alert(arguments[2]);
alert("a= " + a );
for (var i = 0; i <arguments.length ; i++) {
alert(arguments[i]);
}
alert("无参函数fun1()被调用了");
}
// fun1(1,"aa",true);
function sum(num1,num2){
var rs = 0;
for (var i = 0; i <arguments.length ; i++) {
if (typeof(arguments[i]) == "number" ){
rs += arguments[i];
}
}
return rs
}
alert(sum(1,2,3,"abc",4,5,6,7,8));
</script>
</head>
<body>
</body>
</html>
9、JS中的自定义对象
9.1、Object 形式的自定义对象
对象的定义:
var 变量名 = new Object(); //对象实例(空对象)
变量名.属性名 = 值 //定义一个属性
变量名.函数名 = function(){} //定义一个函数
对象的访问:
变量名.属性 /函数名();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var obj = new Object();
obj.name = "华仔";
obj.age = 18;
obj.fun = function () {
alert("姓名:"+this.name +",年龄:" + this.age);
}
alert(obj.fun());
</script>
</head>
<body>
</body>
</html>
9.2、{}花括号形式的自定义对象
对象的定义:
var 变量名 = {
属性名: 值, //定义一个属性
属性名:值,//定义一个属性
函数名:function(){} //定义一个函数
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var obj = {
name: "abc",
age: 18,
fun: function () {
alert("name:" + this.name + ",age:" + this.age);
}
};
obj.fun();
</script>
</head>
<body>
</body>
</html>
10、js中的事件
什么是事件?事件是电脑输入设备与页面进行交互的响应。我们称之为事件
常用的事件:
onload 加载完成事件: 页面加载完成之后,常用于做页面js代码初始化操作。
onclick 单击事件: 常用于按钮的点击响应操作。
onblur 失去焦点事件: 常用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件: 常用于下拉列表和输入框内容发生改变后操作。
onsubmit 表单提交事件: 常用于表单提交前,验证所有表单项是否合法。
事件的注册又分为静态注册和动态注册两种:
10.1、onload事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onloadfun(){
alert("静态注册onload事件,所以代码");
}
window.onload = function () {
alert("动态注册的onload事件");
}
</script>
</head>
<!--静态注册onload事件
onload事件是浏览器解析完页面之后就会自动触发的事件
<body οnlοad="onloadfun();">
-->
<body>
</body>
</html>
10.2、onclick事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册onclick事件
function onclickfun() {
alert("静态注册onclick事件");
}
//动态注册onclick事件
window.onload = function () {
//1 获取标签对象
/*
* document 是JavaScript语言提供的一个对象(文档)
* get 获取
* Element 元素
* By 通过。。 由。。经。。
* Id id属性
* */
var btnobj = document.getElementById("btn1");
//通过标签对象.事件名 = function(){}
btnobj.onclick = function () {
alert("动态注册onclick事件");
}
}
</script>
</head>
<body>
<button onclick="onclickfun();">按钮1</button>
<button id="btn1">按钮2</button>
</body>
</html>
10.3、onblur事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册失去焦点事件
function onblurfun() {
//console是控制台对象,是由Javascript语言提供,专门用来向浏览器的控制器打印输出,用来测试使用
//log() 是打印的方法
console.log("静态注册失去焦点事件");
}
//动态注册失去焦点事件
window.onload = function () {
//1.获取标签对象
var passwordobj = document.getElementById("password");
//2.通过标签对象.事件名 = function(){}
passwordobj.onblur = function () {
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurfun();" /><br/>
密码:<input id="password" type="text" />
</body>
</html>
10.4、onchange事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册onchange事件
function onchangefun() {
alert("女神已经改变了");
}
//动态注册onchange事件
window.onload = function () {
//1.获取标签对象
var sel01obj = document.getElementById("sel01");
//2.标签对象.事件名 = function(){}
sel01obj.onchange = function () {
alert("动态注册onchange事件");
}
}
</script>
</head>
<body>
请选择你的女神:
<select onchange="onchangefun();">
<option>--女神--</option>
<option>--女神1--</option>
<option>--女神2--</option>
<option>--女神3--</option>
</select>
请选择你的男神:
<select id="sel01" onchange="onchangefun();">
<option>--男神--</option>
<option>--男神1--</option>
<option>--男神2--</option>
<option>--男神3--</option>
</select>
</body>
</html>
10.5、onsubmit事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册表单提交事务
function onsubmitfun() {
//要验证所有表单项是否合法,如果有一个不合法就阻止表单提交
alert("静态注册表单事件,---表单不合法--");
return false;
}
//动态注册表单提交事务
window.onload = function () {
//1.获取标签对象
var form01obj = document.getElementById("form01");
//2.通过标签对象.事件名 = function(){}
form01obj.onsubmit = function () {
alert("动态注册表单事件,--表单不合法--");
return false;
}
}
</script>
</head>
<body>
<!--return false 可以阻止 表单提交-->
<form action="https://www.baidu.com/" method="get" onsubmit="return onsubmitfun();" >
<input type="submit" value="静态注册" / >
</form>
<form id="form01" action="https://www.baidu.com/" >
<input type="submit" value="动态注册" >
</form>
</body>
</html>
11、DOM 模型
11.1、Document对象
11.2、Document 对象中的方法介绍
11.3、getElementById 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 需求 当用户点击了校验按钮,要获取输出框中的内容,然后验证其是否合法。
* 验证的规则是:必须由字母、数字、下划线组成,并且长度是5到12位
* */
function onclickfun() {
// 1 当我们要操作一个标签时,一定要先获取这个标签的对象
var usernameobj = document.getElementById("username");
var usernameText = usernameobj.value;
//如何 验证 字符串,符合某个规则,需要使用到正则表达式技术
var patt = /^\w{5,12}$/;
/*
* test()方法用于测试某个字符串,是不是匹配我的规则
* 匹配就返回true,不匹配就返回false
* */
if (patt.test(usernameText)){
alert("用户名合法");
}else {
alert("用户名不合法");
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="wzg"/>
<button onclick="onclickfun()">校验</button>
</body>
</html>
11.3 getElementsByName 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//全选
function checkAll() {
//让所有复选框都选中
//document.getElementsByname();是根据 指定的name属性查询返回多个标签对象的集合
//这个集合的操作和数组一样
//集合中每个元素都是dom对象
//这个集合中的元素顺序是他们在html页面从上到下的顺序
var hobbies = document.getElementsByName("hobby");
//checked表示复选框的选中状态,如果选中是true,不选中是false
//checked 这个属性可读,可写
for (var i = 0; i <hobbies.length ; i++) {
hobbies[i].checked = true;
}
}
//全不选
function checkNo() {
var hobbies = document.getElementsByName("hobby");
//checked表示复选框的选中状态,如果选中是true,不选中是false
//checked 这个属性可读,可写
for (var i = 0; i <hobbies.length ; i++) {
hobbies[i].checked = false;
}
}
//反选
function checkReverse() {
var hobbies = document.getElementsByName("hobby");
//checked表示复选框的选中状态,如果选中是true,不选中是false
//checked 这个属性可读,可写
for (var i = 0; i <hobbies.length ; i++) {
hobbies[i].checked = !hobbies[i].checked;
// if (hobbies[i].checked){
// hobbies[i].checked = false;
// }else {
// hobbies[i].checked = true;
// }
}
}
</script>
</head>
<body>
你的兴趣爱好是:
<input type="checkbox" name="hobby" checked="checked">java
<input type="checkbox" name="hobby">c++
<input type="checkbox" name="hobby">js
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>
11.3 getElementsByTagName 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//全选
function checkAll() {
//document.getElementsByTagName("input");是按照指定标签名进行查询并返回集合
//这个集合的操作跟数组一样
//集合中都是dom对象
//集合中元素顺序 是他们在html页面中从上到下的顺序
var inputs = document.getElementsByTagName("input");
for (var i = 0; i <inputs.length ; i++) {
inputs[i].checked = true;
}
}
</script>
</head>
<body>
你的兴趣爱好是:
<input type="checkbox" checked="checked">java
<input type="checkbox" >c++
<input type="checkbox" >js
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>
12、正则表达式
13、两种常见的验证提示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 需求 当用户点击了校验按钮,要获取输出框中的内容,然后验证其是否合法。
* 验证的规则是:必须由字母、数字、下划线组成,并且长度是5到12位
* */
function onclickfun() {
// 1 当我们要操作一个标签时,一定要先获取这个标签的对象
var usernameobj = document.getElementById("username");
var usernameText = usernameobj.value;
//如何 验证 字符串,符合某个规则,需要使用到正则表达式技术
var patt = /^\w{5,12}$/;
var usernameSpanObj = document.getElementById("usernamespan");
//innerHTML 表示起始标签和结束标签中的内容
//innerHTML 这个属性可读,可写
usernameSpanObj.innerHTML = "可读可写!";
/*
* test()方法用于测试某个字符串,是不是匹配我的规则
* 匹配就返回true,不匹配就返回false
* */
if (patt.test(usernameText)){
// usernameSpanObj.innerText = "用户名合法";
usernameSpanObj.innerHTML ="<img src=\"7.png\" width=\"18\" height=\"18\" >" ;
}else {
usernameSpanObj.innerText = "用户名不合法";
usernameSpanObj.innerHTML ="<img src=\"8.png\" width=\"18\" height=\"18\" >" ;
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="wzg"/>
<span id="usernamespan" style="color: red">
</span>
<button onclick="onclickfun()">校验</button>
</body>
</html>