javascript入门

1. JavaScript简介

1.1. JavaScript由来
Netscape 发明了 JavaScript
JavaScript由Netscape 在1995年发明。早期的主要目的是处理一些用户的输入验证操作。而在JavaScript语言出现之前客户端的页面时需要提交到服务器端，由服务器去检测的。在刚刚普及的电话线调制解调器时代，对用户是一种考验，著名的Netscape Navigator（早期浏览器） 通过引入JavaScript来解决该问题
随着互联网的流行，网页已经不断变得更大和复杂，如果用户想要注册表单，需要直接将表单提交到服务器进行验证，需要和服务器进行多次的往返交互，例如，用户注册一个表单，点击提交按钮，等待30秒服务器返回处理后，返回的是用户名不符合规则。这种用户体验是很不友好的。此时的Netscape（网景）开始着手解决这个问题。
Netscape在 1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言，当时的目的是在浏览器和服务器（本来要叫它 LiveWire）端使用它。后来Netscape和Sun公司合作，所以最后Netscape 与 Sun 及时完成 LiveScript 实现。就在 Netscape Navigator 2.0 即将正式发布前，Netscape 将其更名为 JavaScript，目的是为了利用 Java 这个因特网时髦词汇，此后JavaScript 从此变成了因特网的必备组件。
三足鼎立
微软进军微软决定进军浏览器，发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷）。
在微软进入后，有 3 种不同的 JavaScript 版本同时存在：Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。JavaScript 并没有一个标准来统一其语法或特性，而这 3 种不同的版本恰恰突出了这个问题。随着业界担心的增加，这个语言的标准化显然已经势在必行。
标准化
1997 年，JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会（ECMA）。第 39 技术委员会（TC39）被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义” 。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262，该标准定义了名为 ECMAScript 的全新脚本语言。随后，国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准。
从此，Web 浏览器就开始努力将 ECMAScript 作为 JavaScript 实现的基础。
JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。JavaScript 是因特网上最流行的脚本语言。
注：
javascript运行必须依赖于宿主环境语言，即页面语言HTML。
是解释型的语言，解释型：不需要编译，解释器程序会每读取一条语句就执行。运行速度慢，浏览器中默认内置了javascript的解释器程序。
浏览器中默认内置了javascript的解释器程序。
常见的脚本语言：
ECMASCRIPT主要进行所有脚本语言的标准制定。
JavaScript
JScript
VBScript
ActionScript
JavaScript是基于对象和事件的脚本语言。
1.2. JavaScript特点
1. 安全性（不允许直接访问本地硬盘），它可以做的就是信息的动态交互。
2. 跨平台性。（只要是可以解释Js的浏览器都可以执行，和平台无关。）

1.3. JavaScript与Java不同
1. JS是Netscape公司的产品，Java是Sun公司的产品
2. JS是基于对象，Java是面向对象。
3. JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
4. JS是弱类型，Java是强类型。
1.4. JavaScript内容
尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
目前我们学习JavaScript也就是需要学习：
JavaScript语法基础
使用JS操作网页（DOM）
使用JS操作浏览器（BOM）
1.5. 体验JavaScript



体验JavaScript语言

体验JavaScript语言

window.document.write("hello,world");

1. JavaScript基础
   2.1. 语法
   2.1.1. 引入方式与引入位置
   向HTML页面插入JavaScript的主要方法，就是使用

注释：如果函数无明确的返回值，或调用了没有参数的 return 语句，那么它真正返回的值是 undefined。

函数格式
Function 函数名(参数列表){
代码;
return 返回值; //return 不是必须的.
}
示例:
function foo() {
alert(“test”);
}
function foo2( a ){
alert(a);
return; // 没有返回值，表示方法执行完了，后面如果有代码就不会执行了
}
function foo3( a, b ){
alert(a + b);
}
function foo4( a, b ){
return a + b;
}
注意事项:
1.不需要类型，只写形参的名称就可以了。
2声明时不需要指定返回值类型；return可以有，也可以没有。
3. javascript中的函数没有重载的形式，后定义的函数会直接覆盖前面 的函数。
4. 一个函数可以接收任意个 参数。

参数:        JS的函数都是类似于Java中可变参数的。

在函数中可以直接使用arguments变量，arguments是一个数组，表示所有传递过来的参数。
在声明函数时，定义的形参就对应arguments数组中相应位置的参数值，写形参只是用着方便一点。
参数示例
定义：
function foo( a, b, c ){
…
}
调用：
foo()
foo( 1, 2 )
foo( 1, 2, 3 )
foo( 1, 3, 5, 7, 9 )
foo( “aa”, null, “cc” )
没有重载
当同一个名称的函数定义多次时，最终使用的是最后一个的定义。没有重载！
例：
function sum(){ alert(“11”); }
function sum(a,b){ alert(“22”); }*
调用时写sum(1,2)，结果还是显示“22”。
总结：
特点：
1、使用function关键字定义函数。
2、没有任何的返回值类型。
3、函数的定义优先执行，与顺序无关。
4、可以通过函数名赋值函数，函数变量的类型是function对象。
5、参数列表不能有var关键字。
6、函数的参数列表在具体调用的时候实参个数可以和形参个数不同。
7、JavaScript函数天然的支持可变参数。
8、同名的函数最后声明会覆盖前面以声明。Javascript中没有函数重载。
案例:体验JavaScript
定义一个输入框输入的月份，然后输出本月对应的天数。


