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运算符(用来判断一个变量的类型)
用法:返回值
|
1
2
|
var
a=12;
alert(
typeof
a);
|
6种常见类型
number数字类型、string字符串类型、boolean布尔类型、undefined未定义、object对象类型、function函数类型.
number数字类型
|
1
2
|
var
a=12;
//定义了一个变量a,a里面存放了一个12
alert(
typeof
a);
//返回unmber数字类型
|
string字符串类型
|
1
2
|
a=
"sadwgwega"
;
alert(
typeof
a);
//返回string字符串类型
|
boolean布尔类型
|
1
2
|
a=
true
;
alert(
typeof
a);
//返回boolean布尔类型,只有两种情况一个true真一个false假
|
undefined未定义
|
1
2
3
|
var
b;
//定义了b为变量,但没有给它赋值变量值,b是空的,没存放东西
alert(
typeof
b);
//返回undefined未定义的类型
//undefined在两种情况下出现,1真的没定义.2虽然定义了变量当没有给它赋值变量值比如现在的b.
|
object对象类型
|
1
2
|
a=document;
alert(
typeof
a);
//返回object对象类型
|
function函数类型.
|
1
2
3
4
5
|
a=
function
()
{
alert(
"abca"
);
};
alert(
typeof
a);
//返回function函数类型
|
建议:一个变量应该只存放一种类型的数据
变量类型(2)
数据类型转换
例子：计算两个文本框输入数字的和
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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( ) 用来把字符串转换成数字
|
1
2
|
var
a=
"12"
;
alert(parseInt(a)+1);
//将字符串12转换成数字12后+1，弹出结果为13
|
parseInt( ) 的特性
parseInt( ) 是从左到右去扫描字符串,一旦发现一个不是数字的东西,就会跳出去,比如下例中的12px,因为px不是数字,它就会跳出去,只读取前面找到的12,换句话说,它可以把字符串里面的数字提取出来.
|
1
2
|
var
a=
"12px"
;
alert(parseInt(a));
//弹出结果为12
|
由于parseInt( )的工作原理是从左到右,一旦看到非数字的东西就自动跳出,所以下例中px后面的34它也是不会读取的.只会读取前面第一个数字,12
|
1
2
|
var
a=
"12px34"
;
alert(parseInt(a));
//弹出结果为12
|
当字符串里没有数字全部是字符时例如下例
|
1
2
|
var
a=
"abc"
;
alert(parseInt(a));
//弹出结果为NaN
|
NaN,是Not a Number 的简写,意思为:非数字.
如何判断parseInt()出来的结果是否为NaN非数字
不能使用==来进行判断如下例:
|
1
2
3
4
|
var
a=parseInt(
"abc"
);
var
a=parseInt(
"bef"
);
alert(a==b);
//判断a和b是否相等,弹出结果为false假,因为在JS中NaN和NaN是不相等的,
|
可以用isNaN()函数来判断,它的作用就是判断一个东西是否为NaN,如下例:
|
1
2
|
var
a=parseInt(
"abc"
);
alert(isNaN(a));
//弹出结果为true真,是一个NaN
|
扩展:在计算两个文本框输入数字的和的例子中,如果在文本框内输入12+abc的话,弹出的结果将为NaN,相当于,让12和NaN去相加,实际上,任何数和NaN相加,结果都将是NaN.
例子,文本框求和程序中加入判断输入是否为数字的功能
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<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( )只能转换整数
|
1
2
|
var
a=
"3.5"
;
alert(parseInt(a));
//弹出结果为3因为parseInt()只能转换整数,所以它会忽略整数后面的.5
|
parseFloat( )可以转换小数
|
1
2
|
var
a=
"3.5"
;
alert(parseFloat(a));
//弹出结果为3.5
|
parseInt()、 parseFloat() 两者作用是一样的,没有区别,如果在要转换一个数字是,不知道它是整数或者小数可以直接使用parseFloat(),因为它即可转换整数也可以转换小数.
隐士类型转换
==、===和减法
|
1
2
3
4
|
var
a=5;
//数字5
var
b=
"5"
;
// 字符串5
alert(a==b);
//比较后弹出true真,因为它们先被系统默认转换为相同的类型然后再来比较所以得出true真的结果.双等号是先转换类型,然后比较
alert(a===b);
//弹出结果false假,三等号,不转换类型,直接比较,a是数字型b是字符串型两者不相等,所以结果为false假
|
+号在JS里的两种功能,1字符串连接,2数字相加,只使用一个加号的时候系统是不会进行隐式转换的.-号在JS里只有一个功能,就是数字相减,所以当使用减号时会进行隐式转换.
|
1
2
3
|
var
a=
"12"
;
//字符串12
var
b=
"5"
;
//字符串5
alert(a+b);
//弹出结果125，字符串与字符串相连
|
|
1
2
3
|
var
a=
"12"
;
//字符串12
var
b=
"5"
;
//字符串5
alert(a-b);
//弹出结果7，因为系统默认先把a和b都转换成了数字类型然后才进行相减,所以-号也是一个隐式类型转换
|
变量作用域（作用范围）:局部,全局
|
1
2
3
4
5
6
7
8
9
10
11
|
出错无结果弹出
function
aaa ()
{
var
a=12;
//局部变量:只能在定义它的函数里面使用
};
function
bbb ()
{
alert(a);
};
aaa ();
bbb ();
|
|
1
2
3
4
5
6
7
8
9
10
11
12
|
弹出结果12
var
a;
//在所有函数外面声明的,这就是全局变量:在所有地方都可以用
function
aaa()
{
a=12;
};
function
bbb ()
{
alert(a);
};
aaa ();
bbb ();
|
什么是闭包
|
1
2
3
4
5
6
7
8
9
10
11
12
|
子函数可以使用父函数中的局部变量就叫闭包
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 |