javascript-智能社-JS基础A笔记

Posted on 2013-09-10 17:24 素衣79 阅读(591) 评论(0) 收藏举报

JavaScript基础A

JavaScript组成

ECMA : 全称ECMAScript,解释器、计算机语言的翻译

DOM：全称Document Object Model,赋予了JS操作HTML的能力,例如获取一个元素的时候就是用,document来操作的.

BOM：全称Browser Object Model,浏览器对象模型,操作浏览器本身,在JS里面也有一个专门的对象,就是windows.比如弹出窗口,复制到剪贴板这些,浏览器操作的事件叫做BOM操作.

各组成部分的兼容性，兼容性问题由来

ECMA 几乎没有兼容性问题

DOM 有一些操作不兼容

BOM 没有兼容问题（完全不兼容）一般不用.

变量类型(1)

可以把变量想象成一个用来存东西的一个盒子.

JS中,变量本身没有类型,变量的类型取决于它里面存的东西,如果存放的是数字,它就是数字变量,如果存放的是字符串,它就是字符串变量

类型：typeof运算符(用来判断一个变量的类型)

用法:返回值

var a=12;  
alert(typeof a);

6种常见类型

number数字类型、string字符串类型、boolean布尔类型、undefined未定义、object对象类型、function函数类型.

number数字类型

var a=12;  //定义了一个变量a,a里面存放了一个12 
alert(typeof a);  //返回unmber数字类型

string字符串类型

a="sadwgwega"; 
alert(typeof a);  //返回string字符串类型

boolean布尔类型

a=true; 
alert(typeof a);  //返回boolean布尔类型,只有两种情况一个true真一个false假

undefined未定义

var b;  //定义了b为变量,但没有给它赋值变量值,b是空的,没存放东西 
alert(typeof b);  //返回undefined未定义的类型 
//undefined在两种情况下出现,1真的没定义.2虽然定义了变量当没有给它赋值变量值比如现在的b.

object对象类型

a=document; 
alert(typeof a);  //返回object对象类型

function函数类型.

a=function () 
    { 
        alert("abca"); 
    }; 
alert(typeof a);  //返回function函数类型

建议:一个变量应该只存放一种类型的数据

变量类型(2)

数据类型转换

例子：计算两个文本框输入数字的和

<script>  
    window.onload=function ()  
    {  
        var oTxt1=document.getElementById('txt1');  //通过id提取txt1文本框  
        var oTxt2=document.getElementById('txt2');  //通过id提取txt1文本框  
        var oBtn=document.getElementById('btn1');  //通过id提取btn1按钮  
    
        oBtn.onclick=function ()  //为按钮添加鼠标点击事件  
        {  
            // alert(oTxt1.value+oTxt2.value); //这两个文本框输入的内容就算是数字,JS也会默认把它认为是字符串,所以最终弹出结果将是两个字符串相连接,例如输入12和56结果为1256  
            alert(parseInt(oTxt1.value)+parseInt(oTxt2.value));  //解决方法,把文本框1和2输入的内容用parseInt( )转换为数字.这样弹出结果将为两个文本框内输入数字相加的总和.  
        };  
    };  
</script>  
    
<body>  
    <input id="txt1" type="text" />  
    <input id="txt2" type="text" />  
    <input id="btn1" type="button" value="求和" />  
</body>

显式类型转换(强制类型转换)

parseInt( ) 用来把字符串转换成数字

var a="12"; 
alert(parseInt(a)+1);  //将字符串12转换成数字12后+1，弹出结果为13

parseInt( ) 的特性

parseInt( ) 是从左到右去扫描字符串,一旦发现一个不是数字的东西,就会跳出去,比如下例中的12px,因为px不是数字,它就会跳出去,只读取前面找到的12,换句话说,它可以把字符串里面的数字提取出来.

var a="12px"; 
alert(parseInt(a));  //弹出结果为12

由于parseInt( )的工作原理是从左到右,一旦看到非数字的东西就自动跳出,所以下例中px后面的34它也是不会读取的.只会读取前面第一个数字,12

var a="12px34"; 
alert(parseInt(a));  //弹出结果为12

当字符串里没有数字全部是字符时例如下例

var a="abc"; 
alert(parseInt(a));  //弹出结果为NaN

NaN,是Not a Number 的简写,意思为:非数字.

如何判断parseInt()出来的结果是否为NaN非数字

不能使用==来进行判断如下例:

var a=parseInt("abc"); 
var a=parseInt("bef"); 
  
alert(a==b);  //判断a和b是否相等,弹出结果为false假,因为在JS中NaN和NaN是不相等的,

可以用isNaN()函数来判断,它的作用就是判断一个东西是否为NaN,如下例:

