HTML中写JS的两种方式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <!-- JS脚本按顺序从上至下依次执行 --> <!-- 引入外部JS文件,标签体内的代码不会执行。 --> <script type="text/javascript" src="outer.js">/* alert("我不会执行"); */</script> <script type="text/javascript"> alert("这里可以写JS代码"); </script> </body> </html>
outer.js
alert("outer");
五种基本数据类型
number、、boolean、null、undefined
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> var v1 = 123; var v2 = "123"; var v3 = true; var v4 = null; // v5未定义 document.write(typeof(v1));document.write("<br>"); document.write(typeof(v2));document.write("<br>"); document.write(typeof(v3));document.write("<br>"); document.write(typeof(v4));document.write("<br>");// object document.write(typeof(v5));document.write("<br>"); </script> </body> </html>
基本语句
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <!-- JS基本语句 --> <script type="text/javascript"> // if-else var a = 1; if (a == 1) { document.write("a==1" + "<br>"); } else { document.write("a!=1" + "<br>"); } document.write("<hr>"); // switch语句 var b = "1"; switch (b) { case "0": document.write("星期天" + "<br>"); break; case "1": document.write("星期一" + "<br>"); break; case "2": document.write("星期二" + "<br>"); break; case "3": document.write("星期三" + "<br>"); break; case "4": document.write("星期四" + "<br>"); break; case "5": document.write("星期五" + "<br>"); break; case "6": document.write("星期六" + "<br>"); break; default: document.write("非星期!!!" + "<br>"); } document.write("<hr>"); // while var i = 1; while (i <= 3) { document.write("i=" + i + "<br>"); i++; } document.write("<hr>"); // do-while var j = 1; do { document.write("j=" + j + "<br>"); j++; } while (j <= 3); document.write("<hr>"); // for var k; for (k = 1; k <= 3; k++) { document.write("k=" + k + "<br>"); } document.write("<hr>"); // 可变参数,函数内部存在一个隐含arguments[],保存形参 function sum() { var sum = 0; for ( var index = 0; index < arguments.length; index++) { sum += arguments[index]; } return sum; } document.write(sum(1, 2) + "<br>"); document.write(sum(1, 2, 3) + "<br>"); document.write(sum(1, 2, 3, 4) + "<br>"); </script> </body> </html>
字符串
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <!-- 字符串相关函数 --> <script type="text/javascript"> // 将字符串变成超链接 var s1 = "我是超链接"; document.write(s1.link("2.html")); document.write("<br>" + "<hr>"); // 字符串拼接 var s2 = "hel"; var s3 = "lo"; var s23 = s2.concat(s3);// 返回新的字符串 document.write(s23);// hello document.write("<br>" + "<hr>"); // 返回指定位置的字符 var s4 = "xxdty"; document.write(s4.charAt(2));//d 如果字符位置不存在,则返回空字符 document.write("<br>" + "<hr>"); // 字符串遍历 for ( var i = 0; i < s4.length; i++) { if (i == (s4.length - 1)) { document.write(s4.charAt(i)); } else { document.write(s4.charAt(i) + ","); } }// x,x,d,t,y document.write("<br>" + "<hr>"); // 返回字符串首位置 var s5 = "good good study, day day up"; document.write(s5.indexOf("day"));//17 document.write("<br>" + "<hr>"); // 切割字符串 var s6 = "x-x-d-t-y"; var array = s6.split("-"); document.write(array);// 数组 document.write("<br>" + "<hr>");// x,x,d,t,y // 替换字符串 var s7 = "abcdefg"; var s8 = s7.replace("abc", "ABC");// 返回新字符串 document.write(s8);// x,x,d,t,y document.write("<br>" + "<hr>"); // 截取字符串 var s9 = "012345678"; var s10 = s9.substring(2, 7);// 包左不包右 document.write(s10); document.write("<br>" + "<hr>");// 23456 </script> </body> </html>
数组
JS中的数组可以包含不同数据类型。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> // JS中,数组可以包含不同类型的数据 // 数组的第一种定义方式 var arr1 = [ 1, "22", true ]; document.write("数组长度为:" + arr1.length + "。 内容为:" + arr1); document.write("<br>"); // 数组的第二种定义方式 var arr2 = new Array(3);// 数组的长度为3 arr2[0] = 1.5; arr2[1] = "哈哈哈"; arr2[2] = true; document.write("数组长度为:" + arr2.length + "。 内容为:" + arr2); document.write("<br>"); // 数组的第三种定义方式 var arr3 = new Array(3.14, "嘻嘻嘻", false, new Date());// 数组的内容 document.write("数组长度为:" + arr3.length + "。 内容为:" + arr3); document.write("<br>"); </script> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <!-- 数组相关函数 --> <script type="text/javascript"> // 数组拼接 var array1 = [ 1, "2" ]; var array2 = [ 3, "4", true ]; var newArray = array1.concat(array2);// 返回新数组,原来数组均不变 document.write(newArray);//[1,"2",3,"4",true] document.write("<br>" + "<hr>"); // 将数组元素拼接成一个字符串 var array3 = new Array(4); array3[0] = "a"; array3[1] = "b"; array3[2] = "c"; array3[3] = "d"; var str = array3.join("-");// 返回字符串 document.write(str);// a-b-c-d document.write("<br>" + "<hr>"); //向数组末尾添加元素,返回新的长度 //【注意】如果添加的是一个数组,则把数组当做一个整体字符串添加进去 var array4 = [ 0, 1, 2, 3 ]; var newLength1 = array4.push(4);// 添加元素,改变原数组 document.write(newLength1 + " : " + array4);// 5 : 0,1,2,3,4 document.write("<br>" + "<hr>"); var array5 = [ 0, 1, 2, 3 ]; var array6 = [ 4, 5, 6 ];// 添加数组,改变原数组 var newLength2 = array5.push(array6); document.write(newLength2 + " : " + array5 + "<br>");// 5 : 0,1,2,3,4,5,6 // 事实上,上面输出结果中 "4,5,6"是一个字符串 for ( var j = 0; j < array5.length; j++) { document.write(array5[j] + "<br>"); } /* 0 1 2 3 4,5,6 */ document.write("<br>" + "<hr>"); // 删除数组最后一个元素 var array7 = [ "天龙八部", "射雕英雄传", "神雕侠侣", "倚天屠龙记" ]; var last = array7.pop();//删除并返回最后一个元素 document.write(last + " : " + array7);// 倚天屠龙记 : 天龙八部,射雕英雄传,神雕侠侣 document.write("<br>" + "<hr>"); // 数组逆序 var array8 = [ 1, 2, 3, 4, 5 ]; array8.reverse(); document.write(array8);// 5,4,3,2,1 document.write("<br>" + "<hr>"); </script> </body> </html>
函数
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> // 函数的第一种定义方式 function add1(x, y) { //参数列表只写变量名 return x + y; } // 函数的第二种定义方式 var add2 = function(x, y){ return x + y; } // 函数的第三种定义方式 var add3 = new Function("x,y", "return x+y"); // 调用函数 document.write(add1(1,2)+"<br>"); document.write(add2(3,4)+"<br>"); document.write(add3(5,6)+"<br>"); </script> </body> </html>
全局函数
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <!-- JS的全局函数不属于任何一个对象,直接使用 --> <script type="text/javascript"> // eval("js脚本") eval("alert('哈哈哈')");// 弹框显示"哈哈哈" // encodeURI()和decodeURI() var s1 = "太阳"; var s2 = encodeURI(s1);//编码 document.write(s2 + "<br>");// %E5%A4%AA%E9%98%B3 var s3 = decodeURI(s2);// 解码 document.write(s3 + "<br>");// 太阳 // isNaN(),判断是否为 非数字 document.write(isNaN("12a") + "<br>");// true document.write(isNaN("123") + "<br>");// false,"123"算数字 document.write(isNaN(123) + "<br>");// false // 解析函数 document.write(parseInt(12.34) + "<br>");//12 document.write(parseInt("12.34") + "<br>");//12 document.write(parseInt("1234a") + "<br>");//1234 document.write(parseInt(true) + "<br>");// NaN </script> </body> </html>
全局变量和局部变量
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> var s = "8";// 全局变量,在所有脚本及其函数中都可以使用 </script> <script type="text/javascript"> alert(s);// 8 </script> <script type="text/javascript"> alert(s + "2");//字符串拼接,得82 </script> <script type="text/javascript"> alert(s - "2");// 【注意】:此时做减法,得6(number类型) </script> <script type="text/javascript"> function show() { alert(s); } // 调用函数 show();// 8 </script> <script type="text/javascript"> function print1(){ var ss = 100;// 局部变量,只能在此函数内部使用 alert(ss); } /* function print2(){ alert(ss);// 错误,无法访问其它函数中定义的变量 } */ // 调用函数 print1();// 100 </script> </body> </html>
Date对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> var date = new Date(); var time = date.getTime(); document.write("距离1970年1月1日 0时0分0秒:" + time + "<br>");// 毫秒 document.write("距离1970年1月1日 0时0分0秒:" + time / 1000 / 3600 / 24 / 365 + "<br>");// 年 document.write("<br>" + "<hr>"); document.write(date.toLocaleDateString() + "<br>"); document.write(date.toLocaleTimeString() + "<br>"); document.write(date.toLocaleString() + "<br>"); document.write("年:" + date.getFullYear() + "<br>"); document.write("月:" + (date.getMonth() + 1) + "<br>");// 月份从0-11,因此实际月份要加1 document.write("日:" + date.getDate() + "<br>"); document.write("时:" + date.getHours() + "<br>"); document.write("分:" + date.getMinutes() + "<br>"); document.write("秒:" + date.getSeconds() + "<br>"); document.write("星期:" + date.getDay() + "<br>");// 日期从0-6,星期天是0 </script> </body> </html>
Math对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <script type="text/javascript"> // 绝对值 document.write(Math.abs(-1) + "<br>");//1 // 向上取整 document.write(Math.ceil(2.5) + "<br>");//3 // 向下取整 document.write(Math.floor(2.5) + "<br>");//2 // 四舍五入,即:先加0.5,再向下取整 document.write(Math.round(3.4) + "<br>");//3 document.write(Math.round(-3.4) + "<br>");//-3 // 产生[0,1)之间的随机数 document.write(Math.random() + "<br>"); // 产生[x,y)之间的随机数,例如[10,100) document.write(Math.random() * (100 - 10) + 10 + "<br>"); </script> </body> </html>
DOM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <!-- DOM --> <script type="text/javascript"> // navigator:获取浏览器信息 document.write(navigator.appName+"<br>");//Microsoft Internet Explorer // screen:获取屏幕信息 document.write(screen.height+"<br>");// 1080 document.write(screen.width+"<br>");// 1920 // location:获取请求URL地址 document.write(location.href+"<br>");// file:///D:/MyEclipseWorkSpace1/JavaWeb1/WebRoot/Html/1.html // 通过事件设置location的href,可以实现网页跳转 function go(){ location.href = "2.html"; } // history对象 // 上一页 function back(){ history.back(); } // 下一页 function forward(){ history.forward(); } // 弹出提示框 window.alert("海!你好啊"); // 弹出确认框 var flag = window.confirm("are you sure?");// 返回值记录用户的选择 if(flag==true){ document.write("您选择了True"+"<br>"); }else{ document.write("您选择了False"+"<br>"); } // 弹出对话框 var answer = window.prompt("你还好吗?"); // 返回值记录用户的输入 document.write(answer+"<br>"); // open("打开新窗口的地址","","窗口特征(宽、高)") function openNewWindow(){ window.open("2.html");// 打开一个新窗口,显示2.html }//【注意】跨页面操作时,var parentWindow = window.opener;得到创建这个窗口的窗口 // 定时器 var myInterval = window.setInterval(function show1(){ alert("每一个周期我执行一次"); },3000);// 每3000ms执行一次 // 清除定时器 window.clearInterval(myInterval); // 延时器 var myTimeout = window.setTimeout(function show1(){ alert("指定时间后我执行,且只执行一次"); },3000);// 3000ms后执行一次 // 清除延时器 window.clearTimeout(myTimeout); </script> <!-- location用法 --> <input type="button" value="跳转到2.html" onclick="go();"><br> <!-- history用法 --> <input type="button" value="前一页" onclick="back();"> <input type="button" value="后一页" onclick="forward();"> <!-- open用法 --> <input type="button" value="打开2.html窗口" onclick="openNewWindow();"> </body> </html>
BOM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <!-- BOM --> <script type="text/javascript"> // document.write(变量或者Html代码) document.write("<h1>" + 666 + "</h1>"); document.write("<h2 style='color:orange;'>" + "哈哈哈" + "</h2>"); // document.getElementById("id值"),通过标签的id属性值得到 指定标签 function fun1() { var b1 = document.getElementById("b1"); alert(b1.value);// Button1 } // document.getElementsByName("name值"),通过标签的name属性值得到 标签数组 function fun2() { var array1 = document.getElementsByName("b2");//返回数组 for ( var i = 0; i < array1.length; i++) { alert(array1[i].value);// 依次弹出Button2、Button3 } } // document.getElementsByTagName("tag名称"),通过标签名称得到 标签数组 function fun3() { var array2 = document.getElementsByTagName("input");// 返回数组 for ( var j = 0; j < array2.length; j++) { alert(array2[j].value);// 依次弹出Button1、Button2、Button3 } } </script> <input type="button" value="Button1" id="b1" name="b1" onclick="fun1();"> <br> <input type="button" value="Button2" name="b2" onclick="fun2();"> <br> <input type="button" value="Button3" name="b2" onclick="fun3()"> <br> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <!-- BOM --> <script type="text/javascript"> /* 在末尾添加节点 */ function addStar(){ var li = document.createElement("li");// 创建新标签节点 var star = document.createTextNode("郭富城");// 创建文本节点 li.appendChild(star);// 标签节点添加文本节点 var ul = document.getElementById("ul"); ul.appendChild(li);// ul中添加li } </script> <ul id = "ul"> <li>刘德华</li> <li>张学友</li> <li>黎明</li> </ul> <input type="button" value="添加" id="b1" onclick="addStar();"><br> </body> </html>
BOM总结:
获取父节点:子节点.parentNode;
获取所有子节点:父节点.childNodes;
获取第一个子节点:父节点.firstChild;
获取最后一个子节点:父节点.lastChild;
获取指定子节点的唯一有效方法:父节点.getElementsByTagName("标签名称");
获取下一个兄弟节点:节点.nextSibling;
获取上一个兄弟节点:节点.previousSibling;
获取属性值:getAttribute("属性名称")
设置属性值:setAttribute("属性名称","属性值");
删除属性:removeAttribute("属性名称"); 但是,不能删除value属性
创建标签节点:document.createElement("标签名称");
创建文本节点:document.createTextNode("文本内容");
末尾添加节点:父节点.appendChild(被添加的节点);
在某节点前插入新节点:父节点.insertBefore(newNode,oldNode);
删除子节点:父节点.removeChild(子节点);
替换子节点:父节点.replaceChild(newNode,oldNode);
复制节点:var 该节点的复制品 = 节点.cloneNode(boolean),参数为true;
Button提交表单
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <form id="form"> 姓名:<input type="text" name="username"><br> 密码:<input type="password" name="password"><br> <input type="button" value="提交" onclick="submit();"> </form> <!-- 使用Button提交表单 --> <script type="text/javascript"> function submit() { var form = document.getElementById("form"); // 设置action form.action = "/JavaWeb1/Html/1.html"; // 提交表单 form.submit(); } </script> </body> </html>