您的位置:首页 > Web前端 > JavaScript

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

2016-12-14 21:34 1101 查看

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)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: