javascript基本知识
一。介绍:
1.JavaScript是一种专门在浏览器编译并执行的编程语言
2.JavaScript处理用户与浏览器之间请求问题
3.JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言
二。弱类型编程语言风格 VS 强类型编程语言风格
1.强类型编程语言风格：认为对象行为应该受到其修饰类型严格约束。
Java采用【强类型编程语言风格】对【面向对象思想】来进行实现的编程语言
class Student{ public String sname; public void sayHello(){ System.out.print("hello world"); } } Student stu = new Student(); stu.sname="mike"; stu对象能够调用属性只有sname stu.sayHello(); stu对象能够调用方法只有sayHello() stu.sid =10; // 在Java认为是语法错误，修饰stu对象的Student类型没有提供这个属性
2.弱类型编程语言风格： 认为对象行为不应该受到其修饰类型约束。可以根据实际需要来决定
对象可以调用属性和方法
JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言
var stu = new Object();//stu对象相当于【阿Q】 stu.car = "劳斯莱斯";//合法 stu.play = function (){ return "天天打游戏"} stu.play();
三。JavaScript中变量声明方式:
1.命令格式:
var 变量名;
var 变量名 = 值;
var 变量名1,变量名2=值；
2.注意：
在JavaScript变量/对象，在声明不允许指定【修饰类型】
只能通过var来进行修饰
四。JavaScript中标识符命名规则:
1.标识符只能由四种符号组成 英文字母，数字 , 下划线，美元符号($)
2.标识符首字母不能以"数字"开头
3.标识符不能采用JavaScript关键字 比如 var
五。JavaScript数据类型：
1.分类： 基本数据类型 & 高级引用数据类型
2.基本数据类型：数字类型（number）,字符串类型(string),布尔类型(boolean)
3.数字类型（number）：JavaScript中将整数与小数合称为number类型
4.字符串类型(string)：JavaScript中字符与字符串合称为string类型
JavaScript字符或则字符串既可以使用''又可以使用""
5.布尔类型(boolean): JavaScript中boolean类型的值只有true或则false
<script type="text/javascript">
var num1 = 100;
var num2 =19.80;
var num3 ='abcd';
var num4 ="a";
var num5 =true
var num6 =false
// typeof 变量名 ; 返回当前变量的数据类型名称
window.alert("num1的数据类型 "+typeof(num1));//num1的数据类型 number
window.alert("num2的数据类型 "+typeof num2);//num2的数据类型 number
window.alert("num3的数据类型 "+typeof num3);//num3的数据类型 string
window.alert("num4的数据类型 "+typeof num4);//num3的数据类型 string
window.alert("num5的数据类型 "+typeof num5);//num5的数据类型 boolean
window.alert("num6的数据类型 "+typeof num6);//num5的数据类型 boolean
</script>
6.高级引用数据类型:
object类型
function类型
7.object类型： JavaScript中所有通过【构造函数】生成的对象都是object类型
8.function类型： 相当于Java中（java.lang.reflect.Method）
JavaScript所有函数都是function类型
<script type="text/javascript">
var obj1 = new Date(); //返回一个日期对象
//
var obj2 = new Array();//返回一个数组对象
//
var obj3 = new Object();//返回object类型对象
//
window.alert("obj1数据类型 "+typeof obj1);//obj1数据类型 object
window.alert("obj2数据类型 "+typeof obj2);//obj2数据类型 object
window.alert("obj3数据类型 "+typeof obj3);//obj3数据类型 object
//声明一个函数，函数名fun1
function fun1(){
window.alert("fun1 is run...")
}
window.alert("fun1的数据类型 "+typeof fun1);//fun1的数据类型 function
</script>
JavaScript是弱类型编程语言，根据变量赋值内容来判断变量数据类型
JavaScript中变量的数据类型可以根据赋值内容来进行动态改变
六。JavaScript中特殊【值】
1.undefined: JavaScript中所有变量在没有赋值时，其默认值都是undefined
由于JavaScript根据变量的赋值来判断变量类型，此时由于变量没有赋值因此JavaScript无法判断当前变量数据类型，
此时返回也是undefiled,因此初学者将undefined也理解为是一种数据类型这种理解是错误
2.null： JavaScript中当一个对象赋值为null时，表示对象引用了一个【空内存】
这个空内存既不能存储数据也不能读取数据。
此时这个对象数据类型，在JavaScript依然认为是object类型
3.NaN： JavaScript中当一个变量赋值为NaN，表示变量接收了一个【非法数字】（123 合法数字 abc123 非法数字）
此时这个变量数据类型，在JavaScript依然认为number类型
4.infinity： JavaScript中当一个变量赋值为infinity，表示变量接收了一个【无穷大数字】
此时这个变量数据类型，在JavaScript依然认为number类型（例如1/0）
<script type="text/javascript">
var num1; //num1的默认值 undefined
var num2 = undefined;
var num3 = null;
var num4 = null;
var num5 = NaN;
var num6 = parseInt("abc123")
var num7 =1/0; //得到一个无穷大的值 infinity
window.alert("num1的值 "+num1+" num1 的数据类型 "+typeof num1);//num1的值 undefined num1 的数据类型 undefined
window.alert("num2的值 "+num2+" num2的数据类型 "+typeof num2);//num2的值 undefined num2的数据类型 undefined
window.alert("num3的值 "+num3+" num3的数据类型 "+typeof num3);//num3的值 null num3的数据类型 object
window.alert("num4的值 "+num4+" num4的数据类型 "+typeof num4);//num4的值 null num4的数据类型 object
window.alert("num5的值 "+num5+" num5的数据类型 "+typeof num5);//num5的值 NaN num5的数据类型 number
window.alert("num6的值 "+num6+" num6的数据类型 "+typeof num6);//num6的值 NaN num6的数据类型 number
window.alert("num7的值 "+num7+" num7的数据类型 "+typeof num7);//num7的值 Infinity num7的数据类型 number
</script>
七。JavaScript中控制语句
JavaScript中控制语句与Java中控制语句语法格式完全一致
八。JavaScript中函数声明方式
1.命令格式:
function 函数名(形参名1，形参名2){ JavaScript命令行 JavaScript命令行 return 将函数运行结果进行返回 }
2.注意:
1)JavaScript中，所有函数在声明时，都需要使用function进行修饰
2)JavaScript中，所有函数在声明时，禁止指定函数返回数据类型
3)JavaScript中，所有函数在声明时，形参既不能使用var来修饰也不能使用数据类型修饰
4)JavaScript中，所有函数在声明时，如果有返回值，此时应该通过return进行返回
九。JavaScript函数调用方式:
1.浏览器并不会自动调用JavaScript函数
2.可以通过命令行方式来调用Java函数
3.通过绑定在HTML标签上监听事件通知浏览器调用指定函数进行处理
十、 JavaScript作用
帮助浏览器对用户提出请求进行处理
十一、DOM对象
1.DOM = Document Object Model， 【文档模型对象】
2.JavaScript不能直接操作HTML标签，只能通过HTML标签关联的DOM对象对HTML标签下达指令
十二、DOM对象生命周期
1.浏览器在接收到html文件之后，将HTML文件标签加载到浏览器缓存中，
每当加载一个html标签时候，自动为这个标签生成一个实例对象，这个实例对象就是DOM对象
2.在浏览器关闭之前或浏览器请求其他资源文件之前，本次生成的DOM对象一直存活在浏览器缓存中
3.在浏览器关闭时候，浏览器缓存中dom对象将要被销毁
4.在浏览器请求到新资源文件后，浏览器缓存中原有的dom对象将会被覆盖
十三、document对象
1.document对象被称为【文档对象】
2.document对象用于在浏览器内存中根据定位条件定位DOM对象
1.在浏览器将网页中所有标签加载完毕后，在内存中将使用【树形结构】存储这些DOM对象。在树形结构生成完毕后由浏览器生成一个document对象管理这颗树（DOM树），在浏览器将接收网页中标签加载完毕后，自动在浏览器内存生成一个document对象
2.一个浏览器运行期间，只会生成一个document对象
3.在浏览器关闭时，负责将document对象进行销毁
三个例子描述：
1.根据html标签的id属性值定位DOM对象
命令格式 var domObj = document.getElementById("id属性值")； 举个栗子 var domObj = document.getElementById("one")； 通知document对象定位id属性等于one的标签关联的DOM对象 <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //定义方法,实现特定功能,关键字function //方法名func1 function func(e){//方法体实现代码 //获得控件的值 var inputValue1 = document.getElementById("in1").value; var inputValue2 = document.getElementById("in2").value; var formula = inputValue1+e+inputValue2; //eval函数,将字符串按照代码执行,返回结果 alert(eval(formula)); } </script> </head> <body> 第一个数 <input type="text" id="in1"/><br> 第二个数 <input type="text" id="in2"/><br> <!--onclick 单击事件,alert提示框 调用方法时,写入方法名 --> <input value="+" type="button" onclick="func('+')"/> <input value="-" type="button" onclick="func('-')"/> <input value="/" type="button" onclick="func('/')"/> <input value="*" type="button" onclick="func('*')"/> </body>
2.根据html标签的name属性值定位DOM对象
命令格式 var domArray = document.getElementsByName("name属性值"); 举个栗子 <input type="checkbox" name="deptNo" value="10">部门10 <input type="checkbox" name="deptNo" value="20">部门20 <input type="checkbox" name="deptNo" value="30">部门30 var domArray = document.getElementsByName("deptNo"); //通知document对象将所有name属性等于deptNo的标签关联的DOM对象 //进行定位并封装到一个数组进行返回。 domArray就是一个数组存放 //本次返回的所有DOM对象 <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function fun1(){ var myArray = document.getElementsByName("deptNo"); for(var i=0;i<myArray.length;i++){ var domObj = myArray[i]; window.alert("部门"+domObj.value); } } </script> </head> <body> <input type="checkbox" name="deptNo" value="10">部门10 <input type="checkbox" name="deptNo" value="20">部门20 <input type="checkbox" name="deptNo" value="30">部门30<br/> <input type="button" value="获得所有name等于deptNo的标签value值" onclick="fun1()"> </body> </html>
3.根据html标签类型定位DOM对象
命令格式 var domArray = document.getElementsByTagName("标签类型名"); 举个栗子 var domArray = document.getElementsByTagName("p"); <p>段落标签</p> 通知document对象将所有段落标签关联的dom对象进行定位 并封装到一个数组返回 <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function fun1(){ var domArray = document.getElementsByTagName("p"); for(var i =0 ;i <= domArray.length;i++){ var domObj = domArray[i]; window.alert(domObj.innerText);//读取当前文字显示内容 } } </script> </head> <body> <div>这是第一个DIV</div> <p>这是第一个段落标签</p> <div>这是第二个DIV</div> <p>这是第二个段落标签</p> <div>这是第三个DIV</div> <p>这是第三个段落标签</p> <input type="button" value="定位所有段落标签文字显示内容" onclick="fun1()"/> </body>
十六、DOM对象对HTML标签属性操作
1.DOM对象对标签value属性进行取值与赋值操作
取值操作:
var domObj = document.getElementById("one");
var num = domObj.value;
赋值操作:
var domObj = document.getElementById("one");
domObj.value = "abc";
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function fun1(){ //1.得到用户在文本框输入内容 var content = document.getElementById("two").value; //2.将得到输入内容作为【文字显示内容】写入到DIV标签之间 document.getElementById("one").innerText =content; } </script> </head> <body> <center> <div id="one" style="background-color: antiquewhite;color:red;width: 200px;height: 200px"> </div> <input type="text" id="two"/> <input type="button" value="设置文字显示内容" onclick="fun1()"> </center> </body>
2.DOM对象对标签中【样式属性】进行取值与赋值操作
取值操作:
var domObj = document.getElementById("one");
//读取当前标签【背景颜色属性】值
var color = domObj.style.背景颜色属性
赋值操作:
var domObj = document.getElementById("one");
//通过DOM对象对标签中【背景颜色属性】进行赋值
domObj.style.背景颜色属性 = 值；
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function fun1(color){ //1.定位id编号等于one的标签对应的DOM对象 var domObj = document.getElementById("one"); //2.通过dom对象对当前标签【背景颜色样式属性】进行赋值 domObj.style.backgroundColor = color; } </script> </head> <body> <center> <div id="one" style="width: 300px;height: 300px;background-color: yellow"> </div> <input type="radio" name="two" onclick="fun1('yellow')">黄 <input type="radio" name="two" onclick="fun1('red')">红 <input type="radio" name="two" onclick="fun1('green')">绿 </center> </body>
3.DOM对象对标签中【状态属性】进行取值与赋值操作
状态属性： 状态属性的值都是boolean类型
disabled = true ; 表示当前标签不可以使用
disabled = false; 表示当前标签可以使用
checked: 只存在与radio标签与checkbox标签
checked = true ; 表示当前标签被选中了
checked = false; 表示当前标签未被选中
取值操作:
var domObj = document.getElementById("one");
var num = domObj.checked;
赋值操作:
var domObj = document.getElementById("one");
domObj.checked = true;
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //通过标题行选中状态来控制数据行所有checkbox的选中状态 function fun1(){ //1.获得标题行上checkbox的checked属性值 var flag = document.getElementById("one").checked; //2.定位数据行所有的checkbox var domArray = document.getElementsByName("ck"); //3.标题行上checkbox的checked属性值依次赋值给数据行上checkbox for(var i=0;i<domArray.length;i++){ var domObj = domArray[i]; domObj.checked = flag; } } </script> </head> <body> <table border="2" align="center"> <tr> <td> <input type="checkbox" id="one" onclick="fun1()">全选/全不选 </td> <td> 职员姓名 </td> <td> 职员职位 </td> <td> 职员工资 </td> </tr> <tr> <td> <input type="checkbox" name="ck"/> </td> <td> MIKE </td> <td> 初级程序员 </td> <td> 10000 </td> </tr> <tr> <td> <input type="checkbox" name="ck"/> </td> <td> SMITH </td> <td> 高级程序员 </td> <td> 40000 </td> </tr> <tr> <td> <input type="checkbox" name="ck"/> </td> <td> KING </td> <td> 架构师 </td> <td> 50000 </td> </tr> </table> </body>
4. DOM对象对标签中【文字显示内容】进行赋值与取值
文字显示内容: 只存在于双目标签之间;<tr>100</tr>
取值操作:
var domObj = document.getElementById("one");
var num1 = domObj.innerText;
赋值操作:
var domObj = document.getElementById("one");
domObj.innerText = 值；
innerText与innerHTML 区别:
innerText与innerHTML都可以对标签文字显示内容属性进行赋值与取值
innerText只能接收字符串
innerHTML既可以接收字符串又可以接收html标签
innerText:
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function fun1(){ //1.得到用户在文本框输入内容 var content = document.getElementById("two").value; //2.将得到输入内容作为【文字显示内容】写入到DIV标签之间 document.getElementById("one").innerText =content; } </script> </head> <body> <center> <div id="one" style="background-color: antiquewhite;color:red;width: 200px;height: 200px"> </div> <input type="text" id="two"/> <input type="button" value="设置文字显示内容" onclick="fun1()"> </center> </body>
innerHTML:（里面可以写html语句）
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function fun1(){ //1.得到用户在文本框输入内容 var content = document.getElementById("two").value; //2.将得到输入内容作为【文字显示内容】写入到DIV标签之间 document.getElementById("one").innerHTML =content; } </script> </head> <body> <center> <div id="one" style="background-color: antiquewhite;color:red;width: 200px;height: 200px"> </div> <input type="text" id="two"/> <input type="button" value="设置文字显示内容" onclick="fun1()"> </center> </body>
十七、JavaScript监听事件
1.监听事件:
监听用户在何时以何种方式对当前标签进行操作。
当监听到相关行为时，通知浏览器调用对应JavaScript
函数对当前用户请求进行处理
2.监听事件分类:
1)监听用户何时使用鼠标操作当前标签
2)监听用户何时使用键盘操作当前标签
3.监听用户何时使用鼠标操作当前标签：
1） onclick : 监听用户何时使用鼠标【单击】当前标签
2） onmouseover: 监听用户何时将鼠标【悬停】当前标签上方
3） onmouseout : 监听用户何时将鼠标从当前标签上方【移开】
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function fun1(domObj){ domObj.style.backgroundColor="blue"; } function fun2(domObj){ domObj.style.backgroundColor="white"; } </script> </head> <body> <table border="2" align="center"> <tr> <td> <input type="checkbox" id="one" >全选/全不选 </td> <td> 职员姓名 </td> <td> 职员职位 </td> <td> 职员工资 </td> </tr> <!--this指向当前tr标签关联的DOM对象--> <tr onmouseover="fun1(this)" onmouseout="fun2(this)"> <td> <input type="checkbox" name="ck"/> </td> <td> MIKE </td> <td> 初级程序员 </td> <td> 10000 </td> </tr> <tr onmouseover="fun1(this)" onmouseout="fun2(this)"> <td> <input type="checkbox" name="ck"/> </td> <td> SMITH </td> <td> 高级程序员 </td> <td> 40000 </td> </tr> <tr onmouseover="fun1(this)" onmouseout="fun2(this)"> <td> <input type="checkbox" name="ck"/> </td> <td> KING </td> <td> 架构师 </td> <td> 50000 </td> </tr> </table> </body>
4） onfocus : 监听用户何时通过鼠标让当前标签获得【光标】
5） onblur : 监听用户何时通过鼠标让当前标签丢失【光标】
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //检测用户是否填写原始密码 function fun1(){ //1获得原始密码内容 var content = document.getElementById("one").value; if(content == ''){ document.getElementById("one").focus(); document.getElementById("font_1").innerHTML ="密码不能为空" }else{ document.getElementById("font_1").innerHTML ="*" } } //检测用户密码与重复密码是否一致 function fun2(){ //1获得原始密码内容 var content_1 = document.getElementById("one").value; //2.获得重复密码 var content_2 = document.getElementById("two").value; if(content_1 != content_2){ document.getElementById("two").focus(); document.getElementById("font_2").innerHTML ="两次输入密码不一致" }else{ document.getElementById("font_2").innerHTML ="*" } } </script> </head> <body> <center> <form action="/myWeb/user/add" method="get"> <table border="2"> <tr> <td>用户姓名</td> <td><input type="text" name="userName"/></td> </tr> <tr> <td>用户密码</td> <td><input type="password" name="password" id="one"/> <font id="font_1" style="color: red">*</font> </td> </tr> <tr> <td>重复密码</td> <td><input type="password" name="password" id="two" onfocus="fun1()" onblur="fun2()"/> <font id="font_2" style="color: red">*</font> </td> </tr> <tr> <td>用户性别</td> <td> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td>用户邮箱</td> <td><input type="text" name="email"/></td> </tr> <tr> <td><input type="submit" value="用户注册"/></td> <td><input type="reset" /></td> </tr> </table> </form> </center> </body>
4.监听用户何时使用键盘操作当前标签
1) onkeydown :监听用户何时在当前标签上【按下键盘】
2）onkeyup:监听用户何时在当前标签上【弹起键盘】
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var myArray= [ "allen","smith","tom","jones","tomcat" ]; function fun1(){ //1.读取用户在文本框输入内容 var content = document.getElementById("one").value; if(content==""){ document.getElementById("two").style.display="none"; return; } //2.到数组中定位包含了指定内容的字符串 var value=""; for(var i=0;i<myArray.length;i++){ var str = myArray[i]; if(str.indexOf(content)!=-1){ value+=str+"<br/>"; } } //3.将定位字符串作为文字显示内容填充到DIV标签 if(value==""){ document.getElementById("two").style.display="none"; return; } var domObj = document.getElementById("two") domObj.innerHTML=value; domObj.style.display="block";//显示 } </script> </head> <body> <center> <div> <img src="bd.log1.jpg"/> </div> <input type="text" id="one" size="50" onkeyup="fun1()"/> <input type="button" value="百度一下" style="background-color:blue;color:white"/> <div id="two" style="background-color: antiquewhite; color:red; width:300px;height:300px;display:none"></div> <!--display:none 隐藏当前标签--> </center> </body> </html>
十八、onload监听事件
1.作用：监听浏览器何时将网页中html标签加载完毕
2.意义：浏览器每加载一个html标签，自动在内存生成一个dom对象，
在浏览器将网页所有标签加载完毕时，意味当前网页中所有标签生成DOM对象。
onload此时就可以触发调用函数对浏览器中标签进行处理，此时不会出现未找到dom对象问题
<script type="text/javascript"> function fun1(){ var domObj = document.getElementById("one"); var str = domObj.value; window.alert(str); } </script> </head> <body onload="fun1()"> <input type="text" id="one" value="亲我"/> </body>
1.前提：
实际开发过程中，同一个监听事件往往与多个HTML标签进行绑定 这样增加开发强度，在未来维护过程中增加维护难度
2.命令形式：
domObj.监听事件名 = 处理事件名 ***此处处理函数名称不能出现()***
3.举个例子：
var domObj =document.getElementById("one");
domObj.onclick = fun1;//注意函数名后面不能有()
相当于
<input type="button" is="one" onclick="fun1()"/>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function fun1(){ this.style.backgroundColor="blue"; } function fun2(){ this.style.backgroundColor="white"; } //声明一个函数，这个函数将在浏览器架子啊页面后被自动调用，执行时为所有数据行绑定onmouseover与onmouseout监听事件 function main(){ //1.定位所有tr标签关联的DOM对象 var domArray = document.getElementsByTagName("tr"); //2.通过循环遍历，依次通过DOM对象将onmouseover与onmouseout绑定标签上 for(var i=1;i<domArray.length;i++){ var trdom = domArray[i];//某个tr标签所对应的DOM对象 trdom.onmouseover = fun1; trdom.onmouseout = fun2; } } </script> </head> <body onload="main()"> <table border="2" align="center"> <tr> <td> <input type="checkbox" id="one" >全选/全不选 </td> <td> 职员姓名 </td> <td> 职员职位 </td> <td> 职员工资 </td> </tr> <!--this指向当前tr标签关联的DOM对象--> <tr > <td> <input type="checkbox" name="ck"/> </td> <td> MIKE </td> <td> 初级程序员 </td> <td> 10000 </td> </tr> <tr > <td> <input type="checkbox" name="ck"/> </td> <td> SMITH </td> <td> 高级程序员 </td> <td> 40000 </td> </tr> <tr > <td> <input type="checkbox" name="ck"/> </td> <td> KING </td> <td> 架构师 </td> <td> 50000 </td> </tr> </table> </body> </html>
1.JavaScript中，每一函数都包含一个argument属性
2.arguments属性是一个数组
3.在函数调用时，将实参出入到函数的arguments中，再由arguments将数据传递给形参
4.arguments属性存在，可以将JavaScript中函数在调用时传递实参与形参进行格式，增加函数调用灵活性
5.arguments属性只能在函数体内使用，不能再函数体外使用
<script type="text/javascript"> function fun1(p1,p2){ window.alert("fun1 is run..."); } //三处调用，那几处能够调用成功：都可以正常调用fun1 // fun1(); // fun1(10); // fun1(10,20); //问题：fun1(),fun1(10,20)调用时传递实参与fun1声明时指定形参个数并不匹配，为什么还能正常调用 //声明一个函数，证明arguments存在 // function fun2(){ // window.alert("fun2在运行时得到实参个数 "+arguments.length); // for(var i=0;i<arguments.length;i++){ // var param = arguments[i]; // window.alert("第 "+(i+1)+"个实参的值 = "+param+" 实参数据类型 "+typeof param); // } // } //测试 //fun2(10,"abc", new Date()); //JavaScript中函数重载：当一个函数接收到不同参数时，能提供不同的功能 //当fun3接收到一个string类型实参，体现say hello。接收到两个number类型实参，体现加法运算 function fun3(){ if(arguments.length ==1 && typeof arguments[0] == 'string'){ window.alert("Hello "+arguments[0]) }else if(arguments.length ==2 && typeof arguments[0] == 'number' && typeof arguments[1] =='number'){ var num3 = arguments[0] + arguments[1]; window.alert("数字 "+arguments[0]+" + "+arguments[1]+" = "+num3); } // typeof obj == obj.getClass().getName(); } //测试 //fun3("mike"); fun3(80,90) </script>
二十、function类型对象
1.介绍：
1）function是javascript中一种高级数据类型
2）一个function类型对象用于管理一个具体函数
3）javascript中function；类型相当于java中的Method类型
2.function类型对象声名方式：
1）标准声明方式
2）匿名声明方式
3.function类型对象声明方式——————标准声明方式
function函数对象名(参数1，参数2){
命令：
}
4.function类型对象声明方式——————匿名声明方式
var 函数对象名 = function函数对象名(参数1，参数2){
命令：
}
5.function：类型对象的创建时机
浏览器在加载<script>时，共加载两次
第一次加载，将<script>标签所有以标准形式声明函数对象进行创建
第二次加载，将<script>标签所有命令按照自上而下顺序来执行
成功调用：
<script type="text/javascript"> //在上方调用fun1() fun1() //命令行 //标准形式声明函数对象 function fun1(){ window.alert("fun1 is run..."); } //在下方调用fun1对象 fun1(); //命令 </script>
调用失败：
<script type="text/javascript"> //上方调用 fun2(); //调用失败 var fun2 = function(){ window.alert("fun2 is run...")}; //命令行 //下方调用 //fun2(); </script>
二十一、局部变量和全局变量
1.局部变量：
1）、定义：在函数执行体内，通过var修饰符声明的变量
function fun1（）{
var name="mike"//局部变量
}
2）、特征：局部变量只能在当前执行体使用，不能在函数执行体外使用
2、全局变量：
定义：
1）全局变量可以在当前HTML文件中所有的函数中使用
2）全局变量被声明时，自动分配给window对象作为其属性
声明全局变量：
第一种方式：直接在script标签下，通过var声明的变量，就是全局变量
第二种方式：在函数执行体内，没有通过var修饰符修饰的变量也是全局变量
<script type="text/javascript"> //全局变量,此时等同于window.name = "mike"; var name = "mike"; var age = 23; //window.age =23 function fun1(){ window.alert("hello "+name); } function fun2(){ window.alert("bye "+name); } //fun1(); //fun2(); //window.alert("window.name = "+window.name); //window.alert("window.age = "+window.age); function fun3(){ var sex = "man"; // sex属于局部变量 home ="辽宁"; // home属于全局变量，[当这行命令执行时]相当于window.home=辽宁 } window.alert("window.home = "+window.home); //undefined fun3(); window.alert("window.home = "+window.home); //"辽宁" </script>
二十二、object类型对象特征
1.定义：在javaScript认为所有通过【构造函数】生成对象其数据类型都是object类型
2.特征：object类型对象创建完毕后可以根据实际情况任意添加属性和方法，也可以移除属性和方法
3.属性的维护：
第一种维护方案：
添加属性
object对象.新属性名= 值
添加函数
object对象.新函数对象名=function(){};
第二种维护方案：
添加属性
object对象["新的属性名称"]=值；
添加函数
object对象["新函数对象名"]=function(){};
移除对象属性和方法
del object.属性名
del object.函数名
<script type="text/javascript"> // var obj1 = new Object(); //JavaScript内置构造函数 // //新增属性 // obj1.sid = 10; // obj1.sname = "mike" // //新增函数 // obj1.sayHello = function (param){ window.alert(obj1.sname+"向"+param+"问好")} // window.alert("obj1.sid = "+obj1.sid +" obj1.sname = "+obj1.sname); // obj1.sayHello("allen") var obj2 = new Object(); //obj2["deptNo"]=20; //window.alert("obj2.deptNo "+obj2.deptNo); var departName ="dname";//为deparName添加属性 obj2[departName]="Operation"; // obj2.dname = "Operation"; window.alert("obj2.dname = "+obj2.dname); //移除dname属性 delete obj2.dname; window.alert("obj2.dname = "+obj2.dname);//undefined </script>
二十三、自定义构造函数
1。命令】：
function 函数对象名(){
}
2.【调用】
var object类型对象 = new 函数对象名()；
3.【普通函数与构造函数区分】
1）函数没有调用之前，无法区分函数身份，只能根据函数调用形式区分
2）判断普通函数： var num = 函数对象名();
3）判断构造函数： var num = new 函数对象名();
4）返回值：普通函数运行后需要通过return将执行结果返回,
构造函数运行后，直接返回一个object类型对象，此时函数return相当于无效
二十四、javaScript中this指向
1.javaScript中this指向与java中this指向完全一致
1）在构造函数，this指向当前构造函数生成object类型对象
2）在普通函数，this指向调用当前函数的实例对象
二十五、JSON
1.前提： javaScript中得到object类型对象方式
方式1：由构造函数生成的对象都是object类型对象
方式2：由JSON数据描述格式生成的对象都是object类型对象
2.JSON数据描述格式：
JavaScript中获得object类型对象简化版
3.标准命名格式：
var obj ={"属性名1"：值,"属性名2"：值};
开发人员习惯于将由JSON生成object类型对象称为【JSON对象
4.JSON数组
专门存放JSON对象的数组被称为JSON数组
json工具包使用
一个对象：
public class OneServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.得到一个部门类型对象 Dept dept = new Dept(10, "人寿社保事业部", "北京"); //2.通过json.jar中工具类将Dept对象中内容转换为JSON格式字符串 JSONObject jsonObj =JSONObject.fromObject(dept); //3.将JSON格式字符串添加请求作用域对象 request.setAttribute("key", jsonObj.toString()); //4.请求转发 request.getRequestDispatcher("/index1.jsp").forward(request, response); } }
<html> <head> <title>Title</title> <script type="text/javascript"> function init(){ var deptObj = ${requestScope.key}; document.getElementById("deptNo").value = deptObj.deptNo; document.getElementById("dname").value = deptObj.dname; document.getElementById("loc").value = deptObj.loc; } </script> </head> <body onload="init()"> <table border="2" align="center"> <tr> <td>部门编号</td> <td><input type="text" id="deptNo"></td> </tr> <tr> <td>部门名称</td> <td><input type="text" id="dname"></td> </tr> <tr> <td>部门位置</td> <td><input type="text" id="loc"></td> </tr> </table> </body> </html>
数组：
public class TwoServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.获得一个集合存放部门对象 Dept dept1 = new Dept(10, "社保事业部", "大兴区"); Dept dept2 = new Dept(20, "金融事业部", "顺义区"); Dept dept3 = new Dept(30, "公共关系事业部", "平谷区"); List deptList = new ArrayList(); deptList.add(dept1); deptList.add(dept2); deptList.add(dept3); //2.通过json.jar工具类将集合内容转换为【JSON数组格式】字符串 JSONArray jsonArray = JSONArray.fromObject(deptList); //3.价格【JSON数组格式】字符串添加到请求作用域对象 request.setAttribute("key", jsonArray.toString()); //4.请求转发 request.getRequestDispatcher("/index_2.jsp").forward(request, response); } }
<script type="text/javascript"> function init(){ var jsonArray = ${requestScope.key}; //得到一个json数组【dept1,dpet2,...】 for(var i=0;i<jsonArray.length;i++){ var jsonObj = jsonArray[i] //{deptNo,dname,loc} var trDom = document.createElement("tr"); //在浏览器中生成指定类型标签<tr></tr> var tdDom_1 = document.createElement("td"); var tdDom_2 = document.createElement("td"); var tdDom_3 = document.createElement("td"); tdDom_1.innerHTML = jsonObj.deptNo; //<td>10</td> tdDom_2.innerHTML = jsonObj.dname; //<td>Accounting</td> tdDom_3.innerHTML = jsonObj.loc; //<td>New York</td> trDom.appendChild(tdDom_1)//将td标签添加到tr标签中 trDom.appendChild(tdDom_2) trDom.appendChild(tdDom_3) document.getElementById("one").appendChild(trDom);//将tr标签添加到table标签中 } } </script> </head> <body onload="init()"> <table border="2" align="center" id="one"> <tr> <td>部门编号</td> <td>部门名称</td> <td>部门位置</td> </tr> </table> </body>
可以去这里学习很多关于java知识：https://www.runoob.com/
