HTML,CSS和JavaScript是网页设计的基础。HTML和CSS定义了静态的效果，而JavaScript则可以体现出一些动态的效果。在已经掌握一种或者多种编程语言的基础下，学习JS很容易，下面看看一些基本的使用方法。
1. JavaScript的位置。
和CSS类似，我们可以直接写代码块，也可以引用外部文件。理论上，<script src="xxx"></script>可以放在<head>里面，也可以放在<body>里面，但是从效率考虑，如果script的链接比较慢或者错误，<head>里面可能导致整个页面半天加载不出来，因此，我们一般推荐放在<body</body>代码块的底部。如果只是暂时的测试性质的编码，我们甚至可以直接在浏览器上的console上使用。F12或者Inspect ，然后选择console就可以了
2.定义变量
直接写 name=‘james’ 定义了全局变量，如果在函数里面定义，指定一个var 关键字，则表示局部变量
3.数字
JS不区分float或者int，不过我们可以通过parseInt或者parsefloat来转换字符
例如：
|
1
2
3
4
5
6
|
a=
"222.2"
parseFlaot(a)
222.2
parseInt(a)
222
|
4. 字符串
这个和其他语言几乎一样，有常见的属性和方法。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
obj.length 长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(
from
, to) 根据索引获取子序列
obj.
slice
(start, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
|
实例：跑马灯，不停的循环输出文字
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
</head>
<body>
<div id=
"d1"
>欢迎领导视察工作</div>
<script>
//定义函数
function
change(){
//通过id获取标签
var
dd=document.getElementById(
"d1"
)
//控制台可以查看输出，很好的查错方式
console.log(dd)
var
content=dd.innerText
console.log(content)
//获取第一个字符
var
f=content.charAt(0)
//获取子字符串
var
l=content.substring(1,content.length)
//字符串拼接
var
new_content=l+f;
//重新赋值
dd.innerText=new_content
console.log(new_content);
}
//定时器，每隔1000毫秒执行一下change()
setInterval(
'change()'
,1000)
</script>
</body>
|
5. 布尔值， true和false，注意是小写
-
== 比较值相等
-
!= 不等于
-
=== 比较值和类型相等
-
!=== 不等于
-
|| 或
-
&& 且
6. 数组，和python的列表差不多。
方法如下，其中splice比较特殊 他有3个参数，第一个参数表示插入的位置，第二个参数表示删除几个值，第三个表示插入的新值。因此splice(0,1)表示删除第一个值，splice(0,0,20)表示第一个值前面插入一个值20
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,
0
,val) 指定位置插入元素
obj.splice(n,
1
,val) 指定位置替换元素
obj.splice(n,
1
) 指定位置删除元素
obj.
slice
( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
|
7. 字典
例如
a={'name':'James','age':30}
使用和Python一样
8. for循环；for循环有2种形式
第一种形式
例如直接循环数组，他输出的是索引而不是值
|
1
2
3
4
5
6
7
8
9
10
11
|
a=[11,22,33,44]
for
(
var
item
in
a){console.log(item);}
0
1
2
3
for
(
var
item
in
a){console.log(a[item]);}
11
22
33
44
|
直接循环字典，输出的也是key而不是value
|
1
2
3
4
5
6
7
8
|
b={
"name"
:
"alex"
,
"age"
:20}
for
(
var
item
in
b){console.log(item);}
name
age
undefined
for
(
var
item
in
b){console.log(b[item]);}
alex
20
|
第二种形式, 就和其他语言一样；不过注意如果要输出字典，因为字典的key的数据类型是无序散乱 因此这里就不适合了
|
1
2
3
4
5
6
7
8
|
for
(
var
i=1;i<a.length;i++){console.log(i)}
1
2
3
for
(
var
i=1;i<a.length;i++){console.log(a[i])}
22
33
44
|
除了for循环，js也支持while循环，这个和其他语言没区别。
基本格式：
|
1
2
|
while
(条件){
}
|
9. 条件语句
基本格式:
|
1
2
3
4
5
6
|
if
(条件){
}
else
if
(条件)
{}
else
{
}
|
另外一个常见的条件语句是switch，这个东西在Python里面是没有的
例如
|
1
2
3
4
5
6
7
8
9
10
11
12
|
name=
"2"
switch
(name){
case
'1'
:
age = 123;
break
;
case
'2'
:
age = 456;
break
;
default
:
age = 777;
}
456
|
10. 函数
Javascript里面有3种函数，分别是普通函数，匿名函数和自执行函数。格式如下所示。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
普通函数：单独的定义，然后再调用
function
func(){
}
匿名函数：直接在需要调用的地方写函数
setInterval(
function
(){
console.log(123);
},5000)
自执行函数(创建函数并且自动执行)：
(
function
(arg){
console.log(arg);
})(1)
|
11. 序列化
Python里面可以通过json和pickle把对象转换成字符串，这个过程叫做序列化。json可以转化标准的数据类型，而pickle可以转化自定义的对象；
javascript里面也可以通过json来进行序列化和反序列化。格式是
JSON.stringify() 将对象转换为字符串
JSON.parse() 将字符串转换为对象类型
一个例子是自定义一个字典保存数据，然后序列化之后保存到cookie中。
12. eval
类似的，Python里面有eval和exec来执行表达式。eval执行表达式，有返回值；exec可以执行复杂的代码，但是没有返回值；
Javascript里面的eval则是两者之和，可以执行复杂的表达式和代码，然后返回结果
13. 作用域
======== 1. 以函数作为作用域 （let）=========
其他语言： 以代码块作为作用域
|
1
2
3
4
5
6
7
8
9
10
11
|
xo =
"alex"
;
function func(){
// var xo = 'eric';
function inner(){
// var xo = 'tony';
console.log(xo);
}
inner()
}
func()
// 报错
|
Python： 以函数作为作用域
情况一：
|
1
2
3
4
5
6
|
def
func():
if
1
=
=
1
:
name
=
'alex'
print
(name)
func()
/
/
成功
|
情况二：
|
1
2
3
4
5
6
7
|
def
func():
if
1
=
=
1
:
name
=
'alex'
print
(name)
func()
print
(name)
/
/
报错
|
JavaScript: 以函数作为作用域
|
1
2
3
4
5
6
7
|
function
func(){
if
(1==1){
var
name =
'alex'
;
}
console.log(name);
}
func()
|
======== 2. 函数的作用域在函数未被调用之前，已经创建 ========
|
1
2
3
4
5
6
|
function
func(){
if
(1==1){
var
name =
'alex'
;
}
console.log(name);
}
|
====== 3. 函数的作用域存在作用域链，并且也是在被调用之前创建 ========
示例一：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
xo =
"alex"
;
function
func(){
// var xo = 'eric';
function
inner(){
// var xo = 'tony';
console.log(xo);
}
inner()
}
func()
------
alex
|
示例二：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
xo =
"alex"
;
function
func(){
var
xo =
'eric'
;
function
inner(){
console.log(xo);
}
return
inner;
}
var
ret = func()
ret()
----
eric
|
示例三：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
xo =
"alex"
;
function
func(){
var
xo =
'eric'
;
function
inner(){
console.log(xo);
}
var
xo =
'tony'
;
return
inner;
}
var
ret = func()
ret()
------
tony
|
================= 4. 函数内局部变量 声明提前 ==================
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function
func(){
console.log(xxoo);
}
func();
// 程序直接报错
function
func(){
console.log(xxoo);
var
xxoo =
'alex'
;
}
解释过程中：
var
xxoo;
func();
// undefined
|
14. Javascript面向对象
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function
Foo(n){
this
.name = n;
this
.sayName =
function
(){
console.log(
this
.name);
}
}
var
obj1 =
new
Foo(
'we'
);
obj1.name
obj1.sayName()
var
obj2 =
new
Foo(
'wee'
);
obj2.name
obj2.sayName()
|
Foo相当于构造函数
this类似于Python里面的self，指代的对象
创建新对象通过new实现
类似的Python代码
|
1
2
3
4
5
6
7
8
9
|
class
Foo:
def
__init__(
self
,name):
self
.name
=
name
def
sayName(
self
):
print
(
self
.name)
obj1
=
Foo(
'we'
)
obj2
=
Foo(
'wee'
)
|
注意他们的区别在于Python把sayName这个方法保存在类里面，而JS会分别在对象里面都保存了一份，因此比较浪费内存。
可以通过创建原型的方式解决这个重复的问题
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function
Foo(n){
this
.name = n;
}
# Foo的原型
Foo.prototype = {
'sayName'
:
function
(){
console.log(
this
.name)
}
}
obj1 =
new
Foo(
'we'
);
obj1.sayName()
obj2 =
new
Foo(
'wee'
);
|
