JS Course

JavaScript

JavaScript (JS) base is made of the scripting language ECMAScript. We are currently in ECMAScript2021 (v12). The most used version of JavaScript is ECMAScript6 (2015). In the ancient times, jQuery was a popular library adding a lot of useful stuff in JavaScript, but now quite a lot of these are directly served in JavaScript, so modern developers aren't using it as often as before (because removing it makes the website faster, increasing both performances and SEO). For instance, Bootstrap (the famous CSS framework) removed the jQuery dependency in version 5 (dropping Internet Explorer support in the meantime).

  • Learn the syntax
  • How to validate a form (errors, autocompletion, ...)
  • Handling events (clicks, show/hide something, ...)
  • Riot.js (not available)
  • How to use Web APIs (Rest, Ajax, promises, ...)
  • My list of JavaScript libraries

As always, you may learn JavaScript on W3School or MDN. But, maybe those two may be worth a go javascript.com and JavaScript tutorial.

Note: As you may have seen in the CSS course, instead of writing JavaScript, you can write TypeScript (sort of enhanced JavaScript) and compile it in any version of JavaScript. You can use JS minifier to reduce the size of your JavaScript (decrease the loading time), and a CDN (see the WEB course).

Some browsers may do not support some features (ex: fetch), and you may like polyfill that try to recreate the missing features. You can pick which ones here.

You may use JSDoc for your documentation (not tested). You may use mocha or jasmine to write tests. I enjoyed mocha (use Assert), but jasmine (does not use Assert) looks promising (install npm+the library globally (-g), then simply enter the command as Node users do).

Introduction

Inline JS 🤮SCRIPT tag 🤢External JS 😍

You can write JavaScript directly inside a component using attributes such as onmouseover, onclick, onsubmit etc. The list is here (W3Schools).

<p onmouseover="console.log('some code')">
    ...
</p>

You can use one (or more) tag <script>, and put the JS inside.

<script>
console.log('some code')
</script>

You can write JS in an external write, and link it to the HTML with

<script src="/path/to/file.js"></script>

Same as for CSS, this is the proper way to do it (allows the use of CDN, JS in one place, CSP, etc.).

As you should have learned by now, you can see the JavaScript inside the console (Web course). You can either log/print something using the console (👍) or using popups (👎)

console.log("message")
console.error("error message")
console.warn("warning message")
console.info("message")
// or you can use a popup
alert('message')
HELP! I wrote some JavaScript, but I don't see any changes!?

They may be two problems, 1: your code isn't working, or 2: your page is rendering using the cached JavaScript.

  • for 1: check for errors in the console, try testing selectors in the console too
  • for 2: CTRL+R or CTRL+SHIFT+R or SHIFT+F5 or CTRL+F5.

Basic Syntax

You may use this too, but for some, the syntax above will be enough

Other notes about the Language

The semicolon ; at the end of a line is optional. You may use it if you make more than one expression per line.

You can make comments using /* a comment */ or // a comment as you would in Java/C.
Some parts in JavaScript are following the properties of functional languages.
  • if a function does not return something, then it returns undefined (=a function must return a value)
  • everything is a value
  • a function can take a function, returns a function (functions are first-class citizen)
  • read more here
If you are tired of concatenating variables like this "a="+a, then you can use `a=${a}`. Everything inside the ${} will be evaluated when making the string, as long as you used ` (inverted quote).
You can improve a code checking for undefined/null, with some new operators, but in every case, the variable must have been declared 
let request = undefined; // or null
// Nullish coalescing operator
// if request is null/undefined, status=200 else status=request
let status = request ?? 200
// same as
// status = request || 200

// Optional chaining
// if error is undefined, error?.code = undefined
status = request?.code ?? 200

You can add "use strict" inside a file/function to disallow the use of non-declared variables, and throw errors instead of ignoring "bad syntax".

Advanced syntax

Advanced does not mean more complex, it means that you may not use this right now.

JavaScript for websites

We are calling DOM the Document Object Model. The tags of your page are a tree, you got html, then head/body, etc. This is what the DOM is. You got a variable called document (shortcut of window.document), and you may ask it about some nodes inside the tree.

REST API

You got another course "API", explaining what's an API and a lot of related stuff. Let's take the Musicbrainz API for example,

  • this URL is returning one album made by Autechre.
  • Here, we are considering that, like the URL above, you got a URL allowing you to fetch a result from your API
  • I'm going to explain how from this URL, you can get the result and use it in your code

When you are calling an API, you are requesting something from another website, this is not immediate. If you are waiting for the result, you won't be able to use JavaScript until the call is done (😨). We are making asynchronous calls (=in parallel to your code) to prevent this. I was taught XMLHTTPRequest, which need to be wrapped inside a Promise (asynchronous code) but fetch (native function) is already doing this making the code cleaner than ever.

My list of JavaScript libraries

This is more like a list of libraries to make some animations than a list of libraries 😋.

Title

With anime.js you do something like this handwritten animation

title

You can use Typed.js to get almost the same, but in a terminal.

You can find a lot of simple animations here.

Background

You can use a video as your page background with bideo.

You can add particles in the background of your pages with particles.

Some animations here are quite beautiful.

UI

Create carrousels easily with slick.

You can create a sort of image flipper with preloadjs

You can make a lot of funny animations with anime.js.

You can use Turn.js to make a book with flippable pages, but I didn't like it. StPageFlip seems better. PDF.js is beautiful too.

Plots

d3.js is the most well-known library.

External resources

Guidelines

CheatSheets

Any cheatsheet is longer and more complete than this course 😭. Still, this one javascript-cheatsheet (source) is quite good and the most readable of them. This one is quite good too (codewithharry), and this one is good (pythoncheatsheet).

Sources