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的值为undefinedvar $b = 1; // 申明了变量$b，同时给$b赋值，此时$b的值为1var s_007 = '007'; // s_007是一个字符串var Answer = true; // Answer是一个布尔值truevar t = null; // t的值是null

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

　　变量命名规范：

　　类型前缀

　　首字母大写

　　js的基本数据类型

　　Number

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

var a = 123; // 整数123var a = 0.456; // 浮点数0.456var a = 1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5var 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中有三种逻辑运算符：

　　&&与

　　||或

　　!非

　　逻辑与&&

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

　　逻辑或||

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

　　逻辑非!

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

原生JS---1的更多相关文章

  1. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  2. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  3. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  4. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  5. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  6. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  7. 原生js实现autocomplete插件

    在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...

  8. 原生js封装ajax：传json，str，excel文件上传表单提交

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...

  9. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  10. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

随机推荐

  1. POJ_3013_最短路

    Big Christmas Tree Time Limit: 3000MS   Memory Limit: 131072K Total Submissions: 23630   Accepted: 5 ...

  2. jmeter解决中文乱码问题

    问题: 当响应数据或响应页面没有设置编码时,jmeter会按照jmeter.properties文件中,sampleresult.default.encoding 设置的格式解析默认ISO-8859- ...

  3. 用C#在Visual Studio写Javascript单元测试（Firefox内核）

    引用nuget包: 注意:Geckofx45 nuget包必须是最后引用,否则初始化会出错 编写JsRunner using Gecko; using System; using System.Col ...

  4. Linux下/var/log/btmp文件

    今天查看了一下服务器,发现/var/log/btmp日志文件比较大占用磁盘空间,搜索一下,此文件是记录错误登录的日志,就是说有很多人试图使用密码字典登录ssh服务,此日志需要使用lastb程序打开. ...

  5. 爬虫解析库BeautifulSoup的一些笔记

    BeautifulSoup类使用   基本元素 说明 Tag 标签,最基本的信息组织单元,分别是<>和</>标明开头和结尾 Name 标签的名字,<p></p ...

  6. 学习csv

    1.csv文件读取,csv文件是常用的数据存储格式之一,我们使用Python模块来处理csv文件,这是一个天气信息表 import csv from matplotlib import pyplot ...

  7. HDU 2414 Chessboard Dance（模拟题，仅此纪念我的堕落）

    题目 模拟题也各种wa,我最近真的堕落了,,,,,智商越来越为负数了!!!!!!!! #include<stdio.h> #include<string.h> #include ...

  8. PHP学习方向-进阶2（三）

    实践篇 给定二维数组,根据某个字段排序 如何判断上传文件类型,如:仅允许 jpg 上传 不使用临时变量交换两个变量的值 $a=1; $b=2; => $a=2; $b=1; strtoupper ...

  9. Codeforces Round #411(Div. 2)——ABCDEF

    30min水掉前面4T,30min尝试读懂EF题,60min划水 顺便D忘记取膜丢50分,距比赛结束10s时hack失败丢50分... 从2620掉分到2520,从rank227掉到rank354.. ...

  10. Python 3 条件语句

    条件语句:  用于判定,判定是否符合某条件,符合则执行,不符合则不执行该条件所定义的操作. 一步判定:  用于理解不会这样使用. if  1==1:    if条件判定只能出现一次. print(&q ...