JavaScript基础(一)
我是一个初学者，但求能学到些许知识！以下是根据韩顺平老师的《轻松搞定网页设计html+css+javascript—javascrip部分》整理而成。
为什么要学习javascript?
javascript是实现网页动态效果的基石，在web开发中扮演重要的角色，被广泛的应用到各个领域：
- 网页游戏
- 地图搜索(google，baidu)
- 股市信息查询
- web聊天
在web开发中，js是必不可少的技术!同时js也是ajax/jquery/extjs等框架的基础。
javascript介绍--基本介绍
javascript是一种广泛用于客户端web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。
什么是脚本语言?
- 脚本语言介于HTML和C，C++，Java，C#等编程语言之间
- 脚本语言与编程语言有相似地方，其函数与编程语言类似，也有变量。与编程语言之间最大的区别是编程语言的语法和规则更为严格和复杂一些。
- 脚本语言是一种解释性语言(即在执行的时候，直接对源码进行执行)，例如Python、vbscript，javascript等等，它不象C/C++等可以编译成二进制代码。(解释性语言/编译性语言之间的区别，这是一个疑问?)
- 脚本语言一般都有相应的脚本引擎来解释执行，javascript的脚本引擎就是浏览器。
- js脚本语言往往不能独立使用，它和html/jsp/php/asp/asp.net配合使用才有意义
javascript最主要的设计目的就是让网页中的元素可以被编程也就是让网页动起来，甚至你可以编写js版本的坦克大战游戏。javascript不能独立运行，它须嵌入到其它编程语言中才能运行(html/asp/asp.net/jsp/php...)；javascript只能用于b(brower浏览器)/s(server服务器)开发，即我们常说的web开发(比如网站开发，web应用等)；javascript主要针对客户端编程，也就是说js一般运行在客户端；javascript也可以对服务器端编程(比较少)；javascript最新版本是1.8(彼时是，但现在不知道是多少了)；javascript在客户端(浏览器)执行。
javascript介绍--发展历史
javascript最早是叫livescript，是一种基于对象和事件驱动，并且具备安全性的脚本语言，是由netscapce(网景)公司1996开发的，后和sun公司合作，将livescript更名为javascript。
因为浏览器的差异，我们会看到，在不同的浏览器中使用js编程，会有差异，比如，在给某个控件绑定响应函数时，w3c dom标准是addEventListener()，而ie是使用attachEvent()，还有就是有些方法在ie中可以使用，而在ff中却不能使用，这些都是我们在实际开发中要注意的问题。（因为js是由浏览器来解释执行的，因此这里有一个问题，不同类型的浏览器可能对js的支持不一样。）
js语言的特点
javascript语言是简单的；
javascript是基于对象和事件驱动(动态的)；
它可以直接对用户或客户输入做出响应，无需经过web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件”。比如按下鼠标，移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
javascript是跨平台的。
javascript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持javascript的浏览器就可以正确执行。
js是脚本编程语言；
js是解释执行的。
js可以对客户端编程，也可以对服务器编程(较少)。
javascript和jscript比较
- jscript是微软开发的，而javascript则是网景和sun合作开发的
- 在网景开发livescript(javascript前身)时，微软就意识到这个脚本语言会很火，于是找到网景表示希望合作开发livescript，但是网景公司最终选择和微软的对头sun公司合作开发livescript，并更名为javascript。
- 微软一气之下，开发了针对ie的脚本语言，并命名为jscript，在当时的这二种脚本语言中语法是大相径庭，给当时的程序员带来很大的麻烦，后来w3c出面了，w3c统一了标准(ECMAScript)所以现在的这二种脚本语言的语法可以说90%以上都是相同的。
- 在一定程度上，你可以认为jscript和javascript是一样的。
- 在网上搜索javascript帮助手册，完后打开一看是jscript帮助手册，就不足为怪了。
JS的第一个实例，Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- JS的代码一般是放在head标签之间的，但实际上也可以在别的位置 -->
<script type="text/javascript">
window.alert("Hello1 World!!!");
</script>
</head>
<body></body>
</html>
注意：
- js位置可以随意。
- js必需用<script type="text/javascript">js代码</script>，如果没有使用script包起来，则浏览器会将其视为普通文本。
- 在一个html文件中(jsp/php/asp等)可以出现多对<script>片段。浏览器会按先后顺序依次执行。(在此不举例说明了)
JS运行原理图：
初步了解js的变量定义和使用
看下例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- JS的代码一般是放在head标签之间的，但实际上也可以在别的位置 -->
<script type="text/javascript">
//js中变量的定义(在js中变量用var表示，不管实际类型)
num1 = 456;
num2 = 89;
//Num2 = 900
result = num1 + num2;
window.alert("结果是="+result);//alert函数
</script>
</body>
</html>
注意：js中变量的定义(在js中变量用var表示，不管实际类型)。
js为什么需要变量
不论是使用哪种语言编写程序，变量都是其程序的基本组成单位。js是弱数据类型的语言，在定义变量时，不需要指明该变量的类型(由js引擎来决定)。例如：
var name="shunping";//name是字符串 var kk=2;//kk是数 var yy;//yy是undefined
如果name=234;那么这时name自动变成数。
不声明变量亦可直接使用：
x=345;//亦可
js的变量的类型究竟怎样决定?
- js是弱数据类型(针对强数据类型而言)语言；即在定义变量的时候，统一使用var表示即可，甚至不写也可以。
- js中的变量数据类型是由js引擎决定的。
js基本语法
javascript中的标识符。
标识符是指javascript中定义的符号，例如：变量名，函数名，数组名等。标识符可以由任意顺序的大小写字母、数字、下划线(_)和美元符号($)组成，但标识符不能以数字开头，不能是javascript中的关键字/保留字。
合法的标识符举例：indentifier、username、user_name、_userName、$username。
非法的标识符举例：int、98.3、Hello World。
javascript严格区分大小写computer和Computer是两个完全不同的符号。
javascript程序代码的格式：每条功能执行语句的最后必需用分号(;)结束，每个词之间用空格、制表符、换行符或大括号、小括号这样的分隔符隔开。语句块使用{}来表示。
javascript程序的注释：/* ... */(多行注释)中可以嵌套"//"(单行注释)注释，但不能嵌套"/*...*/"。
javascript基本数据类型--三大类型
通过typeof可以看到变量的具体数据类型是什么。如下例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var v1 = "abc";
var v2 = 890;
window.alert("v1是"+typeof v1);
window.alert("v2是"+typeof v2);
v1 = 567;//js是动态语言
window.alert("v1是"+typeof v1);</script>
</head>
<body>
</body>
</html>
number(数值类型)：
- 整形常量(10进制\8进制\16进制)。十六进制以0x或0X开头，例如：0x8a；八进制必需以0开，例如：0123；十进制的第一位不能是0(数字0除外)，否则当作8进制数对待，例如：123。
- 实型常量。12.32、193.98、5E7、4e5等。
特殊数值：NaN(not a number)、Infinity(无穷大)、isNaN()、isFinite()。
var a = "abc"; window.alert(parseInt(a));//返回NaN不是一个数字类型 window.alert(6/0);//返回Infinity(无穷大)
所以编程时，一定要尽量避免。
isNaN()：不是数返回true，是数返回false
window.alert(isNaN("123"));//注意是字符串"123"也返回false window.alert(isNaN("abc"));//返回true window.alert(isNaN(123));//返回false
boolean(布尔值)--true和false
js中数字0在布尔值中表示false，非0的数字都为true。
String字符串(单引号/双引号皆可)----"a book of JavaScript"、'abc'、"a"、""
字符串中的特殊字符，需要以反斜杠(\)后跟一个普通字符来表示，例如：\r、\n、\t、\b、\'、\"、\\xxx。
js基本语法--复合数据类型
复合数据类型：数组、对象。
js基本语法--特殊数据类型
javascript特殊数据类型：null、undefine。
var a = null; window.alert(a);//null空值
window.alert(a);//Uncaught ReferenceError(捕获的引用错误): a is not defined(未定义)
var a; window.alert(a);//没有给a赋值，就会返回一个undefined
js基本语法--定义变量、初始化、赋值
1、定义变量。
什么是定义变量?
var a;这就是定义一个变量，变量名是a。
2、初始化变量
在定义变量的时候，就给值。
var a=45;这就是初始化变量a。
3、给变量赋值
比如你先定义了变量：var tt;
然后，再给值tt=780;-->这就是给变量赋值。
js基本语法--数据类型转换
1、自动转换，例：
var a=1.2; a=45; a="李阿昀"; window.alert(a);//输出的结果是李阿昀
2、强制转换，例：如何字符串转成数字?
var a=parseInt("123"); var b=parseFloat("12.3"); ...//其它后面介绍
如何将数字转成字符串呢?(类似Java)
var b = 90;//b是number b = b + "";//b是string
注意：parseInt()，parseFloat()是系统函数(全局函数)，可以直接使用。
js基本语法--运算符
算术运算符
这个听其名而知其意，就是用于计算的，javascript常用的是：+加、-减、*乘、/除、%取模。其实%运算可以得到两个数相除的余数(主要用于整数)。如下例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var a = 90;
var b = 8;
window.alert(a%b);
if(a%b == 0) {
window.alert("能整除");
} else {
window.alert("不能整除");
}
</script>
</head>
<body>
</body>
</html>
++自加、--自减。这两个运算符比较特殊。如下例：
var a=56; var b=++a;//b=++a<==>[a=a+1; b=a;] b=a++<==>[b=a;a=a+1;] window.alert(b); window.alert(a);
+=左加、-=左减 、/=左除、%=左取模。如下例：
var a=56; var b=90; a-=34;//a=22 b%=a;//b=b%a; window.alert(b); //2 window.alert(a); //22
关系运算符
==等于、>大于、<小于、>=大于等于、<=小于等于、!=不等于。
如下例：
var a = 9; var b = '9';//先用parseInt()函数将字符串'9'转成数字9，然后进行判断，并不会转换为ASCII码值！ if(a == b) { window.alert("ok!"); } else { window.alert("no"); }
先介绍window.prompt和document.writeln()。
prompt()函数：如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本(即字符串)。
write()方法可向文档写入HTML表达式或JavaScript代码。
writeln()方法等同于write()方法，不同的是在每个表达式之后写一个换行符。举例说明：
var val = window.prompt("请输入值：");//如果用户单击确认按钮，则返回输入字段当前显示的文本。(即字符串) var val2 = window.prompt("请再输入值："); document.writeln("你的输入是："+(parseFloat(val)+parseFloat(val2)));
接着看下例：
var num1 = window.prompt("请输入第一个数："); var num2 = window.prompt("请输入第二个数："); num1 = parseFloat(num1); num2 = parseFloat(num2); if(num1 > num2) { window.alert("num1 > num2"); } else if(num1 < num2) { window.alert("num1 < num2"); } else { window.alert("num1 = num2"); }
逻辑运算符
用于判断逻辑关系的运算符。&&与、||或、!非。
注意：在逻辑运算中，0、""、false、null、undefined、NaN均表示false，其他均为真！
&&(短路与)：
if(逻辑表达式1 && 逻辑表达式2) { }
如果逻辑表达式1为true，则js引擎继续执行逻辑表达式2；如果逻辑表达式1为false，则不会执行逻辑表达式2。
||或
if(逻辑表达式1 || 逻辑表达式2 || ...) { }
只要有一个逻辑表达式为true，整个表达式都为true。
在js中||究竟返回什么值?
结论：||将返回第一个不为false那个值(对象亦可)，或者是返回最后一个值(如果全部都是false的话) ，此返回值多数情况下是布尔值，但也可能返回的是一个对象。
例，
var a = 0; var b = ""; var d = false; var c = a || b || d; window.alert(c);//返回false window.alert(c+"类型"+typeof c);
也可返回一个对象，如下：
var a = 0; var b = ""; var d = false; var obj = new Object(); var c = a || d || b || obj;//返回一个[object Object](对象) window.alert(c); window.alert(c+"类型"+typeof c);
!非
if(!逻辑表达式) { }
如果逻辑表达式为true则取false；如果逻辑表达式为false则取true。
位运算和移位运算，其规范和java一致。如下例：
var a = -4 >> 2; //-4 原码 10000000 00000100(取反) ---> 反码 11111111 11111011(+1) ---> 补码 11111111 11111100(计算机中存储的-4)
//补码 11111111 11111100(右移2位) ---> 1111111111 111111(计算机中存储的-1) //1111111111 111111(-1) ---> 反码 11111111 11111110(取反) ---> 10000000 00000001(-1) window.alert(a);//返回-1
js基本语法--三大流程控制
1、顺序控制
2、分支控制
让程序有选择的执行，分支控制有三种：①单分支②双分支③多分支。
单分支语法：if(条件表达式){执行语句;}
双分支语法：if(条件表达式){执行语句;}else{执行语句;}
多分支语法：if(条件表达式1){语句;}else if(条件表达式2){语句;}else{语句;}
举例：如果男，男厕所，女，女厕所，否则不上。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var sex=window.prompt("请输入性别：");
if(sex=="男") {//字符串比较也用”==”
window.alert("上男厕所");
} else if(sex=="女") {
window.alert("上女厕所");
} else if(sex == "女") {
window.alert("woman ok");
} else {
window.alert("不准上厕所");
}
</script>
</head>
<body>
</body>
</html>
注意：
- 字符串比较也用”==”。
-
强调：一旦找到一个满足条件的入口，执行完毕后，就直接结束整个多分支。
多分支：
switch(条件表达式) { case 常量1: 语句; break; case 常量2: 语句; break; ... default: 语句; break; }
表达式可以是js支持的所有数据类型，如下例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var obj = new Object();
var a = new Object();
switch(a) {
case "890":
window.alert("890");
break;//break 跳出整个switch
case 90:
window.alert("90");
break;
case null:
window.alert("null");
break;
case a://匹配自己(一个变量)
window.alert("a");
break;
default:
window.alert("没有匹配的值");
break;
}
window.alert("end...");
</script>
</head>
<body>
</body>
</html>
结论：
- js的switch语句数据类型可以是js支持的任何类型(数组和对象除外)
- case后面的数据类型可以是任何类型(数组和对象除外)
- break跳出整个switch
- 如果没有匹配则执行default
小测试：
1、下例代码依次输出什么?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var flag = 1;
switch(flag) {
default:
window.alert("默认");
case 'a':
window.alert("今天星期一");
case 'b':
window.alert("今天星期二");
}
</script>
</head>
<body>
</body>
</html>
答：依次弹出"默认"、"今天星期一"、"今天星期二"对话框。
2、下例代码依次输出什么?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var flag = 1.1;
switch(flag) {
default:
window.alert("默认");
case 'a':
window.alert("今天星期一");
case 'b':
window.alert("今天星期二");
case 1.1:
window.alert("1.1");
}
</script>
</head>
<body>
</body>
</html>
答：只弹出"1.1"的对话框。
3、循环控制
循环控制有三种，同Java，在此不赘述。
练习：
1、请编写一个程序，可以接收一个整数n，1、计算1+2+...n的值。
核心代码：
var n = window.prompt("请输入一个整数："); n = parseInt(n); var result = 0; for(var i = 1; i <= n; i++) { result+=i; } document.writeln("结果是："+result);
2、请编写一个程序，可以接收一个整数n，计算1!+2!+...+n!的值。
核心代码：
var res = 0; var temp = 1; for(var i = 1; i <= n; i++) { for(var j = 1; j <= i; j++) { temp *= j; } res += temp; temp = 1; } document.writeln("结果是："+res);
在ie中进行js调试
在ie8中通过开发人员工具，就可以进行js的调试工作。
请注意：首先要在IE-工具-internet选项-高级中取消“禁止脚本调试”。
- F11：一句一句的执行，如果遇到函数，则跳入函数中，再一句一句执行；
- F10：按过程(函数)执行，当遇到一个函数时，f10就把整个函数当作一个语句执行，而不跳入函数执行。
- Shift+f11：从一个函数跳出。
- 局部变量：可以看到变量的变化情况。
- 断点：可以看断点情况。
使用firebug可以在firefox中调试js(???)
js代码发生错误，如何定位其错误？
- 可以通过程序员的经验来判断
-
window.alert()来输出信息
-
使用firebug的调试用具
