一、JavaScript入门

一个前端网页主要由三门语言组成，他们之间是缺一不可的关系

HTML：确定网页的结构
CSS: 确定网页的样式
JavaScript: 确定网页的行为(交互)
- 众所周知，在前端开发中一个网页的源代码主要由三部分组成（HTML,CSS,Javascript）,其中HTML确定网页的结构，CSS确定网页的样式,而JavaScript则主要负责网页的行为（动态效果，交互事件等）。

1.js三个组成部分

ECMAScript - JavaScript的核心
- ECMAScript定义了JavaScript的语言规范
- JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
DOM - 文档对象模型
- 一套操作页面元素的API
- DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
BOM - 浏览器对象模型
- 一套操作浏览器功能的API
- 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

2.JS代码三种写法

JavaScript也有三种书写方式，并且与CSS的三种书写方式几乎一致
1.行内样式：不推荐，因为不便于维护
- <button onclick="window.alert('js行内写法')">欢迎来到黑马程序员</button>
2.内部样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐
- <script >alert("这是JS内联样式")</script >
3.外部样式：写在js文件中，使用script的src属性导入
- <script src="./01-JS外联写法.js"></script>

3.JS两种注释写法

<script>
    //单行注释：注释内容只能是这一行
    /* 多行注释：注释内容可以是多行
    第一行
    第二行
    */
</script>

4.输入与输出语句

输出语句1 : 在网页弹出一个提示框，输出数据

//输出语句1:弹出一个提示框，通常用于提示用户，也可以用于调试
alert("hello world");

输出语句2：在控制台打印某个数据

//输出语句2:打印某个数据的值，查看数据是否成功
//这个写法不是给用户看的，而是给程序员自己调试看的
console.log("欢迎大家来到黑马程序员");

输出语句3：将数据显示到网页

//输出语句3:将数据显示到网页，相当于给body添加内容
document.write("黑马程序员是中国最牛逼的IT培训机构");

输入语句1：在网页弹出一个输入框，让用户输入数据

//输入语句1：弹出一个输入框，可以用来输入数据
prompt("深圳的前端平均薪资是多少呀？");

输入语句2：在网页弹出一个确认框，让用户输入确认/取消二选一

//输入语句2：在网页弹出一个确认框，让用户输入 确认/取消 二选一
confirm("你确定你已经成年了吗？");

二、数据类型

1.数据类型介绍

1.为什么需要有数据类型？

每一种编程语言都有自己的语法规则,在处理数据的时候,也会有自己的规则,不是任何数据都可以处理的。 2.什么是数据类型？
js编译器在解析代码的时候,会产生各种不同的数据。而不同的数据'运算'与'存储'方式都不同, 计算机需要对这些数据进行分类,称之为数据类型。

2.五种基本数据类型

数值类型(number)：直接定义一切数学中的数字。//作用 : 用于数学计算

Number 数值型
console.log(20)
console.log(+20)
console.log(-20)
console.log(3.1415)

// 数字型的最大值
console.log(Number.MAX_VALUE);
// 数字型的最小值
console.log(Number.MIN_VALUE);
// 无穷大
console.log(Number.MAX_VALUE * 2); // Infinity 无穷大
// 无穷小
console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷小
// 非数字
console.log('呵呵' - 100); //NaN

字符串类型(string) : 字符串一切以单引号'' 双引号"" 反引号``包起来的内容。//作用 : 用于展示文本

console.log('hello')
console.log("zhangsan")
console.log('20')

字符串转义字符
转义符都是以\开头的
\n		换行符，n是newline的意思
\\		斜杆\
\'		'单引号
\"		“双引号
\t		tab缩进
\b		空格，b是blank的意思

1.检测获取字符串的长度length
var str = 'my name is andy'
console.log(str.length); // 15
2.字符串的拼接 +  只要有字符串和其它类型相拼接，最终的结果是字符串
+号口诀：数值相加，字符相连

布尔类型(boolean) 仅有两个值:true false 。//主要的作用于表示判断的结果

// true     成立
// false    不成立
console.log(true)
console.log(false)

未定义类型(undefined) 仅有一个值：undefined

