JavaScript第二课基础知识

来源：互联网发布：mac怎么删除硬盘文件编辑：程序博客网时间：2024/06/05 02:39

一、ECMAScripts:翻译解释器

DOM : Document Object Model 操作HTML document

BOM: Browser Object Model 操作浏览器 Window

兼容性问题

ECMA 几乎没有兼容性问题

DOM 有一些操作不兼容

BOM 无兼容问题(完全不兼容)

二、变量的类型

typeof 查看变量类型

alert(typeof 1);

number(数字) string(字符串) Boolean(布尔值) function(函数) object(对象) undefined(未定义)

undefined 出现的两种情况:1、未定义 2、未赋值

一个变量最好只存放一种类型的数据

类型转换

parseInt 可以把字符串转化成数字，从左往右查，遇到非数字即停止注意parseInt()中变量不加''

NaN 非数字 not a number

isNaN函数判断是否为NaN

<head>    <meta charset="UTF-8">    <title>Title</title>    <script>        window.onload=function()        {            var oTxt1=document.getElementById('txt1');            var oTxt2=document.getElementById('txt2');            var oBtn=document.getElementById('btn1');            oBtn.onclick=function()            {                var n1=parseInt(oTxt1.value);                var n2=parseInt(oTxt2.value);                if(isNaN(n1))                {                    alert('您输入的第一个数字有误');                }                else if(isNaN(n2))                {                    alert('您输入的第二个数字有误')                }                else                {                    alert(n1+n2);                }            }        }    </script></head><body><input id="txt1" type="text"/><input id="txt2" type="text"/><input id="btn1" type="button" value="求和"></body>

parseFloat()转换成小数一般可以使用parseFloat

隐式类型转换 ==先转换类型在比较 ===不转换类型直接比

var a=5;

var b='5';

alert(a==b) true 先转换类型在比较

alert(a===b) false 不转换类型直接比

+ 在JavaScript中的功能 1、字符串连接 2、数字相加

- 在JavaScript中只有减法的一种用途

三、变量的作用域

局部变量：只能在定义它的函数中使用

全局变量：在任何地方都能用，定义在所有函数外

闭包：子函数可以使用父函数中的局部变量

四、命名规范

可读性

规范性（匈牙利命名法）：类型前缀首字母大写

类型前缀类型实例

数组 a Array aItems

布尔值 b Bollean bIsComplete

浮点数 f Float fPrice

函数 fn Function fnHandler

整数 i Integer iItemCount

对象 o object oDiv1

正则表达式 re RegExp 若EmailCheck

字符串 s String sUserName

变体变量 v Variant vAnything

算数

取模求余数 %

实例:隔行换色

<script>        window.onload=function()        {            var aLi=document.getElementsByTagName('li');            for(var i=0;i<aLi.length;i++)            {                if(i%2==0)                {                    aLi[i].style.background='#ccc';                }                else                {                    aLi[i].style.background='';                }            }        };    </script></head><body><ul>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li></ul></body>

秒转时间

<script>var s=123;alert(parseInt(s/60)+'分'+s%60+'秒');</script>

赋值

i=i+1 和i+=1 一样

！= 和！===

与&& 并且

或|| 或者

！否

（）改变运算优先级

程序流程控制

判断：if switch

if(条件1)

{

语句一

}

else if（条件二）

{

语句二

}

else

(语句三)

switch（变量）性别

{

case 值1：男：

语句一；欢迎先生；

break；

case值2：女：

语句二；欢迎女士；

break；

default：欢迎

语句n

}

<script>    window.onload=function()    {        var name='abc';        var sex='男';        switch(sex)        {            case'男':                alert(name+'先生,您好');                break;            case'女':                alert(name+'女士,您好');                break;            default:                alert(name+'您好');        }    };</script>

三元运算符 ?:

条件?语句1:语句2

<script>    window.onload=function()    {        var a=21;        a%2==0?alert('双数'):alert('单数')    };</script>

普通判断

{    var a=21;    if(a%2==0)    {        alert('双数');    }    else    {    alert('单数');    }};</script>

循环

while for

跳出

break 打破、中断

<script>    window.onload=function()    {        for(var i=0;i<5;i++)        {            if(i==2)            {                break;            }            alert(i);        }    };</script>

中断所有循环

continue继续

<script>    window.onload=function()    {        for(var i=0;i<5;i++)        {            if(i==2)            {                continue;            }            alert(i);        }    };</script>

中断本次循环

什么是真什么是假

真：true 非零数字非空字符串非空对象

假: false 数字0 空字符串空对象 undefined

Json 下标是字符串

<script>    var json={a:12, b: 5, c:'abd'};    alert(json.b);</script>

数组下标是数字

区别数组有个属性length ,json没有length

数组的循环 for 0 - length

<script>    var json={a:12, b: 5, c:'abd'};    var arr=[12,5,7];    for(var i=0;i<arr.length;i++)    {        alert('第'+i+'个东西:'+arr[i]);    }</script>

或者用 for in

