JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1、存在方式

functionfunc() {

alert("Hello Shuaige")

}

2、javascript代码块位置

放在

标签内的代码底部，为什么不能放在上面呢？为什么css的就可以放在上面呢？

注：css代码首先要记住html代码是从上往下解释的，如果css代码放在下面，在上面的代码使用css样式，如果css代码块放在下面就没有办法显示样式了

另不同的浏览器处理请求也不同：正常来说当有一个请求过来时候会把js&css一起发送过去，咱们按照最low的方式理解的话可以这么理解：如果js文件或者js耗时比较久的话，下面的html代码就无法执行了。

3、变量和函数的声明

变量：

functionm1() {

alert("shuaige")var name = 'tianshuai'; //var 变量名 ,变量名前面加var为局部变量

age = '18';//注这里需要注意,建议使用的时候一般不要使用全局变量!否则如果代码量比较大的

//时候容易出现调用混乱的问题

}

m1();

函数

//普通函数

functionfunc() {

alert("Hello Shuaige")

}//定义一个可传参数的函数

functionfunc(arg) {

alert(arg)

}

func('Superman')//自执行函数,顾名思义,定义好之后可以自动执行

(function f3(arg) {alert(arg)})("Shuaige is good man");

//匿名函数,用处不是很大了解就行

var a = function() {

alert('meinv');

};

a();

js 的展示方法有两种：

通过网页来展示

functionf1() {

alert("hello shuai ge")

}

f1()

显示效果如下：

通过console来展示

functionf1() {

console.log("Hello shuaige ")

}

f1()

显示效果如下：

打开google chrome F12点击"Console"，刷新页面！

4、字符串常用方法及属性

调试的地方可以在google chrome 上进行测试，F12点击"Console"

obj.trim()  去除空格

var a = "Luotianshuai"undefined

a.trimLeft()#去除左边的空格

"Luotianshuai"a.trimRight()#去除右边的空格

"Luotianshuai"a.trim()//去除两边的空格"Luotianshuai"a"Luotianshuai" #这里可以发现我执行了上面的去除空格的命令之后,实际的值是没有改变的

b=a.trim()"Luotianshuai" #但是我们可以通过赋值来改变他

b"Luotianshuai"

obj.charAt(index) 根据索引获取字符串里的字符

b"Luotianshuai"b.charAt(0)"L"b.charAt(1)"u"b.charAt(2)"o"

obj.substring(start,end)  获取字符的子序列，类似于切片

b"Luotianshuai"b.substring(0,3)"Luo"

obj.indexOf(char) 去字符串找指定的字符的索引值是多少

b"Luotianshuai"b.indexOf("t")3

obj.length  获取字符串的长度

b"Luotianshuai"b.length12

5、数组

声明一个数组和python中的列表类似

a = [11,22,33,44] #声明一个数组

[11, 22, 33, 44]

插入

a = [11,22,33,44] #声明一个数组

[11, 22, 33, 44]

a.push(55) #在数组最后增加一个元素

5 #这里是数组的长度

a

[11, 22, 33, 44, 55]

a.unshift(00) #在数组最前面增加一个元素

6 #长度

a

[0,11, 22, 33, 44, 55]

a.splice(3,0,'insert') #在指定的索引增加一个元素,括号内(3为索引值,0为固定值,要插入的内容)

[]

a

[0,11, 22, "insert", 33, 44, 55]

a.unshift(100)8

移除

a

[100, 0, 11, 22, "insert", 33, 44, 55]

a.pop()#从尾部获取

55a.shift()#从开头获取

100a

[0,11, 22, "insert", 33, 44]

a.splice(3,1) #从指定位置获取,括号内参数为(元素的索引,后面为索引后的元素个数,包含本身)

["insert"]

a

[0,11, 22, 33, 44]

切片

a

[0,11, 22, 33, 44]

a.slice(1,3)

[11, 22]

a

[0,11, 22, 33, 44]

合并

a = [11,22]

[11, 22]

b= [44,55]

[44, 55]

a.concat(b)

[11, 22, 44, 55]

a

[11, 22]

b.concat(a)

[44, 55, 11, 22]

反转

a

[11, 22]

a.reverse()

[22, 11]

a

[22, 11]

字符串格式化

a

[22, 11]

a.join('_')"22_11"a

[22, 11]

数组长度

a

[22, 11]

a.length2

6、字典

字典是数组的一种特殊形式

dict1 = {'k1':123,'k2':234} #定义一个字典

Object {k1: 123, k2: 234}

dict1['k1']123

7、循环

js中的循环有两种方式

#第一种

for (var i=0;i<10;i++) {console.log(i)}#输出结果,看本代码下第一图

#第二种

for (var item ina) {console.log(a[item])}#输出结果，看本代码下第二图

图二：

8、异常处理

和python中的异常处理类似，代码如下：

try{var tiancai =isme

}catch(e) {

console.log(e)

}finally{

console.log("shuaige is so smart;")

}

显示效果如下：

DOM编程

文件对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。

DOM编程：可以操作html所有的标签，进行找、操作！他也是javascript的一部分

1、选择器：

document.getElementById('id')  查找指定的id，然后我们可以进行操作

var i = document.getElementById('id_1'); //查找指定的id

i.innerText = '456'; //innerText修改指定的字符串

显示效果，当我们打开IE的时候123就会被修改为456

下面操作方式也类似：

document.getElementsByName('name')

var i = document.getElementsByName('name_1'); //查找指定的name,这里和ID不一样name可以有多个

for (var item ini) {

i[item].innerText= '456'; //innerText修改指定的字符串

};

document.getElementsByTagName('tagname')

var i = document.getElementsByTagName('div'); //查找指定的标签类型,这里同样和ID不一样标签比如

functionedit() {vari=document.getElementById('id_1');

i.className= 'color_red';

}

那么恢复按钮呢？只要在新增一个即可

shuaige_js_file

}

234