js
###########################
为何学习 JavaScript?
JavaScript 是 web 开发者必学的三种语言之一:
1. HTML 定义网页的内容
2. CSS 规定网页的布局
3. JavaScript 对网页行为进行编程
<script> 标签
在 HTML 中,JavaScript 代码必须位于 <script> 与 </script> 标签之间。
<script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script>
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 = "Paragraph changed."; } </script> </head> <body> <h1>A Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> </body> </html>
<!DOCTYPE html> <html> <body> <h1>A Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </body> </html>
外部脚本
脚本可放置与外部文件中:
外部文件:myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
外部脚本很实用,如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本,请在 <script> 标签的 src (source) 属性中设置脚本的名称:
<script src="myScript.js"></script>
外部 JavaScript 的优势
在外部文件中放置脚本有如下优势:
- 分离了 HTML 和代码
- 使 HTML 和 JavaScript 更易于阅读和维护
- 已缓存的 JavaScript 文件可加速页面加载
如需向一张页面添加多个脚本文件 - 请使用多个 script 标签:
实例
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
外部引用
可通过完整的 URL 或相对于当前网页的路径引用外部脚本:
本例使用完整的 URL 来链接至脚本:
实例
<script src="https://www.w3schools.cn/js/myScript1.js"></script>
本例使用了位于当前网站上指定文件夹中的脚本:
<script src="/js/myScript1.js"></script>
本例链接了与当前页面相同文件夹的脚本:
<script src="myScript1.js"></script>
文件路径描述文件在网站文件夹结构中的位置。
文件路径实例
路径 描述
<img src="picture.jpg">
picture.jpg 位于与当前网页相同的文件夹
<img src="images/picture.jpg">
picture.jpg 位于当前文件夹的 images 文件夹中
<img src="/images/picture.jpg">
picture.jpg 当前站点根目录的 images 文件夹中
<img src="../picture.jpg">
picture.jpg 位于当前文件夹的上一级文件夹中
HTML 文件路径
文件路径描述了网站文件夹结构中某个文件的位置。
文件路径会在链接外部文件时被用到:
- 网页
- 图像
- 样式表
- JavaScripts
绝对文件路径
绝对文件路径是指向一个因特网文件的完整 URL:
<img src="https://www.w3schools.cn/images/picture.jpg" alt="Mountain">
相对路径
相对路径指向了相对于当前页面的文件。
在本例中,文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件:
<img src="/images/picture.jpg" alt="Mountain">
在本例中,文件路径指向了位于当前文件夹中 images 文件夹里的一个文件:
<img src="images/picture.jpg" alt="Mountain">
在本例中,文件路径指向了位于当前文件夹的上一级文件夹中 images 文件夹里的一个文件:
好习惯
使用相对路径是个好习惯(如果可能)。
如果使用了相对路径,那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。
#################