2020 JavaScript Programming for Beginners : JavaScript from A to z : Learn The JavaScript Programming Language Completely From Scratch

Citation preview

TABLE OF CONTENT 1. INTRODUCTION 2. CONDITIONALS 3. FUNCTIONS 4. SCOPE 5. ARRAYS 6. LOOPS 7. ITERATORS 8. OBJECTS 9. CLASSES 10. BROWSERCOMPATIBILITY ANDTRANSPILATION 11. MODULES 12. PROMISES 13. ASYNC-AWAIT 14. REQUESTS 15. GLOSSARY 16. CONCLUSION

AN INTRODUCTION TO JAVASCRIPT JavaScript is a strong client-side scripting language. JavaScript is primarily used to improve the user's engagement with the website. In other words, with the help of JavaScript, you can make your website more lively and informative. JavaScript is also commonly used for graphics rendering and mobile device development. There are also more sophisticated server side variants of JavaScript, such as Node.js, which enable you to attach more features to your website than merely uploading files (such as real-time communication between several computers). Inside the client environment ( for example, a web browser), JavaScript can be connected to the climate objects to provide programmatic control over them. It is widely recognized for web page creation, and several non-browser applications use it as well. JavaScript can be used for both client-side and serverside developments. JavaScript contains a series of basic objects such as sequence, Date and maths and a core set of linguistic structures such as operators, control structures and phrases.

CLIENT SIDE It supplies objects for the use of the user and its Document Object Model (DOM). As though Client-side extensions enable an application to position items on an HTML form and answer to user events such as mouse clicks, template data, and page navigation. Using complete client-side frameworks like AngularJS, ReactJS, VueJS and so many more.

SERVER SIDE It supplies objects that are important to running JavaScript on a server. As if server-side extensions allow an application to interact with a database, to provide continuity of details from one invocation to another, or to execute file manipulations on a server. The useful framework that is the most famous of these days is node.js.

FEATURES OF JAVASCRIPT According to a recent Stack Overflow survey, JavaScript is the most major platform on earth. With advancements in web development and JavaScript having migrated to the server through Node.js and other applications, JavaScript is capable of even more. Here are some things we can do with JavaScript: I. JavaScript was first developed for DOM manipulation. Earlier websites were mostly static after the creation of dynamic websites for JS. II. JS functions are objects. We can have properties and methods much like a particular entity. They may be transmitted as arguments for other purposes. III. This will accommodate the date and period. IV. Performs Form Validation even though forms are generated using HTML. V. No compiler was required.

PLATFORM FOR JAVASCRIPT Web Development : Introducing interactivity and actions to static JavaScript pages was developed to do so in 1995. When utilizing AngularJS, this can be done very quickly. Web Applications: Through development, the apps have advanced to the point that a language is required to build reliable web applications. If we're looking at a map in Google Maps, we just need to click and drag the mouse. All the informative display is only a button away, and that is only possible because of JavaScript. Uses Application Programming Interfaces ( APIs) that give extra power to the computer. Electron and React is really helpful in this section. Server Applications: With the support of Node.js, JavaScript has found its way from client to server, and node.js is the most strong on the application side. Games: Not only on websites, JavaScript also helps in the creation of leisure games. The combination of JavaScript and HTML 5 allows JavaScript common in game creation. This offers an EaseJS repository that offers options for operating with rich graphics. Smart watches: JavaScript is used in all feasible systems and platforms. This offers a PebbleJS library that is used in smartwatch apps. It system operates with programs that allow the internet to run. Art: Artists and designers will build anything they want using JavaScript to sketch on HTML 5 canvas, render sound more powerful and use the p5.js software. Machine Learning: This collection of JavaScript ml5.js can be used for software creation through machine learning.

HOW TO RUN JAVASCRIPT ? As a scripting language, JavaScript can not operate on its own. Ultimately, the application is liable for running the JavaScript file. When a user requests a JavaScript-based HTML page, the script is sent to the browser and it is up

to the browser to execute it. JavaScript is supported by all modern web browsers and is the biggest benefit of JavaScript. So, you don't have to think over whether the site client is using Internet Explorer , Google Chrome, Firefox or some other application. JavaScript is supported. Often, JavaScript is working on every operating system, like Windows , Linux or Mac. Therefore, JavaScript overcomes the key drawbacks of VBScript (now deprecated) and is restricted to IE and window.

TOOLS YOU NEED In order to begin with, you need a text editor to write your code and a browser to view your web pages. You should use the text editor of your choosing, like Notepad++, Visual Studio Code, Sublime Text, Atom or some other text editor that you're happy with. You may use any web browser that includes Google Chrome, Safari, Microsoft Edge, Internet Explorer, etc.

JAVASCRIPT AND JAVA JavaScript and Java are in some ways identical but in others completely different. JavaScript is similar to Java, but has no static typing and strong type control of Java. This is the reason why JavaScript has been reconstructed from LiveScript to Javascript, adopting most Java expression syntax, naming conventions and the basic control flow constructions. JavaScript follows a runtime framework based on the limited number of data types representing integer, boolean and string values, unlike the compile-time class structure of Java. Instead of a class model, JavaScript has a prototypebased object model. The prototype model has a dynamic inheritance, which can change for individual objects. What is inherited. Functions without unique declaration specifications are often provided by JavaScript. Functions may be object resources, usable as methods loosely typed. In contrast to Java, JavaScript is a very open language. All variables, classes and methods are not required to be declared. You must not worry about public, private or safeguarding methods and you do not need to implement interfaces. No explicitly typing variables, parameters and return function

types. Java is a class programming language built for fast output and protection of type. Type Security means , for example, that a Java integer can not be thrown into an object reference or private memory by altering Java bytecodes. The class-based paradigm of Java means that only courses and their methods are comprised of programming. The heritage and strong style of Java class typically includes tightly related hierarchies of artifacts. Such specifications hinder the programming of Java than those of JavaScript. JavaScript, by contrast, comes down spiritually from a series of smaller, dynamic languages, such as HyperTalk and dBASE. Their simple syntax, advanced built-in functionality and low specifications to construct structures provide a larger audience of programming resources.

