一JavaScript概述和发展史
a)Netscape在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言。后来在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的,因此语法上有类似之处,一些名称和命名规范也借自Java,但是JavaScript与Java是完全不同的两种语言。
b)微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫JScript。
c)为了统一标准,ECMA(欧洲计算机制造协会)定义了ECMA-262规范,国际标准化组织及国际电工委员会(ISO/IEC)也采纳ECMAScript作为标准(ISO/IEC-16262)。从此,Web浏览器就开始努力(虽然有着不同的程度的成功和失败)将ECMAScript作为JavaScript实现的规范和标准。
JavaScript是一种基于对象和事件驱动的脚本语言,由浏览器解释、执行。一个完整的 JavaScript 是由以下 3 个不同部分组成的:
·核心(ECMAScript)
·文档对象模型(DOM) Document object model(整合js和html和css)
·浏览器对象模型(BOM) Broswer object model(整合js和浏览器)
二、ECMAScript
ECMAScript是JavaScript的核心,描述和规定了以下内容:
·语法
·类型
·语句
·关键字
·保留字
·运算符
·对象
2.1脚本的基本结构
lJS代码必须写在中
l一个页面可以包含多个块
l可以放在网页的任何位置
//JavaScript代码;
document.write(“hello,JavaScript
”);
document.write(“hello,world”);
也可以把JS代码放到外部的.js文件中,例如:
2.2ECMAScript语法
2.2.1声明变量
1.JS是弱类型的动态定义语言
l静态类型定义语言
一种在编译时,数据类型是固定的语言。大多数静态类型定义语言强制这一点,它要求你在使用所有变量之前要声明它们的数据类型。Java和C是静态类型定义语言。
l动态类型定义语言
一种在执行期间才去发现数据类型的语言,与静态类型定义相反,它们是在第一次给一个变量赋值的时候才找出变量的类型。
l强类型定义语言
一种总是强制进行类型定义的语言。
l弱类型定义语言
一种类型可以被忽略的语言,与强类型定义相反。
2.每行的分号可有可无,建议写上
3.JS代码注释与java相同
4.变量声明不是必须的
ECMAScript的解释程序遇到未声明过的标识符时,用该变量名创建一个全局变量,并将其初始化为指定的值。
这是该语言的便利之处,不过这样做也容易出问题。最好的习惯是像使用其他程序设计语言一样,总是声明所有变量。
2.2.2原始值和引用值
在ECMAScript中,变量可以存两种类型的值,即原始值和引用值。
l原始值(相当于Java中的基本数据类型)
存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置。
l引用值(相当于Java中的引用数据类型)
存储在堆(heap)中的对象,也就是说,存储在变量处的值是一个指针(point),指向存储对象的内存处。
2.2.3原始值的数据类型
五种原始值的数据类型如下:
lundefined
lnull
lboolean
lnumber
lstring
1.Undefined类型
Undefined类型只有一个值,即undefined。当声明的变量未初始化时,该变量的默认值是undefined。当函数无明确返回值时,返回的也是值"undefined";
var d;
document.write(d);
2.Null类型
另一种只有一个值的类型是Null,它只有一个专用值null,即它的字面量。值undefined实际上是从值null派生来的,因此ECMAScript把它们定义为相等的。
尽管这两个值相等,但它们的含义不同。undefined是声明了变量但未对其初始化时赋予该变量的值,null则用于表示尚未存在的对象。如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是null。
3.Boolean类型
Boolean类型是ECMAScript中最常用的类型之一。它有两个值true和false(即两个Boolean字面量)。
var bool=true;
4.Number类型
ECMA-262中定义的最特殊的类型是Number类型。这种类型既可以表示32位的整数,还可以表示64位的浮点数。
l定义十进制整数var iNum = 86;
l定义八进制var iNum = 070;(了解)
l定义十六进制var iNum = 0xAB;(了解)
l定义浮点数var fNum = 5.0;
5.string类型
JS不区分字符和字符串,用单引号或双引号均可
var s1=”hello”;var s2=’world’;
注意:JS是弱类型定义语言,声明变量时不需要指定这些数据类型
三ECMAScript运算符
3.1typeof运算符
ECMAScript提供了typeof运算符来判断一个值是哪种原始值类型。对变量或值调用typeof运算符将返回下列值之一:
lundefined -如果变量是Undefined类型的
lboolean -如果变量是Boolean类型的
lnumber -如果变量是Number类型的
lstring -如果变量是String类型的
lobject -如果变量是一种引用类型或Null类型的
document.write(typeof(true));
document.write(typeof(100));
3.2算术运算符
+ - * / % ++ -- 跟Java中一样
3.3赋值运算符
·乘法/赋值(*=)
·除法/赋值(/=)
·取模/赋值(%=)
·加法/赋值(+=)
·减法/赋值(-=)
var iNum = 10;
iNum = iNum + 10; //等同于iNum += 10;
3.4关系(比较)运算符
3.5等性运算符(相等判断)
l执行类型转换的规则如下:
·如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1。
·如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。
·如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。
·如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。
l在比较时,该运算符还遵守下列规则:
·值 null 和 undefined 相等。
·在检查相等性时,不能把 null 和 undefined 转换成其他值。
·如果两个运算数都是对象,那么比较的是它们的引用值。
·如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等。
表达式
结果
null==undefined
true
false==0
true
true==1
true
true==2
false
“5”==5
true
var s1=new String("hello");
var s2=new String("hello");
s1==s2;
var s3=s1;
s1==s3;false
true
l全等号和非全等号
==是非全等,运算前会自动进行类型转换
===是全等,运算前不会自动进行类型转换
document.write("5"==5);
document.write("5"===5);
3.6逻辑运算符
给定x=6以及y=3,下表解释了逻辑运算符:
注意:JS中没有单与和单或
3.7条件运算符(三元运算符)(跟java中一模一样)
var num=(5>3)?1:2;
document.write(num);
四ECMAScript语句(流程控制)
单重if
if-else
多重if
for 水平线金字塔
for/in
while
do-while
双重循环(表格乘法口诀表)
跟Java一样
五ECMAScript对象
从传统意义上来说,ECMAScript并不真正具有类。ECMAScript定义了“对象的定义”,逻辑上等价于其他程序设计语言中的类,这就是“基于对象”。
5.1String对象
String 对象是 String 原始类型的对象表示法,它可以使用以下方式创建的:
vars= new String("hello world");
var s=“hello”;
5.2Global对象
全局对象是预定义的对象,作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象,可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性或方法,所以可以直接调用。
方法
5.3Math对象
5.4Number对象
正如你可能想到的,Number 对象是 Number 原始类型的引用类型。要创建 Number 对象,采用下列代码:
var oNumberObject = new Number(68);
var num=68;
要得到数字对象的 Number 原始值,只需要使用 valueOf() 方法:
var iNumber = oNumberObject.valueOf();
5.5Array对象
Array 对象用于在单个的变量中存储多个值。
语法:
new Array();
new Array(size);没有默认初始值
new Array(element0,element1, ...,elementn)
属性:
方法:
lfor/in
5.6Date对象
Date对象用于处理日期和时间。
语法:
var myDate=new Date(); //获取当前时间
方法:
1.getFullYear()获取年份
2.getMonth()获取月份注意1月份结果为0
3.getHours()小时
4.getDate()日期
5.getMinutes()分钟
6.getSeconds()获取秒
7.getTime()获取毫秒值
8.toLocaleString()获取本地的时间格式字符串
5.7ECMAScript类型转换
转换成字符串
1.+
var n=100;
document.write(typeof(n)+"
");
n=n+"";
document.write(typeof(n));
2.ECMAScript的布尔值、数字和字符串的原始值的有趣之处在于它们是伪对象,这意味着它们实际上具有属性和方法。例如:数字和字符串都有toString()方法
var n=100;
document.write(typeof(n)+"
");
var m=n.toString();
document.write(typeof(m));
转换成数字(Global对象)
nECMAScript提供了两种把非数字的原始值转换成数字的方法,即parseInt()和parseFloat()。
nparseInt()方法首先查看位置0处的字符,判断它是否是个有效数字;如果不是,该方法将返回NaN,不再继续执行其他操作。
a)var iNum1 = parseInt("12345red");//返回 12345
b)var iNum1 = parseInt("0xA");//返回 10
c)var iNum1 = parseInt("56.9");//返回 56
d)var iNum1 = parseInt("red");//返回 NaN
lparseFloat()方法
a)var fNum1 = parseFloat("12345red");//返回 12345
b)var fNum2 = parseFloat("0xA");//返回 NaN
c)var fNum3 = parseFloat("11.2");//返回 11.2
d)var fNum4 = parseFloat("11.22.33");//返回 11.22
e)var fNum5 = parseFloat("0102");//返回 102
f)var fNum1 = parseFloat("red");//返回 NaN
ECMAScript的强转
ECMAScript 中可用的三种强制类型转换如下:
·Boolean(value) - 把给定的值转换成 Boolean 型
·Number(value) - 把给定的值转换成数字(可以是整数或浮点数)
·String(value) - 把给定的值转换成字符串
lBoolean()
a)var b1 = Boolean("");//false - 空字符串
b)var b2 = Boolean("hello");//true - 非空字符串
c)var b1 = Boolean(50);//true - 非零数字
d)var b1 = Boolean(null);//false - null
e)var b1 = Boolean(0);//false - 零
f)var b1 = Boolean(new object());//true - 对象
lNumber()
Number() 函数的强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式相似,只是它转换的是整个值,而不是部分值。
lString()
强制转换成字符串和调用 toString() 方法的唯一不同之处在于,对 null 和 undefined 值强制类型转换可以生成字符串而不引发错误:
var s1 = String(null);//"null"
var oNull = null;
var s2 = oNull.toString();//会引发错误
5.8RegExp对象
RegExp 对象用来表示和存储一个正则表达式,它是对字符串执行格式匹配的对象。
l语法:
var re=new RegExp(“正则表达式”); 双斜杠
var re=/正则表达式/; 更方便 不用双斜杠
l常用符号:查阅帮助文档
lRegExp对象的方法
var reg=/\d+/;
document.write(reg.exec("p2lus1"));
var reg=/\d+/;
document.write(reg.test("plus"));
l支持正则表达式的String对象的方法:
var str="1 plus 2 equal 3";
document.write(str.match(/\d+/));
document.write(str.match(/\d+/g));
------------------Day03------------------------------------------------------------------------------------------------
5.9Function对象
Function类可以表示开发者定义的任何函数。
用Function类直接创建函数的语法如下:
var function_name = new function(arg1,arg2, ...,argN,function_body)
function sayHi(sName, sMessage) {
alert("Hello " + sName + sMessage);
}
还可以这样定义它:
var sayHi
=
new Function("sName", "sMessage", "alert(\"Hello \" + sName + sMessage);");
虽然由于字符串的关系,这种形式写起来有些困难,但有助于理解函数只不过是一种引用类型,它们的行为与用Function类明确创建的函数行为是相同的。
Function对象的length属性
如前所述,函数属于引用类型,所以它们也有属性和方法。
ECMAScript定义的属性length声明了函数期望的参数个数。
Function对象的方法
Function对象也有与所有对象共享的valueOf()方法和toString()方法。这两个方法返回的都是函数的源代码,在调试时尤其有用。
六 事件
事件是可以被控件识别的操作,如按下确定按钮,选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件,如窗体的加载、单击、双击等事件,编辑框(文本框)的文本改变事件,等等。
Js中的事件列表:
Event对象
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!
七JSON
JSON(JavaScript Object Notation)js对象表示法。是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式,成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(网络传输速度)。
JSON 语法
JSON 语法规则
JSON语法是JavaScript对象表示语法的子集。
·数据在名称/值对中
·数据由逗号分隔
·花括号保存对象
·方括号保存数组
JSON 名称/值对
JSON数据的书写格式是:名称/值对。
名称/值对组合中的名称写在前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开:
"firstName":"John"
这很容易理解,等价于这条JavaScript语句:
firstName="John"
JSON 值
JSON值可以是:
·数字(整数或浮点数)
·字符串(在双引号中)
·逻辑值(true或false)
·数组(在方括号中)
·对象(在花括号中)
·null
基础结构
JSON结构有两种结构
json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以表示各种复杂的结构
1、对象:对象在js中表示为“{}”括起来的内容,数据结构为{key:value,key:value,...}的键值对的结构,在面向对象的语言中,key为对象的属性,value为对应的属性值,所以很容易理解,取值方法为 对象.key获取属性值,这个属性值的类型可以是 数字、字符串、数组、对象几种。
2、数组:数组在js中是中括号“[]”括起来的内容,数据结构为[“java”,"javascript","vb",...],取值方式和所有语言中一样,使用索引获取,字段值的类型可以是 数字、字符串、数组、对象几种。
经过对象、数组两种结构就可以组合成复杂的数据结构了。
如:
示例1:
var persons ={
"persons":[
{"name":"zs","age":23,"gender":"male"},
{"name":"ls","age":24,"gender":"female"},
{"name":"ww","age":25,"gender":"male"}
]
}
一个名为people的变量,值是包含三个条目的数组,每个条目是一个人的记录。也可以定义为:
示例2:
var persons =[
{"name":"zs","age":23,"gender":"male"},
{"name":"ls","age":24,"gender":"female"},
{"name":"ww","age":25,"gender":"male"}
]
一个数组,包含三个条目,每一个条目都是一个人的记录信息
JSON访问数据
定义一个json对象var person ={"name":"zs","age":23,"gender":"male"}
可以使用点(.)轻松访问其中数据。
person.name;//zs
person.age;//23
person.gender;//male
或者:
Person[“name”];//zs
person[“age”];//23
person[“gender”];//male
当然,可以访问复杂数据.
如访问示例1中的数据:
persons.persons[0].name;//zs
persons.persons[0].age;//23
persons.persons[0].gender;//male
persons.persons会获取json中定义的名为persons的值,其值为数组。然后使用角标0访问第1个元素,得到第一个json对象,再根据其属性访问器属性对应的值。
如访问示例2中的数据:
persons[0].name;//zs
persons[0].age;//23
persons[0].gender;//male
遍历JSON数据(了解)
可以使用for…in循环遍历json数据。如:
var person ={"name":"zs","age":23,"gender":"male"};
可以使用for in自动遍历,得到所有键和值
for(key in person){
var value = person[key];
alert(key + ":" + value);
}
其中key变量可获得每一个键值对的键,然后通过键获取值。