1.Javascript介绍
JavaScript(简称“JS”)是当前最流行、应用最广泛的客户端脚本语言,用来在网页中添加一些动态
效果与交互功能,在 Web 开发领域有着举足轻重的地位。
1. JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页
HTML 用来定义网页的内容,例如标题、正文、图像等
CSS 用来控制网页的外观,例如颜色、字体、背景等
JavaScript 用来实时更新网页中的内容,例如从服务器获取数据并更新到网页中,修改某些标签的
样式或其中的内容等,可以让网页更加生动。
2.JavaScript使用方法
内部式
在body内部写script标签、在标签内写js代码
外部式
在head头部标签中 通过script引入js文件
3.JavaScript输出
console.log
在控制台输出
注意:必须打开网页控制台才能看到输出的内容
alert("hello js")
在网页输出
注意:打开网页自动弹出
4.JavaScript注释
console
.
log
(
"在这里写输出内容"
);
</script>
</body>
<body>
<script>
alert
(
"在这里写弹出的内容"
)
</script>
</body>
<body>
<script>
// 这是注释内容
alert
(
"在这里写弹出的内容"
)
</script>
</body>
5.变量
JavaScript不需要指定变量的类型,JavaScript的变量类型由他的值来决定。
变量声明
变量赋值
变量声明并赋值
6.JavaScript的数据类型
6.1基本数据类型
字符串型 (String)
数值型 (Number)
布尔 (Boolean)
undefined (Undefined)
null (Null)
6.1.1String 字符串
String用于表示一个字符序列,即字符串。字符串需要使用
单引号
或
双引号
括起来。
<script>
/*这是注释内容
很多注释
很多...*/
alert
(
"在这里写弹出的内容"
)
</script>
// 声明变量
let 小黄;
<script>
// 声明变量
let
小黄
;
// 变量赋值
小黄
=
"我家的一只小狗"
</script>
<body>
<script>
let
小黄
=
"我家的一条小狗"
console
.
log
(
小黄
);
</script>
</body>
<script>
let
a
=
"这是字符串a"
let
b
=
'这是字符串b'
</script>
6.1.2Number 数值型
Number 类型用来表示整数和浮点数,最常用的功能就是用来表示10进制的整数和浮点数。
6.1.3Boolean 布尔型
布尔型也被称为逻辑值类型或者真假值类型。
6.1.4Undefined
在使用 let 声明变量但未对其加以初始化时,这个变量的值就是 undefined。
6.1.5Null
空,表示空对象,一般用来初始化变量
6.2引用数据类型
6.2.1.数组 (Array)是一组按顺序排列的数据的集合,数组中的每个值都称为元素,而且数组中可以包含
任意类型的数据。在 JavaScript 中定义数组需要使用方括号 [ ] ,数组中的每个元素使用逗号进行分隔
通过索引取值
<script>
// 整数
let
a
=
10
// 浮点数
let
b
=
10.01
</script>
<script>
// true 真
let
a
=
true
// false 假
let
b
=
false
</script>
<script>
// 变量声明 没有赋值 就会打印undefined
let
a
;
console
.
log
(
a
);
</script>
<script>
// 当变量需要为空的时候 就可以写null
let
a
=
null
let
b
=
null
</script>
let
arr
=
[
1
,
2
,
3
,
4
]
// 引用数据类型
// 1.数组 []表示
// 我们可以通过索引取值
let
arr
=
[
1
,
2
,
3
,
4
,
5
,
6
]
console
.
log
(
arr
[
0
]);
// 不支持负数索引
console
.
log
(
arr
[
-
2
]);
获取数组的长度
let
arr
=
[
1
,
2
,
3
,
4
,
5
,
6
]
console
.
log
(
arr
.
length
);
从数组最后添加和删除数据
push() 方法用于向数组的末尾添加一个或多个元素
pop() 方法用于删除并返回数组的最后一个元素
let
arr
=
[
1
,
2
,
3
,
4
]
arr
.
push
(
5
);
console
.
log
(
arr
);
arr
.
pop
();
console
.
log
(
arr
);
根据下标添加和删除元素
arr.splice(start,num,element1,...,elementN)
参数解析:
1、start:必需,开始删除的索引
2、num:可选,删除数组元素的个数
3、elementN:可选,在start索引位置要插入的新元素
此方法会删除从start索引开始的num个元素,并将elementN参数插入到start索引位置
let
arr
=
[
1
,
2
,
3
,
4
,
5
]
arr
.
splice
(
1
,
0
,
"苹果"
)
console
.
log
(
arr
);
arr
.
splice
(
1
,
2
)
console
.
log
(
arr
);
arr
.
splice
(
1
,
0
,
"鸭梨"
,
"香蕉"
)
console
.
log
(
arr
);
6.2.2 对象 (Object)在 JavaScript 中,对象是一种复合数据类型,用于存储键值对。对象可以包含
各种类型的数据
6.3typeof 判断类型
场景:基本数据类型的判断
7.运算符
7.1字符串拼接
字符串拼接使用"+"运算符
特点:数字和字符串拼接会自动进行类型转换。
7.2算数运算符
用于表达式计算。
1. 加 +
2. 减 +
3. 乘 *
<
script
>
let
b
=
{
name
:
"景明"
,
age
:
18
,
sex
:
"男"
,
}
// 对象取值 需要通过.来取值
console
.
log
(
b
);
console
.
log
(
b
.
name
);
console
.
log
(
b
.
age
);
<
/script>
<script>
let
a
=
'我是字符串类型'
let
b
=
10
let
c
=
undefined
let
d
=
null
let
e
=
true
console
.
log
(
typeof
a
);
// string
console
.
log
(
typeof
b
);
// number
console
.
log
(
typeof
c
);
// undefined
console
.
log
(
typeof
d
);
// 如果值是null 打印会为object类型
console
.
log
(
typeof
e
);
// boolean
</script>
<
script
>
let
a
=
33
let
b
=
40
//
console
.
log
(
a
+
b
);
let
c
=
"33"
let
d
=
44
// 字符串和数字进行拼接,自动把数字类型转换成字符串
console
.
log
(
c
+
d
);
<
/script>
4. 除 /
5. 自增 ++
6. 自减 --
示例代码:
7.3赋值运算符
赋值运算符用于给 JavaScript 变量赋值。
1. =
2. +=
3. -=
示例代码
7.4比较运算符
==
判断两边的值是否相等 如果相等返回true,否则返回false 只要值相等就相等
!= 用来判断两个值是否不相等 如果不相等返回true,否则返回false
=== 判断两边的值 和数据类型是否相等
<script>
let
a
=
10
let
b
=
20
console
.
log
(
a
+
b
);
// 30
console
.
log
(
a
-
b
);
//-10
console
.
log
(
a
*
b
);
//200
console
.
log
(
a
/
b
);
//0.5
console
.
log
(
++
a
);
//11
console
.
log
(
--
b
);
//19
</script>
<script>
let
a
=
10
let
b
=
20
// console.log(a=100); //结果 100
// console.log(a+=b); // a=a+b 结果 30
console
.
log
(
a
-=
b
);
// a=a-b 结果 -10
</script>
<script>
let
a
=
30
let
b
=
"30"
console
.
log
(
a
==
b
);
//值相等就会相等 true
</script>
<script>
let
a
=
30
let
b
=
"30"
console
.
log
(
a
!=
b
);
//值相等就会相等 false
</script>
<script>
let
a
=
30
let
b
=
"30"
console
.
log
(
a
===
b
);
//值和类型都相等就会相等 false
</script>