JavaScript Day01 初识JavaScript 1

简介: JavaScript Day01 初识JavaScript

1.初识JavaScript

1.1.什么是JavaScript

JavaScript ( JS ) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web 页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,例如 Node.jsApache CouchDBAdobe Acrobat。JavaScript 是一种基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

1.2.JavaScript的组成部分

  • ECMAScript,描述了该语言的语法和基本对象。

文档对象模型(DOM),描述处理网页内容的方法和接口。

浏览器对象模型(BOM),描述与浏览器6+进行交互的方法和接口。

1.3.JavaScript的历史

1994 年,网景公司(Netscape)发布了 Navigator 浏览器0.9版。这是历史上第一个比较成熟的网络浏览器,轰动一时。但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力。网景公司急需一种网页脚本语言,使得浏览器可以与网页互动。


1995年5月,网景公司做出决策,未来的网页脚本语言必须"看上去与 Java 足够相似",但是比 Java 简单,使得非专业的网页作者也能很快上手。这个决策实际上将 Perl、Python、Tcl、Scheme 等非面向对象编程的语言都排除在外了。


JavaScript最初由Netscape的Brendan Eich设计,创始人Brendan Eich只用了10天就把JavaScript设计出来了;最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java,但JavaScript的主要设计原则源自Self和Scheme。


JavaScript诞生于1995年,当时的主要目的是处理由以前服务器语言负责的一些没有填写的必填域,是否输入了无效的值。在web日益流行的同时,人们对客户端脚本语言的需求也越来越强烈,那时绝大多数因特网用户使用的速度仅为28.8kbit/s的猫上网,但网页的大小和复杂性却不断增加,未完成简单的表单验证而与服务器交换数据只会加重用户和服务器的负担。


-JavaScript发展历史

(1)JavaScript被设计出来后最初命名为Mocha,1995年9月在Netscape Navigator 2.0的Beta版中改名 为LiveScript,同年12月,Netscape Navigator 2.0 Beta 3中部署时被重命名为JavaScript;


(2)1996年8月IE 3 发布,支持 jscript (微软实现的 js)


(3)1996年11月,网景向ECMA提交语言标准,由于版权问题,js 语言标准不叫 JavaScript,叫ECMAScript


(4)1997年6月,第一版ECMAScript发布


(5)1999年12月,第三版ECMAScript发布,这个版本使用最广(第四版没有发行成功)


(6)2006 年,jQuery 发布,它是目前最长寿的 js 库


(7)2009年12月,第五版ECMAScript发布,增加了一些功能


(8)2009 年,Ryan 基于 V8 (Chrome 的 js 引擎叫做 V8)创建了 Node.js


(9)2010年,Isaac基于node.js写出了npm


(10)2015年6月,第六版ECMAScript发布,新浏览器都支持这一版(之后每年发布一版,版本号以年份命 名)


JavaScript的兴起:需要一门语言可以直接运行在浏览器中,完成表单验证,减轻服务器的压力


ECMAScript5:编程(数据结构、逻辑控制、算法、内存分配、高级应用BOM-浏览器对象模型、DOM:应用程序API-文档对象模型)


早期主要运行在浏览器端,用于表单验证以及动画的实现。随着js版本的升级,现在的js可以运行在nodejs上,而nodejs又可以安装在绝大多数的操作系统中,所以js可以运行在绝大多数的系统中,除了完成表单验证以及动画的实现还可以进行服务器端编程,甚至于硬件编程。


JavaScript 的标准是 ECMAScript 。截至 2012 年,所有的现代浏览器都完整的支持 ECMAScript 5.1,2015年6月17日,ECMA国际组织发布了 ECMAScript 的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为 ECMAScript 6 或者 ES6。


需要注意的是,js不同于Java。Java是由sun公司开发并且维护,只能运行在jdk中。而js可以运行在绝大多数的浏览器中,主流浏览器就有IE、firefox、google chrome、safari…。那这样js的版本是不是就会有很多呢?如果这样,岂不是乱套了:程序员编写的js代码可以运行在firefox中,但是运行在IE中就会有问题。实际上,在早期确实有这样的问题,后来大家觉得这样搞下去会出问题,所以就坐在一起商量一套统一的语法,由于制定语法的这个组织叫ECMA,所以JavaScript的标准就是ECMAScript,这个ECMAScript中有哪些东西,实际上就是变量,表达式,关键字…的基础语法。


