JavaScript
独立的语言,浏览器具有javascript解释器
JavaScript在HTML中的存在形式:
1.head中
<script> </script>
像css代码在head中书写一样,在head中书写
<script>
//javascript代码
alert(123);
</script>
<script type="text/javascript">
//javascript代码
alert(123);
</script>
上述这两段代码作用是完全相同的,都是弹窗中输出123,type=’'text/javascript"意义在于声明以下是Javascript代码,可以省略不写
- 文件调用
我们可以创建一个js文件,将JavaScript代码写在其中,然后通过调用此文件,调用此JavaScript代码
<head>
.......
<script src='js文件路径’></script>
</head>
PS:JS代码需要放置在标签内部的最下方
因为在加载网页时,若把JavaScript代码写在head中,会优先加载JavaScript代码,耗时较长,因此为了提高用户体验,使用户能够优先浏览到网页内容,我们往往将JavaScript代码写在body标签内部的最下方
JavaScript代码书写方式
- html文件中编写
- 临时,浏览器的终端Console中修改
JavaScript代码基本组成
-
变量
在JavaScript中变量主要分为两种:
javascript:
name=‘alex’(全局变量)
var name=‘elsex’(局部变量) -
基本数据类型
数字
没有 int,double等区分
a=‘18’; -
字符串
charAt():获取一段字符串中某个位置的字符
substring(起始位置,结束位置):获取两个位置之间的字符串obj.trim()
移除空白
obj.trimLeft()
移除左边空白
obj.trimRight()
移除右边空白
obj.charAt(n)
返回字符串中的第n个字符
obj.concat(value,…)
拼接
obj.indexOf(substring,start)
子序列位置(前往后)
obj.lastIndexOf(substring,start)
子序列位置 (后往前)
obj.substring(from,to)
根据索引获取子序列
obj.slice(start,end)
切片
obj.tolowerCase()
大写转小写
obj.toupperCase()
小写转大写
obj.split(delimiter,limit)
分割
obj.search(regexp)
从头开始匹配,返回配成功的第一个位置(g无效)
obj.match(regexp)
全局搜索,如果正则中有g表示找到全部,否则只找到第一个。
obj.replace(regexp,replacement)
替换,正则中有g则替换所有,否则只替换第一个匹配项 -
数组
a=[1,2,34,5]
obj.push(ele)
尾部追加元素
obj.pop()
尾部获取一个元素
obj.unshift(ele)
头部插入元素
obj.shift()
头部移除元素
obj.splice(start,deletecountf value,…)
插入、删除或替换数组的元素
obj.splice(n,0,val)
指定位置插入元素 (指定位置,删除的个数,插入的值)
obj.splice(n,1,val)
指定位置替换元素
obj.splice(n,1)
指定位置删除元素 -
字典
a={k1:'v1',k2:'v2'}
a['k1']=v1;
a['k2']=v2;
-
布尔类型(Boolean)
布尔类型包含真假,其首字母小写 -
== 比较值相等
-
!= 值不等于
-
=== 比较值和类型相等
-
!=== 值和类型不等于
-
|| 或
-
&& 与
-
条件语句
if(条件){
}else if(条件){
}else{
}
- for循环
1.循环时,循环的元素是索引
数组
a=[11,22,33,44]
for(var item in a){
console.log(a[item]);
}
字典
a={'k1':'v1','k2':'v2'}
for(var item in a){
console.log (a[item])
}
注:console.log()意思是获取值并在console中输出
2.第二种for循环
a=[11,22,33,44]
for(var i=0;i<a.length;i++){
.......
}
只支持数组循环不支持字典循环
-
函数:
普通函数:
function 函数名(形参){}
匿名函数:
例如以下函数:
function func(arg){
return arg+1;
}
用匿名函数的书写方式就可以写为:
setInterval(function(){
console.log(123);
},5000);
自执行函数:
function func(arg){
console.log(arg);
}
func();
通常我们写一个函数并要使它执行,应该需要像上面这么书写,然而自执行函数就可以如下书写:
(function(arg){
console.log(arg);
})(1)
序列化
JSON.stringify()
将对象转换为字符串
JSON.parse()
将字符串转换为对象类型
转义
·decodeURI()
URI中将转义的字符转换成未转义的字符
·decodeURIComponent()
URI组件中将转义的字符转换成未转义的字符
·encodeURI()
转义URI中的字符
·encodeURIComponent()
转义URI组件中的字符
·escape()
对字符串转义
·unescape()
给转义字符串解码
·URIError
由URI的编码和解码方法抛出
应用:
在客户端请求服务器登录等情况,将数据保存在本地cookie中,在保存前需要将数据进行转义
- 定时器:(每多少毫秒执行一次)
setInterval(执行代码,毫秒)
setInterval("func()",5000);
跑马灯实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯</title>
</head>
<body>
<div id="i1">欢迎上级莅临指导</div>
<script>
function run() {
var tag=document.getElementById('i1');
var content=tag.innerText;
var f=content.charAt(0);
var l=content.substring(1,content.length);
var new_content=l+f;
tag.innerText=new_content;
}
setInterval(run,300);
</script>
</body>
</html>