Javascript的简介和使用

时间：2021-07-20 10:11:27

摘要：先讨论JavaScript的由来和一些比较容易混淆的概念，又讨论了JavaScript的实现，紧接着说明了在网页中怎么有效地更好地引入js代码。

JavaScript的由来

是从一个简单的输入验证器变成的一门强大的解释型编程语言。

JavaScript和Java关系不大。Java 和Javascript是雷锋和雷峰塔的关系。(来自佚名的《JS继承机制》的故事)

JavaScript、JScript和ECMAScript的关系

JavaScript 和JScript的关系一定程度上类似于Java和C#的关系，不同的是Javascript和JScript部分相兼容。

ECMAScript是欧洲计算机制造商协会(ECMA) 联合一些公司的程序员一起制定的脚本语言的标准。

JavaScript的实现

JavaScript的实现由下列三个不同的部分组成：

  • 核心：ECMAScript   由ECMA-262定义，提供核心语言功能
  • 文档对象模型：DOM  提供访问和操作网页内容的方法和接口
  • 浏览器对象模型：BOM  提供与浏览器交互的方法和接口

(1)ECMAScript与Web浏览器没有依赖关系，本身不包含输入和输出定义。

ECMAScript的宿主环境包括Web浏览器，Node(一种服务端JavaScript平台)和Adobe Flash。

宿主环境不仅提供基本的ECMAScript实现，也提供了该语言的扩展，以便语言与环境之间进行交互。(Web浏览器提供的就是DOM)

(2)DOM是针对XML但经过扩展用于HTML的应用程序编程接口(API).

DOM把整个页面映射成一个多层节点结构。

(3)BOM提供与浏览器交互的方法和接口。

JavaScript的使用

<script>元素负责引入JavaScript代码。

有两种引入方式：(不做举例，详细参考w3school里的讲解)

  • 直接在<script>标签内写JavaScript代码。
  • 编写JavaScript代码，并保存成独立的js文件，引入到页面中。

尽可能使用外部文件来包含JavaScript代码。 可维护性，可缓存，适应未来。。

该元素有六个属性：

  • async:可选（只对外部脚本文件有效）。表示应该立即下载脚本（但延迟执行），但不妨碍页面中的其他操作，不保证按照指定的先后顺序执行。
    比如下载其他资源，或者等待加载其他脚本。目的是不让页面等待两个脚本下载和执行。这种情况下保持各个脚本的互不依赖很重要。
  • charset: 可选（很少用）。 表示通过src属性指定的代码的字符集。大多数浏览器会忽视该属性。
  • defer：可选（只对外部脚本有效）。 表示脚本可以延迟到文档完全被解析和显示之后执行。脚本执行时要求得按照顺序执行，但实际中不一定。
  • language：（已废弃）会被浏览器忽视。
  • src：可选。表示包含要执行代码的外部文件。
  • type：可选（language属性的替代品），表示编写代码使用的脚本语言的内容类型（MIME类型）。text/javascript（这个也是默认值）。

一些我不太注意的知识点：

只要不存在defer和async属性，在解释器对<script>元素内部的所有代码求值完毕前（包括下载外部代码文件时），

页面中的其余内容都不会被浏览器加载。

带有src属性的<script>标签之间不应该包含额外的Js代码，只会下载并执行外部脚本文件，而忽略嵌入的代码。

<script> 标签的位置

(1) 传统做法，所有<script>元素都应该放在<head>元素中。

意味着必须等到全部JavaScript代码都被下载、解析和执行完成后，才开始呈现页面的内容（浏览器在遇到<body>才开始呈现内容）。

问题：JS代码很多，很大。则网站体验就囧了。

解决方法，参见(2)

(2)  现代的做法，把全部JavaScript引用放在<body>元素中页面内容的后面。

