JavaScriptNotes

JavaScript


一.什么是JavaScript

JavaScript是一种计算机编程语言:

通过给计算机处理问题的逻辑指令从而得到相应结果的一种人机交互语言

HTML是标记语言,CSS是层叠样式表, 都不能算作编程语言, 因为不具备图灵完备性(一切可计算的问题都能计算,--图灵机)

JavaScript与Java往往会被人误解,其实两者毫无关系。


二.JavaScript能做什么?

1.Web前端 html  css  JavaScript

2.node.js  后端

3.Hybrid App(混合app) 淘宝 微信 京东..

Native App是一种基于智能手机本地操作系统如iOS、Android、WP并使用原生编写运行的第三方应用程序,也叫本地app

Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。

比如街旁网最开始的应用就是包了个客户端的壳,其实里面是HTML5的网页,后来才推出真正的原生应用

Hybrid总体特性更接近Native App但是和Web App区别较大。只是因为同时使用了网页语言编码,所以开发成本和难度比Native App要小很多。

4.桌面应用

5.游戏cocos2d-js  unity3D  白鹭

6.阿特伍德定律  

any application that can be written in JavaScript, will eventually be written in JavaScript.

---Jeff Atwood


三.计算机语言分类

1.机器语言  00101010101011011

2.汇编语言    计算机只能读懂机器指令,程序员用汇编语言写出的源程序,再用汇编编译器将其编译为机器码,再由计算机执行。--符号语言,不同的计算机有不同的汇编语言。

3.高级语言

高级语言又被称之为编译性语言,在编译性语言的基础上分支出了解释性语言;

编译性语言(C,C++....)的特点:开发速度慢,执行效率高;

解释性语言(JavaScript,Python,php,Perl等)的特点:开发速度快,执行效率稍慢。


四.JavaScript的由来

1992年底,美国国家超级电脑应用中心(NCSA)开始开发一个独立的浏览器,叫做Mosaic。

1994年10月,NCSA的一个主要程序员Marc Andreessen联合风险投资家Jim Clark,成立了Mosaic通信公司,不久后改名为Netscape(网景)。

1994年12月,Netscape发布浏览器Navigator1.0,市场份额一举超过90%。

1995年 Netscape 程序员 Brendan Eich 设计出了LiveScript1.0后来改名JavaScript

1996年3月,Navigator 2.0浏览器正式内置了JavaScript脚本语言。

1996年8月,微软模仿JavaScript开发了一种相近的语言,取名为JScript, 内置于IE3.0

1996年11月,网景公司决定将JavaScript提交给欧洲计算机制造联合会ECMA,希望JavaScript能够成为国际标准,以此抵抗微软。

1997年7月,ECMA组织发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。

2009年12月,ECMAScript 5.0版正式发布。

2011年6月,ECMAscript 5.1版发布,并且成为ISO国际标准

2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015


五.JavaScript语言及其特点

JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言(Java小程序)一起实现在一个Web页面中连接多个对象,与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入到标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择,具有以下几个基本JavaScript特点:

1、JavaScript是一种脚本编写语言

JavaScript是一种脚本语言,它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起,从而方便用户的使用操作。

2、基于对象的语言。

JavaScript是一种基于对象的语言,同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

3、简单性

JavaScript的简单性主要体现在:首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计,从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型,并未使用严格的数据类型。

4、安全性

JavaScript特点之一它是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

5、动态性的

JavaScript特点之一它是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页(HomePage)中执行了某种操作所产生的动作,就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。

6、跨平台性

JavaScript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑,软件仅需一个字处理软件及一浏览器,无须WEB服务器通道,通过自己的电脑即可完成所有的事情。

综合所述JavaScript是一种新的描述语言,它可以被嵌入到HTML的文件之中。JavaScript语言可以做到回应使用者的需求事件(如:form的输入),而不用任何的网路来回传输资料,所以当一位使用者输入一项资料时,它不用经过传给伺服端(server)处理,再传回来的过程,而直接可以被客户端(client)的应用程式所处理。


六.JavaScript 的局限性

1.浏览器的兼容;针对不同浏览器有可能会存在兼容性问题。

2.执行效率的问题--------分布式计算。


七.JavaScript 的运行和开发环境

1.浏览器上运行:chrome firefox opera safari IE 360

2.编译器:     sublime notepad++  webstrom 记事本

3.JavaScript程序是用Unicode字符集编写的(utf = Unicode transformation formats)

4.严格区分大小写 (html不区分大小写)

在ECMAScript中的一切(变量、函数名、操作符)都是区分大小写的


八.JavaScript 在html中的使用

1.在<script>标签中写js代码标签中写js代码标签中写js代码

例如:

使用<script>标签

