• JavaScript 在 HTML 中的应用


    1. 概述

    Web 页面使用 JavaScript 有 3 种方法,

    • 在页面中直接嵌入 JavaScript 代码;
    • 链接外部 JavaScript 文件;
    • 作为特定标签的属性值使用;

    2. 在页面中直接嵌入 JavaScript 代码

    HTML 文档中能直接使用 标记将 JavaScript 整个脚本嵌入到其中,在 HTML 文档中可以使用多个 标记,每个标记中能包含多个 JavaScript 的代码集合,且各个 代码之间能相互访问,如同将所有代码放在一对标签中的效果;
    20220602

    2.1 language 属性

    language 属性指定在 HTML 中使用的脚本语言及其版本;
    language 属性语法格式如下所示:

    <script language="javaScritp">
    
    • 1

    2.2 src 属性

    src 属性用来指定外部脚本文件的路径,外部脚本文件通常使用 JavaScript 脚本,其扩展名为== .js
    src 属性语法格式如下所示:

    <script src="a.js">
    
    • 1

    2.3 type 属性

    type 属性用来指定 HTML 中使用的脚本及其版本,此属性在 HTML 4.0 标准开始,推荐使用 type 属性代替 language 属性;
    type 属性语法格式如下所示:

    <script type="text/javascript">
    
    • 1

    2.4 defer 属性

    defer 属性的作用是文档完毕在执行脚本,当脚本语言不需要立即运行时,设置 defer 属性后,浏览器将不必等待脚本语言装载,这样页面会加载会更快;
    但当有一些脚本需要在页面中加载过程中或加载完成后立即执行时,就不需要使用 defer 属性;
    defer 属性使用格式如下所示:

    <script defer>
    
    • 1

    3. 链接外部 JavaScript 文件

    web 页面中能引入 JavaScript 的一种方式是链接外部 JavaScript 文件的形式;
    若脚本代码比较复杂或是同一段代码能被多个页面所使用,则能将这些脚本代码放置在一个单独的文件中(保存文件的扩展名为 .js),在需要该代码的 web 页面中链接 JavaScript 文件;
    web 页面链接外部 JavaScript 文件的语法格式如下所示:

    <script type="text/javascript" src="javascript.js"></scritp>
    
    • 1

    注意:

    1. 若外部 JavaScript 文件报存在本机中,src 属性能是绝对路径或相对路径;若外部 JavaScript 文件报存在其他服务器中,src 属性需要指定绝对路径;
    2. 在外部 JS 文件中,不能将脚本代码用 标记括起来;
    3. 在使用 src 属性引用外部 JavaScript 文件时,标签中不能包含其他 JavaScript 代码;
    4. 结束标签不能省略;

    3. 作为标签的属性值使用

    3.1 通过 “JavaScript:” 调用

    在 HTML 中,能通过== “JavaScript:”==的方式来调用 JavaScript 的函数或方法;
    示例如下:

    <a href="javascript:alert('您单击了这个超链接')点击这里</a>
    
    • 1

    上述例子中==“JavaScript:”== 能调用 alter() 方法,但该方法不是在浏览器解析到 ==“JavaScript:”==时就立即执行,而是在单击该超链接时才会执行;

    3.2 与事件结合使用

    JavaScript 直接很多事件,事件能影响用户的操作,如 单击鼠标左键、鼠标悬停等;
    与事件结合,能能调用执行 JavaScript 的方法或函数;
    示例如下:

    <input type="button" value="单击按钮" onclick="alert('您单击了这个按钮')"> 
    
    • 1

    上述代码中,onclick 是单击事件,即当单击对象时就会触发 JavaScript 的方法或函数;

  • 相关阅读:
    行为型模式-空对象模式
    IBM Spectrum LSF Application Center 提供单一界面来管理应用程序、用户、资源和数据
    海康工业相机连续存图、录像功能介绍
    Android 应用权限
    面试题-React(十四):什么是高阶组件(HOC)及其作用
    《七月集训》(第二十天)——二叉搜索树
    物联网的挑战
    微服务实战系列之Nacos
    Vue中组件化编码使用、实现组件之间的参数传递(实战练习二)
    计算机的核心:ALU(算术和逻辑单元)
  • 原文地址:https://blog.csdn.net/weixin_43960383/article/details/126129976