木叶清风,C++,Python,Java,C#,Unity3d,Unreal4,UE4,技术日志

# Javascript入门

# 概念

Javascript是什么？

  • Javascript是一门客户端脚本语言，直接运行在客户端浏览器中。
  • 它是一门脚本语言不需要编译，每一个浏览器都有JavaScript的解析引擎，直接被浏览器的Javascript解析引擎解析执行。
  • 可以让用户和html页面的交互过程，控制html元素，让页面有一些动态的效果，增强用户的体验。

Javascript发展史：

  1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为C--，后来更名为ScriptEase。
  2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript。
  3. 1996年，微软抄袭JavaScript开发出JScript语言。
  4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准ECMAScript，就是统一了所有客户端脚本语言的编码方式。

# 实现

ECMAScript是一个Javascript重要实现标准，但它并不是Javascript唯一部分，一个完整的JavaScript实现由下面3部分组成：

  • 核心（ECMAScript）
  • 文档对象模型（DOM）
  • 浏览器对象模型（BOM）

# ECMAScript

ECMAScript不与任何具体浏览器相绑定，浏览器对它来说只是一个宿主环境，也没有提到用于任何用户输入输出的方法，ECMA-262 标准对ECMAScript的描述如下：

ECMAScript 可以为不同种类的宿主环境提供核心的脚本编程能力，因此核心的脚本语言是与任何特定的宿主环境分开进行规定的...

ECMAScript描述了以下内容：

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 运算符
  • 对象

它定义了脚本语言的所有属性、方法和对象。其他语言可以实现 ECMAScript 来作为功能的基准，Javascript是其中一个，此外还有Windows 脚本宿主（Windows Scripting Host, WSH）、Macromedia 在 Flash 和 Director MX 中的 ActionScript，以及 Nombas ScriptEase。

ECMAScript主要有三个版本：

  • 第一个版本是在ECMA-262标准第一版中定义的，它要求对Unicode标准的支持，要求对象是与平台无关的，Netscape的JavaScript 1.1事实上有不同的对象实现，是它不符合第一版的原因。
  • ECMA-262 第二版大部分更新本质上是编辑性的，为了与ISO/IEC-16262严格一致，也没有特别添加，更改和删除内容。
  • ECMA-262 第三版是该标准第一次真正的更新。它提供了对字符串处理、错误定义和数值输出的更新。同时，它还增加了正则表达式、新的控制语句、try...catch 异常处理的支持，以及一些为使标准国际化而做的小改动。一般来说，它标志着 ECMAScript 成为一种真正的编程语言。

在 ECMA-262 中，ECMAScript 符合性（conformance）有明确的定义。一个脚本语言必须满足以下四项基本原则：

  • 符合的实现必须按照 ECMA-262 中所描述的支持所有的“类型、值、对象、属性、函数和程序语言及语义”（ECMA-262，第一页）
  • 符合的实现必须支持 Unicode 字符标准（UCS）
  • 符合的实现可以增加没有在 ECMA-262 中指定的“额外类型、值、对象、属性和函数”。ECMA-262 将这些增加描述为规范中未给定的新对象或对象的新属性
  • 符合的实现可以支持没有在 ECMA-262 中定义的“程序和正则表达式语法”（意思是可以替换或者扩展内建的正则表达式支持）

# DOM

DOM（Document Object Model，文档对象模型）是 HTML 和 XML 的应用程序接口（API），DOM 将把整个页面规划成由节点层级构成的文档，HTML 或 XML 页面的每个部分都是一个节点的衍生物。

<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <p>hello world!</p>
  </body>
</html>
1
2
3
4
5
6
7
8

上面的DOM树可绘制一个节点层次图：

domTree

