首页
会员中心
到顶部
到尾部
CSS教程

JavaScript 使用

时间:2020/11/2 12:58:24  作者:  来源:  查看:0  评论:0
内容摘要:JavaScript 使用JS 简介JS 输出<script> 标签在 HTML 中,JavaScript 代码必须位于 <script> 与 </script> 标签之间。实例<script>document.getElement...

JavaScript 使用

<script> 标签

在 HTML 中,JavaScript 代码必须位于 <script></script> 标签之间。

实例

<script>document.getElementById("demo").innerHTML = "我的第一段 JavaScript";</script>

亲自试一试

注释:旧的 JavaScript 例子也许会使用 type 属性:<script type="text/javascript">。

注释:type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

JavaScript 函数和事件

JavaScript 函数是一种 JavaScript 代码块,它可以在调用时被执行。

例如,当发生事件时调用函数,比如当用户点击按钮时。

提示:您将在稍后的章节学到更多有关函数和事件的知识。

<head> 或 <body> 中的 JavaScript

您能够在 HTML 文档中放置任意数量的脚本。

脚本可被放置与 HTML 页面的 <body><head> 部分中,或兼而有之。

<head> 中的 JavaScript

在本例中,JavaScript 函数被放置于 HTML 页面的 <head> 部分。

该函数会在按钮被点击时调用:

实例

<!DOCTYPE html><html><head><script>function myFunction() {    document.getElementById("demo").innerHTML = "段落被更改。";}</script></head><body><h1>一张网页</h1><p id="demo">一个段落</p><button type="button" onclick="myFunction()">试一试</button></body></html>

亲自试一试

<body> 中的 JavaScript

在本例中,JavaScript 函数被放置于 HTML 页面的 <body> 部分。

该函数会在按钮被点击时调用:

实例

<!DOCTYPE html><html><body> <h1>A Web Page</h1><p id="demo">一个段落</p><button type="button" onclick="myFunction()">试一试</button><script>function myFunction() {   document.getElementById("demo").innerHTML = "段落被更改。";}</script></body></html>

亲自试一试

提示:把脚本置于 <body> 元素的底部,可改善显示速度,因为脚本编译会拖慢显示。

外部脚本

脚本可放置与外部文件中:

外部文件:myScript.js

function myFunction() {   document.getElementById("demo").innerHTML = "段落被更改。";}

外部脚本很实用,如果相同的脚本被用于许多不同的网页。

JavaScript 文件的文件扩展名是 .js

如需使用外部脚本,请在 <script> 标签的 src (source) 属性中设置脚本的名称:

实例

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

亲自试一试

您可以在 <head><body> 中放置外部脚本引用。

该脚本的表现与它被置于 <script> 标签中是一样的。

注释:外部脚本不能包含 <script> 标签。

外部 JavaScript 的优势

在外部文件中放置脚本有如下优势:

  • 分离了 HTML 和代码
  • 使 HTML 和 JavaScript 更易于阅读和维护
  • 已缓存的 JavaScript 文件可加速页面加载

如需向一张页面添加多个脚本文件 - 请使用多个 script 标签:

实例

<script src="myScript1.js"></script><script src="myScript2.js"></script>

外部引用

可通过完整的 URL 或相对于当前网页的路径引用外部脚本:

本例使用完整的 URL 来链接至脚本:

实例

<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

亲自试一试

本例使用了位于当前网站上指定文件夹中的脚本:

实例

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

亲自试一试

本例链接了与当前页面相同文件夹的脚本:

实例

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

亲自试一试

您能够在 HTML 文件路径中学习更多有关文件路径的知识。



相关评论
广告联系QQ:45157718 点击这里给我发消息 电话:13516821613 杭州余杭东港路118号雷恩国际科技创新园  网站技术支持:黄菊华互联网工作室 浙ICP备06056032号