1.JavaScript组成
ECMAScript：解释器、翻译
DOM Document Object Model HTML 对象:document
操作HTML的能力
BOM Browser Object Model 浏览器 对象:window
ECMA 几乎没有兼容性问题
DOM 有一些操作不兼容
BOM 没有兼容问题（完全不兼容）,一般不使用.
2.变量类型
类型：typeof运算符
常见类型：
number、string、boolean、undefined、object、function
<a>建议:一个变量应该只存放一种类型的数据</a>
undefined出现的情况:
- 1.真的没定义
- 2.虽然定义，没有给东西
var a=12;
//alert(typeof a); //number
a='asdfasd';
//alert(typeof a); //string
a=true;
//alert(typeof a); //boolean
a=function ()
{
alert('abca');
};
//alert(typeof a); //function
a=document;
//alert(typeof a); //object
var b; //变量本身没有类型,他要通过类型推到来决定类型,故b是未定义类型
alert(typeof b); //undefined
//undefined出现的情况:
//1.真的没定义
//2.虽然定义，没有给东西
3.类型转换
-
<a>显式类型转换 (强制类型转换)</a>
1 字符串转
Int类型
parseInt(xxx)
var a = '12';
alert(typeof parseInt(a)); //12 number类型
var a = '12px34';
alert(parseInt(a)); //12 number类型 遇到px,无法识别出数字,跳出;
var a = 'abc';
alert(parseInt(a)); //NaN Not a Number 非数字
1+parseInt('abc') ; //的结果等于NaN; parseInt('abc') 他是一个NaN,任何一个数和NaN计算,结果都是NaN;
var e = parseInt('abc');
var f = parseInt('edf'); //a和b里面装的都是NaN;
alert(e==f); //结果是false; 也就是说这两个变量是不相等的
-
如何判断一个变量是不是NaN呢?
isNaN(xxx);
var a = parseInt('abc');
alert(isNaN(a)); //结果是ture;
示例代码:
<html lang="en">
<head>
<meta 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); //oTxt1.value是字符串类型的
var n2 = parseInt(oTxt2.value);
if (isNaN(n1)){
alert('您输入的第一个数字有误');
}else if (isNaN(n2)){
alert('您输入的第二个数字有误');
}else {
alert(n1+n2);
}
}
}
</script>
</head>
<body>
<input type="text" id="txt1">
+
<input type="text" id="txt2">
<input type="button" value="求和" id="btn1">
</body>
</html>
isNaN(xxx)使用示例
- 2字符转成
float类型
parseFloat(xxx);
var a = '3.5';
var b = '9';
alert(parseInt(a)) //结果是 3
alert(parseFloat(a)); //结果是 3.5
alert(parseFloat(b)); //结果是 9
-
<a>隐式类型转换</a>
- 1 例子一:
var a = 5;
var b = '5';
alert(a==b); //true 学雷锋做好事,先转换类型,然后比较;
alert(a===b); //false '==='人们一般称作'全等';不转换类型,直接比;
- 2 例子二:
var a = '12';
var b = '5';
alert(a+b); //125 '+':有两个作用,一是字符串连接;二是数字相加;
alert(a-b); //7 隐式转换,数字相减;
4.变量的作用域
- 局部变量 : 只能在定义它的函数里面使用;
<script>
function aaa() {
var a = 12; //局部变量: 只能在定义它的函数里面使用;
}
function bbb() {
alert(a); //undefined bbb函数里面不能使用a变量,提示未定义
}
aaa();
bbb();
</script>
- 全局变量: 在任何地方都可以使用;
<script>
var a;
function aaa() {
a = 12; //全局变量: 在任何地方都可以使用;
}
function bbb() {
alert(a); // 结果:12
}
aaa();
bbb();
</script>
5.闭包
含义:子函数可以使用父函数的局部变量;
<script>
function aaa() { //父函数
var a = 12;
function bbb() { //子函数
alert(a); //结果: 12;
}
bbb();
}
aaa();
</script>
6.命名规范及必要性
-
规范
可读性——能看懂
规范性——符合规则
-
匈牙利命名法
- 类型前缀
- 首字母大写
js命名规范
oDiv :指的是一个对象;
var aTxt = document.getElementsByTagName('input'); //aTxt 指的一个数组
7.运算符
算术：+ 加、- 减、* ** 乘、/ 除、% 取模(取余)
实例：隔行变色、秒转时间: 156s >> 156/60分156%60秒 >>>2分36秒
赋值：=、+=、-=、*=、/=、%=
关系：<、>、<=、>=、==、===、!=、!==
逻辑：&& 与、|| 或、! 否
实例：全选与反选
运算符优先级：括号
8.程序流程控制
判断：if、switch、?:(三木运算)
循环：while、for
跳出：break、continue
break : 执行到某个条件时,整个循环中断了
continue : 执行到某个条件时,跳过本次,继续执行后面的;
什么是真、什么是假：
真：true、非零数字、非空字符串、非空对象 (<a>这些全是真的,数组/字典都是对象</a>)
假：false、数字零、空字符串、空对象(null)、undefined (<a>这些全是假的</a>)
9.Json
<script>
var json = {a: 12,b: 5, c: 'abc'}; //json
alert(json.a);//12
alert(json.b);//5
alert(json.c);//abc
alert(json.a*json.b);//放到json里的东西也可以进行其他操作:60
</script>
循环 : Json和数组的区别:
<script>
var json = {a: 12, b: 5, c: 7};
var arr = [12, 5, 7];
alert(json.a); //json取值:12
alert(json['a']); //json取值:12
alert(arr[0]); //数组取值:12
alert(json.length); // 个数: undefined
alert(arr.length); //个数:3
for (var i=0;i<arr.length;i++){
alert('第'+i+'东西:'+arr[i]); //打印结果:第0个东西:12; 第1个东西:5;第2个东西:7;
}
for (var i in arr){ //和OC的不太一样,for..in 里面i指的是下标
alert('第'+i+'东西:'+arr[i]); //打印结果:第0个东西:12; 第1个东西:5;第2个东西:7;
}
for (var i in json){ //i指的是json中的a/b/c这些下标;
alert('第'+i+'东西:'+json[i]);//打印结果:第a个东西:12; 第b个东西:5;第c个东西:7;
}
</script>
循环使用建议
数组：使用 for (var i=0;i<arr.length;i++)
json：使用 for in
