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 从此变成了因特网的必备组件。

javascript运行必须依赖于宿主环境语言，即页面语言HTML。
是解释型的语言，解释型：不需要编译，解释器程序会每读取一条语句就执行。运行速度慢，浏览器中默认内置了javascript的解释器程序。

常见的脚本语言：

ECMASCRIPT主要进行所有脚本语言的标准制定。
JavaScript
JScript
VBScript
ActionScript
JavaScript是基于对象和事件的脚本语言。

JavaScript特点

安全性（不允许直接访问本地硬盘），它可以做的就是信息的动态交互。
跨平台性。（只要是可以解释Js的浏览器都可以执行，和平台无关。）

JavaScript与Java不同

JS是Netscape公司的产品，Java是Sun公司的产品
JS是基于对象，Java是面向对象。
JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
JS是弱类型，Java是强类型。

JavaScript内容

尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
在这里插入图片描述
目前我们学习JavaScript也就是需要学习：

JavaScript语法基础
使用JS操作网页（DOM）
使用JS操作浏览器（BOM）

体验JavaScript

<html >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>体验JavaScript语言</title>
	</head>
	<body>
		<h1>体验JavaScript语言</h1>
		<script type="text/javascript">
			window.document.write("hello,world");
		</script>
	</body>
</html>

JavaScript基础

引入方式与引入位置

向HTML页面插入JavaScript的主要方法，就是使用<script元素>。使用

1.JS代码存放在标签对<script>．．．</script>中。
2.使用script标签的src属性引入一个js文件。（方便后期维护，扩展）
例：<script src=”test.js” type=”text/javascript”></script>
注：规范中script标签中必须加入type属性。

注意：
1、页面上可以有多个<script>标签
2、<script>标签按顺序执行
3、<script>标签可以出现在任意的页面位置
4、<script>标签一定要写关闭，而不能<script/>这样关闭。否则没有任何错误信息，但是没有运行结果。

区分大小写

与 Java 一样，变量、函数名、运算符以及其他一切东西都是区分大小写的。
比如：变量 test 与变量 TEST 是不同的。

注释

Java：      //    /*  */    /**  */
HTML：    <!--  -->
CSS：      /*   */

JavaScript：
ECMAScript注释与 Java语言的注释相同
ECMAScript 借用了这些语言的注释语法。
有两种类型的注释：

单行注释以双斜杠开头（//）
多行注释以单斜杠和星号开头（/），以星号和单斜杠结尾（/）

常用函数

window.alert() 或写为 alert() ：显示一个提示框显示内容。
window.document.write() ：在网页的当前位置处写内容。

变量

变量是弱类型的

与 Java不同，ECMAScript 中的变量无特定的类型，定义变量时只用 var 运算符，可以将它初始化为任意值。
因此，可以随时改变变量所存数据的类型（尽量避免这样做）。

例子

var color = "red";
var num = 25;
var visible = true;

ECMAScript 中的变量是用 var 运算符（variable 的缩写）加变量名定义的。例如：

var test = "hi";

在这个例子中，声明了变量 test，并把它的值初始化为 “hi”（字符串）。

每个变量仅仅是一个用于保存值的占位符而已。定义变量时要使用var操作符（var是关键字），后跟变量名

var message;

这行代码定义了一个名为message的变量，该变量可以用来保存任何值，也可以直接初始化变量。

var message ="hi";

ECMAScript 中的变量无特定的类型，定义变量时只用 var 运算符，可以将它初始化为任意值。

<script type="text/javascript" >
	//定义变量
	var color = "red";
	var num = 25;
	var visible = true;
</script>

同时，可以随时改变变量所存数据的类型（尽量避免这样做）。

<script type="text/javascript" >
	//定义变量
	var message = "hello";
	message = 100;
	alert(message);
</script>

案例中变量message一开始保存了一个字符串值"hi" 然后又被一个数值100取代。这在ECMAScript是有效的，但是不建议这样使用。

使用细节：
1、var关键字在定义变量的时候可以省略不写
2、变量名可以重复，后面的将覆盖前面的变量
3、变量的类型取决于值的类型

一条语句定义多个变量。
中间使用豆号隔开即可，可初始化，也可以不初始化。

<script type="text/javascript" >
	var name = "jack", 
	age = 28, 
	gender = "男";
</script>

JavaScript代码块及其代码块变量作用域

