设为首页 加入收藏

TOP

松软科技带你学前端:JavaScript 使用
2019-09-30 16:49:37 】 浏览:41
Tags:松软 科技 前端 JavaScript 使用

<script> 标签

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

实例

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

  

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

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

java script 函数和事件

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

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

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

<head> 或 <body> 中的 java script

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

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

<head> 中的 java script

在本例中,java script 函数被放置于 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> 中的 java script

在本例中,java script 函数被放置于 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>

外部脚本

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

外部文件:myScript.js

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

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

java script 文件的文件扩展名是 .js。

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

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

外部 java script 的优势

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

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

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

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

外部引用

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

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

实例

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

 

】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇<input>/<textarea>.. 下一篇js验证小数或者整数

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目