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>
View Code

 获取元素的第二种方法:获取全部适合元素。

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

posted @ 2018-08-17 18:51  不变的真理  阅读(146)  评论(0)    收藏  举报