<script type="text/javascript" >
	//代码块 (Java)对代码进行封装 隔离变量的作用域
	{
		var a = 100;
		document.write(a + "</br>");
	} {
		document.write(a + "</br>");
		//JavaScript不会隔离变量作用域
	}

</script>

检测数据类型

typeof操作符

转换成数字

ECMAScript 提供了两种把非数字的原始值转换成数字的方法，即 parseInt() 和 parseFloat()。只有对 String 类型调用这些方法，它们才能正确运行；对其他类型返回的都是 NaN。

在判断字符串是否是数字值前，parseInt() 和 parseFloat() 都会仔细分析该字符串。

parseInt() 方法首先查看位置 0 处的字符，判断它是否是个有效数字；如果不是，该方法将返回 NaN，不再继续执行其他操作。但如果该字符是有效数字，该方法将查看位置 1 处的字符，进行同样的测试。这一过程将持续到发现非有效数字的字符为止，此时 parseInt() 将把该字符之前的字符串转换成数字。

例如，如果要把字符串 “12345red” 转换成整数，那么 parseInt() 将返回 12345，因为当它检查到字符 r 时，就会停止检测过程。

<script type="text/javascript" >
	var num = parseInt("1234abc");
	document.write(num); //1234
</script>

字符串中包含的数字字面量会被正确转换为数字，比如 “0xA” 会被正确转换为数字 10。不过，字符串 “22.5” 将被转换成 22，因为对于整数来说，小数点是无效字符。

判断是否是一个有效的数值.

isNaN

isNaN( 表达式 )，返回的结果是否为NaN（非数值）

<script type="text/javascript" >
	document.write(isNaN("abc")+"<br/>"); //true
	document.write(isNaN("123")+"<br/>"); //false
</script>

运算符(operator)

在这里插入图片描述

流程控制语句

在这里插入图片描述

面向对象

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

基本数据类型包装类

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);

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());

Boolean

var a = new Boolean(false);
document.write(a.constructor + "<br/>");
document.write(a.toString() + "<br/>");
document.write(a.valueOf() + "<br/>");
if (a.valueOf()) {
	document.write("条件成立<br/>");
} else {
	document.write("条件不成立<br/>");
}

使用细节:
构造函数中可以传递任意值,实参在内部会进行自动类型转换,转为true或者false

Math类

document.write(Math.ceil(12.34) + "<br/>");
//13
document.write(Math.floor(12.34) + "<br/>");
//12
document.write(Math.round(12.54) + "<br/>");
//13
document.write(Math.round(12.35) + "<br/>");
//12
document.write(Math.random() + "<br/>");
//0~1
document.write(Math.max(12, 100, -1, 200, 320, 500) + "</br>");
document.write(Math.min(12, 100, -1, 200, 320, 500) + "</br>");

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();

数组

数组定义：

创建数组的基本方式有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 + "<br/>");
//遍历数组
for (var i = 0; i < arr.length; i++) {
	document.write(arr[i]+"<br/>");
}
//下标越界时：
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]) + "<br/>");
document.write(a.concat([100, 30], [60, 90]) + "<br/>");
// 	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
var b = a.join("$");
document.write(b + "<br/>");
document.write( typeof b + "<br/>");
//string
// 	删除并返回数组的最后一个元素
document.write(a.pop() + "<br/>");
// 	向数组的末尾添加一个或更多元素，并返回新的长度。
document.write(a.push(99, 78) + "<br/>");
// 	把数组转换为字符串，并返回结果。
document.write(a.toString() + "<br/>");
// 返回数组对象的原始值
var c = a.valueOf();
document.write( typeof c + "<br/>");

自定义对象

无参构造函数

/*
 * 自定义对象
 *
 *  */
function Person() {
	window.document.write("constructor()<br>");
}

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

window.document.write(person.name + "," + person.age + "<br/>");
person.work();

有参数构造函数

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();

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();

prototype

“prototype”字面翻译是“原型”，是javascript实现继承的主要手段。粗略来说就是：prototype是javascript中的函数(function)的一个保留属性，并且它的值是一个对象（我们可以称这个对象为"prototype对象"）。
Prototype注意的细节：

prototype是函数(function)的一个必备属性(书面一点的说法是"保留属性")(只要是function,就一定有一个prototype属性)
prototype的值是一个对象
可以任意修改函数的prototype属性的值。
一个对象会自动拥有这个对象的构造函数的prototype的成员属性和方法。

【JS笔记】学JS前，你一定要了解的JS