原生JS学习笔记1——基本数据类型和运算符

作者: 小全同学 | 来源:发表于2016-03-09 14:54 被阅读640次

JS介绍

js的历史

在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。

由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。

为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没啥关系。

JavaScript版本兼容性

JavaScript语言是在10天时间内设计出来的，虽然语言的设计者水平非常NB，但谁也架不住“时间紧，任务重”，所以，JavaScript有很多设计缺陷，我们后面会慢慢讲到。

此外，由于JavaScript的标准——ECMAScript在不断发展，最新版ECMAScript 6标准（简称ES6）已经在2015年6月正式发布了，所以，讲到JavaScript的版本，实际上就是说它实现了ECMAScript标准的哪个版本。

由于浏览器在发布时就确定了JavaScript的版本，加上很多用户还在使用IE6这种古老的浏览器，这就导致你在写JavaScript的时候，要照顾一下老用户，不能一上来就用最新的ES6标准写，否则，老用户的浏览器是无法运行新版本的JavaScript代码的。

js的组成

ECMAScript

ECMAScript是一个标准。

因为网景开发了JavaScript，一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer Manufacturers Association）组织定制了JavaScript语言的标准，被称为ECMAScript标准。

所以简单说来就是，ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现。

那为什么不直接把JavaScript定为标准呢？因为JavaScript是网景的注册商标。

不过大多数时候，我们还是用JavaScript这个词。如果你遇到ECMAScript这个词，简单把它替换为JavaScript就行了。

DOM

DOM:Document Object Model。文档对象模型，后边我们会有专门的课程来讲解DOM操作

BOM

BOM:Browser Object Model。浏览器对象模型，后边我们也会专门来讲bom操作

JavaScript的特点

(1).一种解释性执行的脚本语言。

同其他脚本语言一样，JavaScript也是一种解释性语言，其提供了一个非常方便的开发过程。JavaScript的语法基本结构形式与C、C++、Java十分类似。但在使用前，不像这些语言需要先编译，而是在程序运行过程中被逐行地解释。JavaScript与HTML标识结合在一起，从而方便用户的使用操作。

(2).一种基于对象的脚本语言。

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

(3).一种简单弱类型脚本语言。

其简单性主要体现在：首先，JavaScript是一种基于Java基本语句和控制流之上的简单而紧凑的设计，从而对于使用者学习Java或其他C语系的编程语言是一种非常好的过渡，而对于具有C语系编程功底的程序员来说，JavaScript上手也非常容易；其次，其变量类型是采用弱类型，并未使用严格的数据类型。

(4).一种相对安全脚本语言。

JavaScript作为一种安全性语言，不被允许访问本地的硬盘，且不能将数据存入服务器，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失或对系统的非法访问。

(5).一种事件驱动脚本语言。

JavaScript对用户的响应，是以事件驱动的方式进行的。在网页（Web Page）中执行了某种操作所产生的动作，被称为“事件”（Event）。例如按下鼠标、移动窗口、选择菜单等都可以被视为事件。当事件发生后，可能会引起相应的事件响应，执行某些对应的脚本，这种机制被称为“事件驱动”。

(6).一种跨平台性脚本语言。

JavaScript依赖于浏览器本身，与操作环境无关，只要计算机能运行浏览器，并支持JavaScript的浏览器，就可正确执行，从而实现了“编写一次，走遍天下”的梦想。

因此，JavaScript是一种新的描述语言，其可以被嵌入到HTML文件中。JavaScript语言可以做到响应使用者的需求事件（例如表单的输入），而不需要任何的网络来回传输资料。所以当一位使用者输入一项资料时，此资料数据不用经过传给服务器（server）处理再传回来的过程，而直接可以被客户端（client）的应用程序所处理。

3.JavaScript的优缺点

(1).JavaScript的优点：

<1>.JavaScript减少网络传输。
在JavaScript这样的用户端脚本语言出现之前，传统的数据提交和验证工作均由用户端浏览器通过网络传输到服务器上进行。如果数据量很大，这对于网络和服务器的资源来说实在是一种无形的浪费。而使用JavaScript就可以在客户端进行数据验证。

