javaScript从入门到精通2.md

Posted 2021-02-03 东夋壬

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaScript从入门到精通2.md相关的知识，希望对你有一定的参考价值。

Web API

Web API 介绍

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
任何开发语言都有自己的API；API的特征输入和输出(I/O)；API的使用方法(console.log())

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)，此处的Web API特指浏览器提供的API(一组方法)。

常见的浏览器提供的API的调用方式

mozilla
javascript的组成：

ECMAScript - JavaScript的核心：定义了javascript的语法规范，描述了语言的基本语法和数据类型
BOM - 浏览器对象模型：一套操作浏览器功能的API，通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
DOM - 文档对象模型：一套操作页面元素的API，DOM可以把html看做是文档树，通过DOM提供的API可以对树上的节点进行操作

BOM

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

BOM 对象 window

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window。注意：window下一个特殊的属性 window.name

对话框

alert()：显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。
prompt()：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。
confirm()：显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框。

页面加载事件

onload ：在页面加载完的时候开始执行

window.onload = function () {
// 当页面加载完成执行
// 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
}

onunload：关闭页面或 F5 时触发

window.onunload = function () {
  // 当用户退出页面时执行
}  //  IE 可以使用 window.onbeforeunload 事件l

定时器

setTimeout() 和 clearTimeout()
在指定的毫秒数到达之后执行指定的函数，只执行一次

var timerId = setTimeout(function () {
  console.log(\'Hello World\');
}, 1000);  // 创建一个定时器，1000毫秒后执行，返回定时器的标示

clearTimeout(timerId);   // 取消定时器的执行

// 要想定时器循环执行，需要递归调用，自己调用自己，上面的方法修改如下
var timeId = \' \';
function fn(){
  console.log("Hello World");
  timeId = setTimeout(fn, 1000);
}

setInterval() 和 clearInterval()
定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数

var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);  //  创建一个定时器，每隔1秒调用一次

clearInterval(timerId);  //  取消定时器的执行

location 对象

location 对象是 window 对象的一个属性，调用的时候可以省略 window 对象
location 可以获取或者设置浏览器地址栏的 URL ( 统一资源定位符 Uniform Resource Locator )

scheme://host:port/path?query#fragment
scheme: 通信协议，常用的 http,https,ftp,maito 等
port: 端口号，整数，可选，省略时使用方案的默认端口，http 默认端口为80
path: 路径，由零或多个\'/\'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query: 查询，可选，用于给动态网页传递参数，可有多个参数，用\'&\'符号隔开，每个参数的名和值用\'=\'符号隔开。例如：wd=菜鸟教程
fragment: 信息片断，字符串，锚点，如，#1

var url = document.createElement(\'a\');
url.href = \'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container\';
console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol);  // https:
console.log(url.host);      // developer.mozilla.org
console.log(url.hostname);  // developer.mozilla.org
console.log(url.port);      // (blank - https assumes port 443)
console.log(url.pathname);  // /en-US/search
console.log(url.search);    // ?q=URL
console.log(url.hash);      // #search-results-close-container
console.log(url.origin);    // https://developer.mozilla.org

//  Location没有继承任何方法，但实现了来自URLUtils的方法。

