Javascritp入门

Javascript的基本介绍

JS是用于WEB开发的脚本语言，JS分为三个组成部分(ECMAScript/DOM/BOM)。

脚本语言是什么：

脚本语言往往不能独立使用，它和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" οnclick="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数据类型

基本数据类型：

原始数据类型(均使用小写)

undefined、null、boolean、number、string

关于null类型：这是当初设计的一个错误，被沿用至今。null是一个基本数据类型，其类型为Object，起作用是充当占位符！

PS：undefined是null的子类，undefined表示未定义，也就是说这个东西不存在，你就要去使用它，nill表示空,表示这个东西存在，只不过它的类型是null。也就是未初始化和已初始化的区别。

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在这上面并没有什么太大的差别。

区别之一：

==(相等)和===(等同)的区别?

如果是==，那么他会自动尝试进行类型转换，也就是说==是比较值是否相等。

varstr="66";//string
varstr1=66;//number
alert(str==str1);//如果是两个等号，会自动尝试进行类型转换！返回结果为true

如果是===，那么它不会进行类型转换，返回false！也就是说===是比较值和类型是否相等。

注意事项：(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,worldvar myvar=test("abc"); //输出abcwindow.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)》