console.log(undefined)

空类型(null) 仅有一个值: null

console.log(null)

3.typeof检测数据类型

语法：typeof(数据) typeof 数据

console.log(20)                     // 20
console.log(typeof(20))             // number
console.log(typeof(Infinity))       // number

console.log('hello')                // 'hello'
console.log(typeof('hello'))        // string
console.log(typeof(''))             // string
console.log(typeof(' '))            // string

console.log(typeof(true))           // boolean
console.log(typeof(false))           // boolean

console.log(typeof(undefined));     // undefined
// 特殊记忆
console.log(typeof(null));          // object

4.数据初体验

// let arr = [10, 20, 30]
    // 1. 声明数组 有序 
    let arr = [20,90,10,30,70]
    // 2. 使用数组  数组名[索引号] 从0
    // console.log(arr)
    console.log(arr[0]) // 10
    console.log(arr[4])
    // 3. 数组长度 =  索引号 + 1 
    console.log(arr.length)  // 6

    // let 刘德华 = 10
    // console.log(刘德华)

    console.log(['as',20,'aaa',50,6,'张三',95]);

三、变量

1.变量声明/取值/赋值

//变量作用： 在内存中存储数据

        //1.声明变量 ： 在内存中开辟一个空间
        let age
        //2.变量赋值
        // = : 赋值运算符（把右边的数据放入左边的变量中）
        age = 18
        //3.变量取值 ： 读取变量(容器)中存储的数据
        document.write( age )

        //变量可以在声明的时候赋值
        let name = '班长'//等价于 (1) let name  (2)name = '班长'
        document.write( name )

2.变量使用注意点

1. 变量作用 ： 在内存中存储数据
2. 变量语法：
    2.1 声明变量 ：   let 变量名;
    2.2 变量赋值 :    变量名 = 值;
    2.3 变量取值 :    变量名
3.变量使用注意点：
     3.1 变量不能重复声明，程序会报错
     3.2 变量重复赋值，会先销毁旧值，然后存入新值
     3.3 一个变量 赋值给 另一个变量，会将自己的数据拷贝一份然后赋值
     //声明变量并且赋值
        let num1 = 10;

        /* 注意点1 ： 变量不能重复声明，否则程序会报错 */
        // let num1 = 20;

        /* 注意点2 ： 变量重复赋值，会先销毁旧值，然后存入新值 */
        num1 = 20;

        /* 注意点3 ： 一个变量 赋值给 另一个变量，会将自己的数据拷贝一份然后赋值 */
        let num2 = num1;

        console.log(num1,num2);

3.变量的命名规范

1.变量(letiable)作用 ： 在内存中 存储数据

        2.变量语法
            a. 声明变量  ：  let 变量名;
            b. 变量赋值  ：  变量名 = 值
            c. 变量取值  :   变量名 

        2.变量补充说明
            a. 变量初始化
                语法： let 变量名 = 值;
            b. let变量 不允许重复声明
            c. 变量重新赋值
                语法 : 变量名 = 值;
                特点 : 先销毁旧值，然后存入新值
            d. 变量的值是另一个变量
                语法 : 变量名a = 变量名b
                特点 : 将变量b中的数据， 拷贝一份赋值给a
3.变量命名规则
 * 3.1规则：必须要遵守，否则会报错。由语法决定
      * 1.变量只能以下划线、字母、$开头，后面接任意的数字、下划线、字母、$
      * 2.不能以JS的关键字作为变量名
      * 3.js是严格区分大小写的， 例如：age与Age这是两个不同的变量名
 * 3.2规范: 大家都遵守的一种编码习惯，主要是为了提高代码的易读性
      * 1.起名要有意义，最好用英语名词作为变量名
      * 2.使用驼峰命名法：变量名第一个单词首字母小写，后面如果由其他单词则每一个单词的首字母大写
 //存名字
    let name = '坤哥'
    //存年龄
    let age = 30
    //存性别

4.交换两个变量的值

/*
逻辑：
    借助第3个变量 c，
    将a变量赋值给 变量c
    再将变量b赋值给变量a
    再将变量c赋值给变量b
*/
let a = 10;
   let b = 20;
   let c = a;
   a = b;
   b = c;