CONDITIONALS Conditional statements are used for various actions depending on varying circumstances. Conditional statements govern JavaScript behavior and decide whether pieces of code will run or not. Within JavaScript there are various kinds of requirements, including: 1) "If" statements: that if there is a valid condition it is used for a sequence of code execution. 2) "Else" statements: where it defines an execution for a block of code if the same assertion is false. 3) "Else if": a new question is stated if the first condition is incorrect. Now that you have the basic JavaScript terms, let us show each of the examples.

IF STATEMENT EXAMPLE The If sentence only runs while the condition in parenthesis () is true. Thus the commonest form of conditional.

For the case above, that's what happening: The keyword if says the conditional statement should be started by JavaScript. (10 > 5) is a statistical condition that is true — 10 is greater than 5 in this situation. That is the code block to be run, which is the portion of curly braces{}. The variable result is assigned the value "if block" as the condition passes.

ELSE STATEMENT EXAMPLE The if statement with an else statement, adding another block to run if the conditional does not pass, may be expanded.

In the above case, "cat" and "dog" are not identical, so that the other block is run and that the result of the variable is "else block."

ELSE IF STATEMENT EXAMPLE

You can also extend a declaration if with another declaration an else if which adds another conditional on its block.

You may use multiple if else conditionals, but note that the first else if block is going run . After running the first one which passes, JavaScript skips all remaining conditions.

JAVASCRIPT FUNCTIONS A JavaScript function is a code block designed to accomplish a particular task. When anything expresses it (calls it), a JavaScript function is executed.

DEFINING FUNCTIONS A function description (also called a function declaration, or function statement) contains of the keyword function followed by: The title of the function. A list of function parameters, surrounded in parentheses and separated by commas. The statements of JavaScript which define the function, included in curly brackets, {...}

Example, this code defines a square to refer to a function that generates a square of a given number: A function may have multiple parameters or no parameters or anything. In the following example, makeNoise does not list any names for the parameters, while power labels two:

Some functions generate value, including such power and square, and some do not produce value, such as makeNoise, the only result of which is a side effect. The return statement sets the value that the function returns.The return keyword without an expression will cause the function to return unknown. Functions that have no return statement or anything, such as makeNoise, similarly return undefined. Function parameters act as regular bindings, but their initial values are provided by the function caller, not by the function on its own.

FUNCTION USED AS A VARAIBLE VALUE Functions should be used the same way we use variables in all kinds of formulas, assignments, and calculations.

THE ARGUMENTS OBJECT All JavaScript functions will start with argument value. The value of each parameter is included in an argument variable. The object of arguments is an object-like array. Using an array-like index to reach its values. However, the array methods are not supported.

RETURN VALUE Using The return keyword a function can return zero value, or one value.

In the example mentioned above, a function called Sum adds and returns val1 and val2. It allows the calling code to obtain and assign the return value to a variable. The second Multiply feature does not return a value, so it does not describe the resulting attribute.

NESTED FUNCTION One or more internal functions can be used in JavaScript. These nested functions are within the external function. The internal function will control

external function variables and parameters. External function can not access internal functions specified variables.

POINTS TO REMEMBER 1) A function JavaScript allows you to specify a block of code, name it, and run it as many times as you would like. 2) A function can be defined with the keyword function and can be performed with the operator.

3) One or more parameters may be included in a function. The function parameter values can optionally be specified during its execution. 4) JavaScript is a language that is freely typed. A parameter function can contain any type of data. 5) When calling the function you can specify fewer or more arguments. 6) Instead of parameter names, all functions may access object arguments by default. 7) A function can return a specific value or a function. 8) A variable with different names may be assigned a function. 9) JavaScript lets you create a variable with anonymous functions.

SCOPE Accessibility (visibility) of variables is determined by the scope. OR

In some particular parts of your code, the scope is an accessibility for variables , functions and objects during execution. That is, the visibility of variables and other resources in your code areas is determined by the scope. In JavaScript, there are two kinds of choice. 1) Global scope 2) Local scope

GLOBAL SCOPE You are already in the Global framework when you start writing JavaScript in a document. There is only one global scope for the entire JavaScript text. A variable

is in the global scope if it is specified outside the function. LOCAL SCOPE Variables declared in the JavaScript function will be LOCAL to the function.

Local variables of the Function scope: they will only be obtained from within the function. Variables declared within any var parameter function are called local variables. Local variables will not be accessed or changed outside the declaration function. Variables specified within a function are local in scope. But they have a different scope for any call to that function. This means that variables with the same name can be used in various functions. Since these variables are bound to their respective functions, with multiple scopes each and several other functions inaccessible. Since only local variables are defined in their functions, the same

named variables may be used for different functions. Local variables are generated when the function begins, and removed when the function is done.

KEY POINTS TO REMEMBER 1) JavaScript has global scope and local scope.

2) Variables declared & initialized outside of any function become global variables. 3) Variables declared and initialized inside the function become local variables for that function. 4) Variables declared without a var keyword within any function will automatically become global variables. 5) Global variables can be accessed and updated anywhere within the software. 6) Local variables can not be accessed outside the declaration function. 7) Global variables and local variables may have the same name without impacting each other. 8) JavaScript does not require the width of the block level within{} brackets.

ARRAYS Description: Arrays are list-like objects whose prototype has the mechanism to perform transverse and mutation operations. Neither the length of the JavaScript array nor the types of its components are fixed. As the array length is often modified and the data can be stored in an array at uncontiguous locations, it is not important to have JavaScript arrays dense. In general, these are helpful features; but you should find typing arrays if these features are not suitable for your particular use. Arrays will not use strings as index elements (as in an associative array) but it must use integers.Setting or accessing non-integer notations does not set or retrieve an element from the array list itself, but instead sets up or accesses the variable that is correlated with the preference of the object of the array. The properties of the array object and the list of array elements are distinct, and the transverse and mutation operations of the array can not be applied to these named properties. The array is a special type of variable that can store several values using a different syntax. Each value is associated with the numeric index starting at 0.

ARRAY INITIALIZATION

In JavaScript array can be described and initialized in two ways, the literal array and the syntax of the constructor array. The array of literal syntax is simple. It consists of a list of values separated by a comma and enclosed in square brackets. The following example illustrates how to describe and initialize an array using a literal syntax array.

The JavaScript array can store multiple elements of different data types. It is not necessary to store the same data type value in an array

ARRAY CONSTRUCTOR You can initialize an array with the syntax of the Array constructor using a new keyword. The following example illustrates how to describe an array using the syntax of the Array constructor.