JavaScript是一个编程语言,允许用户在浏览器页面上完成复杂的事情。浏览器页面并不总是静态的,往往显示一些需要动态更新的内容,交互式地图,动画,以及视频等。一个完整的JavaScript包括核心(ECMAScript),应用程序编程接口即API (比如DOM(Document Object Model),BOM(Browser Object Model)),以及其他第三方API。JavaScript与HTML、CSS一同配合共同完成一个复杂页面的显示。


通常所说的JavaScript是应用在浏览器中,一般包括ECMAScript、DOM、BOM。ECMAScript为标准,DOM为浏览器提供的js操作html/css的js API,BOM为浏览器提供的js操作浏览器的js API。而JavaScript如果应用在nodejs中,则通常用于服务器端编程,可以进行io操作,网络操作等。


特点

客户端代码,在客户机上执行

1.JavaScript特殊的地方在于它也可以作为服务器端代码执行,但是需要搭建Node环境。node hello.js

2.在浏览器上运行

解释性语言

被内置于浏览器或者Nodejs平台中的js解析器解析执行,执行前无需编译

弱类型语言

从上往下顺序解析执行


-系统环境

Linux 操作系统的环境*


Windows


MacOS


-编辑器

vi、vim*


vscode/sublime


-运行环境

旧:JavaScript不能独立运行+网页+console/fireBug


nodejs*


-调试:

火狐:firebug


console.log()/弹框alert


2. js组成

2.1 ECMAScrpt 【js标准】(兼容性100%) (类似于CoreJava,制定了基础的语法)

注释 // 、/**/


变量


操作符


流程控制语句


数组


对象


函数


正则表达式



所有的js解释器都可以兼容ECMAScript


2.2 DOM:Document Object Model文档对象模型

js操作html的api


是针对XML但经过扩展用于HTML的应用程序编程接口。DOM将整个页面映射成一个多节点结构。


var dom=document.getElementsByTagName(“input”);


var dom=document.getElementById(“input_name”);


dom.οnclick=function(){}


js语言:基础语法、基础库、扩展库(jQuery DOM库)


2.3 BOM:Browser Object Model 浏览器对象模型

js操作浏览器的api


开发人员可以使用BOM控制浏览器显示的页面以外的部分。弹出新浏览器窗口;移动,缩放,关闭浏览器的功能;提供浏览器详细信息的navigator对象;提供浏览器所加载页面的详细信息的location对象;提供用户显示器分辨率详细信息的screen对象;对cookies的支持;支持XMLHttpRequest,IE中的ActiveXObject自定义对象


alert()/prompt()/confirm()


setInterval(),setTimeout()


XMLHttpRequest


Ajax


这里需要注意的是,只有ECMAScript是标准,也就是在绝大多数浏览器以及js解析器(node)中运行效果相同,但是DOM与BOM是各大浏览器厂商自己提供的API,在使用上大同小异,但是也可能会出现少许不兼容的情况


-js解释器:

1)浏览器厂商:Firefox(js标准)、IE(js)、Google(js)


兼容性:


JavaScript的三个组成部分,在当前五个主要浏览器(IE,Firefox,Chrom,Safari,Opera)中得到了不同程度支持,其中,所有浏览器对ECMAScript3支持大体都还不错,对ECMAScript支持程度越来越高,但对DOM的支持彼此相差较多,对已经正式纳入HTML5标准的BOM来说,尽管各浏览器都实现了某些众所周知的共同特性,但其他特性还因浏览器而异。


2)nodejs【网络编程(http模块)/数据库操作(mysql)/IO文件(file)】


http://nodejs.cn可以安装在linux windows macos unix等主流操作系统上


特征:可以运行在客户端、服务器端,解释性语言,弱类型语言,从上到下顺序执行。


在nodejs中,不存在兼容性问题,因为nodejs中压根就没有dom/bom,因此切记不要在nodejs中执行任何dom和bom代码,由于不存在兼容性问题,nodejs是可以大量发挥js高级标准,ES6语法一般在nodejs中可以完全运行。


