【JavaScript】JavaScript 简介 ② ( JavaScript 书写方式 | 内联 JavaScript | 内嵌 JavaScript | 外部 JavaScript )

这篇具有很好参考价值的文章主要介绍了【JavaScript】JavaScript 简介 ② ( JavaScript 书写方式 | 内联 JavaScript | 内嵌 JavaScript | 外部 JavaScript )。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。





一、JavaScript 书写方式



与 CSS 类似 , JavaScrip 有 3 种 书写方式 , 分别是 :

  • 内联 ( Inline ) JavaScript 脚本 ;
  • 内嵌 ( Internal ) JavaScript 脚本 ;
  • 外部 ( External ) JavaScript 脚本 ;

1、内联 JavaScript


将 单行 或 少量 JavaScrip 代码 直接在 HTML 标签元素 中 的 onclick / onload / onmouseover 等事件 中 , 这种 JavaScrip 书写方式 称为 " 内联 JavaScript " ;


内联 JavaScrip 优缺点 :

  • 优点 : 用法比较直观 , 如果只需要 进行 简单的 JavaScrip 交互 , 适合使用该书写方式 ;
  • 缺点 :
    • 可读性差 , 维护难度高 , 当代码量增大时几乎不可维护 ;
    • 将 JavaScript 与 HTML 结构混合在一起 耦合性 很高 ;
    • 引号容易出错 , 尤其是 多层引号 嵌套匹配时 , 需要使用 双引号 与 单引号 交错使用 ;

代码示例 : onclick 属性值 写在 双引号 中 , 如果在 双引号中 写一行 JavaScrip 脚本 , 涉及到 字符串内容时 , 使用 单引号 ;

<!-- 1. 内联 ( Inline ) JavaScript 脚本 -->
<input type="button" value="按钮" onclick="alert('内联 ( Inline ) JavaScript 脚本')">

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
</head>

<body>
    <!-- 1. 内联 ( Inline ) JavaScript 脚本 -->
    <input type="button" value="按钮" onclick="alert('内联 ( Inline ) JavaScript 脚本')">
</body>

</html>

执行效果 :

【JavaScript】JavaScript 简介 ② ( JavaScript 书写方式 | 内联 JavaScript | 内嵌 JavaScript | 外部 JavaScript ),JavaScript,javascript,开发语言,前端,HTML,css,JavaScript书写方式,JavaScript

点击按钮后 , 弹出 如下 对话框 :
【JavaScript】JavaScript 简介 ② ( JavaScript 书写方式 | 内联 JavaScript | 内嵌 JavaScript | 外部 JavaScript ),JavaScript,javascript,开发语言,前端,HTML,css,JavaScript书写方式,JavaScript


2、内嵌 JavaScript


在 HTML 文件的 <head> 或 <body> 标签 中 , 可以使用 <script> 标签来包含 JavaScript 代码 , 这种书写方式称为 内嵌 JavaScript ;


内嵌 JavaScrip 优缺点 :

  • 优点 : 该书写方式可以在 一个位置集中管理 JavaScrip 代码 , 比 内联 JavaScript 方式 维护性更强 ;
  • 缺点 : JavaScript 脚本代码 与 HTML 标签布局 结构 写在一个 HTML 页面中 , 不利于大型项目或多人协作项目的维护 ;

代码示例 :

<head>
    <script>
        // 2. 内嵌 ( Internal ) JavaScript 脚本
        alert("内嵌 ( Internal ) JavaScript 脚本");
    </script>
</head>

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 2. 内嵌 ( Internal ) JavaScript 脚本
        alert("内嵌 ( Internal ) JavaScript 脚本");
    </script>
</head>

<body>
    <!-- 1. 内联 ( Inline ) JavaScript 脚本 -->
    <!-- <input type="button" value="按钮" οnclick="alert('内联 ( Inline ) JavaScript 脚本')"> -->
</body>

</html>

展示效果 :

【JavaScript】JavaScript 简介 ② ( JavaScript 书写方式 | 内联 JavaScript | 内嵌 JavaScript | 外部 JavaScript ),JavaScript,javascript,开发语言,前端,HTML,css,JavaScript书写方式,JavaScript
刷新页面后 , 即可弹出 对话框 :
【JavaScript】JavaScript 简介 ② ( JavaScript 书写方式 | 内联 JavaScript | 内嵌 JavaScript | 外部 JavaScript ),JavaScript,javascript,开发语言,前端,HTML,css,JavaScript书写方式,JavaScript


3、外部 JavaScript


首先 , 将 JavaScript 脚本代码写在一个 单独的 .js 源码文件中 ,

// 3. 外部 ( External ) JavaScript 脚本
alert("外部 ( External ) JavaScript 脚本");

然后 , 在 HTML 文件中使用 <script> 标签的 src 属性来引用它 ,

<script src="my.js"></script>

这种书写方式称为 " 外部 JavaScript " ;


注意 : 引入 js 文件时 , <script src="my.js"></script> , script 标签要空着 , 不能写任何代码内容 ;


外部 JavaScrip 优缺点 :

  • 优点 :
    • HTML 文件 展示 标签结构信息 , JavaScript 脚本代码 负责行为信息 , 维护性高 , 代码可重用 ;
    • JavaScrip 代码量较大时 , 适合使用 ;
  • 缺点 : 获取 JavaScrip 脚本文件需要进行 额外的 HTTP 请求 ;

代码示例 :

  • JavaScrip 脚本代码 :
