MDN学习笔记-JavaScript

2020.7.1

JavaScript 初体验

数组

　　控制节点增删的实例：

 1 var list = document.querySelector('.output ul');
 2 var searchInput = document.querySelector('.output input');
 3 var searchBtn = document.querySelector('.output button');
 4 
 5 list.innerHTML = '';
 6 
 7 var myHistory= [];
 8 
 9 searchBtn.onclick = function() {
10   if(searchInput.value !== '') {
11     myHistory.unshift(searchInput.value);
12 
13     list.innerHTML = '';
14 
15     for(var i = 0; i < myHistory.length; i++) {
16      var itemText = myHistory[i];
17       var listItem = document.createElement('li');
18       listItem.textContent = itemText;
19       list.appendChild(listItem);
20     }
21 
22     if(myHistory.length >= 5) {
23       myHistory.pop();
24     }
25 
26     searchInput.value = '';
27     searchInput.focus();
28   }
29 }

View Code

笑话生成器

函数作用域和冲突

　　很形象的例子：
　　

实例：

事件介绍

事件参考

addEventListener()和removeEventListener()

对事件冒泡和捕捉的解释

事件委托

　　冒泡还允许我们利用事件委托——这个概念依赖于这样一个事实,如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个子节点单独设置事件监听器。

　　示例

　　JavaScript中matches(matchesSelector)的兼容写法

JavaScript 对象基础

"this"的含义

适合初学者的JavaScript面向对象

一个简单的例子

创建我们最终的构造函数

一个JSON 示例

实践对象构造

画圆

异步JavaScript

Promise

回调地狱

函数提升

关于 setTimeout() 和 setInterval() 需要注意的几点

立即超时

一个更真实的例子

async和await:让异步编程更简单

async 关键字

等待Promise.all()

async/await的缺陷

　　不错的例子，将三个Promise对象存储在变量中，这样可以同时启动它们关联的进程（包含代码计时）：

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>Demonstration of fast async/await</title>
 6   </head>
 7   <body>
 8     <script>
 9       // Define custom promise function
10 
11       function timeoutPromise(interval) {
12         return new Promise((resolve, reject) => {
13           setTimeout(function(){
14             resolve("done");
15           }, interval);
16         });
17       };
18 
19       async function timeTest() {
20         const timeoutPromise1 = timeoutPromise(3000);
21         const timeoutPromise2 = timeoutPromise(3000);
22         const timeoutPromise3 = timeoutPromise(3000);
23 
24         await timeoutPromise1;
25         await timeoutPromise2;
26         await timeoutPromise3;
27       }
28 
29       let startTime = Date.now();
30       timeTest().then(() => {
31         let finishTime = Date.now();
32         let timeTaken = finishTime - startTime;
33         alert("Time taken in milliseconds: " + timeTaken);
34       })
35     </script>
36   </body>
37 </html>

View Code

总结

选择正确的方法

BabelJS 库

Web API简介

实用代码，解析json：

 1 var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
 2 var request = new XMLHttpRequest();
 3 request.open('GET', requestURL);
 4 request.responseType = 'json';
 5 request.send();
 6 
 7 request.onload = function() {
 8   var superHeroes = request.response;
 9   populateHeader(superHeroes);
10   showHeroes(superHeroes);
11 }

View Code

跨域

浏览器的同源策略

HTTP访问控制（CORS）

Origin

基本的DOM 操作

　　Node的创建，增删

从Window对象中获取有用的信息

　　resize

操作文档

　　添加移除节点：　

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>Shopping list example</title>
 6     <style>
 7       li {
 8         margin-bottom: 10px;
 9       }
