一、Javascript介绍

JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。

1. JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页
   HTML 用来定义网页的内容，例如标题、正文、图像等
   CSS 用来控制网页的外观，例如颜色、字体、背景等
   JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。

二、JavaScript使用方法

1. 在body内部写script标签、在标签内写js代码

   
   
   image.png

2. 在head头部标签中 通过script引入js文件

   
   
   image.png

三、JavaScript输出

1. console.log 在控制台输出
   注意：必须打开网页控制台才能看到输出的内容

   
   
   image.png

2. 在网页输出
   注意：打开网页自动弹出

   
   
   image.png

四、JavaScript注释

单行注释

image.png

多行注释

image.png

五、变量

变量声明

image.png

变量赋值

image.png

image.png

六、JavaScript的数据类型

1 基本数据类型
字符串型 (String)
数值型 (Number)
布尔 (Boolean)
undefined (Undefined)
null (Null)
2 String 字符串
String用于表示一个字符序列，即字符串。字符串需要使用 单引号 或 双引号 括起来。

image.png

3 Number 数值型
Number 类型用来表示整数和浮点数，最常用的功能就是用来表示10进制的整数和浮点数。

image.png

image.png

image.png

image.png

7 typeof 判断类型
场景：基本数据类型的判断

image.png

七、运算符

1算术运算符 用于表达式计算。

image.png

案例：

image.png

image.png

案例：

image.png

1. == 判断两边的值是否相等 如果相等返回true，否则返回false 只要值相等就相等

   
   
   image.png

2. != 用来判断两个值是否不相等 如果不相等返回true，否则返回false

   
   
   image.png

3. === 判断两边的值 和数据类型是否相等

   
   
   image.png

八.引用数据类型

1. 数组 (Array)是一组按顺序排列的数据的集合，数组中的每个值都称为元素，而且数组中可以包含任意类型的数据。在 JavaScript 中定义数组需要使用方括号[ ]，数组中的每个元素使用逗号进行分隔

   
   
   image.png
   
   

   通过索引取值

   
   
   image.png

2. 对象 （Object）类型是一组由键、值组成的无序集合，定义对象类型需要使用花括号{ }

   
   
   image.png

通过.名字取值

image.png

九.判断条件

1 if 判断

image.png

十、循环

1 for循环
循环适合在已知循环次数时使用
形参1: 初始化计数器变量
形参2: 设置循环的次数
形参3：每次循环结束后更新（递增或递减）计数器的值

image.png

2 while循环
适合根据条件循环

image.png

image.png

image.png

十一、反引法

可以在``通过${}插入变量

image.png

十二、函数function

函数是一组执行特定任务（具有特定功能）的，可以重复使用的代码块
1 定义函数

image.png

2 调用函数

image.png

image.png

返回函数内部的值

image.png

image.png

image.png

十三、定时器

JavaScript 定时器，有时也称为“计时器”，用来在经过指定的时间后执行某些任务，类似于我们生活中的闹钟。
’JavaScript 中提供了两种方式来设置定时器，分别是 setTimeout() 和 setInterval()，它们之间的区别如下：

image.png

1setTimeout()
setTimeout() 函数用来在指定时间后执行某些代码，代码仅执行一次。

image.png

image.png

十四、什么是dom？我们通过一张图来了解

image.png

dom可以理解为一个个的标签

十五、为什么要有dom？ 有什么作用

我们可以通过dom访问和修改操作让网页动起来

十六、获取dom

document 代表整个网页，相当于dom树的入口
通过document 中的querySelector 获取到按钮button的dom

image.png

十七、修改样式

image.png

十八、获取文本内容

innerHTML 获取文本内容

image.png

value 获取到输入框中的内容

image.png

十九、事件

格式：

image.png

1. click 点击事件
   应用场景：点击后发生什么事情
   案例：

   
   
   image.png

2. change 触发事件
   应用场景：获取输入框值

   
   
   image.png
   
   

   案例：

3. 根据提供的样式 点击按钮 让div里面的内容 加1

   
   
   image.png
   
   

   答案：

   
   
   image.png