新长城 JavaScript总结

欢迎光临新长城博客中心

JavaScript概述

JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。

JavaScript特点：

1) 交互性(它可以做的就是信息的动态交互)

2) 安全性(它不允许直接访问本地硬盘)

3) 跨平台性(只要是可以解释Js的浏览器都可以执行，和平台无关)。

JavaScript和Java的区别

1）JS是Netscape公司的产品，前身是LiveScript,Java是Sun公司的产品，现在是Oracle公司的产品。

2）JS是基于对象和事件的语言，Java是面向对象的语言。

3）JS是弱类型的语言，Java是强类型的语言。

4）JS的运行不需要编译就可以直接运行，Java需要编译为class字节码文件后才能运行。

JavaScript和JScript

前者是Netscape公司的，后者是微软的，两者有点差异，目前市场上的浏览器对JavaScript的支持是最好的，为了统一规范，出了个ECMA的规范，用于统一这两种标准。

JavaScript与HTML相结合的方式

1) 将JavaScript代码封装到<script>标签中，并指定type属性。

2) 将JavaScript代码封装到.js文件中，然后通过<script>中的src属性进行导入。需要注意的是：如果<script>标签中指定了src属性，那么<script>标签中封装的代码将不会被执行，比如说下面的代码就有问题了：

代码示例：

<script type="text/javascript" src="test.js">

alert("黑马程序员");

</script>

 

alert("黑马程序员");的代码就不会被执行了。所以通常导入js文件都是用单独来完成。比如下面的代码就没问题了:

代码示例：

<script type="text/javascript" src="test.js"></script>

<script type="text/javascript" >

alert("黑马程序员");

</script>

 

JavaScript语法的通用体现

1）关键字：该种语言中被赋予了特殊含义的单词。

2）标识符：用于标识数据和表达式的符号，通常可以理解为在程序中自定义的名称，比如变量名、函数名。跟Java是一样的，(26个英文字母大小写) + (十个数字) + ($) + (_)

3）注  释：注解说明解释程序，用于调试程序。

支持两种注释：

单行注释//

多行注释/*注释内容*/

4）变量、常量：用于标识内存中一片空间，用于存储数据。该空间中的数据是可以变化的。

 

什么时候用变量呢？当数据不确定的时候用变量。

如何定义变量？格式： var 变量名 = 变量值;

 

注意的问题：

1.JavaScript是弱类型语言，变量不用声明可以直接使用。

2.JavaScript里面没有字符类型，''和""代表的都是字符串，双引号里面可以嵌套单引号，单引号里面也可以嵌套双引号。

3.变量都有一个初始化值，如果不给变量赋值，那么这个值就是undefinde。

代码示例：

<script type="text/javascript" >

var x;

alert("x="+x);

</script>

5）运算符：可以让数据进行运算的符号。

1.算数运算符（+ - * / % ++ --）

注意：计算除法时，两个整数相除，结果如果有小数的话，JavaScript会保留，跟Java有点不一样。

代码示例：

<script type="text/javascript" >

var x = 3.14*1000/1000;

alert("x="+x);

//因为JavaScript没有类型。所以打印的是3.14

var a = 3.14,b = 6.86;

alert("sum="+a+b);

//打印的是sum=3.146.86;

alert("sum="+(a+b));

//打印的是sum=10

alert(a+b+"=sum");

//打印的是10=sum

alert("11"+1);

/*在这里加号是作为连接符，所以打印的是111;*/

alert("11"-1);

/*JavaScript没有类型限制，先把11转成整数，再进行运算。所以打印的是10*/

alert(true+1);

/*在JavaScript中true表示为非0数，默认是1。假表示为0的数。非null表示true，null表示假。*/

alert(1%5);

/*这个不用说了吧，不懂就看Java去。*/

</script>

2.赋值运算符（=、 +=、 -=、 *=、 /=、 %=）跟Java一样没区别。

3.比较运算符

