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
maydo 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
|
You can use one (or more) tag <script>, and put the JS inside.
|
You can write JS in an external write, and link it to the HTML with
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 |
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 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
|
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
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.
External resources
Guidelines
- W3Schools - Guidelines with their best practices and the common mistakes
- Airbnb JavaScript Style Guide
- clean-code-javascript (😍, I didn't read everything, but I took note of a lot of things for later)
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
- https://www.javascript.com/learn/strings
- https://www.w3schools.com/Js/default.asp
- https://www.w3schools.com/Js/js_versions.asp
- https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
- https://www.javascripttutorial.net/javascript-anonymous-functions/
- https://developer.mozilla.org/fr/docs/Web/JavaScript
- http://www.iut-fbleau.fr/sitebp/web/wim41/js/dom.pdf
- http://www.iut-fbleau.fr/sitebp/web/wim41/js/js.pdf
- https://dwarves.iut-fbleau.fr/git/monnerat/wim4_2021/src/master/cours/jscomp.pdf
- http://pgsql.pedago.ensiie.fr/~vitera.y/cours/ipw/poly/03-applications-interactives.pdf
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
- https://attacomsian.com/blog/xhr-post-request
- https://javascript.pythoncheatsheet.org/
- https://mbeaudru.github.io/modern-js-cheatsheet/