-js特点

1.解释型语言

js -> nodejs(js解释器)


2.弱类型语言

变量的数据类型取决于值的数据类型


var a ;


a = 2; // a的数据类型为number


a = true; // a的数据类型为boolean


3.顺序解释执行

4.既可以作为前端脚本语言,也可以作为后端语言,取决于应用平台(浏览器/操作系统)和使用的框架(dom、jquery/http、mysql、file)

-在网页中使用JavaScript

内部JavaScript

编写好HTML,在<head>标签体中添加<script>元素,然后将js代码填写进来即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript">
    alert('hello javascript')
  </script>
</head>
<body>
</body>
</html>

-在网页中使用JavaScript

外部JavaScript

单独新建一个后缀名为.js的js文件,编写好HTML文件,在<head>标签体内添加<script>元素,使用script标签的src属性将将js文件导入进来。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="hello.js"></script>
</head>
<body>
</body>
</html>

-在body和head中使用JavaScript的区别

在body部分中的JavaScript会在页面加载的时候被执行,在head部分中的JavaScript会在被调用的时候才执行。


因为浏览器解析html是从上到下的。如果把JavaScript放在head里的话,则先被解析,但这时候body还没有解析,所以会返回空值。一般都会绑定一个监听,当全部的html文档解析完之后再执行代码

windows.onload = function(){
  // 这里放执行的代码
}

这就说明了,如果我们想定义一个全局对象,而这个对象是页面中的某个按钮时,我们必须将其放入body中,道理很明显:如果放入head,那当你定义的时候,那个按钮都没有被加载,可能获得的是一个undefind。一般习惯将JavaScript放在body的最后面,类似last-child。


-在vi/vim中编写JavaScript
console.log('hello JavaScript')

使用node命令执行即可

$ node hello.js

-注释

与绝大多数语言类似,JavaScript也需要注释来说明其代码含义,或者用来进行代码调试,注释后的代码会被浏览器忽略不被执行。

单行注释

// I am a comment

多行注释

/*

I am also

a comment

*/


目录
相关文章
|
8月前
|
JavaScript 前端开发
70.【JavaScript 6.0】(二)
70.【JavaScript 6.0】
27 0
|
8月前
|
存储 JSON JavaScript
70.【JavaScript 6.0】(四)
70.【JavaScript 6.0】
32 1
|
6天前
|
存储 JavaScript 前端开发
Javascript
avaScript 是一种用于在网页上实现交互性和动态功能的脚本语言。
31 0
|
9月前
|
存储 JavaScript 前端开发
JavaScript Day01 初识JavaScript 2
JavaScript Day01 初识JavaScript
34 0
|
JavaScript 前端开发
玩转Javascript魔法篇
这些都是平时我们经常在业务中会用的功能,实现起来的方法不止一种,但是我们要经常思考,举一反三,追求一种简洁高效的写法,不是吗?
87 0
玩转Javascript魔法篇
|
JavaScript 前端开发 Java
JavaScript糟粕部分
JavaScript是一门优秀的语言,但是难免存在着某些缺点,本博文主要说明下JavaScript的一些缺点。
|
前端开发 JavaScript Java
JavaScript——JavaScript的介绍
JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
151 0
|
算法 JavaScript 前端开发
JavaScript的各种等号`==` `===`最全详解(下)
JavaScript的各种等号`==` `===`最全详解(下)
83 0
JavaScript的各种等号`==` `===`最全详解(下)
|
JavaScript 前端开发
Javascript 中的 this
当我们学习 Javascript 中的 this 时,非常容易陷入一种困境,一种似懂非懂的困境。在某些情况下,我们看了一些文章和解释,将其应用到一些简单的情况,发现,嗯,确实这么运作了。而在另一些更为复杂的情况下,我们发现又懵逼了,什么情况?这篇文章的目的,就是要完全搞懂并掌握 Javascript 中的 this。为什么我们很难完全掌握 this?在我看来,原因是 this 的解释太过抽象,在理
611 0
|
JavaScript 前端开发 Java