JavaScript

Overview: JavaScript

JavaScript

:	HTML CSS JavaScript
:	JavaScript `console.log()` `console.error()` JavaScript `try...catchthrow`

JavaScript
JavaScript
JavaScript
API
JavaScript
JavaScript

JavaScript

? JavaScript 2 JavaScript console.log()

W3C Markup validation service CSS validation serviceJavaScript ESLint

ESLint

JavaScript

JavaScript
this "this" this this

bad-for-loop.html var 10 onclick i for

var let good-for-loop.html

await then()

: Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make

JavaScript

JavaScript JavaScript

fetch-broken

"Uncaught TypeError: heroes is not iterable" 25

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

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

jsonObj JSON .json fetch()

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

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

API

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}`);
populateHeader(response);
showHeroes(response);

: [object Promise]

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

`console.error()`

console.error()

console.log(`: ${response}`);

console.error(`: ${response}`);

JavaScript 1 2

showHeroes http://localhost:7800/js-debug-test/index.js:25
<anonymous> http://localhost:7800/js-debug-test/index.js:10

showHeroes() 25 10 showHeroes()

console.error()

fetch() then() Promise

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

: console.log()console.error()

JavaScript

Firefox JavaScript

: Chrome Safari Debugger Safari Web Development Tools

Firefox

Firefox [Firefox ]

for (const hero of heroes) { 26
Cmd/Ctrl + R

Firefox [ Firefox ]

console.error() showHeroes() 2 onload showHeroes()
showHeroesblockWindow 3

showHeroes heroes undefined jsonObj members 1
jsonObj JSON Response

showHeroes() fetch() JSON Response JSON

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

JavaScript

HTML CSS CSS JavaScript HTML CSS JavaScript

JavaScript "handling-errors.html" <script> </script> JavaScript

html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS </title>
  </head>
  <body>
    <script>
      // 
    </script>
  </body>
</html>

JavaScript

function inchesToMeters(num) {
  const mVal = (num * 2.54) / 100;
  const m2dp = mVal.toFixed(2);
  return m2dp;
}

<script> height const 70
js
```
const height = 70;
```
height
js
```
console.log(inchesToMeters(height));
```
JavaScript 1.78
- height "70" 70
- height "70 inches" ["Bob", 70] NaN NaN
- height // "Uncaught ReferenceError: height is not defined"

function inchesToMeters(num) {
  if (typeof num !== "number" || Number.isNaN(num)) {
    console.log("");
    return undefined;
  }
  const mVal = (num * 2.54) / 100;
  const m2dp = mVal.toFixed(2);
  return m2dp;
}

2 num

: if() typeof num "number" Number.isNaN(num) false num NaN typeof NaNnumber
3 "Uncaught ReferenceError: height is not defined"

throw Error()

else console.log()
js
```
throw new Error("");
```
num

try...catch

try...catch

try {
  // 
} catch (error) {
  // 
}

try catch catch Error

try...catch

inchesToMeters() console.log() console.log() try catch

try {
  console.log(inchesToMeters(height));
} catch (error) {
  console.error(error);
  console.log("");
}

2
- "uncaught" "unhandled"
- ""
num

if...else

JavaScript API Navigator geolocation if()

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

JavaScript HTML CSS

MDNstackoverflow.com caniuse.com

MDN "mdn" "mdn HTML video"
caniuse.com https://caniuse.com/#search=video
stackoverflow.com (SO) "disabling autofocus on HTML dialog" HTML SO Disable showModal auto-focusing using HTML attributes

JavaScript JavaScript

Overview: JavaScript

MDN

MDN 2026327

GitHub

MDN curriculum
HTML
1. HTML
6. : HTML
8. : HTML
9. :
12. :
13. :
15. :
17. :
18. :
21. :
23. :
24. :
25. HTML
26. : HTML
27. Additional tutorials
CSS
1. CSS
2. CSS
3. :
8. :
10. :
12. :
13. :
15. :
17. :
19. :
21. :
22. :
24. :
26. :
27. CSS
29. Additional tutorials
  4. CSS
CSS
5. :
CSS
3. :
5. :
7. :
8. CSS
9. : CSS
10. :
13. : RWD
14. :
15. :
16. Additional tutorials
JavaScript
1. JavaScript
2. JavaScript
5. :
7. :
10. :
12. :
13. :
15. :
17. :
21. :
24. :
26. :
27. DOM
28. :
30. JSON
31. : JSON
32. : UI
JavaScript
3. React
4. React ToDo
5. React
6. React :
7. React :
8. React
9. React
3. HTML
4. : HTML
5. CSS JS
6. : CSS/JS
7. WAI-ARIA
8. : WAI-ARIA
11. :
12. :
JavaScript
3. JavaScript
4. : JavaScript
6. :
7. : OOJS
Web API
5. API
JavaScript
3. API
5. :
4. HTML5
8. select
10. UI
13. Additional tutorials
  2. JS
  4. UI
2. Django (Python)
3. Express (Node.js)
4. Additional tutorials
5. :
6. :
7. JavaScript
8. HTML
9. CSS
3. HTML CSS
1. CSS
2. HTML
3. JavaScript