❤️🔥前情提要❤️🔥
欢迎来到JavaScript快速入门教程
JavaScript 已然成为就业市场上最受欢迎和需求量最大的语言之一。开发人员经常使用它来构建网站、设计游戏和制作应用程序等。
在进入工作岗位之前,语言是你简历上应该具备的基本技能之一。
🍪本教程内容干货满满,跟上步伐吧~🍪
作者介绍:
🎓 作者:某编程爱好者📜
🗒️系列文章&专栏推荐: 🔗《MySQL数据库》、🔗 《Web前端教程》、🔗《Python基础》
🕸️为大家推荐一款很好用的前端刷题网站🔗点击跳转
📑1.1 初识JavaScript
👉在本小节你将会对JavaScript的概念
、作用
、由来
、特点
以及JavaScript与ECMAScript的关系
有一个全新的认识
🏷️1.1.1 什么是JavaScript
💡概念及作用
-
概念
- JavaScript 是
Web
的编程语言。 - JavaScript 是
脚本语言
,是一种解释性脚本语言
(代码不进行预编译) - JavaScript 是一种
轻量级的编程语言
- JavaScript 是
可插入 HTML 页面的编程代码
- JavaScript 插入 HTML 页面后,可由所有的
现代浏览器执行
- JavaScript 是
-
作用
- 为网页添加各式各样的
动态功能
- 为用户提供更
流畅美观
的浏览效果
。 通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的
- 为网页添加各式各样的
-
前端三件套的作用
- HTML(HyperText Markup Language)
超文本标记语言
:定义网页文本内容
- CSS(Sascding Style Sheets)
层叠样式表
:描述网页布局
- Javascript面向web的编程(脚本)语言:
控制网页行为
- HTML(HyperText Markup Language)
-
🎗️JavaScript应用示例:
🏷️1.1.2 JavaScript的由来
🕰️时间:1995年。
🧑🔬人物: Brendan Eich(布兰登·艾奇)。
🏢地点: Netscape(网景)公司,现在的Mozilla。
🖥️事件:在网景导航者浏览器
上首次设计出了JavaScript
。
🥐名称: Netscape最初将这个脚本语言命名为LiveScript。
🥐更名:Netscape与Sun公司
合作之后将其改名为JavaScript。
⚛️原因:由于当时Sun公司(2009年被Oracle公司
收购)推出的Java语言备受关注,Netscape公司为了营销
借用了Java这个名称。
📛事实:JavaScript与Java本质上是两种不同的编程语言
。
❓问题:JavaScript在设计之初是做什么
的呢?
🔔答案:是一种可以嵌入到网页中
的编程语言,用来控制浏览器的行为
。
🌰举例:直接在浏览器中进行表单验证
,用户只有填写格式正确
的内容后才能够提交表单
,避免了因表单填写错误导致的反复提交
,节省了时间
和网络资源
。
🕳️缺陷:JavaScript语言非常灵活
,其语言特性也产生了一些不良的影响
。
🌰举例1:利用JavaScript制作网页上的漂浮广告
、弹窗
,让用户感到厌烦。
🌰举例2:利用Web开发中的安全漏洞
,在网页中编写恶意代码
,窃取用户网站身份信息
、传播病毒
等。
⭐建议:要端正态度和奠定扎实的技术功底
。
🪦目的:希望JavaScript推动Web技术的发展,造福每一位互联网用户。
🏋️现今承担更多的责任:尤其是当Ajax技术
兴起之后,浏览器
和服务器
可以进行异步交互
了,网站的用户体验又得到了更大的提升。
🌰举例:当人们在百度的搜索框中输入几个字
以后,网页会智能感知
用户接下来要搜索的内容
。
⚠️注意:JavaScript的用途已经不仅局限于浏览器
了,Node.js
的出现使得开发人员能够在服务器端
编写JavaScript代码,使得JavaScript的应用更加广泛。
🏷️1.1.3 JavaScript的特点
👉脚本语言
脚本(
Script
)简单地说就是一条条的文本命令,按照程序流程执行
。
🌟常见的脚本语言:
JavaScript
、VBScript
、Perl
、PHP
、Python
等。
⭐非脚本语言:
C
、C++
、Java
、C#
等。
🥨脚本语言与非脚本语言的区别:
非脚本语言一般需要
编译
、链接
,生成独立的可执行文件
后才能运行。
脚本语言依赖于解释器
,只在被调用时自动进行解释或编译
。
⭕脚本语言的优点:
缩短了传统语言“
编写 → 编译 → 链接 → 运行
”的过程。
简单
、易学
、易用
,语法规则较松散
,方便编程
。
❌脚本语言的缺点:
执行
效率不如编译型的语言快
。
不过,由于计算机的运行
速度越来越快,Web应用的需求
变化也越来越快,人们更加重视软件的开发速度
,脚本语言带来的执行效率下降
已经可以忽视
了。
⚧️可跨平台
几乎
所有的浏览器
,包括手机等各类移动设备。
特点:JavaScript语言不依赖操作系统
,仅需要浏览器的支持。
🐥支持面向对象
面向对象
是软件开发中的一种重要的编程思想
,其优点非常多。
基于面向对象思想诞生了许多优秀的库和框架
,可以使JavaScript开发变得快捷
和高效
,降低了开发成本。
举例:除了经典的JavaScript库
,又诞生了Bootstrap
、AngularJS
、Vue.js
、Backbone.js
、React
、Wwebpack
等框架和工具。
📑1.2 JavaScript开发工具
工欲善其事,必先利其器,一款优秀
的开发工具
能够极大提高程序开发效率
与体验。在Web前端开发中,常用
的开发工具有Visual Studio Code
、Sublime Text
、HBuilder
、Notepad++
等。
本节将会对常见的浏览器
以及代码编辑器
做简要介绍
🏷️1.2.1 浏览器
- 浏览器 :是访问互联网中各种网站所必备的工具。
面对市面上众多
的浏览器,开发人员如何掌控程序的兼容性
呢?
答案:许多浏览器都用相同的内核
,了解其内核
就能对浏览器有一个清晰的归类。
-
浏览器内核
🏷️1.2.2 代码编辑器
-
列举
常见
的代码编辑器
🏷️1.2.3 案例:第一个JavaScript程序
实现步骤:
- 创建
网页文件
并设置编码
。
- 编写一个简单的网页。
- 将JavaScript
嵌入到HTML
中。 测试
网页程序。
⚠️注意:在编码格式中,BOM
(Byte Order Mark)是指字节顺序标记
,它会在文件头部
占用三个字节
,用来标识文件的编码格式
。对于HTML网页
,不需要
通过BOM来识别编码
,因此推荐选择无BOM格式
。
⚠️在编写JavaScript代码时,应注意
基本的语法规则
,避免程序出错。具体如下。
- JavaScript
严格区分大小写
,在编写代码时一定注意大小写的正确性。- JavaScript代码对
空格
、换行
、缩进
不敏感
,一条语句可以分成多行书写
。- 如果一条语句
结束后
,换行书写下一条语句
,后面的分号可以省略
。
📑1.3 JavaScript入门
本小节将会介绍JavaScript引入方式
、常用输出语句
、注释
、数据与运算
、函数
、对象
、事件
以及改变网页背景颜色案例
来对JavaScript有更多的认识
🏷️1.3.1 JavaScript引入方式
-
👉嵌入式
-
嵌入式就是使用
< script >
标签包裹JavaScript
代码,直接编写到HTML文件中。语法
<script> JavaScript语句; </script>
示例
<script type="text/javascript"> JavaScript语句; </script>
⚠️type属性用于告知浏览器脚本的类型。
⚠️type默认值为
text/javascript
(HTML5),可以省略type属性
。
-
-
👉外链式
-
外链式是指将JavaScript代码保存到一个
单独的文件
中,通常使用“js
”作为文件的扩展名
,然后使用<script>标签的src属性引入文件中
。语法
HTML文件 …… <script src="js/test.js"></script> ……
示例
js/test.js文件 …… alert('Hello'); ……
① 相对路径(外链引入方式:js/test.js)
……test.html
……js
…………test.js
① 相对路径(外链引入方式:…/js/test.js)
……html
…………test.html
……js
…………test.js
② 绝对路径(外链引入方式:/js/test.js)
website(网站根目录)
……test.html
……js
…………test.js
② 绝对路径(外链引入方式:file:///C:/js/test.js)
…………test.html
C:
……js
…………test.js
③ URL地址(外链引入方式:http://js.test/file.js)
website(网站根目录)
……test.html
js.test(某网站根目录)
……file.js
⚠️注:若自动使用当前页面协议,可写为 //js.test/file.js
-
🪧相比嵌入式
,外链式的优势可以总结为以下3点
:
-
嵌入式会导致HTML与JavaScript代码混合在一起,
不利于修改和维护
。 -
嵌入式会
增加HTML文件的体积
,影响网页本身的加载速度
,而外链式可以利用浏览器缓存
提高速度。 -
外链式有利于
分布式部署
。网页中链接的js
、css
、图片
等静态文件
可以部署到CDN服务器
上,利用CDN的优势加快下载速度
。
-
👉行内式
-
行内式是将JavaScript代码作为
HTML标签的属性值
使用。-
用法一
< a href=“javascript:alert(‘Hello’);”>test
-
用法二
<input type=“button” onclick**=“alert(‘Hello’);” value=“test”>**
-
-
-
⚠️注意:由于现代网页开发提倡
结构
、样式
、行为
的分离
,即分离HTML
、CSS
、JavaScript
三部分的代码,避免直接写在HTML标签的属性
中,从而更有利于维护
。因此在实际开发中不推荐使用行内式
。 -
👉JavaScript异步加载
❓存在的问题:引入JavaScript代码时,页面的下载和渲染都会暂停,等待脚本执行完成后才会继续(内嵌式或外链式)。
❗解决的办法1:对于不需要提前执行的代码,将< script >标签放在< body >标签的底部,可以减少对整个页面下载的影响。
❗解决的办法2:可用HTML5为< script >标签新增的两个可选属性:async和defer。
-
方式一:async
<script src="http://js.test/file.js" async></script>
-
方式二:defer
<script src="http://js.test/file.js" defer></script>
⚠️async异步加载,即
先下载文件
,不阻塞其他代码执行
,下载完成后再执行
。⚠️defer用于
延后执行
,即先下载
文件,直到网页加载完成后再执行
。⚠️共同点:即使文件
下载失败
,也不会阻塞后面的JavaScript代码执行
。
-
🏷️1.3.2 常用输出语句
- alert() 警告框
- console.log() 控制台输出
- document.write()文档页面输出
🏷️1.3.3 注释
🥐概念:注释可便于代码的可读性
,在程序解析时会被JavaScript解释器忽略
。
📛分类:单行注释
、多行注释
。
🔔表示方式:单行注释使用“//
”、多行注释使用“/* */
”。
-
👉单行注释:以“
//
”开始,到该行结束
或JavaScript标记结束之前的内容都是注释。示例
<script> document.write('Hello, JavaScript'); // 输出一句话 </script>
-
👉多行注释:多行注释以“
/*
”开始,以“*/
”结束,它们之间的内容
为多行注释。示例
<script> /* alert('Hello, JavaScript'); console.log('1234'); */ </script>
⚠️多行注释中
可以嵌套单行注释
。⚠️多行注释中
不能再嵌套多行注释
。
🏷️1.3.4 数据与运算
-
👉数学运算
JavaScript支持加(+)减(-)乘(*)除(/)四则运算。-
小括号可以改变优先顺序。
示例
alert(220 + 230); // 输出结果:450 alert(2 * 3 + 25 / 5 - 1); // 输出结果:10 alert(2 * (3 + 25) / 5 - 1); // 输出结果:10.2
-
比较两个数字的大小
比较的结果是
true
或false
,这是一种布尔类型的值,表示真
和假
。如果比较
结果为true
,表示成立
;如果比较结果为false
,表示不成立
。示例
alert(22 > 33); // 输出结果:false alert(22 < 33); // 输出结果:true alert(22 == 33); // 输出结果:false alert(22 == 22); // 输出结果:true
-
使用字符串保存数据
当
需要在警告框中输出“Hello”时
,为了在代码中保存“Hello”这个数据
,就需要用到字符串
这种数据类型。在JavaScript中,使用
单引号
或双引号
包裹的数据是字符串
。示例
alert('Hello'); // 单引号字符串 alert("Hello"); // 双引号字符串
-
比较两个字符串是否相同
使用“
==
”运算符可以比较两个字符串是否相同
。示例
alert('22' == '22'); // 输出结果:true alert('22' == '33'); // 输出结果:false
-
字符串与数字的拼接
“
+
”运算符的操作数只要有一个是字符串
,就表示字符串拼接
。“
+
”运算符的操作数全部为数字时
,表示相加
。示例
alert('220' + '230'); // 输出结果:220230 alert('220 + 230 = ' + 220 + 230); // 输出结果:220 + 230 = 220230 alert('220 + 230 = ' + (220 + 230)); // 输出结果:220 + 230 = 450
-
根据比较结果执行不同的代码
if…else
语句用于需要根据比较的结果
,来执行不同的代码
。示例
if (22 > 33) { alert(true); // 判断成立时执行此语句 } else { alert(false); // 判断不成立时执行此语句 }
-
使用变量保存数据
场景:当一个数据需要
多次使用
时,可以利用变量
将数据保存
起来。概念:变量是
保存数据的容器
,每一个变量都有唯一的名称
。定义:利用
var关键字
定义。示例
var num1 = 22; var num2 = 33; alert(num1 + num2); alert(num1 - num2); var temp = num1; num1 = num2; num2 = temp; alert('num1 = ' + num1); alert('num2 = ' + num2);
-
🏷️1.3.5 函数
-
👉函数的用途
-
提出问题:
代码量增多
,维护困难
、条理不清
、阅读困难
。 -
解决办法:代码应该
模块化
、组件化
,才能更好维护
。 -
实现方式:常将一些
常用
的功能模块
编写成函数
,通过调用函数
来完成任务
。 -
举例说明:
alert()
就是一个函数
。
-
-
函数的返回值
- 函数执行后可
返回
一个表示执行结果的值
,下面以prompt()函数
为例进行演示。
示例
var name = prompt('请输入你的名字:');
- 函数执行后可
-
函数的参数
函数支持传入
一个
或多个参数
,多个参数可使用逗号分隔
。示例
prompt('请输入你的名字:', '匿名');
-
自定义函数
除直接调用JavaScript内置的函数,用户还可
自己定义函数
,用于封装代码
。示例
// 定义函数 function sum(a, b) { var c = a + b; return c; } // 调用函数,输出结果:33 alert(sum(11, 22)); // 调用函数,输出结果:55 alert(sum(22, 33));
🏷️1.3.6 对象
-
对象的用途
编写
程序
如同开一家公司
。在程序中
划分对象
,如同在公司中划分部门
。一个对象的
成员由属性和方法组成
。属性
就是一些变量
,可以用来保存部门的名称
、人数
这些基本信息。方法
就是一些函数
,可以用来保存部门的各种工作任务
。当最高领导指挥这些部门时,通过
访问对象的属性来获取信息
,通过调用对象的方法来完成工作
。
-
window对象
window对象是
JavaScript
与浏览器
之间交互
的主要接入点。提供了用于JavaScript脚本
控制浏览器
的一些接口。举例:
弹出警告框
、输入框
,或者更改网页文档内容
等效果。示例
window.console; window.document; window.alert('test'); window.prompt('test'); window.console.log('test'); window.document.write('test');
-
document对象
document对象
是window对象的属性之一,主要用于与网页文档进行交互
。示例
<body> <div id="test">Hello</div> <script> var test = document.getElementById('test'); alert(test.innerHTML </script> </body>
-
String对象
在代码中
直接定义的字符串
,就可以作为对象
来使用。String对象用于对字符串进行处理。
示例
var str = 'apple'; // 定义一个字符串 alert(str.length); // 获取字符串长度,输出结果:5 alert(str.toUpperCase()); // 获取转换大写后的结果,输出结果:APPLE alert('aa'.toUpperCase()); // 直接调用字符串的成员方法,输出结果:AA
-
自定义对象
除了直接使用JavaScript中的内置对象,用户也可以
自己创建一个自定义对象
。示例
// 创建对象 var stu = {}; // 创建一个名称为stu的空对象 // 添加属性 stu.name = '小明'; // 为stu对象添加name属性 stu.gender = '男'; // 为stu对象添加gender属性 stu.age = 18; // 为stu对象添加age属性 // 访问属性 alert(stu.name); // 访问stu对象的name属性,输出结果:小明 // 添加方法 stu.introduce = function () { return '我叫' + this.name + ',今年' + this.age + '岁。'; }; // 调用方法 alert(stu.introduce()); // 输出结果:我叫小明,今年18岁。
🏷️1.3.7 事件
-
概念 :
事件
是指可以被JavaScript侦测到
的交互行为
。 -
举例:在网页中
滑动
、点击鼠标
,滚动屏幕
,敲击键盘
等。 -
用处:当发生事件以后,可以利用JavaScript编程来执行一些特定的代码,从而实现网页的交互效果。
示例
<body> <input id="btn" type="button" value="test"> <script> document.getElementById('btn').onclick = function() { alert(this.value); // 获取按钮的value属性,输出结果:test }; </script> </body>
🏷️1.3.8 案例:改变网页背景颜色
代码实现思路:
-
①编写网页,提供
按钮
。 -
②为按钮添加
点击事件
。
-
③根据
color()函数
传递的不同参数
设置网页的背景色
。 -
④编写
color()函数
并进行测试
。
🎀小结
⚡恭喜你的内功又双叒叕敠得到了提高!!!🔋
👉本节首先介绍了JavaScript的用途
、发展状况
,然后讲解了浏览器
、代码编辑器
相关的内容,接着针对JavaScript的入门知识
进行了介绍,包括引入方式
、输出语句
、注释
、数据运算
、函数
、对象
、事件
等
🔚以上就是JavaScript入门
的全部知识了~
🫂感谢大家的阅读~
💫如果有错误❌,欢迎指正呀💫
✨如果觉得收获满满,可以点点赞👍支持一下哟~✨