5.常量

常量：常量就一类很特殊的变量，也是用于存储数据，特殊在常量里的数据不能修改

// 使用const定义常量
const num = 100;

四、运算符与表达式

1.算术运算符

1.运算符 : 有运算作用的符号
2.算术运算符 : 用于 数学算术运算
            + - * / %(求模运算,相当于取余数) 
3.表达式 : 由运算符组成的式子
4.算术表达式 ： 由算术运算符组成的式子  例如   1+1
重点： 任何表达式,都一定会有运算结果
//将表达式的结果存入变量
   let num = 1 + 1
   console.log(num) //2

//直接打印表达式结果
   console.log(10 - 1) //9
   console.log(10 % 3) // 10除以3, 余数 1

2.赋值运算符

/*赋值运算符 
    =  +=  -=  *=  /=   %=
    */

    //+=
    let num1 = 10;
    num1 += 10;//这行代码相当于 num1 = num1 + 10 的简写形式
    console.log ( num1 );//20
    //-=
    let num2 = 70;
    num2 -= 10; //相当于  num2 = num2 - 10;
    console.log(num2);//60
    //*=
    let num3 = 20;
    num3  *=  4;  //相当于  num3 = num3 * 4;
    console.log(num3);//80
    // /=
    let num4 = 90;
    num4 /= 3;//相当于 num4 = num4 / 3
    console.log(num4);//30
    // %=
    let num5 = 10;
    num5 %= 3; // num5 = num5 % 3;
    console.log(num5);//1

3.自增自减运算符

//1.自增运算符 ++
    //自增表达式:   num++
    let num1 = 10;
    num1++;//这行代码相当于 num1 = num1 + 1 的简写形式
    console.log ( num1 );//11

//2.自减运算符 --
    //自减表达式： num--
    let num2 = 20;
    num2--;//这行代码相当于 num2 = num2 - 1 的简写形式
    console.log ( num2 );//12

4.关系运算符

/**1.关系运算符（比较运算符）：比较两个数据之间的关系（某种条件是否成立）
        * 八种： >  >=  <  <=  ==  !=  ===全等 !== 不全等
        * ==  判断两个数据值相同，如果相同返回true，否则返回false
        * !=  判断两个数据值不相同，如果不相同返回true，否则返回false
        * ===  比较两个数的值与类型必须完全相同，相同返回true，否则返回false
        * !==  比较两个数的值与类型至少有一方面不相同，有一方面不相同就返回true，否则返回false
    * 2.关系表达式：由关系运算符组成的式子    例如:  2 > 1
            * 只要是表达式，就会有运算结果
     * 3.关系表达式的结果一定是布尔类型：true代表成立，false代表不成立
     */

5.逻辑运算符

/* 
   0.关系运算符：某种条件的关系（成立/不成立），例如我的年龄大于你的年龄30>20
   1.逻辑运算符：多个条件之间的关系
   2.逻辑运算符只有三种
       * && :逻辑与 ，读作并且
       * || :逻辑或，读作或者
       * !  :逻辑非，读作取反
           * true（真）变false（假），false（假）变true（真）
   * 3.逻辑表达式: 表达式1 逻辑运算符 表达式2 
*/
1.逻辑与&&结果： 一假为假     （左右两边同时成立，才为真，否则为假）
2.逻辑或 ||结果 : 一真则真  （左右两边同时为假，才为假，否则为真）
3.逻辑非！ ： 又叫做取反  真变假 假变真

6.字符串与变量的拼接

两个字符串拼接成一个新的字符串，并不影响原来的两个字符串 += 在原字符串的后面追加新的内容

 // 字符中与变量拼接，将一个变量的值，放入到一个字符串中
    let uName = prompt('请输入姓名');   // 'zhangsan'
// 字符串内的变量的值不会被读取出来进行显示(字符中的变量并不会作为变量进行处理，而字符串的内容)
    let h1 = 'xxxx ' + uName + ' oooo';
    console.log(h1)

7.模板字符串

