JavaScript入门

微风洋洋

已于 2022-03-12 16:51:36 修改

阅读量9k

点赞数 35

分类专栏： JavaScript 文章标签： javascript 前端开发语言 css html

于 2022-02-10 15:47:09 首次发布

本文链接：https://blog.csdn.net/qq_51547965/article/details/122861906

版权

JavaScript 专栏收录该内容

18 篇文章 73 订阅

订阅专栏

📜个人简介

⭐️个人主页：微风洋洋🙋‍♂️
🍑博客领域：编程基础💡,后端💡,大数据,信息安全
🍅写作风格：干货,干货,还是tmd的干货
🌸精选专栏：【JavaScript】【HTML+CSS】【Java学习笔记】【Java必刷题】
🚀支持洋锅：点赞👍、收藏⭐、留言💬

好久不见，甚是想念！
大家好！

我是微风洋洋 今天这篇文章就是来和大家详细聊聊JavaScript入门，希望大家读完有所收获，那我辛苦码字也就值了。

一、引入方式

嵌入式

嵌入式就是使用<script>标签包裹JavaScript代码，直接编写到HTML文件中。

在这里插入图片描述

type属性用于告知浏览器脚本的类型。

type默认值为text/javascript（HTML5），可以省略type属性。

外链式

外链式是指将JavaScript代码保存到一个单独的文件中，通常使用“js”作为文件的扩展名，然后使用<script>标签的src属性引入文件中。

在这里插入图片描述

相对路径

在这里插入图片描述

绝对路径

在这里插入图片描述

URL地址

在这里插入图片描述

若自动使用当前页面协议，可写为 //js.test/file.js

相比嵌入式，外链式的优势可以总结为以下3点：

① 嵌入式会导致HTML与JavaScript代码混合在一起，不利用修改和维护。

② 嵌入式会增加HTML文件的体积，影响网页本身的加载速度，而外链式可以利用浏览器缓存提高速度。

③ 外链式有利于分布式部署。网页中链接的js、css、图片等静态文件可以部署到CDN服务器上，利用CDN的优势加快下载速度。

行内式

行内式是将JavaScript代码作为HTML标签的属性值使用。

用法一

在这里插入图片描述

用法二

微风洋洋

📌注意

由于现代网页开发提倡结构、样式、行为的分离，即分离HTML、CSS、JavaScript三部分的代码，避免直接写在HTML标签的属性中，从而更有利于维护。因此在实际开发中不推荐使用行内式。

JavaScript异步加载

存在的问题：引入JavaScript代码时，页面的下载和渲染都会暂停，等待脚本执行完成后才会继续（内嵌式或外链式）。

解决的办法1：对于不需要提前执行的代码，将<script>标签放在<body>标签的底部，可以减少对整个页面下载的影响。

解决的办法2：可用HTML5为<script>标签新增的两个可选属性：async和defer。
微风洋洋

async异步加载，即先下载文件，不阻塞其他代码执行，下载完成后再执行。
defer用于延后执行，即先下载文件，直到网页加载完成后再执行。
共同点：即使文件下载失败，也不会阻塞后面的JavaScript代码执行。

二、常用输出语句

在这里插入图片描述

三、注释

概念：注释可便于代码的可读性，在程序解析时会被JavaScript解释器忽略。

分类：单行注释、多行注释。

表示方式：单行注释使用“//”、多行注释使用“/* */”。

单行注释：以“//”开始，到该行结束或JavaScript标记结束之前的内容都是注释。

在这里插入图片描述

多行注释：多行注释以“/”开始，以“/”结束，它们之间的内容为多行注释。
在这里插入图片描述

多行注释中可以嵌套单行注释。
多行注释中不能再嵌套多行注释。

四、数据与运算

数学运算

JavaScript支持加（+）减（-）乘（*）除（/）四则运算。
小括号可以改变优先顺序。

在这里插入图片描述

比较两个数字的大小

比较的结果是true或false，这是一种布尔类型的值，表示真和假。
如果比较结果为true，表示成立；如果比较结果为false，表示不成立。

在这里插入图片描述

使用字符串保存数据

当需要在警告框中输出“Hello”时，为了在代码中保存“Hello”这个数据，就需要用到字符串这种数据类型。
在JavaScript中，使用单引号或双引号包裹的数据是字符串。

在这里插入图片描述

比较两个字符串是否相同

使用“==”运算符可以比较两个字符串是否相同。

微风洋洋

字符串与数字的拼接

“+”运算符的操作数只要有一个是字符串，就表示字符串拼接。
“+”运算符的操作数全部为数字时，表示相加。

在这里插入图片描述

根据比较结果执行不同的代码

if…else语句用于需要根据比较的结果，来执行不同的代码。

在这里插入图片描述

使用变量保存数据

场景：当一个数据需要多次使用时，可以利用变量将数据保存起来。

概念：变量是保存数据的容器，每一个变量都有唯一的名称。

定义：利用var关键字定义。

在这里插入图片描述

五、函数

函数的用途

提出问题：代码量增多，维护困难、条理不清、阅读困难。

解决办法：代码应该模块化、组件化，才能更好的维护。

实现方式：常将一些常用的功能模块编写成函数，通过调用函数来完成任务。

举例说明：alert()就是一个函数。

函数执行后可返回一个表示执行结果的值，下面以prompt()函数为例进行演示。

在这里插入图片描述

函数的参数

函数支持传入一个或多个参数，多个参数可使用逗号分隔。

在这里插入图片描述

自定义函数

除直接调用JavaScript内置的函数，用户还可自己定义函数，用于封装代码。

在这里插入图片描述

六、对象

window对象

window对象是JavaScript与浏览器之间交互的主要接入点。

提供了用于JavaScript脚本控制浏览器的一些接口。

举例：弹出警告框、输入框，或者更改网页文档内容等效果。

在这里插入图片描述

document对象

document对象是window对象的属性之一，主要用于与网页文档进行交互。

在这里插入图片描述

String对象

在代码中直接定义的字符串，就可以作为对象来使用。
String对象用于对字符串进行处理。

在这里插入图片描述

自定义对象

除了直接使用JavaScript中的内置对象，用户也可以自己创建一个自定义对象。

在这里插入图片描述

七、事件

概念：事件是指可以被JavaScript侦测到的交互行为。

举例：在网页中滑动、点击鼠标，滚动屏幕，敲击键盘等。

用处：当发生事件以后，可以利用JavaScript编程来执行一些特定的代码，从而实现网页的交互效果。

在这里插入图片描述

八、【案例】改变网页背景色

代码实现思路：

编写网页，提供按钮。
为按钮添加点击事件。
根据color()函数传递的不同参数设置网页的背景色。
编写color()函数并进行测试。

在这里插入图片描述

代码实现

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>改变网页背景色</title>
	<script>
	function color(str) {
	document.body.style.backgroundColor = str;
	}
	</script>
	</head>
	<body>
	<input type="button" value="设为红色" onclick="color('red')">
	<input type="button" value="设为黄色" onclick="color('yellow')">
	<input type="button" value="设为蓝色" onclick="color('blue')">
	<input type="button" value="设为自定义颜色" onclick="color('#00ff00')">
	</body>
	</html>