[前端开发] JavaScript基础知识 [上]

下篇：JavaScript基础知识 [下]

JavaScript基础知识 [上]

- 引言
- 语句、标识符和变量
- JavaScript引入
- 注释与输出
- 数据类型
- 运算符
- 条件语句与循环语句

引言

JavaScript是一种广泛应用于网页开发的脚本语言，具有重要的前端开发和部分后端开发的应用。通过JavaScript，可以实现网页的交互、动态效果和数据处理等功能。

语句、标识符和变量

语句：JavaScript程序的基本单位
- Javascript 程序的运行单位是行, 一般一行就是一条语句.
```
var num = 1;//这里利用var定义一个名叫num的变量
```
  - 语句要用 ; 结尾
标识符：命名规则和注意事项
- 是指识别各种值的合法名称, 最常见的标识符是变量名
- 标识符由字母美元符号$ 下划线_ 和数字组成, 其中数字不能开头
- 虽然中文也是合法标识符但是不推荐使用
- Javascript 中有一些保留字, 这些不能作为标识符.
变量：声明、赋值和使用方法
- 用 var 关键字来声明变量

JavaScript引入

嵌入到HTML文件中

在 .html 文件下的 <body></body> 中创建 <script></script> 在里面写代码.

<!--这个是html文件-->
<body>
  <script>
    var num = 10;
  </script>
</body>

创建.js文件并独立引入

单独创建 .js 文件, 再在 .html文件中进行引入

<!--在html中如何引入js文件-->
<body>
  <script type="text/javascript" src="./jsfile.js"></script>
</body>

引入网络来源文件的方法

嵌入到 HTML 文件中

<!--在html中如何引用网络来源文件-->
<body>
 <script src="http://xxx.xxx.com/xxxfile.js"></script>
</body>

注释与输出

注释：单行注释、多行注释、HTML和CSS中的注释
- 单行注释: //注释内容
- 多行注释:
```
/*
这些
都是
注释
内容
*/
```
- 在HTML中的注释是用  来进行注释的
- 在CSS 中注释是用 /*注释内容*/ 来进行注释的
注释快捷键：ctrl + / (按一下注释, 再按一下解除)

输出方式：alert、document.write和console.log的使用方法

//方式一: 在页面中弹出框里显示
alert("要输入的内容"); //alert是把要输出的内容先转换为字符串,然后在弹出框中显示

//方式二: 直接展示在页面中
document.write("输出到页面的内容")//有点类似于标签

//方式三: 在控制台中的console中查看
console.log("在控制台中打印的内容")

数据类型

基本数据类型：数值、字符串、布尔值、null和undefined

//数值/数字类型
var num = 10;

//字符串类型: 被双引号或者单引号包裹的值
var name = "m"
var name2 = 'n'

//布尔类型: true|false 计算机是由 0 和 1 组成, 0代表false, 1代表true
var istrue = true;

合成类型(复合类型)：对象的创建和使用

一个对象往往由多个原始类型的值合成

//合成类型(复合类型)
var student = {
  name: "xiaoming",
  age: 18,
  learn: true
}

使用typeof判断基本数据类型

数值返回 number
```
typeof 100 //数值返回 `number`
```
字符串返回 string
```
typeof '100'//字符串返回 `string`
```
布尔值返回 boolean
```
typeof true//布尔值返回 `boolean`
```

对象返回 object (数组也会返回这个)

typeof {
          name: "xiaoming",
          age: 18,
          learn: true
        }
//布尔值返回 `object`

运算符

算术运算符：加减乘除、自增自减和取余
- 自增 ++
  - x++:会先返回变量x操作前的值,再对变量x进行自增
  - ++x:会先对变量x进行自增,再返回变量x操作前的值
- 自减 --
  - x--:会先返回变量x操作前的值,再对变量x进行自减
  - --x:会先对变量x进行自减,再返回变量x操作前的值
赋值运算符：=、+=、-=、*=、/=、%=
比较运算符：<、>、<=、>=、==、===、!=、!==
- 双等 ‘==’ 不管类型,只看值是否相等
- 三等 ‘===’ 在比较的时候要看类型, 值相同但类型不同也不满足