JavaScript入门
📜个人简介
⭐️个人主页：微风洋洋🙋♂️
🍑博客领域：编程基础💡,后端💡,大数据,信息安全
🍅写作风格：干货,干货,还是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>
九、动手实践
验证用户输入的密码
本案例用于验证用户输入的密码是否正确。
代码实现思路：
① 通过输入框获取用户输入的密码。
② 判断用户输入的密码。
③ 若输入正确，则提示“密码输入正确！”，否则提示“密码输入错误！”。
请小伙伴们自己动手试一试！
如果觉得这篇文章对你有一丢丢启发的话，不妨 点赞👍、收藏⭐、留言💬支持一下，你的支持将是我继续创作的最大动力。下一篇将介绍JavaScript基本语法，到时不见不散❤️❤️❤️
由于作者水平有限，如有错误和不准确之处在所难免，本人也很想知道这些错误，恳望读者批评指正！
最后，关注即可提高学习效率。Perfect！
- 点赞
- 收藏
- 关注作者
评论（0）