JavaScript 学习笔记（第一天）

Smulll_

已于 2023-07-08 17:01:22 修改

阅读量960

点赞数 1

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

于 2022-12-30 19:31:35 首次发布

本文链接：https://blog.csdn.net/weixin_74155781/article/details/128452747

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

JavaScript 学习笔记（第一天）

一、初始JavaScript
二、js中的数据类型
三、js中的强制类型转换
四、运算符
五、分支结构

一、初始JavaScript

1.1、`<script>`标签

在JavaScript中，编写的JavaScript代码，要写在html编辑页面的<script></script>标签中

<script type="text/javascript"></script>

1.2、hello world

alert ("")→使浏览器弹出一个警告窗口
document.write("")→可以向body中输出一个内容
console.log("")→向控制台输出一个内容

1.3、js的编写规范

可以将js代码写到script标签中
可以将js代码编写到外部js文件中，然后通过script标签引入（推荐）

外部文件扩展名为 .js
<script src=" 文件名"><script>

可以编写到标签的属性中，但由于他们属于结构和行为耦合，不方便维护（不推荐）

即：<script type="text/javascript" src=""></script>

在双引号内部的文字需要添加引号时要加单引号

优点：可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制
注：<script>标签中一旦用于引用外部文件，就不能再编写代码了；即便编写了代码浏览器也会忽略，如果需要则可以创建一个新的<script>标签用于编写内部的代码
<script>标签从上至下逐层表达

1.4、js基本语法

注释:

//单行注释
/* */多行注释

注释的内容不会被执行，但是可以在源代码中查看

js中严格区分大小写
js中每一条语句一分号;结尾
- 如果不写分号;浏览器会自动添加，但是会消耗资源，并且有时候浏览器会加错分号，所以必须添加
js中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化。

1.5、字面量与变量

字面量：都是一些不可改变的值
- 如：1 2 3 4 5 6（数字）
- 字面量可以直接使用，但我们一般都不会直接使用字面量
变量：变量可以保存自变量，且可以任意改变
- 声明变量：在js中使用var关键字来声明一个变量
- 例：var a；
- 声明与赋值同时进行
- 变量只需要声明一次

1.6、js中的标识符

在js中所有可以自主命名的就是标识符

例：变量名，函数名，属性名都属于标识符
命名规则：
1. 标识符中可以有字母，数字，_，$
2. 标识符不能以数字开头
3. 标识符不能是js中的关键词或者保留字
4. 不要出现空格
js底层保存标识符时实际上是采用的Unicode编码，所以理论上所有的UTF-8中含有的内容都能作为标识符
命名规范：
1. 标识符一般采用驼峰命名法
  - 每个单词的开头字母大写，其余字母小写
2. 变量名尽量有意义
3. 不要使用中文

二、js中的数据类型

2.1、数据类型概括

英文标识	中文标识
String	字符串
Number	数值
Boolean	布尔值
Null	空值
Undefined	未定义
Object	对象

Object属于引用数据类型，其余五种为基本数据类型

2.2、String 字符串

在js中字符串需要使用引号引起来（单，双都行，不要混用）

例：var str =“hello”

在字符串中可以用\作为转义字符，当表示一些特殊符号时可以使用\进行转义

\" 表示 " \'表示 ' \n表示换行 \t 表示制表符（相当于按了Tab键） \\表示\

alert ("str"); //表示输出字面量即str
alert (str);//表示输出变量

2.3、Number 数值

在js中所有数值都是Number类型包括整数和浮点数

可以用运算符typeof来检查一个变量的类型

语法： console.log("typeof 变量")

使用后会输出变量的类型

js中数字的最大值：Number.MAX_VALUE 值为：1.7976931348623157e+308
js中数字的最小值：Number.MIN_VALUE 值为：5e-324（最小正值）
正无穷：Infinity
负无穷：-Infinity
特殊数字：NaN（即：not a number）

