JavaWeb基础(三)JavaScript基础

1、javascript语句理论上可以出现在任何位置,链入了外部js文件以后,想要继续写js需要重新再写js标签,注释方式有//和/*   */,单引号里套双引号,双引号里套单引号,分号结束一个语句【避免js压缩时出错;增强可读】,顺序执行语句。

<script type="text/javascript" src="xxx.js"></script>

<script type="text/javascript">

</script>

2、变量的声明,var 变量名=变量值;var 变量名1,变量名2,变量名3;var 变量名;【当一个变量没有使用var关键字,表示整个页面都可以访问变量,但是不建议使用

3、变量的命名规则:可以包含$、字母、数字、下划线,数字不能开头,不能为系统关键字,区分大小写,多个单词有驼峰式和下划线式,变量名要有意义。

4、六种数据类型【boolean,number,string,undefined,null,object(对象类型,如array,function等)】,变量使用前要赋初值,可以使用typeof判断数据类型,该运算符返回一个表达式的数据类型的字符串表示形式。

5、==两边类型不同会自动转换再比较,而null与undefined,null与null,undefined与undefined在==中均认为相等;switch内部使用的是===严格判断是否相等,与Java不同的是其比对参数可以使用表达式 

6、使用完毕,将变量赋值为null,可以被垃圾回收,变量使用前要对null和undefined进行判断:

if(typeof(x)!='undefined'&&x!=null){}

7、转义 \r\n换行、\'输出'、\t、\n、\"、\\

8、类型转换parseInt()、parseFloat()、toString()、Number()、String()、Boolean()、NaN()【NaN意味not a number,返回true,表示非数字】

9、eval()【将一段字符串的代码,计算或执行】如:document.alert(eval('2+3'));//弹窗出现5

10、JavaScript中没有重载概念,遇到同名函数会执行最后一个同名参数;所有方法都无需定义形参,为了方便使用还是要定义,默认使用了数组。

11、匿名函数三种方式

定义1:var f1=function(){//函数语句};

调用:f1();

定义2同时调用:(function(x,y){alert(x+y);}) (10,15);//限定作用域,不必考虑命名

定义3:var f3=new Function('x','y','z','alert(x+y+z);');//可以将函数代码用字符串表示,函数中的变量不会作为页面的全局变量,外部函数访问不到

调用:f3(10,20,30);

12、数组的声明和使用

var arr1=[1,2,3,4];

var arr2=[];arr[0]=11;arr[1]=23;

var arr3=new Array();

var arr4=new Array(5);

var arr5=new Array(1,2,'hello',false,function(){;//函数语句});

主要方法有,join()【分割字符串,如var arr=['你好','世界']; var result=arr.join('!');alert(result);//输出结果:你好!世界!】、reverse()反转、concat()数组连接、sort()【默认按字符串方法排序,可以自定义排序方法,数字排序可以如:

function numSort(n1,n2){
       return n1-n2;
};
arr.sort(numSort);

】、push()数组后面追加值、pop()删除数组最后值、shift()数组0项删除、unshift()数组最前面插入、slice(index,end)【赋值索引从index开始到 end-1 结束 为一个新数组,原数组不变,end不填默认尾部】、splice(index,num,ele1,ele2...)【index指 从index删除(包括index对应的值) num指 删除的个数, ele1,ele2...代表插入的值,返回删除的值】

13、键值对集合

var dict=new Array();

dict['lp1']='罗飘1';

dict['lp2']='罗飘2';

for(var key in dict){

     alert(key+':'+dict[key]);

}

简写:var dict={'lp1':'罗飘1','lp2':'罗飘2'};//json

14、字符串操作

str.charAt(10);//找到索引为10的字符

str.indexof('xxxx',10);//从索引10开始找xxxx的索引

str.indexof('xxxx');//找xxxx的索引

str.substr(4,4);//从第四个索引截取第四个字符

str.substring(5,7);//从第五个索引到第七个索引前

str.toUpperCase();//大写字母转换

str.toLowerCase();//小写

str.split(',');//按逗号分割

和match() replace() search()配合使用

15、Date对象

var d=new Date();

d.getDate();//返回月中的天

d.getFullYear();//年份

d.getMonth();//需要+1

d.getDay();//返回周中的天,需要+1

d.getHour();

d.getMinutes();

d.getSeconds();

d.getMilliseconds();//毫秒

d.getTime();//返回 1970 年 1 月 1 日至今的毫秒数

国际化考虑,方法中间有UTC,返回世界时间

16、Math对象:

Math.PI;

Math.abs(-9);

Math.random()*10+1;//随机取1-11之间的数,取不到11

...

17、对象

function person(){}

调用1:person();

调用2:当做类来调用 ,每次通过person()创建的对象都是完全独立的对象

            var p=new person();

            p.name='lp';

            p.say=function(){};

            p.say();

还可以通过构造函数创建person对象:

function person(name){
this.name=name;

this.say=function(){;};

}

调用3:var p=new person('lp'); p.say();

对象也可以看做是键值对遍历;

instanceof判断一个对象是否是某个类型;

通过对象字母量来创建对象:

var p={

 name:'lp',

say:function(){;}

};

调用4:p.say();

18、prototype原型对象,保留属性,类似继承,只有函数对象才有这个属性,指向原型对象

function person(name,age){

this.name=name;this.age=age;

}

person.prototype.say=function(){

alert(this.name+","+this.age);
};

var p=new person('lp',20);

p.say();

19、事件太多,建议参考W3C在线教程,http://www.w3school.com.cn/js/js_htmldom_events.asp,常用有onclick【单击】,ondblclick【双击】,onchange【改变】,onload【登入】,onunload【登出】,onmouseover【鼠标移过】,onmouseout【鼠标移出】,onfocus【文本焦点】,onblur【失去焦点】,onsubmit【表单提交】,onselect【选中】。

20、window.setIntervar('method或code',毫秒数);

        window.clearInterval(intervalld);//停止计时器

        window.onload=function(){};//页面加载完毕执行

        window.onbeforeunload=function(){};//页面关闭之前执行

21、兼容代码:

function(evt){

var e=window.event||evt;

...}

22、阻止事件冒泡:

window.event.cancelBubble=true;//IE

evt.cancelBubble=true;//火狐

evt.stopPropagation();

23、window.history.back()/forward();     window.history.go(-1【后退】/1【前进】);

24、document.write()和document.writeln()应与页面加载一起使用,否则覆盖掉原页面,源码换行解析为空格

25、获取元素对象:document.getElementById('id')【ID】/getElementsByName('xx')【Name】/getElementsByTagName('p')【标签】;

        创建元素:document.createElement('xx')【标签】;

例1:

function(){
//创建a标签
var a=document.createElement('a');
//添加属性
a.href='https://lpzz.me';
a.title='作者域名';
a.target='_blank';
a.innerText='百度';
//添加到ID名div1的元素对象上
document.getElementById('div1').appendChild(a);
}

例2:

//向表格中插入数据
//获取表格对象
var tab=document.getElementById('tabName');
//向表格中插入一行
var currentRow=tab.insertRow(-1);
//向行中插入列
currentRow.inserCell(-1).innerHtml='xxxxx1';
currentRow.inserCell(-1).innerHtml='xxxxx2';

猜你喜欢

转载自blog.csdn.net/qq_37575994/article/details/84062072