COMMON OPERATIONS CREATE AN ARRAY

ACCESS AN ITEM USING AN ARRAY ITEM

LOOP OVER AN ARRAY

ADD AN ITEM TO THE STARTING OF AN ARRAY

REMOVE AN ITEM BY INDEXPOSITION

ACCESSING ARRAY ELEMENT The JavaScript arrays is zero-indexed: the first item of the array is index 0, so the last element is index equal to length property value of the array minus 1. Returns undefined using an incorrect index number.

There's nothing special about the JavaScript arrays and the properties that make it happen. The properties of JavaScript that begin with a digit can not

be referenced with dot notation and must be accessed with bracket notation. For example, if you have an object called 3d, it can only be referenced using a bracket notation. Note that '3d' had to be mentioned in the 3d example. This is also possible to quote the indexes of the JavaScript list (e.g. years['2'] instead of years[2]), although this is not essential.

ARRAY PROPERTIES - Constructor-Returns the function that generated the prototype of the Array object - Length-Sets or returns the number of items in the list - Prototype-Allows you to add properties and methods to your Array set.

ARRAY METHODS 1. Concat() Joins two or more arrays and returns a copy of the attached arrays. 2. CopyWithin() Copies the array elements to and from the specified positions within the array. 3. Entries() Returns the Array Iteration Object key / value pair 4. Every() Tests whether any element in an array passes a test. 5. Fill() Fill the items in the array with a static value 6. Filter() Creates a new array for every element in the array that passes the test. 7. Find() Returns the value of the very first component in the test sequence. 8. FindIndex() Returns the index of the first item in the array that passes the test. 9. ForEach() Calls a function for each element of the array 10.form() Creates an array from that of an object 11.Includes() Check that the array contains the required element 12.IndexOf() Scan the array for an element and return its location 13.IsArray() Checks whether an object is an array 14.Connect() Connect all the array elements in a list 15.Keys() Returns an Iteration Object array containing the keys of the

original array 16.LastIndexOf() Find an element array, start at the end of the array and return its location. 17.Map() Generates a new array, resulting in the function being named for each array element. 18.Pop() Removes the very last element of the array and returns the element to a array. 19.Push() Adds new elements to the end of the array and returns the new length of the list 20.Reduce() Reduce the values of the collection to a single value (going left to right) 21.ReduceRight() Reduces the values of the array to a single value (going from right to left) 22.Reverse() Reverses the order of the objects in the list 23.Shift() Removes the first element of the array and returns the element 24.Some() Checks if any of the elements in the array have passed the test. 25.Sort() Sorts the array elements 26.Splice() Add / Remove elements via an array 27.ToString() Converts a string array and returns the result. 28.Unshift() Adds new elements to the start of the array, and returns a new length 29.ValueOf() Returns the primary value of the list

LOOPS Loops are used in JavaScript to perform frequent tasks on the basis of a condition. Conditions typically return true or false when evaluated. The loop will continue to run until the stated condition returns false.

DIFFERENT KINDS OF LOOP JavaScript contains a range of loop types: 1. For-Loops a number of times via a code block 2. For / in-Loops through an object's properties 3. For / of -loops through the values of even an iterable object

4. While-loops through a code block while the stated condition is true 5. Do / while-also loops through a code block while the stated condition is true

WHILE LOOP JavaScript loops have been used repeatedly to run a code block unless certain requirements have been met. When developers think about iteration or iteration, say, an array, it's the same as looping. JavaScript provides several options for repeatedly running a code block, like while, do while, for and forin.

Example

The condition is assessed first. If valid, the block of statements that follow the while statement will be executed. This is repeated until the condition is incorrect. It is known as a pre-test loop since it tests the condition before the block is executed. The number++ statement will be called the updater. Removing it will result in an endless loop. You must always provide a statement in the loop to ensure that the loop is terminated or else you will run into this problem.

DO WHILE LOOP

The next do block is executed first, and then the state is evaluated. If the while condition is valid, the block will be executed again and repeated until the condition is false. This is known as a post-test loop as the condition is tested after the block has been executed.

FOR LOOP

This consists of three sections, separated by semi-colons. The first is the initializer (var I = 1) which initializes the loop and is executed only once at the start of the loop. The second is the state of the test I < = 50). When the conditional expression is evaluated to true, the loop body is executed. The loop stops when it's right. The third element is an updater (i++) that is invoked after each iteration. Usually, the updater raises or reduces the loop counter. In a for-loop, all three phases, i.e. initializer, test condition, and updater, are written together in such a single line (called iteration statement), while in a while they are scattered and lying in different places.

FOR IN LOOP

With each iteration, JavaScript applies the name of the property (string value) to the variable object. In the example above, the following are: name, age and degree.

Note that for-in loops also bring it back properties and methods that are inherited from the prototype chain. The built-in hasOwnProperty method is an simple way to bypass properties and functions that are not part of the object itself.

We haven't mentioned objects yet, but the student object has a name property on the object itself. Its prototype model has age properties. The for-in loop iterates through all properties, but hasOwnProperty guarantees that the age property on the prototype is not shown because it is not the student's own property.

BREAK STATEMENT When JavaScript experiences a break statement in a loop, it instantly exits the loop without running any other loop statements. The power is passed immediately to the statement following the loop structure. Here is an example of this:

When an infinite loop is deliberately created, you can use a break statement to control the end of the loop, as follows:

The number++; assertion will not be executed when the loop is entered for the 50th time.

CONTINUOUS STATEMENT If a continuous state in a loop is found on JavaScript, it finishes running the current iteration and moves back to the beginning of the loop and begins the next iteration. The example below shows only even numbers.

In other loops, the continuous phrase is also found. However, in a for-loop it acts differently than in a time-loop. The for-loop first tests the i++ and then examines the I < = 50 condition in the example above. Now notice the time loop:

The power will be restored directly to the testing state when the continuous statement is carried out (number < = 50), and the number + + is not evaluated to create an infinite loop.. The lesson here is that you can't simply replace a for loop with a time loop; you have to be careful, particularly when a continuous statement is involved.

