01-JavaScript基础语法

已注销
113 阅读5分钟

01 JS书写的位置

1.1 编写在html内部(不推荐)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="#" onclick="alert('百度一下')" >百度一下</a>
</body>
</html>

1.2 编写在script元素内

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a class="google" href="#">谷歌一下</a>
  <script>
    var googleAEl = document.querySelector(".google")
    googleAEl.onclick = function() {
      alert('谷歌一下')
    }
  </script>
</body>
</html>

1.3 独立的js文件

通过src属性来引用 独立的js文件代码

var bingAEL = document.querySelector('.bing')
bingAEL.onclick = function(){
  alert('bing一下')
}

HTML代码中引入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a class="bing" href="#">bing一下</a>
  <script src="./js/bing.js"></script>
</body>
</html>

02 js输出信息的方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    alert("123")
    console.log("123");
    document.write("123")
  </script>
</body>
</html>

03 js的数据类型种类

00001.png

04 typeof 操作符

00002.png

05 数据类型初步认识

5.1 Number类型

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <script>
      // 1. 基本使用
      var num1 = 12
      var num2 = 1.88
      console.log(num1, num2)
      // 2. 特殊数值(无穷大)
      var num3 = Infinity
      console.log(num3)
      // 3. NaN：表示不是一个数值,但是NaN还是属于数字类型
      var result = 3 * "abc"
      console.log(result)
    </script>
  </body>
</html>

输出如下

00003.png

5.2 String类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 1. 基本使用
    var name = "kobe"
    var address = "广州市"
    console.log(name, address)
    // 2. 别的引号使用
    // 单引号
    var message1 = 'Hello World'
    // 双引号
    var message2 = "Hello World"
    // 反引号(ES6新增的),可以把变量或者表达式放入到里边
    var message3 = `Hello world, ${name} , ${1 + 2}`
    // 3. 字符串本身包含引号
    var message4 = 'my name is "kobe bryant"'
    console.log(message4)
    // 4. 字符串的属性和方法
    var message5 = "你好世界"
    console.log(message5.length)
    // 5 字符串的操作
    var firstName = "kobe"
    var lastName = "bryant"
    // ES6以后的拼接
    var info1 = `${firstName} ${lastName}`
    console.log(info1)
    // ES6之前的拼接
    var info2 = firstName + " " + lastName
    console.log(info2)
  </script>
</body>
</html>

输出如下

00004.png

5.3 Boolen类型

只有2个值: true和false

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    isAdmin1 = true
    isAdmin2 = false
    // 条件为真则会执行函数体中的函数
    if(isAdmin1){
      console.log("123");
    }
  </script>
</body>
</html>

输出如下

00005.png

5.4 Undefined类型

只有一个值undefined

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 如果声明一个变量，但是没有对其进行初始化时，它默认就是undefined(不要这样做)
    var message
    console.log(message)
    // 语法上可以这样做,但是不要这样显示的定义一个变量为undefined
    var message1 = undefined
    console.log(message1)
  </script>
</body>
</html>

00006.png

5.5 Object类型

通常被称为"复杂数据类型"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 定义
    var book = {
      name: "行走的力量",
      price: 45
    }
    // 取值
    console.log(book.name)
    console.log(book.price)
  </script>
</body>
</html>

5.6 null类型

只有一个值: null

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 1.其它类型的初始化.当我们不知道要给它什么值的时候
    var age = 0
    var num = 0
    var message = "" //空字符串
    // 这些类型在进行if判断的时候都会转变成布尔类型,false
    if(age){
      console.log("函数体不会被执行")
    }
    // 但是对一个对象进行初始化的时候,不能把它定义为空对像,如果定义为空对象,if判断的时候会转成布尔类型true
    var book = {}
    if(book){
      console.log("book对象转变成了布尔类型true");
    }
    // 所以null存在的意义就是当要给变量要保存为对象,但是这个对象不确定时可以先赋值为null,并且在转成布尔类型时会转成false
    var book1 = null
    if(book1){
      console.log("bookl被转变成了false,不会执行函数体")
    }
  </script>
</body>
</html>

5.7 null和undefined的关系

00007.png

5.8 object类型

00008.png

06 数据类型之间的转换

6.1 其它类型转字符串类型