10 
11       li button {
12         font-size: 8px;
13         margin-left: 20px;
14         color: #666;
15       }
16     </style>
17   </head>
18   <body>
19 
20     <h1>My shopping list</h1>
21 
22     <div>
23       <label for="item">Enter a new item:</label>
24       <input type="text" name="item" id="item">
25       <button>Add item</button>
26     </div>
27 
28     <ul>
29 
30     </ul>
31 
32     <script>
33       const list = document.querySelector('ul');
34       const input = document.querySelector('input');
35       const button = document.querySelector('button');
36 
37       button.onclick = function() {
38         let myItem = input.value;
39         input.value = '';
40 
41         const listItem = document.createElement('li');
42         const listText = document.createElement('span');
43         const listBtn = document.createElement('button');
44 
45         listItem.appendChild(listText);
46         listText.textContent = myItem;
47         listItem.appendChild(listBtn);
48         listBtn.textContent = 'Delete';
49         list.appendChild(listItem);
50 
51         listBtn.onclick = function(e) {
52           list.removeChild(listItem);
53         }
54 
55         input.focus();
56       }
57     </script>
58   </body>
59 </html>

View Code

从服务器获取数据

　　在现代网站和应用中另一个常见的任务是从服务端获取个别数据来更新部分网页而不用加载整个页面。这看起来是小细节却对网站性能和行为产生巨大的影响。

ajax

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6     <meta name="viewport" content="width=device-width">
  7 
  8     <title>Ajax starting point</title>
  9 
 10     <style>
 11       html, pre {
 12         font-family: sans-serif;
 13       }
 14 
 15       body {
 16         width: 500px;
 17         margin: 0 auto;
 18         background-color: #ccc;
 19       }
 20 
 21       pre {
 22         line-height: 1.5;
 23         letter-spacing: 0.05rem;
 24         padding: 1rem;
 25         background-color: white;
 26       }
 27 
 28       label {
 29         width: 200px;
 30         margin-right: 33px;
 31       }
 32 
 33       select {
 34         width: 350px;
 35         padding: 5px;
 36       }
 37 
 38     </style>
 39     <!--[if lt IE 9]>
 40       <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
 41     <![endif]-->
 42   </head>
 43 
 44   <body>
 45     <h1>Ajax starting point</h1>
 46 
 47     <form>
 48       <label for="verse-choose">Choose a verse</label>
 49       <select id="verse-choose" name="verse-choose">
 50         <option>Verse 1</option>
 51         <option>Verse 2</option>
 52         <option>Verse 3</option>
 53         <option>Verse 4</option>
 54       </select>
 55     </form>
 56 
 57     <h2>The Conqueror Worm, <em>Edgar Allen Poe, 1843</em></h2>
 58 
 59     <pre>
 60 
 61     </pre>
 62 
 63     <script>
 64       const verseChoose=document.querySelector('select');
 65       const poemDisplay=document.querySelector('pre');
 66       let request=new XMLHttpRequest();
 67 
 68       verseChoose.onchange=function(){
 69         console.log("切换")
 70         const verse=verseChoose.value;
 71         console.log(verse);
 72         updateDisplay(verse);
 73 
 74       }
 75       function updateDisplay(verse){
 76         console.log("进入更新")
 77         verse=verse.replace(" ","");
 78         verse=verse.toLowerCase();
 79         console.log(verse)
 80         let url=verse+'.txt';
 81         console.log(url)
 82         
 83       request.open('GET',url);
 84       request.responseType='text';
 85       request.send();
 86       console.log(request)
 87    
 88       }
 89       request.onload=function(){
 90         console.log("加载完成")
 91         poemDisplay.textContent=request.response;
 92         console.log(request.response);
 93       }
 94       updateDisplay('Verse 1');
 95         verseChoose.value='Verse 1'
 96       // updateDisplay();
 97   
 98 
 99     </script>
100   </body>
101 </html>

View Code

