JavaScript学习笔记（一）

最新推荐文章于 2024-10-11 17:39:47 发布

天道酬勤.214

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量99

点赞数 1

分类专栏： JavaScrpt 文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/qq_61886309/article/details/128397728

版权

JavaScrpt 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、JS的基础知识及变量

## JS的组成
1.ECMAScript // JS语法
2.DOM //页面文档对象模型
3.BOM //浏览器对象模型
## JS的书写位置
1.行内式
**特殊情况下使用** 以on开头的属性
2.内嵌式
较为常用
3.外部式
外部导入js文件
```<script src="文件名称"> </script> ```
## JS的注释
// 1.单行注释
2.多行注释与C++一致
## JS的输入输出语句
alert（msg）浏览器弹出警示框浏览器
console.log(msg) 浏览器控制台打印输出信息浏览器
prompt（info）浏览器弹出输入框，用户可以输入浏览器

```
输入框
prompt（'文本内容'）；
alert 弹出警示框
alert ('内容');
console.log('内容') 程序员看的
```

## 变量
1.初始化变量
var age=10; //声明一个名称为age的变量，并赋值
2.案例
```
        var myname;
        myname=prompt('输入姓名');
        alert(myname);
```
3.变量语法扩展
1.一个变量被更新，原有值被覆盖，以最后一次赋值为准
2.同时声明多个变量
```
var 变量1，变量2....
```
4.声明变量的特殊情况
只声明未赋值的变量输出undefined
变量不声明直接使用是可以的，不推荐使用
```qq=100 ; console.log(qq);```
不要使用name作为变量名

二、数据类型

## 变量的数据类型
**JS的变量数据类型是只有程序在运行过程中，通过等号右边的值来确定的
JS拥有动态类型，相同的变量可以用作不同的类型**
```
var x=10;
x='变量'；
```
JS中的数据类型分为两种类型：简单数据类型和复杂数据类型
简单数据类型：
Number String Boolean Undefined Null
复杂数据类型：
Object
## 简单数据类型
### 数字型（Number)
1.八进制我们程序里面数字前面加上0 表示八进制
2.十六进制我们程序里面数字前面加上0x 表示十六进制
3.数字型的最大与最小值
```
console.log(Number.MAX_VALUE)
console.log(Number.MIN_VALUE)
```
4.特殊值
Infinity 无穷大
-Indinity 无穷小
NaN 代表一个非数值

isNaN() 用来判断非数字并且返回一个值如果是数字返回的是false 否则返回true
```
console.log(isNaN(10))
```
### 字符串型
1.字符嵌套：外单内双
```
var str='我是"普通人".'
console.log(str.length);
```
2.检测字符串的长度 length属性示例如上
3.字符串的拼接
字符串+任何类型（先给它转换成字符串型，再进行拼接）=拼接之后的新字符串
**数值相加，字符相连**
### 布尔型 undefined NULL
两个值： true（1） false(0)
undefined与数字相加最后结果是NaN
NULL与字符相加为‘NULL字符’
NULL+1 结果为1

### 获取变量数据类型
使用 typeof 变量名
```
var age=prompt ('请输入您的年龄');
console.log(typeof age); //输出为string
```
### 数据类型转换

1.转换为字符串型
```
//数字型转换 toString()
var num=10;
var str=num.toString();
console.log(typeof str);
//利用String()
console.log(String(num));
// 加号拼接字符串(隐式转换)
console.log（num+''）;
```
2.转换成数字型
```
var age=prompt('请输入数字')
// 1.parseInt(string)函数
console.log(parseInt(age)) //转换成整型
console.log(parseInt('120px')) //输出为120 过滤了px
// 2.parseFloat(变量) //字符转换成数字可以得到小数
console.log(paresFloat('3.156'));
// 3. 利用Number()函数强制转换
console.log(Number(age));
// 4.隐式转换利用 - * /
console.log('123'-0);
console,log('123'*1);
```
3.转换成布尔型
利用Boolean（）函数

三、运算符与流程控制分支结构

### 算术运算符
浮点数直接参与运算容易出现问题，不要直接判断两个浮点数是否相等
### 递增、递减运算符
前置递增 ++num；先自增后返回值
后置递增：num++；先返回值后自增
递减同上
### 比较运算符
1.=== ！==
```
console.log(18==='18') //false
console.log(18===18) //true
```
全等要求值和数据类型都一致
2.两个等于号会默认转换数据类型
把字符串型的数据转换成数字型，再进行比较
```
console.log(18=='18') // true
```
### 逻辑运算符
返回值是布尔值与C++一致
&& 逻辑与
|| 逻辑或
！逻辑非
逻辑与短路：
如果表达式1为真，返回表达式2，如果表达式1为假，返回表达式1.
逻辑或短路：
如果表达式1为真，返回表达式1，如果表达式1为假，返回表达式2.
### 赋值运算符
= += -= /= %= * =

### 优先级
1.小括号
2.一元运算符 ++ -- ！
3.算术运算符先*/%后+-
4.关系运算符
5.相等运算符
6.逻辑运算符先&& 后||
7.赋值运算符
8.逗号运算符

## 流程控制分支结构

分支流程控制
1.if-elseif语句
语法结构
```
if (条件表达式){
//执行语句1
}
else if(条件表达式){
//执行语句2
}
else if(条件表达式){
//执行语句3
}
'''
else{

}
```

2.三元表达式
语法结构：
```
var answer=条件表达式？表达式1：表达式2
```
3.switch语句
语法结构
```
switch (表达式){
case value1：
执行语句；
break；
case value2：
执行语句；
break；
case value3：
执行语句；
break；
'''
default:
执行最后的语句；
}
```
注意事项：
表达式中的值与value匹配时必须全等值与数据类型一致