Skip to main content

JavaScript

推荐安装的插件

  • Error Lens
  • Live Server

视频教程地址，

https://www.bilibili.com/video/BV1Y84y1L7Nn

学习教程比较重要的点：

  • 不能只看不动手
  • 不管多简单的代码都需要练习
  • 不要抄代码

Reference,

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

JavaScript 是什么​

是一种运行在客户端（浏览器）的变成语言，实现人机交互效果。

后端程序可以用 Node.js 开发，在服务器端运行.

JavaScript 的组成：

  • ECMAScript
  • Web APIs
    • DOM 页面文档对象模型
    • BOM 浏览器对象模型

JavaScript 体验​

实现四个按钮，点击哪个按钮，哪个按钮的背景颜色就变为粉色。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pink {
            background-color: pink;
        }
    </style>
</head>

<body>
    <button class="pink">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
        let btns = document.querySelectorAll("button")
        for (let index = 0; index < btns.length; index++) {
            btns[index].addEventListener("click", function () {
                document.querySelector(".pink").className = ""
                this.className = "pink"
            })
        }
    </script>
</body>

</html>

JavaScript 书写位置​

  • 内部，直接写在 html 文件里，用 script 标签围住（在 /body 的上方）, js 应该是最后加载。
<html lang="en">

<body>
    <script>alert("逗你玩")</script>
</body>

</html>
  • 行内，直接写在事件的属性上，例如 onlick="alert('逗你玩')"。
<html lang="en">

<body>
    <button onclick="alert('逗你玩')">点击我</button>
</body>

</html>
  • 外部, 代码写在 .js 文件中，通过 script 标签的 src 属性引入到 html 文件中。注意外部 js 标签中间不要写代码，否则会被忽略。
// my.js
alter("逗你玩")
<html lang="en">

<body>
    <script src="my.js"></script>
</body>

</html>

JavaScript 中的注释​

单行注释，

// 这里的代码会被忽略
// vscode 中的快捷键 ctrl+/

多行注释，

/*
这是多行注释
*/
// vscode 中的快捷键 shift+alt+a

JavaScript 结束符​

可写可不写，JavaScript 引擎会自动推算出结束符的位置。

JavaScript 中的输入输出语法​

输出语法：

  • 语法1，
// 向 body 标签内输出内容，注意如果输出的内容包含标签，也会被解析成网页
document.write("内容")

例子，下面通过 js 写入 h1 标签内容，

<html lang="en">

<body>
    <script>
        document.write("这是一个 document.write ")
        document.write("<h1>this is H1</h1>")
    </script>
</body>

</html>
  • 语法2

通过 alert 弹出对话框

  • 语法3
console.log("输出到控制台")

输入语法：

prompt("请输入你的姓名")

JavaScript 执行顺序​

从上向下执行，prompt 和 alert 会优先执行。

JavaScript 中的变量​

变量声明​

// 声明单个变量
let age = 20
age = 18
console.log(age)
// 声明多个变量，多个变量用逗号分开
let uname = "张三", uage = 20

保存输入数据案例，

let uname = prompt("请输入用户名")
let uage = prompt("请输入年龄")
document.write(uname, uage)

Var 声明，旧的声明方式，有很多不合理的地方，常见于以前开发的程序中，

  • 可以先声明，在使用， 不合理
  • var 声明过的变量可以重复声明
  • 变量提升，全局变量，没有块级作用域等等

数组​

let arr = [1 ,2 ,3]
console.log(arr[0])

常量​

使用 const 声明的变量，声明后不可以修改变量的数值，声明后必须初始化，

const G = 9.8
console.log(G)
// error
// G = 9.9

基本数据类型​

  • number 数字型

若数据类型，只有赋值的时候才知道数据类型，

let num = "pink"
console.log(num)

NaN 代表计算错误。任何对 NaN 操作的计算结果返回的都是 NaN。

  • string 字符类型

单引号，双引号，和反引号包裹的数据都叫字符串。

let a1 = "123"
let a2 = '123'
let a3 = `123`

字符串拼接，

let a1 = "123" + "456"
let age = 19
let a1 = "今天" + age + "岁了"

模板字符串，

let age = 18
console.log(`我今年 ${age} 岁了`)
console.log(`我今年 ${age+age} 岁了`)

布尔类型

// true false
let isCool = true
isCool = false
console.log(isCool)
console.log(3>4)
  • undefined 未定义类型

未定义的，

let obj
console.log(obj)
  • null 空类型

null 数据类型，空的,

// 把 null 当成一个尚未创建的对象
let obj = null
console.log(obj)
// result is 1
console.lob(obj+1)

检测数据类型，两种写法，

// 作为运算符号
typeof data
// 作为函数
typeof(data)

引用数据类型​

  • object 对象类型

数据类型转换​

在 JS 中通过输入框，表单等默认收到的都是字符串数据类型，

  • 隐式转换
  • 显式转换

隐式转换，

加号两侧有一侧是字符串，那就都转换成字符串，

console.log("pink" + 1)
// pink1

除了加号以外的运算法，减，乘，除，都会将两侧转化为数值类型，

console.log(32/'2')
// 16

// + 也可以把字符转换为数字型
console.log(+"123")

显式转换，

转换为数字类型，

console.log(Number("123"))

只保留整数部分，

// 数字必须在开头
parseInt("12px")
// 12

小数部分也保留，

parseFloat("123.345cm")
// 123.345

Recommendations​

学习参考的源码，

Last updated on by taicaile