（运算的结果要么是false，要么是true)：>、<、>=、<=、==、!=）跟Java一样没区别。

4.逻辑运算符（&&、||、!）

在JavaScript中，JavasSrcipt逻辑运算符只能用短路来表示。

5.位运算符（&、|、^、>>、<<、>>>）一切照旧，跟Java一样。

6.三元运算符

其实就是if...else语句的简写，在Java里面三元运算符是一定要有结果的，但是JavaScript可以没有。

代码示例：

<script type="text/javascript" >

alert(1==1?1:0);

</script>

 

6）语句：用于对程序的运行流程进行控制的表达式。

1.顺序结构：执行代码时从上到下，这叫顺序结构。

2.判断结构：if else else if其语句结构跟Java一样。

代码示例：

<script type="text/javascript">

var x = 3;

if(x=1){

alert("yes");

}else{

alert("no");

}

</script>

打印结果：yes,因为x=1是赋值，将1赋值给x后，x=1了，1是非0，0代表假，非零代表真，所以为true，打印"yes";

 

3.选择结构switch(变量) case default break

在Java switch语句中，switch只能接收byte short int char或者枚举，可是在JavaScript里面没有类型限制，可以接收任意类型。而执行顺序跟Java一样，从上到下，先执行case，后执行defaule。

代码示例：

<script type="text/javascript">

var value = "黑马程序员";

switch(value){

default:

alert("黑马程序员");

break;

case "黑马论坛":

alert("黑马论坛");

break;

case "CSDN社区":

alert("CSDN");

break;

}

</script>

执行流程：进入switch语句后，就会根据表达式的值去找对应的case值。

如果最终没有找到，那么，就执行default的内容。

 

 

4.循环结构:while、do while、for,用法跟Java是一样的。

代码示例：

<script type="text/javascript">

for(var x=1;x<=10;x++){

alert("x="+x);

}

</script>

5.其他语句：with(对象){} for(变量 in 集合){}

 

函数：用于对功能的代码进行封装，便于提高复用性。

1.函数概念：函数就是一个功能的封装体。

2.定义功能通常需要两个明确：

1）功能的结果。

2）功能实现中的参与运算的未知的内容。

3.函数细节问题：

1）使用函数的名称，就是在调用对应的函数。如果后面加上()就是在调用函数的方法，如果是调用函数名称，那么返回的是该函数的源代码。

2）函数不存在重载形式。因为函数的参数列表上默认是定义了arguments一个数组，由于JavaScript是没有类型限制，所以可以认为参数列表是一个集合，就算我们不定义参数列表，也可以传入参数，当然不建议这样做，因为我们要把要参与运算的未知内容定义在参数列表上，当然不定义参数列表也是可以的。

3）JavaScript函数也有返回值，默认返回值是undefinde，可以自定义返回值，加一个return语句。

代码示例：

1）<script type="text/javascript">

function demo(){

alert("黑马程序员");

}

demo();//调用函数

alert(demo);//打印的是函数的源代码

</script>

2）<script type="text/javascript">

function demo(){

alert(arguments.length);

}

demo("黑马程序员","黑马论坛","CSDN社区");

</script>

运行结果打印的是3，参数列表虽然没有定义，但是没有可以传入参数，调用函数，证明函数没有重载的形式，另外参数列表里面默认定义了一个可变长度的数组arguments（也可以说是集合），所以我们可以传入任意的参数。

3）<script type="text/javascript">

function demo(){

　　　　//return(arguments.length);

}

alert(demo("黑马程序员","黑马论坛","CSDN社区"));

</script>

4.JavaScript函数的其他表现形式

动态函数特点：函数的参数和函数体都是可以通过动态指定的。

使用的是JavaScript中内置的一个function对象，但是用的不多。

代码示例：

<script type="text/javascript">

var add = new function("x,y","var sum = x+y; return sum;");

alert(add(1,8));

</script>

匿名函数：没有名字的函数

代码示例：

<script type="text/javascript">

