A Comprehensive Guide to Learning Modern JavaScript
Gain the Latest and greatest in Javascript with our Modern Javascript Tutorial!
We cover everything from the basics to advanced topics, all explained in simple terms.
Get up-to-date on your coding skills today!
- Welcome to JavaScript Roadmap
- Browser: Document, Events, Interfaces
- Advance Topics
JavaScript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.g. complex animations, clickable buttons, popup menus etc). it is used by programmers across the world to create dynamic and interactive web content.
This Tutorial designed to help you to understand every aspect of the JavaScript programming language, quickly and efficiently. Here we learn JavaScript, We concentrate on the language itself here, with the minimum of environment-specific notes.
Introduction:
JavaScript is a lightweight, cross-platform, and interpreted compiled programming language which is also known as the scripting language for webpages. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client side developments as well as Server side developments.
The developer console is a practical tool that recognize tracing of scripts in the production system. Developer tools permit us to see errors, run commands, examine variables, and much more. You can also use option (Shift + CTRL + J) on Windows.
A code editor is the place where programmers spend most of their time.
There are many options, for instance:
- Visual Studio Code
- Sublime Text
- Notepad++
JavaScript Fundamentals:
A basic JavaScript program is determine to print Hello world as an output.
We will use these three ways to print ‘Hello, World!’.
- console.log(‘Hello, World!’);
- alert(‘Hello, World!’);
- document.write(‘Hello, World!’);
Variables are containers for storing data (values).
There are 3 ways to declare a JavaScript variable:
- Using var
- Using let
- Using const
JavaScript variables can hold different data types: numbers, strings, objects and more:
- Primitives/ Value Types
- String
- Number
- Boolean
- Null
- Undefined
- Reference Types
- Object
- Date
- Array
There are three browser-specific functions to interact with visitors: alert, prompt, and confirm.
The alert shows a message. The prompt shows a message asking the user to input text. It returns the text or, if Cancel button or Esc is clicked, null. The confirm shows a message and waits for the user to press “OK” or “Cancel”. It returns true for OK and false for Cancel or Esc.
- alert(“Hello”);
- result = prompt(title, [default]);
- result = confirm(question);
Template Literals use back-ticks (` `) rather than the quotes (” “) to define a string:
- let text = `Hello World!`;
- Comparisons
- Logical operators
- Basic operators, maths
- Functions
- Function expressions
- The modern mode, "use strict"
- Loops: while and for
- JavaScript specials
- Arrow functions, the basics
- The "switch" statement
- Conditional branching: if, '?'
- Nullish coalescing operator '??'
Code quality:
- Debugging in the browser
- Comments
- Coding Style
Objects: the basics:
- Objects
- Object methods, "this"
- Object references and copying
- Object to primitive conversion
- Garbage collection
- Constructor, operator "new"
- Symbol type
- Object to primitive conversion
Data types:
- Array
- Arrays methods
- Strings
- Numbers
- Date and time
- Iterables
- Map and Set
- Object.keys, values, entries
- Destructuring assignment
- Date and time
- JSON methods, toJSON
- WeakMap and WeakSet
Advanced working with functions:
- Global object
- Function binding
- The old "var"
- Variable scope, closure
- Rest parameters and spread syntax
- Function object, NFE
- The "new Function" syntax
- Scheduling: setTimeout and setInterval
- Arrow functions revisited
- Decorators and forwarding, call/apply
- Recursion and stack
Classes:
- Class basic syntax
- Class inheritance
- Static properties and methods
- Extending built-in classes
- Class checking: "instanceof"
- Private and protected properties and methods
Error handling:
- Error handling, "try...catch"
- Custom errors, extending Error
Object properties configuration:
- Property flags and descriptors
- Property getters and setters
Promises, async/await:
- Introduction: callbacks
- Promise
- Promises chaining
- Error handling with promises
- Promisification
- Promise API
- Async/await
- Microtasks
Generators, advanced iteration:
- Generators
- Async iteration and generators
Modules:
- Modules, introduction
- Export and Import
- Dynamic imports
Learning how to manage the browser page: add elements, manipulate their size and position, dynamically create interfaces and interact with the visitor.
Document:
- Browser environment, specs
- DOM tree
- Walking the DOM
- Styles and classes
- Attributes and properties
- Modifying the document
- Searching: getElement*, querySelector*
- Element size and scrolling
- Window sizes and scrolling
- Coordinates
- Node properties: type, tag and contents
Introduction to Events:
- Introduction to browser events
- Bubbling and capturing
- Event delegation
- Browser default actions
- Dispatching custom events
UI Events:
- Mouse events
- Pointer events
- Scrolling
- Keyboard: keydown and keyup
- Drag'n'Drop with mouse events
- Moving the mouse: mouseover/out, mouseenter/leave
Forms, controls:
- Form properties and methods
- Events: change, input, cut, copy, paste
- Focusing: focus/blur
- Forms: event and method submit
Document and resource loading:
- Page: DOMContentLoaded, load, beforeunload, unload
- Resource loading: onload and onerror
- Scripts: async, defer
Miscellaneous:
- Selection and Range
- Event loop: microtasks and macrotasks
- Mutation observer
List of extra topics that assume you’ve covered the first two parts of tutorial. There is no clear hierarchy here, you can read articles in the order you want.
Frames and windows:
- Popups and window methods
- Cross-window communication
Binary data, files:
- ArrayBuffer, binary arrays
- File and FileReader
- TextDecoder and TextEncoder
Network requests:
- Fetch
- FormData
- Fetch: Abort
- Fetch: Download progress
- Fetch API
- Fetch: Cross-Origin Requests
- XMLHttpRequest
- Resumable file upload
- WebSocket
- Server Sent Events
- Resumable file upload
Storing data in the browser:
- Cookies, document.cookie
- IndexedDB
- LocalStorage, sessionStorage
Animation:
- CSS-animations
- JavaScript animations
- Bezier curve
Web components:
- Template element
- Custom elements
- Shadow DOM
- Shadow DOM slots, composition
- Shadow DOM styling
- Shadow DOM and events
Regular expressions:
- Character classes
- Patterns and flags
- Word boundary: \b
- Methods of RegExp and String
- Unicode: flag "u" and class \p{...}
- Anchors: string start ^ and end $
- Multiline mode of anchors ^ $, flag "m"
- Patterns and flags
- Sets and ranges [...]
- Quantifiers +, *, ? and {n}
- Alternation (OR) |
- Sticky flag "y", searching at position
