JavaScript Concepts PDF

Dr. AISSAOUA HABIB University Setif -1-  Web standards Web standards are a set of formal guidelines and technical specifications created by standards bodies institutions that invite groups of people from different technology companies to ensure websites and...

Dr. AISSAOUA HABIB University Setif -1-  Web standards Web standards are a set of formal guidelines and technical specifications created by standards bodies institutions that invite groups of people from different technology companies to ensure websites and web technologies work consistently across different browsers, devices, and platforms. W3C is the best known web standards body that creates standards for the World Wide Web(HTML, CSS,..). ECMAScript (ECMA-262) is a Standard for scripting languages including JavaScript, JScript, and ActionScript. Dr. AISSAOUA HABIB University Setif -1-  JavaScript JavaScript was initially created to interact with elements of web pages. The programs in this language are called scripts. They can be written right in a web page’s HTML and run automatically as the page loads. JavaScript has now made its way to the server-side developments (Node.js), mobile devices( React Native). Dr. AISSAOUA HABIB University Setif -1-  JavaScript Engine The core features of JavaScript are based on the ECMAScript standard, The execution of the JavaScript code is handled by the Javascript Engine. All modern browsers come with their own version of the JavaScript Engine but the most popular one is Google’s V8 Engine(created 2008). Current JavaScript Engine use the concept of both compilation and interpretation at the same time, which is known as Just-in-Time (JIT) compilation. Dr. AISSAOUA HABIB University Setif -1-  Interpretation vs Compilation JIT compilation is a technique where code is compiled during runtime, rather than before the program runs. JIT : added a new part called a monitor (profiler). That monitor the code as it runs, and tracks how the code behaves while it is running in order to optimize it. Dr. AISSAOUA HABIB University Setif -1- JavaScript Engine Dr. AISSAOUA HABIB University Setif -1-  JavaScript Alternatives Recently a new languages appeared, which are transpiled (converted) to JavaScript before they run in the browser. Modern tools make the transpilation very fast and transparent, actually allowing developers to code in another language and auto-converting it. Examples of such languages:  TypeScript. It is developed by Microsoft.  Dart. Developed by Google.  Brython.  Kotlin  Etc. Dr. AISSAOUA HABIB University Setif -1-  WebAssembly According to W3C, besides HTML, CSS, and JavaScript, WebAssembly is the fourth language for the web which allows code to run in the browser. WebAssembly(WASM) was originally invented as a technology solution to speed up code execution inside web browsers. Developers don’t write WebAssembly directly; they write in the language of their choice, which is then compiled into WebAssembly bytecode. The bytecode is then run on the web browser where it’s translated into native machine code and executed at high speed. Dr. AISSAOUA HABIB University Setif -1-  Variable Scope 1. The scope is a policy that manages the accessibility of variables 2. A variable's scope determines from where within the code you can use a variable. Dr. AISSAOUA HABIB University Setif -1-  Variable Scope 1. In JavaScript, there are three keywords used to declare a variable var, let, and const. 2. The differences between the three are based on scope, hoisting, and reassignment. 3. A commonly accepted practice is to use const as much as possible, and let in the case of loops. Generally, var can be avoided outside of working on legacy code. Dr. AISSAOUA HABIB University Setif -1-  Variable Scope There are different types of scope in JavaScript: 1. Global Scope: variables declared outside any function or block are in the global scope, meaning they can be accessed from anywhere in the code. Dr. AISSAOUA HABIB University Setif -1-  Variable Scope 2. Function Scope: variables declared within a function are only accessible within that function. Dr. AISSAOUA HABIB University Setif -1-  Variable Scope 3. Block Scope (introduced with let and const): variables declared within a block (inside curly braces {}) are only accessible within that block. const: variables declared with const cannot be reassigned after their initial value is set. You can still modify the contents of objects or arrays declared with const!. Dr. AISSAOUA HABIB University Setif -1- Variable Scope Dr. AISSAOUA HABIB University Setif -1-  Variable Scope 3. Hoisting Hoisting in JavaScript means variable and function declarations are moved to the top of their scope before code execution. Only the declaration is hoisted, not the initialization. Dr. AISSAOUA HABIB University Setif -1- Variable Scope before the code is executed, the code looks like: Dr. AISSAOUA HABIB University Setif -1-  Objects  In JavaScript, an object is a collection of key-value pairs.  The key of a property can only be a string. And the value of a property can be any value, e.g., a string, a number, an array, and even a function. Dr. AISSAOUA HABIB University Setif -1-  JavaScript Template Literals Template literals allow you to use strings or embedded expressions in the form of a string. They are enclosed in backticks ` `. For example: With template literals, you can use both single and double quotes inside a string Dr. AISSAOUA HABIB University Setif -1-  JavaScript Template Literals Template literals allows multiline strings: Template literals can be used with expressions: Dr. AISSAOUA HABIB University Setif -1-  Function declaration A function declaration defines a named function and is hoisted to the top of its scope. Hoisted: Can be used before it's declared. Named function: The function always has a name. Dr. AISSAOUA HABIB University Setif -1-  Function Expression  Function expression defines a function as part of an expression, often assigned to a variable.  Not hoisted: Can only be used after it's defined.  Anonymous or Named: Function can be anonymous or named Dr. AISSAOUA HABIB University Setif -1-  LES EXPRESSIONS DE FONCTION IMMÉDIATEMENT INVOQUÉES Immediately Invoked Function Expression (IIFE)  Une autre façon d’exécuter une expression fonction est de créer une fonction anonyme qui va s’auto-invoquer c’est-à-dire qui va s’invoquer (ou s’appeler ou encore s’exécuter) elle-même dès sa création.  Seront exécutés automatiquement si l'expression est suivie par ().  Il faux ajouter l'opérateur de groupement ( ) pour indiquer qu'elle est une expression de fonction: Dr. AISSAOUA HABIB University Setif -1-  Fonctions fléchées (arrow functions)  Les fonctions fléchées sont une manière beaucoup plus concise et courte de définir des fonctions en Javascript. Leur particularité c'est qu'on utilise une flèche => pour définir une fonction et on n'utilise plus le mot clé function. Syntaxe: ([param] [, param]) => { instructions } // Parenthèses non nécessaires quand il n'y a qu'un seul argument param => expression // Une fonction sans paramètre peut s'écrire avec un couple de parenthèses () => { instructions } Dr. AISSAOUA HABIB University Setif -1- Comme vous pouvez le voir (a, b) => a + b représente une fonction qui accepte 2 arguments nommés a et b. Lors de l’exécution, elle évalue l’expression a + b et retourne le résultat. Dr. AISSAOUA HABIB University Setif -1-