购物切换代码：

  1 // use fetch to retrieve the products and pass them to init
  2 // report any errors that occur in the fetch operation
  3 // once the products have been successfully loaded and formatted as a JSON object
  4 // using response.json(), run the initialize() function
  5 fetch('products.json').then(function(response) {
  6   return response.json();
  7 }).then(function(json) {
  8   let products = json;
  9   initialize(products);
 10 }).catch(function(err) {
 11   console.log('Fetch problem: ' + err.message);
 12 });
 13 
 14 // sets up the app logic, declares required variables, contains all the other functions
 15 function initialize(products) {
 16   // grab the UI elements that we need to manipulate
 17   const category = document.querySelector('#category');
 18   const searchTerm = document.querySelector('#searchTerm');
 19   const searchBtn = document.querySelector('button');
 20   const main = document.querySelector('main');
 21 
 22   // keep a record of what the last category and search term entered were
 23   let lastCategory = category.value;
 24   // no search has been made yet
 25   let lastSearch = '';
 26 
 27   // these contain the results of filtering by category, and search term
 28   // finalGroup will contain the products that need to be displayed after
 29   // the searching has been done. Each will be an array containing objects.
 30   // Each object will represent a product
 31   let categoryGroup;
 32   let finalGroup;
 33 
 34   // To start with, set finalGroup to equal the entire products database
 35   // then run updateDisplay(), so ALL products are displayed initially.
 36   finalGroup = products;
 37   updateDisplay();
 38 
 39   // Set both to equal an empty array, in time for searches to be run
 40   categoryGroup = [];
 41   finalGroup = [];
 42 
 43   // when the search button is clicked, invoke selectCategory() to start
 44   // a search running to select the category of products we want to display
 45   searchBtn.onclick = selectCategory;
 46 
 47   function selectCategory(e) {
 48     // Use preventDefault() to stop the form submitting — that would ruin
 49     // the experience
 50     e.preventDefault();
 51 
 52     // Set these back to empty arrays, to clear out the previous search
 53     categoryGroup = [];
 54     finalGroup = [];
 55 
 56     // if the category and search term are the same as they were the last time a
 57     // search was run, the results will be the same, so there is no point running
 58     // it again — just return out of the function
 59     if(category.value === lastCategory && searchTerm.value.trim() === lastSearch) {
 60       return;
 61     } else {
 62       // update the record of last category and search term
 63       lastCategory = category.value;
 64       lastSearch = searchTerm.value.trim();
 65       // In this case we want to select all products, then filter them by the search
 66       // term, so we just set categoryGroup to the entire JSON object, then run selectProducts()
 67       if(category.value === 'All') {
 68         categoryGroup = products;
 69         selectProducts();
 70       // If a specific category is chosen, we need to filter out the products not in that
 71       // category, then put the remaining products inside categoryGroup, before running
 72       // selectProducts()
 73       } else {
 74         // the values in the <option> elements are uppercase, whereas the categories
 75         // store in the JSON (under "type") are lowercase. We therefore need to convert
 76         // to lower case before we do a comparison
 77         let lowerCaseType = category.value.toLowerCase();
 78         for(let i = 0; i < products.length ; i++) {
 79           // If a product's type property is the same as the chosen category, we want to
 80           // display it, so we push it onto the categoryGroup array
 81           if(products[i].type === lowerCaseType) {
 82             categoryGroup.push(products[i]);
 83           }
 84         }
 85 
 86         // Run selectProducts() after the filtering has been done
 87         selectProducts();
 88       }
 89     }
 90   }
 91 
 92   // selectProducts() Takes the group of products selected by selectCategory(), and further
 93   // filters them by the tiered search term (if one has been entered)
 94   function selectProducts() {
 95     // If no search term has been entered, just make the finalGroup array equal to the categoryGroup
 96     // array — we don't want to filter the products further — then run updateDisplay().
 97     if(searchTerm.value.trim() === '') {
 98       finalGroup = categoryGroup;
 99       updateDisplay();
100     } else {
101       // Make sure the search term is converted to lower case before comparison. We've kept the
102       // product names all lower case to keep things simple
103       let lowerCaseSearchTerm = searchTerm.value.trim().toLowerCase();
104       // For each product in categoryGroup, see if the search term is contained inside the product name
105       // (if the indexOf() result doesn't return -1, it means it is) — if it is, then push the product
106       // onto the finalGroup array
107       for(let i = 0; i < categoryGroup.length ; i++) {
108         if(categoryGroup[i].name.indexOf(lowerCaseSearchTerm) !== -1) {
109           finalGroup.push(categoryGroup[i]);
110         }
111       }
112 
113       // run updateDisplay() after this second round of filtering has been done
114       updateDisplay();
115     }
116 
117   }
118 
119   // start the process of updating the display with the new set of products
120   function updateDisplay() {
121     // remove the previous contents of the <main> element
122     while (main.firstChild) {
123       main.removeChild(main.firstChild);
124     }
125 
126     // if no products match the search term, display a "No results to display" message
127     if(finalGroup.length === 0) {
128       const para = document.createElement('p');
129       para.textContent = 'No results to display!';
130       main.appendChild(para);
131     // for each product we want to display, pass its product object to fetchBlob()
132     } else {
133       for(let i = 0; i < finalGroup.length; i++) {
134         fetchBlob(finalGroup[i]);
135       }
136     }
137   }
138 
139   // fetchBlob uses fetch to retrieve the image for that product, and then sends the
140   // resulting image display URL and product object on to showProduct() to finally
141   // display it
142   function fetchBlob(product) {
143     // construct the URL path to the image file from the product.image property
144     let url = 'images/' + product.image;
145     // Use fetch to fetch the image, and convert the resulting response to a blob
146     // Again, if any errors occur we report them in the console.
147     fetch(url).then(function(response) {
148         return response.blob();
149     }).then(function(blob) {
150       // Convert the blob to an object URL — this is basically an temporary internal URL
151       // that points to an object stored inside the browser
152       let objectURL = URL.createObjectURL(blob);
153       // invoke showProduct
154       showProduct(objectURL, product);
155     });
156   }
157 
158   // Display a product inside the <main> element
159   function showProduct(objectURL, product) {
160     // create <section>, <h2>, <p>, and <img> elements
161     const section = document.createElement('section');
162     const heading = document.createElement('h2');
163     const para = document.createElement('p');
164     const image = document.createElement('img');
165 
166     // give the <section> a classname equal to the product "type" property so it will display the correct icon
167     section.setAttribute('class', product.type);
168 
169     // Give the <h2> textContent equal to the product "name" property, but with the first character
170     // replaced with the uppercase version of the first character
171     heading.textContent = product.name.replace(product.name.charAt(0), product.name.charAt(0).toUpperCase());
172 
173     // Give the <p> textContent equal to the product "price" property, with a $ sign in front
174     // toFixed(2) is used to fix the price at 2 decimal places, so for example 1.40 is displayed
175     // as 1.40, not 1.4.
176     para.textContent = '$' + product.price.toFixed(2);
177 
178     // Set the src of the <img> element to the ObjectURL, and the alt to the product "name" property
179     image.src = objectURL;
180     image.alt = product.name;
181 
182     // append the elements to the DOM as appropriate, to add the product to the UI
183     main.appendChild(section);
184     section.appendChild(heading);
185     section.appendChild(para);
186     section.appendChild(image);
187   }
188 }

View Code

第三方 API

　google map

　纽约时报例子分页

　　YouTube

绘图

WebGL 教程

WebGL

由于 3D 绘图的复杂性，大多数人写代码时会使用第三方 JavaScript 库（比如 Three.js、PlayCanvas 或 Babylon.js）。大多数库的原理都基本类似，提供创建基本的、自定义性状的功能、视图定位摄影和光效、表面纹理覆盖，等等。库负责与 WebGL 通信，你只需完成更高阶工作。

接触任何一个库都意味着要学一套全新的API（这里是第三方的版本），但与纯 WebGL 编程都大同小异。

Canvas 教程：一个详尽的教程系列，更细致深入地讲解了 2D 画布所需的知识。必读。
WebGL 教程：纯 WebGL 编程教程系列。
用 Three.js 创建一个简单的示例：Three.js 基础教程。我们还提供 PlayCanvas 和 Babylon.js 的基础教程。
游戏开发：MDN web 游戏开发目录页。提供与 2D、3D画布相关的实用教程和技术，可参考“技术”和“教程”菜单项。

[] instanceof Array

Object.prototype.toString.call()

深入理解javascript原型和闭包系列