- 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, ...)
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).
|Inline JS 🤮||SCRIPT tag 🤢||External JS 😍|
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.).
console.log("message") console.error("error message") console.warn("warning message") console.info("message") // or you can use a popup alert('message')
- 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.
You may use this too, but for some, the syntax above will be enough
|Other notes about the Language|
You can make comments using
|If you are tired of concatenating variables like this
|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 does not mean more complex, it means that you may not use this right now.
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.
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
This is more like a list of libraries to make some animations than a list of libraries 😋.
You can use Typed.js to get almost the same, but in a terminal.
You can find a lot of simple animations here.
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.
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.
d3.js is the most well-known library.
- W3Schools - Guidelines with their best practices and the common mistakes
I would really want to read everything jframer made, but it didn't even start yet (🙃). Maybe you will?