// 3. 外部 ( External ) JavaScript 脚本
alert("外部 ( External ) JavaScript 脚本");
  • HTML 网页代码 :
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 2. 内嵌 ( Internal ) JavaScript 脚本
        //alert("内嵌 ( Internal ) JavaScript 脚本");
    </script>

    <!-- 3. 引入 外部 ( External ) JavaScript 脚本 -->
    <script src="my.js"></script>
</head>

<body>
    <!-- 1. 内联 ( Inline ) JavaScript 脚本 -->
    <!-- <input type="button" value="按钮" οnclick="alert('内联 ( Inline ) JavaScript 脚本')"> -->
</body>

</html>

展示效果 :

【JavaScript】JavaScript 简介 ② ( JavaScript 书写方式 | 内联 JavaScript | 内嵌 JavaScript | 外部 JavaScript ),JavaScript,javascript,开发语言,前端,HTML,css,JavaScript书写方式,JavaScript
刷新页面后 , 显示如下对话框 :
【JavaScript】JavaScript 简介 ② ( JavaScript 书写方式 | 内联 JavaScript | 内嵌 JavaScript | 外部 JavaScript ),JavaScript,javascript,开发语言,前端,HTML,css,JavaScript书写方式,JavaScript文章来源地址https://www.toymoban.com/news/detail-844072.html

到了这里,关于【JavaScript】JavaScript 简介 ② ( JavaScript 书写方式 | 内联 JavaScript | 内嵌 JavaScript | 外部 JavaScript )的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript基础(27)_内联样式的获取和修改、获取元素当前显示的样式

    内联样式的获取和修改 获取元素的内联样式: 修改元素的内联样式: 注意: 1、如果CSS的样式名中含有-,这种名称在JS中是不合法的,会被认为是运算符-,因此,需要将这种样式名修改为 驼峰命名法 ,去掉-,然后将-后的字母 大写 。 2、内联样式有较高的优先级,所以通

    2024年01月18日
    浏览(8)
  • 【JavaScript】JavaScript 变量 ① ( JavaScript 变量概念 | 变量声明 | 变量类型 | 变量初始化 | ES6 简介 )

    JavaScript 变量 是用于 存储数据 的 容器 , 通过 变量名称 , 可以 获取 / 修改 变量 中的数据 ; 变量 的 本质 是 存放数据 的 一块内存空间 ; 在 JavaScript 中, 使用 var / let / const 来声明变量 , 每个变量都有一个 变量名 和 一个 变量值 ; JavaScript 变量声明 : var : 使用

    2024年03月15日
    浏览(12)
  • 【前端】JavaScript简介

    人不走空                                                                              目录         🌈个人主页:人不走空       💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 JavaScript的基础 JavaScript进阶 现代Web开发与JavaScript JavaScript的未来 作

    2024年02月21日
    浏览(8)
  • JavaScript简介

    目录 概要: 说明: 学习JS的原因: JS可以干什么: 了解JavaScript: 前言: JavaScript的历史: JavaScript与ECMAScript: 如何运行JavaScript以及JavaScrip的特点: 如何运行JavaScript: JavaScript的特点: 编写JavaScript代码并运行: 在HTML文档中编写JavaScript代码: 在脚本中编写JavaScript代码:

    2024年04月14日
    浏览(2)
  • Javascript jQuery简介

    ✨前言✨ 1.jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式

    2024年01月21日
    浏览(32)
  • JavaScript (五) -- JavaScript 事件(事件的绑定方式)

    目录 1.  JavaScript 事件的概述: 2.  事件的绑定(两种方式):         JavaScript事件是 指当网页中某个元素被触发时,可以执行一些JS代码来处理这个事件 ,例如鼠标单击、鼠标移动、键盘按键等。事件通常被认为是浏览器与用户交互的方式之一。       

    2024年02月03日
    浏览(11)
  • 1、apache-hive-3.1.2简介及部署(三种部署方式-内嵌模式、本地模式和远程模式)及验证详解

    1、apache-hive-3.1.2简介及部署(三种部署方式-内嵌模式、本地模式和远程模式)及验证详解 2、hive相关概念详解–架构、读写文件机制、数据存储 3、hive的使用示例详解-建表、数据类型详解、内部外部表、分区表、分桶表 4、hive的使用示例详解-事务表、视图、物化视图、DDL

    2024年02月17日
    浏览(14)
  • 【JavaScript】JavaScript 简介 ④ ( 解释型语言 和 编译型语言 | 计算机程序本质 | 编译器 和 解释器 )

    计算机 的 程序 是在 CPU 上执行的 , CPU 上执行的只有匹配该 CPU 的机器码指令 , 不同类型的 CPU 执行的 机器码指令 格式不同 , X86 和 ARM 执行的 机器码 指令格式是不同的 ; 机器码指令 是 二进制的 , 所有在 计算机 上执行的程序 , 都是 若干 二进制机器码 的集合 ; 计算机 只能执

    2024年03月22日
    浏览(13)
  • HTML--JavaScript--引入方式

    啊哈~~~基础三剑看到第三剑,JavaScript HTML用于控制网页结构 CSS用于控制网页的外观 JavaScript用于控制网页的行为 引入的三种方式: 外部JavaScript 内部JavaScript 元素事件JavaScript 一般情况下网页最好是都引用外部JavaScript 使用方式: src source 源的意思 就是直接把JavaScript放到HTM

    2024年01月15日
    浏览(23)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包