<2>.JavaScript方便操纵HTML对象。
JavaScript可以方便地操纵各种页面中的对象，用户可以使用JavaScript来控制页面中各个元素的外观、状态甚至运行方式，JavaScript可以根据用户的需要“定制”浏览器，从而使网页更加友好。

<3>.JavaScript支持分布式运算。
JavaScript可以使多种任务仅在用户端就可以完成，而不需要网络和服务器的参与，从而支持分布式的运算和处理。

(2).JavaScript的局限性：

<1>.各浏览器厂商对JavaScript支持程度不同。
目前在互联网上有很多浏览器，如Firefox、Internet Explorer、Opera等，但每种浏览器支持JavaScript的程度是不一样的，不同的浏览器在浏览一个带有JavaScript脚本的主页时，由于对JavaScript的支持稍有不同，其效果会有一定的差距，有时甚至会显示不出来。

<2>.“Web安全性”对JavaScript一些功能牺牲。
当把JavaScript的一个设计目标设定为“Web安全性”时，就需要牺牲JavaScript的一些功能。因此，纯粹的JavaScript将不能打开、读写和保存用户计算机上的文件。其有权访问的唯一信息就是该JavaScript所嵌入的那个Web主页中的信息，简言之，JavaScript将只存在于它自己的小小世界—Web主页里。

js的引入方式

在一对`script`标签中引入js代码

通过这种方式引入，可以把js代码和html代码写在同一个文件中，但是注意：最好把js代码写在body之后，文档的加载顺序是从上到下加载的，先把页面内容渲染出来，再加入用户交互，这样用户体验会大大加强。

示例代码：

    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>js基础一</title>
    
    </head>
    
    <body>
    
    </body>

    <!--script 最好放在body之后，处理交互事件，等到内容显示之后-->
    <script type="text/javascript">
            //警告框
            alert('网络错误!');
        </script>
    
    </html>

用浏览器打开效果如下：

引入外部js代码

我们可以把js代码写在一个后缀为.js的文件中，然后把这个js文件引入html文档里

操作步骤：

创建一个目录文件夹例如为js,然后再这个文件夹中创建一个一个后缀为.js的一个js文件，例如叫做index.js;
在script标签中的src中写入js文件的路径。

示例代码:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>js基础一</title>
    
    </head>
    <body>
    
    </body>

    <!--script 最好放在body之后，处理交互事件，等到内容显示之后-->
    
    <!--第二种方式：引入js文件-->
    <script src="js/index.js" type="text/javascript">
    
    </script>
    
    
    </html>

alert语句

我们注意到上边我们使用到了一个语句：alert('网络错误!');。这是一个alert语句，用来在浏览器中弹出一个提示框的。

js中的变量

什么是变量？

变量首先是一个容器，可以用来存放数据，而且存放在这个容器中的数据可以发生变化。举个例子：我有一个盆子，这个盆子中既可以装沙子、也可以装水，还可以装粮食。这个盆子就可以看做一个变量，里边装的水、沙子、粮食就是存放在变量中的值。

在生活中，我们使用纸张来记录和保存信息，而在计算机中，我们使用变量来保存信息。变量的概念基本上和初中代数的方程变量是一致的，只是在计算机程序中，变量不仅可以是数字，还可以是任意数据类型。

如何定义变量？

使用关键字var+变量名 + =(赋值号) + 值 + ;就可以定义一个变量。

示例代码：定义一个变量:

var a = 12;

以上代码定义了一个变量a，变量里保存的值是数值12。

变量的命名规则

变量在JavaScript中就是用一个变量名表示，变量名是大小写英文、数字、$和_的组合，且不能用数字开头。变量名也不能是JavaScript的关键字，如if、while等。声明一个变量用var语句，比如：

var a; // 申明了变量a，此时a的值为undefined
var $b = 1; // 申明了变量$b，同时给$b赋值，此时$b的值为1
var s_007 = '007'; // s_007是一个字符串
var Answer = true; // Answer是一个布尔值true
var t = null; // t的值是null

