【前端从入门到精通：第十一课： JS基本语法】

独闯JavaScript

了解JavaScript

为什么学习JavaScript

JavaScript 是 web 开发者必学的三种语言之一：
HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程
我们学习 JavaScript，以及 JavaScript 如何与 HTML 和 CSS 协同工作的知识。

JavaScript简介

JavaScript 能够改变 HTML 内容
JavaScript 能够改变 HTML 属性
JavaScript 能够改变 HTML 样式 (CSS)
JavaScript 能够隐藏和显示 HTML 元素

JavaScript / ECMAScript

ECMA是“European Computer Manufacturers Association”的缩写，中文称欧洲计算机制造联合会。这个组织的目标是评估，开发和认可电信和计算机标准。
ECMA是标准， JavaScript是实现
类似HTML5是标准， IE10、Chrome、FF都是实现
目的是让所有前端脚本都实现ECMA
目前只有JavaScript实现ECMA标准， ECMAScript ≈ JS
ECMAScript简称ECMA或ES（ES6）
目前版本
高级浏览器支持ES6
低级浏览器主要支持ES3.1
在这里插入图片描述

JavaScript使用方式

在 HTML 中，JavaScript 代码必须位于标签之间。

<script>
    //书写javascript代码
</script>

在HTMl标签中使用

<a href="javascript:alert('this is a test')">去百度</a>
<p οnclick="alert(‘诶呦，我被点了一下’)">加个事件</p>

独立外部脚本使用

<script src="./demo.js"></script>

案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>

        </style>
        <script src="two.js"></script>
        <link rel="stylesheet" href="">
        <script>
            alert('1111111111111')
        </script>
    </head>
    <body>
        <!--第一种方式-->
        <script>
            window.alert('弹弹弹，弹走鱼尾纹~~~')
        </script>
        <!--第二种方式-->
        <a href="https://www.baidu.com">我想问度娘</a>
        <!--一般只写一句javascript代码时会使用-->
        <a href="javascript:alert('我是度娘')">我想问度娘1</a>

        <h2 οnclick="alert('欸有，我被点击了')">使用事件的方式运行js</h2>


    </body>
</html>
<script>
    alert('2222222222222222')
</script>
<!--第三种方式-->
<script src="one.js"></script>

one.js文件

alert('我是one.js里面的内容')

two.js文件

alert('我是two.js文件内容')

JavaScript输出

JavaScript 不提供任何内建的打印或显示函数

使用 window.alert() 写入警告框

alert('this is a test')
window.alert('this is a test')

使用 document.write() 写入 HTML 输出

document.write('写入内容到浏览器')
document.write(1 + 1)

使用 innerHTML 写入 HTML 元素

<div id="box"></div>
<script>
    document.getElementById('#box').innerHTML = '<b>跟我学前端</b>'
</script>

使用 console.log() 写入浏览器控制台

console.log('this is a test')
console.log(1 + 1)

案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="dv">#########3</div>
        <p οnclick="document.write('111111')">this is a p</p>
    <script>
        // 输出方式一
        alert('这是要输出的数据')
        window.alert('这是要输出的数据的第二条')
        alert(1 + 190)

        // 输出方式二
        document.write('我是第二种输出数据的方式')
        document.write(100 + 55)

        // 输出数据方式三
        document.getElementById('dv').innerHTML = '<b>我是第三种输出数据的方式</b>'
        document.getElementById('dv').innerHTML = '我不使用标签'

        // 输出数据方式四 输出到控制台
        console.log('输出到控制台')
        console.log(10 * 4)
    </script>
    </body>
</html>

JavaScript语句

JavaScript 语句是由 web 浏览器“执行”的“指令”
值、运算符、表达式、关键词和注释等构成JavaScript语句
英文状态下的分号（;）分隔 JavaScript 语句
JavaScript 空白字符
JavaScript 行长度和折行
JavaScript 代码块
JavaScript 关键词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var a = 10
    //这是一个注释
    var b = 20

    var c = a + b
    console.log(c)

    //； 命令执行符 指令分割符  或者 回车
    var d = 100;
    var e = 101;
    console.log(d + e)
    //换行可以是一个语句的结束，分号也可以是一个语句的介绍
    var a = 5; var b = 10;console.log(a + b)

    //结构定义语句不能加分号，程序执行语句一定要加分号或者换行(回车)
    if(true){
        if(true){

        }
    }

    //行的长度和折行 最多写80个字符
    var a = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' +
        'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' +
        'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' +
        'aaaaaaaaaaaaaaaaaaaaaaa'

    var b = 'aaa' + 'bbbb'
    console.log(b)

    //代码块
    function demo(a, b, c) {

    }

    //关键词 不要使用JS保留的关键词
    // var var = 'a'

    // Javascript 字面量
    console.log(19.2 + 5)

    //单引号中不能包含单引号  双引号中不能包含双引号
    var name = "hello\"World"
    var name1 = 'hello\'World'
