3 HTML&JS等前端知识系列之javascript的基础
preface
作为一名运维开发，必须懂得前端知识，比如javascript，dom等等，下面就聊聊javascript。
include
- 数据格式
- 条件判断，循环流程等。
- 函数
- 面向对象
what is javascript??
JavaScript 是世界上最流行的编程语言。
这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
- JavaScript 很容易学习
javascript的存在形式
- 文件，src引用某个js文件
- 块，以代码块的形式存在
javascript 存放在哪？
应该存放在body标签的底部。
局部变量与全局变量
- var 申明的是局部变量
var name='ljf' - 没有加var，表示是全局变量。谨慎使用全局变量。
name='yq'
注释
- 当行注释可以使用//，如下所示
// alert('abc')
- 多行注释可以使用/* */来包裹需要注释的内容
/*
f1();
f2();
*/
Notice
以下操作都是在浏览器的console下操作的。
数据类型:1 数字，字符串，数组（字典）
特殊值
先说说几个特殊的值
- null
- undefined
以上bool值都是false
数字
var age=19
var age=Number(20)
var age=Number('20')
typeof 判断类型
var age=19
typeof age
"number"
age='19'
"19"
typeof age
"string"
parseInt 转换类型，从字符串到数字
age=parseInt(age)
19
parseFloat 转换类型，从字符串到浮点
age='19.9'
"19.9"
age=parseFloat(age)
19.9
age
19.9
字符串 去除两边空格
var name = ' ljf '
undefined
name.trim()
"ljf"
指定左右边 去除空格
name.trimLeft()
"ljf "
name.trimRight()
" ljf"
charAt 取值
从0开始的下标，传入参数为下标
name.charAt(2)
"j"
name.charAt(0)
" "
substring 切片
name.substring(0,2)
" l"
name.substring(2,5)
"jf "
indexOf 获取指定元素的下标
name.indexOf('j')
2
数组（字典）
等于python里面的列表
push 数组后端追加
a=[1,2,3,4]
[1, 2, 3, 4]
a.push(5)
5
a
[1, 2, 3, 4, 5]
unshift 最前面追加
a.unshift(1)
6
a
[1, 1, 2, 3, 4, 5]
splice 指定位置插入
第二个参数必须是0，非0会报错。遵循左闭右开的原则
a.splice(1,0,'ali')
[]
a
["the", "ali", 1, 1, 2, 3, 4, 5]
a.splice(4,0,'fuck')
[]
a
["the", "ali", 1, 1, "fuck", 2, 3, 4, 5]
pop 删除最后一个并且返回删除的值
a=["the", "ali", 1, 1, "fuck", 2, 3, 4]
c=a.pop()
c
4
slice 切片处理
传入下标，然后就能够对列表切片
a
["the", 2, 3, 1, 44]
a.slice(1,3)
[2, 3]
reverse 反转列表
并不返回新值，而是在原处修改。
a
["the", 2, 3, 1, 44]
a.slice(1,3)
[2, 3]
a.reverse()
[44, 1, 3, 2, "the"]
join 拼接功能
a
[44, 1, 3, 2, "the"]
a.join('-')
"44-1-3-2-the"
concat 合并数组
把数组b在a数组后面追加
var b=[11,22,33,44]
undefined
a.concat(b)
[44, 1, 3, 2, "the", 11, 22, 33, 44]
splice 删除指定下标的值
a
["the", 1, "fuck", 2, 3]
a.splice(1,2)
[1, "fuck"]
a
bool值
true和false都是小写的，如下所示：
var a=true;
undefined
a
true
json序列号与反序列化
采用json数据格式
dic = {'k1':'v2'}
Object {k1: "v2"}
m=JSON.stringify(dic)
"{"k1":"v2"}"
n=JSON.parse(m)
Object {k1: "v2"}
下面说说js的循环流程
Notice
以下操作都是在浏览器的console下操作的。
for循环
- break跳出循环
- continue 继续循环
循环数组
在数组里面的，默认是循环列表的下标
li=[11,22,33,44]
[11, 22, 33, 44]
for(var item in li){
console.log(item);
}
0
1
2
3
undefined
for(var item in li){
console.log(li[item]);
}
11
22
33
44
循环字典
默认是循环k
a={'k1':'v1','k2':'v2'}
Object {k1: "v1", k2: "v2"}
for(var i in a){console.log(i)}
k1
k2
undefined
仿c语言的for循环
这个只能适用于数组，不能适用于字典
for(var i=0;i<100;i++){console.log(i)}
0
1
2
while循环
while(true){console.log(11)}
if条件判断
下面看看伪代码
if(条件){
}else if(条件){
}else if() {
}
switch 条件判断
下面看看伪代码
switch(name){
case 1:
console.log('1111');
break;
case 2:
console.log('222');
break;
default:
console.log('dddd')
}
异常捕获
下面看看伪代码
try{
}catch(e){ # e就是异常类型，
}finally { # 最后执行的。
}
下面看看js的函数定义以及调用
普通函数
function fuc1(args) {
console.log(args);
return 'ljf'
}
xx = fuc1(123);
alert(xx);
匿名函数
下面这样的函数比较少见
var f = function (args) {
console.log(args);
};
f('this ni ming func')
自执行函数
自动执行的函数，一般用于js库。代码如下
(function(arg){
console.log('1212',arg);
})('ljf')
面向对象的用法，我们一般用的少，这里的this等于python的self。
function Foo(name,age){
this.Name = name;
this.Age = age;
this.Func = function(arg){
return this.Name + arg;
}
}
var obx = new Foo('ljf',22);
console.log(obx.Name);
console.log(obx.Age);
var ret = obx.Func('hehe');
console.log(ret)
