javaweb学习笔记（八）：JavaScript（1）
目录
1.javascript
1.1 js的引入方式
1.2 ECMAScript基础
1.2.1语法
1.2.2数据类型
1.2.3 运算符
1.3 ECMA对象
1.3.1 Function对象
1.3.2Number对象
1.3.3 String对象
1.3.4类型转换
1.3.5 typeof()、instanceof()运算符
1.3.6 Global对象
1.3.7Math对象
1.3.8 Array对象
1.3.9 Date对象
1.3.10 RegExp对象
1.javascript
Javascript 在开发中绝大多数情况是基于对象的，也是面向对象的。一个完整的JavaScript实现由以下3个不同部分组成：
①核心（ECMAScript）
②文档对象模型（DOM） Document object model(整合js和html和css)
③浏览器对象模型（BOM） Browser object model(整合js和浏览器)
1.1 js的引入方式
①在页面上使用script标签，在标签中书写js代码。 例：
js的引入方式
打开浏览器，查看：
②使用src属性引入外部.js文件。此时script标签中，不能再书写js代码。 例：
js的引入方式
其中a.js内容为：
打开浏览器，查看：
1.2 ECMAScript基础
1.2.1语法
①变量区分大小写,可一次声明多个变量,并且变量不必具有相同的类型。 例：
var test = "hi", age = 25;
②变量是弱类型,可以随时变化 例：
var a=1;
a=”hello”;
注：由于js是弱类型变量，一般在驼峰命名法命名变量前附加一个小写字母，说明该变量的类型。 例：
var iMyTestValue = 0, sMySecondValue = "hi";
| 数组 |
a |
aValues |
| 布尔型 |
b |
bFound |
| 浮点型（数字） |
f |
fValue |
| 函数 |
fn |
fnMethod |
| 整型（数字） |
i |
iValue |
| 对象 |
o |
oType |
| 正则表达式 |
re |
rePattern |
| 字符串 |
s |
sValue |
| 变型（可以是任何类型） |
v |
vValue |
③声明变量时加var，作用范围为所在代码块，不加var,作用范围为全局。
③单行注释：// 多行注释：/* */
1.2.2数据类型
在 ECMAScript 中，变量可以存在两种类型的值，即原始值和引用值。
原始值 ：存储在栈（stack）中的简单数据段，它们的值直接存储在变量访问的位置。
引用值 ：存储在堆（heap）中的对象，存储在变量处的值是一个指针（point），指向存储对象的内存处。
原始值共有5中类型。如下:
undefined（一般是系统自动赋值，当创建一个变量，并且没有初始化时，其值即为 undefined，或者函数无明确返回值时，返回的即是undefined。）
null（一般人为赋值为null，它是对象数据类型的占位符）
boolean（布尔）
number （数字，不区分整型或浮点型）
string（字符串，可使用单引号或双引号）
注：
①值 undefined 实际上是从值 null 派生来的，因此ECMAScript 把它们定义为相等的。尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。
② Number 类型既可以表示32位的整数，还可以表示64位的浮点数。对于浮点字面量，用它进行计算前，真正存储的是字符串。如：
定义十进制整数var iNum = 86;
定义八进制var iNum = 070;
定义十六进制var iNum = 0xAB;
科学计数法var fNum = 5.618e7;var fNum = 8-e17
定义浮点数var fNum = 5.0;
数字的最大值:Number.MAX_VALUE
数字的最小值:Number.MIN_VALUE
超过最大值:Number.POSITIVE_INFINITY(不可参与运算)
小于最小值:Number.NEGATIVE_INFINITY(不可参与运算)
特殊值:NaN(Not A Number).一般说来，这种情况发生在类型（String、Boolean 等）转换失败时。NaN不等于NaN,可以使用isNaN()方法.
③转义字符：
1.2.3 运算符
①js中的循环语句（while...do和do...while）、判断语句（for、switch、if...else）都和java语法一致。
②当一元运算符（+、-）对字符串进行操作时，会把字符串转换为数字型。它计算字符串的方式与 parseInt() 相似，主要的不同是只有对以 "0x" 开头的字符串（表示十六进制数字），一元加法运算符才能把它转换成十进制的值。因此，用一元加法转换 "010"，得到的总是 10，而 "0xB" 将被转换成 11。 例：
var sStr="13";
var iNum1=+"13";
alert(typeof(sStr));//string
alert(typeof(iNum1));//number
③位运算符（同java）
AND(&) OR(|) NOT(~) XOR(^) 左移(<<) 右移(>>>) 无符号右移(>>>)
④js会在需要什么类型时，自动转换，下为常见类型自动转Boolean表：
逻辑NOT(!) 例：
alert(!0);//true
alert(!null);//true
alert(!NaN);//true
在运算过程中，首先js 会将 && 和|| 两边的值转成Boolean 类型，然后再算值 ，&&运算如果返回true，则取最后一个的值，如果为false，则取第一个false值。如果|| 返回true,则取第一个为true的值，如果为false，则取最后一个为false的值。
逻辑AND（&&） 例：
var a=4&&3&&null&&0;
var b=4&&3&&0&&null;
var c=4&&3&&"a";
alert(a);//null
alert(typeof(a));//object
alert(b);//0
alert(typeof(b));//number
alert(c);//a
alert(typeof(c));//string
逻辑OR（||） 例：
var a=""||null||3||4;
var b=""||0||null;
var c=""||null||0;
alert(a);//3
alert(typeof(a));//number
alert(b);//null
alert(typeof(b));//object
alert(c);//0
alert(typeof(c));//number
注：逻辑与优先级高于逻辑或。 例：
var a=3||2&&5||0;
alert(a);//3 先算2&&5的值为5，然后再3||5为3，最后再3||0为3
⑤关系运算符
字符串间比较时，比较的是其ASCII码。当字符串与数字型比较时，会将字符串自动转换为数字型再比较（注：只是比较时临时转换，其类型还是原类型）。 例：
var bResult="Blue"<"alpha";
alert(bResult);//true
var bNumber="25"<"3";
alert(bNumber);//true
var bNumber1="25"<3;
alert(bNumber1);//false
当数字型与布尔值判断相等性时，布尔值将被转换成数字值。其中false 转换成 0，true 为 1。 例：
alert(1==true);//true
alert(0==false);//true
alert(2==true);//false
如果一个运算数是对象，另一个是字符串，在检查相等性之前，对象转换成字符串。 如果一个运算数是对象，另一个是数字，在检查相等性之前，对象转换成数字。如果两个运算数都是对象，比较的是它们的引用值。如果两个运算数指向同一对象，等号返回 true。
凡是NaN参与的关系运算，除了 ! 和 != ，其余全是false。
全等号（===）参与比较时，包括自身的数据类型。 例：
alert(1===true);//false
alert("1"===true);//false
⑥三元运算符、赋值运算符同java
1.3 ECMA对象
java中八大基本数据类型都有其包装类，同样的，js中5个原始类型，其中三个有其包装类，分别为：Number、String、Boolean。
Java中有自动拆箱装箱机制实现两者的转换，js中也有伪对象的概念，原始类型可以直接调用对应包装类型的属性或函数。
1.3.1 Function对象
例1：
function对象例1
例2：
function对象例2
函数的返回值用return（同java），同样也可结束一个方法。void 运算符对任何值返回 undefined。可用于拦截方法的返回值。该运算符通常用于避免输出不应该输出的值，例如，从 HTML 的 元素调用 JavaScript 函数时。要正确做到这一点，函数不能返回有效值，否则浏览器将清空页面，只显示函数的结果。
例3：
我的js
点我
点我
1.3.2Number对象
toFixed()、toExponential() 和 toPrecision() 方法都会进行舍入操作，以便用正确的小数位数正确地表示一个数。 例：
var oNum=new Number(68);
var iNum=oNum.valueOf();
alert(iNum);//68 为原始值 number类型
alert(Number.MAX_VALUE);
alert(oNum.toString());//68
alert(oNum.toFixed(2));//68.00
alert(oNum.toExponential(2));//6.80e+1
alert(oNum.toPrecision(1));//7e+1
alert(oNum.toPrecision(3));//68.0
1.3.3 String对象
属性：length 返回字符串中字符个数。 例：
var oStringObject=new String("hello");
alert(oStringObject.length);//5
alert("word".length);//4 伪对象机制
方法：①支持正则的四个方法（见1.3.10 RegExp对象）：
search（）、match（）、replace（）、split（）
②charAt() 和 charCodeAt()
这两个方法都有一个参数，即要操作的字符的位置。前者返回指定字符，后者返回指定字符的字符代码。
③indexOf() 和 lastIndexOf()
返回的都是指定的子串在另一个字符串中的位置，如果没有找不到子串，则返回 -1。
④slice()和 substring()
返回的都是要处理的字符串的子串，都接受一个或两个参数。第一个参数是要获取的子串的起始位置，第二个参数（如果使用的话）是要获取子串终止前的位置（包头不包尾）。如果省略第二个参数，终止位就默认为字符串的长度。
注：1.两个方法都不改变 String 对象自身的值。它们只返回原始的 String 值，保持 String 对象不变。
2.只在参数为负数时，它们处理参数的方式才稍有不同。对于负数参数，slice() 方法会用字符串的长度加上参数，substring() 方法则将其作为 0 处理（也就是说将忽略它）
⑤toLowerCase()和toUpperCase() 分别返回小写和大写。 例：
function对象例2
1.3.4类型转换
（1）转换成字符串
ECMAScript 的 Boolean 值、数字和字符串的原始值都是伪对象，这意味着它们实际上具有属性和方法。如:
nString的length属性
nBoolean 值、数字和字符串都有 toString() 方法
（2）转换成数字
nparseInt() 和 parseFloat()都可以把非数字的原始值转换成数字。parseInt()方法首先查看位置 0 处的字符，判断它是否是个有效数字；如果不是，该方法将返回 NaN，不再继续执行其他操作。 例：
var iNum1=parseInt("123red");//123
var iNum2=parseInt("0xA");//10
var iNum3=parseInt("56.9.1");//56
var iNum4=parseInt("red");//NaN
var fNum1=parseFloat("123red");//123
var fNum2=parseFloat("0xA");//0
var fNum3=parseFloat("56.9.1");//56.9
var fNum4=parseFloat("red");//NaN
（3）强制类型转换
①Boolean(value) - 把给定的值转换成 Boolean 型；
②Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
注：Number() 函数的强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式相似，只是它转换的是整个值，而不是部分值。
③String(value) - 把给定的值转换成字符串
注：lString() 是最简单的强制转换成字符串，和调用 toString() 方法的唯一不同之处在于，对 null 和 undefined 值强制类型转换可以生成字符串而不引发错误
var b1=Boolean("");//false
var b2=Boolean(4);//true
var b3=Boolean(new Object());//true
var n1=Number(null);//0
var n2=Number(undefined);//NaN
var n3=Number(true);//1
var n4=Number("1.2.3");//NaN
var s1=String(null);//null
var o1=null;
var s2=o1.toString();//会引发错误
1.3.5 typeof()、instanceof()运算符
在使用 typeof()时，会返回： l
undefined - 如果变量是 Undefined 类型的
lboolean - 如果变量是 Boolean 类型的
lnumber - 如果变量是 Number 类型的
lstring - 如果变量是 String 类型的
lobject - 如果变量是一种引用类型或 Null 类型的
instanceof（） 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方法不同的是，instanceof 方法能够明确地确认对象为某特定类型。 例：
var str=new String("abc");
alert(str instanceof String);//true
alert("abc" instanceof String);//false 原始值不是对象
1.3.6 Global对象
全局对象是预定义的对象，作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性，所以它没有名称。
不需要创建对象，其函数可以直接使用。
var name="http:www.baidu.com哈喽";
var sStr1=encodeURI(name);//http:www.baidu.com%E5%93%88%E5%96%BD
var sStr2=decodeURI(sStr1);//http:www.baidu.com哈喽
var sStr3=encodeURIComponent(name);
//http%3Awww.baidu.com%E5%93%88%E5%96%BD
var sStr4=decodeURIComponent(sStr3);//http:www.baidu.com哈喽
alert(eval("1+1"));//2
alert(eval("new String('abc')"));//abc
1.3.7Math对象
var num=Math.PI;//3.141592653589793
var num1=Math.random();//0-1之间的随机数
var num2=Math.round(3.4);//3 四舍五入
var num3=Math.pow(2,4);//16 计算幂
var num4=Math.min(2,3,5);//2
var num5=Math.max(2,3,5);//5
1.3.8 Array对象
语法:
new Array();
new Array(size);
new Array(element0, element1, ..., elementn)
属性:
方法：
注：①数组中的元素可以是任意类型。②数组的长度可以随时变化。③sort（）方法默认会按照字符串的比较方式排序，也可以传入比较器，自定义排序规则。 例：
var arr1=[1,2,3,4,5];
var arr2=new Array();
var arr3=new Array(5);//初始化长度
var arr4=new Array(1,2,3,4,5);
alert(arr1.pop());//5 删除并返回数组的最后一个元素
alert(arr1.push(6,7));//6 返回新的长度
alert(arr1.reverse());//7,6,4,3,2,1
var arr5=["ha",3.1,true,undefined,null,new Object()];
arr5[15]="world";
alert(arr5.length);//16
alert(arr5[15]);//world
alert(arr5[11]);//undefined
var arr6=new Array(14,1,100,8,5);
alert(arr6.sort());//1,100,14,5,8 按字符串比较规则排序。
//自定义比较器
function compare(a,b){
return a-b;
}
alert(arr6.sort(compare));//1,5,8,14,100
1.3.9 Date对象
语法:
var myDate=new Date()
var myDate=new Date(毫秒数);//自1970年1月一日零时算起。
方法:
1.getFullYear() 获取年份
2.getMonth() 获取月份（0~11）
3.getDate() 获取一个月中的某一天（0~31）
4.getHours() 获取小时（0~23）
5.getMinutes() 获取分钟（0~59）
7.getSeconds() 获取秒（0~59）
8.getMilliseconds()获取毫秒（0~999）
9.getTime() 获取从1970年1月1日至今的毫秒数
9.toLocaleString()根据本地时间格式，把Date对象转换为字符串。
10.toLocaleTimeString()根据本地时间格式，把Date对象的时间部分转换为字符串。
11.toLocaleDateString()根据本地时间格式，把Date对象的日期部分转换为字符串。
var data1=new Date();
var data2=new Date(125554666657);
//方法
alert(data2.getFullYear());//1973
alert(data2.getMonth());//11
alert(data2.getDate());//24
alert(data2.getHours());//12
alert(data2.getMinutes());//17
alert(data2.getSeconds());46
alert(data2.getMilliseconds());//657
alert(data2.getTime());//125554666657
alert(data2.toLocaleString());// 1973/12/24 下午12:17:46
alert(data2.toLocaleTimeString());// 下午12:17:46
alert(data2.toLocaleDateString());// 1973/12/24
1.3.10 RegExp对象
语法:
/pattern/attributes
new RegExp(pattern, attributes);
参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。
方法：
支持正则表达式的String对象的方法：
例：//创建
var reg1=new RegExp("e","gi");
var reg2=/e/g;
//方法
alert(reg2.test("hello"));//true
//String对象与正则结合的方法
var str="hello world";
alert(str.split(/o/g));// hell, w,rld
alert(str.replace(/l/g,"a"));//heaao warld
alert(str.match(/or/g));//or
alert(str.search(/o/g));//4