你的位置:首页 > Java教程

[Java教程]JavaScript文档


 开始学习javaScript的小伙伴们,或者是正用到javaScipt的小猿们,都可以将它作为资料参考,基本知识还是很全的以及简单应用;黄色标出的是关键的知识点及解说,可以以它为节点快速找到自己想要知识点;
1 document.write(“<p>dddd</p>”); 2 <button type=”button” onclick=”alert(‘dd’)”>dd</button> 3 x=document.getElementById(“dd”); 4 x.innerHTML=”dd”; 5 .src.match(“dd”) 匹配正则表达式 中含有dd 6 如果有dd则它的值是dd ,否则是 null 7 8 x.style.color=”#ffffff” 给样式赋值 9 if(x==""||isNaN(x)) 验证输入的x是否数字10 <script src="myScript.js"></script> 引用脚本11 true false12 13 var cars=new Array();14 cars[0]="Audi";15 cars[1]="BMW";16 var cars=new Array("Audi","BMW","Volvo"); 数组 17 var person={firstname:"Bill", lastname:"Gates", id:5566};18 name=person.lastname;19 name=person["lastname"]; 都可以20 var x=message.toUpperCase(); 把文本转换为大写

函数:

 1  function dd() 2 { 3 return ; 4 } 5 <button onclick="myFunction('Bob','Builder')">点击这里</button> 6 JavaScript 变量的生命期从它们被声明的时间开始。 7 局部变量会在函数运行以后被删除。 8 全局变量会在页面关闭后被删除。 9 ===  全等(值和类型) x===5 为 true;x==="5" 为 false10 11 var person={fname:"John",lname:"Doe",age:25};12 13 for (var x in person)14  {15  txt=txt + person[x];16  }  遍历对象17 18 function myFunction()19 {20 try21  {22  var x=document.getElementById("demo").value;23  if(x=="")  throw "empty";24  if(isNaN(x)) throw "not a number";25  if(x>10)   throw "too high";26  if(x<5)   throw "too low";27  }28 catch(err)29  {30  var y=document.getElementById("mess");31  y.innerHTML="Error: " + err + ".";32  }33 }   自定义错误消息34 35 function validate_required(field,alerttxt)36 {37 with (field)38  {39  if (value==null||value=="")40   {alert(alerttxt);return false}41  else {return true}42  }43 }   验证44 with (field)45 {46 apos=value.indexOf("@")47 dotpos=value.lastIndexOf(".")48 if (apos<1||dotpos-apos<2) 49  {alert(alerttxt);return false}50 else {return true}51 }52 }53 getElementsByTagName 通过类名54 55 onmouseover-onmouseout 鼠标 移到 移出56 57 <div id="div1">58 <p id="p1">这是一个段落。</p>59 <p id="p2">这是另一个段落。</p>60 </div>61 62 <script>63 var para=document.createElement("p");64 var node=document.createTextNode("这是新段落。");65 para.appendChild(node);66 67 var element=document.getElementById("div1");68 element.appendChild(para);69 </script>70 71 <div id="div1">72 <p id="p1">这是一个段落。</p>73 <p id="p2">这是另一个段落。</p>74 </div>75 76 <script>77 var parent=document.getElementById("div1");78 var child=document.getElementById("p1");79 parent.removeChild(child);80 </script>          对象增加 移出 内容81 82 person=new Object();83   person.firstname="Bill" 84 person.lastname="Gates";   创建对象 并赋值85 86 function person(firstname,lastname,age,eyecolor)87 {88 this.firstname=firstname;89 this.lastname=lastname;90 this.age=age;91 this.eyecolor=eyecolor;92 }93 94 myFather=new person("Bill","Gates",56,"blue");95 96 document.write(myFather.firstname + " is " + myFather.age + " years old.");97 给 person创建对象 。对象有三个属性 ,分别取名


 1 x.toUpperCase(); 大写 2 continue 3  4 var txt=""; 5 function message() 6 { 7 try 8  { 9  adddlert("Welcome guest!");10  }11 catch(err)12  {13  txt="There was an error on this page.\n\n";14  txt+="Error description: " + err.message + "\n\n";15  txt+="Click OK to continue.\n\n";16  alert(txt);17  }18 }19 </script>  抛出错误