ITERATORS Iterator is a way to extract data from a one-to-one-time data structure, it requires to introduce an iterator interface. It's an object or pattern that helps us to go through a list or a set. Iterators define the sequences and enforce the iterator protocol that returns the object using the next() method that holds the value and is done. The value represents the next value of the sequence of the iterator, and the completed value is the true or false boolean value, if the last value of the sequence has been consumed, then the true value is false. We can check whether an entity is iterable by default or not

ITERATION PROTOCOL There can be two iteration protocols available: the Iterable protocol and the Iterator protocol.

ITERATOR PROTOCOL An object is an iterator when an interface (or an API) is implemented that addresses two questions: 1. Is there an aspect left?

2. If there is something, what is the element? An object is qualified as an iterator when it has a next() method which returns an object with two properties: - Done: a boolean value implying whether or not there are any other elements that could be iterated. - Value: this is the current dimension. Every time you call the next() returns the next value in the compilation:

When the final value returns, the following returns the result object as following if you call the next( )method:

The value of the finished property means that there is no interest to return and that the value of the property is set to undefined.

ITERABLE PROTOCOL An object is iterable if it includes a method called [Symbol.iterator] that does not use an argument and recovers an object that conforms to the iterator protocol. The [Symbol.iterator] is one of the excellently-known symbols of the ES6.

ITERATORS Since ES6 provides built-in iterators for the Array, Set, and Map collection forms, you don't need to create iterators for these objects. When you have a custom form and want to make it iterable so that you can use a loop construct, you need to enforce iteration protocols. The following code generates a sequence object that returns a list of numbers

within the range (start, end) with an interval between subsequent numbers.

The following code uses the Series Iterator for ... the loop:

OUTPUT

You can directly access [Symbol.iterator] () as shown in the following script:

CLEANING UP In additional to the next() method, the [Symbol.iterator]()can optionally return the return() method. The returN() method is invoked automatically when the iteration is stopped early. It's where you can set up a application to clean up your tools. The following example uses the return() method for the Sequence object:

The following snippet uses the pattern object to generate an odd number

sequence from 1 to 10. However, the iteration ends prematurely. As a consequence, the return() method is invoked automatically OUTPUT

OBJECTS JavaScript is designed for a simple object-based paradigm. An object is a set of properties, and a property is a combination of a name (or key) and a value. The value of the property may be a function, in which case the property is known as a process. Objects in JavaScript, like in many other programming languages, can be compared to objects in real life. The definition of artifacts in JavaScript can be understood with real life, with tangible objects. Through JavaScript, an object is a stand-alone entity with properties and class. For example, compare it to a cup. A cup is an entity that has properties. A cup has a color, a pattern, a weight, a material made of it, etc. In the same way, JavaScript objects can have properties that describe their characteristics.

CREATING OBJECT IN JAVASCRIPT There are three ways to create objects. 1. By a literal object 2. By generating the Object instance directly (using the new keyword) 3. Use an object constructor (using a new keyword)

JAVASCRIPT OBJECT BY OBJECT LITERAL Example

BY CREATING INTANSE OF OBJECT New keyword is used here to build an object. Let's see the example of directly creating an object

BY USING AN OBJECT CONSTRUTOR Here, you need to construct an argument function. Each argument value can be assigned to the current object and use this keyword. Each keyword refers to the current object . The example of creating an object by an object constructor is given below.

DEFINING METHOD IN JAVASCRIPT OBJECT The method can be specified in the JavaScript object. But before defining the method, we need to add the property to the function of the same name as the method.

The following example is used to describe the method in the object.

ACCESS OBJECT KEYS Use for .. in loop to get a list of all the attributes and methods of an object.

JAVASCRIPT OBJECT METHODS 1. Object.assign() This method is used to transfer enumerable and proprietary properties from the source object to the target object. 2. Object.create() This method is used to build a new object with the prototype object and properties defined. 3. Object.defineProperty() This method is used to identify certain properties behavioral attributes. 4. Object.defineProperties() This method is used to build or configure multiple properties of objects. 5. Object.entries() This method returns a key list, value pairs. 6. Object.freeze() This method prevents the removal of existing assets. 7. Object.getOwnPropertyDescriptor() This method returns the descriptor property for the specified property of the specified object. 8. Object.getOwnPropertyDescriptors() This method returns all proprietary descriptors of a given object. 9. Object.getOwnPropertyNames() This method returns an array of all properties (identifiable or not) found. 10.Object.getOwnPropertySymbols() This method returns an array of all the properties of the symbol key. 11.Object.getPrototypeOf() This method returns the prototype for the given object. 12.Object.is() his method determines whether two values are the same.

13.Object.isExtensible() This method decides if an object is extensible. 14.Object.isFrozen() This method decides whether an entity has been frozen. 15.Object.isSealed() This method determines whether an object is sealed. 16.Object.keys() This method returns the property name list of the object. 17.Object.preventExtensions()This method is used to prevent any extension of an entity. 18.Object.seal() This method prevents the addition of new properties and labels all existing properties as non-configurable. 19.Object.setPrototypeOf() This method sets the prototype of the specified object to a different object. 20.Object.values() method returns a set of values.

POINTS TO REMEMBER 1. The JavaScript object is a single entity that holds several values for properties and methods. 2. Object property stores a literal value and the process is a function. 3. An object may be generated using a literal object or a syntax of the constructor class. 4. Object properties and methods can be accessed by using a dot notation or a[ ] bracket. 5. Objects are moved by reference from one function to another. 6. An object can include other object as a property.

JAVASCRIPT CLASSES The ECMAScript 5 JavaScript does not have a class type. This does not support a complete object-oriented programming framework like other languages such as Java or C #. However, you can construct a function in such a way that it functions as a class. The following example shows how a function can be used as a JavaScript class.

CLASS DEFINITION

Using the keyword class to build a package, and always apply the constructor() method to it. The constructor method is called any time a class object is initialized. Example

The constructor method will be called automatically when the object is initialized.

METHOD The constructor method is special, it is where you initialize property, when a class begins, it is called automatically and must contain the exact name "constructor," JavaScript may add an invisible and empty building method if you do not have a constructor method.

Example Create a method named “present”

As you can see in the example above, you call the method by making reference to the method name of the object followed by the brackets (any parameters would be inside the brackets).

STATIC METHOD Static methods are specified on the class itself, not on the prototype. This means that you can't call the static method on the object (mycar) but on the class (car):

INHERITANCE Using the extended keyword to construct a class inheritance. A class generated with a class inheritance inherits all methods of another class:

