JavaScript代码的三种引入方式【操作演示】

在网页中编写JavaScript代码时，需要先引入JavaScript代码。JavaScript代码有3种引入方式，分别是行内式、嵌入式和外链式，下面分别进行讲解。

行内式是将JavaScript代码作为HTML标签的属性值使用。例如，在单击超链接“test”时，弹出一个警告框提示“Hello”，示例代码如下：

需要说明的是，行内式只有在临时测试或者特殊情况下使用，一般情况下不推荐使用行内式，因为行内式有如下缺点。

(1)行内式可读性较差，尤其是在HTML文件中编写大量JavaScript代码时，不方便阅读。

(2)行内式在遇到多层引号嵌套的情况时，引号非常容易混淆，导致代码出错。

嵌入式(或称内嵌式)使用<scrip>标签包裹JavaScript代码，直接编写到HTML文件中，通常将其放到<head>标签<body>或标签中。<scrip>标签的type属性用于告知浏览器脚本类型，HTML.5中该属性的默认值为“text/javascript”，因此在使用HTML5时可以省略ype属性。嵌入式的示例代码如下：

外链式(或称外部式)是将JavaScript 代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用<script>标签的src属性引人“js”文件。外链式适合javascript代码量较多的情况。在html页面中引入“js”文件，示例代码如下：

上述代码表示引入当前目录下的tesL.js文件。需要注意的是，外链式的标签内不可以编写JavaScript 代码。

为了帮助初学者更好地理解外链式，下面利用外链式实现浏览网页时在页面中自动弹出警告框。创建Example02.html文件，引入Example02.js文件，具体代码如例1-2所示。

标签的src属性设置了要引入的文件为Example02.js。

创建Example02.js文件，在该文件中编写如下代码：

保存代码，在浏览器中访问Example02.html文件，页面效果与例1-1相同。

以上讲解了JavaScript的3种引入方式。现代网页开发中提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScrixt这3部分代码，这样更有利于文件的维护。当需要编写大量的、逻辑复杂的、具有特定功能的JavaScrigt代码时，推荐使用外链式。外链式相比嵌入式，具有以下3点优势：

(1)外链式存在于独立文件中，有利于修改和维护，而嵌人式会导致HTML代码与JavaScript代码混合在一起。

(2)外链式可以利用浏览器缓存提高速度。例如，在多个页面中引入相同的JavaScript文件时，打开第1个页面后，浏览器将JavaScript文件缓存下来，下次打开其他页面时就不用重新下载该文件了。

(3)外链式有利于HTML页h代码结构化，把大段的JavaScript代码分离到HTML页面之外，既美观，也方便文件级别的代码复用。

JavaScript 神奇语法糖：让你的代码更简洁高效掌握这些简写技巧

最近在阅读一些 JavaScript 代码时，我们发现很多时候可以用更简洁的语法来完成相同的操作，这便是 “语法糖” 的魅力。JavaScript 提供了许多这样的语法糖，可以帮助我们减少代码量，提升开发效率，并且让代码更易读。今天，我们就来一起探索这 40 个神奇的 “糖果”，看看它们是如何让我们的代码变得更优雅的。

你是否曾经觉得 JavaScript 代码写起来过于冗长？或者在阅读别人的代码时，看到一些 “奇奇怪怪” 的语法感到困惑？其实，这些 “奇奇怪怪” 的语法很可能就是 JavaScript 的语法糖。掌握这些语法糖，不仅能让你的代码更简洁，还能提升你的开发效率。本文将带你一步步揭开 JavaScript 40 个语法糖的神秘面纱。

长代码：

简写：

是不是简洁了很多？当我们需要一次性声明并初始化多个变量时，这种写法非常方便。

长代码：

简写：

利用数组解构，可以轻松实现变量的交换，告别繁琐的临时变量。

长代码：

简写：

三元运算符是简化 if-else 逻辑的利器，让代码更紧凑。

长代码：

简写：

使用模板字符串，我们可以直接在字符串中嵌入变量，避免繁琐的字符串拼接。

长代码：

简写：

ES6 的默认参数语法，使得函数参数的默认值设置更加简洁直观。

长代码：

简写：

当对象的属性名与变量名相同时，可以使用这种简写方式，让代码更清爽。

长代码：

简写：

箭头函数不仅更简洁，还能自动绑定 this 上下文，简化了回调函数的书写。

长代码：

简写：

利用 || 的短路特性，可以简洁地为变量设置默认值。

长代码：

简写：

对象解构可以快速从对象中提取属性，赋值给对应的变量。

长代码：

简写：

数组解构和对象解构类似，可以方便地从数组中提取元素。

长代码：

简写：

利用计算属性名，可以使用变量动态地设置对象的属性名。

长代码：

简写：

使用展开运算符，可以简洁地合并多个对象。

长代码：

简写：

当属性值为函数时，可以省略 function 关键字。