2.导入外部的JavaScript脚本文件(CSS在前,JS在后)

例如:

导入外部Js文件

3.通过事件属性定义在元素的内部

例如:

在标签内作事件属性


九.JavaScript 的注释

1.单行注释:  //

2.多行注释:  /* */


十.Script(指令) 语句结束符

1.;(英文的分号)

2.换行(直接回车换行)

十一.JavaScript在页面中输出内容

1.document.write(); 输出到文档流

2.console.log();     输出到控制台

3..innerHTML='';

十二.JavaScript三个基本的弹框

1.alert();  (提示框,警告框);

2.confirm();  (确认框) 有返回值 true||false;

3.prompt();  (输入框); 可以有两个参数  参数一:返回用户输入的内容,参数二;默认值。

十三.第一个JavaScript的应用

1.获取html中的dom元素  : document.getElementById();

2.元素的应用:             得到元素的属性

3.事件的应用:                触发了事件再执行某段代码

4.函数的简单调用:            把好多代码作为一个整体,调用的时候执行

5.简单运算符的应用:       +   -  *   /   %  =

十四.变量和直接量

1.直接量     程序中直接使用的数据值   -- 关键字(保留字)不能直接使用

2.变量        数据临时存储的容器

长久存储使用数据库,临时存储使用变量

变量使用前必须先声明使用var 关键字声明 不声明,直接使用变量,会报错。变量在声明之前调用,返回undefined。

3.不使用var定义变量,在严格模式(use strict)下会报错,局部变量会变成全局变量,会造成全局变量污染。

十五.变量声明

1.声明一个变量  var 变量名=值;(声明的同时赋值)

2.声明多个变量  var 变量1=值,var 变量2 = 值,var 变量3 = 值(一次声明多个使用,分割)

-- 没有赋值的变量初始值为undefined

3.动态类(弱类型)语言:在运行期间才去做数据类型检查的语言,编程时不用给任何变量指定数据类型。如: Python  PHP  Ruby JavaScript

4.静态类(强类型)语言:数据类型是在编译期间检查,在写程序时,要先声明所有变量的数据类型。如:c  c++  c#  java

-- 给没有声明的变量赋值,严格模式下会报错。(‘use strict’)

5.命名规则

数字  字母   _  $ 组成

但是不能以数字开头

不能与系统关键字保留字冲突

十六.数据类型

1.原始类型
                   数字           Number

                  字符串        String

                   布尔值       Boolean

                    空              null

                    未定义       undefind

2.对象类型

                     数组           Array

                      函数          Function

                       正则         RegExp

                       错误          Error 

                       日期          Date

3.检测数据类型的方法  typeof()

数值Number

一.整型直接量

1.可以使用八进制(不推荐使用)  十进制 十六进制