</script>
</body>
</html>

JavaScript注释

注释被 JavaScript 忽略

JavaScript 注释用于解释 JavaScript 代码，增强其可读性。

JavaScript 注释也可以用于在测试替代代码时阻止执行。

单行注释 //

多行注释以 / 开头，以 / 结尾

注：多行注释不要嵌套多行注释

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  //写的内容不会被浏览器执行
  //写的是单行注释
  //var a = 10
  //console.log(a)

  /*
    这是多行注释
    1.写过的代码不要急于删除
    2.可以用于调试程序
    3.注释后程序结构一定要完整
    4.编写文档
    1. 写在程序的上面
    2. 要么写在程序的右边 不要写在下面
   */

  //100行代码

  if(true){
    // if(true){
    //   if(true){
    //
    //   }
    //}
  }

  //声明一个变量name
  var name = 'zhangsan'
  var name1 = 'lisi'; //这是声明一个变量name

  /*
    方法：demo() 运算两个数的和
    参数a:第一个运算元
    参数b：第二个运算元
   */
  function demo(a,b){
      return a + b
  }
</script>
</body>
</html>

JavaScript变量及常量

什么是变量

可以改变的量
JavaScript 变量是存储数据值的容器

变量命名
JS中声明变量必须使用var或者let进行声明
变量名不允许使用中文，必须使用英文或者拼音
变量名中可以使用数字，但是数字不能开头
变量名中不允许使用特殊字符，下划线(_)除外
变量名要有意义
变量名严格区分大小写
变量名推荐使用小写
如果变量名是多个单词建议使用驼峰命名法 (number one)=>(NumberOne)
变量赋值
= （等号）将等号右边的值赋值给等号左边的变量
数据类型
变量里面能装的就是JS所支持的数据类型
变量声明
使用var 或者 let
案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
        /********js中的变量********/
        //变量是一个容器 或者 你的一只手
        //声明变量
        var a
        //输出到控制台  未赋值的变量 默认时undefined
        console.log(a)
        //赋值 = 将等号右边的内容赋值给等号左边的变量
        a = 10
        //输出到控制台
        console.log(a)

        //声明变量时 进行赋值
        var b = 20
        console.log(b)
        //尝试改变变量的值
        b = 50
        console.log(b)

        b = '你好js'
        console.log(b)

        //变量的明明规则
        //1.变量名中可以有数字，但是不允许以数字开头
        // var 1a = 10
        // console.log(1a)
        //2.变量中不可以使用特殊符号，下划线(_)除外
        var a_b = 10
        console.log(a_b)
        //3.变量名尽量使用英文或者拼音，(我)不允许使用汉字
        var 你好 = '我是汉字变量名'
        console.log(你好)
        //4. 变量名要有意义
        //5.严格区分大小写
        //会报错  hello is not defined （hello是未被定义的
        var Hello = '你好'
        console.log(hello)
        //6. 声明变量 需要使用var 或者 后面学习的let 关键字来进行声明
</script>
</body>
</html>

ES6声明变量

ES6 引入了两个重要的 JavaScript 新关键词：let 和 const。
JavaScript 块作用域
重新声明变量的问题
案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //使用var关键字可以重复声明变量
    var a = 10
    var a = 20
    console.log(a)

    //使用var声明的变量属于全局作用域
    if(true){
        var b = 10
    }
    console.log(b)

    //es6中提供的新关键字let
    //不可以重复声明
    let x = 10
    console.log(x)
    //报错：X已经被定义
    // let x = 11
    // console.log(x)

    //作用域的问题：let只能在自己的作用域中使用
    if(true){
        let y = 20
        console.log(y)
    }
    //会报错，因为let声明的变量只在当前作用域下有效
    console.log(y)
</script>
</body>
</html>

什么是常量

通常不会改变的量
变量就好比在黑板上写字，而常量就相当于在墓碑上刻字，一次刻印终身受用
ES6声明常量

