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,然后我们可以进行操作
123
var i = document.getElementById('id_1'); //查找指定的id
i.innerText = '456'; //innerText修改指定的字符串
显示效果,当我们打开IE的时候123就会被修改为456
下面操作方式也类似:
document.getElementsByName('name')
123
var i = document.getElementsByName('name_1'); //查找指定的name,这里和ID不一样name可以有多个
for (var item ini) {
i[item].innerText= '456'; //innerText修改指定的字符串
};
document.getElementsByTagName('tagname')
123
234
var i = document.getElementsByTagName('div'); //查找指定的标签类型,这里同样和ID不一样标签比如
for (var item ini) {
i[item].innerText= '456'; //innerText修改指定的字符串
};
上面的代码试用jquery会非常方便就不需要重造轮子
2、注册 事件
首先了解下面的意思:
事件:比如有一个“按钮”,当你点击的时候发生什么,双击的时候发生什么,这个就叫做事件!
注册:首先这个按钮,当你点击的时候发生的动作,上面的事件要使他出现我们想要的效果,首先得把事件和函数进行绑定,然后把他们注册到指定标签上。
常用事件:
onclick
onblur
onfocus
..................
举例代码如下:
写一个input的标签,首先把事件和函数进行绑定,当你一点这个按钮的时候就会自动执行,绑定的函数:
shuaige_js_file}
234
functionedit() {vari=document.getElementById('id_1');
i.className= 'color_red';
}
那么恢复按钮呢?只要在新增一个即可
shuaige_js_file}
234