javascript基础实例教程(一)

用JS显示文字的例子:

<html> <body>

<script type="text/javascript"> document.write("Hello World!") </script>

</body> </html>

用HTML标签来格式化文本的例子:

<html> <body>

<script type="text/javascript"> document.write("<h1>Hello World!</h1>") </script>

</body> </html>

书写JS位置的例子:

打开页面弹出窗口的例子

<html> <head> <script type="text/javascript"> function message() { alert("九网互联欢迎你的光临") } </script> </head>

<body οnlοad="message()">

</body> </html>

在BODY区内输出显示文本的例子:

<html> <head> </head>

<body>

<script type="text/javascript"> document.write("欢迎光临九网互联http://www.ninedns.com") </script>

</body> </html>

调用其它的一个JS文件的例子:

<html> <head> </head> <body>

<script src="xxx.js"> </script>

<p> The actual script is in an external script file called "xxx.js". </p>

</body> </html>

变量的使用

变量使用的例子:

<html> <body>

<script type="text/javascript"> var name = "Hege" document.write(name) document.write("<h1>"+name+"</h1>") </script>

<p>This example declares a variable, assigns a value to it, and then displays the variable.</p>

<p>Then the variable is displayed one more time, only this time as a heading.</p>

</body> </html>

函数的例子

函数使用的一个例子:

<html> <head>

<script type="text/javascript"> function myfunction() { alert("HELLO") } </script>

</head> <body>

<form> <input type="button" οnclick="myfunction()" value="Call function"> </form>

<p>By pressing the button, a function will be called. The function will alert a message.</p>

</body> </html>

带一个参数的函数的例子:

<html> <head>

<script type="text/javascript"> function myfunction(txt) { alert(txt) } </script>

</head> <body>

<form> <input type="button" οnclick="myfunction('Hello')" value="Call function"> </form>

<p>By pressing the button, a function with an argument will be called. The function will alert this argument.</p>

</body> </html>

不同的两个参数调用函数的例子:

<html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt) } </script> </head>

<body> <form> <input type="button" οnclick="myfunction('Good Morning!')" value="In the Morning">

<input type="button" οnclick="myfunction('Good Evening!')" value="In the Evening"> </form>

<p> When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it. </p>

</body> </html>

利用函数返回值的例子:

<html> <head>

<script type="text/javascript"> function myFunction() { return ("Hello, have a nice day!") } </script>

</head> <body>

<script type="text/javascript"> document.write(myFunction()) </script>

<p>The script in the body section calls a function.</p>

<p>The function returns a text.</p>

</body> </html>

带参数的函数返回值的例子:

<html> <head>

<script type="text/javascript"> function total(numberA,numberB) { return numberA + numberB } </script>

</head> <body>

<script type="text/javascript"> document.write(total(2,3)) </script>

<p>The script in the body section calls a function with two arguments, 2 and 3.</p>

<p>The function returns the sum of these two arguments.</p>

</body> </html>

条件语句的例子

简单条件语句的例子:

<html> <body>

<script type="text/javascript"> var d = new Date() var time = d.getHours()

if (time < 10) { document.write("<b>Good morning</b>") } </script>

<p> This example demonstrates the If statement. </p>

<p> If the time on your browser is less than 10, you will get a "Good morning" greeting. </p>

</body> </html>

if ... else 的条件语句的例子:

<html> <body>

<script type="text/javascript"> var d = new Date() var time = d.getHours()

if (time < 10) { document.write("<b>Good morning</b>") } else { document.write("<b>Good day</b>") } </script>

<p> This example demonstrates the If...Else statement. </p>

<p> 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. </p>

</body> </html>

用随机数产生连接的例子:

<html> <body>

<script type="text/javascript"> var r=Math.random() if (r>0.5) { document.write("<a href='http://www.w3schools.com'>Learn Web Development!</a>") } else { document.write("<a href='http://www.refsnesdata.no'>Visit Refsnes Data!</a>") } </script>

</body> </html>

多条件的语句实现的例子:

<html> <body> <script type="text/javascript"> var d = new Date() theDay=d.getDay() switch (theDay) { case 5:    document.write("Finally Friday") break case 6:    document.write("Super Saturday") break case 0:    document.write("Sleepy Sunday") break default:    document.write("I'm really looking forward to this weekend!") } </script>

<p>This example demonstrates the switch statement.</p>

<p>You will receive a different greeting based on what day it is.</p>

<p>Note that Sunday=0, Monday=1, Tuesday=2, etc.</p>

</body> </html>

循环的例子:

for循环的一个例子:

<html> <body>

<script type="text/javascript"> for (i = 0; i <= 5; i++) { document.write("The number is " + i) document.write("<br>") } </script>

<p>Explanation:</p>

<p>The for loop sets <b>i</b> equal to 0.</p>

<p>As long as <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>

<p><b>i</b> will increase by 1 each time the loop runs.</p>

</body> </html>

复杂循环的一个例子:

<html> <body>

<script type="text/javascript"> for (i = 1; i <= 6; i++) { document.write("<h" + i + ">This is header " + i) document.write("</h" + i + ">") } </script>

</body> </html>

按条件循环while的例子:

<html> <body>

<script type="text/javascript"> i = 0 while (i <= 5) { document.write("The number is " + i) document.write("<br>") i++ } </script>

<p>Explanation:</p>

<p><b>i</b> equal to 0.</p>

<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>

<p><b>i</b> will increase by 1 each time the loop runs.</p>

