编程简书干货指南

JavaScript你系统了解了吗?

2016-10-23  本文已影响41人  八爷君

一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变量可获得每一个键值对的键,然后通过键获取值。

上一篇下一篇

猜你喜欢

热点阅读