JavaScriptDAY1

学习背景

开始学习JS

学习的视频是在b站的黑马pink老师。

JavaScript组成

1.ECMAScript：规定了基础语法核心知识。

2.Web APIs

        DOM：操作文档。比如对页面元素进行移动、大小、增删等。

        BOM：操作浏览器。比如页面弹窗。

输入输出语法

输出语法

1.document.write('输出内容')。向body内输出内容

如果输出的内容为标签，也会被解析成网页元素

document.write('输出')
document.write('<h1>为一个标题</h1>')

2.alter('输出内容')。页面弹出警告对话框

3.console.log('控制台打印') 。控制台输出语法，一般用于程序员调试

输入语法

1.prompt('输入内容')。显示一个对话框，对话框内包含一条文字信息，用于提示用户输入

JS变量

变量初始化（声明+赋值）。使用let

let uname = '张三'

原来用var声明不合理的地方

1.var可以先使用后声明

2.var声明过的变量可以重复声明

3.没有块级作用域

JS常量 

    const PI = 3.14

类似let，但不允许重新赋值，声明的时候必须初始化 

数据类型

分类

1.基本数据类型

number（数字类型）、string、boolean（只有true和false）、undefined（变量只声明了但是没有赋值）、null（有赋值但是对象为空）

2.引用数据类型

object

检测数据类型方法：typeof x（x为要检测的数据）

模板字符串

用于拼接字符串和变量。

    let age = 99
    document.write(`今年${age}岁`)

隐式转化和显式转化 

因为js是弱数据类型，js不知道变量到底属于那种数据类型，只有赋值了才清楚。比如使用表单、prompt获取的数据默认是字符串类型的，若此时要是得用数字类型得进行转化。

隐式转化

定义：某些运算符被执行时，系统内部自动将数据类型进行转化。

1.加号的隐式转化（有两个，比较特殊）：

    // 数字类型2变成字符串类型 输出字符串22
    console.log(2 + '2')

    // 将字符串类型123变成数字类型123 输出数字123
    console.log(+'123')

2.减号-，乘号*，除号/两边只要有一个是数字类型，就会把另一个也转化成数字类型。

显式转化

定义：自己写代码告诉系统转化成什么类型。

1.Number(数据)：转化为数字型

    let num = prompt('输入数据')
    console.log(num)
    // 因为prompt默认为string类型 所有要进行数据转化  
    console.log(Number(num));

 2.parseInt(数据)：只保留整数

3.parseFloat(数据)：可以保留小数

运算符

1.算术运算符+，-，*，/，%

2.赋值运算符：=

3.一元运算符：++，--

4.比较运算符

注意：用==（双等）的比较运算符有隐式转换，可以将字符串隐式转化成数字类型，所有，以后判断是否相等，得用===（三等符号） 。

NaN与任何人都不相等，包括NaN自身。

5.逻辑运算符

分支语句

可以让我们有选择性的执行想要执行的代码。

if语句

    // 单分支语句
    let scorce = +prompt('输入高考成绩')
    if (scorce > 700) {
      console.log('成功')
    }

    // 双分支语句
    let year = +prompt('输入年份')
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
      alert('闰年')
    } else {
      alert('平年')
    }

    // 多分支语句
    let scorce = +prompt('输入成绩')
    if (scorce > 90) {
      alert('优秀')
    } else if (scorce > 70) {
      alert('良好')
    } else if (scorce > 60) {
      alert('及格')
    } else {
      alert('不及格')
    }

注意：判断条件中，除了0，其他所有数据都为真；除了''（空字符串），其他所有字符串都为真

三元运算符 

执行效果类似于if双分支，开发中经常用于赋值操作。

    // 三元运算符
    // 写法：判断条件？代码1：代码2
    // 若满足判断条件，执行代码1，若不能满足，执行代码2
    let num = 3 < 5 ? 3 : 5
    console.log(num)

switch语句

// switch语句
    // 简单计算机+、-、*、/
    let num1 = +prompt('用户输入数字1：')
    let num2 = +prompt('用户输入数字2：')
    let sp = prompt('选择运算符号')
    switch (sp) {
      case '+':
        alert(`你选择的是加号, 运算的结果为${num1 + num2}`)
        break;
      case '-':
        alert(`你选择的是加号, 运算的结果为${num1 - num2}`)
        break;
      case '*':
        alert(`你选择的是加号, 运算的结果为${num1 * num2}`)
        break;
      case '/':
        alert(`你选择的是加号, 运算的结果为${num1 / num2}`)
        break;
      default:
        alert("不能进行该运算")
        break;
    }

循环语句

循环三要素：变量的起始值，终止条件，变量变化量

while循环

格式

let num = +prompt('要打印的次数：')
    let i = 1
    while (i <= num) {
      document.write(`输出${num}次<br>`)
      i++
    }

循环的退出continue和break 

break：退出循环

continue：结束本次循环，继续下次循环

    while (true) {
      let ask = prompt('你要退出循环吗?回答是或不是')
      if (ask === '是') {
        break
      }
    }

for循环 

格式

    // 1-100之间的所有偶数和
    let sum = 0
    for (let i = 1; i <= 100; i++) {
      if (i % 2 === 0) {
        sum = i + sum
      }
    }
    document.write(sum)

循环数组 

for循环最常运用的场景是循环数组。

    let arrs = ['小明', '小花', '小陈', '小美', '小李']
    for (let i = 0; i < arrs.length; i++) {
      document.write(arrs[i])
    }

循环嵌套 

    // 循环嵌套
    for (let i = 1; i <= 3; i++) {
      document.write(`第${i}天<br>`)
      for (let j = 1; j <= 5; j++)
        document.write(`记住了${j}个单词<br>`)
    }

数组 

可以将一组数据存储在单个变量名下。

声明数组

    // 声明语法
    let arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
    // 获取数组内的值，注意：下标从0开始
    //通过下标取数据
    arr[0]
    // 输出星期日
    console.log(arr[6])

操作数组

修改

    let arrs = ['blue', 'pink', 'red']
    // 修改操作1：将blue改成green
    arrs[0] = 'green'
    console.log(arrs)
    // 修改操作2：每天元素后面都加上‘颜色’这两个字
    for (let i = 0; i < arrs.length; i++) {
      arrs[i] = arrs[i] + '颜色'
    }
    console.log(arrs)

增加 

利用push向数组添加元素，此方法能将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

利用unshift向数组添加元素，此方法能将一个或多个元素添加到数组的开头，并返回该数组的新长度。

    // 新增
    // push 添加到数组结尾
    let arrs = ['blue', 'pink', 'red']
    let changdu = arrs.push('yello', 'green')
    // 输出数组的值
    console.log(arrs)
    // 输出添加后的数组长度
    console.log(changdu)

    // unshift添加到数组头部
    arrs.unshift('gray')
    console.log(arrs)

删除

1.利用pop删除数组中最后一个元素，并返回该元素的值。

2.利用shift删除数组中第一个一个元素，并返回该元素的值。

    let arrs1 = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    // pop
    arrs1.pop()
    console.log(arrs1)

    // shift
    arrs1.shift()
    console.log(arrs1)

3.利用splice删除数组中指定的元素，并返回该元素的值。

splice(起始位置,删除几个元素)

注意：起始位置是从0开始。删除几个元素没写值，则从指定位置删除到最后。

    let arrs1 = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    // splice(起始位置,删除几个元素)
    arrs1.splice(1, 2)
    console.log(arrs1)