Example: Create "Model" class, that inherits the methods of the "Car" class: The super( ) method is the parent class. We also called the super() method in the builder method and referred to the parent properties and the properties of the constructor method.

GETTERS AND SETTERS Classes also permit you using a getters and a setter. It can be smart to use getters and setters for your properties , especially if you're doing something special with a value before you return it, or before you set it. Using the get and set keywords to connect the getters and the setters in the class. Example: Build a getter and a seter for the "carname" property: Even if the getter is a method, you don't use brackets when you want to get the value of the property. In this scenario, the name of the getter / setter method could not be the same as the name of the property.

BENEFITS OF USING CLASS - Efficient and easy, self contained syntax. - A simple, canonical way to simulate JavaScript classes. Prior to ES6, there were a number of competing implementations in popular libraries. - More familiar to people with a class-based language background.

BROWSERCOMPATIBILITY ANDTRANSPILATION Recently, a good application or website has become much more than a static collection of divisional elements. Modern websites are interactive,

highperformance software that help to complete complex end-to - end business processes. JavaScript has a major contribution to make to this level. It's massively popular with developers but not embraced equally by all browsers. Developing cross-browser-compatible web pages running javascript is sometimes a challenge. Helping developers meet this challenge was one of the driving forces behind our development of the browser compatibility deployment tool. - ECMAScript (ES) is a scripting language configuration standardized for Javascript by Ecma International. - ES6 is a JavaScript version that was launched in 2015 and is backward compatible. The JavaScript Babel library is an example of how it can be done; which converts ES6 JavaScript to ES5. Transpilation is the method of translating one programming language into another. - The npm update command can update JavaScript packages in the project directory. Create a folder called node modules and copy the JavaScript package files to it. This command will also install all the dependencies for the provided kit. - Ecma modified JavaScript from ES5 to ES6 in 2015 to make JavaScript syntax more similar to other languages, make JavaScript syntax more effective and easier to learn, and fix ES5 bugs.

JAVASCRIPT BROWSER COMPATIBILITY 1. Various reasons have been cited for the same purposes such as incorrect DOCTYPEs, vendor specific CSS styling, and the obsolete corrections to browsers. 2. JavaScript developers haven't ever paid much attention to the features of the browser, and there have been JavaScript errors for as long as the language has been around. As far as the correct support for JavaScript is concerned, some of the very popular web browsers are one or two years apart. 3. Effective JavaScript issues accompanied by cross-browser JavaScript issues in particular. 4. Each browser handles the scripts differently; therefore, JavaScript errors

are recorded differently. Unfortunately, we will be aware of JavaScript errors until all web browser developers agree on a set of standards for JavaScript processing or any other script language for that purpose. 5. Here we'll talk about some of the common JavaScript problems, followed particularly by the JavaScript problems of the cross-browser. 6. Linters will provide you with better consistency and less error-containing JavaScript code following the footsteps of HTML and CSS. They also warn of unethical practices and can be customized to make their approach strict or straightforward. 7. In JavaScript debugging, browser development tools were found to work very well. First, your code will be reported with a JavaScript console. The ability to add breakpoints to code is a distinctive feature of these tools. At breaks, you can easily assess the current state of the environment and see what is happening and how further actions are needed. 8. By using a tool like Browserify, you can store more Javascript than you need from loading a single bundle of your scripts. In addition, raising the number of HTTP applications was found to be very effective for output amplification. When working with API, when not actively using the API, it is advisable to turn off the API features because they can actually be powerful. Similarly, performance animations can be really tough. Many JavaScript libraries provide JavaScript-programmed animation capability, but animation with native browser capabilities would be a better approach. 9. HTML and CSS are considered to be permissive but JavaScript has no scope for errors. If an incorrect or unaknown syntax is found in the JavaScript engine, an error message will most likely be displayed. In old browsers, some modern language features don't work. The 'Promises' and the 'Arrays Typed' are two really good examples. 'Arrow Functions' also offers an anonymous function syntax which is shorter and more convenient. However, Internet Explorer and Safari do not support it and you will probably encounter problems when you use it in your app.The idea is to test whether or not an active browser supports a feature first. Followed by the conditional code execution, all browsers will have the experience they need regardless of whether they support the feature or not.

10. The developer has to make sure that it works all over the set of browsers you want to support the application, and test the implementation thoroughly when selecting a library for codeing. In addition , ensure you are popular and well-supported in the library and will possibly not get out of practice in the near future! 11. A Polyfill is essentially a code or plug-in that gives the technology the browser is expected to support. They normally consist of JavaScript external files that you can use easily in your own project. They differ significantly from libraries, however. In the one side, where libraries augment existing features and make it simpler for developers, polyfills, on the other side, provide support for features that are completely nonexistent.

TRANSPILATION One way developers are looking to use new JavaScript features is to migrate ECMAScript 6 / ECMAScript 2015 code to an old browser-compatible version. It is called transpiling JavaScript.

BAD BROWSER SNIFFING CODE Web browsers provide a list with a user agent that defines what browser the web browser is. Back when the only options used by Netscape or Internet Explorer were 'browser sniffing code,' the developer retrieved the user's browser and provided the right code. For developers, browser compatibility is no longer an option. This is an integral part of the production process and needs similar (if not more) focus as styling or writing. it's simple javascript. just a bit of detail and everybody is ready to launch an app that runs perfectly well on all platforms available!

WHY WOULD YOU STILL TRANSPILE? We use React JSX (which currently is very common, so I assume a lot of developers suit this category). At its heart is an XHTML-to-JS-code transformation, not involving a complete transpiler such as Babel. Furthermore, if VirtualDom is all you need, use it instead.

The latest features of the language are to be tried. With ES6 you probably do well if you do not belong to TC39 or have a burning urge to insert volatile language characteristics into your production code. Nowaday, the majority of browsers have a decent language and the need to transpile disappears. You use TypeScript to weighed the drawbacks and advantages. TypeScript compiler typically stretches type knowledge rather than transform syntax when targeting a modern version of ES6. You would like to reduce code by shaking tree (in webpacks and rollups, this is how to do so). You want to obscure or reduce your code by decreasing its size. You want to delete part of the code on condition. Static code analysis is needed. You can use an intelligent bundler for size-sensitive production services, such as Mobiles, but when creating such alternative deployments, we will see more detailed cost evaluations. These kinds of static code analyses are still useful for production code as "advanced optimization techniques." Your files don't need to be minified. At the moment (although a harm branch is present), UglifyJS can not minify ES6, but Babili can deal. Compression algorithms do a reasonable job (not if the files are too small) and it should do all right without a compression unless you give an operating systems with every page load. Images and multimedia content nowadays take far more bandwidth than code.