window.onload = function(){

alert("function");

}

</script>

数组：对多数据进行存储，便于操作，也就是容器。

JavaScript定义数组格式：

var arr = [];//创建数组

var arr = new Array();//以创建数组对象的形式创建数组

JavaScript特点：

1）数组长度是可变的。

2）数组元素默认值是undefinde。

3）数组元素可以是任意类型。

代码示例：

<script type="text/javascript">

var arr = [1,3,5,7,9];

/*打印数组方法，如果数组角标元素没有定义，默认是undefinde*/

function printArray(arr){

for(var x=0;x<arr.length;x++){

alert(arr[x]);

}

}

//printlArray(arr);

arr[10] = 100;

alert("arr[10]="+arr[10]);//打印的是100，数组长度是可变的。 

/*-------------------------------------------*/

function getMax(){

var max = 0 

for(var x=1;x<this.length;x++){

if(arr[max]>arr[x])

max = x;

}

return arr[max];

}

alert(getMax(arr));

</script>

对象：只要是基于对象的语言，或者是面向对象的语言，就存在着对象的概念，对象就是一个数据的封装体。

 

自定义JavaScript对象，并用with(){}对对象的属性进行遍历。

代码示例：

<script type="text/javascript">

function Person(name,age){

this.name=name;

this.age=age;

}

var p = new Person("新长城",18);

with(p){

alert(name+"..."+age);

}

alert(typeof(p));//object

</script>

 

想要获取具体的值的类型，可以通过typeof来完成，typeof返回的类型都是字符串的。

代码示例：

<script type="text/javascript">

alert(typeof("abc"));

alert(typeof(true));

alert(typeof(3.14));

alert(typeof('a'));

alert(typeof(3));

</script>

 

在JavaScript中，函数（function）就是对象。在JavaScript中有一个function对象，所有自定义的函数都是function对象类型的。

代码示例：

<script type="text/javascript">

var v = function(){};

alert(typeof(v)); 

</script>

 

练习：通过一个ArrayTool.js文件对数组进行获取最值和排序并打印。

 

代码示例：

<script type="text/javascript">

var arr = [5,7,1,8,2];

alert(ArrayTool.getMax(arr));

alert(ArrayTool.getMin(arr));

ArrayTool.printArray(arr);

ArrayTool.bubbleSort(arr);

ArrayTool.printArray(arr);

</script>

 

arrayTool.js

Code（代码）：

// JavaScript document

function ArrayTool(){}

var ArrayTool = new ArrayTool();

function getMax(){

var max = arr[0];

for(var x =1;x<arr.length;x++){

if(max<arr[x])

max = arr[x];

}

return max;

}

function getMin(){

var min = 0;

for(var x =1;x<arr.length;x++){

if(arr[min]>arr[x])

min = x;

}

return arr[min];

}

function bubbleSort(){

for(var x=0;x<arr.length;x++){

for(var y=x+1;y<arr.length-1;y++){

if(arr[x]>arr[y]){

swap(arr,x,y);

}

}

}

}

function swap(arr,x,y){

var temp = arr[x];

arr[x] = arr[y];

arr[y] = temp;

}

function printArray(){

/*for(var x =0;x<arr.length;x++){

document.write(arr[x]);

}

document.write("</br>");

*/

//-------------------------------

for(x in arr){

document.write(arr[x]);

}

document.write("</br>");

}

ArrayTool.getMax = getMax;

ArrayTool.getMin = getMin;

ArrayTool.bubbleSort = bubbleSort;

ArrayTool.printArray = printArray;

//一下子敲那么多代码，累了。嘻嘻。

 

 

练习：通过一个表格打印一个99乘法表.

代码示例：

CSS样式代码：

<title>99乘法表</title>

<style type="text/css">

table{

border:#000 1px solid;

border-collapse:collapse;

background:#FFF;

margin-left:200px;

margin-top:50px;

color:#309;

}

