javascript
javascript:
面试题:
几种变量类型是什么?
预解析?
变量与函数预解析 JavaScript解析过程分为两个阶段,先是编译阶段,然后执行阶段,在编译阶段会将function定义的函数提前,并且将var定义的变量声明提前,将它赋值为undefined。 <script type="text/javascript"> aa(); // 弹出 hello! (填空) alert(bb); // 弹出 undefined (填空) function aa(){ alert('hello!'); } var bb = 123; </script>
考试题:数组去重
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
var aList2 = [];
for(var i=0;i<aList.length;i++)
{
if(aList.indexOf(aList[i])==i)
{
aList2.push(aList[i]);
}
}
alert(aList2);
考试题:Javascript组成
1、ECMAscript javascript的语法(变量、函数、循环语句等语法)
2、DOM 文档对象模型 操作html和css的方法
3、BOM 浏览器对象模型 操作浏览器的一些方法
var a = 11;
var b = 22;
alert(a+b); #弹出33 ,注意从input中获取的都是字符串。
var a = 11;
var b = ‘22’;
alert(a+b); #弹出11‘22’
var a = 5.6
alert(parseInt(a))#弹出5,,会去掉小数。所以要转换我浮点数
var a = 5abc
alert(parseInt(a)) #弹出5,,会去掉字符串。
js里面的bug
alert(0.1+0.2) #弹出0.30000000000000004
解决办法:
var a = 0.1;
var b = 0.2;
alert((parseFloat(a)*100+parseFloat(b)*100)/100);
字符串切割
var a ='ab-c';
var aRr = a.split('-');#得到【‘ab’,'c'】
var aRr2 = a.split('');#得到【‘a','b','c'】
字符串反转:
var sTr = '123ffdvhh';
var sTr2 = sTr.split('').reverse().join('');
alert(sTr2);
在定义函数时,如果使用
var myalert = function(){}这种方式的话,函数的使用 myalert(),不能调在前面,会报错。
javascript主要嵌入在html中,三种嵌入方式是?
javascript有几种变量类型?
JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var' var a = 123; var b = 'asd'; //同时定义多个变量可以用","隔开,公用一个‘var’关键字 var c = 45,d='qwe',f='68';
var b; //就是undefined类型。
变量类型:6种 5种基本数据类型: number、string、boolean、undefined、null 1种复合类型: object
变量、函数、属性、函数参数命名规范 1、区分大小写 2、第一个字符必须是字母、下划线(_)或者美元符号($) 3、其他字符可以是字母、下划线、美元符或数字
javascript主要是用来操作标签的,如何获取?如何操作?
document是对象,由方法和属性组成。
window。onload=function(){} ; //等整个页面加载完执行。
获取元素的第一种方法:获取单个元素
document.getElementById() ; //get 是获取 element是元素 by通过id,括号里面写id名 简写操作var oA = document.getElementById('link1');那么以后就用oA
读属性 alert(oA.id); 弹出框
改属性 oAA.title= '111'
//style属性中的样式属性,没有‘-’的,写法相同
//style属性中的样式属性,带有‘-’的,写成驼峰式。
style有color颜色属性,有fontSize字体大小属性。
注意:在操作class时要写成className,
获取元素方法一 可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如: <script type="text/javascript"> var oDiv = document.getElementById('div1'); </script> .... <div id="div1">这是一个div元素</div> 上面的语句,如果把javascript写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript去页面上获取元素div1的时候,元素div1还没有加载,解决方法有两种: 第一种方法:将javascript放到页面最下边 .... <div id="div1">这是一个div元素</div> .... <script type="text/javascript"> var oDiv = document.getElementById('div1'); </script> </body> 第二种方法:将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行,就不会出错了。 <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); } </script> .... <div id="div1">这是一个div元素</div>
获取元素的第二种方法:获取全部适合元素。
document.getElementsByTagName('li') ; //获取所有li 的元素。
document.getElementsByTagName('li').style.backgroundColor = 'red' #这种是错误的,因为数组集没有这个函数只能选单个才能操作。
javascript操作元素属性
获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。 操作属性的方法 1、“.” 操作属性 2、“[ ]”操作变量或操作属性 属性写法 1、html的属性和js里面属性写法一样 2、“class” 属性写成 “className” 3、“style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize” 通过“.”操作属性: <script type="text/javascript"> window.onload = function(){ var oInput = document.getElementById('input1'); var oA = document.getElementById('link1'); // 读取属性值 var val = oInput.value; var typ = oInput.type; var nam = oInput.name; var links = oA.href; // 写(设置)属性 oA.style.color = 'red'; oA.style.fontSize = val; } </script> ...... <input type="text" name="setsize" id="input1" value="20px"> <a href="http://www.itcast.cn" id="link1">传智播客</a> 通过“[ ]”操作属性: <script type="text/javascript"> window.onload = function(){ var oInput1 = document.getElementById('input1'); var oInput2 = document.getElementById('input2'); var oA = document.getElementById('link1'); // 读取属性 var val1 = oInput1.value; var val2 = oInput2.value; // 写(设置)属性 // oA.style.val1 = val2; 没反应 oA.style[val1] = val2; } </script> ......
innerHTML
innerHTML可以读取或者写入标签包裹的内容
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//读取
var txt = oDiv.innerHTML;
alert(txt);
//写入
oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
}
</script>
......
<div id="div1">这是一个div元素</div>
在里面调用函数不能写括号:
window.onload=function(){ var oDiv =document.getElementById('div1') var sty = 'background'; oDiv.title = '这是一个标签'; oDiv.style.color = 'red';//字体颜色 oDiv.style.fontSize = '30px' oDiv.style[sty] ='gold'; //操作背景色 }
条件语句
条件语句 通过条件来控制程序的走向,就需要用到条件语句。 运算符 1、算术运算符: +(加)、 -(减)、 *(乘)、 /(除)、 %(求余) 2、赋值运算符:=、 +=、 -=、 *=、 /=、 %= 3、条件运算符:==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
==两边的类型最好一致,否则就会转换类型;
===使用时两边的类型要一致,否则就不判断,不会转换类型;
var a = 6; if(a==1) { alert('语文'); } else if(a==2) { alert('数学'); }
第二种:
var a = 6;
switch (a){
case 1:
alert('语文');
break;
case 2:
alert('数学');
break;
定时器:
定时器在javascript中的作用 1、制作动画 2、异步操作 3、函数缓冲与节流 定时器类型及语法 /* 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器 */ var time1 = setTimeout(myalert,2000); var time2 = setInterval(myalert,2000); /* clearTimeout(time1); clearInterval(time2); */ function myalert(){ alert('ok!'); } 定时器制作时钟 <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); function timego(){ var now = new Date(); var year = now.getFullYear(); var month = now.getMonth()+1; //月从0到11 var date = now.getDate(); var week = now.getDay(); //西方星期天是开始的第一天,是0,返回一个数字。 var hour = now.getHours(); //时 var minute = now.getMinutes(); //分 var second = now.getSeconds(); //秒 var str = '当前时间是:'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second); oDiv.innerHTML = str; } timego(); setInterval(timego,1000); } function toweek(n){ if(n==0) { return '星期日'; } else if(n==1) { return '星期一'; } else if(n==2) { return '星期二'; } else if(n==3) { return '星期三'; } else if(n==4) { return '星期四'; } else if(n==5) { return '星期五'; } else { return '星期六'; } } function todou(n){ if(n<10) { return '0'+n; } else { return n; } } </script> ...... <div id="div1"></div> 定时器制作倒计时 <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); function timeleft(){ var now = new Date(); #这里要取服务器的时间,我们可以用ajax来取。 var future = new Date(2016,8,12,24,0,0); #8代表9月,从0开始。 var lefts = parseInt((future-now)/1000); #时间戳单位是毫秒,我们可以按秒来算。 var day = parseInt(lefts/86400); var hour = parseInt(lefts%86400/3600); var min = parseInt(lefts%86400%3600/60); var sec = lefts%60; str = '距离2016年9月12日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒'; oDiv.innerHTML = str;
if(left<=0)
{ window.location.href="http://www.itcast.com" ;#意思是到时间了自动下线,后面可以把这句移到函数上面就可以了。
}
} timeleft(); setInterval(timeleft,1000); } </script> ...... <div id="div1"></div>
变量作用域
变量作用域指的是变量的作用范围,javascript中的变量分为全局变量和局部变量。 1、全局变量:在函数之外定义的变量,为整个页面公用,函数内部外部都可以访问。都可以更改。 2、局部变量:在函数内部定义的变量,只能在定义该变量的函数内部访问,外部无法访问。 <script type="text/javascript"> //全局变量 var a = 12; function myalert() { //局部变量 var b = 23; alert(a); alert(b);
c=11; //有时候定义时没带var,就会变成全局变量。 } myalert(); //弹出12和23 alert(a); //弹出12 alert(b); //出错 </script>
封闭函数:
封闭函数是特殊的匿名函数(function(){ })();内部定义变量不会污染全局变量。可以少定义一些函数名,但是如果内部使用了外部的变量,是会改变外部变量的,所有内部用什么定义什么。在添加功能的时候,用这个很保险。否则容易出事故。
封闭函数是javascript中匿名函数的另外一种写法,创建一个一开始就执行而不用命名的函数。 一般定义的函数和执行函数: function changecolor(){ var oDiv = document.getElementById('div1'); oDiv.style.color = 'red'; } changecolor(); 封闭函数: (function(){ var oDiv = document.getElementById('div1'); oDiv.style.color = 'red'; })(); 还可以在函数定义前加上“~”和“!”等符号来定义匿名函数 !function(){ var oDiv = document.getElementById('div1'); oDiv.style.color = 'red'; }()
set_root封闭函数
(function(){ var calc =function(){ var docElement = document.documentElement; //指页面上的html
//下面也可以用一个三元运算符表示:var clientWidthValue=docElement.clientWidth >750 ?750: docElement.clientWidth;
-------------------
var clientWidthValue; //客户端的宽度
if(docElement.clientWidth >750){
clientWidthValue=750;
}
else
{
clientWidthValue = docElement.clientWidth;
}
-------------------------------
docElement.style.fontSize =20*(clientWidthValue/375)+'px';
}
}
calc();
window.addEventListener('resize',calc); //监听当窗口大小改变时,调用函数
})();
闭包
什么是闭包 函数嵌套函数,内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾回收机制收回 function aaa(a){ var b = 5; function bbb(){ a++; b++; alert(a); alert(b); } return bbb; } var ccc = aaa(2); ccc(); ccc(); 改写成封闭函数的形式: var ccc = (function(a){ var b = 5; function bbb(){ a++; b++; alert(a); alert(b); } return bbb; })(2); ccc(); ccc(); 用处 1、将一个变量长期驻扎在内存当中,可用于循环中存索引值 <script type="text/javascript"> window.onload = function(){ var aLi = document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++) { (function(i){ aLi[i].onclick = function(){ alert(i); } })(i); } } </script> ...... <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul> 2、私有变量计数器,外部无法访问,避免全局变量的污染 <script type="text/javascript"> var count = (function(){ var a = 0; function add(){ a++; return a; } return add; })() count(); count(); var nowcount = count(); alert(nowcount); </script>
内置对象
1、document
document.referrer //获取上一个跳转页面的地址(需要服务器环境)
2、location
window.location.href //获取或者重定url地址
window.location.search //获取地址参数部分 ,url中的?后面的参数。
window.location.hash //获取页面锚点或者叫哈希值,url中#号后面的锚点。
3、Math
Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整
1/怎么获取10--20之间的随机数呢? var a =10; var b=20; var num = Math.random()*(b-a)+a; alert(a);
2/获取多个10-20之间的随机数,取整数?
var a =10;
var b=20;
var arr=[];
for( i=0,i<5,i++){
var num = Math.floor(Math.random()*(b-a)+a);
arr.push(num);}
alert(a);
javascript

浙公网安备 33010602011771号