DON’T TRANSPILE,BUT COMPILE FOR REAL. WASM is the kid in the city and the official building target promises speed and smaller code size. Chrome and Firefox currently support WASM, but the big browser vendors agree that WASM will be the most common run-times of the future. You can try it if you have Chrome. Take a look at Rust if you're the kind of developer that hits for something new. It is WASM compiled, but not web-limited. People actually use it to write a browser or an operating system. In addition to old days, C / C++ developers support it and like it.

MODULES We want to split this application into several files as our application grows

larger. For a specific purpose, a module may contain a class or a feature library. No language-level module syntax JavaScript existed for a long time. This was not a problem, since scripts were initially small and simple, so it was not necessary. Yet scripts became increasingly complicated so that the group discovered a number of ways to organize code into modules and to load modules on demand from special libraries. To name a few (for reasons of history): AMD-one of the oldest module systems that the library initially implements require.js. CommonJS – the Node.js application module program. UMD – one additional module framework, proposed to be universal, AMD and CommonJS compatible. All these now become part of history slowly, but in old texts we can still find them. The module system for the language level has gradually evolved in the standard in 2015, and has been now supported in Node.js and all major browsers. From now on, we will study the modern modules of JavaScript.

WHAT IS A MODULE? Only a file is a module. A single module is a script. Just that simple. Modules can load each other and export and import special directives, calling from one other module functions, in order to interchange functionalities: Export variables and functions of keyword labels which should be accessible from outside the current module. Import enables the import of other modules functionality. Let's run the in-browser example. As modules support keywords and special features, the user should be told that a script needs to be treated as a module with the < script type="module "> attribute.

Example: ANONYMOUS CLOSURE

Our anonymous function has a self-assessment environment or "closure" with this structure, and then we evaluate immediately. This allows us to hide parent (global) namespace variables.

What is nice about this method is that, without overwriting existing global variables accidentally, you could still access global variables in this function:

Notice that a parenthesis is needed for an anonymous function, because declarations beginning with the keyword function are often called function statements (notice that you can not have unnamed function statements in JavaScript). EXAMPLE: OBJECT INTERFACE

As you can see, this approach allows us to decide which parts / methods we

want to keep private (for example myGrades) and which by adding them to our return statement (for example average / failure).

EXAMPLE: REVEALING AND MODULE PATTERN This is very similar to the approach described above, with the exception that all methods and variables are kept private unless specifically stated:

COMMONJS AND AMD

One feature in particular is, above all, the use of a single global variable in order to bundle the code into a function creating a private namespace for itself with a closing scope. We do have their downsides though each solution is successful in its own way. First, as a developer, you have to know how to load your files in the right dependency. For example , let us assume that in your project you are using Backbone, so you include in your file the scripting tag for the source code of Backbone. However, since Backbone has a strong dependency on Underscore.js, the Backbone script tag can not be set before underscore.js. As a developer it can sometimes be a headache to manage dependencies and correct these things. Another disadvantage is that they can lead to collisions with namespace. For example, what if you have the same name for two of your modules? Or what if you have two module versions, and both are needed? So you probably wonder: can we design a way to ask for the interface of the module without crossing the global scope? The response is yes, luckily. The commonJS and AMD approaches are two prominent and well implemented.

COMMONJS CommonJS is a community working group developing and implementing module declaration JavaScript APIs. A CommonJS module is essentially a JavaScript reusable element that exports specific objects and makes them available in the programs for other modules. You'll be very familiar with this format if you've programmed in Node.js. Each JavaScript file with CommonJS stores modules in its unique module

context (like closing them). We use the.exports object module to expose and import modules in this field. It could look like this when you define the CommonJS module

We use special object module and place a link in module.exports for our purpose. This allows the CommonJS module system to know what we want to expose to other files. Then, you can require myModule to be in your file, if someone wants to use it:

This method has two strong advantages over the development modules we have previously discussed: 1. Avoid global emissions in namespace 2. Explicitly make our dependency The syntax, which I personally really love, is also very compact. Another noteworthy thing is that CommonJS adopts the first server approach and loads modules synchronously. This is important, because if we have three other modules, it is one by one that we need. Now, it works very well on the server but unfortunately makes JavaScript for

your browser more difficult to use. Just say that it takes a lot more than reading from a disk to read a module from the internet. As long as a module loading screen runs, the browser will be blocked until loading is done. It functions as the JavaScript thread stops until the code is loaded.

AMD CommonJS is great and good, but what if we want to asynchronously load modules? The response is called the definition for the Asynchronous Module or shortly AMD. It looks something like the loading of modules with AMD:

What takes place here is that the function defined takes each of the module's dependencies as its first argument. These dependances are loaded (not blocking) in the background, and the callback function it has been provided when it is loaded is specified. Next, in the case of myModule and MyOtherModule the callback function takes, in argument, the dependencies that were loaded to allow the application to use these dependencies. The dependencies also have to be specified with the given keyword. Example: MyModule may look like this

Again, unlike CommonJS, AMD uses the first browser method to complete the job along with asynchronous behaviour. (Note that it's not very beneficial to load files dynamically when you start running code, and we're going to explore that when you start creating a modules in the next section). In addition to asynchronicity, your modules can be objects, functions, constructors, strings, JSON and many more, while CommonJS supports objects as modules only.

WHY USE MODULES? The use of modules for a broad, interdependent codebase has several advantages. 1) Maintenance: a module is self-contained by definition. A well built module is designed to reduce as much as possible dependences on the codebase parts so that it can evolve autonomously and develop. A single module can be updated much more easily if the module is separated from other code parts. 2) Namespacing: variables outside the scope of a top-level feature are global in JavaScript (this means that anyone can get to them). This is why "namespace pollution" is popular, in which totally unrelated code shares global variables. The distribution of global variables among unrelated code is a major development non-no. As we will see later on, moducles allow us to avoid pollution in namespace by providing our variables with a private space.