table td{

border:#000 1px solid;

font-size:18px;

}

</style>

JavaScript代码：

<script type="text/javascript">

function print99(){

with(document){

write("<table>");

for(var x =1;x<=9;x++){

write("<tr>");

for(var y=1;y<=x;y++){

write("<td>");

write(y+"*"+x+"="+(x*y));

write("</td>");

}

write("</tr>");

}

write("</table>");

}

}

print99();

</script>

//搞的不美观，哈哈，别怪我，我审美度没有那么高。

 

 

全局变量（Global）和局部变量

 

代码示例：

<script type="text/javascript">

//1.在脚本片段中定义的变量，是全局变量，全局变量在整个页面都能访问.

for(var x=0; x<3; x++){    

document.write("x="+x);    

} 

document.write("x="+x);

/*打印3.这里是能访问到上面的x的，因为上面的x虽然定义在for循环里。

但是它却是一个全局变量.*/    

 

//2.在函数内部定义的变量是局部变量.

var x = 3;//全局变量    

function show(x){    

x = 6;//局部变量    

}    

show(x);    

document.write("x="+x);

/*这个打印结果是3,x=3传到show(x)里面去,x=6,但是由于是局部变量,外部是访问不到的所以document.write("x="+x)访问的全局的x=3;*/   

</script>

 

 

String对象 跟Java一样，只是加入了其他功能。其操作方法是一样的。

代码示例：

<script type="text/javascript">

 

var str = "黑马程序员";

str = str.bold();

str = str.fontcolor("Green");

str = str.fontsize("16");

str = str.link("http://www.csdn.net/");

 

document.write(str);

 

var str = "黑马程序员";

var substring = str.substring(2,4);

var substr = str.substr(2,4);

 

document.write("substring = "+substring+"<br />"); 

document.write("substr = "+substr+"<br />"); 

 

document.write("字符串长度"+str.length);

</script>

String对象注意一点，在JavaScript中，或者字符串的长度用的不是方法，是String对象的属性。

 

Math对象

代码示例：

<script type="text/javascript">

//获取10个1~10的随机数

for(var x=1;x<=10;x++){

var random = parseInt(Math.random()*10+1);

document.write(random+"<br />");

}

//进制转换。

var number = parseInt("110",2);

number = number.toString(2);

alert(number);

</script>

 

Data对象

获取时间中具体元素的方法：  

var date = new Date();  

年：date.getYear()  

月：date.getMonth(),获取到的值加1后等于当前月份  

日：date.getDate(),获取当前日在本月中是第几天  

星期：date.getDay(),获取星期，返回的值为0到6，表示星期日，星期一...星期六  

时间毫秒值：date.getTime()

代码示例：

<script type="text/javascript">

var d = new Date();

with(d){

var days = ["日","一","二","三","四","五","六"];

alert(getYear()+"年"+(getMonth()+1)+"月"+getDate()+

"日 星期"+days[getDay()]);

}

</script>

 

Array对象

代码示例：

<script type="text/javascript">

var arr = [1,2,5,3,4];

alert(arr.sort());

</script>

 

JavaScript已经定义好了Array对象，便于我们对数组的调用，那我们可不可以将我们的方法添加到该对象中呢，比如获取最值等。答案是可以的用的是prototype属性，可以获取对象的原型。但是由于获取最值的代码上面有，我这里就对字符串的几个方法进行示例。

代码示例：

1.js

Code（代码）：

var string = new String();

function tirm(){

var start = 0;

var end = this.length;

while(start<=end && this.charAt(start)==" ")

start++;

while(start<=end && this.charAt(end)==" ")

end++;

return this.substring(start,end-1);

}

string.prototype.trim = trim;

Prototype.html

Code（代码）：

<script type="text/javascript" src="1.js"></script>

 

<script type="text/javascript">

var str = "   黑马程序员 黑马论坛   ";

alert(str.trim());

</script>

其他方法就不一一示例了，嘻嘻。谢谢。