如果使用Number表示的数字超过了最大值，则会返回一个Infinity
用typedf检查Infinity会返回number
算数运算时，如果无法计算则会返回NaN
js在整数运算中基本能保证得到精确，但浮点数运算中可能得不到一个精确值。千万不要用js进行对精确度要求比较高的运算

2.4、Boolean 布尔值

布尔值只有两个，主要做逻辑判断

ture -表示真
false -表示假
使用typeof检查一个布尔值时会返回Boolean

2.5、Null和undefined 空值与未定义

Null类型只有一个，就是Null

null这个值专门用来表示一个为空的对象
使用typeof检查一个Null时，会返回Object

Undefined类型只有一个，就是Undefined

当声明一个变量，但不给其赋值时，它的值就是undefined
使用typeof检查一个undefined时，会返回undefined

三、js中的强制类型转换

3.1、将其他数据类型转换为String类型

方法一：调用被转换数据类型的toString()方法→被调变量写入toString()括号内

var a = 123;
a = toString(a);
console.log(typeof a);
console.log(a);

该方法不会影响到原变量，它会将转换的结果返回
需要将结果再次赋值给一个变量
此方法不支持Null和Undefined的转换

方法二：调用String()函数

var a = null;
a = String(a);
console.log(typeof a);
console.log(a);

调用String()函数，并将参数传递给函数，转什么就将什么写到括号内
需要将结果再次赋值给一个变量
使用String()函数时实际上就是调用的toString()方法，但是对于Null和Undefined不会调用toString()，它会将Null直接转化为“Null”，将Undefined直接转化为“Undefined”

3.2、将其他数据类型转换为Number类型

方法一：使用Number()函数

var a = "asd";
a = Number(a);
console.log(typeof a);
console.log(a);

调用Number()函数，并将参数传递给函数，转什么就将什么写到括号内
需要将结果再次赋值给一个变量

字符串→数字
- 如果是纯数字字符串，则直接转换为数字
- 如果是字符中有非数字的内容，则转换为NaN
- 如果字符串是空串或者全是空格的字符串则转换为0
布尔→数字
- ture转换为1
- false转换为0
Null→数字
- 结果为0
Undefined→数字
- 结果为NaN

方法二：（专门用于字符串）
parseInt()把一个字符串转换为一个整数
parseFioat()把一个字符串转换为一个浮点数

var a = "52542px";
a = parseInt(a);
console.log(a);

parseInt()可以把一个字符串中的有效整数（读到非数字时停止，非数字以前的都是有效整数）提取出来，然后转为Number
parseFioat()与parseInt()相似，只是parseFioat()提取的是小数

3.3、将其他数据类型转换为Boolean

使用Boolean()函数

var a = "52542px";
a = Boolean(a);
console.log(a);

数字→布尔
- 除了非空和NaN其余都是ture
字符串→布尔
- 除了空串，其余都是ture
Null→布尔
- 表达为false
Undefined→布尔
- 表达为false

3.4、进制数字的表示方法

进制	表示方式
十六	开头加上0x
八	开头加上0
二	开头加上0b(不是所有浏览器都支持)

四、运算符

就是在代码里面进行运算的时候使用的符号，不光只是数学运算，我们在js里面还有很多的运算方式

比如typeof就是运算符，可以获得一个值的类型它会将该值的类型以字符串的形式返回

4.1、数字运算符

+
- 加法运算，并返回结果
- 只有符号两边都是数字的时候才会进行加法运算
- 只要符号任意一边是字符串类型，就会进行字符串拼接
-
- 减法运算，并返回结果
- 会自动把两边都转换成数字进行运算
*
- 乘法运算，并返回结果
- 会自动把两边都转换成数字进行运算
/
- 除法运算，并返回结果
- 会自动把两边都转换成数字进行运算
%
- 求余运算，并返回结果
- 会自动把两边都转换成数字进行运算

