入门简介

JavaScript和ECMAScript简介免费看

什么是 JavaScript、ECMAScript是什么、JavaScript 基本特点、JavaScript 可以做一些什么事情

2020-05-20侠课岛    基础入门       

前端/前端必修/JavaScript 基础知识梳理 19     0     727

什么是 JavaScript

JavaScript,我们一般简称为 JS,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。

JavaScript 广泛应用在浏览器中,并且现在已经被用到了很多非浏览器环境中,例如移动开发、网站后端开发等。JavaScript 基于原型编程、多范式的动态脚本语言,并支持面向对象、命令式和声明式风格。

HTML、CSS、JavaScript这三者不同的功能:

  • HTML:定义网页的内容结构。
  • CSS:描述页面的外观表现。
  • JavaScript:指定网页的交互行为。

JavaScript 基本特点

JavaScript 是一种属于网络的脚本语言,已经被广泛用于 Web 应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常 JavaScript 脚本是通过嵌入在 HTML 中来实现自身的功能的(就是写在 HTML 页面中的 <script> 标签中)。

JavaScript 的基本特点如下所示:

  • Javascript 是一种解释性脚本语言,代码不进行预编译。
  • Javascript 主要作用是用来向 HTML 页面添加交互行为。
  • Javascript 代码可以直接嵌入 HTML 页面,但写成单独的 .js 文件有利于结构和行为分离。
  • 脚本语言,Javascript 脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基础程序框架。
  • 跨平台特性,JavaScript 脚本语言不依赖于操作系统,仅需要浏览器的支持。在绝大多数浏览器的支持下,可以在 Windows、Android、Linux、Mac、IOS 等平台下运行。

JavaScript 可以做一些什么事情

JavaScript 可以做一些什么事情呢,我们下面简单的介绍一下,可能还没学过 JavaScript 的同学看不懂,不要急,后面我们都会详细的介绍。

  • 直接写入 HTML 输出流,如下所示,我们可以直接在 JavaScript 中写入HTML 代码:
<script type = "text/javascript">
  document.write("<h1>侠课岛</h1>");
  document.write("<p>侠课岛欢迎你!</p>");
</script>
  • 对事件作出反应,可以使用 onclick 在HTML元素上绑定事件:
<button type="button" onclick="alert('侠课岛')"> 点击弹出 </button>
  • 修改 HTML 中的内容,例如自定义一个 change() 方法,然后绑定到按钮上:
<body>
  <p id="content">原来的内容</p>
  <button type="button" onclick="change()">点击修改</button>
</body>
<script type = "text/javascript">
  function change(){
    document.getElementById('content').innerHTML = '新的内容'
  }
</script>
  • JavaScript 还可以实现改变 HTML 图像,例如通过 <img> 标签的 src 属性来改变一张 HTML 图像,如下所示:
<body>
  <button onclick="changeImage()">修改图片</button>
  <div>
    <img id="myImage" src="./img/part1-01.jpg">
  </div>
</body>
<script type = "text/javascript">
  function changeImage(){
    element=document.getElementById('myImage');
    if(element.src.match("02")){
      element.src="./img/part1-01.jpg";
    }else{
      element.src="./img/part1-02.jpg";
    }
  }
</script>
  • JavaScript 可以用来改变 HTML 样式,例如:
<p id="style">JavaScript改变HTML样式</p>

//点击之后呈现的效果是:颜色变绿
<button type="button" onclick="document.getElementById('style').style.color='green'">点击</button>
  • 验证输入,例如:
if isNaN(x) {alert("不是数字")};

什么是 ECMAScript

ECMAScript(简称ES)其实不是一种编程语言,而是一套语言标准规范,而JavaScript就是基于ECMAScript这个语言规范来制定的前端开发语言,因为一开始的时候网景开发了JavaScript,微软又开发了JScript,并且两者有一部分互不相容,所以,为了以后的兼容,大家就联合制定了ECMAScript标准,意在统一规范JavaScript,使得在各个厂商的浏览器中都能尽可能的统一,减少开发者的苦恼。你可以理解为JavaScript就是遵循了ECMAScript规范的来实现,并且增加了其他的一些ECMAScript没有的功能。举个例子如我们现实生活中的插座板,有一套规范,规范了插口多大多宽,多少个口等等,这样其他的电器生产厂商如电视机、手机等生产的电源插口就按这个规范来生产出来,这样大家就互相统一都可以插这个插座板了。

ECMAScript与JavaScript对比:
  1. JavaScript的语言核心基于ECMAScript规范,你可以理解为两者在这块功能是相同的。
  2. ECMAScript规范中没有BOM、DOM的操作,而JavaScript中有,通过JavaScript即可操作浏览器的相关API。
ECMAScript版本历史:
  • ECMAScript 5以前的版本因为太老套了,不必再理会了;
  • ECMAScript 5是最多浏览器支持的版本标准,发布于2009年(可以叫ECMAScript 2009、ES2009或ES5),包括老的浏览器(如IE8+)和所有的现代的浏览器;
  • 我们现在开发用得最多的版本是ECMAScript 6(简称ES6,是2015年发布的,也叫ECMAScript 2015或ES2015),但只有现代的浏览器才支持这个最新版本的ES6标准新增的功能,所以,直接编写ES6标准的JS在浏览器中运行,可能会引起较多的兼容问题,为了适应更多的浏览器,我们目前的做法是用ES6以上的规范标准编写代码,可以让开发体验倍爽,然后基于Babel自动将ES6写的代码转换为标准的ES5代码;
  • ECMAScript从2015年开始后,基本每年6月发布一版,目前是ES10(ES2019),ES6以后的版本都是在前一个版本的基础上进行小幅度的新增迭代,所以,不必担心需要从头开始学习。

本节我们基本讲了一下JavaScript是什么,它能做什么,以及ECMAScript和关系差别,下一节我们讲JavaScript最基本的语法,学习一门语言,我们都要先弄清楚这门语言的基本语言,才好开始编写代码。

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

19

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?