长代码：

简写：

利用展开运算符，可以简洁地合并多个数组。

长代码：

简写：

剩余参数可以将函数的多余参数收集到一个数组中。

长代码：

简写：

空值合并运算符 (??) 只有当左侧为 null 或 undefined 时，才会返回右侧的值，更加精确地处理空值情况。

长代码：

简写：

可选链 (?.) 可以避免访问深层嵌套对象时出现 undefined 错误。

长代码：

简写：

使用 && 的短路特性，可以在满足条件时执行函数。

长代码：

简写：

使用箭头函数和括号，可以创建立即执行的函数。

长代码：

简写：

指数运算符 ** 是计算幂的简洁写法。

长代码：

简写：

for…of 循环更简洁地遍历数组或可迭代对象。

长代码：

简写：

includes 方法判断数组是否包含某个值，更易读。

长代码：

简写：

Array.from() 可以将类数组对象或可迭代对象转换为数组。

长代码：

简写：

find() 方法可以查找数组中符合条件的第一个元素。

长代码：

简写：

findIndex() 方法查找数组中符合条件的第一个元素的索引。

长代码：

简写：

some() 方法用于检测数组中是否有满足指定条件的元素。

长代码：

简写：

every() 方法检测数组中是否所有元素都符合指定条件。

长代码：

简写：

reduce() 方法用于对数组中的每个元素执行一个由您提供的 reducer 函数，将其汇总为单个返回值。

长代码:

简写:

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

长代码:

简写:

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

长代码:

简写:

padStart() 和 padEnd() 方法在字符串的开头和结尾填充指定字符串，直到达到指定长度。

长代码：

简写:

Object.keys() 方法返回一个由给定对象自身的可枚举属性名称组成的数组。

长代码:

简写:

Object.values() 方法返回一个由给定对象自身的所有可枚举属性值组成的数组。

长代码:

简写:

Object.entries() 方法返回一个由给定对象自身可枚举属性的 [key, value] 对组成的数组。

长代码:

简写:

Set 数据结构只存储唯一值，可用于快速去重。

长代码:

简写:

import() 可用于动态导入模块，按需加载。

长代码:

简写:

标签模板允许你使用一个函数来解析模板字符串。

长代码:

简写:

async/await 是处理异步操作的更优雅的方式。

长代码:

简写:

BigInt 可以表示任意精度的整数。

长代码:

简写:

globalThis 提供了一种访问全局对象的标准方式，在各种环境中均适用。

本文介绍了 JavaScript 中常用的 40 种语法糖，涵盖变量声明、对象操作、函数简写和现代语法特性等多个方面。掌握这些语法糖，可以使代码更简洁、更易读，并提升开发效率。我们鼓励大家在实际项目中尝试这些技巧，感受它们带来的便利。

现在，请思考一下：你在日常开发中还遇到过哪些让你惊艳的语法糖？欢迎在评论区分享你的经验和见解，让我们一起进步！

Javascript简介

Javascript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

是一种解释性脚本语言（代码不进行预编译）。

主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

嵌入动态文本于HTML页面。

对浏览器事件做出响应。

读写HTML元素。

该数据被提交到服务器之前验证数据。

检测访客的浏览器信息。

控制cookies，包括创建和修改等。

Js可以找到所有的html对象,对这些对象做处理:取值 赋值 获得属性 设置样式 设置事件 设置动画等

可以处理cookies

ajax 基于javascript

①js语言是严格区分大小写

②注释:

单行注释: //

多行注释: /**/

③JS命名习惯

驼峰命名法 aArray stuName stuAgeNo

④JS代码写在哪里:

A:直接嵌入到标签的内容

<button onclick=\”javascript: js代码 \”></button>

B:写在<script></script>标签中

位置:标准写法 放在 body后面 末尾位置 先加载HTML元素 元素加载完了再加载js 正常顺序 不会有问题

如果把js代码放在head中可以调用 但是要注意加载顺序问题

C:单独写成一个js文件 再引入进来(推荐)

先把js代码放在一个 xxx.js文件中

<script src=\”xxx.js\”></script> 引入进来

①输出:

弹窗输出 alert(\”输出的内容\”);

页面输出 document.write(\”内容\”) 会冲刷页面中原来内容 不会用

控制台输出 console.log(\”内容\”) 在控制台输出数据

②输入:

HTML里面的表单元素 接收数据 绝大多数

prompt(\”提示信息\”,\”默认值\”) 弹窗输入

③数据类型:

数值类型: number

字符类型: string

布尔类型: boolean

数组类型: object 对象类型

对象类型: object 对象类型

函数类型: function 定义的是一个函数

④变量

数据类型 名称=值; //强数据类型

弱数据类型:

var 变量名=值; //在解析的时候根据值的类型来决定变量的类型

var num=10;

var num=\”10\”

var num=false;

​

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科