Showcase JavaScript

JavaScript Essential Training

with Morten Rand-Hendriksen

Links from JavaScript Essential Training

Chapter 1. JavaScript: A Brief Introduction

• MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript

• Visual Studio Code: https://code.visualstudio.com/

• ESLint for Visual Studio Code:

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

• Prettier for Visual Studio Code:

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Chapter 2. Up and Running with JavaScript

• <script> tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

• JavaScript modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

Chapter 3. Objects

• Object: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

• Object basics:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics

• Classes: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

• Object constructor function:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor

• Global objects: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects

Chapter 4. Sidebar: String Output

• Template literals:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

• String: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

Chapter 5. DOM

• DOM (Document Object Model):

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

• querySelector() method: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

• querySelectorAll() method:

https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll

• className property: https://developer.mozilla.org/en-US/docs/Web/API/Element/className

• className in React.js: https://reactjs.org/docs/faq-styling.html

• classList property: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

• hasAttribute() method: https://developer.mozilla.org/en-US/docs/Web/API/Element/hasattribute

• getAttribute() method: https://developer.mozilla.org/en-US/docs/Web/API/Element/getattribute

• setAttribute() method: https://developer.mozilla.org/en-US/docs/Web/API/Element/setattribute

• removeAttribute() method:

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeattribute

• style property: https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style

• getComputedStyle() method:

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

• createElement() method:

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

• append() method: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

• prepend() method: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/prepend

• appendChild() method: https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

• removeChild() method: https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

• replaceChild() method: https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild

• insertBefore() method: https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

• insertAdjacentElement() method:

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

Chapter 6. Sidebar: Variables and Data Types

• var statement: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

• let statement: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

• const statement:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

• Relational operators: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#Relational_operators

• Arithmetic operators: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#Arithmetic_operators

Chapter 7. Arrays

• Arrays: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays

• Array methods: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Instance_methods

Chapter 8. Functions and Methods

• Function: https://developer.mozilla.org/en-US/docs/Glossary/Function

• Arrow function:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

• this and arrow functions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#this_and_Arrow_Functions

• this operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

• Intl.NumberFormat object: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

• List of international local and language codes: http://www.lingoes.net/en/translator/langcode.htm

• Callback function: https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

• setTimeout() callback method: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

• if/else conditional statement:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else

• Logical operators: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#Binary_logical_operators

• switch statement:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

• for statement: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for

• for...of statement:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

• forEach() array method:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

• for...in statement:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

• Object entries:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

• Iteration statements:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements#Iterationst

Chapter 9. Events

• DOM events: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events

• Events: https://developer.mozilla.org/en-US/docs/Web/Events

• addEventListener() method:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Chapter 10. Advanced Things

• Using the debugger in Chrome: https://developers.google.com/web/tools/chrome-devtools/javascript

• Understanding React components: https://reactjs.org/docs/thinking-in-react.html

A dynamic web project to illustrate JavaScript properties, functions, objects, etc.

Page updated

Google Sites

Report abuse