变量名也可以是中文，但是由于中文的兼容性不好，所以不要使用中文作为变量名。

变量命名规范：

类型前缀
首字母大写

类型	前缀	类型	实例
数组	a	Array	aItems
布尔值	b	Boolean	bItsComplete
浮点数	f	Float	fPrice
函数	fn	Function	fnHandler
整数	i	Integer	iTtemCount
对象	o	Object	oDiv1
正则表达式	re	ReExp	reEmaolCheck
字符串	s	String	sUserName
变体变量	v	Variant	vAnything

js的基本数据类型

Number

number是数值类型，在生活中，我们把没有小数位的数称作整数，带有小数位的数称作小数（计算机中叫浮点数），JavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型：

var a = 123; // 整数123
var a = 0.456; // 浮点数0.456
var a = 1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
var a = -99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

Number类型的数可以进行加、减、乘、除、求余、自增、自减运算

字符串

字符串是以单引号'或双引号"括起来的任意文本，比如'abc'，"xyz"等等。请注意，''或""本身只是一种表示方式，不是字符串的一部分，因此，字符串'abc'只有a，b，c这3个字符。

如果'本身也是一个字符，那就可以用""括起来，比如"I'm OK"包含的字符是I，'，m，空格，O，K这6个字符。

如果字符串内部既包含'又包含"怎么办？可以用转义字符\来标识，比如：

'I\'m \"OK\"!';

表示的字符串内容是：I'm "OK"!

转义字符

\表示转义字符，在计算机中，有些特殊的字符被系统赋予了特殊含义，如'表示括住字符串。但是想输出一个'怎么办？我们就可以像上边一样使用转移字符\，在特殊字符前添加一个转义字符，计算机就会把这个特殊字符当做普通的字符串来处理。

布尔值

在计算机中，我们用真表示条件成立，用假表示条件不成立。真和假就是布尔值（bollean）。
在js中，我们使用true来表示真，用false来表示假。布尔值只有真和假，没有第三个值。布尔值经常用在条件判断中。

 var bo1 = true;//布尔类型 结果true和false
 //typeof()获取变量的数据类型,(在不知道变量类型的情况下，也可以通过ypeof()获取)
 alert(typeof(bo1));

null和undefined

null表示一个“空”的值，它和0以及空字符串''不同，0是一个数值，''表示长度为0的字符串，而null表示“空”。

在其他语言中，也有类似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。但是，在JavaScript中，还有一个和null类似的undefined，它表示“未定义”。

JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。事实证明，这并没有什么卵用，区分两者的意义不大。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。

拓展 undefined类型

//如果我们不给某个变量设置值，则为undefined类型；
var color;
alert(typeof color);

js中的运算符

算数运算符

+加

-减

*乘

/除

%求余（取模）

赋值运算符

=赋值

+=加后赋值

-= 减后赋值

*= 乘后赋值

/=除后赋值

%=模后赋值

关系运算符

>大于

<小于

<=小于等于

>=大于等于

==等于（如果左右两边类型不一致，则隐式转换为一致的类型后再比较）

===等于（如果左右两边类型不一致，则返回false）

!=不等于（如果左右两边类型不一致，则隐式转换为一致的类型后再比较）

!==不等于（不转换类型，直接比较）

逻辑运算符

&&与

||或

!非

js的逻辑运算符

逻辑运算产生的结果是一个布尔值，js中有三种逻辑运算符：

&&与
||或
!非

逻辑与`&&`

书写方式：表达式一 && 表达式二。逻辑与表达式为真的条件是：左右两边的表达式同时成立时，整个逻辑与表达式才成立，只要有一个表达式不成立，整个逻辑表达式为假。

逻辑或`||`

书写方式：表达式一 || 表达式二。逻辑或表达式为真的条件是：左右两边的表达式，这要其中一个为真，则整个表达式为真。只有在两边表达式同时为假时，整个表达式才为假。

逻辑非`!`

书写方式为：!表达式。逻辑非是对原有的表达式结果进行取反操作。如原表达式为真，则进行逻辑非操作后，返回的值是假；元表达式为假，进行逻辑非运算后表达式为真。