JavaScript介绍
JavaScript是运行在浏览器端的脚本语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互,JavaScript是浏览器解释执行的,前端脚本语言还是Jscript(微软,ID独有),ActionScript(Adoble公司,需要插件)等
前端三大块
JavaScript嵌入页面的方式
<input type="button" name="" οnclick="alert('ok!');" value="点击我!">
<script type="text/javascript">
alert("ok!”);
script>
<script type="text/javascript" src="js/hello.js">script>
变量
JavaScript是一种弱类型语言,JavaScript的变量类型由它的值来决定的,定义变量需要用关键字var
Var isNum = 123;
Var sTr = ”asdf”
//同时定义多个变量可以使用“,”隔开,公用一个“var”关键字
Var isNum = 45,sTr=”hello world”,sCount=’68’;
变量类型:
5种年基本数据类型:
1种复合类型
Object
Javascript语句与注释
单行注释: //
多行注释: /* */
变量、函数、属性、函数参数命名规范:
匈牙利命名风格:
对象o Object 比如:oDiv
数组 a Array 比如:altems
字符串s String 比如:sUserName
整数i Integer 比如:iItemCount
布尔值 b Boolean 比如:bIsComlpete
浮点数 f Float 比如:fPrice
函数 fn Function 比如:fnHandler
正则表达式 re RegExp 比如:reEmailCheck
获取元素方法一
可以使用内置对象document上的getElementById方法来获取页面上设置id属性的元素,获取的是一个html对象,然后将它赋值给一个变量,比如:
<script type="text/javascript">
var odi = document.getElementById("div1")
script>
上面的语句,如果把JavaScript写在元素的上面,就会报错,因为页面上从上往下加载执行的,JavaScript去页面上获取元素div1的时候,元素div1还没有加载,解决方法有2种:
第一种方法:将JavaScript放到页面最下边
..........
.......
<script type="text/javascript">
var odi = document.getElementById("div1")
script>
第二种方法:将JavaScript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完成后才执行,就不会出错了。
<script type="text/javascript">
window.onload = function(){
var odi = document.getElementById("div1")
}
script>
.......
操作元素属性
获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写
操作属性的方法
属性写法
通过“.”操作属性
<script type="text/javascript"> window.onload = function(){ //通过ID名获取元素赋值给oDiv变量 var oDiv = document.getElementById("div1") var oa = document.getElementById("link") //读取属性 var sId = oDiv.id alert(sId) //改变元素的属性(写属性) oDiv.style.color = "red" oDiv.style.fontSize = "20px" oa.href = "http://www.baidu.com" oa.title = "这是跳转到百度的网址" var oa2 = document.getElementById("div2") oa2.className = "box2" }
通过“[]”操作属性
<script type="text/javascript"> window.onload = function(){ //通过ID名获取元素赋值给oDiv变量 var oDiv = document.getElementById("div1") var sMystyle = "color" var sValue = "red" /* 属性用变量来替代的话需要用【】来操作 */ oDiv.style[sMystyle] = sValue } script>
innerHTML
innerHTML可以读取或者写入标签包裹的内容
<script type="text/javascript"> window.onload = function(){ //通过ID名获取元素赋值给oDiv变量 var oDiv = document.getElementById("div1") //读取元素里面的内容 var text = oDiv.innerHTML; alert(text) //改写元素里面的内容 //oDiv.innerHTML = "修改一个元素" oDiv.innerHTML = "传智播客" } script>
<body> <div id="div1">这是一个元素div> body>
函数
函数就是重复执行的代码片。
<head> <meta charset="UTF-8"> <title>JS函数title> <script type="text/javascript"> function fnMyalert(){ alert("hello world!") } function fnChange(){ var oDiv = document.getElementById("div1") oDiv.style.color = "red" oDiv.style.fontSize = "20px" } script> head> <body> <div id="div1" οnclick="fnMyalert()">这是一个div元素div> <input type="button" name="" value="改变div" οnclick="fnChange()"> body>
<head> <meta charset="UTF-8"> <title>JS函数title> <script type="text/javascript"> function fnMyalert(){ alert("hello world!") } function fnChange(){ var oDiv = document.getElementById("div1") oDiv.style.color = "red" oDiv.style.fontSize = "20px" } script> head> <body> <div id="div1" οnclick="fnMyalert()">这是一个div元素div> <input type="button" name="" value="改变div" οnclick="fnChange()"> body>
匿名函数
定义函数可以不给名称,这个叫做匿名函数,可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
<head> <meta charset="UTF-8"> <title>JS函数title> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById("btn01"); oBtn.onclick = function(){ var oDiv = document.getElementById("div1") oDiv.style.color = "red" oDiv.style.fontSize = "20px" }; } script> head> <body> <div id="div1">这是一个div元素div> <input id = "btn01" type="button" name="" value="改变div"> body>
变量与函数预解析
JavaScript解析过程分为两个阶段,先是编译阶段,然后执行阶段,在编译阶段将会function定义的函数提前,并且将var定义的变量声明提前,将它赋值undefined.
<script type="text/javascript"> //预解析会把变量的声明提前 alert(iNum);//弹出undefined alert(iNum01);//系统会崩溃或出错,因为iNum01没有定义,也没有声明 var iNum = 12; script>
<script type="text/javascript"> //预解析会让函数的声明和定义提前,正常用它 myalert(); function myalert(){ alert("hello world!"); } script>
函数传参
<script type="text/javascript"> function fnMyalert(a){ alert(a); } fnMyalert("hello world!") fnMyalert(12) script>
<script type="text/javascript"> window.onload = function(){ function fnChangestyle(myStyle,val){ var oDiv = document.getElementById("div01") oDiv.style[myStyle] = val; } fnChangestyle('fontSize','30px'); fnChangestyle('color','red'); fnChangestyle('backgroundColor','pink'); } script>
函数return关键字
函数中‘return’关键字的作用
<script type="text/javascript"> function fnAdd(a,b){ var c = a + b return c ; } var isResult = fnAdd(2,5); alert(isResult) script>
条件语句
通过条件来控制程序的走向,就需要用到条件语句
运算符
If else
<script type="text/javascript"> var iNum01 = 2; var sNum01 = '2'; if(iNum01 === sNum01){ alert("相等"); }else{ alert("不相等"); } if(3!=4){ alert("true"); }else{ alert("false"); } if(!4>3){ alert("大于"); }else{ alert("非大于"); } if(4>3 && 5>2){ alert("满足"); }else{ alert("不满足"); } if(4>3 || 5<2){ alert("部分满足"); }else{ alert("全部不满足"); } script>
Switch语句
多重if else语句可以换成性能更高的switch语句
<head> <meta charset="UTF-8"> <title>网页换肤title> <link id ="link01" type="text/css" rel="stylesheet" href="css/skin01.css"> <script type="text/javascript"> window.onload = function(){ var iWeek = 3; var oBody = document.getElementById('body01'); switch (iWeek){ case 1: oBody.style.backgroundColor = 'gold'; break; case 2: oBody.style.backgroundColor = 'pink'; break; case 3: oBody.style.backgroundColor = 'green'; break; case 4: oBody.style.backgroundColor = 'yellowgreen'; break; case 5: oBody.style.backgroundColor = 'lightblue'; break; case 6: oBody.style.backgroundColor = 'lightgreen'; break; default : break; } } script> head> <body id="body01"> body>
数组及操作方法
数组就是一组数据的集合,JavaScript中,数组里面的数据可以是不同类型的。
定义数组的方法
<script type="text/javascript"> //对象的实例创建 var aList01 = new Array(1,2,3,4); //直接创建(通常使用这个方法来创建数组) var aList02 = [1,2,3,4,5]; script>
操作数组中数据的方法
<script type="text/javascript"> var aList02 = [1,2,3,4,5]; //通过length来获取数组的长度 alert(aList02.length); script>
<script type="text/javascript">
var aList02 = [1,2,3,4,5];
var sTr = aList02.join(“-”);
alert(sTr);//弹出1-2-3-4-5
<script type="text/javascript">
var aList02 = [1,2,3,4,5];
//Push()和pop()从数组最后增加成员或删除成员 aList02.push('b'); alert(aList02); aList02.pop() alert(aList02); script>
<script type="text/javascript">
var aList02 = [1,2,3,4,5];
aList02.unshift('b') alert(aList02) aList02.shift() alert(aList02); script>
<script type="text/javascript">
var aList02 = [1,2,3,4,5];
aList02.reserve() alert(aList02); script>
<script type="text/javascript">
var aList03=['a','b','c','a','b','c'] alert(aList03.indexOf('b'))
script>
第一个参数是开始的位置,第二个参数是从起始位置删除多少个成员,第三个之后(包括第三个)的是要增加的成员的值
<script type="text/javascript">
var aList03=['a','b','c','d','a','b','c']; // aList03.splice(1,0,'e') ;//从第2个开始不删除,在1的位置增加一个e // alert(aList03);//'a','e','b','c','d','a','b','c' aList03.splice(1,2,'f','g');//从第2个开始删除b,c,在1的位置增加一个f,g alert(aList03);// a,f,g,d,a,b,c
script>
多维数组
多维数组指的是数组的成员也是数组的数组
<script type="text/javascript"> var aList = [[1,2,3],['a','b','c','d'],[4,5,6],[6,7,8]]; alert(aList.length)//4 alert(aList[0].length)//3 alert(aList[0][1]);//2 script>
循环
批量操作数组中的数据,需要使用到循环语句
循环语句
程序中进行有规律的重复性操作,需要使用到循环语句
For循环
<script type="text/javascript"> for(var i=0;ii++){ ..... } script>
<script type="text/javascript"> var aList =[1,2,3,4,5,6]; var iLen = aList.length; for(var i=0;i<iLen;i++){ alert(aList[i]); } script>
While 循环
<script type="text/javascript"> var i =0;
While(i<0){
i++;
} script>
数组去重
<script type="text/javascript">
var aList = [1,2,3,2,3,4,6,7,8,5,9,3,2,1,8,5,4,5,6];
var aList2 =[];
for(var i=0;i<aList.length;i++){
if(aList.indexOf(aList[i])==i){
aList2.push(aList[i]);
}
}
alert(aList2);
script
获取元素方法二
可以使用内置对象document上的getElementByTagName方法来获取页面上的某一标签,获取的是一个选择集,不是数组,但可以用下标的方式操作选择集里面的标签元素
<script type="text/javascript">
window.onload = function(){
//通过标签名称获取li元素,生成一个选择集,赋值给aLi
/*
var aLi = document.getElementsByTagName("li");
var iLen = aLi.length;
//读取选择集内元素的个数
//alert(aLi.length);
//同时给所有的li加背景色
for(var i=0;i
aLi[i].style.background = "gold";
}*/
//给指定li加背景色
var aList = oUl.getElementsByTagName("li");
var iLen = aList.length
alert(aList.length)
for(var i=0;i<iLen;i++) {
if(i%2 == 0){
aList[i].style.background = "gold";
}
}
}
script>
Javascript组成
字符串处理方法:
<script type="text/javascript">
var iNum01 = 12;
var sTr = "abc";
var iNum02 = "34";
//数字和字符串相加 等同于字符串拼接
alert(iNum01+iNum02); //弹出1234
alert(iNum02+sTr);//弹出34abc
var sTr = '12.35';
//将数字字符串转化为整数
alert(parseInt(sTr)); //弹出12
//将数字字符串转化为小数
alert(parseFloat(sTr));//弹出12.35
//把一个字符串分割成字符串组成的数组
var sTr ="2017-4-22";
var aList = sTr.split("-");
alert(aList); //弹出['2017','4','22']
var aList02 = sTr.split("");
alert(aList02);//弹出['2','0','1','7','-','4','-','2','2']
//获取字符串中的某一个字符
var sTr04 = "#div";
var sTr05 = sTr04.charAt(0);
alert(sTr05);//弹出#
//查找字符串是否含有某字符,indemxOf(),如果不存在的话就会弹出-1,找到的话就会弹出对应的索引值
var sTr06 = "abcdf microsoft asdf1";
alert(sTr06.indexOf('microsoft'));//弹出 6,弹出-1
//截取字符串用法
var sTr07 = "abcdf123456gh";
var sTr08 = sTr07.substring(5,11);
alert(sTr08);////弹出 123456
script>
用最快的方式实现字符串反转
<script>
var sTr09 = "abcdfmicrosoft12345asdf1"
var sTr10 = sTr09.split("").reverse().join();
alert(sTr10);//弹出1,f,d,s,a,5,4,3,2,1,t,f,o,s,o,r,c,i,m,f,d,c,b,a
script>
定时器
定时器类型及语法
定时器有2种:
clearTimeout 关闭只执行一次的定时器
clearInterval 关闭反复执行的定时器
变量作用域
变量作用域指的是变量的作用域范围,JavaScript中的变量分为全局变量和局部变量
封闭函数
封闭函数是JavaScript中匿名函数的另外一种写法,创建一个开始就执行而比用命名的函数。
一般定义函数和执行函数
Function myAlert(){
Alert(“hello world!”);
}
myAlert()
封闭函数:
(function myAlert(){
Alert(“hello world!”);
} )();
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function myAlert(){
Alert(“hello world!”);
}
在封闭函数前加一个“;”,可以避免JS压缩时候出错
;(function myalert(){
alert("hello world!")
})();
常用内置对象
<script type="text/javascript"> //通过Id获取元素 document.getElementById() //通过标签获取元素 document.getElementsByTagName() //获取上一个页面跳转页面的地址 document.referrer script>
//获取或重定URL地址 window.location.href //获取地址参数部分 window.location.search //获取页面锚点或者叫哈希值 window.location.hash
//获取0-1的随机数,不包括1
Math.random
//向下取整
Math.floor
//向上取整
Math.ceil
<script type="text/javascript">
var iPi = Math.PI;
alert(iPi);
//Math.random()只能返回从0到1之间的随机数,不包括1
var iNum = Math.random();
var aArr =[];
for (var i=0;i<20;i++){
aArr.push(iNum)
}
//alert(aArr);
console.log(aArr);
//向下取整,去除小数部分
alert(Math.floor(5.6)); //5
//向上取整,去除小数部分,整体加1
alert(Math.ceil(5.2)); //6
//10-20之间的随机数
var iN01 = 10;
var iN02 = 20;
var aList02=[];
for(var i=0;i<40;i++){
var iNum = Math.floor((iN02-iN01)*Math.random()+1) + iN01;
aList02.push(iNum);
}
console.log(aList02);
script>
调试程序的方法