</body> </html>

do...while循环的例子:

<html> <body>

<script type="text/javascript"> i = 0 do { document.write("The number is " + i) document.write("<br>") i++ } while (i <= 5) </script>

<p>Explanation:</p>

<p><b>i</b> equal to 0.</p>

<p>The loop will run</p>

<p><b>i</b> will increase by 1 each time the loop runs.</p>

<p>While <b>i</b> is less than , or equal to, 5, the loop will continue to run.</p>

</body> </html>

字符串对象的例子:

 

检测字符串长度的例子:

<html> <body>

<script type="text/javascript"> var str="W3Schools is great!" document.write("<p>" + str + "</p>") document.write(str.length) </script>

</body> </html>

检测子字符串位置的例子:

<html> <body>

<script type="text/javascript"> var str="W3Schools is great!" var pos=str.indexOf("School") if (pos>=0) { document.write("School found at position: ") document.write(pos + "<br />") } else { document.write("School not found!") } </script>

<p>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!</p>

</body> </html>

检测子字符串是否存在的例子:

<html> <body>

<script type="text/javascript"> var str = "W3Schools is great!" document.write(str.match("great")) </script>

<p>This example tests if a string contains a specified word. If the word is found it returns the word.</p>

</body> </html>

取子字符串的例子:

<html> <body>

<script type="text/javascript"> var str="W3Schools is great!" document.write(str.substr(2,6)) document.write("<br /><br />") document.write(str.substring(2,6)) </script>

<p> 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. </p>

<p> 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. </p>

</body> </html>

转换字符串的大小写

<html> <body>

<script type="text/javascript"> var str=("Hello JavaScripters!") document.write(str.toLowerCase()) document.write("<br>") document.write(str.toUpperCase()) </script>

</body> </html>

数组对象的实例

数组简单应用的例子:

<html> <body>

<script type="text/javascript"> var famname = new Array(6) famname[0] = "Jan Egil" famname[1] = "Tove" famname[2] = "Hege" famname[3] = "Stale" famname[4] = "Kai Jim" famname[5] = "Borge"

for (i=0; i<6; i++) { document.write(famname[i] + "<br>") } </script>

</body> </html>

另一种使用数组的方法:

<html> <body>

<script type="text/javascript"> var famname = new Array("Jan Egil","Tove","Hege","Stale","Kai Jim","Borge")

for (i=0; i<famname.length; i++) { document.write(famname[i] + "<br>") } </script>

</body> </html>

使用数组的一些属性和方法:

<html> <body>

<script type="text/javascript"> var famname = new Array(3) famname[0] = "Jani" famname[1] = "Tove" famname[2] = "Hege"

document.write(famname.length + "<br>") document.write(famname.join(".") + "<br>") document.write(famname.reverse() + "<br>") document.write(famname.push("Ola","Jon") + "<br>") document.write(famname.pop() + "<br>") document.write(famname.shift() + "<br>") </script>

</body> </html>

数组的两个方法concat和slice

<html> <body>

<script type="text/javascript"> var famname = new Array(3) famname[0] = "Jani" famname[1] = "Tove" famname[2] = "Hege"

var famname2 = new Array(3) famname2[0] = "John" famname2[1] = "Andy" famname2[2] = "Wendy"

var famname3 = new Array("Stale","Borge")

document.write(famname.join() + "<br>") document.write(famname.concat(famname2) + "<br>") document.write(famname.concat(famname2,famname3) + "<br>") document.write(famname.slice(1) + "<br>") </script>

</body> </html>

日期相关例子:

显示今天的日期:

<html> <body>

<script type="text/javascript"> var d = new Date() document.write(d.getDate()) document.write(".") document.write(d.getMonth() + 1) document.write(".") document.write(d.getFullYear()) </script>

</body> </html>

显示当前的时间:

<html> <body>

<script type="text/javascript"> var d = new Date() document.write(d.getHours()) document.write(".") document.write(d.getMinutes()) document.write(".") document.write(d.getSeconds()) </script>

</body> </html>

设置日期:

<html> <body>

<script type="text/javascript"> var d = new Date() d.setFullYear("1990") document.write(d) </script>

</body> </html>

UTC时间:

<html> <body>

<script type="text/javascript"> var d = new Date() document.write(d.getUTCHours()) document.write(".") document.write(d.getUTCMinutes()) document.write(".") document.write(d.getUTCSeconds()) </script>

</body> </html>

显示当前的星期:

<html> <body> <script type="text/javascript"> var d=new Date() var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") document.write("Today is " + weekday[d.getDay()]) </script> </body> </html>

显示当前的日期和星期:

<html> <body> <script type="text/javascript"> 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(weekday[d.getDay()] + " ") document.write(d.getDate() + ". ") document.write(monthname[d.getMonth()] + " ") document.write(d.getFullYear()) </script> </body> </html>

一个走动的时间:

<html> <head> <script type="text/javascript"> var timer = null

function stop() { clearTimeout(timer) }

function start() { var time = new Date() var hours = time.getHours() var minutes = time.getMinutes() minutes=((minutes < 10) ? "0" : "") + minutes var seconds = time.getSeconds() seconds=((seconds < 10) ? "0" : "") + seconds var clock = hours + ":" + minutes + ":" + seconds document.forms[0].display.value = clock timer = setTimeout("start()",1000) } </script> </head> <body οnlοad="start()" οnunlοad="stop()"> <form> <input type="text" name="display" size="20"> </form> </body> </html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值