对非Number类型的值进行运算时，会将这些值转换为Number然后运算
任何值与NaN做运算，结果都是NaN
两个字符串相加或发生拼串
任何值与字符串做加法运算，都会先转为字符串，在进行拼串
任意的数据类型加一空串，即可转化为字符串（隐式类型转换）
- 这是一种隐式类型转换，由浏览器自动完成，它实际上调用的是String()函数
任何值做-，*，/运算时都会自动转换为Number，可以利用这一特点，通过-0，*1，/1 来将其转换为Number，原理与Number函数一样

4.2、赋值运算符

=
- 就是把=右边的赋值给等号左边的变量名
  var num = 100
  就是把100赋值给num变量，那么num变量的值就是100

+=

   	var a = 10;
   	a += 10;
   	console. log(a); / /=>20

a += 10等价于a = a + 10

-=

   	var a = 10;
   	a -= 10;
   	console. log(a); / /=>0

a -= 10等价于a = a - 10

*=

   	var a = 10;
   	a *= 10;
   	console. log(a); / /=>100

a *= 10等价于a = a * 10

%=

   	var a = 10;
   	a%= 10;
   	console. log(a); / /=>1

a %= 10等价于a = a % 10

/=

   	var a = 10;
   	a/= 10;
   	console. log(a); / /=>1

a /= 10等价于a = a / 10

4.3、比较运算符

==
- 比较运算符两边的值是否相等，不管数据类型
```
1=="1"
```
  两个值是一样的，所以得到的是ture
```
ture==1
""==1
```
  结果为真
===
- 比较符号两边的值和数据类型是否都相等
```
1==="1"
```
  比较符号两边的值和数据类型是否都相等
!=
- 比较符号两边的值是否不等
```
1 != '1'
```
  因为两边的值是相等的，所以比较他们不等的时候得到false
!==
- 比较符号两边的数据类型和值是否不等
```
1 !== '1'
```
  因为两边的数据类型确实不一样，所以得到true
>=
+比较左边的值是否大于或等于右边的值
1 >= 1结果是true
1 >= 0结果是true
1 >=2结果是false
<=
+比较左边的值是否大于或等于右边的值
1 >= 1结果是true
1 >= 0结果是true
1 >=2结果是false

4.3、逻辑运算符

&&
- 进行且运算
  符号左边必须为true并且右边也是true，才会返回true只要有一边不是true，那么就会返回false
  true && true结果是true
  true && false结果是false
  false && true结果是false
  false && false结果是false
||
- 进行或运算
  符号的左边为true或者右边为true，都会返回true只有两边都是false的时候才会返回false
  true && true结果是true
  true ll false结果是true
  false ll true结果是true
  false ll false结果是false
!
- 进行取反运算
  本身是true的，会变成false
  本身是false的，会变成 true
  !true结果是false
  !false结果是true

特殊：

!!a ==>转换为布尔值
&& || 短路用法
- || 中如果||左边的是假则会表达右边的，如果左边的是真，则右边的不表达
- && 中如果&&左边的是真，则右边的不表达

4.4、自增自减运算符

进行自增运算
分成两种，前置++和后置++
前置++，会先把值自动+1，在返回

var a = 10;
console.log(a++);
//会返回10，然后把 a的值变成11

后置++，会先把值返回，在自动+1

var a = 10;
console.log(a++);
//会返回10，然后把 a的值变成11

–

进行自增运算
分成两种，前置–和后置–
前置++，会先把值自动-1，在返回

var a = 10;
console.log(a++);
//会返回10，然后把 a的值变成9

后置++，会先把值返回，在自动-1

var a = 10;
console.log(a++);
//会返回10，然后把 a的值变成9

4.5、三元运算符

三元运算，就是用两个符号组成一个语句
语法：条件？条件为ture时执行 : 条件为false时执行
例：

var age = 18;
age>=18?alert("已经成年"):alert("没有成年")

五、分支结构

我们的js代码都是顺序执行的（从上到下）
逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码

5.1、if语句

5.1.1、if语句

通过一个if语句来决定代码是否执行
语法：if（条件）{ 要执行的代码 }
通过（）里面的条件是否成立来决定{}里面的代码是否执行