学习JavaScript


月份：




function foo(){
var monthValue = document.getElementById("month").value;
// 如果是非数字，则不再继续执行
if( isNaN(monthValue) ){
alert("请输入正确的月份！");
return;
}
// 转为数字
monthValue = parseInt(monthValue);
// 判断范围
if( monthValue < 1 || monthValue > 12){
alert("请输入正确的月份（1--12）！");
return;
}
// 根据月份显示天数
switch(monthValue){ // 这时不会自动转换类型，所以先转型
case 2:
alert("28天");
break;
case 4:
case 6:
case 9:
case 11:
alert("30天");
break;
default:
alert("31天");
break;
}
}

1. 面向对象
   JavaScript面向对象的脚本语言，此时开发者在开发的时候需要找对象，默认提供了内置的对象。也可以根据开发者的需求自己定义对象。

5.1. 基本数据类型包装类
为了便于操作基本类型值，ECMAScript 提供了3个特殊的引用类型：Boolean,Number,String。它们是引用类型。当读取基本数据类型时，后台就会创建一个对应的基本包装类对象，所以我们在操作基本数据类型时，可以直接调用一些方法。

5.1.1. String

//通过构造函数创建String 对象
var b = new String(“java”);
var c = new String(“java”);
document.write(b + “,” + c);
document.write(b == c);
//false
//比较字符串的值是否相等
document.write(b.valueOf() == c.valueOf());

//属性
var a = “helloworld”;
document.write(a.length);

