js基础（一）

js组成

js是由ECMAScript DOM BOM 三部分组成的

其中

ECMAScript 定义了JavaScript的语言规范

DOM 文档对象模型

BOM 浏览器对象模型

一、js书写位置

1、外联式

外部添加 .js 文件，通过script标签的 src属性 引入

2、内嵌式

在 body 里面的最下面书写 script 标签，里面添加js

3、行内式

在html标签里面 添加onclick属性

<button onclick="alert('内容')">加钱居士</button>

4、注释与结束符

使用 // 注释单行代码 快捷键:`ctrl + /`

使用 `/* */` 注释多行代码 快捷键:`shift + alt + A (或ctrl+shift+/)

5、结束符

在 JavaScript 中 `;` 代表一段代码的结束，多数情况下可以省略 `;` 使用回车（enter）替代

6、输入和输出语法

用户通过键盘、鼠标等向计算机 输入 信息

计算机处理后再展示结果 输出 给用户

二、变量

1、变量的定义

变量就是计算机中用来存储数据的容器,它可以让计算机变得有记忆.简单理解变量就是一个装东西的盒子

2、声明变量

声明变量有两部分构成：声明关键字、变量名（标识)

比如：let age

let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语

age 即变量的名称，也叫标识符

let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 `let` 声明变量！！！

3、变量赋值

变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据

简单来说 就是创建了一个文件夹，通过赋值 在这个文件夹里面 创建文件

4、变量的基本使用

更新变量

let age = 18
      age = 19
    //注意： let 禁止多次声明一个变量

声明多个变量

多个变量中间使用逗号隔开

console.log(age, uname)

5、声明临时变量（了解）

let temp        在交互2个变量时使用

temp 为临时变量，可以不赋值

<script>
    // 核心思路 要定义一个临时变量 
    // 1 声明num1 num2 两个变量 同时赋值
    let num1 = 10
    let num2 = 20
    // 2 声明临时变量 
    let temp
    // num1的值给temp
    temp = num1
    // num2的值给num1 
    num1 = num2
    // temp的值给num2
    num2 = temp
    console.log(num1, num2)
  </script>

6、变量命名规范

1、只能是字母、数字、下划线、$，且不能能数字开头

2、字母区分大小写，如 Age 和 age 是不同的变量

3、JavaScript 内部已占用于单词（关键字或保留字）不允许使用（如 `let` 和`var` ， 保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语）

 4、尽量保证变量具有一定的语义，见字知义

规范:

        起名要有意义

        遵守小驼峰命名法

        第一个单词首字母小写，后面每个单词首字母大写。例：`userName`

7、let与var的区别

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

let 是为了解决 var 的一些问题而出现的

var 声明:

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

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

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

8、变量扩展-数组

数组 (Array) —— 一种将 一组数据存储在单个变量名下 的方式

数组可以在容器中 存储多个数据

数组三要素: 元素  下标（索引） 数组长度

语法:let arr = [数据1,数据2,数据3,...,数据n]

9、常量

概念：使用 const 声明的变量称为“常量”

当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let

命名规范：和变量一致

注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）

三、数据类型

定义：基本数据类型:number(数字型) .  string(字符串型).    boolean(布尔型) .   undefined(未定义型) .   null(空类型)

1、数字型

就是我们数学中学习到的数字，可以是整数、小数、正数、负数

2、算术运算符

数学运算符也叫**算术运算符**，主要包括加(+)、减(-)、乘(*)、除(/)、取余数(%)（取模）

NaN： not a nomber   代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

3、字符串型

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

注意: 

无论单引号或是双引号必须成对使用

单引号/双引号可以互相嵌套，但是不以自已嵌套自已(口诀:外双内单 或者外单内双)

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

字符串的长度(拓展)

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度

4、字符串拼接

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

 数字相加                字符相连

console.log(1 + 2) // 3 
    console.log('我叫' + 'tom')//我叫tom 
    let age = 25 
    document.write('我今年' + age + '岁了')// 我今年25岁了 

5、模板字符串

模板字符串 外面用``  里面 ${变量名}

let uname = prompt('请输入您的姓名:')
  let age = prompt('请输入您的年龄:')
  document.write(`大家好，我叫${uname}， 我今年${age}岁了`)

6、布尔型

表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 `true` 和 `false`，表示肯定的数据用 `true`，表示否定的数据用 `false`

// 1. true  false 是布尔型字面量
console.log(3 > 4)    //false 
console.log(3 < 4)    //true

7、未定义

未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined

let num
  console.log(num)    //undefined

8、空类型

null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

undefined与null的区别

undefined  表示没有赋值        (就像是期房)

null  表示赋值了，但是内容为空        (就像是毛坯房)

9、数据类型检测

typeof 运算符   可以反馈被检测的数据类型

语法形式：

  1.作为运算符： typeof x （常用的写法）

  2.函数形式： `typeof`(x) （不常用）

  有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。

console.log(typeof num)
  console.log(typeof num1)//string

四、类型转换

在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。

1、隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

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

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

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

2、显式转换

目的：为了更加准确的数据转换

转换为数字型

console.log(Number(str))
      console.log(parseInt('12px'))  //parseInt 只显示整数
      console.log(parseFloat('12.34px'))  //parseFloat  显示到小数位结束

错误案例：

console.log(Number('bozai'))//NaN
      console.log(parseInt('abc12.94px'))
      console.log(parseFloat('abc12.94px')) // 12.94

转换为字符型

方法一 ：把数字型转换为字符串型 变量.

toString()
          let num = 10;
          let str = num.toString();

方法二 ： 我们利用 String(变量)

console.log(String(num));