Javascript的简介和使用的更多相关文章

  1. JavaScript面向对象简介

    JavaScript面向对象简介 @(编程) [TOC] 1. 命名空间 命名空间是一个容器,它允许开发人员在一个独特的,特定于应用程序的名称下捆绑所有的功能. 在JavaScript中,命名空间只是 ...

  2. 【JavaScript】简介、&lt&semi;Script&gt&semi;标签及基本概念

    一.前言 时光荏苒,岁月匆匆.今年年初进入数据平台部门转型做Web平台.要想搞好前端肯定要学好JavaScript,于是准备抓上一俩本书从基础学起. 二.内容       简介 JavaScript是 ...

  3. 1&period; 现代 javascript 用法 简介 及 babel

    简介 包含 ECMAScript 基本概念,babel 使用 ,eslint 使用 以及新语法的介绍 和使用经验 ECMAScript 概念 ECMASctipt 是一种由 Ecma (前身为欧洲计算 ...

  4. Sentry 官方 JavaScript SDK 简介与调试指南

    系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For ...

  5. JavaScript&lpar;一&rpar;——简介（简单介绍）

    1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司(已被Oracle收购了),J ...

  6. HTML 学习笔记 JavaScript（简介）

    JavaScript 是世界上最流行的编程语言. 这门语言可用于HTML和web 更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScript是脚本语言 JavaScript ...

  7. JavaScript&colon; JavaScript的简介和入门代码演示

    1.Javascript的发展历史介绍: javascript是指的实在网页上编写的编程语言,其主要是控制器html的动态显示效果.HTMl能带来的只是一些基本的页面的风格,而要展示的漂亮使用CSS, ...

  8. javascript正则表达式简介

      javascript正则表达式 javascript正则表达式 regular expression是一个描述字符模式的对象: ECMAScript中的RegExp类表示正则表达式: String ...

  9. javascript多线程简介

    讲多线程之前,我们先了解一下JS的事件机制 浏览器运行时,脚本必须定期让位给UI进程进行来维持网页的响应,闲置太长时间的脚本可能会被浏览器当成失控脚本,进而造成假死或弹窗 事件触发的设计javascr ...

  10. Javascript 知识点简介

    如何在HTML中引入JS? 所有重定向的HTML标签内都可以嵌入javascript代码. 浮点数不要用 == 来进行判断 var num=0;    for(var i=0;i<10;i++) ...

随机推荐

  1. 15 个有趣的 JavaScript 与 CSS 库

    原文转载:http://www.codeceo.com/article/15-interesting-js-css-framework.html 1. Wing Wing 是一个微型(压缩后仅有4KB ...

  2. php基础教程-输出Hello World

    <!DOCTYPE html> <!--!文档类型,一个文档类型标记是一种标准通用标记语言的文档类型声明, 它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(D ...

  3. 【C&plus;&plus;】非原创&vert;统计代码覆盖率&lpar;一&colon;C&plus;&plus;&rpar;

    也是转别人的,因为我c++好菜好菜啊... http://blog.chinaunix.net/uid-23741326-id-3316943.html c++跟C基本是一样的,统计覆盖率,需要生成g ...

  4. 如何使用ArcGIS发布LiDAR 点云

    LiDAR--Light Detection And Ranging,即激光探测与测量技术. 下面将介绍如何使用ARCGIS来发布LiDAR的成果点云数据. LiDAR的点云数据一般格式为LAS.在A ...

  5. 20170714&lowbar;js闭包变量重置

    <html> <body> <script> function createFunctions(){ var result = new Array(); for ( ...

  6. wpf 中英文版编写

    var uriC = new Uri("/YTManage.Language;component/Chinese.xaml", UriKind.Relative); // 得到资源 ...

  7. 六、Hadoop学习笔记————调优之操作系统以及JVM

    内核参数overcommit_memory  它是 内存分配策略 可选值:0.1.2.0, 表示内核将检查是否有足够的可用内存供应用进程使用:如果有足够的可用内存,内存申请允许:否则,内存申请失败,并 ...

  8. 使用parcel打造一个零配置的react工作流

    parcel是一个前端打包工具.因其推崇的零配置理念,和webpack形成了鲜明对比.对于我这样一个被后端IDE智能提示宠坏的猿,自然是对webpack提不起爱.平时也都是使用CLI默认配置好webp ...

  9. 【数据库】数据库的锁机制，MySQL中的行级锁&comma;表级锁&comma;页级锁

    转载:http://www.hollischuang.com/archives/914 数据库的读现象浅析中介绍过,在并发访问情况下,可能会出现脏读.不可重复读和幻读等读现象,为了应对这些问题,主流数 ...

  10. WebService的讲解 和 CXF 的初步使用

    1. 复习准备 1.1. Schema约束 几个重要知识: namespace 相当于schema文件的id targetNamespace属性 用来指定schema文件的namespace的值 xm ...

相关文章