通过 const 定义的常量与 let 变量类似，但不能重新赋值
在声明时必须赋值
常量对象或数组内容可以更改
常量名推荐大写，用于与变量名的区分，命名规则跟变量一样
案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //声明常量
    // const PI = 3.1415926
    // console.log(PI)
    //不能重新赋值
    // PI = 3.88
    // console.log(PI)
    //不能重新声明
    // const PI = 4.88
    // console.log(PI)
    //常量声明必须有值
    // const PI
    // PI = 3.99

    //声明一个常量数组 就是一组数据
    const arr = ['小明','小红','小白','小黑']
    //无法更改
    // arr = [1,2,3,4]
    console.log(arr)
    //查看某一个值
    console.log(arr[2]);
    //单独更改内容
    arr[2] = '最帅的人是我'
    console.log(arr)
</script>
</body>
</html>

JavaScript数据类型

JavaScript 中有五种可包含值的数据类型：

字符串（string）
声明字符串使用单引号或者双引号均可
案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*******1.字符串类型*******/
    //声明字符串
    let str = '你是我的优乐美'
    //输出内容
    console.log(str)
    //查看类型  typeof
    console.log(typeof(str))

    let str1 = "我是双引号声明"
    console.log(str1)
    console.log(typeof str1)
</script>
</body>
</html>

数值（number）
正数(包含小数)、负数(包含小数)、0
案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  /********2.数值类型声明************/
  //1.声明正整数
  let num1 = 10
  console.log(num1)
  console.log(typeof num1)
  //2.声明负整数
  let num2 = -10
  console.log(num2)
  console.log(typeof num2)
  //3.声明0
  let num3 = 0
  console.log(num3)
  console.log(typeof num3)
  //4.声明小数
  let num4 = 3.14
  console.log(num4)
  console.log(typeof num4)
  let num5 = -3.14
  console.log(num5)
  console.log(typeof num5)

  // 二进制声明   0101
  let b = 0b1010
  console.log(b)
  console.log(typeof b)
  // 八进制声明  01234567
  let ba = 010
  console.log(ba)
  console.log(typeof ba)
  // 十六进制声明 0123456789abcdef
  let sl = 0xff
  console.log(sl)
  console.log(typeof sl)

  //使用科学计数法声明浮点数(小数)
  let num6 = 3.14e2
  console.log(num6)
  console.log(typeof num6)
</script>
</body>
</html>

布尔（boolean）
布尔类型只有两个值，一个是true（真）,一个是false(假)
案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  /********3.声明布尔类型**********/
  let bool = true
  console.log(bool)
  console.log(typeof bool)
  //声明布尔值的值 不需要使用引号，使用引号就是字符串类型了
  let bool1 = 'true'
  console.log(bool1)
  console.log(typeof bool1)
  let bool2 = false
  console.log(bool2)
  console.log(typeof bool2)

</script>
</body>
</html>

对象（object）
案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  /****4.声明对象*********/
  let obj = {'name':'zhangsan','sex':'男','age':30}
  console.log(obj)
  console.log(typeof obj)
</script>
</body>
</html>

函数（function）
案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  /*******5.函数类型*******/
  //声明一个函数 将函数赋值给变量
  let func = function () {

  }
  //打印出函数的声明结构
  console.log(func)
  //查看类型
  console.log(typeof func)
</script>
</body>
</html>

同时有两种不能包含值的数据类型：

null
undefined
案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /********6.不包含数据的值**********/
    //null
    let nu = null
    console.log(nu)
    console.log(typeof nu)

    var nu1 = null
    console.log(null)
    console.log(typeof nu1)

    let nu2 = ''
    console.log(typeof nu2)

    let unde = undefined
    console.log(unde)
    console.log(typeof unde)
    //未声明的变量
    console.log(typeof hhxi)

    //声明变量未赋值
    let unde1
    console.log(typeof unde1)
</script>
</body>
</html>

JavaScript类型转换

如何查看数据类型

typeof检测数据类型
typeof 数据变量
typeof(数据变量)
通过使用 JavaScript 函数（强制类型转换 | 显性类型转换）

