关注我们

HTML - JS脚本

脚本是一小段程序，可以为您的网站增加交互性，如，脚本可以生成弹出警报框消息，或提供下拉菜单。该脚本可以使用JavaScript或VBScript编写。

外部脚本

如果要定义将在各种HTML文档中使用的函数，则最好将该函数保存在单独的JavaScript文件中，然后将该文件包含在HTML文档中。一个JavaScript文件的扩展名为.js，它将使用<script>标签包含在HTML文件中。

考虑无涯教程在 script.js 中使用JavaScript定义了一个小函数，该函数具有以下代码-

function Hello() {
   alert("Hello, World");
}

现在，在以下HTML文档中使用上述外部JavaScript文件-

复制代码

<!DOCTYPE html>
<html>

   <head>
      <title>Javascript External Script</title>
      <script src="/html/script.js" type="text/javascript"/></script>
   </head>

   <body>
      <input type="button" onclick="Hello();" name="ok" value="Click Me" />
   </body>

</html>

这将产生以下输出，您可以在其中尝试单击给定的按钮-

无涯教程网

内部脚本

您可以将脚本代码直接写入HTML文档。通常，使用<script>标签将脚本代码保留在文档的标题中，否则没有限制，您可以将源代码放在文档中的任何位置，但可以放在<script>标签内。

复制代码

<!DOCTYPE html>
<html>

   <head>
      <title>JavaScript 内部脚本</title>
      <base href="https://www.learnfk.com/" />
      
      <script type="text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type="button" onclick="Hello();" name="ok" value="Click Me" />
   </body>

</html>

这将产生以下输出，您可以在其中尝试单击给定的按钮-

无涯教程网

事件处理

事件处理程序不过是简单定义的函数，可以针对任何鼠标或键盘事件调用它们。

以下示例说明了如何编写事件处理程序。让无涯教程在文档的标题中编写一个简单的函数 EventHandler()。当任何用户将鼠标移到段落上时，将调用此函数。

复制代码

<!DOCTYPE html>
<html>

   <head>
      <title>事件处理程序 Example</title>
      <base href="https://www.learnfk.com/" />
      
      <script type="text/JavaScript">
         function EventHandler() {
            alert("I'm event handler!!");
         }
      </script>
   </head>

   <body>
      <p onmouseover="EventHandler();">Bring your mouse here to see an alert</p>
   </body>

</html>

现在，这将产生以下输出。将鼠标移到这一行上，然后查看输出-

链接：https://www.learnfk.comhttps://www.learnfk.com/html/html-javascript.html

来源：LearnFk无涯教程网

Noscript 标签

您还可以向浏览器不支持脚本的用户以及为浏览器禁用脚本选项的用户提供替代信息。您可以使用<noscript>标签执行此操作。

JavaScript Example:
<script type="text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

<noscript>Your browser does not support JavaScript!</noscript>

VBScript Example:
<script type="text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>

<noscript>Your browser does not support VBScript!</noscript>

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Midjourney入门实践课 -〔Jovi〕

好记忆不如烂笔头。留下您的足迹吧 :)