JavaScript你系统了解了吗？

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 196,264评论 5赞 462
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 82,549评论 2赞 373
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 143,389评论 0赞 325
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,616评论 1赞 267
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,461评论 5赞 358
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,351评论 1赞 273
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,776评论 3赞 387
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,414评论 0赞 255
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,722评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,760评论 2赞 314
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,537评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,381评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,787评论 3赞 300
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,030评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,304评论 1赞 252
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,734评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,943评论 2赞 336

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,517评论 18赞 139
  • 最新cocoa pods的安装和升级、降级
    cocoapods的下载及安装 mac系统已经默认安装好Ruby环境，如果你不确定自己系统中是否有Ruby的，可以...
    rockyMJ阅读 1,305评论 0赞 3
  • 我身边的爱情
    他们一生没有吵过架，她的父母不同意他们在一起，他那时在外面打工，就没留心这事，所以，两人的婚事一拖再拖。父母终究还...
    Rottenpeo阅读 254评论 0赞 0