JavaScript笔记
1.如果要想编写js，只需要将其定义在<script></script>元素之中即可，如下代码：
<script type="text/javascript">
//此处可以编写 JavaScript程序代码,如果有需要也可以定义多个
alert("Hello Everyone);
</script>
2.也可以自己新建一个js文件，在需要的时候引入即可，例如文件名为hello.js，只需要在引入此js文件的地方写上<script type="text/javascript" src="hello.js"></script>即可
3.在js中用var定义变量，根据用户赋的值自动设置数据类型，var也可以省略。需要注意的是js中变量类型是可以变更的，如下代码：
<script type="text/javascript">
msg=10;∥定义了一个mum的变量
msg="www.mldn.cn";∥修改了变量内容
console. log("msg="+msg);∥页面输出内容
</script>
在控制台输出结果为：www.mldn.cn
4.js中的"+"既可以实现加法运算，也可以进行字符串的连接，如下代码
<script type="text/javascript"> numA=10 numB= 20 console. log(numA+ numB) numA="Hello" numB="小李老师" console. log(numA+ numB); </script>
控制台输出结果为 30
Hello小李老师
5.js中函数的定义格式：
function 函数名称(参数,参数,...){
//函数代码体
//[return[返回值]]
}
例如以下代码：
<script type="text/javascript">
function printMessage(msg){//只接收参数不返回数据
console. log(msg);
}
printMessage("www.mldn.cn");//直接进行函数的调用
</script>
控制台输出结果：www.mldn.cn
注意：在js中调用函数时也可以不按照指定的参数个数赋值，如果在这里直接使用printMessage()调用，输出结果是undefined，undefined就相当于java中的null
6.js中if判断语句结合"函数名称.arguements.length"的使用（说明：函数名称.arguements.length是用来获得该函数实际接收的参数的个数的）。
<script type="text/javascript"> function printMessage(msg){//只接收参数不返回数据 if (printMessage arguments length==1){ console. log(msg) }else{ console. log("对不起,现在没有任何的数据!"); } printMessage("www.mldn.cn","www.jixianit.com");∥直接进行函数的调用 </script> 控制台输出结果:对不起,现在没有任何的数据!
7.如下编写一个有返回值的函数：
<script type="text/javascript">
function add(x, y){
if(add.arguments.length==2){
return x+y;
}else{
return undefined;
}
}
console.log("【addO函数调用】"+add(10));
console.log("【addO函数调用】"+add(10,undefined));//数字与"undefined"相加,结果为NaN
console.log("【add函数调用】"+add(10,20)); console.log("【adO函数调用】"+add("Helo"," Everyone")); </script> 控制台执行结果： 【ado函数调用】 undefined
【addO函数调用】NaN 【add函数调用】30 【ado函数调用】 Helo Everyone
8.javascript里面也有顺序结构，分支结构（if/else语句），循环结构（for循环，while循环）和传统编程几乎相同
需要注意的是js中，如果要进行字符串相等的判断,那么直接使用“==”即可,这里面不包含相应的方法的判断操作。
9.字符串里面一般都会提供有大量的控制函数,这些函数名称在各个语言里面几乎都是类似的。
str=www.mldn.cn
console. log("【字符串转大写】"+ str.toUpperCase());
console. log("【字符串长度】"+ str.length);//注意这个length没有括号
console.log("【字符串替换】"+"'Hello World'.replace(" World," Everyone"));
10.js中字符串既可以使用单引号定义，也可以使用双引号定义
11.数组：在js中也支持有数组的访问操作，但是在进行数组创建的时候需要利用Array这个类来完成。
注意：js中的数组长度是可以改变的，
<script type="text/javascript">
function printArray(array){
if(array != undefined){
for(x=0; x< array.length; x++){
console.log(array[x]);
}
}
}
data= new Array(5);//开辟5个长度的数组
for (x=0; x< data length; x ++){
data(x]=x;//为数组元素赋值
}
data[10]=100;//当前的索引超过了原始数组的长度，数组的最大长度就是当前索引的数值，执行之后数组长度就发生改变了，那些没有赋值的索引就为undefined，赋值的就为值
printArray(data);
</script>
上面是动态为数组赋值，也可以采用静态为数组赋值，将上面红色字体的代码换成以下代码：
data= new Array(10,20,30,40,50);
12.关于 JavaScript之中基于对象的理解
|
虽然 JavaScript现在提供了面向对象的支持,但是其对于传统的基于对象的编程并没有发生改变,在任何一个html页面里面实际上都会提供有许多的HTML元素,例如:<body>,<button>,<img>,<a>,这些元素在 JavaScript里面都是通过对象的形式来进行操作的,利用这些元素对象可以直接进行内部的属性操作。如果要想获得这些对象,就需要为组件设置“id”属性,利用id属性再结合 document.getElementByld("ID名称")的形式来获取指定的元素对象,如果获取了一个指定元素对象之后可以利用“ addEventListener(事件类型,处理函数,处理形式)”函数来动态的进行事件的绑定处理。 |
13.js事件处理
强调：加载事件不需要绑定元素，单击事件和鼠标事件需要绑定元素，一般单机事件和鼠标事件写在加载事件内。
● 加载事件（onload）：所有的页面如果要在浏览器上执行,那么一定会牵扯到程序代码的加载问题,那么现在假设需要在页面加载完成之后进行某些的处理操作,就可以利用 onload事件来进行处理。
<script type="text/javascript"> window.onload= function(){∥与在body中编写的 onload相同 welcome(); msg(); } function welcome(){∥定义加载事件的处理函数 console.log("大爷,欢迎来玩,各种好玩的都有,最好玩的就是辛博娃娃,该娃娃每到周五就自己休息不接客!") } function msg(){ console.log("Good Luck Everyone" ) } </script> 程序执行结果：大爷,欢迎来玩,各种好玩的都有,最好玩的就是辛博娃娃,该娃娃每到周五就自己休息不接客! Good Luck Everyone
除了上面这种写法，还有一种直接在jsp页面body标签里面写也可以：<body onload="welcome();msg()"></body> 注意：调用多个函数中间要用分号隔开
开发的时候还是使用最上面那种方式写
● 单击事件（onclick）：
●写法1： 直接在body标签中引用
<head>
<script type="text/javascript>
function msg(){∥这是一个函数
window.alert("www.jixianit.com);
</script>
/head>
< button type="button" onclick="msg()">按我,显示内容</ button
</body>
●写法2（开发的时候用）：
<html>
<head>
<script type="text/javascript>
window.onload= function(){ //页面加载完成后调用
buttonObject=document.getElementByld("pushButton");
buttonObject.addEventListener("click", msg, false);
document.getElementByld("cleanButton").addEventListener("click",function(){//可以直接使用匿名处理函数
textObject.value ="";
}, false);
}
function msg(){
textObject= document.getElementByld("showText");//根据id获取对象
textObject.value ="Hello EveryOne";
}
</script>
</head>
<body>
<input type=text" id="showText"><br>
<button type="button"id="pushButton">按我,显示内容< /button>
<button type="button"id="cleanButton">清空显示内容< /button>
</body>
</html>
● 鼠标事件：鼠标事件主要是描述所有与鼠标有关事件处理形式,在 JavaScript里面支持的鼠标事件有如下几种:
● onmousedown：鼠标按下触发;
● onmouseup：鼠标抬起时触发
● onmouseout：鼠标离开时触发
● onmouseover：鼠标经过时触发
● onmousemove：鼠标移动时触发
14.js中常用的弹框：
● window.confirm(),确定,取消
● window.alert(),确定；也可以写成alert()
15.document.write("<h1>11</h1>");//在页面输出内容“11”
16.显示图层和隐藏图层：
window. onload= function(){//所有的处理事件都通过加载操作完成
document.getElementByld("showBut").addEventListener("click", function(){
imgDivObject= document.getElementByld("imgDiv");//获取指定的组件
imgDivObject.style.display ="block";//显示图层
}, false);
document.getElementByld("hideBut").addEventListener("click", function(){
imgDivObject= document.getElementByld("imgDiv");//获取指定的组件
imgDivObject.style.display ="none";//隐藏图层
}, false);
}
17.定时调用：setTimeout( showAllImage,1000);//每秒调用showAllImage函数一次
18.单选钮事件处理：单选钮使用radio，单选钮的name和id必须相同，因为单选钮的name相同，所以选定元素的时候要使用document.all("id名称")函数来完成。例如以下js代码：获取选中的性别内容
window.onload= function{//所有的处理事件都通过加载操作完成
document.getElementByld( "showBut" ).addEventListener("click", function(){
sexObject= document.all("sex");//选择所有id为“sex”的元素
info="";
for(x=0; x<sexObject.length; x++){
if(sexObject[x].checked){
info= sexObject[x].value;//获取选中的内容
}
document.getElementByld("msgSpan").innerHTML="用户的性别:"+info;//innerHTML是提示信息
}, false);
}
19.在js中如果有id重复，这时采用document.getElementById("id名称")接收就只能接收此名称的第一个对象，因为这堆相同名称的id变成了一个数组，接收数组就要使用document.all("id名称")接收了，常用在多选框中；
20.在多选框中，一定要把name属性定义成相同。
21.click是一个单击事件，比较常用。
22.blur（失去焦点）也是一个事件。常用在输入框或文本域中。举个例子：当你输入用户名的时候，当你输完用户名立马调用js代码，就会提示你用户名合不合法，不会调用数据库。
23.如果想进行表单拦截，就需要绑定submit事件处理。具体代码如下：
document.addEventListener("submit",function(event){//event表示当前的事件对象，系统内定，不用改变，直接写event
if(判断条件){
event.preventDefault();//阻止表单提交
}
},false);
24.元素对象.className="text-success";元素对象.className="text-error"表示成功的样式(框为绿色，对应的innerHTML字体也为绿色)
或失败的样式(框为红色，对应的innerHTML字体也为红色)。