document.location.assign(\'https://developer.mozilla.org/zh-CN/docs/Web/API/Location.reload\');  // 触发窗口加载并显示指定的 URL 的内容
window.location.reload(true);  // 重新加载当前页面  F5
document.location.replace(\'https://developer.mozilla.org/en-US/docs/Web/API/Location.reload\');  // 以给定的URL来替换当前的资源，没有返回

// 解析 URL 中的 query ，并返回对象的形式
function getQuery(queryStr) {
  var query = {};
  if (queryStr.indexOf(\'?\') > -1) {
    var index = queryStr.indexOf(\'?\');
    queryStr = queryStr.substr(index + 1);
    var array = queryStr.split(\'&\');
    for (var i = 0; i < array.length; i++) {
      var tmpArr = array[i].split(\'=\');
      if (tmpArr.length === 2) {
        query[tmpArr[0]] = tmpArr[1];
      }
    }
  }
  return query;
}
console.log(getQuery(location.search));
console.log(getQuery(location.href));

history 对象

使用 history API与浏览器历史记录进行交互。主要功能：查找浏览器历史记录中出现过的页面，移除浏览器历史记录中的单个页面，向浏览器历史记录中添加页面，移除所有浏览器历史记录中的页面。

window.history.forward();  //  前进，相当于浏览器左上角的 -->
window.history.back();   //  后退，相当于 <--
window.history.go(-1); // 相当于 <--
window.history.go(1); // 相当于 -->

navigator 对象

Navigator 接口表示用户代理的状态和标识。它允许脚本查询它和注册自己进行一些活动。可以使用只读的 window.navigator 属性检索导航器对象。

window.navigator.appName;  // Netscape
window.navigator.appVersion; // 浏览器内核
window.navigator.language; // zh-CN
window.navigator.platform; // Win32 判断浏览器所在的系统平台类型.
window.navigator.userAgent; // 判断用户浏览器的类型，比appversion多一个Mozilla/

DOM

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为 DOM。

Document Object Model的历史可以追溯至1990年代后期微软与 Netscape 的“浏览器大战”，双方为了在 JavaScript 与 JScript 一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有 VBScript 、 ActiveX 、以及微软自家的 DHTML 格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM又称为文档树模型：

DOM又称为文档树模型

文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签的属性

DOM经常进行的操作

查：获取元素
增：动态创建元素
删、改：对元素进行操作(设置其属性或调用其方法)
事件(什么时机做相应的操作)

获取页面元素

我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，才进行后续操作

根据id获取元素

var div = document.getElementById(\'main\');  // id 为 main 的元素
console.log(div);
// 获取到的数据类型 HTMLDivElement，对象都是有类型的
// HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget

注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

根据标签名获取元素

var divs = document.getElementsByTagName(\'div\');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}  //  获取到的 div 是一个对象数组，divs[0] 就是数组中第一个对象

根据name获取元素

var inputs = document.getElementsByName(\'hobby\');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}    //   获取的也是一个对象数组，即使只有一个 hobby，但使用时需要有索引

根据类名获取元素

var mains = document.getElementsByClassName(\'main\');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}  // 获取包含 main 类名的对象

根据选择器获取元素

var text = document.querySelector(\'#text\');
console.log(text); // 获取 id 为 text 的元素，querySelecteer 中写法与css相同

var boxes = document.querySelectorAll(\'.box\');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}  // querySelectorAll 是获取所有

总结

一般使用：
  getElementById("id 属性的值")
  getElementsByTagName("标签 的名字")
以下的有些浏览器不支持，比如 IE 低版本：
  getElementsByName("name 属性的值")
  getElementsByClassName("类 样式的值")
  querySelector("选择器名字")
  querySelectorAll("选择器名字")

事件

事件：触发-响应机制
Event 接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

事件三要素

事件源：触发(被)事件的元素，哪个做 who
事件类型：事件的触发方式(例如鼠标点击或键盘点击)，做什么 what
事件处理程序：事件触发后要执行的代码(函数形式)，怎么做 do

事件的基本使用

<body><input type="button" value="点我" id="box" /></body>
<script>
var box = document.getElementById(\'box\');
box.onclick = function() {
  console.log(\'代码会在box被点击后执行\');  
} // 点击 box 按钮，控制台打印输出
</script>

属性操作

非表单元素的属性

href、title、id、src、className

var link = JavaScript从入门到精通第二课
 JavaScript从入门到精通第三课
 Atom编辑器入门到精通 Atom使用进阶
 Axure RP 从入门到精通（五十五）案例 - 终极杀人王(执行javascript脚本)
 JavaScript教程-从入门到精通
 Atom编辑器入门到精通  Atom使用进阶