八进制以 0 开头(0123 --部分浏览器的javascript不支持8进制 严格模式下同样不支持,不推荐使用

十六进制   以0x开头

2.浮点型直接量  小数    科学计数法e  浮点的精度问题(避免使用浮点进行逻辑判断)。

3.JavaScript 数值范围   5e324 ~ 1.7976931348623157e-308

正无穷  Infinity   负无穷  -Infinity

0 -0(负零不常用)      相等

100/0 ==  正无穷大   100/-0 ==  负无穷大  0/-0 = NaN

负零不常用

4.简单的数值运算符  +  -     *     /      %

5.非数字数值NaN   类型是number,但不是数字。(not a number)

NaN的产生

1.0/-0  得到NaN

2. 字符串参与运算  (字符串: 不能转换成数字的字符串)

特点:和任何值都不相等   与任何值运算还是NaN

字符串参与运算会得到NaN.不能通过x==NaN来判断,需通过函数isNaN()来判断是否是NaN。

6.isFinite         是否有穷 (除了Infinity -Infinity NaN都返回true)

7.isNaN            是否是NaN  (在运算时作为判断)

二.字符串String-----由unicode字符组成的有序序列

定义字符串:

1.单引号 不能嵌套单引号 如果需要嵌套可以使用 \ 进行转义。

2.双引号 不能嵌套双引号 如果需要嵌套可以使用 \ 进行转义。

转义字符:(在字符串中有特殊意义的字符需要转义的)

\n 换行

\r 回车(需要原样输出document.write('<pre>'))

\t tab

\’  \”  \\   单引号 双引号 反斜线

Unicode字符 (Unicode 转换)(\u50bb) (\u903c)(js可以解析汉字unicode编码)

字符串连接符 +(字符串不能换行)

三.布尔值Boolean

定义:布尔值表示 真或假  开或关   是否

值  true ( 1 )| false (0)

如何得到布尔值:简单的比较运算符 > >= < <=  == !=  ===  !==

===  恒等  不但值相等而且数据类型也相等

四.Null 和 undefined

Null 为空(可以通过给一个变量赋null值来清除变量的内容)

alert(typeof null) 返回object 创建js时候的错误延续

undefined 表示“缺少值”。变量声明,但未定义值。(变量的初始化)

1.出现在 变量定义了,但是在前面调用 返回undefined

2.访问对象的属性,如果没有这个属性 返回undefined

3.函数形参没有传值 但是函数内使用 返回undefined

五.数据类型的转换

1.显示类型转换  (强制转换)

                       Number()    转换为数字

                       String()        转换为字符串

                       Boolean()     转换为布尔

                        Object()        转换为对象

2.自动数据转换

自动转换数值            有数学运算的时候

自动转换为字符串       带连接符的时候

自动转换为Boolean     布尔值的运算环境中

JavaScript 表达式

1.表达式是JavaScript中的短语。

2.程序中的常量是最简单的表达式。(var index = 120;)

3.复杂表达式(语句)就是由简单表达式组成的。 --组成复杂表达式的常用方法是使用运算符

一.运算符

按照操作数分:(一元运算符)(二元运算符)(三元运算符 ?:)

算术运算符

【+(加)】【-(减)】【*(乘)】【/(除)】【%(取余)】【-(负号)】

++(自增1)    --(自减1)

Tip:++在前 先加在运算 --在前 先减在运算;++在后 先运算再加 --在后 先运算再减

关系运算符

==

===

!=

!==

<

>

<=

>=

逻辑运算符

&& 与(两端都为真才为真)

||    或(一端为真即为真)

!  非(真变假 假变真)

位运算符

&     按位与(两端都是1才为1)

|      按位或(两端一个为1就是1)

^     按位异或 (两端不一样才是1)

~     位非 (需要补码) 取反-1

<< 左移

>> 右移

赋值运算符

=

+=

-=

/=

%=

<<=

>>=

&=

|=

^=

例如:交换两个变量的值

1. 通过中间变量转换

var x=1;var y=2; var z=y;y=x;x=z;console.log(x,y); 

2. 不同过中间变量转换

var a=1;var b=2;a=a+b;b=a-b;a=a-b;console.log(a,b);

其他运算符:

三元运算符 ?:((boolean)?true的时候执行的代码:false的时候执行的代码)

如i=0,j=1,k=2; ==> i=0;j=1;k=2;

for(var i =0,j=10;i

typeof 返回表示数据类型的一个字符串

delete 删除对象属性或数组元素

在严格模式下,删除非法操作数(变量,函数)会报语法错误

void -- 不常用 我是超链接取消自带js效果

运算符的优先级 可使用()改变优先级

流程控制

流程控制指令是指会改变程序运行顺序的指令

程序执行顺序

由上往下执行(顺序执行)

单向分支结构

if(){}

双向分支结构

if(){}else{}

多向分支结构

1.if(){}else if(){}else{}

2.switch case   开关   注意:参数的数据类型

逻辑运算符的特殊用法

var str = true && ‘123’; -- 特殊用法

或运算的短路

(boolean)|| (); 通道的应用

循环语句(循环结构)

while语句

var i = 0; while(i<10){document.write(i);i++;}

do while

var i = 0;do{document.write(i);i++}while(i<10); 两种方式的区别

for

for(var i=0;i<10;i++){document.write(i)}

跳转语句

break---结束整个循环。

default: break;介绍

continue---结束当前循环

函数

函数是一段在一起,可以做某件事的程序。

优点:控制程序设计的复杂性

>1. 提高软件的开发可靠性

>2. 提高软件的开发效率

>3. 提高软件的可维护性

>4. 提高程序的重用性

JavaScript定义函数的方式

>1. function 关键字  function demo(){ code..}

>2. 匿名函数  var demo = function(){}

>3. Function 构造函数   (不推荐使用)

var demo = new Function(‘a’,’b’,”console.log(a+b)”);

调用方式区别

>1. 函数声明的提前

>2. 匿名函数无法提前使用

函数名

函数名可由开发者自行定义

与变量命名规则相同(描述性强,简洁)。

函数参数

>1. 多个参数使用,分割

>2. 形参

>3. 实参

参数特点

>1. 当实参数量>形参数量(省略)

>2. 当实参数量<形参数量(undefined)

>3. 通过if(n1 === undefined){}设置参数的默认值

>4. 通过实参对象arguments将获取的参数组成一个数组(arguments在严格模式下是一个关键字)

>

函数的返回值

使用关键字return

>1. 结束函数

>2. 可以返回值 也可以没有返回值

函数的引用和调用

>1. 调用:在函数名后面加上();

>2. 引用:使用函数名;

JavaScript变量的作用域

>1. 全局变量--定义在函数的外部。

>2. 局部变量--定义在函数内部

>3. 不使用var时变成全局变量,但是需要执行函数才能使用内部定义的变量

>4. 严格模式下,不支持。不推荐使用。(避免全局变量污染)

注意:函数外for循环等定义的变量也是全局变量。

函数的调用

>1.  函数内调用别的函数

>2. 使用参数调用 --回调函数

>3. 函数内调用自己  --递归函数

function demo(n){

if(n<0){

return;

}else{

document.write(n+"
");

demo(n-1);

}

}

function demo(n){

if(n<0){

return;

}else{

document.write(n+"
");

demo(n-1);

document.write(n+"
");

}

}

使用debugger调试 打开F12

求阶乘

1.function demo(n){if(n<=1){return n;} return n*demo(n-1);}

2.for();

数组

相关概念:

>1. 数组是值的有序集合。

>2. 每个值叫做一个元素

>3. 每个元素在数组中有一个位置,以数字表示。

称为索引(下标)。

特点

数组的元素可以是任何类型

数组索引从0开始,最大为2^32-2  4294967294个元素

创建数组

>1. 使用数组直接量[]

var arr = [1,2,3,];

>2. 使用构造函数

var arr = new Array(10);10个元素

var arr = new Array('a','b','c');

数组的长度 length属性

arr.length;

length属性只计算非负整数的索引

数组元素的访问和修改:

>1. 使用[]

>

>2. 数字类型的字符串 也可以访问数组元素

>

稀疏数组

稀疏数组就是不连续索引的数组

>1. var arr = new Array(3); -- 是稀疏数组

>2. var arr = [,,]; -- 是稀疏数组

>3. var arr = [1,2];arr[10]=100; -- 是稀疏数组

>4. 使用delete删除一个元素  得到稀疏数组

>

数组元素的添加:

>1. 为新索引赋值 arr[4]=2;

>2. 利用数组长度在数组尾部插入新元素 arr[arr.length]=5;

>3. push()  在尾部加入新元素 arr.push(‘abc’);

>4. unshift()在前面加入一个新元素  arr.unshift(‘abc’);

数组的删除:

>1. 删除数组后面的一个元素 delete()不推荐--产生稀疏数组

>2. pop() 删除数组最后一个元素 arr.pop();

>3. shift() 删除数组第一个元素 arr.shift();

判断是否数组

typeof []; 无法进行判断

>ESMA5定义新的方法用来判断是否数组:   Array.isArray([]);

搜索数组是否具有的元素

arr.indexOf();

如果存在返回元素位置

如果不存在返回-1

数组的遍历:

>1. 使用for循环遍历

for(var i = 0; i < arr.length;i++){

console.log(arr[i]);

}

>2. 使用for/in循环

for(var i in arr){

console.log(arr[i]);

}

>3. 注意:遍历稀疏数组 和 特殊下标数组时的区别

>4. 使用forEach();  传入匿名函数

>  低版本IE不支持

---

数组的方法:

>1. join()把数组的元素拼接成字符串

var message = arr.join(‘,’);

>2. concat() 合并多个数组

var message = arr.concat([12,43],[4,35,3]);

var message = arr.concat(1,2,3);

var message = arr.concat(1,2,[4,,5,[6,,7]]);

>3. slice()  截取数组中的一部分(不破坏原数组),返回新的数组

var arr = list.slice(2);  取出从下标2到后面的所有元素

var arr = list.slice(2,4); 取出从下标2到下标4(不含4)的元素>

>4. splice() 删除、替换、添加、 破坏原数组 返回删除的内容

var new_arr = list.splice(2);   下标2以后的元素

var new_arr = list.splice(2,2); 下标2以后的两个元素

1.在指定位置添加新的元素

var arr = [3,454,435,343];

arr.splice(2,0,’abc’);

在435的位置前添加一个abc

4.替换指定位置的元素

var arr=[1,2,3,4];arr.splice(2,1,’abc’);

将3替换成abc;

>5. reverse()  数组反转  改变原数组

>6. sort();  数组排序,必须使用排序函数 list=[1,334,32,324];

list.sort(function(a,b){return a-b;});

>7. toString() 把数组转换为字符串

>8. toLocaleString()把数组转换为本地字符串(不常用)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,475评论 4 372
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,744评论 2 307
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 112,101评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,732评论 0 221
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,141评论 3 297
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,049评论 1 226
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,188评论 2 320
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,965评论 0 213
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,716评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,867评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,341评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,663评论 3 263
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,376评论 3 244
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,200评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,990评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,179评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,979评论 2 279

推荐阅读更多精彩内容