//条件为ture的时候执行{}里面的代码
if (ture){
	alert('因为条件是ture,我会执行')
}
//条件为false的时候不执行{}里面的代码
if(false){
	alert('因为条件是false,我不会执行')
}

5.1.2、if else语句

通过if条件来决定，执行哪一个{ }里面的代码
语法: if(条件){条件为 true 的时候执行 }else {条件为 false的时候执行}
两个内的代码一定有一个会执行

//条件为ture的时候，会执行if后面的{}
if(ture){
	alert('因为条件是ture,我会执行')
}
else
{
	alert('因为条件是false,我不会执行')
}

//条件为flase的时候，会执行if后面的{}
if(flase){
	alert('因为条件是ture,我会执行')
}
else
{
	alert('因为条件是false,我不会执行')
}

5.1.3、if else if … 语句

可以通过if和else if 来设置多个条件进行判断
语法:if( 条件1 ){ 条件1为 true 的时候执行 }else if( 条件2 ){ 条件2为 true 的时候执行 }
会从头开始依次判断条件
- 如果第一个条件为true了，那么就会执行后面的里面的内容
- 如果第一个条件为false，那么就会判断第二个条件，依次类推
多个{ }，只会有一个被执行，一旦有一个条件为true了，后面的就不在判断了

//第一个条件为true，第二个条件为 false，最终会打印“我是代码段1”
if	(ture){
alert('我是代码段1')
}else if (flase){
alert('我是代码段2')
}
//第一个条件为ture，第二个条件为ture，最终会打印"我是代码段3"
//只有前面所有的条件都不满足的时候会执行else后面的{里面的代码
//只要前面有一个条件满足了，那么后面的就都不会执行了
if (false) {
	alert('我是代码段1')
}else if (fa1se) {
alert('我是代码段2')}else {
	alert('我是代码段3')
}

5.2、switch语句

也是条件判断语句的一种
是对于某一个变量的判断
语法:

switch(要判断的变量){
	case 情况1:
		情况1要执行的代码
		break
	case 情况2∶
		情况2要执行的代码
		break
	case 情况3:
		情况3要执行的代码
		break
	default:
		 上述情况都不满是的时候执行的代码
		}

注：
+
+
1. 输入的值必须是===switch中的情况才能表达
2. 不要在各种情况中写比较运算符
3. break必须写

5.3、while语句

while，中文叫当…时，其实就是当条件满足时就执行代码，一旦不满足了就不执行了
语法 while (条件){ 满足条件就执行}
因为满足条件就执行，所以我们写的时候一定要注意，就是设定一个边界值，不然就一直循环下去了

//1. 初始化条件
var num = 0;
//2.条件判断
whlie (num<10){
	//3.要执行的代码
	console.log('当前的num的值是'+num)
	//4.自身改变
	num=num+1
}

Smulll_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 学习笔记（第一天）

初学者学js
复制链接

扫一扫

专栏目录

JavaScript 学习笔记（第一天）

JavaScript 学习笔记（第一天）

一、初始JavaScript

1.1、<script>标签

1.2、hello world

1.3、js的编写规范

1.4、js基本语法

1.5、字面量与变量

1.6、js中的标识符

二、js中的数据类型

2.1、数据类型概括

2.2、String 字符串

2.3、Number 数值

2.4、Boolean 布尔值

2.5、Null和undefined 空值与未定义

三、js中的强制类型转换

3.1、将其他数据类型转换为String类型

3.2、将其他数据类型转换为Number类型

3.3、将其他数据类型转换为Boolean

3.4、进制数字的表示方法

四、运算符

4.1、数字运算符

4.2、赋值运算符

4.3、比较运算符

4.3、逻辑运算符

4.4、自增自减运算符

4.5、三元运算符

五、分支结构

5.1、if语句

5.1.1、if语句

5.1.2、if else语句

5.1.3、if else if … 语句

5.2、switch语句

5.3、while语句

1.1、`<script>`标签