HOW DO YOU INCORPORATE MODULES? - MODULE PATTERN The Module pattern is used to emulate class definition (because JavaScript does not natively support classes) in order to be able to store public and private methods and variables within a single object — like modules in other programming languages such as Java or Python. It helps us to create an API for the public that we want to open to the world while also maintaining a

closed set of private variables and methods.

JAVASCRIPT| PROMISES Asynchronous operations in JavaScript are done with promises. Multiple asynchronous operations can be easily dealt with where calls can generate unmanageable code. Callback is a hell callback. Events and callback functions were used before the promises, but there were limited functions and code creation. Events were not good when asynchronous operations were handled. Promises are suitable for the easiest way to manage asynchronous operations. You can easily handle multiple asynchronous activities and manage errors better than calls and events.

BENEFITS OF PROMISE - Enhances readability of code - Better management of asynchronous operations - Best flow of asynchronous logic control description - Effective Handling of Error A promise is a symbol for a value unknown when the commitment is made. It enables you to combine handlers with the eventual success value or failure reason for an asynchronous action. This allows asynchronous methods to return values like synchronous methods: the asynchronous method returns an undertaking to deliver the value in future rather than returning the final value immediately.

A PROMISE HAS THREE STATES Fulfilled: Promise action successful Rejected:concerning the promise failed denied Pending:Promise is still pending and has not yet been fulfilled or refused If a promise is not pending (it was accepted or rejected), a promise is fulfilled. Often people are resolute and resolute: they don't have to hesitate.

A promise can not be redeployed once it is fulfilled. Again, no effect will be given to a call to resolve) (or reject). An important feature is the immutability of a fulfilled promise. The promises of native JavaScript do not show promise states. You should view the pledge instead as a black box. Only the task to build the promise can understand the contract status or have access to overcome or reject.

PROMISE CAN BE CREATED USING PROMISE CONSTRUCTOR - Promise constructor takes only a single request, a function callback. - Two points, resolution and deny function Callback. - Conduct operations in the callback function and call resolve if all goes well. - If you do not perform well, call reject.

OUTPUT: Success you are a Geek

1. Then( )

Then( ) is used if a promise is either accepted or refused, it is invoked. PARAMETRES • If promise is fulfilled and tests are obtained, the first task will be performed. • If promise is ignored and an error occurs, the second task is carried out .It is optional and it's better to use the .catch() method to find errors EXAMPLE : PROMISE RESOLVED

OUTPUT: Geeks for Geeks EXAMPLE: PROMISE REJECTED

OUTPUT: Promise Rejected

2. CATCH( )

When a promise is either refused or an error occurred during execution, catch( ) is invoked. EXAMPLE : PROMISE REJECTED

OUTPUT: PROMISE REJECTED

EXAMPLE: PROMISE REJECTED

OUTPUT: SOME ERROR HAS OCCURRED

3. FINALLY( ) Often you want to execute the same code if you are fulfilling or refusing the

promise. For example:

For both then() and catch() methods, the call to createApp() is duplicated, as you can see. You use finally( )methods like this in order to delete this duplication and execute createApp() if the promise is fulfilled or rejected:

APPLICATIONS: 1. Promises are used for asynchronous handling of Errors 2. Promises are handled with asynchronous http requests.

SUMMARY 1. An object which returns a value in the future is a promise. 2. A promise begins in the state to be fulfilled or denied in the State to be fulfilled. 3. Using then() method to schedule a callback for fulfillment of the pledge, and catch() method to schedule a callback for rejection. 4. In the finally() process, place the code you want to execute whether the promise is fulfilled or rejected.

CONCLUSION Promised words have become an integral component of many JavaScript idioms, including the WHATWG Fetch standard, which is used to synchronize most of modern ajax requests, and the Async Functions standard. At the time of this writing, Async functions are Stage 3, but I predict that these will soon become a plausible approach for asynchronous JavaScript programming, which means that in the coming years JavaScript developers will need to learn to appreciate their promises. For example, I suggest that when you use Redux, you check redux-saga: a library used to manage side-effects in Redux that depends on async functions across the whole documentation.

ASYNC-AWAIT We all recognize that Javascript is a Synchronous, which means it has an event loop to queue an operation that will not be completed until sometime after the code has ended the operation. But in our software there are many functionalities that make our code asynchronous. One is the interface Async / Await. Async / Await extends the guarantees that we provide in the language as support. Please refer to Javascript promises for more information. In addition to JavaScript Promise, Async / await statement is syntactic sugar. They allow us to write promise-based code, but without the main thread, as if it were synchronous.

ASYNC: It simply helps us to write promises of a synchronous code and makes sure we do not interrupt the running thread. It operates by means of the event loop asynchronously. Async functions return a value forever. You make a commitment and javascript immediately bundles it into a contract that is solved with its value if it is not returned. Async functions allow us not to block the implementation thread, but to write promise codes as synchronous. It operates asynchronously through an eventloop. The Async function will always return a value. Using Async simply means that the promise will be returned, and if the promise is not returned, JavaScript automatically wraps the promise with its value.

OUTPUT: Hello World

AWAIT: Await function has been used to wait for a promise. Only in the async block can it be used. It causes the code to wait for a result of the promise. It's just waiting for the async block. The Await operator is used to wait for a promise. It can only be used inside the Async block. The keyword Await causes JavaScript to wait until the promise returns the result. It should be noted that this only causes the asynchronous function block to wait and not the entire program to run.

OUTPUT: Hello World Note that the console prints 2 in front of "Hello World." This is due to the use of the keyword waiting for you.

SUPPORTED BROWSERS: The Async / Await Function supported browsers are listed below: Google's Chrome Firefox Firewall Apple's Safari Opera

CONCLUSION And here you can – async / await provides a good, easier to read and maintain async code. Even with browser support becoming more limited than other asynchronous code mechanisms at the time of writing, it is very well worth learning and contemplating for use, now and in the coming years.

REQUEST A resource request is defined by the Fetch API Request interface. Using the Request( )constructor to generate a new Request object; however, as a result of another API operation such as a FetchEvent.request service worker it is likely to have a Request object returning. The absence of navigation or reload of a page includes the capability of

