JavaScript

JavaScript

JavaScript 1990 Internet Explorer NetscapeNetscape JavaScriptIE JScript VBScript JavaScript JScript ECMAScript

2000 XMLHttpRequest Internet Explorer 6

if (window.XMLHttpRequest) {
  // MozillaSafariIE7+ ...
  httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  // IE 6 
  httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

jQuery jQuery.ajax()

JavaScript

JavaScript

• / JavaScript Web API

JavaScript

HTML/CSS JavaScript JavaScript

• JavaScript
• this this this this

• promise await promise then() promise

Linter

HTML CSS linter JavaScript / JavaScript/ECMAScript linter JSHint ESLint

JSHint linter JavaScript

linter linter JSHint IDE

JavaScriptJavaScript

fetch-broken

Uncaught TypeError: heroes is not iterableheroes 25

function showHeroes(jsonObj) {
  const heroes = jsonObj["members"];

  for (const hero of heroes) {
    // ...
  }
}

jsonObj JSON JSON fetch() .json

const requestURL =
  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";

const response = fetch(requestURL);
populateHeader(response);
showHeroes(response);

Console API

Console API JavaScript JavaScript console.log()

console.log() fetch()

const requestURL =
  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";

const response = fetch(requestURL);
console.log(`${response}`);
const superHeroes = response;
populateHeader(superHeroes);
showHeroes(superHeroes);

Response value: [object Promise]

console.log() fetch() JSON Promisefetch() Promise Promise Promise

Promise then()

const response = fetch(requestURL);
fetch(requestURL).then((response) => {
  populateHeader(response);
  showHeroes(response);
});

console.log()

JavaScript

Firefox JavaScript

Firefox

[Firefox ]

26 26 Cmd/Ctrl + R 26

[ Firefox ]

• showHeroes() onload showHeroes()
• showHeroesblock Window

1. showHeroes heroes undefined jsonObj members
2. jsonObj Response JSON

showHeroes() fetch() promise promise JSON Response JSON

Response https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-fixed

JavaScript

• JavaScript Browserify HTTP
• minification Uglify JSCompress.com
• API API API API
• JavaScript JavaScript CSS Web API Brian Birtles Element.animate Web API

JavaScript

JavaScript

• JavaScript
• Web API

JavaScript/API

HTML CSS HTML CSS JavaScript HTML CSS JavaScript

JavaScript API API Navigator geolocation

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition((position) => {
    //  Google Maps API
  });
} else {
  // 
}

CSS element.style.property paragraph.style.transform !== undefined CSS @supports CSS

@supports (container-type: inline-size) {
  /*  */
}

JavaScript JavaScript

JavaScript

• jQuery DOM JavaScript CSS DOM Document.querySelector()Document.querySelectorAll()Node
• WebGL API Three.js WebGL 3D APIService Worker API Service Worker Service Worker
• DHTML JavaScript CSS API
• UI UI UI FoundationBootstrap Material-UI React UI
• API LocalForage API IndexedDBWeb Storage Web SQL Chromium

GitHub

JavaScript CSS <script> Bower Webpack

JavaScript

JavaScript ECMAScript 6/ECMAScript 2015

Babel.js

JavaScript

Aaron Andersen CSS @supports CSS

JavaScript

CSS JavaScript CSS JavaScript jshint API Object

• Mozilla mozObject
• ChromeOperaSafari webkitObject
• Microsoft msObject

violent-theremin Canvas API Web Audio API

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();

Web Audio API Chrome/Opera API webkit

API AudioContext Web Audio

JavaScript JavaScript /ployfill

MDN caniuse.com JavaScript/API

window.AudioContext;

JavaScript HTML CSS

JavaScript JavaScript

• JavaScript