菜鸟学习javascript实例教程.doc

菜鸟学习javascript实例教程用JS显示文字的例子：document.write(Hello World!)用HTML标签来格式化文本的例子：document.write(Hello World!)书写JS位置的例子：打开页面弹出窗口的例子function message()alert(网页教学网欢迎你的光临)在BODY区内输出显示文本的例子：document.write(欢迎光临网页教学网)调用其它的一个JS文件的例子：The actual script is in an external script file called xxx.js.变量的使用变量使用的例子：var name = Hegedocument.write(name)document.write( name )This example declares a variable, assigns a value to it, and then displays the variable.Then the variable is displayed one more time, only this time as a heading.函数的例子函数使用的一个例子：function myfunction()alert(HELLO)By pressing the button, a function will be called. The function will alert a message.带一个参数的函数的例子：function myfunction(txt)alert(txt)By pressing the button, a function with an argument will be called. The function will alertthis argument.不同的两个参数调用函数的例子： function myfunction(txt) alert(txt) When you click on one of the buttons, a function will be called. The function will alertthe argument that is passed to it. 利用函数返回值的例子：function myFunction()return (Hello, have a nice day!)document.write(myFunction()The script in the body section calls a function.The function returns a text.带参数的函数返回值的例子：function total(numberA,numberB)return numberA numberBdocument.write(total(2,3)The script in the body section calls a function with two arguments, 2 and 3.The function returns the sum of these two arguments.条件语句的例子简单条件语句的例子：var d = new Date()var time = d.getHours()if (time 10) document.write(Good morning)This example demonstrates the If statement.If the time on your browser is less than 10,you will get a Good morning greeting.if . else 的条件语句的例子：var d = new Date()var time = d.getHours()if (time 10) document.write(Good morning)elsedocument.write(Good day)This example demonstrates the If.Else statement.If the time on your browser is less than 10,you will get a Good morning greeting.Otherwise you will get a Good day greeting.用随机数产生连接的例子：var r=Math.random()if (r0.5) document.write(Learn Web Development!)elsedocument.write(Visit Refsnes Data!)多条件的语句实现的例子：var d = new Date()theDay=d.getDay()switch (theDay)case 5:document.write(Finally Friday)breakcase 6:document.write(Super Saturday)breakcase 0:document.write(Sleepy Sunday)breakdefault:document.write(Im really looking forward to this weekend!)This example demonstrates the switch statement.You will receive a different greeting based on what day it is.Note that Sunday=0, Monday=1, Tuesday=2, etc.循环的例子：for循环的一个例子：for (i = 0; i = 5; i )document.write(The number is i)document.write()Explanation:The for loop sets i equal to 0.As long as i is less than , or equal to, 5, the loop will continue to run.i will increase by 1 each time the loop runs.复杂循环的一个例子：for (i = 1; i = 6; i )document.write(This is header i)document.write()按条件循环while的例子：i = 0while (i = 5)document.write(The number is i)document.write()i Explanation:i equal to 0.While i is less than , or equal to, 5, the loop will continue to run.i will increase by 1 each time the loop runs.do.while循环的例子：i = 0dodocument.write(The number is i)document.write()i while (i = 5)Explanation:i equal to 0.The loop will runi will increase by 1 each time the loop runs.While i is less than , or equal to, 5, the loop will continue to run.字符串对象的例子：检测字符串长度的例子：var str=W3Schools is great!document.write( str )document.write(str.length)检测子字符串位置的例子：var str=W3Schools is great!var pos=str.indexOf(School)if (pos=0)document.write(School found at position: )document.write(pos )elsedocument.write(School not found!)This example tests if a string contains a specified word. If the word is found it returns the position of the first character of the word in the original string. Note: The first position in the string is 0! 检测子字符串是否存在的例子：var str = W3Schools is great!document.write(str.match(great)This example tests if a string contains a specified word. If the word is found it returns the word.取子字符串的例子：var str=W3Schools is great!document.write(str.substr(2,6)document.write()document.write(str.substring(2,6)The substr() method returns a specified part of a string. If you specify (2,6) the returned string will be from the second character (start at 0) and 6 long.The substring() method also returns a specified part of a string. If you specify (2,6) it returns all characters from the second character (start at 0) and up to, but not including, the sixth character.转换字符串的大小写var str=(Hello JavaScripters!)document.write(str.toLowerCase()document.write()document.write(str.toUpperCase()数组对象的实例数组简单应用的例子：var famname = new Array(6)famname0 = Jan Egilfamname1 = Tovefamname2 = Hegefamname3 = Stalefamname4 = Kai Jimfamname5 = Borgefor (i=0; i6; i )document.write(famnamei )另一种使用数组的方法：var famname = new Array(Jan Egil,Tove,Hege,Stale,Kai Jim,Borge)for (i=0; ifamname.length; i )document.write(famnamei )使用数组的一些属性和方法：var famname = new Array(3)famname0 = Janifamname1 = Tovefamname2 = Hegedocument.write(famname.length )document.write(famname.join(.) )document.write(famname.reverse() )document.write(famname.push(Ola,Jon) )document.write(famname.pop() )document.write(famname.shift() )数组的两个方法concat和slicevar famname = new Array(3)famname0 = Janifamname1 = Tovefamname2 = Hegevar famname2 = new Array(3)famname20 = Johnfamname21 = Andyfamname22 = Wendyvar famname3 = new Array(Stale,Borge)document.write(famname.join() )document.write(famname.concat(famname2) )document.write(famname.concat(famname2,famname3) )document.write(famname.slice(1) )日期相关例子：显示今天的日期：var d = new Date()document.write(d.getDate()document.write(.)document.write(d.getMonth() 1)document.write(.)document.write(d.getFullYear()显示当前的时间：var d = new Date()document.write(d.getHours()document.write(.)document.write(d.getMinutes()document.write(.)document.write(d.getSeconds()设置日期：var d = new Date()d.setFullYear(1990)document.write(d)UTC时间：var d = new Date()document.write(d.getUTCHours()document.write(.)document.write(d.getUTCMinutes()document.write(.)document.write(d.getUTCSeconds()显示当前的星期：var d=new Date()var weekday=new Array(Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday)document.write(Today is weekdayd.getDay() 显示当前的日期和星期：var d=new Date()var weekday=new Array(Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday)var monthname=new Array(Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec)document.write(weekdayd.getDay() )document.write(d.getDate() . )document.write(monthnamed.getMonth() )document.write(d.getFullYear()一个走动的时间：var timer = nullfunction stop()clearTimeout(timer)function start()var time = new Date()var hours = time.getHours()var minutes = time.getMinutes()minutes=(minutes 10) ? 0 : ) minutesvar seconds = time.getSeconds()seconds=(seconds 10) ? 0 : ) secondsvar clock = hours : minutes : secondsdocument.forms0.display.value = clocktimer = setTimeout(start(),1000)数学对象的例子：document.write(Math.round(7.25)产生0-1之间的随机数的例子document.write(Math.random()产生0-10的随机数的例子no=Math.random()*10document.write(Math.round(no)求最大数的例子：document.write(Math.max(2,4)求最小数的例子：document.write(Math.min(2,4)Convert Celsius to Fahrenheitfunction convert(degree)if (degree=C)F=document.myform.celsius.value * 9 / 5 32document.myform.fahrenheit.value=Math.round(F)else C=(document.myform.fahrenheit.value -32) * 5 / 9document.myform.celsius.value=Math.round(C)Insert a number in either input field, and the number will be converted intoeither Celsius or Fahrenheit. degrees Celsiusequals degrees Fahrenheit Note that the Math.round method is used,so that the result will be returned as a whole number.转变字符为数字的例子function toUnicode()var str=document.myForm.myInput.valueif (str!=)unicode=str.charCodeAt(0)document.myForm.unicode.value=unicodeWrite a character:The characters Unicode:超级连接对象用按钮来改变连接位置的例子：function myHref()document.getElementById(myAnchor).innerText=Visit W3Schoolsdocument.getElementById(myAnchor).href=Visit Microsoft改变连接的打开方式的例子：function myTarget()document.getElementById(myAnchor).target=_blankVisit W3Schools Try the link before and after you have pressed the button! 使连接获得焦点和失去焦点a:active color:bluefunction getfocus()document.getElementById(w3s).focus()function losefocus()document.getElementById(w3s).blur()Visit W3S连接打开的方式function linkToAnchor(num)var win2=open(tryjs_anchor2.htm,secondLinkWindow,scrollbars=yes,width=250,height=200)win2.location.hash=numLinks and AnchorsClick on a button to display that anchor in window 2!按钮对象创建一个按钮function show_alert()alert(Hello World!)document.all(myButton).focus()显示按钮的名称The forms name is: 显示表单中各个项的名称function showFormElements(theForm)str=Form Elements: for (i=0; itheForm.length; i )str = n theFalert(str)First name: Last name: 副选框的选择和取消function check()var x=document.forms.myFormx0.checked=truefunction uncheck()var x=document.forms.myFormx0.checked=false表单中的副选框的选择与取消function check()coffee=document.forms0.coffeeanswer=document.forms0.answertxt=for (i=0;icoffee.length; i)if (coffeei.checked)txt=txt coffeei.value answer.value=You ordered a coffee with txtHow would you like your coffee?With creamWith su