常见的方法：
Anchor（） 生产锚点
Blink（） 为元素添加blink标签
charAt() 返回指定索引位置处的字符。
charCodeAt() 回一个整数，代表指定位置上字符的 Unicode 编码。
Concat() 回字符串值，该值包含了两个或更多个提供的字符串的连接。
Fontcolor() 把带有 COLOR 属性的一个 HTML 标记放置在 String 对象中的文本两端
indexOf() 返回 String 对象内第一次出现子字符串的字符位置
italics() 把 HTML 标记放置在 String 对象中的文本两端。
Link() 把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。
Replace() 返回根据正则表达式进行文字替换后的字符串的复制
Split() 切割
Substr() 截取子串
toUpperCase() 转大写
toLowerCase 转小写
//方法
document.write(“第五章”.anchor(“ch1”));
document.write(“第五章”.blink());
// 返回在指定位置的字符。
document.write(“第五章”.charAt(0));
document.write(“a”.charCodeAt(0));
document.write(“第五章”.concat(“abc”));
document.write(“第五章”.fontcolor(“#ff0000”));
document.write(“第五章”.indexOf(“五”));
document.write(“第五章”.italics());
document.write(“第五章”.link());
document.write(“helloworld”.replace(/l/g, “L”));
document.write(“
”);
var names = “jack-lili-lucy”.split(“-“);
for (var temp in names) {
document.write(names[temp] + “
”);
}
document.write(“
”);
document.write(“helloworld”.substr(1, 2)); //el
document.write(“helloworld”.substring(1, 2));//e
document.write(“helloworld”.toUpperCase());
document.write(new String(“java”).toString() == new String(“java”).toString());

5.1.2. Number
构造函数
//创建number对象
var a = 12;
var b = new Number(12);
document.write(a + “:” + b);
//比较数值true
document.write(a == b);
//没有转型false
document.write(a === b);
//false
document.write(new Number(12) == new Number(12));
//false
document.write(new Number(12) === new Number(12));
// false
document.write(new Number(12).valueOf() == new Number(12).valueOf());
//true
document.write(new Number(12).valueOf() === new Number(12).valueOf());

属性:
document.write(“最大值” + Number.MAX_VALUE + ““);
document.write(“最小值” + Number.MIN_VALUE + ““);

方法
//方法
document.write(new Number(12).toString(10) + “
”);
document.write(new Number(12).toString(2) + “
”);
document.write(new Number(12).toString(8) + “
”);
document.write(new Number(12).toString(16) + “
”);
document.write(new Number(12.12345) + “
”);
document.write(new Number(12.12345).toFixed() + “
”);
document.write(new Number(12.12345).toFixed(2) + “
”);
document.write(new Number(12.12345).toFixed(3) + “
”);
备注：toFixed()是指定小数位数。
5.2. Math类
Math工具类中的方法
max()
min()
random()
…更多请看文档
document.write(Math.ceil(12.34) + “
”);
//13
document.write(Math.floor(12.34) + “
”);
//12
document.write(Math.round(12.54) + “
”);
//13
document.write(Math.round(12.35) + “
”);
//12
document.write(Math.random() + “
”);
//0~1
document.write(Math.max(12, 100, -1, 200, 320, 500) + ““);
document.write(Math.min(12, 100, -1, 200, 320, 500) + ““);

5.3. Date对象
查看文档
改变网页标题的方式
每一秒执行一次方法
练习: 标题栏显示时间,每一秒变化一次, 格式为: xxxx年xx月xx日 xx:xx:xx
提示:需要使用
setInterval(代码, 毫秒数) 每经过指定毫秒值后执行指定的代码。
setTimeout(代码, 毫秒数) 经过指定毫秒值后执行指定的代码（只执行一次）。
其中一个方法
查看文档学习Date的其他方法
function showDate() {
//获取系统时间
var date = new Date();
//获取年 月 日时分秒
var str = date.getFullYear() + “年” + (date.getMonth() + 1) + “月” + date.getDate() + “日” + “星期” + date.getDay() + ” ” + date.getHours() + “时” + date.getMinutes() + “分” + date.getMinutes() + “分” + date.getSeconds() + “秒”
//将格式化好的时间显示在叶面的span标签体中
var span = document.getElementById(“mydate”);
//给span标签设置标签体内容
span.innerHTML = str.fontcolor(“red”);
//调用定时函数
window.setTimeout(“showDate()”, 1000);
}

//调用函数
showDate();

5.4. 数组
数组定义：
创建数组的基本方式有2种.
第一种是使用Array的构造函数
不指定长度
var arrs=new Array();
如果确定知道数组保存的数量,可以通过构造函数传递数组的长度
指定长度
var arrs=new Array(20);
该数组有20个元素,每一项的默认值都是undefined
指定元素
var arrs=new Array(“hello”); 会创建一个元素的数组.
第二种方式
指定元素
创建一个包含3个字符串的数组
var arrs=[“aa”,”bb”,”cc”];
创建一个空数组
var arrs=[];
var values=[1,2];
数组初始化
var arrs=[“aa”,”bb”,”cc”];
color[2]=”xx”;//修改第3项
color[3]=”zz”;//新增第4项
数组遍历：
for(var i = 0; i < arr.length; i++){
alert(arr[i]);
}
或
for( var i in arr ){
// i 是遍历出的数组中的索引，从0开始，一直到最大索引。
// 如果有其他属性，也会遍历出来，其实索引就是数组对象的属性。
alert(arr[i]);
}
注意:
JS数组可以动态增长：
//数组的声明和初始化,注意:数组的长度取决于整数下标的个数
var arr = new Array();
arr[0] = “aa”;2
arr[1] = “bb”;
arr[6] = ‘xx’;
document.write(arr + “
”);
//遍历数组
for (var i = 0; i < arr.length; i++) {
document.write(arr[i]+”
”);
}
//下标越界时：
var arr = [“aa”, “bb”];
document.write(arr[200]);
// 显示undefined

常见方法
Array中的方法：
sort()
对当前数组进行排序，并返回已经进行了排序的此Array对象。
不会创建新对象，是在指定数组中直接进行排序。
reverse()
对当前数组进行反转排序，返回一个元素顺序被反转的 Array 对象。
不会创建新对象，是在指定数组中直接进行排序。

    push( [item1 [item2 [. . . [itemN ]]]] )        将以新元素出现的顺序添加这些元素。        如果参数之一为数组，那么该数组将作为单个元素添加到数组中。    pop()        移除数组中的最后一个元素并返回该元素。        如果该数组为空，那么将返回 undefined。    shift()        移除数组中的第一个元素并返回该元素。        如果该数组为空，那么将返回 undefined。    unshift([item1[, item2 [, . . . [, itemN]]]])        将指定的元素插入数组开始位置并返回该数组。    splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])        移除从 start 位置开始的指定个数的元素，并插入新元素，从而修改          concat([item1[, item2[, . . . [, itemN]]]])        返回一个新数组，这个新数组是由两个或更多数组组合而成的。原数组不变。        要加的项目（item1 … itemN）会按照从左到右的顺序添加到数组。            如果某一项为数组，那么添加其内容到 array1 的末尾。        如果该项目不是数组，就将其作为单个的数组元素添加到数组的末尾。         slice(start, [end])         返回一个包含了指定的部分元素的数组。        将返回索引大于等于start且小于end的一段。        原数组不变。    join(separator)        把所有元素由指定的分隔符分隔开来组成一个字符串，返回这个字符串值。        如果数组中有元素没有定义或者为 null，将其作为空字符串处理。