字符串样式
 1 var str="Hello world!" 2 document.write(str.indexOf("Hello") 定位 0 3  4 var txt="Hello World!" 5  6 document.write("<p>Big: " + txt.big() + "</p>") 7 document.write("<p>Small: " + txt.small() + "</p>") 8  9 document.write("<p>Bold: " + txt.bold() + "</p>")10 document.write("<p>Italic: " + txt.italics() + "</p>")11 12 document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")13 document.write("<p>Fixed: " + txt.fixed() + "</p>")14 document.write("<p>Strike: " + txt.strike() + "</p>")15 16 document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")17 document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")18 19 document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")20 document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")21 22 document.write("<p>Subscript: " + txt.sub() + "</p>")23 document.write("<p>Superscript: " + txt.sup() + "</p>")24 25 document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")   字符串样式

JavaScript方法;

 1 var str="Visit Microsoft!" 2 document.write(str.replace(/Microsoft/,"W3School")) 3 结果:Visit W3School! 4  5 document.write(Date()) 6 var d=new Date(); 7 document.write("从 1970/01/01 至今已过去 " + d.getTime() + " 毫秒"); 8  9 var d = new Date() 10 d.setFullYear(1992,10,3) 11 document.write(d)  设置时间 12  13 var d = new Date() 14 document.write (d.toUTCString())  将当日的日期(根据 UTC)转换为字符串。 15  16 var d=new Date() 17 var weekday=new Array(7) 18 weekday[0]="星期日" 19 weekday[1]="星期一" 20 weekday[2]="星期二" 21 weekday[3]="星期三" 22 weekday[4]="星期四" 23 weekday[5]="星期五" 24 weekday[6]="星期六" 25  26 document.write("今天是" + weekday[d.getDay()]) 27  28 function startTime() 29 { 30 var today=new Date() 31 var h=today.getHours() 32 var m=today.getMinutes() 33 var s=today.getSeconds() 34 // add a zero in front of numbers<10 35 m=checkTime(m) 36 s=checkTime(s) 37 document.getElementById('txt').innerHTML=h+":"+m+":"+s 38 t=setTimeout('startTime()',500) 39 } 40  41 function checkTime(i) 42 { 43 if (i<10)  44  {i="0" + i} 45  return i 46 } 47 </script> 48 </head> 49  50 <body onload="startTime()"> 51 <div id="txt"></div>  网页上显示钟 52  53 var mycars = new Array() 54 mycars[0] = "Saab" 55 mycars[1] = "Volvo" 56 mycars[2] = "BMW" 57  58 for (i=0;i<mycars.length;i++)// for (i in Array) 59 { 60 document.write(mycars[i] + "<br />") 61 }     数组遍历 62  63 var arr = new Array(3) 64 arr[0] = "George" 65 arr[1] = "John" 66 arr[2] = "Thomas" 67  68 var arr2 = new Array(3) 69 arr2[0] = "James" 70 arr2[1] = "Adrew" 71 arr2[2] = "Martin" 72  73 document.write(arr.concat(arr2))  合并输出各项值 74  75 var arr = new Array(3); 76 arr[0] = "George" 77 arr[1] = "John" 78 arr[2] = "Thomas" 79  80 document.write(arr.join()); 81  82 document.write("<br />"); 83  84 document.write(arr.join("."));  85  86 结果: 87 George,John,Thomas 88 George.John.Thomas 89  90 var arr = new Array(6) 91 arr[0] = "George" 92 arr[1] = "John" 93 arr[2] = "Thomas" 94 document.write(arr + "<br />") 95 document.write(arr.sort()) 96 结果: 97 George,John,Thomas,James,Adrew,Martin 98 Adrew,George,James,John,Martin,Thomas 99 排序 按A.B.C100 101 function sortNumber(a, b)102 {103 return a - b104 }105 106 var arr = new Array(6)107 arr[0] = "10"108 arr[1] = "5"109 arr[2] = "40"110 arr[3] = "25"111 arr[4] = "1000"112 arr[5] = "1"113 114 document.write(arr + "<br />")115 document.write(arr.sort(sortNumber))  排序 按值116 Math.min(7.25,7.30) 返回较大 或较小的数 .max(2,4)117 document.write(Math.random()) 返回随机数

常数

 1 圆周率 2 2 的平方根 3 1/2 的平方根 4 2 的自然对数 5 10 的自然对数 6 以 2 为底的 e 的对数 7 以 10 为底的 e 的对数 8 这是在 Javascript 中使用这些值的方法:(与上面的算数值一一对应) 9 Math.E10 Math.PI11 Math.SQRT212 Math.SQRT1_213 Math.LN214 Math.LN1015 Math.LOG2E16 Math.LOG10E    值

常数值

RegExp是正则表达式的缩写

 1 test() 方法检索字符串中的指定值。返回值是 true 或 false。 2 例子: 3 var patt1=new RegExp("e"); 4  5 document.write(patt1.test("The best things in life are free")); 6  7 exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。 8  9 10 var patt1=new RegExp("e");11 12 document.write(patt1.exec("The best things in life are free"));13 14 var patt1=new RegExp("e");15 16 document.write(patt1.test("The best things in life are free"));17 18 patt1.compile("d");19 20 document.write(patt1.test("The best things in life are free"));21 由于字符串中存在 "e",而没有 "d",以上代码的输出是:22 truefalse

正则表达式

BOM Window操作

 1 window.innerHeight - 浏览器窗口的内部高度 2 window.innerWidth - 浏览器窗口的内部宽度 3  4 window.open() - 打开新窗口 5 window.close() - 关闭当前窗口 6 window.moveTo() - 移动当前窗口 7 window.resizeTo() - 调整当前窗口的尺寸 8  9 screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏10 screen.availHeight11 12 location.hostname 返回 web 主机的域名13 location.pathname 返回当前页面的路径和文件名14 location.port 返回 web 主机的端口 (80 或 443)15 location.protocol 返回所使用的 web 协议(http:// 或 https://)16 location.href 属性返回当前页面的 URL。17 18 <script>19 function newDoc()20  {21  window.location.assign("http://www.w3school.com.cn")22  }23 </script>24 </head>25 <body>26 27 <input type="button" value="加载新文档" onclick="newDoc()">28 29 history.back() - 与在浏览器点击后退按钮相同30 history.forward() - 与在浏览器中点击按钮向前相同

对window的操作

confirm在弹出内输入内容,并控制时间弹出setTimeout

 1 function show_confirm() 2 { 3 var r=confirm("Press a button!"); 4 if (r==true) 5  { 6  alert("You pressed OK!"); 7  } 8 else 9  {10  alert("You pressed Cancel!");11  }12 }13 </script>14 </head>15 <body>16 17 <input type="button" onclick="show_confirm()" value="Show a confirm box" />18 19 20 21 22 function disp_prompt()23  {24  var name=prompt("请输入您的名字","Bill Gates")25  if (name!=null && name!="")26   {27   document.write("你好!" + name + " 今天过得怎么样?")28   }29  }30 </script>31 </head>32 <body>33 34 <input type="button" onclick="disp_prompt()" value="显示提示框" /> 输入35 36 function timedMsg()37 {38 var t=setTimeout("alert('5 秒!')",5000)39 }  5秒后显示40 41 42 var c=043 var t44 function timedCount()45 {46 document.getElementById('txt').value=c47 c=c+148 t=setTimeout("timedCount()",1000)49 }50 </script>51 </head>52 53 <body>54 55 <form>56 <input type="button" value="开始计时!" onClick="timedCount()">57 <input type="text" id="txt">58 </form>59 60 <p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>61 62 clearTimeout(t);

confirm and setTimeout

基本jQuery与JavaScript区别;

 1 JavaScript 方式: 2 function myFunction() 3 { 4 var obj=document.getElementById("h01"); 5 obj.innerHTML="Hello jQuery"; 6 } 7 onload=myFunction; 8 等价的 jQuery 是不同的: 9 jQuery 方式:10 function myFunction()11 {12 $("#h01").html("Hello jQuery");13 }14 $(document).ready(myFunction);

前端学习网站推荐: http://www.w3school.com.cn/  

本人正在努力学习中,希望在未来能为大家分享更多更深的知识;