ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

js

2022-09-15 10:34:53  阅读:413  来源: 互联网

标签:脚本 文件 路径 HTML JavaScript 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 文件夹里的一个文件:

<img src="../images/picture.jpg" alt="Mountain">

 

 


好习惯

使用相对路径是个好习惯(如果可能)。

如果使用了相对路径,那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。

 

 

 

#################

标签:脚本,文件,路径,HTML,JavaScript,js,文件夹
来源: https://www.cnblogs.com/igoodful/p/16695624.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有