原生JavaScript第一篇

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中有三种逻辑运算符:

  &&与

  ||或

  !非

  逻辑与&&

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

  逻辑或||

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

  逻辑非!

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

时间: 2024-08-28 22:39:36

原生JavaScript第一篇的相关文章

原生JavaScript第二篇

js中的程序控制语句 常见的程序有三种执行结构: 1. 顺序结构 2. 分支结构 3. 循环结构 顺序结构:程序从第一行开始执行,按顺序执行到最后一行 分支结构:就像一条岔路口,必须选择且只能选择其中一条道路继续走下去,不能同时执行两个分支里的代码. 我们可以使用如下三种方式来实现程序的分支结构 ? if(条件) {表达式} ? switch(变量) case 表达式; break; ? 表达式1 ? 表达式2 : 表达式3三目运算 if语句: 我们可以通过if来实现一个分支结构.if语句需要两

深入理解javascript对象系列第一篇——初识对象

× 目录 [1]定义 [2]创建 [3]组成[4]引用 前面的话 javascript中的难点是函数.对象和继承,前面已经介绍过函数系列.从本系列开始介绍对象部分,本文是该系列的第一篇——初识对象 对象定义 javascript的基本数据类型包括undefined.null.boolean.string.number和object.对象和其他基本类型值不同的是,对象是一种复合值:它将许多值(原始值或者其他对象)聚合在一起,可通过名字访问这些值 于是,对象也可看做是属性的无序集合,每个属性都是一个

深入理解javascript作用域系列第一篇——内部原理

× 目录 [1]编译 [2]执行 [3]查询[4]嵌套[5]异常[6]原理 前面的话 javascript拥有一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量,这套规则被称为作用域.作用域貌似简单,实则复杂,由于作用域与this机制非常容易混淆,使得理解作用域的原理更为重要.本文是深入理解javascript作用域系列的第一篇——内部原理 内部原理分成编译.执行.查询.嵌套和异常五个部分进行介绍,最后以一个实例过程对原理进行完整说明 编译 以var a = 2;为例,说明javasc

《javascript权威指南》读书笔记——第一篇

<javascript权威指南>读书笔记--第一篇 金刚 javascript js javascript权威指南 由于最近想系统学习下javascript,所以开始在kindle上看这本书来补充下. 今天是今年的196天,由于我之前承诺过,每天分享读书笔记,只是之前分享的是大众读物,所以随手分享到kindle阅读群里了.但是现在读的是技术类书籍,分享到kindle读书群不太合适,所以还是以博客的形式分享.这样子,一个链接,大家感兴趣了就点开看看,不感兴趣了,就不点开. 其实这篇文章应该是昨天

原生JavaScript技巧大收集(11~20)-(终于又被我找到这篇文章了)

11.原生JavaScript加入收藏夹 function AddFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sTitle) } catch(e) { try { window.sidebar.addPanel(sTitle, sURL, "") } catch(e) { alert("加入收藏失败,请使用Ctrl+D进行添加") } } }   12.原生JavaScript设为

使用原生JavaScript实现对select增加option标签并附加value属性

好久没有写原生的东西了,今天写了一个小项目里面包含着option选项,所以我决定使用原生JavaScript动态生成, 本着互联网分享精神,我将本篇文章分享给大家. html代码(就是一个select) <select name="" id="reg-select"></select> json数据 var json = [ { "cc": "86", "code": "C

jstl标签 core fmt fn函数使用参考(为第一篇的补充,更为实用)

JSTL标签 参考手册 前言 ========================================================================= JSTL标签库,是日常开发经常使用的,也是众多标签中性能最好的.把常用的内容,放在这里备份一份,随用随查.尽量做到不用查,就可以随手就可以写出来.这算是Java程序员的基本功吧,一定要扎实. JSTL全名为JavaServer Pages Standard Tag Library,目前最新的版本为1.1版.JSTL是由J

原生javascript解析xml文档

之前写过一篇 <javascript/jQuery解析或转换json和xml>链接是http://my.oschina.net/ososchina/blog/343748,这篇博客详细解释了json使用 JSON.js  window.eval() ,jQuery 与字符串互相转换的方法 ,顺便也说了一点jQuery解析xml文档的方法,这里着重论述javascript操作xml. 顺便提一下,今天做项目有一点问题,如何让服务程序接口返回的就是json,而不需要 使用 jQuery.ajax设

为什么原生 JavaScript 开发越来越多受欢迎?是否应该跟风用原生JavaScript代替 jQuery等库?

本文标签:  jQuery的作用 原生JavaScript优势 jQuery官网 jQuery处理DOM和跨浏览器 JavaScript新特性 互联网杂谈 随着 JavaScript 本身的完善,越来越多的人开始喜欢使用原生 JavaScript 开发代替各种库,其中不少人发出了用原生 JavaScript 代替 jQuery 的声音.这并不是什么坏事,但也不见得就是好事.如果你真的想把 jQuery从前端依赖库中移除掉,我建议你慎重考虑. 首先 jQuery 是一个第三方库.库存在的价值之一在