JavaScript Day1

JavaScript Day1(基础)

简介

概念：JavaScript是一种运行在客户端（浏览器）的编程语言

组成：两部分（ECMAscript & Web APIs）

​ 三部分（ECMAscript & DOM & BOM)

标签样式

1. 行内式
2. 嵌入式（，标签内不要写代码无效）

输入输出语句

输入

语法1：

document.write('')

语法2：页面弹出

alset('')

语法3：控制台输出

console.log('')

输出

prompt('')

JavaScript代码执行顺序:

按HTML文档流顺序执行JavaScript代码
alert()和 prompt()它们会跳过页面渲染先被执行

变量声明

单个变量（推荐）

ES6中声明变量用let

var a = 18
var a = 19
console.log(a) //不报错，不科学

let a = 18
let a = 19
console.log(a) //报错，不允许多次声明

使用var，不好之处：

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

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

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

多个变量（可读性不好）

逗号隔开

let age = 18, username = "xiaoxiao"

变量名命名规范，特别要注意的几点：

不能用关键词；

只能用下划线、字母、数字、$组成，且数字不能开头；

js严格区分大小写.

常量声明

注意点：

1. 常量不允许更改值
2. 常量声明的时候必须赋值

数据类型

基本数据类型：number & string & boolean & undefined & null

引用数据类型：object对象

• 字符串可以用""(双引号) | ‘’(单引号) | ``(反引号)

  字符串拼接

  let age = 18
  console.log("我今年"+ age + "岁了")
  // 模板字符串 外面反引号`` 里面${变量名}
  console.log(`我今年${age}岁了`)
  

  使用表单、prompt获取过来的数据默认是字符串类型的

• undefined & null

  undefined表示变量未赋值

  null表示赋值了，但是内容为空（官方解释：把null作为尚未创建的对象）

  console.log(undefined + 1) //NaN
  console.log(null + 1) //1
  

• 检测数据类型

  console.log(typeof null) //object
  

• 类型转换

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

    ＋号两边只要有一个是字符串，都会把另外一个转成字符串；作为正号解析可以转换成数字型

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

    console.log(2 + '2') //22
    console.log(2 - '2') //0
    console.log(+'123') //123,转换为数字型
    

  • 显式转换

    转数值

    Number() & parseInt() & parseFloat()

    let num1 = +prompt('输入年薪')
    console.log(num1)
    let num2 = Number(prompt('输入年薪'))
    console.log(num2)
    

    let a = +prompt("1:")
    let b = +prompt("2:")
    alert(`两个数的和为${a + b}`)
    

    转字符串

    String()
    变量.toString() 括号里面可以跟进制

运算符

一元运算符

前置|后置自增 自减

let i = 2
console.log(++i + 1); //4
console.log(i++ + 1); //4

//了解
let t = 1
console.log(t++ + ++t +t) //1+3+3=7

比较运算符

1. 字符串比较，是比较的字符对应的ASCII码

   （从左往右依次比较；如果第一位一样再比较第二位，以此类推）

2. 不同类型之间比较会发生隐式转换

   最终把数据隐式转换转成number类型再比较

   所以开发中，如果进行准确的比较我们更喜欢 === 或者 !==

3. = & == & === 区别

   =是赋值

   ==是判断只要求值相等，不要求数据类型一样即可返回true

   === 是全等要求值和数据类型都一样返回的才是true

   开发中，请使用===

console.log('a' < 'b') //true
console.log('aa' < 'ab') //true
console.log('aa' < 'aab') //true，一位一位比较，没有的肯定小于有的

逻辑运算符

&& || ！

&& 一假则假

|| 一真则真

let year = +prompt('请输入年份：')
if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){
    alert(`${year}年是闰年`)
} else {
    alert(`${year}年是平年`)
}

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ – !
3	算数运算符	先 * / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先 && 后 ||
7	赋值运算符	=
8	逗号运算符	，

三元运算符

运用场景：其实是比 if 双分支更简单的写法，可以使用三元表达式

let num1 = +prompt('请您输入第一个数：')
let num2 = +prompt('请您输入第二个数：')
num1 > num2 ? alert(`最大值是${num1}`) : alert(`最大值是${num2}`)

//补零
let num = prompt('请您输入一个数字')
//法一:
// num < 10 ? num = 0 + num : num = num
//法二:
num = num < 10 ? 0 + num : num
alert(num)

表达式

表达式是可以被求值的代码，JavaScript引擎会将其计算出一个结果。

语句：语句是一段可以执行的代码。

程序三大流程控制语句

​ 以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构

​ 有的时候要根据条件选择执行代码，这种就叫分支结构

​ 某段代码被重复执行，就叫循环结构

if() 除0所有的数字都为真 && 除了空字符串’'所有的字符串都为真（’ '也为真）

switch判断是全等===；break穿透

let num1 = prompt('请您输入第一个数字:')
let num2 = prompt('请您输入第二个数字:')
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('请输入+-*/')
}

let money = 100
while(true){
    let re = +prompt(`
    请您选择操作：
    1.存钱
    2.取钱
    3.查看余额
    4.退出`)
    if (re === 4){
        break
    }
    switch(re) {
        case 1:
            let cun = +prompt('请输入存款金额')
            money = money + cun
            break
        case 2:
            let qu = +prompt('请输入取款金额')
            money = money - qu
            break
        case 3:
            alert(`您的银行卡余额是${money}`)

while循环三要素：

变量起始值；

终止条件（没有终止条件，循环会一直执行，造成死循环)；

变量变化量（用自增或者自减).

continue & break 区别：

let i = 1
while(i <= 5){
    if (i === 3){
        i++
        break //1,2
        // continue 
        //1,2,4,5
    }
    console.log(`我要吃第${i}个包子`)
    i++
}