前端之JavaScript
前面我们已经学习了HTML和CSS,制作网页的三大利器现在就剩一个JavaScript,下面简单介绍以下Js的一些基本用法.
JavaScript其实是一种轻量级的脚本语言,所以其本质上是不同于html和css的,它是可以直接插入html页面的编程代码,且几乎兼容于现代的所有浏览器.其实作为一个编程语言来讲,Js真的是难度非常低,而且功能非常强大的语言,一旦有别的编程语言的基础的的情况下,可以很快的上手Js,所以对于我们来说非常的方便.
至于用什么方式编写js代码,这个仁者见智,不过做实验,只是测试用的话,推荐用网页的console窗口,就是随便打开一个浏览器,按F12,找到Console的标签,然后在下面测试以下代码即可.回车即可自动执行代码,然后shift+回车可以换行.
引入方式
JavaScript的引入方式通常有两种:
x
1
1.
2
<script>中间写js代码</script>
3
4
2.可以直接导入额外的js文件
5
<script src = "***.js"></script>
语言基础和规范
变量声明
变量的声明都是相似的,即:
- 变量名可以使用字母,数字,_等组成,但不能以数字开头
- 变量名区分大小写,且常用驼峰式(Python里常用下划线式)
- 一些保留字不能做变量名,也就是系统保留的那些,像byte,char ,double,short,long等等很多.
js的不同之处就在于需要多一个var关键字,仅此而已.
xxxxxxxxxx
1
1
var name = "nick";var age = 18;
数据类型
数值类型(Number)
x
1
var a = 12.03;
2
var b = 20;
3
var c = 2323e3;
4
var d = 234e-4;
5
# 以上这些都是数值类型,也就是说js里面不分浮点型或者整型,统一都是number类型,当然还有一种叫做NaN,全称是Not a Number ,表示其不是数值类型
字符串(String)
常见双引号包裹的内容都可以叫做是字符串类型,字符串类型可以直接用+拼接在一起
xxxxxxxxxx
10
1
var a = "ni ";
2
var b = "hao";
3
var c = a + b;
4
c
5
ni hao
6
7
# 字符串类型的常用内置函数有以下几种:
8
.length 返回字符串的长度
9
.trim() 移除字符串中的空白
10
.charAt(n) 返回字符串的第几个字符,第一个索引为0
11
.concat(value,) 拼接,这种方法更规范,实际上直接用+也可以
12
.substring(start,end) 根据索引获取一定长度的子序列
13
.slice(start,end) 切片,按照索引的起始位置切片,顾头不顾尾
14
15
# 实际上.substring和.slice的实际用法比较相似,但有细微的不同,具体如下:
16
在.substring里面,如果start>end,两者会被交换,但.slice里面不会
17
在.slice里面,如果start小于0,会从字符串尾部开始取字符,但是.substring没有这个判定
布尔值(Boolen)
js的布尔值和Python不同,都是小写,并非首字母大写.
xxxxxxxxxx
1
10
1
var a = true;
2
var b = false;
3
# 另外,空字符串,0,null,undefined,NaN,都是false
4
# 但是这些值并不是本身是false,而是他们的布尔值是false,所以测试验证的时候要这么写:
5
var c = null;
6
Boolean(c) == false;
7
# 结果为true
8
9
# 而不能直接写
10
c == false;
11
# 这样的结果是false
数组
js中的数组极大程度的相似于Python中的列表,各种属性都很相似,但是它叫数组,不叫列表,这点在我们做后端的时候,如果和前端交流要注意,他们可能听不懂列表这个说法.
xxxxxxxxxx
46
1
var a = [1,2,3,4,5,6,7]
2
a[0]
3
# 结果为1,可以直接用索引来取数组里面的值
4
5
# 数组的常用内置函数为:
6
.length 返回数组的大小
7
.push() 可以在数组的尾部追加元素
8
.unshift() 可以在数组的头部插入元素
9
.slice(start,end) 切片
10
.reverse() 反转整个数组
11
.forEach() 可以将数组的每个元素传递给回调函数
12
.splice() 删除元素,并且可以向数组添加新元素
13
.map() 返回一个数组元素调用函数处理后的值的新数组
14
15
16
# forEach()
17
forEach(function(currentValue,index,arr))
18
19
currentValue是当前的元素值
20
index是当前元素的索引值
21
arr则是当前元素所属的数组
22
23
var arr = [12,13,14,15]
24
arr.forEach(function(value){
25
console.log(value)
26
})
27
# splice()
28
splice(index,howmany,item1,,itemX)
29
30
index 是需要插入元素的索引位置,必须是数字
31
howmany 删除多少位的元素,如果是0,就会删除从索引位置之后的所有元素
32
item1,itemX 是要添加到数组的新元素
33
34
# map()
35
map(function(currentValue,index,arr))
36
37
currentValue 当前元素的值
38
index 是当前元素的索引值
39
arr 当前元素所属于的数组对象
40
41
arr = [12,13,14,15]
42
arr.map(function(value,index,arr){
43
return value+10
44
})
45
arr
46
# 结果为[22,23,24,25]
运算符
运算符包括算术运算符,比较运算符,逻辑运算符,赋值运算符.
xxxxxxxxxx
1
10
9
10
1
# 算数
2
+ - * / % ++ --
3
# 比较
4
> >= < <= != == === !==
5
6
js里面存在弱等于==和强等于===,强等于就是两个值要完全相等,包括值,格式等等,弱等于的范围就比较宽泛,比如
7
1 == "1" 为true 1 === "1"就为false
8
# 逻辑
9
&& || !
10
# 赋值
11
= += -= *= /=
流程控制
js里面流程控制所用到的东西和python相似,就是if-else和while,for ,三元运算,另外多一个switch,只是具体的写法会有些许的区别,和C语言比较相似.
xxxxxxxxxx
45
1
# if else
2
var a = 2;
3
if (a>1)
4
{
5
console.log("You are right")
6
}
7
else if (a >0)
8
{
9
console.log("You are right maybe")
10
}
11
else
12
{
13
console.log("You are wrong")
14
}
15
16
# switch
17
var day = new Date().getDay();
18
switch (day){
19
case 0:
20
console.log("Sunday");
21
break;
22
case 1:
23
console.log("Monday")
24
break
25
default:
26
console.log("...")
27
}
28
# 这里要注意,用switch的情况下,case语句的后面一定要加break,否则程序会把后面的语句全都执行完
29
30
# for
31
for (var i = 1;i < 19;i++){
32
console.log(i);
33
}
34
35
# while
36
var i = 0;
37
while (i<10){
38
console.log(i);i++;
39
}
40
41
# 三元运算
42
var a = 10;
43
var b = 20;
44
var c = a>b ? 1:2
45
上面的三元运算的意思就是,a如果大于b,c就会被赋值1,如果a不大于b,c会被赋值2
函数
JavaScript里面的函数也跟Python极其相似,只是定义方式不同.
xxxxxxxxxx
10
1
function f1(a,b){
2
console.log("ni hao");
3
console.log(a,b)
4
return a+b
5
}
6
7
# 匿名函数的定义方式
8
var a = function(a,b){
9
return a-b;
10
}
arguments参数
JavaScript中函数里的内置参数arguments可以将传出的参数全部包含,示例如下:
xxxxxxxxxx
1
1
function add(a,b){
2
console.log(a+b);
3
console.log(arguments.length);
4
console.log(arguments[0]);
5
# 这里arguments就可以包含传出的所有参数,[0]则可以取其第一个值
6
}
7
add(1,2)
8
9
# 要注意的一点是,JavaScript的函数里面不能同时返回多个值,如果需要返回多个值,只能将其放在数组或者对象中返回