// 使用反引号定义的字符串也称之为，模板字符串
// 模板字符串中，使用${} 格式可以将变量的值嵌套入到字符串内   格式： ${变量名}
   let uName = prompt('请输入姓名');
   let h1 = `xxxx ${uName} oooo`;
   console.log(h1)

8.运算符的优先级

运算符优先级.png

/* 
        逻辑非
        先乘除
        后加减
        再比较
        再逻辑(&&、||)
        最后赋值
        */
        // 可以使用 () 来提升运算符的优先级
        let ret = 10 * (20 + 10) > 300 && 200 < 100;

9.自增与自减

了解++i与i++的区别

 // ++
        // ++可以放在变量前，也可以放在变量后
        // ++i  前自增
        // i++  后自增

        // 无论前自增，还是后自增，对变量的值是没有影响的，都会加1

        /* let i = 10;
        ++i;
        console.log(i);     // 11

        let j = 10;
        j++;
        console.log(j);     // 11
         */
// 影响的是参与其他运算时
        // 前自增：先自增，再参与运算(使用本次自增后的值参与运算)
        // 后自增：先运算(使用本次未自增的值参与运算)，本次运算结束后再自增
        // let i = 10;
        // let ret1 = ++i;         // i = i+1      ret1= i;

        // let j = 10;
        // let ret2 =j++;         // ret2 = j;        j = j+1
        // console.log(ret1,ret2);
        // console.log(i,j);

五、数据类型转换

只有相同的数据类型才可以直接进行运算。如果类型不相同则会发生转换。

1.隐式转换

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

注意：使用 + 和 +=时，会优先转换为字符串进行拼接。

        // 布尔类型的隐式转换
/* 
        // ! 取反运算符
        let a = 10;
        console.log(!a);            //  false
        let b = '';
        console.log(!b);            // true
 */
        // if的表达式 或 三元运算符 表达式
        /* 
        if(表达式)   
        表达式 ? 语句1 : 语句2
        */

        if(100){            // 相当于 if(Boolean(100))
            document.write('yes')
        }

2.显示转换

let str = '123'
    // 提取整数，从左往右提取，知道碰到第一个不是数值的字符后停止
    console.log(Number(str))
    console.log(Number('hello'))
    // let num = Number(prompt('输入年薪'))
    // let num = +prompt('输入年薪')
    // console.log(Number(num))
    // console.log(num)
    console.log(parseInt('12px'))
    console.log(parseInt('12.34px'))
    console.log(parseInt('12.94px'))
    console.log(parseInt('abc12.94px'))

    // 提取小数 从左往右提取，知道碰到第一个不是数值的字符后停止
    console.log(parseFloat('12px')) // 12
    console.log(parseFloat('12.34px')) // 12.34
    console.log(parseFloat('12.94px')) // 12.94
    console.log(parseFloat('abc12.94px')) // 12.94

    // Number(数据) 将其他数据类型转换为数值类型
    // String(数据) 将其他数据类型转换为字符串类型
    // Boolean(数据) 将其他数据类型转换为布尔类型
    // 其他数据         布尔

    console.log(Boolean(10));       // true
    console.log(Boolean(-10));      // true 
    console.log(Boolean(0));        // false
    
    console.log(Boolean('hello'));  // true
    console.log(Boolean(''));       // false
    console.log(Boolean(' '));      // true
    console.log(Boolean('0'));      // true

// 只要是有意义都返回true，

初识JavaScript

一、JavaScript入门

1.js三个组成部分

2.JS代码三种写法

3.JS两种注释写法

4.输入与输出语句

二、数据类型

1.数据类型介绍

2.五种基本数据类型

3.typeof检测数据类型

4.数据初体验

三、变量

1.变量声明/取值/赋值

2.变量使用注意点

3.变量的命名规范

4.交换两个变量的值

5.常量

四、运算符与表达式

1.算术运算符

2.赋值运算符

3.自增自减运算符

4.关系运算符

5.逻辑运算符

6.字符串与变量的拼接

7.模板字符串

8.运算符的优先级

9.自增与自减

五、数据类型转换

1.隐式转换

2.显示转换