JavaScript was created by Netscape in the early '90s as an extension of HTML for Netscape Navigator 2.0 in order to manipulate HTML documents and form validation. JS is a high-level interpreted language; unlike C or C#, JS needs an "interpreter" aka a web browser (Google Chrome) or server (Node). If HTML is the skeleton that makes up the web, and CSS is the skin and makeup, JS is the brain telling our skeleton to "do" stuff. The JS standard is called ECMAscript.
In the js-guides folder, you'll find topics divided into different files. I initially wrote this guide as one single .js file but found it easier to read and digest the material by breaking down sections into their own files. This guide is not meant to be deployed.
To add JS to an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- ADD YOUR JS SCRIPT TAG HERE -->
<script defer src="script.js"></script>
</head>
<body></body>
</html>- Writing Comments
- Console Log (Writing & Printing)
- Data Types (Variables, Scope, Date Type Examples)
- Control Flow (Operators & Flow Statements)
- if
- if ... else
- if ... else ... if
- ternary
- switch
- while
- do ... while
- for
- Arrays
- Functions
- Objects & Object-Oriented Programming (OOP, "this")
- The Document Object Model (The DOM)
- Making API calls (XML HTTP REQUEST, Fetch, Axios)
- JSON
- Async/Await & Promises
- Simple JS solutions to Popular Technical Challenges (i.e. Palindrome, Fizzbuzz, Fibonacci)
- Event Listeners (to add to the DOM file)
- Modules
- Error Handling
- Hashmap & Hashtable
- Node.js
- React.js
This guide doesn't include everything to know about JS. It is simply a place to start.
There are no CSS files for the sake of simplicity. (A CSS beginner's guide is currently in the works.)
This JS guide follows Google's JS style guide as closely as possible. This involves following Nethmi Wijesinghe's excellent set-up guide for installing ESLint and Prettier in VS Code to match Google's guide in a new project. Nethmi's guide also works if you wish to use another popular style guide (i.e. Airbnb). I also refer to Google's annotating JavaScript for the Closure Compiler repo.
index.html is used for the-doom.js, API.js, and JSON.js. data.json is used just for JSON.js.
No Lighthouse reports were run due to lack of deployment for this guide.
Many people enjoy LeetCode, but I think NeetCode and CodeSignal are easier to use and include more approachable coding questions.
Thank you to my instructors at General Assembly for my first steps into JS. Also shout-out to the many helpful YouTube channels I still refer to: Traversy Media, Web Dev Simplified, The Net Ninja, Programming with Mosh, and Fireship. Also thank you to Asabeneh's 30 Days of JavaScript repo.
© 2023 Brady Gerber. All Rights Reserved.