var a = [1, 2, 3];
// 连接两个或更多的数组，并返回结果。
document.write(a.concat([100, 30]) + “
”);
document.write(a.concat([100, 30], [60, 90]) + “
”);
// 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
var b = a.join(“$”);
document.write(b + “
”);
document.write( typeof b + “
”);
//string
// 删除并返回数组的最后一个元素
document.write(a.pop() + “
”);
// 向数组的末尾添加一个或更多元素，并返回新的长度。
document.write(a.push(99, 78) + “
”);
// 把数组转换为字符串，并返回结果。
document.write(a.toString() + “
”);
// 返回数组对象的原始值
var c = a.valueOf();
document.write( typeof c + “
”);

排序：
var a = [100, 9, 20, 3, 7, 96];
document.write(a + “
”);
//如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序
a.sort();
document.write(a + “
”);
//指定比较方式
a.sort(compareTo);
document.write(a + “
”);
function compareTo(a, b) {
return a - b;
}

5.5. 自定义对象
5.5.1. 无参构造函数

/*
* 自定义对象
*
* */
function Person() {
window.document.write(“constructor()
”);
}

var person = new Person();
//定义属性
person.name = “jack”;
person.age = 23;
//定义方法
person.work = function() {
window.document.write(“person working…
”);
};
//获取构造函数
window.document.write(person.constructor + “
”);

window.document.write(person.name + “,” + person.age + “
”);
person.work();

5.5.2. 有参数构造函数
function Person(name, age) {
this.name = name;
this.age = age;
this.work = function() {
alert(this.name + “:” + this.age);
}
}

var person = new Person(“jack”, 28);
person.work();

5.5.3. Object方式
/*
* 自定义对象Object方式
*
* */
var person = new Object();
person.name = “jack”;
person.age = 28;
person.sayHello = function() {
document.write(this.name + “:” + this.age);
}
person.sayHello();

该例子创建了一个名为person的对象,并添加了2个属性(name age)和一个方法(sayHello)

使用构造函数模式方式创建对象：
先自定义类，其实就是定义一个和类名相同的函数。
再使用new关键字调用定义好的类。
（任何函数，只要通过new操作符来调用，那它就可以作为构造函数）

说明：    要将属性与方法赋给this，这样才是表示是对象的属性，如果写var str则是方法中的局部变量。    不要写new Object()。    不要写return语句。JS在new Person()会做如下事：    1，创建一个新对象。    2，this指向新对象。    3，执行构造方法中的代码。    4，返回新对象。

字面量方式创建对象：
var person={
name:”李四”,
age:88,
eat:function(){
alert(“eating…”);
}
};
alert(person.name+person.age);
person.eat();
5.6. prototype
“prototype”字面翻译是“原型”，是javascript实现继承的主要手段。粗略来说就是：prototype是javascript中的函数(function)的一个保留属性，并且它的值是一个对象（我们可以称这个对象为”prototype对象”）。
Prototype注意的细节：
1. prototype是函数(function)的一个必备属性(书面一点的说法是”保留属性”)(只要是function,就一定有一个prototype属性)
2. prototype的值是一个对象
3. 可以任意修改函数的prototype属性的值。
4. 一个对象会自动拥有这个对象的构造函数的prototype的成员属性和方法。

需求：
1. 自定义一个数组的工具类。
function arrTool(){}
var ArrayTool = new arrTool();
ArrayTool.getMax = function(arr)
{
var max = 0;

for(var x=1; x<arr.length; x++){    if(arr[x]>arr[max])        max = x;}return arr[max];

};
ArrayTool.getMin = function(arr)
{
var min = arr[0];

for(var x=1; x<arr.length; x++){    if(arr[x]<min)        min = arr[x];}return min;

}
/*
ArrayTool.getMax = getMax;
//获取最值。
function getMax(arr)
{
var max = 0;

for(var x=1; x<arr.length; x++){    if(arr[x]>arr[max])        max = x;}return arr[max];

}
*/
ArrayTool.binarySearch = function(arr,key)
{
var min,max,mid;

min = 0;max = arr.length-1;while(min<=max){    mid  = (min+max)>>1;    if(key>arr[mid])        min = mid + 1;    else if(key<arr[mid])        max = mid - 1;    else        return mid;}return -1;

}
/*
ArrayTool.binarySearch = halfSearch;
//折半查找，必须是对有序的数组。
function halfSearch(arr,key)
{
var min,max,mid;

min = 0;max = arr.length-1;while(min<=max){    mid  = (min+max)>>1;    if(key>arr[mid])        min = mid + 1;    else if(key<arr[mid])        max = mid - 1;    else        return mid;}return -1;

}
2. 把数组的工具方法添加到javascript内置对象Array中。

Array.prototype.getIndex = function(element)

{
for(var x=0; x