requesting and processing server data asynchronously. That is Ajax (or AJAX if you'd like to yell). This acronym is the word that Ajax was the buzzword everybody used to describe the kind of web apps we now take it for granted — apps like Twitter , Facebook, Google Maps and Gmail, and more, as you interact with the page constantly without requiring a full page reload! This is a sign for Asynchronous JavaScript and XML.

SEND A REQUEST TO SERVER We use open( )and send( )methods for the XMLHttpRequest object to send a request to a server: Open(method, url, async) Into the application form • Method: the application type: GET or POST • URL: position of the server (file) • Async: true(asychronous) or false (synchronous) • Send() request (used for GET) to the server • Send(string) Sends the to the server program (POST-used)

GET OR POST? In most cases the GET is easier and quicker than POST. Use POST requests, however, when: No cached file (update a file or server database) is open. Send a lot of data to the server (POST does not have any size restrictions). POST is more robust and reliable than GET when sending user inputs (which may contain unknown characters).

GET REQUESTS:

If you want to use the GET method to send information, add it to the URL:

POST REQUESTS

Add an HTTP header using setRequestHeader( ) to the POST data as an HTML type. In send( )method, enter the data you want to send:

Adds HTTP headers to request in setRequestHeader(header, value). Header: Enter the name of the header Value: sets the value of the header

ASYNCHRONOUS- TRUE OR FALSE?

Asynchronously, server requests should be submitted. The open( )method's async parameter should be set to true: xhttp.open("GET," "ajax test.asp," true); By sending the JavaScript asynchronously, the server answer must not wait, but can: • Run other scripts waiting for the response of the server • Deal the answer after the answer is ready

THE ONREADYSTATECHANGE PROPERTY You can set a function to be implemented when the request gets an answer using the XMLHttpRequest object. The function is specified in the XMLHttpRequest object's onreadystatechange property:

SYNCHRONOUS REQUEST Change the third parameter in the open() method to false in order to perform a synchronous request: xhhtp.open(Get, "ajax info.txt", false);

Async = false is often used for quick checking. In older JavaScript code, you will also find synchronous requests. Since the code is required to complete the application, an onstatechangfunction is not necessary

The XMLHttpRequest (async = false) synchronous is not suggested, because

JavaScript will stop running once the server 's answer is ready. The program is hanging or stopped while the server is busy or slower. Synchronous XMLHttpRequest is being deleted from the web standard, but it can take many years. The use of synchronous applications is enabled by modern development tools and will, if it does occur, offer an InvalidAccessError exception.

GLOSSARY JavaScript is one of the most flexible and effective languages in the world for scripting. Using JavaScript, it is a must-have skill set for all modern web developers to add an incredible feature to your web-site. A comprehension and application of JavaScript in the web sites that you build will allow users to create new functionalities that can't be accomplished with basic HTML and CSS. This software generates interactive web pages that all major browsers can recognize. This program is designed to learn this JavaScript glossary which describes the main terms you need to know during your dive. - Function: Functions are the most critical actions in JavaScript. This applies to any code block designed to direct the program to carry out a particular function. This feature is performed whether it is named or initiated by another feature. The function can start when a user clicks on a button or a new visitor comes to the site. - Statement: In a nutshell, any instructions you are set to make on your website are a statement. Statements may include a broad range of results, but they all create a sequence that forces your website to act. Statements can include artifacts, characteristics and many other functions of design and may include them. - Object : Objects are JavaScript 's core functionality. Simply put, objects are a collection of variables , functions and models. As many features and variables can be mixed together, artifacts significantly boost the website's capacity for more.

- Property: Objects and properties in JavaScript go hand in hand. The object inputs are known as the properties of the object. They shape a puzzle and help the object say what to do and - what to do. You can understand how all of it works together if you know that properties are part of the object. - Method: A special function is called a method in JavaScript. This applies to any form belonging to an entity with greater dimensions. These methods operate directly on the properties of the object they belong to and minimize the number of statements or functions for each individual outcome you want to design. - Asynchronous: In conventional coding, if there are two synchronous lines of text, this means that the processing of the first line is incomplete before the second line is finished. In JavaScript, asynchronous coding is actually possible, meaning you can continue into the second line of code and make the first line phase in the background. In the future, L1 will run and L2 is now in service. Usually, it is single thread, which means that only one set of features is available, but it gives you more flexibility for tasks and the experience of your user. - Callback: a JavaScript callback function is a function that can not start until another function is completed. The next step in the series is a callback function. - Block: In JavaScript, a block is defined by this type of brace as a set of statements that is grouped together. This helps you to use more than one sentence at a time, usually just one. - Declarative: You ask what you should do and let the specifics work out what you tell the computer. React is considered declarative, since you argue for abstractions instead of directly editing the DOM. Every programming language of a high level is more declarative than a low programming language such as Assembler. More declarative than C is JavaScript. The reporting is HTML. - Function Scoping: Any variable specified in a function is visible with Function Scoping and is accessible from within the function.

- Immutability: When its value can not change after development, a variable is immutable. You may change a mutable variable. - Scope: In which part of the program a variable is visible, is the scope referred to as a variable. Let and const have the scope of the block, determining the differential range from the var values which have the function scope. - Scoping: Scoping is how the number of variables and functions are calculated in the programming language. For examples, we can have scoping blocks, scoping functions, lexical scoping.

CONCLUSION Welcome to the finishing line! Hopefully, the JavaScript is good to you. We 're a long way from a script that takes user details and updates the whole page from "Hello, World." This was an awful lot of JavaScript over several pages, so don't sweat of snippet of code to your panel, if you didn't grab some single description or punch it into your panel. Above all, the target has never been total mastery of JavaScript. As promised, only the surface of all that JavaScript can do was barely scratched. Just like every other web standard JavaScript is continually developing — we can't learn all of this, so we do not have to. You need to hop and write programs if you really want to learn programming. The reading of books and code for reflection may be enjoyable and insightful, but it is about problems and about developing technology that can really develop your knowledge , expertise and resilience. JavaScript is a important feature of language. Often they are very useful for hiding variables from other code, so that we do not use variable names somewhere else. Due to the frequent reliance of jQuery on method argument functions, they may also be generated inadvertently as well. Learning them helps us to write codes more efficiently so concisely and we can prevent the memoryrelated falls by taking a little care by using the incorporated safeguards. JavaScript is highly versatile and flexible, and you have so many

different routes that you can move forward with this completed class. You can switch on to front end frames like Vue and React after pure JavaScript.