<script>    var json={a:12, b: 5, c:'abd'};    var arr=[12,5,7];    for(var i in arr )    {        alert('第'+i+'个东西:'+arr[i]);    }</script>

json的循环

<script>    var json={a:12, b: 5, c:'abd'};    var arr=[12,5,7];    for(var i in json )    {        alert('第'+i+'个东西:'+json[i]);    }</script>

函数的返回值

<script>    function show(a,b)    {        return a+b;    }    var a=show(3,5);    alert(a);</script>

函数传参

argument 可变参,相当于一个数组,存着传给函数的所有参数

<script>    function sum()    {        var result=0;        for(var i=0;i<arguments.length;i++)        {            result+=arguments[i];        }        return result;    }    var a=sum(3,7,3343,34,553432,21,);    alert(a);</script>

css函数

css(oDiv, ' width') 给两个参数是获取样式

css(oDiv,' width','200px') 给是三个参数是设置样式

 <script>        function css()        {            if(arguments.length==2)            {                return arguments[0].style[arguments[1]]            }            else            {                arguments[0].style[arguments[1]]=arguments[2];            }        }        window.onload=function ()        {            var oDiv=document.getElementById('div1');            css(oDiv, 'background', 'green');        }    </script></head><body><div id="div1" style="width:200px; height:300px; background:red;"></div></body>

或者

function css(obj,name,value){    if(arguments.length==2)    {        return obj.style[name]    }    else    {        obj.style[name]=value;    }}

获取行间样式

   <script>        window.onload=function ()        {            var oDiv=document.getElementById('div1');            alert(oDiv.style.width);        }    </script></head><body><div id="div1" style="width:200px; height:300px; background:red;"></div>

获取非行间样式

JavaScript第二定律好东西必然不兼容

 <style>        #div1 {width:200px; height:300px; background:red;}    </style>    <script>        window.onload=function ()        {            var oDiv=document.getElementById('div1');            alert('oDiv.currentStyle.width');        }    </script></head><body>

currentStyle只在IE浏览器下兼容

chrome ff 需要的是 getComputedStyle 获取计算后的样式

getComputedStyle 有两个参数,第一个参数是需要获取的参数,第二个参数随便放

<script>    window.onload=function ()    {        var oDiv=document.getElementById('div1');        alert(getComputedStyle(oDiv,null).width);    }</script>

兼容

<script>    window.onload=function ()    {        var oDiv=document.getElementById('div1');        if(oDiv.currentStyle)        {            alert(oDiv.currentStyle.width);        }        else        {        }        alert(getComputedStyle(oDiv,null).width);    }</script>

定义一个函数

<script>    function getStyle(obj,name)    {        if(obj.currentStyle)        {            return obj.currentStyle[name];        }        else        {            return getComputedStyle(obj,false)[name];        }    }    window.onload=function ()    {        var oDiv=document.getElementById('div1');        alert(getStyle(oDiv,'width'));    }</script>

复合样式:backgrouond border

单一样式:width height position

window.onload=function (){    var oDiv=document.getElementById('div1');    alert(getStyle(oDiv,'backgroundColor'));}

数组

定义 var arr=[1,2,3,4,5]

var arr=newArray[1,2,3,4,5] 没有区别,第一个比较常用

数组的属性

length

既可以获取,又可以设置

<script>   var arr=[1,2,3,4]   arr.length=3    alert(arr.length)</script>

数组的添加 push 尾部添加

<script>   var arr=[1,2,3,4]   arr.push(5)    alert(arr)</script>

数组的删除 pop 尾部删除

<script>   var arr=[1,2,3,4]   arr.pop    alert(arr)</script>

头部删除 shift

<script>   var arr=[1,2,3,4]   arr.shift()    alert(arr)</script>

头部添加 unshift

<script>   var arr=[1,2,3,4]   arr.unshift(0)    alert(arr)</script>

splice 从中间添加删除操作

splice(起点,长度) 需指定两个参数,起点和长度

<script>   var arr=[1,2,3,4,5,6]   arr.splice(2,3);    alert(arr);弹出126</script>

插入

<script>   var arr=[1,2,3,4,5,6]   arr.splice(2,0,'a','b','c');//插入splice(起点,长度,元素..);    alert(arr);</script>

替换

<script>   var arr=[1,2,3,4,5,6]   arr.splice(2,2,'a','b');//替换splice(起点,长度,元素..);    alert(arr);</script>

数组的连接

join(分隔符)

<script>   var arr=[1,2,3,4,5,6]    alert(arr.join('-'));</script>

concat(数组2)

sort排序

<script>   var arr=[1,9,3,4,5,6]    alert(arr.sort());</script>

比较函数

<script>   var arr=[12,8,99,19,112];   arr.sort(function(n1,n2)   {       if(n1<n2)           {               return -4;           }       else if(n1>n2)       {           return 1;       }       else           {               return 0           }   })    alert(arr);</script>

或者

<script>   var arr=[12,8,99,19,112];   arr.sort(function(n1,n2)   {       return n1-n2;   });    alert(arr);</script>

阅读全文

0 0