JavaScript基础语法

JavaScript基础语法

html：标记语言

JavaScript：编程语言

JavaScript的组成

1. ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
2. BOM (Browser Object Model): 浏览器对象模型
  客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。
3. DOM (Document Object Model): 文档对象模型
  网页文档操作标准，描述处理网页内容的方法和接口。

总结：JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果

JavaScript代码的书写位置

js与css一样 也有多种的书写方式，大致分为行内式，内嵌式，外链式。

行内式（不推荐）

<input type="button" value="点击" onclick="alert('hello')"/>

1. 可以将单行或者少量的js代码写在HTML标签的事件属性中；
2. 注意单、双引号的使用；引号易错，多层嵌套时，易错；
3. 可读性差；
4. 特殊情况下使用；

内嵌式

<script>
    alert('hello')
</script>

1. 可以将多行js代码写到

外链式（推荐）

<script src="waibu.js"></script>

1. 利于HTML页面代码的结构化，把大段的js代码独立到了html页面之外，即美观，也方便文件级别的复用；
2. 引用外部的js文件的script标签中间不可以写代码；
3. 适合于代码量大的情况书写；

JavaScript中的注释

单行注释

// 我是一个注释

1. 可以直接写两个//；
2. 也可以使用快捷键 Ctrl+/；

多行注释

/*我被注释掉啦*/

1. 可以直接写/**/ 需要注释的内容写在两个星号之间；
2. 每个编辑器的注释快捷键不一样 vscode中是Ctrl+shift+a；

变量

变量是用于存放数据的容器；

通过变量名获取数据，修改数据；

变量在使用时分为两步:1.声明变量 2.赋值

定义变量以及赋值

//声明一个变量a
var a;

//给a这个变量赋值
a = 100

//结合起来写
var a = 100

注意

1. 一个变量只能存储一个值；

2. 一个变量被从新赋值后，它原有的值就会被覆盖掉，将以最后一次赋值的为准；

3. 定义变量名时严格区分大小写；

   变量的命名规则和规范

   • 规则：必须遵守的，否则会报错
     1. 变量由字母，数字，下划线（_），美元符号（＄）组成；
     2. 严格区分大小写；
     3. 不能以数字开头；
     4. 不能是关键字或者保留字；
     5. 不要出现空格；
   • 规范：建议遵守（开发者默认），不遵守不会报错
     1. 变量名尽量语义化；例：年龄就可以定义为age
     2. 遵循驼峰命名法，首字母小写，后面单词的首字母需要大写。例：firstName
     3. 尽量不要使用中文

   数据类型（重点）

   • 不同的数据所需要占用的存储空间是不同的，为了便于把数据分成所需要内存大小不一的数据，充分利用存储空间，因此定义了不同的数据类型。
   • 通常分为两大类：基本数据类型 和 复杂数据类型

   基本数据类型

   1. 数值类型（Number）
      • 一切的数字都是数值类型（二进制，八进制，十进制，十六进制等）；
      • NAN（not a number）一个非数字；
   2. 字符串类型
      • 引号中的任意文本（单 双引号都可以）
   3. 布尔类型
      • 只有两个值（true）或（false）
      • 布尔型和数值型想加的时候：true代表真，值为1；
      • false代表假，值为0；
   4. null类型
      • 只有一个，就是null，表示空的意思；
   5. undefined类型
      • 只有一个，就是undefined，表示没有值的意思；

判断数据类型

使用 typeof 关键字来进行判断

//第一种方式

var a = 100
console.log(typeof a)  //number类型


//第二种方式
var a = '100'
console.log(typeof(a))  //字符串类型

判断一个变量是不是数字

• 可以使用 isNaN 这个方法来判断一个变量是不是数字

• isNaN ：is not a number

• // 如果变量是一个数字
  var a = 100;
  console.log(isNaN(a)); //=> false
  
  // 如果变量不是一个数字
  var a = 'Jisoo'
  console.log(isNaN(a)); //=> true
  

  数据类型的转换

  使用表单，prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。

  通常会实现三种方式的转换：转换为字符串类型，转换成数值类型，转换成布尔类型；

其他数据类型转换成数值类型

1. parseInt(变量)
   • 从变量的第一位开始检查，是数字就转换。直到遇到一个不是数字的；
   • 如果开始就不是数字 那么返回NAN；
   • 此函数不认识小数点，只保留整数部分；