00009.png 隐式转换代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
  var num1 = 123
  // 和空字符相加
  var numStr = num1 + ""
  console.log(typeof numStr)
  </script>
</body>
</html>

结果如下

00010.png 显示转换代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var num1 = 123
    var Str1 = String(num1)
    console.log(typeof Str1)
  </script>
</body>
</html>

结果如下

00011.png

6.2 其它类型转数字类型

00012.png

6.3 其它类型转成布尔类型

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <script>
        // 直观上为"空"的值（如 0、空字符串、null、undefined 和 NaN）将变为 false
        console.log(Boolean(0))
        console.log(Boolean(null))
        console.log(Boolean(undefined))
        console.log(Boolean(NaN))
        console.log(Boolean(""))
        // 注意: 如果为0,转换为true，理解: 这里面不是一个空字符串
      console.log(Boolean("0"));
    </script>
  </body>
</html>

07 JS运算相关

7.1 ++ 和 --

00013.png

7.2 === 和 == 的区别

官方文档262.ecma-international.org/5.1/#sec-11… 00014.png

08 JS分支语句

8.1 单分支结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var num1 = 2
    if(num1 >1){
      console.log(num1);
    }
  </script>
</body>
</html>

if语句的细节补充 如果代码块中只有一行代码，那么{ }可以省略

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <script>
      var num1 = 2
      if(num1 >1) console.log(num1);
    </script>
  </body>
</html>

8.2 多分支结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var num1 = 2
    var num2 = 123
    if(num1 >2){
      console.log(num1);
    } else {
      console.log(num2);
    }
  </script>
</body>
</html>

8.3 三元运算符

条件表达式?真值对应的表达式:假值对应的表达式
console.log(5>20?'大于':'小于')

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var info = null

    var res = info ? info: {}
    console.log(res)

    var info = {
      name: "test"
    }

    var res = info ? info: {}
    console.log(res)
  </script>
</body>
</html>

09 逻辑运算符

将多个表达式或者值放在一起来获取一个最终的结果

运算符运算规则示例结果
&&与: 同时为真false && truefalse
||或: 一个为真false or truetrue
!非: 取反！falsetrue

9.1 逻辑或的本质

00015.png 相当于发生了短路(有一个条件为真就不会往后走了) 用这个特性可以用来解决传参为空的问题

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var info = undefined
    var message = info || "默认值"
    console.log(message.length);
  </script>
</body>
</html>

9.2 逻辑与的本质

00016.png 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var obj = {
      name: "lisi",
      friend: {
        name: "kobe",
        eating: function(){
          console.log("eat something");
        }
      }
    }
    obj && obj.friend && obj.friend.eating && obj.friend.eating()
  </script>
</body>
</html>

9.3 逻辑非

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var message = "hello world"
    // 第一种转变成布尔值的方法
    console.log(Boolean(message));
    // 第二种方法: 逻辑非的方式
    console.log(!!message);
  </script>
</body>
</html>

10 switch

switch必须是相同的类型才能进行匹配

let x = 5 // 换成1试一试
switch (x) {
  case 0:
    console.log('zero')
    break;
  case 1:
    console.log('one');
  case 2:
    console.log('two');
  case 3:
    console.log('three');
    break;
  case 5:
  case 4:
    console.log('four');
  default:
    console.log('other')
    // break;
}
这里最大的问题，就是穿透问题，一定要在case中恰当的使用break语句，否则就会继续顺序向下执行

11 JS的循环语句

00017.png

11.1 while循环

示例1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <script>
      var num = 0
      while (num < 10) {
        console.log("hello world")
        num++
      }
    </script>
  </body>
</html>

示例2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var num = 0
    while(num < 100){
      console.log(num)
      num++
    }
  </script>
</body>
</html>

11.2 for循环

00018.png 进入的时候执行一次begin,然后根据条件来执行代码块，执行完代码块以后，会执行step，进入第二次循环会到条件这一步，然后执行代码块， 再执行一次step，这样依次类推，需要注意的是begin只会执行一次

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      color: red;
    }
  </style>
</head>
<body>
  <script>
    for (var i = 0; i < 6; i++) {
    document.write("<div>")
    for (var j = 0; j < 6; j++){
      document.write("❤ ")
    }
    document.write("</div>")
  }
  </script>
</body>
</html>
avatar
文章
阅读
粉丝