转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> Web开发 >> 正文
菜鸟学习javascript实例教程         ★★★★

菜鸟学习javascript实例教程

作者:闵涛 文章来源:闵涛的学习笔记 点击数:3892 更新时间:2009/4/23 11:22:06

用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 onload="message()">

</body>
</html>


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

<html>
<head>
</head>

<body>

<script type="text/javascript">
document.write("欢迎光临网页教学网http://www.webjx.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"
onclick="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"
onclick="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"
onclick="myfunction('Good Morning!')"
value="In the Morning">

<input type="button"
onclick="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

[1] [2] [3] [4] [5] [6] [7]  下一页


[网页制作]Ultradev实例教程:5 做一个相对简单的网站后台(3)  [网页制作]Ultradev实例教程:5 做一个相对简单的网站后台(2)
[网页制作]Ultradev实例教程:5 做一个相对简单的网站后台(1)  [网页制作]Ultradev实例教程:4 插件的安装与使用
[网页制作]Ultradev实例教程:3.7 创建一个简单的查询  [网页制作]Ultradev实例教程:3.6 删除纪录
[网页制作]Ultradev实例教程:3.5 编辑数据库中的纪录  [网页制作]Ultradev实例教程:3.4 向数据库添加纪录
[网页制作]Ultradev实例教程:3.3 应用数据库创建动态网页  [网页制作]Ultradev实例教程:3.2 创建数据库连接
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台