想要学好Javascrip,首先得了解它的组成,是用来做什么的,能帮助我们实现什么功能,看完这篇文章,你可以学习到
JavaScript的组成(有什么?)了解就行
ECMAScript:
规定了js基础语法核心知识。
比如:变量、分支语句、循环语句、对象等等
Web APIs :
DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作
BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等
<重要>JavaScript是什么
是一种运行在
客户端(浏览器)
的编程语言,实现
人机交互效果
。
<重要>作用做什么?
网页特效 (监听用户的一些行为让网页作出对应的反馈)
表单验证 (针对表单数据的合法性进行判断)
数据交互 (获取后台的数据, 渲染到前端)
服务端编程 (node.js)
<重要>如何添加到页面
内联 JavaScript
![](https://img-blog.csdnimg.cn/e9315c1375cc4159a9406eb921c9768b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATEY3MjE=,size_20,color_FFFFFF,t_70,g_se,x_16)
一般配合vue框架
内部 JavaScript
直接写在html文件里,用script标签包住
script标签写在</body>上面
例如 <body>
<script>
document.write()
</script>
</body>
外部 JavaScript
代码写在以.js结尾的文件里
通过script标签,引入到html页面中
script引入标签写在</body>上面
例如 <script src="./xxx.js"></script>
JavaScript 注释
1.
单行注释
符号://
作用://右边这一行的代码会被忽略
快捷键:ctrl + /
2.
块注释
符号:/* */
作用:在/* 和 */ 之间的所有内容都会被忽略
快捷键:shift + alt + A
<超级重要>JavaScript 输入输出语法
输出和输入也可理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后再展示结果给用户 ,这便是一次输入和输出的过程。
输入 prompt()显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字
效果如下
输入
语法document.write()
向body内输出内容 如果输出的内容写的是标签,也会被解析成网页元素
直接在网页显示
console.log()
效果如下
控制台输出语法,程序员调试使用
alert()
页面弹出警告对话框
效果如下
![](https://img-blog.csdnimg.cn/8558c724fe8a4396b0f8c16939f16f5f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATEY3MjE=,size_20,color_FFFFFF,t_70,g_se,x_16)
字面量
在计算机科学中,字面量(literal)是在计算机中描述 事/物
比如:
价格1000 1000 就是数字字面量
'你好' 字符串字面量
[] 数组字面量
{} 对象字面量
变量
变量就是一个装东西的盒子。 是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆
变量的使用
1. 声明变量: 要想使用变量,首先需要创建变量
let
变量名
let
关键字 (let: 允许、许可、让、要),所谓关键字是系统提供的专门用来声明(定义)变量的词语
var 变量名(不够严谨,很少使用,推荐用let,想了解去百度)
变量名
也叫标识符
2. 变量赋值:
定义了一个变量后,你就能够初始化它(赋值)。在变量名之后跟上一个“=”,然后是数值。
![](https://img-blog.csdnimg.cn/a0cdaef8170b4692837084d585219d0d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATEY3MjE=,size_20,color_FFFFFF,t_70,g_se,x_16)
![](https://img-blog.csdnimg.cn/e5dea6c8f310472ab67bf1f7d5b90cfe.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATEY3MjE=,size_20,color_FFFFFF,t_70,g_se,x_16)
3. 更新变量:
变量赋值后,还可以通过简单地给它一个不同的值来更新它。
![](https://img-blog.csdnimg.cn/27cd56442a194153ba3d4c68bed030df.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATEY3MjE=,size_20,color_FFFFFF,t_70,g_se,x_16)
注意: let 不允许多次声明一个变量。
4. 声明多个变量:
变量赋值后,还可以通过简单地给它一个不同的值来更新它。
![](https://img-blog.csdnimg.cn/8fac6bdd874244d0bd44aca7631e8131.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATEY3MjE=,size_20,color_FFFFFF,t_70,g_se,x_16)
数组(Array)是一种可以按顺序保存多个数据
声明语法
数组是按顺序保存,所以每个数据都有自己的编号
计算机中的编号从0开始,所以小明的编号为0,小刚编号为1,以此类推
在数组中,数据的编号也叫索引或下标
数组可以存储任意类型的数据
数组的基本使用
![](https://img-blog.csdnimg.cn/390c995b6a92411ea146f766a7d435ca.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATEY3MjE=,size_20,color_FFFFFF,t_70,g_se,x_16)
数据类型
基本数
基本数据类型
number 数字型
string 字符串型
boolean 布尔型
undefined 未定义型
null 空类型
引用数据类型
object 对象
function 函数
array 数组
数字类型(number)
数学中学习到的数字,可以是整数、小数、正数、负数。
![](https://img-blog.csdnimg.cn/6cba59c5c7094efdbd91532d818b407f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATEY3MjE=,size_20,color_FFFFFF,t_70,g_se,x_16)
字符串类型(string)
通过单引号( '') 、双引号( "")或反引号( ` )包裹的数据都叫字符串
,单引号和双引号没有本质上的区别
![](https://img-blog.csdnimg.cn/de4ac048afec41ca80e59a5a78a7a3a7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATEY3MjE=,size_20,color_FFFFFF,t_70,g_se,x_16)
注意事项:
1. 无论单引号或是双引号必须成对使用
2. 单引号/双引号可以互相嵌套,但是不以自已嵌套自已(口诀:外双内单,或者外单内双)
3. 必要时可以使用转义符 \,输出单引号或双引号
字符串拼接
模板字符串
.
作用
拼接字符串和变量
在没有它之前,要拼接变量比较麻烦
符号
``(反引号)
内容拼接变量时,用 ${} 包住变量
![](https://img-blog.csdnimg.cn/b75afc21e14a4ae882770773d3c48b72.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATEY3MjE=,size_20,color_FFFFFF,t_70,g_se,x_16)
![](https://img-blog.csdnimg.cn/882381d915d4402a8cc933cbbda8cd4a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATEY3MjE=,size_20,color_FFFFFF,t_70,g_se,x_16)
布尔类型(boolean)
有两个固定的值 true 和 false,表示肯定的数据用 true(真),表示否定的数据用 false(假)
未定义类型(undefined)
只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少【直接】为某个变量赋值为
undefined
null(空类型)
null 和 undefined 区别:
1.
undefined 表示没有赋值
2.
null 表示赋值了,但是内容为空