JavaScript
介绍
Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行JavaScript代码。JS是Netscape网景公司的产品,最早取名为Livescript;为了吸引更多java程序员。更名为Javascript。
JS是弱类型,Java是强类型。
特点:
- 交互性(信息的动态交互)
- 安全性(不允许直接访问本地硬盘)
- 跨平台性(只要可以解释JS的浏览器都可以执行,和平台无关)
JavaScript和html代码的结合方式
第一种方式
只需要在head标签中,或者在body标签中,使用script标签来书写JavaScript代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//它可以接收任意类型的参数,这个参数就是警告框的提示内容
alert("Hello JavaScript!");
</script>
</head>
<body>
</body>
</html>
第二种方式
使用script标签引入单独的JavaScript代码文件
1.js
alert("Hello JavaScript!");
hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--需要使用script引入外部的js文件来执行-->
<script type="text/javascript" src="1.js"></script><!--src属性专门引入js文件路径-->
</head>
<body>
</body>
</html>
script标签可以用来定义js代码,也可以用来引入js文件。但这两个功能只能二选一使用,不能同时使用两个功能
变量
JavaScript的变量类型:
- 数值类型:number
- 字符串类型:string
- 对象类型:object
- 布尔类型:boolean
- 函数类型:function
JavaScript特殊的值:
undefined:未定义,所有js变量未赋予初始值的时候,默认值都是undefined。
null:空值
NAN:全称是Not a Number。非数字。非数值
JS中的定义变量格式:
var 变量名 = 值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var i =12;
//typeof()是JavaScript语言提供的一个函数,它可以去变量的数据类型返回
//typeof(i); //number
var a = 12;
var b = "abc";
alert(a*b); //NAN,非数字,非数值。
alert(i);
</script>
</head>
<body>
</body>
</html>
关系(比较)运算
等于:== 是简单的数值比较
全等于:=== 数值与数据类型全部相等
<script type="text/javascript">
var a = "12";
var b = 12;
alert(a == b)//true
alert(a === b)//false
</script>
逻辑运算
且运算:&&
或运算:||
取反运算:!
在JavaScript语言中,所有的变量,都可以作为一个boolean类型的变量去使用。
0、null\undefined、“”(空串)都认为是false
数组
定义方式
格式
var 数组名 = []; //空数组
var 数组名 = [1,'abc',true];//定义数组同时赋值
JavaScript语言中的数组,只要我们通过数组下标赋值,那么最大的下标值,就会自动的给数组做扩容操作。
for(var i = 0;i<array.length;i++){
alert(array[i]);
}
函数(重点)
第一种方式
使用function关键字来定义函数。
格式
function 函数名(形参列表){
函数体
}
代码实现
<script type="text/javascript">
function fun(){
alert("无参函数");
}
fun() //函数只有被调用了才会执行
function fun1(a,b){
alert("有参函数,a="+a+"b="+b);
}
fun1(123,"abc");
function sum(num1,num2){//定义带有返回值的函数
var ret = num1+num2;
return ret;
}
alert(sum(1,2));
</script>
第二种方式
格式:
var 函数名 =function(形参列表){
函数体
}
代码实现
<script type="text/javascript">
var fun = function(){
alert("无参函数");
}
fun();
var fun1 = function(a,b){
alert("有参函数,a="+a+"b="+b);
}
fun1(123,"abc")
var sum = function(num1,num2){
return num1 + num2;
}
alert(fun3(100,200));
</script>
注:JS不允许重载,会直接覆盖掉上一次的定义
函数的arguments隐形参数(只在function函数内)
含义:在function函数中不需要定义,可以直接用来获取所有参数的变量。JS中的隐形参数与Java的可变长参数一样,操作类似数组
。
代码演示
<script type="text.javascript">
function fun(){
//alert(arguments.length); //参数个数
alert(argument[0]);//123
alert(argument[1]);//abc
alert("无参数函数");
}
fun(123,"abc");
</script>
编写一个函数,返回所有参数相加的和
function sum(num1,num2){
var ret = 0;
for(var i = 0;i<arguments.length;i++){
if(typeof(argument[i]) == "number"){//防止误输入其他类型,导致结果异常
ret+=argumrnt[i];
}
}
return ret;
}
alter(sum(1,2,3,"andj",4,5,6,7,8,9,10));
自定义对象
Object形式
var 变量名 = new Object(); //对象实例(空对象)
变量名.属性名 = 值;//定义一个属性
变量名.函数名 = function(){} //定义一个函数
对象访问:
变量名.属性/函数名();
代码演示
<script type="text/javascript">
var obj = new Object();
obj.name="小明";
obj.age = 18;
obj.fun = function(){
alert("姓名:"+this.name+" 年龄:"+this.age);
}
alert(obj.name);//小明
alert(obj.age);//18
obj.fun();
</script>
花括号形式
代码演示
格式:
var 变量名 = {
属性名:值,
属性名:值,//定义一个属性
函数名:function(){}//定义一个函数
};
var obj = {
name:"小明",
age:18;
fun:function(){
alert("姓名:"+this.name+" 年龄:"+this.age);
}
};
alert(obj.name);
obj.fun();
事件
定义:事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常见的事件:
onload 加载完成事件:页面加载完成之后,常用于做页面js代码初始化操作。
onclick 单击事件:常用于按钮的点击响应操作。
onblur 失去焦点事件:常用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件:常用于下拉列表和输入框内容发生改变操作。
onsubmit 表单提交事件:常用于表单提交前,验证所有表单项是否合法。
事件的注册(绑定)
定义:就是通知浏览器,当事件响应后要执行哪些操作代码,叫事件注册或绑定。
静态注册
通过html标签的事件属性直接赋于事件响应后的代码,这种方式叫做静态注册。
动态注册
先通过js代码得到标签的dom对象,然后再通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码。
基本步骤:
- 获取标签对象
- 标签对象.事件名 = function()
onload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload事件</title>
<script type="text/javascript">
//onload事件的方法
function fun(){
alert("Hello,静态注册");
}
//onload事件动态注册,是固定写法
window.onload = function(){
alert("Hello,动态注册");
}
</script>
</head>
<!--静态注册onload事件-->
<!--<body onload="fun()">-->
</body>
</html>
onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onclick事件</title>
<script type="text/javascript">
function fun(){
alert("静态注册onclick事件")
}
//动态注册onclick事件
window.onload = function(){
//1.获取标签对象
/*
* document 是JavaScript语言提供的一个对象(文档)
* get 获取
* Element 元素(标签)
* By 通过... 由...经...
* Id id属性
*
* getElementById通过id属性获取标签对象
* */
var button01 = document.getElementById("");
//alert(button01);
//2.通过标签对象.事件名 = function(){}
button01.onclick = function() {
alert("动态注册onclick事件");
}
}
</script>
</head>
<body>
<!--静态注册onclick事件-->
<button onclick="fun()">按钮1</button>
<button id="button01">按钮2</button>
</body>
</html>
onblur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onblur事件</title>
<script type="text/javascript">
//静态注册失去焦点事件
function fun(){
//console是控制台对象,是由JavaScript语言提供,专门用来向浏览器的控制器打印输出,用于测试使用。
//log()是打印的方法
console.log("静态注册失去焦点事件");
}
//动态注册onblur事件
window.onload = function(){
//1.获取标签对象
var obj = document.getElementById("password");
//2.通过标签对象,事件名 = function(){};
obj.onblur = function(){
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="fun();"><br/>
密码:<input id="password" type="text"><br/>
</body>
</html>
onchange
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onchange事件</title>
<script type="text/javascript">
function fun(){
alert("已切换");
}
window.onload = function(){
//1.获取标签对象
var obj = document.getElementById("selectObj");
//2.通过标签对象.事件名 = function(){}
obj.onchange = function(){
alert("成绩已修改");
}
}
</script>
</head>
<body>
请选择需要修改成绩的学生:
<!--静态注册onchange事件-->
<select onchange="fun()">
<option>小明</option>
<option>小红</option>
<option>小王</option>
<option>李华</option>
</select>
请选择需要修改后的成绩等级:
<!--静态注册onchange事件-->
<select id="selectObj">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</body>
</html>
onsubmit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmit事件</title>
<script type="text/javascript">
//静态注册表单提交事件
function fun(){
//要验证所有表单项是否合法,如果有一个不合法就组织表单提交
alert("静态注册表单提交事件,发现不合法事件,提交失败");
return false;
}
window.onload = function(){
//1. 获取标签对象
var obj = document.getElementById("formId");
//2.通过标签对象.事件名 = function(){}
obj.onsubmit = function(){
alert("动态注册表单提交事件,发现不合法事件,提交失败");
return false;
}
}
</script>
</head>
<body>
<!--return false可以阻止表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return fun();">
<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="formId">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>
DOM模型
DOM全称是Document Object Model文档对象模型。把文档中的标签,属性,文本,转换成为对象管理。
Document是一种树形结构的文档,有层级关系,把所有的标签都对象化,管理了所有的HTML文档的内容,通过document访问所有的对象标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM模型</title>
<script type="text/javascript">
function fun(){
//1.当要操作一个标签的时候,一定要先获取这个标签对象。
var obj = document.getElementById("username");
//[object HTMLInputElement] 是dom对象
var text = obj.value;
//使用正则表达式技术来验证字符串是否符合某个规则。
var patt = /^\w{5,12}$/;//长度为5到12位,必须由字母、数字。
if(patt.test(text)){
alert("用户名合法!");
}else{
alert("用户名不合法!");
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value=""/>
<button onclick="fun()">校验</button>
</body>
</html>
正则表达式
两种常见的验证提示效果(以输入用户名为例)
第一种:
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一种验证提示效果</title>
<script type="text/javascript">
function fun(){
//1.当要操作一个标签的时候,一定要先获取这个标签对象。
var obj = document.getElementById("username");
//[object HTMLInputElement] 是dom对象
var text = obj.value;
//使用正则表达式技术来验证字符串是否符合某个规则。
var patt = /^\w{5,12}$/;//长度为5到12位,必须由字母、数字。
var usernameSpan = document.getElementById("usernameSpan");
//innerHTML表示起始标签和结束标签中的内容
//innerHTML属性可读可写
if(patt.test(text)){
usernameSpan.innerHTML = "用户名合法!";
}else{
usernameSpan.innerHTML = "用户名应由5~12个字母或数字构成";
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value=""/>
<span id="usernameSpan" style="color:red;"></span>
<button onclick="fun()">校验</button>
</body>
</html>
运行结果如下图,当输入不合法时:
当输入合法时:
第二种:
代码实现(需要一张打勾和一张打叉的图片)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二种验证提示效果</title>
<script type="text/javascript">
function fun(){
//1.当要操作一个标签的时候,一定要先获取这个标签对象。
var obj = document.getElementById("username");
//[object HTMLInputElement] 是dom对象
var text = obj.value;
//使用正则表达式技术来验证字符串是否符合某个规则。
var patt = /^\w{5,12}$/;//长度为5到12位,必须由字母、数字。
var usernameSpan = document.getElementById("usernameSpan");
if(patt.test(text)){
usernameSpan.innerHTML = "<img src=\"right.png\" width=\"20\" heigh=\"20\" align=\"center\">";
}else{
usernameSpan.innerHTML = "<img src=\"wrong.png\" width=\"20\" heigh=\"20\" align=\"center\">用户名应由5~12位字母或数字组成";
}
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value=""/>
<span id="usernameSpan" style="color:red;"></span>
<button onclick="fun()">校验</button>
</body>
</html>
运行结果如下图,当输入不合法时:
当输入合法时:
createElement方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>createElement方法</title>
<script type="text/javascript">
window.onload = function(){
var divObj = document.createElement("div");//在内存中<div></div>
var text = document.createTextNode("Hello,JavaScript!");
divObj.appendChild(text);//等价于:divObj.innerHTML = "Hello,JavaScript!"
//添加子元素
document.body.appendChild(divObj);
}
</script>
</head>
<body>
<div></div>
</body>
</html>
getElementsByName方法
此方法是根据指定的name属性查询返回多个标签对象集合,该集合的操作与数组一样,集合中的每个元素都是dom对象,元素顺序是html页面从上到下的顺序
代码演示(全选、全不选、反选)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByName方法</title>
<script type="text/javascript">
//全选
function SelectAll(){
var hobbies = document.getElementsByName("hobby");
//check‘ed表示复选框的选中状态,选中为true,反之为false,该属性可读可写
for(var i = 0;i < hobbies.length; i++){
hobbies[i].checked = true;
}
}
//全不选
function UnselectAll(){
var hobbies = document.getElementsByName("hobby");
for(var i = 0;i < hobbies.length; i++){
hobbies[i].checked = false;
}
}
//反选
function SelectReverse() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = !hobbies[i].checked;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="c"/>C
<input type="checkbox" name="hobby" value="c++"/>C++
<input type="checkbox" name="hobby" value="java"/>Java
<input type="checkbox" name="hobby" value="js"/>JavaScript
<input type="checkbox" name="hobby" value="go"/>Go
<input type="checkbox" name="hobby" value="python"/>Python <br/>
<button onclick="SelectAll()">全选</button>
<button onclick="UnselectAll()">全不选</button>
<button onclick="SelectReverse()">反选</button>
</body>
</html>
getElementsByTagName方法
此方法是按照指定标签名来进行查询并返回集合,与getElementsByName方法相似
代码演示(全选)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByTagName方法</title>
<script type="text/javascript">
//全选
function SelectAll(){
var inputs = document.getElementsByTagName("input");
for(var i = 0;i < inputs.length; i++){
inputs[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="c"/>C
<input type="checkbox" name="hobby" value="c++"/>C++
<input type="checkbox" name="hobby" value="java"/>Java
<input type="checkbox" name="hobby" value="js"/>JavaScript
<input type="checkbox" name="hobby" value="go"/>Go
<input type="checkbox" name="hobby" value="python"/>Python <br/>
<button onclick="SelectAll()">全选</button>
</body>
</html>
注:document对象的三个查询方法,如果有id属性,优先使用getElementById方法进行查询;若没有id属性,则优先使用getElementsByName方法来进行查询;若两者都没有,才使用getElemenrsByTagName
以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。
节点的常用属性和方法