DOM的历史主要分为三个阶段：

  • DOM Level 1 是 W3C 于 1998 年 10 月提出的。它由两个模块组成，即 DOM Core 和 DOM HTML。前者提供了基于 XML 的文档的结构图，以便访问和操作文档的任意部分；后者添加了一些 HTML 专用的对象和方法，从而扩展了 DOM Core。
  • DOM Level 2 对原始 DOM 的扩展添加了对鼠标和用户界面事件（DHTML 对此有丰富的支持）、范围、遍历（重复执行 DOM 文档的方法）的支持，并通过对象接口添加了对 CSS（层叠样式表）的支持。它引入了几个新的模块：
    • DOM 视图 - 描述跟踪文档的各种视图（即 CSS 样式化之前和 CSS 样式化之后的文档）
    • DOM 事件 - 描述事件的接口
    • DOM 样式 - 描述处理基于 CSS 样式的接口
    • DOM 遍历和范围 - 描述遍历和操作文档树的接口
  • DOM Level 3 引入了以统一的方式载入和保持文档的方法（包含在新模块 DOM Load and Save）以及验证文档（DOM Validation）的方法，从而进一步扩展了 DOM。DOM Core 被扩展为支持所有的 XML 1.0 特性，包括 XML Infoset、XPath 和 XML Base。

# BOM

BOM（Browser Object Model）是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。使用BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。

BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

  • 弹出新的浏览器窗口
  • 移动、关闭浏览器窗口以及调整窗口大小
  • 提供 Web 浏览器详细信息的定位对象
  • 提供用户屏幕分辨率详细信息的屏幕对象
  • 对 cookie 的支持
  • IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

由于没有相关的 BOM 标准，每种浏览器都有自己的 BOM 实现。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。

BOM具有以下几个对象：

BOM

  • window对象，表示整个浏览器窗口，主要用来操作浏览器窗口。同时，window对象还是 ECMAScript 中的 Global 对象，因而所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下。
    • 弹窗类相关方法：
      • alert('提示信息')
      • confirm("确认信息")
      • prompt("弹出输入框")
      • open("url地址"，“_black或_self”，“新窗口的大小”）
      • close() 关闭当前的网页
    • 定时器相关方法：
      • setTimeout(函数，时间) 只执行一次
      • clearTimeout(定时器名称) 清除定时器，用于停止执行setTimeout()方法的函数代码。
      • setInterval(函数，时间) 无限执行
      • clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
  • document对象，是window对象的一个属性，可以用来处理页面文档。
    • JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookies。document.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value;
  • location对象，用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
    • location对象：
      • location.herf = 'url地址'
      • location.hostname 返回 web 主机的域名
      • location.pathname 返回当前页面的路径和文件名
      • location.port 返回 web 主机的端口 （80 或 443）
      • location.portocol 返回页面使用的web协议。http或https
  • navigator对象，提供了与浏览器有关的信息，userAgent是最常用的属性，用来完成浏览器判断。
  • screen对象，用来获取用户的屏幕信息。
    • height: 获取整个屏幕的高。
    • width : 获取整个屏幕的宽。
    • availHeight: 整个屏幕的高减去系统部件的高（ 可用的屏幕宽度 ）
    • availWidth : 整个屏幕的宽减去系统部件的宽（可用的屏幕高度 ）
  • history对象，包含浏览器的历史。
    • back() 返回上一页。
    • forward() 返回下一页。
    • go(“参数”) -1表示上一页，1表示下一页。

# ECMAScript内容

# 与html结合

有两种方式：

  1. 内部JS：定义<script>，标签体内容就是js代码。

    <script type="text/javascript">
alert("hello world！");
</script>
    1
    2
    3

  2. 外部JS：定义<script>，通过src属性引入外部的js文件。

    <script type="text/javascript" src="test.js"></script>
    1

注意：

  1. <script>可以定义在html页面的任何地方，但是定义的位置会影响执行顺序。
  2. <script>可以定义多个，变量都在一个空间中。

# 注释

有两种注释：

  1. 单行注释：//注释内容
  2. 多行注释：/*注释内容*/

Javascript基础2-变量 →