JS引入方式

JS程序不能独立运行，需要被嵌入到HTML中浏览器才能执行。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：

内部方式

通过script 标签包裹JS代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
 <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
 <script>
   alert('嗨，欢迎来传智播学习前端技术！')
 </script>
</body>
</html>

外部方式

写在.js结尾的文件中，然后通过script标签的src属性引入

// demo.js
document.write('嗨，欢迎来传智播学习前端技术！')

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
 <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
 <script src="demo.js"></script>
</body>
</html>

使用script标签引入外部js后，标签内部

注释

单行注释

使用//注释

多行注释

使用/* */注释

编辑器里面直接cmd+/注释

结束符

用;表示代码结束，多数不用加，看团队习惯。

输入输出

输出

可以使用alert()、document.wirte()

输入

使用prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

<script> 
   // 1. 输入的任意数字，都会以弹窗形式展示
   document.write('要输出的内容')
   alert('要输出的内容');

   // 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
   prompt('请输入您的姓名:')
</script>

变量

变量是存储数据的容器

声明

声明方式：let 变量名

例如声明一个叫age的变量：let age

let 和var 都可以声明变量，在ES6规范中更加推荐使用let

赋值

let 变量名 = 要赋予的值

例如：let age = 18

关键字

let声明注意事项：

允许声明和赋值同时进行
不允许重复声明
允许同时声明多个变量并赋值
JavaScript 中内置的一些关键字不能被当做变量名

以下是使用 var 时的注意事项：

允许声明和赋值同时进行
允许重复声明
允许同时声明多个变量并赋值

变量名命名规则

只能是字母、数字、下划线、$，且不能能数字开头
字母区分大小写，如 Age 和 age 是不同的变量
JavaScript 内部已占用于单词（关键字或保留字）不允许使用
尽量保证变量具有一定的语义，见字知义

注：所谓关键字是指 JavaScript 内部使用的词语，如 let 和var，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语。

常量

使用const声明的变量成为常量

const PI = 3.14

常量不可以重新赋值，声明时必须初始化

数据类型

可以使用typeof关键字来检测数据类型

// 检测 1 是什么类型数据，结果为 number
   document.write(typeof 1)

数值类型

数字类型，类型名num

字符串类型

通过单引号（ ''）、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已
必要时可以使用转义符 ``，输出单引号或双引号

let user_name = '小明' // 使用单引号
   let gender = "男" // 使用双引号
   let str = '123' // 看上去是数字，但是用引号包裹了就成了字符串了
   let str1 = '' // 这种情况叫空字符串

   documeent.write(typeof user_name) // 结果为 string
   documeent.write(typeof gender) // 结果为 string
   documeent.write(typeof str) // 结果为 string

布尔类型

两个固定的值 true 和 false

undefined

未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

// 只声明了变量，并末赋值
   let tmp;
   document.write(typeof tmp) // 结果为 undefined

类型转换

隐式转换

let num = 13 // 数值
   let num2 = '2' // 字符串

   // 结果为 132
   // 原因是将数值 num 转换成了字符串，相当于 '13'
   // 然后 + 将两个字符串拼接到了一起
   console.log(num + num2)

   // 结果为 11
   // 原因是将字符串 num2 转换成了数值，相当于 2
   // 然后数值 13 减去 数值 2
   console.log(num - num2)

   let a = prompt('请输入一个数字')
   let b = prompt('请再输入一个数字')

   alert(a + b);

显式转换

    let t = '12'
    let f = 8

    // 显式将字符串 12 转换成数值 12
    t = Number(t)

    // 检测转换后的类型
    // console.log(typeof t);
    console.log(t + f) // 结果为 20

    // 并不是所有的值都可以被转成数值类型
    let str = 'hello'
    // 将 hello 转成数值是不现实的，当无法转换成
    // 数值时，得到的结果为 NaN （Not a Number）
    console.log(Number(str))

//常用转换
let t = '12'
 +t ->将t转换为数值型

let o = 12
'hello'+t ->t会转换为字符型，得到的o为 'hello12'

JavaScript学习笔记