前端必备：Javascript 3种书写格式详细介绍

JavaScript代码书写格式详解：行内、内嵌与外部式

最新推荐文章于 2024-12-04 15:45:25 发布

是一只萨摩耶

最新推荐文章于 2024-12-04 15:45:25 发布

阅读量4.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Java 文章标签： javascript 前端开发语言 node.js 前端web

本文链接：https://blog.csdn.net/aa112233aa1/article/details/126247554

Java 专栏收录该内容

95 篇文章

订阅专栏

本文详细介绍了JavaScript的三种书写格式：行内式、内嵌式和外部式。行内式适用于临时测试，内嵌式在HTML中直接编写JavaScript，而外部式则将代码放在单独的.js文件中。每个格式的特点和应用场景都有所讲解，对于前端开发者来说是必备知识。

在网页中编写JavaScript代码时，有3种书写位置，分别是行内式、内嵌式(也称为嵌人式)和外部式(也称为外链式)，下面分别进行讲解。

1.行内式

行内式是指将单行或少量的JavaScript代码写在HTML标签的事件属性中(也就是以on开头的属性，如onclick)。下面通过具体操作步骤进行演示。

(1)创建一个简单的HTML页面，将文件命名为demo01.html。

(2)编写demo01.html，具体代码如下。

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>Document</title>
		</head>
	<body>
	</body>
</html>

在上述代码中，第4行声明了网页的编码为UTF-8，帮助浏览器正确识别网页的编码。

在声明编码后，还需要确保文件本身的编码也是UTF-8。目前大多数代码编辑器新建的文件编码默认都是UTF-8。另外，Windows 记事本默认的编码是ANSI,在记事本中编写的网页容易出现乱码，因此读者应杜绝使用记事本编写代码文件。

(3)使用行内式编写JavaScript代码，实现单击一个按钮后，弹出一一个警告框，显示一些提示信息，具体代码如下。

<body>
	<input type="button" value="点我" onclick="alert('行内式')">
</body>

在上述代码中，写在onclick属性里的代码就是JavaScript代码。

(4)通过浏览器访问demo01.html，运行结果如下图所示。
在这里插入图片描述
以上步骤演示了行内式的使用。在实际开发中，使用行内式还需要注意以下4点。

①注意单引号和双引号的使用。在HTML中推荐使用双引号，而JavaScript推荐使用单引号。

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

③在遇到多层引号嵌套的情况时，非常容易混淆，导致代码出错。

④只有临时测试，或者特殊情况下再使用行内式，一般情况下不推荐使用行内式。

2.内嵌式(嵌入式)

内嵌式是指使用

下面我们通过具体操作步骤进行演示。

(1)创建demo02.html，用来编写内嵌式JavaScript代码，示例代码如下。

<head>
	......
	<script>
		alert('内嵌式');
	</script>
</head>

在上述代码中，第4行是一条JavaScript语句，其末尾的分号“;” 表示该语句结束，后面可以编写下一条语句。

(2)通过浏览器访问demo02.html，页面一打开后，就会自动弹出一个警告框，提示信息为“内嵌式”。

3.外部式(外链式)

外部式是指将JavaScript代码写在一个单独的文件中，一般使用"js"作为文件的扩展名，在HTML页面中使用

(1)创建demo03.html, 用来编写外部式JavaScript代码，示例代码如下。

<head>
	<script src="test.js"></script>
</head>

(2)创建test.js文件，在文件中编写JavaScript代码，如下所示。

alert('外部式');

(3)通过浏览器访问demo03.html，页面一打开后，就会自动弹出一个警告框，提示信息为“外部式”。

第一阶段基础入门

1.Web前端零基础入门HTML5+CSS3+前端项目

课程中和课程尾配备两个实战项目，项目一类型是企业站，可以让同学们快速的将基础知识点进行反复练习；项目二类型是电商站，可以让同学们掌握更复杂的网页效果的开发流程和布局标准。本教程严格按照专业的开发流程：专业的测量工具，做到100%还原设计稿。

web前端开发入门教程，前端零基础html5+css3+前端项目视频教程

2.移动web开发实战

本课程采用2+5模式, 前两天承接HTML+CSS, 使用字体图标、平面转换、动画等，丰富网页效果和呈现方式；后5天完成移动端和多端适配效果。课程采用闭环方式设计，每天课程都有完整的案例或项目，让学生学以致用。

web前端进阶教程，前端html5+css3+移动端项目实战（含华为新闻，b站移动端等）

第二阶段技术进阶

1.JavaScript深入浅出-0基础入门神器

学完本课程你将掌握JavaScript基础从变量的定义与使用、数据类型及相互转换、运算符、流程控制语句、三元运算符、数组、函数、构造函数、内置对象以及对象等基础必备技能。

JavaScript全套教程，Web前端必学的JS入门教程，零基础JavaScript入门

2.JavaScript核心之Web APIs

学习客户端开发技术，能够根据产品需求完成开发任务，如视觉交互、数据处理、安全、性能等，熟练掌握 DOM 操作的方法，能够分析视觉交互需求，结合 CSS 规则设计合理的 DOM 结构，完成开发任务。
JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作

3.数据交互&异步编程-前端进阶Ajax零基础入门

本课程案例丰富，知识点配套的案例丰富多样，满足学生学习的兴趣；深入原理，会深入讲解如何封装自己的模板引擎和 Ajax 函数；涵盖广泛，涵盖了 Ajax、跨域、JSONP、模板引擎、节流防抖、XHR Level2 等常用技术。

AJAX零基础到精通_整合Git核心内容全套教程

第三阶段 VUE开发

1.前端高级Node.js零基础入门教程

本套课程作为框架前置课，重点为学生铺垫 npm、包、模块化、身份认证、CORS 跨域等主要知识点，为学习后面的 Vue 课程夯实基础。同时，本课程涵盖了 MySQL 数据库、API 接口项目开发等后端内容，拓宽了学生的知识面，为前端学生构建了前后端完整的知识体系，助力学生更好地发展。

Node.js全套入门教程，nodejs最新教程含es6模块化+npm+express+webpack+promise等_Nodejs实战案例详解

2.前端框架Vue2+Vue3全套视频

历经 5 年的反复打磨与锤炼，黑马程序员重磅推出全套最新的 Vue2 + Vue3 基础课程。共计 500 多集的免费视频，助您轻松掌握前端圈最火的 Vue 框架！

Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程

第四阶段 React&小程序开发

1.前端React精品教程

React 是时下最流行的前端框架之一，是很多大厂的首选前端开发框架！历经数月精心研发，内容包括：React 脚手架、JSX、函数组件、类组件、受控组件、组件通讯、Context、组件生命周期、高阶组等等技术。

React精品教程， React零基础入门到原理详解

2.手把手快速带你开发微信小程序

本课程从小程序账号注册、开发环境搭建、基础语法、路由导航、数据请求、分包、组件化等方面详细阐述了小程序开发必备的基础知识。学完基础之后，利用 uni-app 技术实现微信小程序的开发，可以做到一次开发多端部署。项目拥有首页、搜索页、商品列表页、商品详情页、购物车、登录支付等主要功能。涵盖了分包、vuex、组件化开发等核心技术点的使用。

前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)