一、JavaScript介绍
javascript主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行JavaScript代码
js是弱类型,Java是强类型
弱类型:就是类型可变
强类型:就是定义变量的时候,类型已经确定,不可以改变
二、JavaScript和html代码的结合方式
第一种方式:只需要在head标签中,或者body标签中,使用script标签来书写JavaScript代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /*alert是js语言提供的一个警告框函数 * 它可以接受任意类型的参数,这个参数就是警告框的提示信息 * */ alert("hello world!") </script> </head> <body> </body> </html>
第二种方式:使用script标签引入 单独的JavaScript代码文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- src属性专门用来引入js文件路径(可以是相对路径,也可以是绝对路径) script标签可以用来定义js代码,也可以用来引入外部的js文件,但是两个功能二选一。不能同时使用 --> <script type="text/javascript" src="1.js"></script> <script type="text/javascript"> alert("老好了!") </script> </head> <body> </body> </html>
执行的顺序是:从上到下。上面的代码是先执行1.js文件的代码,后执行“老好了” 的代码
三、变量
什么是变量?变量就是可以存放某些值的内存的命名
JavaScript的变量类型:
- 数值类型:number
- 字符串类型:string
- 对象类型:object
- 布尔类型:boolean
- 函数类型:function
JavaScript里特殊的值:
- undefined 未定义,所有js变量未赋予初始值的时候,默认值都是undefined
- null 空值
- NaN 全称是:Not a Number 非数字。非数值
JavaScript中的定义变量格式:
- var 变量名;
- var 变量名 = 值;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变量</title> <script type="text/javascript"> var i=12; // i="abc" var b = "bbb" // typeof()是JavaScript语言提供的一个函数,返回的是数据类型 // alert(typeof(i)); alert(i*b); //NaN是非数字,非数值 </script> </head> <body> </body> </html>
------> 关系运算符
> < >= <= ! 和Java的是一样的,下面两个是和Java不一样的
等于:== 简单的做字面值的比较
全等于:=== 除了做字面值的比较之外,还会比较两个变量的数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var a = 12; var b = "12"; alert(a==b); //判断数值 alert(a===b); //除了判断数值,还判断类型 </script> </head> <body> </body> </html>
------> 逻辑运算符
且运算: &&
或运算: ||
取反运算:!
在Java中&&两个为真才为真,||一个为真就为真
在JavaScript语言中,所有的变量,都可以作为一个boolean类型的变量去使用
0,null,undefined,“”(空串)都认为是false
四、数组
js中数组的定义:
格式:
var 数组名 = []; //空数组
var 数组名 = [1,‘abc’ , true] ;//可以放不同类型的数值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组</title> <script type="text/javascript"> <!--数组的定义,赋值以及遍历--> var aa =[]; aa[0] =1; aa[1] ="abc"; aa[3]=true; // js中也可以和Java一样给数组赋值,不同的是js中可以直接给最大的下标赋值,js会自动补齐比最大的下标小的数组 // alert(aa.length); //长度为:4 // 遍历数组 for(var i=0;i<aa.length;i++){ alert(aa[i]); //数组的值分别为:1,"abc",undefined,true } // 从上面遍历的值可以得出:js的数组是可以存放任意数据类型,并且没有赋初始值的数组js会给一个默认值:undefined </script> </head> <body> </body> </html>
五、函数
1、第一种:可以使用function关键字来定义函数
语法 :function 函数名 (形式参数){函数体}
2、第二种:
var 函数名 = function(形式参数){函数体}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数</title> <script type="text/javascript"> <!--第一种函数定义方式--> function fun_1() { alert("简单的一个无参函数") } fun_1(); //js和Java一样,函数都是需要被调用才能执行 function fun_2(a,b) { alert("有参无返回 a--->"+a+",b--->"+b); } fun_2(1,"abc"); // 又返回的函数, function fun_3(num1,num2) { var sulter= num1+num2; return sulter; } alert(fun_3(12,13)); <!--第二种函数定义方式--> var fun_4 = function (num1, num2) { return num1+num2; } alert(fun_4(100,50)); </script> </head> <body> </body> </html>
注意:在Java中函数允许重载。但是在JS中函数的重载会直接覆盖掉上一次的定义
3、函数的arguments隐形参数(只在function函数内)
arguments参数相当于Java中的可变参数,其实就是一个数组,在js中不需要定义,可以直接哪来用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隐形参数</title> <script type="text/javascript"> <!--需求:编写一个函数,用于计算所有参数相加的值并返回--> /* * arguments其实就是一个数组,所以可以用length查看长度 * 也可以用arguments[0],arguments[1]这样取查看数组的值 * */ function sum() { // function sum(num1,num2) { // arguments和函数内的参数没有关系 var result = 0; for(var i=0;i<arguments.length;i++){ if(typeof(arguments[i]) == "number" ){ result += arguments[i]; } } return result; } alert(sum(1,2,3,4,5,6,"bbb",7,8,9,10)); </script> </head> <body> </body> </html>
六、JS中的自定义对象
1、Object形式的自定义对象
var 变量名= new Object(); //对象实例(空对象)
变量名.属性名 = 值;//定义一个属性
变量名.函数名= function(); //定义一个函数
对象的访问:
变量名.属性 / 函数名();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Object自定义对象</title> <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); obj.fun(); </script> </head> <body> </body> </html>
2、{}形式的自定义对象
对象的定义:
var 变量名 = {
属性名:值,//定义一个属性
函数名:function(){} //定义一个函数
}
对象的访问:变量名.属性 /函数名();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{}自定义对象</title> <script type="text/javascript"> var key = { name:"张三", age:18, fun:function () { alert("姓名:"+this.name+", 年龄:"+this.age) } } key.name; key.age key.fun(); </script> </head> <body> </body> </html>
七、JS中的事件
什么是事件?事件就是电脑输入设备与页面进行交互的响应。
常用的事件:
- onload 加载完成事件: 页面加载完成之后,常用于做页面js代码初始化操作(即:自动触发的一些操作)
- onclick 单击事件:常用于按钮的点击响应操作
- onblur失去焦点事件:常用于输入框失去焦点后验证其输入内容是否合法
- onchange 内容发生改变事件:常用于下拉列表和输入框内容发生改变后操作
- onsubmit 表单提交事件:常用于表单提交前,验证所有表单项是否合法
事件的注册分为静态注册和动态注册两种
什么是事件的注册(绑定)?其实就是告诉浏览器,当事件响应后要执行那些操作代码,叫事件注册或事件绑定
静态注册事件:通过html标签的事件属性直接赋值于事件响应后的代码,这种方式交静态注册
动态注册事件:指先通过js代码得到标签dom对象,然后再通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码,叫动态注册。
动态注册基本步骤:
- 获取标签对象
- 标签对象.事件名= function(){}
1、onload加载完成事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // onload事件的方法 function onloadFun() { alert("静态注册onload事件,所有代码"); } //onload事件动态注册。是固定写法 window.onload= function () { alert("动态注册onload事件"); } </script> </head> <!--<body onload="onloadFun()"> 静态onload调用方式--> <body> </body> </html>
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是js提供的一个对象(即:整个html页面) * get 获取 * Element 元素(即:标签) * By 通过 * Id id属性 * getElementById 通过id属性获取标签对象 * */ var btnObj=document.getElementById("btn01"); // 2、通过标签对象.事件名 =function(){} btnObj.onclick=function () { alert("这是一个动态注册onclick事件") } } </script> </head> <body > <button onclick="onclickFun()">按钮1</button> <button id="btn01">按钮2</button> </body> </html>
3、onblur焦点事件 -->鼠标离开后验证页面输入是否合法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //静态注册 function onblurFun() { console.log("静态注册失去焦点事件"); } //动态注册 window.onload = function () { // 1、获取标签对象 var onblurObj = document.getElementById("password"); // 2、通过标签对象.事件名 = function(){} onblurObj.onblur = function(){ console.log("动态注册失去焦点事件"); } } </script> </head> <body> 用户名:<input type="text" onblur="onblurFun()"/> <br /> 密码:<input id="password" type="text"/> </body> </html>
4、onchange 内容发生改变事件
5、onsubmit 表单提交事件 --->这两个和上面的写法一样
八、DOM模型
什么是DOM模型?文档对象模型,换言之:把页面中的标签,属性,文本,转换成对象来管理。即Documents对象
1、Documents对象理解
Document管理了所有的html文档内容;是一种树形结构,有层级关系;它让我们把所有的标签都对象化;可以通过Document访问所有的对象
2、Document对象中的方法介绍
注:document对象的三个查询方法,如果有id属性,优先使用getElementById方法来进行查询
如果没有ID属性,则优先使用getElementByName方法来进行查询,如果id属性和name属性都没有最后在按标签名查getElementByTagName
以上三个方法,一定要在页面加载完成以后执行,才能查询到标签对象
--->getElementById方法示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /* * 需求:当用户点击了校验按钮,要获取输入框中的内容,然后验证其是否合法 * 验证的规则:必须由字母,数字。下划线组成。并且长度为5-12 * */ function onclickFun() { //1、当操作标签的时候,一定要先获取标签的对象(这个对象就是dom对象[object HTMLInputElement]) var userObj=document.getElementById("username"); //2、通过对象来获取文本的值 var text =userObj.value; //3、如何验证字符串复合某个规则,需要用到正则表达式技术 -->/^w{5,12}$/ 表示:必须已数字,字母,下划线开头或结尾,长度为5~12的数字 var patt = /^w{5,12}$/; //5、获取span的对象 var userSpanObj =document.getElementById("userSpan"); //4、验证文本的内容是否复合规则 if(patt.test(text)){ // alert("用户名合法"); 一般网站不会直接弹出一个alert来提示,常规的是用span提示 /* * innerHTML 表示起始标签和结束标签的内容 * innerHTML 这个属性可读可写 * */ // userSpanObj.innerHTML="用户合法"; userSpanObj.innerHTML="<img src="right.png" width="15" height="15">"; }else { // alert("用户名不合法"); // userSpanObj.innerHTML="用户不合法"; userSpanObj.innerHTML="<img src="wrong.png" width="15" height="15">"; } } </script> </head> <body> <tr> <td>用户名:</td> <!--<td><input type="text" id="username" value="wsz"/></td> 文本里面的内容其实就是用value来控制的,如果在input标签里面写了此内容就是默认,不写的话,在页面的输入框内可以编写 但是实际会有 --> <td><input type="text" id="username" /></td> </tr> <tr> <td> <!--span是文本提示--> <span id="userSpan" style="color: red"> </span> </td> </tr> <tr> <td><button onclick="onclickFun()">校验</button> </td> </tr> </body> </html>
补充:JS的正则表达式 ---> JavaScript RegExp对象
RegExp对象的三个方法:test()、exec() 以及 compile()
- test() 方法检索字符串中的指定值。返回值是 true 或 false。
- exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
- compile() 方法用于改变 RegExp。
- compile() 既可以改变检索模式,也可以添加或删除第二个参数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>RegExp:是正则表达式(regular expression)的简写</title> <script type="text/javascript"> // var patt = new RegExp("e"); // alert(patt) //空对象执行结果:/(?:)/;有e参数的对象执行结果:/e/ -->从结果基本可以得出结论:RegExp对象其实/pattern/ var patt = /e/; //也是正则表达式对象 //表示要求字符串中是否包含a或b或c var patt_1 = /[abd]/; //查找方括号之间的任意字符 -->详细可参考w3cschool菜鸟教程.chm //表示要求字符串中是否包含a-z的小写字母 var patt_2 = /[a-z]/; //表示要求字符串中是否包含A-Z的大写字母 var patt_3 = /[A-Z]/; //表示要求字符串中是否包含1-9的数字 var patt_4 = /[1-9]/; //表示除abc外的所有字符 var patt_5 = /[^abc]/; // 元字符 // w表示十分包含字母,数字,下划线 W查找非字母,数字,下划线 var patt_6 = /w/; // d查找数字字符 D查找非数字字符 var patt_7 = /d/; // 量词 //至少包含一个a var patt_8 = /a+/; //是否包含0个或多个a var patt_9 = /a*/; //是否包含1个或0个 var patt_10 = /a/; //是否包含连续三个a var patt_11 = /a{3}/; //是否包含连续三个至少3个至多5个连续a var patt_12 = /a{3,5}/; //---> 这个取的是最小单位,即:只要有三个或者5个连续的都是true的 //^表示开头符合,$表示结尾符合 var patt_13 = /^a{3,5}$/; //---> 这个必须是已a开头,已a结尾,并且是至少三个至多5个 //所以这个的含义是必须是已字母,数字下划线开头和结尾,范围在5~12 var patt = /^w{5,12}$/; var msg = "cetaaaaaaaaayuai"; alert(patt_13.test(msg)) </script> </head> <body> </body> </html>
--->getElementByName方法示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function ckeckAll() { /* * 此方法目的是让复选框都选中 * document.getElementsByName();是根据指定的name属性查询返回多个标签对应的集合 * 这个集合的操作和数组一样 * 集合中的每个元素都是一个dom对象 * 这个集合中元素顺序(数组的下标)是他们在html页面从上到下的顺序 * */ var hobbies =document.getElementsByName("hobby"); // alert(hobbies[0].value); //值:c++ // alert(hobbies[0].checked);//checked表示复选框的选中状态,如果选中是true,不选中则是false;并且checked是可读可写的 for(var i=0;i<hobbies.length;i++){ hobbies[i].checked=true; } } function ckeckNo() { var hobbies =document.getElementsByName("hobby"); for(var i=0;i<hobbies.length;i++){ hobbies[i].checked=false; } } /* * 反选的意思是:如果选中,点击反选按钮则取消选择,如果不选,点击反选按钮则全部选择 * */ function ckeckReverse() { var hobbies =document.getElementsByName("hobby"); for(var i=0;i<hobbies.length;i++){ if(hobbies[i].checked){ hobbies[i].checked=false; }else { hobbies[i].checked=true; } } } </script> </head> <body> <tr> <th >---兴趣爱好---</th> <br /> <td><input type="checkbox" name="hobby" value="c++"/>C++</td><br /> <td><input type="checkbox" name="hobby" value="java"/>Java</td><br /> <td><input type="checkbox" name="hobby" value="python"/>Python</td><br /> <td><input type="checkbox" name="hobby" value="php"/>php</td><br /> <td><button onclick="ckeckAll()">全选</button></td> <td><button onclick="ckeckNo()">全不选</button></td> <td><button onclick="ckeckReverse()">反选</button></td> </tr> </body> </html>
--->getElementByTagName方法示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function ckeckAll() { /* * 如果html页面中既没有ID属性,又没有name属性,但是标签名一致,可以用标签名来获取(TagName) * 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> <tr> <th >---兴趣爱好---</th> <br /> <td><input type="checkbox" value="c++"/>C++</td><br /> <td><input type="checkbox" value="java"/>Java</td><br /> <td><input type="checkbox" value="python"/>Python</td><br /> <td><input type="checkbox" value="php"/>php</td><br /> <td><button onclick="ckeckAll()">全选</button></td> </tr> </body> </html>
--->createElement方法示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload = function () { /* * 现在需要我们使用JS代码来创建html标签,并显示在页面上。标签的内容就是:<div>帅哥,你好!</div> * * createElement通过给定的标签名创建标签对象 * * */ var divObj = document.createElement("div"); //在内存中<div> </div> var textNodeObj =document.createTextNode("帅哥,你好!"); //创建一个文本对象 divObj.appendChild(textNodeObj); //把文本对象添加给标签对象 document.body.appendChild(divObj); //把标签对象添加给body添加子元素 } /* * 一定要理解document对象:把页面中的标签,属性,文本转换成对象来管理,所以可以用document反向添加元素给html页面 * */ </script> </head> <body> </body> </html>
3、节点的常用属性和方法
节点就是标签对象