var a=parseInt("abc"); 
alert(isNaN(a)); //弹出结果为true真,是一个NaN

扩展:在计算两个文本框输入数字的和的例子中,如果在文本框内输入12+abc的话,弹出的结果将为NaN,相当于,让12和NaN去相加,实际上,任何数和NaN相加,结果都将是NaN.

例子,文本框求和程序中加入判断输入是否为数字的功能

<script>  
    window.onload=function ()  
    {  
        var oTxt1=document.getElementById('txt1');  //通过id提取txt1文本框  
        var oTxt2=document.getElementById('txt2');  //通过id提取txt1文本框  
        var oBtn=document.getElementById('btn1');  //通过id提取btn1按钮  
    
        oBtn.onclick=function ()  //为按钮添加鼠标点击事件  
        {  
            var n1=parseInt(oTxt1.value);  //检测第一个输入框输入内容  
            var n2=parseInt(oTxt2.value);  //检测第二个输入框输入内容  
                
            //用if判断,用户输入是否为数字,如果是数字,则弹出两个输入框内数字的和  
            if(isNaN(n1))  //判断n1如果是一个NaN的话  
            {  
                alert('你输入的第一个数字有误');  
            }  
            else if(isNaN(n2)) //判断n2如果是一个NaN的话  
            {  
                alert('你输入的第二个数字有误');  
            }  
            else{  //如果n1和n2都正确  
                alert(n1+n2);  //弹出n1+n2的和  
            }  
        };  
    };  
</script>  
    
<body>  
    <input id="txt1" type="text" />  
    <input id="txt2" type="text" />  
    <input id="btn1" type="button" value="求和" />  
</body>

parseInt( )只能转换整数

var  a="3.5"; 
alert(parseInt(a)); //弹出结果为3因为parseInt()只能转换整数,所以它会忽略整数后面的.5

parseFloat( )可以转换小数

var  a="3.5"; 
alert(parseFloat(a));  //弹出结果为3.5

parseInt()、 parseFloat() 两者作用是一样的,没有区别,如果在要转换一个数字是,不知道它是整数或者小数可以直接使用parseFloat(),因为它即可转换整数也可以转换小数.

隐士类型转换

==、===和减法

var a=5;      //数字5 
var b="5";    // 字符串5  
alert(a==b);  //比较后弹出true真,因为它们先被系统默认转换为相同的类型然后再来比较所以得出true真的结果.双等号是先转换类型,然后比较 
alert(a===b);  //弹出结果false假,三等号,不转换类型,直接比较,a是数字型b是字符串型两者不相等,所以结果为false假

+号在JS里的两种功能,1字符串连接,2数字相加,只使用一个加号的时候系统是不会进行隐式转换的.-号在JS里只有一个功能,就是数字相减,所以当使用减号时会进行隐式转换.

var a="12";  //字符串12 
var b="5";   //字符串5 
alert(a+b);  //弹出结果125，字符串与字符串相连

var a="12";  //字符串12 
var b="5";   //字符串5 
alert(a-b);  //弹出结果7，因为系统默认先把a和b都转换成了数字类型然后才进行相减,所以-号也是一个隐式类型转换

变量作用域（作用范围）:局部,全局

出错无结果弹出 
function aaa () 
    { 
        var a=12; //局部变量:只能在定义它的函数里面使用 
    }; 
    function bbb () 
    { 
        alert(a); 
    }; 
    aaa (); 
    bbb ();

弹出结果12 
var a; //在所有函数外面声明的,这就是全局变量:在所有地方都可以用 
    function aaa() 
    { 
        a=12; 
    }; 
    function bbb () 
    { 
        alert(a); 
    }; 
    aaa (); 
    bbb ();

什么是闭包

子函数可以使用父函数中的局部变量就叫闭包 
function aaa ()  //父函数 
{ 
    var a=12; //局部变量:只能在定义它的函数里面使用 
    function bbb ()  //子函数 
    { 
        alert(a); 
    }; 
    bbb (); 
}; 
 
aaa ();

命名规范

类型前缀 , 首字母大写

例如:oTxt存的是一个对象类型, aDiv 存的是一个数组类型,让别人一看就知道里面存的是什么类型.

类型前缀在给变量取名时使用,函数取名时,只要使用首字母大写就可以了.

类型	前缀	类型	实例
数组	a	Array	aItems
布尔值	b	Boolean	bIsComplete
浮点数	f	Float	fPrice
函数	fn	Function	fnHandler
整数	i	Integer	iItemCount
对象	o	Object	oDiv1
正则表达式	re	RegExp	reEmailCheck
字符串	s	String	sUserName
变体变量	v	Variant	vAnything

刷新页面返回顶部

素衣79

公告

javascript-智能社-JS基础A笔记