2. parseFloat(变量)
   • 从变量的第一位开始检查，是数字就转换。直到遇到一个不是数字的；
   • 如果开始就不是数字 那么返回NAN；
   • 此函数认识一次小数点；
3. Number(变量)
   • 可以把一个变量强制转换成数值类型；
   • 可以转换小数，会保留小数；
   • 可以转换布尔值；
   • 遇到不可转换的都会返回 ；
4. 除了加法以外的数学运算
   • 运算符两边都是可运算数字才行；
   • 如果运算符任何一遍不是一个可运算数字，那么就会返回NaN；
   • 加法不可以用；

其他数据类型转换成字符串类型

1. 变量.toString()
   • null和undefined不能使用此方法；
2. string()
   • 所有的数据类型都可以使用；
3. 使用加法运算
   • 加号的任意一边是字符串，就会进行字符串的拼接；

其他数据类型转换成布尔类型

Boolean(变量)

• 在js中只有’'、0、null、undefined、nan这些值是false；
• 其余的都为true；

运算符

也被称为操作符，是用于实现赋值，比较和执行算数运算功能的符号；

数学运算符

1. • 只有符号两边都是数字的时候才会进行加法运算
   • 只要符号任意一边是字符串类型，就好进行字符串拼接
2. • 会执行减法运算
   • 会自动把两边都转换成数字进行计算
3. • 会进行惩罚运算
   • 会自动把两边都转换成数字进行计算
4. /
   • 会进行除法运算
   • 会自动把两边都转换成数字进行计算
5. %
   • 会执行取模（取余）运算
   • 会自动把两边都转换成数字进行计算

赋值运算符

1. =

   • 就是把等号右边的值赋值给等号左边

2. +=

   var a = 10
   a += 10  // 等价于 a = a + 10
   console.log(a) // 20
   

3. -=

   var a = 10
   a -= 10  // 等价于 a = a - 10
   console.log(a) // 0
   

4. *=

   var a = 10
   a *= 10  // 等价于 a = a * 10
   console.log(a) // 100
   

5. /=

   var a = 10
   a /= 10  // 等价于 a = a / 10
   console.log(a) // 1=
   

6. %=

   var a = 10
   a %= 10  // 等价于 a = a % 10
   console.log(a) // 0
   

比较运算符

1. ==
   • 比较符号左右两百的数值是否相等，不考虑数值类型；
   • 相同为true 反之false；
2. ===
   • 比较符号左右两边的数值和数据类型都是否相等；
   • 都相等为true 一个不等为false
3. !=
   • 比较符号两边的值是否不等，不考虑数值类型；
   • 值相等 所以比较不等就为false 值不等 比较不等就为true；
4. !==
   • 比较符号左右两边的数值和数据类型都是否不相等；
   • 若有一个不一样 那么比较的值就为true，反之false
5. >=
   • 比较左边的值是否 大于或等于 右边的值
6. <=
   • 比较左边的值是否 小于或等于 右边的值
7. >
   • 比较左边的值是否 大于 右边的值
8. <
   • 比较左边的值是否 小于 右边的值

逻辑运算符

1. &&

   与运算

   • 符号的左边和右边都必须为true才会返回true；

   • 只要一边不是true 那么就会返回false

   • true && true  结果是 true
     
     true && false  结果是 false
     
     false && true  结果是 false
     
     false && false  结果是 false
     
     

2. ||

   或运算

   • 符号的左边或者右边为true 都会返回true；
   • 只有两边都是false时才会返回false；

   true || true  结果是 true
   
   true || false  结果是 true
   
   false || true  结果是 true
   
   false || false  结果是 false
   
   

3. ！

   取反运算

   • 本身是true的会变成false；

   • 本身是false的会变成true；

     !true  结果是 false
     
     !false  结果是 true
     
     

递增和递减运算符（自增自减/一元运算符）

1. ++

   • 会进行自增运算

   • 分为前置++ 和 后置++

   • 前置++，先自加，后返回值

     var a = 10
     
     console.log(++a)  //会返回11 并且把a的值变成11
     

   • 后置++，先返回原值，后自加

     var a = 10;
     
     console.log(a++);  // 会返回 10，然后把 a 的值变成 11
     

2. --

   • 会进行自减运算

   • 分为前置– 和 后置–

   • 前置–，先自减，后返回值

     var a = 10
     
     console.log(--a)  //会返回9 并且把a的值变成9
     
     

   • 后置–，先返回原值，后自减

     var a = 10
     
     console.log(--a)  // 会返回 10，然后把 a 的值变成 9