JS从入门到精通（一）

前端网页的三大组成部分

HTML(结构)、CSS(样式)、JS(行为)

JS的三种书写位置

JS的注释

分为单行注释和多行注释

//           单行注释
/*  */       多行注释 

输入和输出语句

//输出语句:展示数据
//弹出提示框,给用户看的
alert('今天是周五')

//控制台进行输出,展示给程序员看的
console.log('今天的天气真好呀')

//输出的信息展示在页面,在页面中显示,里面可以添加标签
document.write('武汉')

//输入语句:输入信息 
//弹出框,提示用户输入信息(这里要注意,这里拿到的数据都是字符串类型的)
prompt('请输入你的名字')

//确认框,提示用户确认信息
confirm('上面的信息你确定了吗') 

简单的数据类型(5种)

1.字符串类型 string，以单引号、双引号、反引号（模板字符串）包起来的内容，主要是用来展示文本

// 1 颜色是黑色,一般用于显示网页文本
console.log('xzq') 

2.数字类型 number，分为浮点型和整数型，一切数学中的数字（正数、负数、小数、无穷大（infinity））

 // 2 颜色是蓝色,一般用作数学计算
 console.log(123)
 console.log(132.2) 

3.布尔类型 Boolean,只有两个值，true表示真，false表示假，一般用作与条件判断

console.log(true)
console.log(false) 

4.undefined,未定义的数据类型,我的理解是声明了但是没有赋值,默认是undefined

//颜色为灰色
console.log(undefined) 

5.null 表示空值,只有一个值null

//颜色为灰色
console.log(null) 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jAm3wjNf-1654054736590)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe02bad7aa514151a625ec95e287eb37~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]
undefined和null的区别：
相同点：他们的值相同；转化为布尔类型都是false
不同点：数据类型不同；转化为数字类型不同，undefined为NaN,null是0

typeof检测数据类型

//  检测数据类型typeof
// 控制台显示string
console.log(typeof '123')
// 控制台显示number
console.log(typeof 25)
// 控制台显示boolean
console.log(typeof true)
// 控制台显示undefined
console.log(typeof undefined)
// 控制台显示object
console.log(typeof null) 

这里要注意的是null检测出来的类型是object，这是一个历史的遗留bug,我们不用进行深究

变量

作用：在内存中存储数据
变量的声明、赋值、取值
声明：在内存中开辟一个空间
赋值：把右边的数据放入左边的变量中
取值：读取变量中存储的数据

let age = 18
console.log(age) 

注意点:
1.变量不能进行重复声明
2.可以重新赋值，旧的值会被销毁
3.一个变量给另外一个变量赋值，先拷贝再赋值
4.变量名取名要有意义，不能以数字开头，要遵循小驼峰命名法
5.交换两个变量：声明一个临时变量进行交换

常量

值不能被修改，否则会报错 const PI = 3.14

字面量

直接拿过来使用的数据

运算符与表达式

1. 算术运算符，用于数学计算（+ - * / %）

由算术运算符组成的式子叫做表达式，表达式一定有运算结果

console.log(5 + 10)
console.log(10 - 5)
console.log(5 * 10)
console.log(10 / 5)
//求模运算，相当于取余数
console.log(10 % 3) 

2.赋值运算符（+= -= /= %= =）
等号是将式子右边的值存到左边的变量中

 // 赋值运算符的写法

        var num1 = 10;
        // 自加
        // num1 += 5;
        // console.log(num1);

        // // 自减
        // num1 -= 5;
        // console.log(num1);

        // 自乘
        // num1 *= 3;
        // console.log(num1);

        // 自己取余
        num1 %= 3;
        console.log(num1) 

3.自增自减运算符
i++
i--

 //1.自增运算符 ++
        //自增表达式:   num++
        let num = 10;
        num++;
        console.log(num);
        //2.自减运算符 --
        //自减表达式： num--
        num--;
        console.log(num); 

4.关系运算符
比较两个数据之间的关系(> >= <= < == != === !==)
比较的结果一定是布尔类型，要么就是true,要么就是fasle
注意：
两个==，只比较数据的值
三个===，先比较数据的值，再比较数据的类型

 /* 
        1.关系运算符作用 : 比较两个数据的关系
            >  >=  <  <=  ==(相等)  !=(不等)  ===(全等)  !==(不全等)
        2.关系表达式 : 由关系运算符组成的式子   例如: 2 > 1
        重点： 关系表达式的运算结果一定是布尔类型 ： true成立  false不成立
      */
    let nub1 = 5 > 3;
    console.log(nub1);
    let nub2 = 5 > 8;
    console.log(nub2);

    /*=号注意点 
      = : 赋值运算符   右边数据存入左边容器
      == : 相等运算  只比较值，不比较数据类型
      === : 全等运算  既比较值，也比较数据类型
    */
    let num = 2;
    console.log(num);
    console.log('123' == 123);
    console.log(('125') === 125); 

输出的结果

逻辑运算符

多个条件之间的关系
逻辑运算符只有三种：
&&：逻辑与，读作并且，一假则假
||：逻辑或，读作或者，一真则真
!：逻辑非，读作取反，true变成false,false变成true
逻辑表达式：表达式1 逻辑运算符 表达式2

 // 逻辑与运算符&  两个都为真,结果才是真
  let res = 1 > 10 && 1 < 10;
  console.log(res);  //false

  // 逻辑或运算符||   只要有一个真,结果就是真,两个都为假,结果才是假
  let num1 = 1 > 10 || 2 > 1;
  console.log(num1);   //true

  // 逻辑非! 不是真的就是假的
  console.log(!false);  //true 

运算符的优先级

不同的运算符在一个式子中的运算顺序

 ()  : 优先级最高
            一元: ++ -- !
            算术
            关系
            逻辑
            赋值 

注意： 小括号里面的优先级最高，逻辑与比逻辑或的优先级高