这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 与 html 的结合方法,利用实例向大家介绍 JavaScript 与 HTML 是如何结合的,内容很详细,感兴趣的小伙伴们可以参考一下
HTML 中的 JavaScript 脚本必须位于标签之间,JavaScript 脚本可被放置在 HTML 页面的标签和标签中,这种视情况而定,一般放在标签内。 一、<script> 标签 如需在 HTML 页面中插入 JavaScript 脚本,请使用会告诉 JavaScript 在何处开始 和结束。之间的代码行包含了 JavaScript:
- <span style="font-size:18px;">
- <script type="text/javascript">
- alert("欢迎来到JavaScript世界!!!");
- </script>
- </span>
您无需理解上面的代码。只需明白,浏览器会解释并执行位于 之间的 JavaScript。那些老 旧的实例可能会在 以及 HTML5 中的默认脚本语言。鉴于刚刚学习 JavaScript 语言的可以使用! 二、<body> 中的 JavaScript 在本例中,JavaScript 会在页面加载时向 HTML 的写文本: 实例代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- JavaScript脚本语言
- </title>
- >
- </head>
- <body>
- <p>
- JavaScript 能够直接写入 HTML 输出流中:
- </p>
- <script type="text/javascript">
- document.write("<h1>This is a heading</h1>");
- document.write("<p>This is a paragraph.</p>");
- </script>
- <p>
- 您只能在 HTML 输出流中使用
- <strong>
- document.write
- </strong>
- 。 如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
- </p>
- </body>
- </html>
我们先不管 JavaScript 代码怎么写和怎么运行,先来看运行结果:
三、JavaScript 函数和事件 上面例子中的 JavaScript 语句,会在页面加载时执行。通常,我们需要在某个事件发生时执行代码,比如当用户 点击按钮时。如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。
四、<head> 或 <body> 中的 JavaScript 您可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的 或 部分中,或者同时存在于 两个部分中。通常的做法是把函数放入 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置, 不会干扰页面的内容。
五、<head> 中的 JavaScript 函数 在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的部分。该函数会在点击按钮时被调用: 实例代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- JavaScript脚本语言
- </title>
- <script type="text/javascript">
- function myFunction() {
- document.getElementById("demo").innerHTML = "My First JavaScript Function";
- }
- </script>
- </head>
- <body>
- <h1>
- My web Page
- </h1>
- <p id="demo">
- A Paragraph.
- </p>
- <button type="button" onclick="myFunction()">
- 点击这里
- </button>
- </body>
- </html>
运行的结果为:
点击按钮后的效果为:
六、<body> 中的 JavaScrip 函数 在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的部分。该函数会在点击按钮时被调用: 实例代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- JavaScript脚本语言
- </title>
- </head>
- <body>
- <h1>
- My First Web Page
- </h1>
- <p id="demo">
- A Paragraph.
- </p>
- <button type="button" onclick="myFunction()">
- 点击这里
- </button>
- <script type="text/javascript">
- function myFunction() {
- document.getElementById("demo").innerHTML = "My First JavaScript Function";
- }
- </script>
- </body>
- </html>
运行的结果与上述五的结果一样! 提示:我们把 JavaScript 放到了页面代码的底部,这样就可以确保在
元素创建之后再执行脚本。
七、外部的 JavaScript 我们也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件,请在们提倡使用外部的 JavaScript 方式,一般我们也采用分离的方式连接到 HTML 文档中。实例 HTML 代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- JavaScript脚本语言
- </title>
- <script type="text/javascript" src="/js/myScript.js">
- </script>
- </head>
- <body>
- <h1>
- My Web Page
- </h1>
- <p id="demo">
- A Paragraph.
- </p>
- <button type="button" onclick="myFunction()">
- 点击这里
- </button>
- <p>
- <b>
- 注释:
- </b>
- myFunction 保存在名为 "myScript.js" 的外部文件中。
- </p>
- </body>
- </html>
myScript.js 代码:
- function myFunction()
- {
- document.getElementById("demo").innerHTML="My First JavaScript Function";
- }
运行的结果和上述一致! 提示:在中引用脚本文件都是可以的。实际运行效果与您在 外部脚本不能包含
来源: http://www.phperz.com/article/17/0408/268559.html