Number()
parseInt()
parseFloat()
变量.toString() 或 String()
Boolean()
案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /********1.转数值类型  *******/
    /*
        转换后的数据变量 = Number(数据变量)
     */
    let str = '100'
    str = '-100'
    str = '3.1415'
    str = '-3.1415'
    // NaN  not a number
    str = '10a'
    // 科学计数法的方式声明浮点数   3e2 3*10的2次方
    str = '3e2'
    //NaN
    str = '3a2'
    // str = '-10a'
    str = true
    str = false
    str = ''
    //注意 在使用Number转换时，字符串中如果出现非数值内容 转换后将得到NaN 不是一个数
    console.log('原类型:'+typeof str)
    //进行Number
    let num = Number(str)
    console.log(num)
    console.log('转换后:'+typeof num)

    /********2.parseInt  Int************/
    let str1 = '10'
    str1 = '-10'
    str1 = '100a'
    str1 = 'abc100'
    str1 = '555abc'
    str1 = '-5555abc'
    str1 = '+3333abnc'
    str1 = '10.1234abc'
    str1 = true
    str1 = false
    //在使用parseInt转换整型时，如果是纯数字字符串 直接改变类型
    //如果字符串以数字开头，数字后面跟非数字内容，那么转换时将提取开头的数值部分
    //在字符串开头只允许出现正负符号(+ - ) 转换后代表正数或者负数

    let num1 = parseInt(str1)
    console.log('原类型:'+typeof str1)
    console.log(num1)
    console.log('转换后:'+typeof num1)

    /*********3.parseFloat ***********/
    let str2  = '10'
    str2 = '100a'
    str2 = '100-a'
    str2 = '10.1234abc'
    str2 = true
    str2 = false
    let num2 = parseFloat(str2)
    console.log('原类型:'+typeof str2)
    console.log(num2)
    console.log('转换后:'+typeof num2)

    /*******4. 转字符串  变量.toString() 或 String()*********/
    let num3 = 10
    //方式1
    let str3 = num3.toString()
    //方式2
    let str4 = String(num3)

    num3 = true
    num3 = 10.333
    str3 = num3.toString()
    console.log('原类型:'+typeof num3)
    console.log(str3)
    console.log('转换后:'+typeof str3)

    /*******5.转布尔值 Boolean()*******/
    let num4 = 1
    num4 = 0
    num4 = ''
    num4 = '0'
    num4 = 0.0
    let bool = Boolean(num4)
    console.log('原类型:'+typeof num4)
    console.log(bool)
    console.log('转换后:'+typeof bool)
</script>
</body>
</html>

通过 JavaScript 本身自动转换 (自动数据类型转换 | 隐性类型转换)

在运算或者判断的过程中会发生自动数据类型转换
案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let a = 10
    let b = 'a'
    //会发生自动数据类型转换
    let result = a + b
    console.log(result)
    console.log(typeof result)

    //+ 在字符串中是相连的作用
    result = 1 + '2' + 3 + '4'
    console.log(result); //? 1234
    console.log(typeof result); //? string

    result = 1 + 2 + '3' + '4'
    console.log(result); //? 334
    console.log(typeof result); //string

    //判断
    if(Infinity){
        console.log('aaa')
    }
</script>
</body>
</html>

不同值转换结果：

1678961167768

严格模式

“use strict” 指令定义 JavaScript 代码应该以“严格模式”执行。
为什么使用严格模式
严格模式中不允许的事项
对未来的保障
案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
        1.严格模式放到script标签顶部 代表真个区域是严格模式的，放到代码块中，代表代码块是严格模式
        2.在严格模式下 变量（对象，数组） 不声明就使用，不允许
        3.删除对象或者变量是不行的，delete 不让用
        4.严格模式下不能使用8进制声明
        5.有一些转译字符不能使用
        6.未将来保留一些关键字不能用
     */
    "use strict"
    x = 100
    console.log(x)
    var x;

    var y
    y  = 100
    console.log(y)

    var a = 100
    console.log(a)

    //定义函数
    function demo(){
        // "use strict"
        // b = 12345
        // console.log(b)
    }
    //调用函数
    demo()
    //不能在严格模式下使用
    // delete a
    //声明8进制
    // var c = 077
    // var c = 0xff
    // console.log(c)

    // var demo = '\0mo\nk\ey\r\taaa'
    // var demo = '\010'
    // console.log(demo)

    var public = 'aa'
    console.log(public)

</script>
</body>
</html>

JavaScript提升

JavaScript 声明会被提升
用 let 或 const 声明的变量和常量不会被提升
JavaScript 初始化不会被提升
严格模式中的 JavaScript 不允许在未被声明的情况下使用变量。
案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    "use strict"
    x = 100
    console.log(x)
    // let x
    // const x = 'a'

    // var x

    //var 声明的变量可以提升，let const 不可以提升
    let a
    a = 10
    console.log(a)

    var b = 10

</script>
</body>
</html>