JavaScript入门教程：历史、特点与应用

需积分: 9 194 浏览量更新于2024-07-18 1 收藏 5.41MB PDF 举报

"JavaScript 课堂案例，覆盖基本知识和实验案例，适合初学者入门" JavaScript 是一种广泛应用于 Web 开发的脚本语言，由 Brendan Eich 在1995年为 Netscape Navigator 浏览器开发，最初命名为 LiveScript。由于营销策略，它后来被更名为 JavaScript，尽管与 Java 语言在名称上有联系，但两者在本质上是不同的编程语言。JavaScript 的发展经历了从简单的表单验证到如今功能强大的前端和后端开发语言的转变。 1. **JavaScript 概述** - **面向对象**：JavaScript 支持面向对象编程，允许创建和操作对象，以及封装数据和方法。 - **解释型**：它不是编译型语言，代码在运行时被逐行解释执行。 - **客户端脚本语言**：JavaScript 主要运行在用户浏览器上，无需预先安装特定环境，只要浏览器支持即可运行。 - **安全性**：JavaScript 代码无法直接访问用户的文件系统，以保护用户的安全。 - **用途**：用于动态交互、表单验证、网页动画、AJAX（异步 JavaScript 和 XML）请求等，提升用户体验。 2. **JavaScript 特点** - **松散类型**：JavaScript 是动态类型语言，变量可以自由地赋值为不同类型的值，无需预先声明类型。 - **对象属性**：JavaScript 对象的属性可以随时添加和删除，具有灵活性。 - **继承机制**：JavaScript 使用原型链实现对象间的继承，不同于类继承的 C++ 或 Java。 3. **JavaScript 历史** - **Nombas 的 C--**：JavaScript 的理念部分来源于 Nombas 公司的 C--，这是一种早期的嵌入式脚本语言。 - **Netscape 与 Sun 合作**：JavaScript 最初在 Netscape Navigator 2.0 中推出，与 Sun 公司合作推广。 - **名字变更**：从 LiveScript 更名为 JavaScript，主要是为了借用当时流行的 Java 语言的知名度。 4. **JavaScript 核心** - **语法基础**：JavaScript 的语法与 C/C++/Java 类似，包括条件语句、循环、运算符等。 - **函数与作用域**：JavaScript 有函数作为一等公民的概念，同时具备词法作用域。 - **DOM 操作**：JavaScript 可以通过 Document Object Model (DOM) API 来操作网页元素，实现动态更新页面内容。 - **事件处理**：JavaScript 支持事件驱动编程，如点击、滚动等事件，使得用户与网页交互更加丰富。 5. **开发工具集** - **集成开发环境（IDE）**：例如 Visual Studio Code、WebStorm、Atom 等提供代码高亮、自动补全、调试等功能，提高开发效率。 - **浏览器开发者工具**：Chrome、Firefox 等内置的开发者工具，用于调试 JavaScript 代码、查看网络请求、分析性能等。 - **Node.js**：JavaScript 运行时环境，允许在服务器端执行 JavaScript 代码，构建全栈应用。通过学习这个 JavaScript 课堂案例，你可以逐步了解和掌握这些基础知识，通过实践案例加深理解，从而在 Web 开发领域打下坚实的基础。随着技术的不断发展，JavaScript 还有很多高级特性如箭头函数、Promise、async/await 等等待你去探索。

DL 20151226

第五章运算符

学习要点：

1.什么是表达式

2.一元运算符

3.算术运算符

4.关系运算符

5.逻辑运算符

6.位运算符

7.赋值运算符

8.其他运算符

9.运算符优先级

ECMA-262 描述了一组用于操作数据值的运算符，包括一元运算符、算术运算符、关系运

算符、逻辑运算符、位运算符、赋值运算符及三元运算符等其他运算符。ECMAScript 中的

运算符适用于很多值，包括字符串、数值、布尔值、对象等。不过，通过上一章我们也了解到，

应用于对象时通常会调用对象的 valueOf()和 toString()方法，以便取得相应的值。

PS：前面的章节我们讲过 typeof 操作符、new 操作符，也可以称之为 typeof 运算符、

new 运算符，是同一个意思。

1. 什么是表达式

表达式是 ECMAScript 中的一个“短语”，解释器会通过计算把它转换成一个值。最简

单的表达式是字面量或者变量名。例如：

5.96

//数值字面量

'Lee'

//字符串字面量

true

//布尔值字面量

null

//空值字面量

/Java/

//正则表达式字面量

//对象字面量、对象表达式

//数组字面量、数组表达式

//函数字面量、函数表达式

//变量

{x:1,y:2}

[1,2,3]

function(n){return x+y;}

box

当然，还可以通过合并简单的表达式来创建复杂的表达式。比如：

box+5.96

typeof (box)

box>8

//加法运算的表达式

//查看数据类型的表达式

//逻辑运算表达式

通过上面的叙述，我们得知，单一的字面量和组合字面量的运算符都可称为表达式。

2. 一元运算符

只能操作一个值的运算符叫做一元运算符。

1.递增++和递减--

var box=100;

++box;

--box;

box++;

box--;

//把 box 累加一个 1，相当于 box=box+1

//把 box 累减一个 1，相当于 box=box-1

//同上

2.前置和后置的区别在没有赋值操作，前置和后置是一样的。但在赋值操作时，如果递增

或递减运算符前置，那么前置的运算符会先累加或累减再赋值，如果是后置运算符则先

赋值再累加或累减。

var box=100;

DL 20151226

var box=100+'100';

//100100，字符串连接符，有字符串就不是加法

//您的年龄是：1020，被转换成字符串

