3 HTML&JS等前端知识系列之javascript的基础

preface

作为一名运维开发，必须懂得前端知识，比如javascript，dom等等，下面就聊聊javascript。

include

1. 数据格式
2. 条件判断，循环流程等。
3. 函数
4. 面向对象

what is javascript??

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

1. JavaScript 是一种轻量级的编程语言。
2. JavaScript 是可插入 HTML 页面的编程代码。
3. JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
4. JavaScript 很容易学习

javascript的存在形式

1. 文件，src引用某个js文件
2. 块，以代码块的形式存在

javascript 存放在哪？

应该存放在body标签的底部。

局部变量与全局变量

1. var 申明的是局部变量
   
   var name='ljf'
2. 没有加var，表示是全局变量。谨慎使用全局变量。
   
   name='yq'

注释

1. 当行注释可以使用//，如下所示

// alert('abc')

1. 多行注释可以使用/* */来包裹需要注释的内容

/*
f1();
f2();
*/

Notice

以下操作都是在浏览器的console下操作的。

数据类型:1 数字，字符串，数组（字典）

特殊值

先说说几个特殊的值

1. null
2. 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循环

1. break跳出循环
2. 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)