一、JavaScript基础语法-CSDN博客

本文链接：https://blog.csdn.net/m0_58061685/article/details/132430065

01 JavaScript介绍

1.1 JavaScript是什么

运行在客户端（浏览器）的编程语言，实现人机交互效果
作用
- 网页特效（监听用户一些行为让网页做出对应反馈）
- 表单验证（判断表单数据合法性）
- 数据交互（获取后台数据，渲染到前端）
- 服务端编程（node.js）
组成
- ECMAScript：JavaScript语言基础。规定了js基础语法知识
- DOM：页面文档对象模型。操作文档，比如对页面元素进行移动、添加、删除等操作
- BOM：浏览器对象模型。操作浏览器，比如页面弹窗、检测窗口宽度、存储数据到浏览器等

1.2 JavaScript书写位置

内部JS

直接写在html文件中，用script标签包住
由于浏览器按代码顺序加载，一般将JS代码放在HTML页面底部附件

外部JS

代码写在.js文件中。通过script标签，引入到html页面中
script标签中无需写代码，否则会被忽略

内联JS

代码写在标签内部
vue框架会用

1.3 JavaScript注释

单行注释：// 快捷键：ctrl+/
多行注释：/* */ 快捷键：alt+shift+a

1.4 JavaScript结束符

;
结束符加不加都可以

1.5 输入和输出语法

1.5.1 输出语法

文档输出内容

document.write(‘要输出的内容’)
作用：向body中输出内容
注意：如果输出的内容是标签，也会被解析成网页元素

警示框输出内容

alert(‘要输出内容’)
作用：页面弹出警告对话框

控制台输出内容

console.log(‘要输出内容’)
作用：控制台打印输出相应内容，便于调试

1.5.2 输入语法

prompt(‘请输入相应内容:’)
作用：显示一个包含一条文字提示信息的对话框

1.6 字面量

用于在计算机中描述事/物

02 变量

2.1 变量是什么

计算机存储数据的容器

2.2 变量的基本使用

变量的声明

语法：let 变量名
let：声明关键字

变量的赋值

语法：变量名 = 字面量

更新变量
声明多个变量

语法： let 变量名1 = 字面量，变量名2 = 字面量
不提倡，可读性不够好

2.3 变量的本质

内存：计算机中存储数据的地方
变量：程序在内存中申请的一块用于存放数据的小空间
变量名：小空间的名字

2.4 变量的命名规则与规范

规则
- 不能用关键字
- 只能用下划线、字母、数字、$组成，数字不能开头
- 字母严格区分大小写
规范
- 起名要有意义
- 遵循小驼峰命名法

03 常量

概念：使用 const 声明的变量称为常量
使用场景：当某个变量不会改变时，用 const 声明
注意：常量不允许重新赋值，声明时必须初始化

04 数据类型

4.1 基本数据类型

number、string、boolen、undefined（未定义型）、null（）

4.1.1 number（数字型）

js是弱数据类型，变量属于哪种数据类型，只有赋值了才知道
算术运算符
算术运算优先级
NaN：表示计算错误。是一个不正确的或者未定义的数学操作得到的结果

4.1.2 string（字符串型）

+用于字符串拼接
模板字符串
- 外面用反引号（``）
- 内容拼接变量时，用${}包裹变量

4.1.3 boolen（布尔型）

4.1.4 undefined（未定义型）

只声明变量，未赋值时，变量默认为undefined

4.1.5 null（空类型）

与undefined区别
- undefined 表示没有赋值
- null 表示赋值了，但是内容为空
使用场景：如果将来有个变量里面存放的时一个对象，但对象还没有创建好，可以先给个null

4.2 引用数据类型

object

05 检测数据类型

typeof 运算符可以返回被检测的数据类型
- 作为运算符 typeof x
- 函数形式 typeof(x)

06 类型转换

6.1 隐式转换

规则
- +两边只要有字符串，就会把另一个转化为字符串
- 当+作为正号时，可以转换为数字型
- 除了+以外的算术运算符，都会把数据转化为数据类型
缺点：转换类型不明确，靠经验总结

6.2 显式转换

转换为数字型
- Number(数据)
  - 转换为数字类型
  - 如果字符串中有非数字，转换结果为NaN（也是number类型的数据，表示非数字）
- parseInt(数据)
  - 只保留整数
- parseFloat(数据)
  - 可以保留小数

<body>
    <script>
        // 输入2个数，计算两个数的和，打印到页面中
        // 1.输入两个加数，由于prompt接收的是string，需要进行类型转换
        var num1 = Number(prompt("输入第一个数"))
        var num2 = Number(prompt("输入第二个数"))
        // 2.计算
        var sum = num1 + num2
        // 3.弹窗输出
        alert(sum)
    </script>
</body>