//30 是您的年龄，没有被转成字符串

var box='您的年龄是：'+10+20;

var box=10+20+'是您的年龄';

var box='您的年龄是：'+(10+20);//您的年龄是：30，没有被转成字符串

var box=10+对象

//10[objectObject]，如果有 toString()或 valueOf()

则返回 10+返回数的值

2.减法

var box=100-70;

//等于 30

var box=-100-70

//等于-170

var box=-100--70

var box=1-NaN;

//-30，一般写成-100-(-70)比较清晰

//NaN，只要有一个 NaN 就为 NaN

var box=Infinity-Infinity;

var box=-Infinity--Infinity;

var box=Infinity--Infinity;

//NaN

//Infinity

var box=-Infinity-Infinity;

var box=100-true;

var box=100-'';

//-Infinity

//99，true 转成数值为 1

//100，''转成了 0

var box=100-'70';

var box=100-null;

var box=100-'Lee';

var box=100-对象

//30，'70'转成了数值 70

//100，null 转成了 0

//NaN，Lee 转成了 NaN

//NaN，如果有 toString()或 valueOf()

则返回 10-返回数的值

3.乘法

var box=100*70;

//7000

var box=100*NaN;

//NaN，只要有一个 NaN 即为 NaN

var box=Infinity*Infinity;

var box=-Infinity*Infinity;

//Infinity

//-Infinity

var box=-Infinity*-Infinity;

//Infinity

var box=100*true;

var box=100*'';

//100，true 转成数值为 1

//0，''转成了 0

var box=100*null;

var box=100*'Lee';

var box=100*对象

//0，null 转成了 0

//NaN，Lee 转成了 NaN

//NaN，如果有 toString()或 valueOf()

则返回 10-返回数的值

4.除法

var box=100/70;

//1.42....

var box=100/NaN;

var box=Infinity/Infinity;

var box=-Infinity/Infinity;

var box=-Infinity/-Infinity;

var box=100/true;

//NaN

//100，true 转成 1

//Infinity，

var box=100/'';

var box=100/null;

var box=100/'Lee';

//NaN

var box=100/对象;

//NaN，如果有 toString()或 valueOf()

则返回 10/返回数的值

5.求模

var box=10%3;

//1，余数为 1

//NaN

var box=100%NaN;

var box=Infinity%Infinity;

//NaN

DL 20151226

var box=-Infinity%Infinity;

var box=-Infinity%-Infinity;

//NaN

var box=100%true;

var box=100%'';

//0

//NaN

var box=100%null;

var box=100%'Lee';

var box=100%对象;

//NaN

//NaN，如果有 toString()或 valueOf()

则返回 10%返回数的值

4. 关系运算符

用于进行比较的运算符称作为关系运算符：小于(<)、大于(>)、小于等于(<=)、大于等于

(>=)、相等(==)、不等(!=)、全等(恒等)(===)、不全等(不恒等)(!==)

和其他运算符一样，当关系运算符操作非数值时要遵循一下规则：

1.两个操作数都是数值，则数值比较；

2.两个操作数都是字符串，则比较两个字符串对应的字符编码值；

3.两个操作数有一个是数值，则将另一个转换为数值，再进行数值比较；

4.两个操作数有一个是对象，则先调用 valueOf()方法或 toString()方法，再用结果比较；

var box=3>2;

//true

var box=3>22;

var box='3'>22;

var box='3'>'22';

var box='a'>'b';

var box='a'>'B';

var box=1>对象;

//false

//true

//false a=97,b=98

//true

//false，如果有 toString()或 valueOf()

则返回 1>返回数的值

B=66

在相等和不等的比较上，如果操作数是非数值，则遵循一下规则：

1.一个操作数是布尔值，则比较之前将其转换为数值，false 转成 0，true 转成 1；

2.一个操作数是字符串，则比较之前将其转成为数值再比较；

3.一个操作数是对象，则先调用 valueOf()或 toString()方法后再和返回值比较；

4.不需要任何转换的情况下，null 和 undefined 是相等的；

5.一个操作数是 NaN，则==返回 false，!=返回 true；并且 NaN 和自身不等；

6.两个操作数都是对象，则比较他们是否是同一个对象，如果都指向同一个对象，则返

回 true，否则返回 false。

7.在全等和全不等的判断上，比如值和类型都相等，才返回 true，否则返回 false。

var box=2==2;

//true

var box='2'==2;

var box=false==0;

var box='a'=='A';

var box=2=={};

var box=2==NaN;

var box={}=={};

//true，'2'会转成成数值 2

//true，false 转成数值就是 0

//false，转换后的编码不一样

//false，执行 toString()或 valueOf()会改变

//false，只要有 NaN，都是 false

//false，比较的是他们的地址，每个新创建对象

的引用地址都不同

var age={};

var height=age;

var box=age==height;

var box='2'===2

var box=2!==2

//true，引用地址一样，所以相等

//false，值和类型都必须相等

//false，值和类型都相等了

特殊值对比表

表达式

null==undefined

值

true

剩余174页未读，继续阅读

奋斗的蜗牛，奔跑吧

粉丝: 59
资源: 19

JavaScript入门教程：历史、特点与应用

深入理解JavaScript系列

JavaScript权威指南（JavaScript犀牛书一本）

Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript[EPUB版]

JavaScript

JAVASCRIPT

javascript

JavaScript基础JavaScript Essentials

SimpleTree.rar_JavaScript/JQuery_JavaScript__JavaScript/JQuery_JavaScript_

log4javascript - JavaScript日志

JavaScript标准手册JavaScript标准手册

最新资源