JS初始第一周

# JS简介

## JS是什么

js是运行在客户端(浏览器)的编程语言，实现人机交互的效果

css与HTML是标记语言

## JS作用

  - 网页特效(监听用户的一些行为让网页做出对应的反馈)

  - 表单验证(针对表单数据的合法性进行判断)

  - 数据交互(获取后台的数据，渲染到前端)

  - 服务端编程(node.js)

## JS组成

ECMAScript 和 Web APis(由DOM和BOM组成) 组成

ECMAScript:

规定了js基础语法的核心知识

 eg: 变量、分支语句、循环语句、对象等

Web APis:

DOM:操作文件，比如对页面元素进行移动、大小。添加删除等操作

BOM:操作浏览器，比如页面弹窗，检测窗口宽度、储存数据到浏览器等等

## JS书写位置

1. 内部JS

  直接卸载html文件中，用script标签包住

  规范: script标签写在</body>上面

  拓展:alert('你好，js') 页面弹出警示对话框

2. 外部JS

  代码写而在以.js结尾的文件里

  语法: 通过script标签，引入到HTML页面中

  注意: 在script标签内部不要写代码，否则会被忽略！

3. 内联JS

  代码写在标签内部

  语法:此处作为了解即可，但是在后面vue框架会用到这种模式

# JS注释和结束符

## 注释

1. // 单行注释 ctrl + /

2. /* */  多行注释 shift + alt + a

## 结束符

以英文的;表示语句的结束

实际情况: 在开发中，可写可不写，浏览器会自动推断语句的结束位置

现状: 越来越多人主张在书写JavaScript代码时省略结束符

约定: 为了统一风格，结束要么每句都写，要么每句都不写(按照团队要求)

# JS语法

## JS输出语法

 

语法1:

doument.write('要输出的内容')

作用: 向body内输出的内容

注意:如果输出的内容写的是标签，也会被解析为网页内容

语法2:

alert('要输出的内容')

作用: 页面弹出警示对话框

语法3:

console.log('控制台打印')

作用:控制台输出语法，程序员调试使用

 

## 输入语法

语法:

prompt('请输入您的姓名:')

作用:显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

## JavaScript 代码执行顺序

- 按HTML文档流顺序执行JavaScript代码

- alert() 和 prompt()他们会跳过页面渲染先被执行

# 字面量

在计算机科学中,字面量实在计算机中描述 事 / 物

比如: 1000为数字字面量

'黑马程序员'字符串字面量

[]数组字面量 {}对象字面量 等等

# JS变量

## 变量

变量就是计算机中用来储存数据的"容器",它可以让计算机变得有记忆

注意:变量不是数据本身,它们仅是一个用来储存数据的容器

## 变量如何声明

想要使用变量,首先要创建变量

语法:

  let 变量名

  声明变量有两部分组成: 声明关键字,变量名

  let即关键字(let:允许

,许可,让),所谓关键字是系统提供的专门用来当声明变量的词语

## 更新变量

变量赋值后，还可以通过简单的给他一个不同的值来更新它

注意:let不允许多次声明同一个变量

声明多个变量中间用逗号隔开(不推荐该方法)

## 变量的本质

是程序在内存中申请的一块用来存放数据的小空间

 

## 变量的规则与规范

1. 规则:

  不能用关键字

  只能由数字，字母，下划线，$组成，且不能以数字开头

  字母严格区分大小写

2. 规范

  起名要有意义

  遵循小驼峰命名法:第一个单词首字母小写，后面的每个单词首字母大写

## let和var区别

在较旧的JavaScript，使用关键字var来声明变量，而不是let

let为了解决var的一些问题

var 声明

  可以先使用 再声明(不合理)

  var 声明过的变量可以重复声明(不合理)

  比如变量提升、全局变量、没有块级作用域等等

# 数组的基本使用

数组声明:

let arr = ['刘德华', '易顺轩','张文愚']

汉字一定要加单引号

数组是有序的

使用数组:

数组名[索引号] 从0开始

length属性可以获得数组的长度

  eg:  console.log(arr.length)

 

# 常量

概念: 使用const声明的变量称为常量

使用场景:当某个变量永远不变时，就用const声明，而不是let

注意: 常量不允许重新赋值，声明的时候必须赋值(初始化)

小技巧: 不需要重新赋值的数据使用const

 

# 数据类型

js是弱数字类型语言，只有当我们赋值了，才知道其数据类型

## 基本数据类型

 

### number 数字型

 整数 浮点数 字符串

 算术运算符:

 + - * / %

 % 意思是取模  用于判断一个数能否被整除

 优先级相同时从左到右运算

 

### string 字符串型

