Javascritp入门
Javascritp入门
Javascript的基本介绍
JS是用于WEB开发的脚本语言。
脚本语言是什么：
脚本语言往往不能独立使用，它和HTML/JSP/PHP/ASP.NET配合使用
脚本语言也有自己的变量，函数，控制语句（顺序，分支，循环）等
脚本语言实际上是解释性语言（即在执行时直接对源码进行执行），编译语言效率会更高一些
JS和java运行环境的区别：
Java程序.java→.class→jvm
js→浏览器（js引擎来解释执行），JS主要在客户端（浏览器）执行，很少在服务器执行，但并不代表不能在服务器执行。
JS的运行环境的注意点：
因为JS一般是在浏览器上运行，但是浏览器又有很多种，不同类型的浏览器可能对JS的支持不一样，所以才会有W3C规范这一标准。像FireFox，Chrome，IE等等都是遵循W3C的标准写的JS引擎，但是在某些地方可能和W3C标准还是有一定的区别。
JS快速入门
案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript">
function test(){
window.alert("hello world!");
}
</script>
<title> New Document </title>
</head>
<body>
<input type="button" onclick="test()" value="Button"/>
</body>
</html>
<html>
<head>
<!--js代码是放在head标签间,但实际上也可以放在别的位置-->
<script language="javascript">
window.alert("hello");
</script>
</head>
<body>
</body>
</html>
小结：
js的位置可以随意放
js必须使用 <script language="javascript"> [代码]</script>，如果是引用外部JS文件，尽管中间没有代码，但是依旧要写成 <script></script>这种形式
在一个html文件中（JSP/PHP/ASP.NET）可以出现多对（script）片段，浏览器会按照先后顺序依次执行
JS变量类型
案例：
<html>
<head>
<title> New Document </title>
</head>
<body>
<!----js代码是放在head标签间,但实际上也可以放在别的位置-->
<script language="javascript">
//js中变量的定义（js中变量用var表示，无论什么类型，事实上连var也可以不写）因为js是解释型语言，所以其变量都是动态的，不需要特意指定变量类型
var num1=1;
var num2=60;
var result=num1+num2;
window.alert("结果是"+result); //alert函数 window.alert表示弹出一个对话框
</script>
</body>
</html>
小结：
js是弱数据类型语言，即：在定义变量时候，统一使用var表示，甚至可以去掉var这个关键字
js中的变量的数据是由js引擎决定的
例：
var name=”zs”; //name是字符串
var kk=2; //kk是数字
name=234; //这时name自动变成数
JS命名规范
(1)可以使用大小写字母，数字，$来命名
(2)不能以数字打头
(3)不能使用js保留字和关键字
(4)js是大小写区分
(5)单行注释大小写：//
(6)多行注释：/*…….*/
(7)命名建议使用驼峰法，变量、方法首单词小写之后单词首字母大写，类名所有单词首字母大写
JS数据类型
基本数据类型：
1、数值类型
123、12.1等
特殊数值：1)NaN,表示非数值类型，2)Infinity表示无穷大
第一种
var a=”abc”;
window.alert(parseInt(a));
第二种
window.alert(6/0);
2、字符串类型
可以用单引号也可以用双引号，特殊字符可以用转义符号\转义
window.alert("asada\"r"); 输出asada”r
PS：Java中字符串只能用双引号
3、布尔类型
true false
补充：通过typeof运算符可以看到变量的具体数据类型，除了上述三种常用基本类型之外还有Undefined、Null。
案例：
<html>
<head>
<script language="javascript">
var num1=123;
var num2="abcd";
window.alert("num1是"+typeof num1);
window.alert("num2是"+typeof num2);
var num1=false; //体现js是动态语言：即数据类型可以任意变化
window.alert("num1是"+typeof num1); //体现js是动态语言
</script>
</head>
<body>
</body>
</html>
复杂数据类型：
数组，对象。PS：后面会单独介绍
特殊数据类型：
Null,Undefined
JS数据类型转换
1、自动转换
例子：var a=123; //a是数值
a=”hello” //a的类型是string
2、强制转换
例子：var a="123” ;
a=parseInt(a); //使用系统函数强制转换
JS运算符
+加、-减、*乘、/除、%取余，++a前加一，a++后加一，--a减减一，a--后减一，+=加等于，-=减等于，*=乘等于，/=除等于，%=模等于。等等
PS：运算符这段内容可以参考我的另一篇博客JAVA入门(1)，JS和Java在这上面并没有什么太大的差别。
注意事项：(JS和Java不同的地方)
1、在逻辑运算中：0，””，false，null，undefined，NaN均表示false，除了这些均表示为真。
2、在JS中，||究竟返回什么值，这是一个非常重要的知识点
结论：将返回第一个不为false的值（对象亦可），或者是返回最后一个值（如果全部都是false的话）,返回的结果不一定是布尔值。
案例1：
var a=true;
var b=false;
window.alert(a||b);
输出true
案例2：
var a=4;
var b=90;
var c=a||b;
window.alert(c);
输出：4
案例3：
var a=0;
var b=90;
var c=a||b;
window.alert(c);
输出：90
案例4：
var a=0;
var b="";
var d=false;
var c=a||b||d;
window.alert(c);
输出：false 如果是var c=a||d||b;返回空串
JS的位运算和移位运算
按位与&、按位或|、按位异或^，按位取反~,算术右移>>，算术左移<<，逻辑右移>>>。
PS：JS和Java规范一样，具体细节可以参考我的另一篇博客Java入门(2)
JS控制语句
1、顺序控制
顺序控制就是使程序从上到下(没有方法的情况)一条一条的按顺序执行。
2、分支控制
2.1单分支
if(条件表达式){
语句；
}
2.2 双分支
if(条件表达式){
语句;
}else{
语句;
}
2.3多分支
if(条件表达式1){
语句;
}else if[多个]（条件表达式2）{
语句;
}else{//else可有可无
语句;
}
2.4 switch
基本语法：
switch(表达式){
执行语句；
case 类型1：
break； //跳出整个switch
[多个]
default:
语句；
break;
}
结论：
1、JS的switch语句的数据类型可以是JS支持的任何类型（对象和数组除外）。
2、case后面的值数据类型可以是任意的（对象和数组除外）。
3、break作用是跳出整个switch
4、如果没有匹配的则执行default
3、循环控制
for循环
while循环
do while循环
for in循环
for in循环的基本语法：
for(var a in 数组){
语句;
}
for in循环一般用于数组，不过就算是在数组中，也很少用for in 循环来进行遍历，一般都用for循环。
PS：前三个和Java一样，这里不再赘述，可以参考Java入门(1)。
JS函数
函数的基本概念：为完成某一个功能的代码（语句，指令）集合
基本语法：
function 函数名（参数列表）{
语句；//函数（方法）主体
return 返回值；
}
说明：
1.参数列表：表示函数的输入 特别强调：参数名前不要带var
2.函数主体：表示为了实现某一功能代码块
3.函数可以有返回值也可以没有返回值
案例：
<html>
<head>
<script language="javascript" type="text/javascript">
//输入两个数，再输入一个运算符，得到结果
var num1=window.prompt("请输入一个数");
var num2=window.prompt("请再输入一个数");
num1=parseFloat(num1);
num2=parseFloat(num2);
var operator=window.prompt("请输入一个运算符");
var res=jiSuan(num1,num2,operator);
document.write("结果是"+res);
//自定义函数
function jiSuan(num1,num2,operator){
var res=0;
if(operator=="+"){
res=num1+num2;
} else if(operator=="-") {
res=num1-num2;
} else if(operator=="*") {
res=num1*num2;
} else {
res=num1/num2;
}
return res;
}
</script>
</head>
<body>
</body>
</html>
PS：函数可以分为自定义函数、系统函数，系统函数可以通过查文档使用。
函数的调用方式
1.普通调用
函数名(实际参数);
2.通过指向函数的变量去调用
var myvar=函数名;
myvar(实际参数);
案例：
JS文件：
function test(val){
window.alert("你得输入是"+val);
return 90;
}
html调用：
test("hello,world"); //传统的调用方式
window.alert(test); //显示函数
var myvar=test; //将函数赋值给变量
window.alert(myvar);//显示函数
myvar("hello,world"); //显示hello,world
var myvar=test("abc"); //输出abc
window.alert(myvar); //输出90，如果函数没有返回值则返回undefined，如果有返回值，则返回什么就是什么
PS：这里有个细节问题，那就是将函数赋值给变量会出现什么样的情况。
如果是将函数名(不包括参数)赋值给变量，这时候就是该变量指向函数的地址，并且直接输出的话，会输出该函数，而不是该函数的地址。在变量后面加上参数，就能将参数传入该函数。
如果是将函数(包括参数)赋值个变量，这时候就是该变量就是该函数的返回值，如果函数没有返回值，则显示undefined,如果有返回值，则返回什么就是什么。
深入理解
1、js函数的参数列表可以是多个
2、js函数列表可以是多个，并且数据类型可以是任意类型
3、js支持参数个数可变的函数
4、js支持创建动态函数
5、js函数不可以重名
案例：
//编写一个函数，可以接收任意多个数，并计算他们的和
function abc2(){
//在JS中有一个 arguments可以访问所有传入的值
//window.alert(arguments.length);//得到参数的个数
//遍历所有的参数
var sum=0;
for(var i=0;i<arguments.length;i++){
sum=arguments[i]+sum;
}
window.alert(sum);
}
调用：abc2(12,12,12,12); 结果是48，abc2(); 结果是0
JS数组
一维数组
什么是数组？
数组可以存放多个数据，其在内存中的存放形式是顺序的，并且是在堆内存中。
PS：和Java不同的是，JS可以在同一个数组中，存放不同类型的元素，也就是说在同一个数组中可以同时存放数值型，字符串等。
基本语法：
var 数组名=[元素值，元素值…] //元素的值可以是任意类型
var an=[1.23, ”hello”, true, 2];
案例：
<html>
<head>
<script language="javascript">
var a = [1, 2, 3, 5, 7, 9, 5];
var sumA = 0;
for(var i = 0; i < a.length; i++){
sumA += a[i];
document.writeln(a[i] + " ");
}
document.writeln("<br/>");
document.writeln(sumA);
</script>
</head>
</html>
PS：JS数组和Java一样都是引用传递的。而引用传递和值传递的区别就是引用传递给函数，能修改其中的值，而值传递是不能的。
这个牵涉到堆栈知识，其原理就是调用函数和被调用函数在不同的栈里面，如果是值传递，那么在被调用函数中对值进行修改，只改变被调用栈中的值，而不会影响调用函数栈的值。如果是引用传递的话，那么在被调用函数中对值进行修改，因为其是引用指向堆中元素，事实上是修改了堆中元素的值，而调用函数也是指向堆中元素，所以调用函数的值被修改了。
数组引用
基本用法：
数组的名称[下标];
比如：var a=[23,”hello”,4.5]
我们访问a[2]则输出4.5
如果我们访问a[3]则输出undefined
结论：不能访问不存在的元素，数组的下标是从0开始编号的
数组遍历
可以使用循环控制语句while,do-while,for,for in来遍历。
小结：
1、数组可以存放任意类型的数据
2、数组大小可以不必事先指定，可以动态增长
3、数组名可以理解为指向数组首地址的引用
4、数组元素是从0开始编号的
5、JS和Java不同，不需要在类型后面加上[]，而且其初始化用的括号是[]中括号,而不是{}大括号。
多维数组(以二维函数为例)
二维数组可以将每个元素都视作一个一维数组。
例子：var arr = [[“abc”,123,3.2],[“a”,”b”,”c”]];
二维数组遍历
var arr = [[“abc”,123,3.2],[“a”,”b”,”c”]];
//两重for循环遍历
for(var i = 0; i < arr.length; i++){
for(var j = 0; j < arr[i].length; j++){
document.writeln(arr[i][j] + “ ”);
}
document.writeln(“<br/>”);
}
输出：
abc 123 4.5
a b c
排序，查找
排序，查找的内容可以参考我的另一篇博客Java入门(2)，因为这是算法问题，只是在语言表达上有所不同，故不再赘述。
----------参考《韩顺平.轻松搞定网页设计(html+css+js)》