一、JavaScript的组成
ECMAScript解释器、翻译器。一方面把我们输入的代码语言翻译给计算机,另一方面把计算器输出的语言翻译给我们看。
DOM:Document Object Model,DOM赋予了JS操作HTML文档的能力,像获取元素,改变背景,创建元素,删除元素等等,都需要用到DOM操作
BOM:Browser Object Model,浏览器对象模型,可以操作浏览器本身,和浏览器打交道的操作
各组成部分的兼容性,兼容性的由来
ECMA:几乎没有兼容性问题
DOM:有一些操作不兼容
BOM:没有兼容问题(完全不兼容)
二、变量类型
typeof运算符
常见的类型:number,string,boolean,undefined,object,function
一个变量应该组存放一种类型的数据
(1)变量
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>变量</title>
<script>
var a=12;
//alert( typeof a);//输出number
a="asdg"
//alert(typeof a);//string
a=true;
//alert(typeof a);//boolean
a=function() {
alert(‘adasdg‘);
};
//alert(typeof a);
a=document;
//alert(typeof a);
var b;
alert(typeof b);//undefined 1、真的没定义2、虽然定义了,但是没给东西
</script>
</head>
<body>
</body>
</html>
(2)parseInt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parseInt</title>
<script>
var a=‘12‘;
//alert(parseInt(a)+1);//parseInt的作用就是把字符串转成数字
var a=‘12px34‘;
//alert(parseInt(a));//parseInt是从左到右识别数字的,遇到不是数字的元素立马跳出,因此只显示12
var a=‘abc‘;
alert(parseInt(a));//parseInt从左到右开始识别发现都不是数字,则跳出NaN-Not a Number 非数字
</script>
</head>
<body>
</body>
</html>
(3)NaN
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NaN</title>
<script>
var a=parseInt(‘abc‘);
var b=parseInt(‘def‘);
alert(a==b);//NaN与NaN是不相等的
</script>
</head>
<body>
</body>
</html>
(4)求和
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
</html>
(5)parseFloat 字符串转化成小数
三、数据类型转换
(1)显示类型转换(强制类型转换)
parseInt()、parseFloat()
NaN的意义和检测
(2)隐式类型转换
==、===
减法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隐式类型转换</title>
<script>
var a=5;
var b=‘5‘;
//alert(a==b);//true 先转换类型然后比较
//alert(a===b);//false 不转换类型,直接比较
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隐式类型转换2</title>
<script>
var a=‘12‘;
var b=‘5‘;
alert(a+b);//首先是加号的功能1、做字符串的连接2、数字相加,因此计算机会直接选择字符串连接
alert(a-b);//减号的用途仅仅是数字相减
</script>
</head>
<body>
</body>
</html>
四、变量作用域和闭包
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>局部变量和全局变量</title>
<script>
var a;//全局变量:在任何地方都能用
function aaa()
{
a=12;//var a=12;局部变量:只能在定义它的函数里面使用
};
function bbb()
{
alert(a);
};
aaa();
bbb();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>闭包</title>
<script>
//子函数可以使用父函数的局部变量
function aaa()//父函数
{
var a=12;
function bbb()//子函数
{
alert(a);
};
bbb();
};
aaa();
</script>
</head>
<body>
</body>
</html>
五、命名规范
(1)命名规范及必要性
可读性——能看懂
规范性——符合规则
(2)匈牙利命名法
类型前缀
首字母大写
原文:http://www.cnblogs.com/zhy2017/p/6349707.html