通过单引号、双引号、或反引号(`)包裹的数据叫字符串，单引号与双引号本质上没有区别，推荐使用单引号

1. 数字用单引号包裹起来就是字符串类型

2. 单引号/双引号可以相互嵌套，但是不可以自己与自己嵌套(口诀:外单内双，外双内单)

3. 必要时可以使用转义字符\，输出单引号或双引号

字符串拼接:

场景: + 运算符 可以实现字符串的拼接

口诀: 数字相加，字符相连

eg: document.write('我叫' + '刘德华') //我叫刘德华

    let uname = '刘德华'

    let song = '忘情水'

    document.write(uname + song)  //刘德华忘情水

    只要加号两边有一个为字符串，都可以进行字符串的拼接

eg: let age = 18

    document.write('我今年' + age)  //我今年18

模板字符串:

  使用场景:

            1. 拼接字符串和变量

            2. 在没有它之前拼接比较麻烦

  语法:

        1. ``(反引号)

        2. 在英文输入模式下按键盘的tab上方哪个键

        3. 内容拼接变量时，用${}包住变量

 

### boolean 布尔类型

true false   布尔型字面量

### undefined 未定义型

只有一个值 undefined

声明一个变量未赋值就是 undefined

### null 空类型

表示 "无" "未知" "空"

null 和 undefined 的区别

undefined 表示没有赋值

null 表示赋值了，但是内容为空

计算有区别: console.log(undefined + 1)  //NaN

            console.log(null + 1)    //1

null 的使用场景:

官方解释: 把null作为尚未创建的 对象

大白话: 将来有个变量里面存放一个对象，但是对象还没创建好，可以先给的null

 

注:

  NaN 代表一个错误/它是一个不正确的或者一个未定义的数学操作所得的结果

eg: console.log('老师' - 2)  //NaN

  NaN是粘性的。任何NaN的操作都返回NaN

  eg: console.log(NaN - 2)  //NaN

 

## 引用数据类型

object 对象

 

## 监测数据类型

通过typeof关键字检测数据类型

typeof运算符可以返回被检测的数据类型。它支持两种语法形式:

1. 作为运算符: typeof x (常用的写法)

2. 函数形式: typeof (x)

换言之，右括号和没括号，得到的结果是一样的，所以我们直接用运算符的写法

# 数据类型转换

JavaScript是弱数据类型:JavaScript也不知道变量到底属于什么数据类型，就只有赋值了才清楚

坑:使用表单、prompt获取来的数据默认为字符串数据类型，此时就不能直接简单的进行加法运算

eg: console.log('10000' + '2000') //100002000

类型转换: 把一种数据类型的变量转换为我们所需要的数据类型

## 隐式转换

某些运算符被执行时，系统会自动地将数据类型转换，这种转换叫做隐式转换

规则:

 1. +号两边只要有一个是字符串，都会把另外一个转换为字符串

 2. 除了+以外的算术运算符 比如 - * /等都会把数据转化为数字类型

缺点:

    转换类型不明确，靠经验才能总结

小技巧:

    +号作为正号解析可以转换成数字型 eg: +'123'  //123(此时为数字型)

    任何数据和字符串相加的结果都是字符串

## 显示转换

## 转换为数字型

  Number()

1. 转换为数字型

2. 如果字符串内容里有非数字,转换失败时结果为NaN(Not a Number)即不是一个数字

3. NaN也是number类型的数据,代表非数字

  parseInt(数据)

  只保留整数

  eg: parseInt('12px')  //12

      parseInt('12.34')  //12

      parseInt('abc12.34px')  //NaN

  parseFloat(数据)

  可以保留小数

    eg: parseInt('12px')  //12

      parseInt('12.34px')  //12.34

      parseInt('abc12.34px')  //NaN

# 运算符

## 赋值运算符

对变量进行赋值的运算符

=    将等号右边的赋值给等号左边,要求左边必须是个容器

其他赋值运算符:

+=   -=  *=  /=  %=(该类运算符会将右边的值加在左边上并将之赋给左边变量)

## 一元运算符

只有一个操作数

自增运算符

++ 分为前置自增和后置

自减运算符

--  分为前置自减和后置自减

 前置先运算后使用,后置先使用后自加

 前置与后置再单独使用时没有差异

 ## 比较运算符

 == 左右两边值是否相等

 === 左右两边是否数据类型和值都相等  (常用)

 !== 左右两边是否不全等

 比较运算符有隐式转换,把'2' 转换为 2 (转换为Number型)

 NaN不等于任何值,包括自己

 字符串也可以比较(了解即可)

 比较字符串是比较对应的ASCLL

  规则:

  1. 从左往右依次比较

  2. 如果第一位一样,在比较第二位,以此类推

重点:比较运算符返回的结果是  true 或者 false

## 逻辑运算符

应用场景: 解决多重的运算条件

&& 逻辑与  一假则假

|| 逻辑或  一真则真

!  逻辑非  取反

## 运算符的优先级

1 小括号  ()

2 一元运算符  ++ -- !

3 算术运算符 先 * / % 后 + -

4 关系运算符 > >= < <=

5 相等运算符  == != === !==

6 逻辑运算符  先 && 后 ||  (重点注意)

7 赋值运算符  =

8 逗号运算符  ,