HTML - Javascript介绍 首页HTMLHTML - Javascript

脚本是一小段程序,可以为您的网站增加交互性,如,脚本可以生成弹出警报框消息,或提供下拉菜单。该脚本可以使用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>

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

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>

这一章你学到了什么?做个笔记,好记忆不如烂笔头! 请将遇到的问题写入评论区中,大家一起进步。

祝学习愉快!(您也可以 选中需要修改的内容->右键->进行编辑)

点我分享笔记