JavaScript第二课基础知识

草帽hhh

于 2017-10-11 14:59:52 发布

阅读量175

点赞数

一、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.οnlοad=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>

草帽hhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript第二课基础知识

一、ECMAScripts:翻译解释器DOM : Document Object Model 操作HTML documentBOM: Browser Object Model 操作浏览器 Window兼容性问题ECMA 几乎没有兼容性问题DOM 有一些操作不兼容BOM 无兼容问题(完全不兼容)二、变量的类型typeof 查看变量类型aler
复制链接

扫一扫