JavaScript: basis
ref: http://www.imooc.com/code/387
1. html里直接嵌入js：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb18030"> 5 <title>插入js代码</title> 6 <script type="text/javascript"> 7 document.write("开启JS之旅!"); 8 </script> 9 </head> 10 <body> 11 </body> 12 </html>
2. src引入js
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>引用JS文件</title> 6 <script src="script.js"></script> 7 </head> 8 <body> 9 </body> 10 </html>
3. alert用法
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>alert</title> 6 <script type="text/javascript"> 7 function rec(){ 8 var mychar="I love JavaScript"; 9 alert(mychar); 10 } 11 </script> 12 </head> 13 <body> 14 <input name="button" type="button" onClick="rec()" value="点击我，弹出对话框" /> 15 </body> 16 </html>
4. confirm用法
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>confirm</title> 6 <script type="text/javascript"> 7 function rec(){ 8 var mymessage=confirm("你是女士吗？"); ; 9 if(mymessage==true) 10 { 11 document.write("你是女士!"); 12 } 13 else 14 { 15 document.write("你是男士!"); 16 } 17 } 18 </script> 19 </head> 20 <body> 21 <input name="button" type="button" onClick="rec()" value="点击我，弹出确认对话框" /> 22 </body> 23 </html>
5. prompt用法
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>prompt</title> 6 <script type="text/javascript"> 7 function rec(){ 8 var score; //score变量，用来存储用户输入的成绩值。 9 score = prompt("请输入你的成绩:"); 10 if(score>=90) 11 { 12 document.write("你很棒!"); 13 } 14 else if(score>=75) 15 { 16 document.write("不错吆!"); 17 } 18 else if(score>=60) 19 { 20 document.write("要加油!"); 21 } 22 else 23 { 24 document.write("要努力了!"); 25 } 26 } 27 </script> 28 </head> 29 <body> 30 <input name="button" type="button" onClick="rec()" value="点击我，对成绩做评价!" /> 31 </body> 32 </html>
6. window.open用法
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>window.open</title> 6 <script type="text/javascript"> 7 function Wopen(){ 8 window.open('http://www.imooc.com', '_blank','width=600,height=400,menubar=yes,toolbar=yes,status=yes,scollbars=yes,top=100,left=0'); 9 10 } 11 </script> 12 </head> 13 <body> 14 <input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" / > 15 </body> 16 </html>
window.open(<URL>, <窗口名称>, <参数字符串>)
参数说明:
URL：打开窗口的网址或路径。 窗口名称：被打开窗口的名称。可以是"_top"、"_blank"、"_selft"等。 参数字符串：设置窗口参数，各参数用逗号隔开。
7. window.close()用法
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>close()</title> 6 <script type="text/javascript"> 7 var mywin=window.open("http://www.imooc.com"); 8 mywin.close(); 9 </script> 10 </head> 11 <body> 12 </body> 13 </html>
8. document.getElementById用法
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>document.getElementById</title> 6 </head> 7 <body> 8 <p id="con">JavaScript</p> 9 <script type="text/javascript"> 10 var mychar=document.getElementById("con"); 11 document.write("结果:"+mychar); //输出获取的P标签。 12 </script> 13 </body> 14 </html>
9. innerHTML用法
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>innerHTML</title> 6 </head> 7 <body> 8 <h2 id="con">javascript</H2> 9 <p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p> 10 <script type="text/javascript"> 11 var mychar=document.getElementById("con"); 12 document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容 13 mychar.innerHTML = "Hello world!" 14 document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容 15 </script> 16 </body> 17 </html>
10. 改变HTML样式
语法:
Object.style.property=new style;
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>style样式</title> 6 </head> 7 <body> 8 <h2 id="con">I love JavaScript</H2> 9 <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p> 10 <script type="text/javascript"> 11 var mychar= document.getElementById("con"); 12 mychar.style.color="red"; 13 mychar.style.backgroundColor="#CCC"; 14 mychar.style.width="300px"; 15 </script> 16 </body> 17 </html>
11. 显示和隐藏
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 <title>display</title> 6 <script type="text/javascript"> 7 function hidetext() 8 { 9 var mychar = document.getElementById("con"); 10 mychar.style.display="none"; 11 } 12 function showtext() 13 { 14 var mychar = document.getElementById("con"); 15 mychar.style.display="block"; 16 } 17 </script> 18 </head> 19 <body> 20 <h1>JavaScript</h1> 21 <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> 22 <form> 23 <input type="button" onclick="hidetext()" value="隐藏内容" /> 24 <input type="button" onclick="showtext()" value="显示内容" /> 25 </form> 26 </body> 27 </html>
12. removeAttribute("style")用法
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> 5 <title>javascript</title> 6 <style type="text/css"> 7 body{font-size:12px;} 8 #txt{ 9 height:400px; 10 width:600px; 11 border:#333 solid 1px; 12 padding:5px;} 13 p{ 14 line-height:18px; 15 text-indent:2em;} 16 </style> 17 </head> 18 <body> 19 <h2 id="con">JavaScript课程</H2> 20 <div id="txt"> 21 <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5> 22 <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p> 23 <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p> 24 <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p> 25 </div> 26 <form> 27 <!--当点击相应按钮，执行相应操作，为按钮添加相应事件--> 28 <input type="button" value="改变颜色" onclick="changeColor()"> 29 <input type="button" value="改变宽高" onclick="changeWidthAndHeight()"> 30 <input type="button" value="隐藏内容" onclick="hiddenContent()"> 31 <input type="button" value="显示内容" onclick="showContent()"> 32 <input type="button" value="取消设置" onclick="cancelSet()"> 33 </form> 34 <script type="text/javascript"> 35 //定义"改变颜色"的函数 36 function changeColor() { 37 var my = document.getElementById("txt"); 38 my.style.color = "red"; 39 my.style.backgroundColor = "blue"; 40 } 41 42 //定义"改变宽高"的函数 43 function changeWidthAndHeight() { 44 var my = document.getElementById("txt"); 45 my.style.width = "500px"; 46 my.style.height = "500px"; 47 } 48 49 //定义"隐藏内容"的函数 50 function hiddenContent() { 51 var my = document.getElementById("txt"); 52 my.style.display = "none"; 53 } 54 55 //定义"显示内容"的函数 56 function showContent() { 57 var my = document.getElementById("txt"); 58 my.style.display = "block"; 59 } 60 61 //定义"取消设置"的函数 62 function cancelSet() { 63 var mes = confirm("确定要取消设置吗？"); 64 if (mes == true) { 65 var my = document.getElementById("txt"); 66 my.removeAttribute("style"); 67 } 68 } 69 70 71 </script> 72 </body> 73 </html>
事件：
1. onclick
1 <!DOCTYPE HTML> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>单击事件 </title> 5 <script type="text/javascript"> 6 function openwin(){ 7 window.open('http://www.imooc.com','_blank','height=600,width=400,top=100,toolbar=no,left=0,menubar=no,scrollbars=no,status=no');} 8 </script> 9 </head> 10 <body> 11 <form> 12 <input name="点击我" type="button" value="点击我 "onclick="openwin()"/> 13 </form> 14 </body> 15 </html>
2. onmouseover
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title> 鼠标经过事件 </title> 6 <script type="text/javascript"> 7 function message(){ 8 confirm("请输入密码后，再单击确定!"); } 9 </script> 10 </head> 11 <body> 12 <form> 13 密码:<input name="password" type="password" > 14 <input name="确定" type="button" value="确定" onmouseover="message()"/> 15 </form> 16 </body> 17 </html>
3. onmouseout
1 <!DOCTYPE HTML> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>鼠标移开事件 </title> 5 <script type="text/javascript"> 6 function message(){ 7 alert("不要移开，点击后进行慕课网!"); } 8 </script> 9 </head> 10 <body> 11 <form> 12 <a href="http://www.imooc.com" onmouseout="message()">点击我 </a> 13 </form> 14 </body> 15 </html>
4. onfocus
1 <!DOCTYPE HTML> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title> 光标聚焦事件 </title> 5 <script type="text/javascript"> 6 function message(){ 7 alert("请选择，您现在的职业！"); 8 } 9 </script> 10 </head> 11 <body> 12 请选择您的职业：<br> 13 <form> 14 <select name="career" onfocus="message()"> 15 <option>学生</option> 16 <option>教师</option> 17 <option>工程师</option> 18 <option>演员</option> 19 <option>会计</option> 20 </select> 21 </form> 22 </body> 23 </html>
5. onblur
1 <!DOCTYPE HTML> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title> 失焦事件 </title> 5 <script type="text/javascript"> 6 function message(){ 7 alert("请确定已输入密码后，在移开!"); } 8 </script> 9 </head> 10 <body> 11 <form> 12 用户:<input name="username" type="text" value="请输入用户名！" > 13 密码:<input name="password" type="text" value="请输入密码！" onblur="message()"> 14 </form> 15 </body> 16 </html>
6. onselect
1 <!DOCTYPE HTML> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title> 内容选中事件 </title> 5 <script type="text/javascript"> 6 function message(){ 7 alert("您触发了选中事件！"); } 8 </script> 9 </head> 10 <body> 11 <form> 12 个人简介：<br> 13 <textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea> 14 </form> 15 </body> 16 </html>
7. onchange
1 <!DOCTYPE HTML> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title> 文本框内容改变事件 </title> 5 <script type="text/javascript"> 6 function message(){ 7 alert("您改变了文本内容！"); } 8 </script> 9 </head> 10 <body> 11 <form> 12 个人简介：<br> 13 <textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea> 14 </form> 15 </body> 16 </html>
8. onload
1 <!DOCTYPE HTML> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 <title> 加载事件 </title> 5 <script type="text/javascript"> 6 function message(){ 7 alert("加载中，请稍等…"); } 8 </script> 9 </head> 10 <body onload="message()"> 11 欢迎学习JavaScript。 12 </body> 13 </html>
9. parseInt和getElementById("").value
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 事件</title> 5 <script type="text/javascript"> 6 function count(){ 7 8 //获取第一个输入框的值 9 //获取第二个输入框的值 10 //获取选择框的值 11 //获取通过下拉框来选择的值来改变加减乘除的运算法则 12 //设置结果输入框的值 13 var num1 = parseInt(document.getElementById("txt1").value); 14 var num2 = parseInt(document.getElementById("txt2").value); 15 var select = document.getElementById("select").value; 16 //document.write(num1); 17 //document.write(num2); 18 //document.write(select); 19 var num3; 20 switch (select) { 21 case '+': 22 num3=num1+num2; 23 break; 24 case "-": 25 num3=num1-num2; 26 break; 27 case "*": 28 num3=num1*num2; 29 break; 30 case "/": 31 num3=num1/num2; 32 break; 33 default: 34 break; 35 } 36 //document.write(num3); 37 document.getElementById("fruit").value=num3; 38 } 39 </script> 40 </head> 41 <body> 42 <input type='text' id='txt1' /> 43 <select id='select'> 44 <option value='+'>+</option> 45 <option value="-">-</option> 46 <option value="*">*</option> 47 <option value="/">/</option> 48 </select> 49 <input type='text' id='txt2' /> 50 <input type='button' value=' = ' onclick="count()"/> <!--通过 = 按钮来调用创建的函数，得到结果--> 51 <input type='text' id='fruit' /> 52 </body> 53 </html>
类
1. Date
2. string
toUpperCase(); toLowerCase();
stringObject.charAt(index);
stringObject.indexOf(substring, startpos);
stringObject.split(separator, limit);
stringObject.substring(startPos, stopPos);
stringObject.substr(startPos, length);
3. Array
4. windows
5. 计时器
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>定时器</title> 6 <script type="text/javascript"> 7 var attime; 8 var int=setInterval(clock, 1000); 9 function clock(){ 10 var time=new Date(); 11 attime= time.getHours()+":"+time.getMinutes()+":"+time.getSeconds(); 12 document.getElementById("clock").value = attime; 13 } 14 15 </script> 16 </head> 17 <body> 18 <form> 19 <input type="text" id="clock" size="50" /> 20 </form> 21 </body> 22 </html>
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>计时器</title> 6 <script type="text/javascript"> 7 var int=setInterval("clock()", 100); 8 function clock(){ 9 var time=new Date(); 10 document.getElementById("clock").value = time; 11 } 12 13 </script> 14 </head> 15 <body> 16 <form> 17 <input type="text" id="clock" size="50" /> 18 <input type="button" value="Stop" onclick="clearInterval(int)" /> 19 </form> 20 </body> 21 </html>
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>计时器</title> 6 </head> 7 <script type="text/javascript"> 8 var num=0; 9 function startCount() { 10 document.getElementById('count').value=num; 11 num=num+1; 12 setTimeout("startCount()",1000); 13 } 14 window.onload=startCount; 15 </script> 16 </head> 17 <body> 18 <form> 19 <input type="text" id="count" /> 20 </form> 21 </body> 22 </html>
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>计时器</title> 6 </head> 7 <script type="text/javascript"> 8 var num=0; 9 var i; 10 function startCount(){ 11 document.getElementById('count').value=num; 12 num=num+1; 13 i=setTimeout("startCount()",1000); 14 } 15 function stopCount(){ 16 clearTimeout(i); 17 } 18 </script> 19 </head> 20 <body> 21 <form> 22 <input type="text" id="count" /> 23 <input type="button" value="Start" onClick="startCount()"/> 24 <input type="button" value="Stop" onClick="stopCount()"/> 25 </form> 26 </body> 27 </html>
6. history
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 </head> 7 <script type="text/javascript"> 8 function GoBack() { 9 //window.history.go(-1); 10 window.history.back(); 11 } 12 13 </script> 14 </head> 15 <body> 16 点击下面的锚点链接，添加历史列表项: 17 18 <br /> 19 <a href="#target1">第一个锚点</a> 20 <a name="target1"></a> 21 <br /> 22 <a href="#target2">第二个锚点</a> 23 <a name="target2"></a> 24 <br /><br /> 25 使用下面按钮，实现返回前一个页面: 26 <form> 27 <input type="button" value="返回前一个页面" onclick="GoBack();" /> 28 </form> 29 </body> 30 </html>
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 </head> 7 <script type="text/javascript"> 8 function GoForward() { 9 window.history.go(1); 10 //window.history.forward(); 11 } 12 </script> 13 </head> 14 <body> 15 点击下面的锚点链接，添加历史列表项: 16 <br /> 17 <a href="#target1">第一个锚点</a> 18 <a name="target1"></a> 19 <br /> 20 <a href="#target2">第二个锚点</a> 21 <a name="target2"></a> 22 <br /><br /> 23 使用下面按钮，实现返回下一个页面: 24 <form> 25 <input type="button" value="返回下一个页面" onclick="GoForward()" /> 26 </form> 27 </body> 28 </html>
7. location
8. navigator
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>navigator</title> 6 <script type="text/javascript"> 7 function validB(){ 8 var u_agent = navigator.userAgent; 9 var B_name="不是想用的主流浏览器!"; 10 if(u_agent.indexOf("Firefox")>-1){ 11 B_name="Firefox"; 12 }else if(u_agent.indexOf("Chrome")>-1){ 13 B_name="Chrome"; 14 }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 15 B_name="IE(8-10)"; 16 } 17 document.write("浏览器:"+B_name+"<br>"); 18 document.write("u_agent:"+u_agent+"<br>"); 19 } 20 </script> 21 </head> 22 <body> 23 <form> 24 <input type="button" value="查看浏览器" onClick="validB()" > 25 </form> 26 </body> 27 </html>
9.screen
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>屏幕分辨率的高和宽</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 document.write( "屏幕宽度：" + screen.width+"px<br>"); 10 document.write( "屏幕高度：" + screen.height + "px"); 11 </script> 12 </body> 13 </html>
5秒返回效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>浏览器对象</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=gkb"/> 6 </head> 7 <body> 8 <!--先编写好网页布局--> 9 <H4>操作成功</H4> 10 11 <p> 12 13 <b id="seconds">5</b>秒后回到主页 <a href="window.history.back();">返回</a> 14 15 </p> 16 17 18 <script type="text/javascript"> 19 20 //获取显示秒数的元素，通过定时器来更改秒数。 21 var num = 5; 22 23 function fun(){ 24 25 document.getElementById("seconds").innerHTML = num; 26 27 num -=1; 28 29 if(num==0){ 30 31 clearInterval(i) 32 33 window.location.assign("http://www.imooc.com") 34 35 } 36 37 } 38 39 var i=setInterval(fun, 1000); 40 41 //通过window的location和history对象来控制网页的跳转。 42 43 </script> 44 </body> 45 </html>