Repository files navigation

JavaScript is ascripting language of the web that allows you to do/add Interactivity with User-Events, implement Conditions and Validations, Dynamic updates in a Web Page, etc.. In this practical course will learn JavaScript basics-programming fundamentals from scratch. We Will start with what is JavaScript? its uses, history, how to write JavaScript, etc. It will also cover various programming building blocks like variable, functions, array, conditionals, objects, and many more.

Add topics to categorize your repository and make it more discoverable:

• javascript-programming-language
• javascript-language-fundamentals
• javascript-basic-programming
• javascript-tutorial
• javascript-library
• learning-javascript
• javascript-programs
• variables-var-let-const
• conditions
• loops
• arrays
• objects
• events
• dom-document-object-model
• webdevelopment
• front-end-development
• webprogramming
• plain-javascript
• vanilla-javascript
• javascript-typescript-es6

To move forward with JavaScript you just need basic knowledge of XHTML/HTML. Here, you will learn how easy it is to add interactivity to a web page using JavaScript. But, before we begin, make sure that you have some working knowledge and/or general understanding of:

• The Internet and the World Wide Web (WWW)Web Design Development Foundations-Web Technology Fundamentals
• Good working knowledge of HyperText Markup Language (HTML)HTML5 Essentials and
• Its good to knowCSS3 Fundamentals

1. Course Introduction
   • 01.01.Welcome
   • 01.02.Who is this for? Audience
2. Introducing JavaScript
   • 02.01.Importance
   • 02.02.What is JavaScript?
   • 02.03.What is a scripting language?
   • 02.04.What can you do with JavaScript? |Use of JavaScript?
   • 02.05.Where does the JavaScript code run?
   • 02.06.Who are using JavaScript?
   • 02.07.History of JavaScript
   • 02.08.JavaScript Vs ECMAScript
   • 02.09.Types of Script |Various Scripting languages |Client-Side Scripting Vs Server Side Scripting
   • 02.10.Prerequisites of using HTML and JavaScript
3. JavaScript Getting Started
   • 03.01.How to write Javascript? |JavaScript in HTML
   • 03.02.Where to write JavaScript in HTML? |Where to embed include write put JavaScript in HTML?
   • 03.03.JavaScript Code structure
   • 03.04.JavaScript Keywords
   • 03.05.Comments
4. JavaScript Language Fundamentals
   • 04.01.Generating Output
5. Variables
   • 05.01.What is Variable?
   • 05.02.Declaring variable without a value |Creating a variable without a value
   • 05.03.Declaring multiple variables at once
   • 05.04.Variable Naming Conventions |Variable Naming Conventions (Identifiers)
   • 05.05.Variable Scope
   • 05.06.The let and const keywords ES6
6. Data types
   • 06.01.Data types
   • 06.02.Primitive data type |Primitive, Primary or Value data type
   • 06.03.Non-primitive data type |Non-primitive, Reference or Composite data type
   • 06.04.JavaScript has Dynamic Types
   • 06.05.The typeof Operator
   • 06.06.Type conversion |typeof parseInt parseFloat
   • 06.07.Type coercion
7. Operators
   • 07.01.What is the Operator?
   • 07.02.Arithmetic Operators
   • 07.03.Assignment Operators
   • 07.04.Logical Operators
   • 07.05.Comparison Operators |Relational Operators
   • 07.06.Conditional Operator |Ternary Operator
   • 07.07.String Operators
   • 07.08.Operator precedence
8. Functions
   • 08.01.What is a Function?
   • 08.02.Types of Function
   • 08.03.Different ways to define Function
   • 08.04.String Methods and Concatenation
   • 08.05.Template String |Template Literals
9. Loops |Loops and Iterations
   • 09.01.The for loop
   • 09.02.The while loop
   • 09.03.The do while loop
   • 09.04.The for in loop
   • 09.05.The for of loop
   • 09.06.Break and Continue statement
   • 09.07.for each loop
10. Conditions - Control Flow
    • 10.01.The if statement |The if statement and comparison operators
    • 10.02.The if else statement
    • 10.03.The if else if else statement
    • 10.04.The switch case statement
11. Array
    • 11.01.What is an Array?
    • 11.02.Create Array by array literal
    • 11.03.Create Array by creating an instance of array directly
    • 11.04.Create Array by using an array constructor
    • 11.05.Getting the Length of an Array
    • 11.06.Accessing Looping through an Array Elements |Loop through an Array Elements
    • 11.07.Adding Editing an Array Elements
    • 11.08.Removing Deleting an Array Elements
    • 11.09.Array properties and methods
12. Objects
    • 12.01.Real Life Objects |Object Properties and Method examples
    • 12.02.What is an Object?
    • 12.03.Object literal
    • 12.04.Creating an instance of Object directly
    • 12.05.Object constructor
    • 12.06.Accessing objects properties |Looping through Objects properties
    • 12.07.Removing Deleting objects properties
    • 12.08.Manipulating by Value Vs Reference
    • 12.09.The Window object
    • 12.10.The Math Object
    • 12.11.Date and Time
13. Events
    • 13.01.Understanding Events and Event Handlers
    • 13.02.Different Event category
    • 13.03.Different ways to write the event handler
14. DOM (Document Object Model)
    • 14.01.What is DOM? |What is the Document Object Model?
    • 14.02.Node
    • 14.03.JavaScript DOM Selectors
    • 14.04.JavaScript DOM CSS Styling
    • 14.05.JavaScript DOM HTML get set attributes
15. What's Next Step?

Hi All, I'mDinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional, I wanna welcome you to JavaScript for Beginners. In this course, I will take you through with the ins and outs of learning JavaScript. This course will help you to learn the fundamentals of programming with JavaScript scripting language, from the basics to advanced topics step-by-step.

This course is for any Web Designer, Developer who is interested in dynamic Web Design and Development / Web Programming with JavaScript. Anyone who wants to make a career in Web Development or planning on being a front-end developer must learn JavaScript.

1. HTML (HyperText Markup Language) - Markup language, Essential Page Structure/Content, Readable and convey structure to a user, Text Layout Model, page Mark-up, Text, Tags, Data, details for pages, Images, Tables, Anchor Links, Forms

   • HTML is an acronym stands forHyperText Markup Language which is used for creatingweb pages and web applications
   • HTML is not a programming language; it is a markup language that defines the structure of your content ie. document

2. CSS (Cascading Style Sheet) - Style Sheet language, Page Design / Presentation / Layouts / Styling / Formattings, look and feel, Creative part of Web Pages

   • CSS is a stylesheet language that allows you to control the appearance (look and feel) of your webpages

3. JavaScript (JS) - Scripting language, Dynamic Page Behaviour, Logics, Conditions and Validations, Events (mouse click, hover), Interactivity with User, Dynamic updates in a Web Page

   • JavaScript is ascripting language of the web that allows you to do Interactivity with User-Events, implement Conditions and Validations, Dynamic updates in a Web Page, etc.

Syntax & Example:02.01.js.intro.html

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>02.01.js.intro.html</title><!-- internal style --><style>/* css selector: { property:value; } */body {font-family: arial;      }</style><!-- internal JavaScript - head section --><script>// Write all JavaScript code herealert('welcome to JavaScript');</script></head><body>    Content<!-- internal JavaScript - body section --><script>/* Write all JavaScript code here */console.log('welcome to JavaScript');</script></body></html>

• JavaScript is1 of the 3 core language/layers of web...(HTML, CSS & JavaScript)
• JavaScript is one of the most popular, widely used, lightweight scripting programming language
• JavaScript is anOpen Source,Cross-Platform, andBrowser-based Client-Side (user computer) programming language of the web
• JavaScript is a dynamic computer programming language. It is aninterpreted (translated) programming language withobject-oriented capabilities
• JavaScript is officially maintained byECMA (European Computer Manufacturers Association) as ECMAScript
• ECMAScript 6 (orES6 or ECMAScript 2015) is the latest major version of the ECMAScript standard
• JavaScript is case sensitive language

Note:
Now-a-days with the help ofNode (Node.js) JavaScript is used forBack-end (Server-side) API development. JavaScript is not compiled language, but it is a translated language (JavaScript Translator (embedded in the browser engine) is responsible for translating the JavaScript code for the web browser.

• A high-level programming language that is interpreted by another program at runtime rather than compiled by the computer's processor as other programming languages
• A programming language designed for integrating and communicating with other programming languages
  • Popular scripting languages areJavaScript, VBScript, PHP, Perl, Python, Ruby, ASP
  • Since a scripting language is normally used in conjunction with another programming language, they are often found and used alongsideHTML, Java or C++
• The simple difference between scripting language and programming language is: Scripting languages do not require the compilation step and are rather interpreted
  • C program needs to be compiled before running whereas normally, a scripting language likeJavaScript or PHP need not be compiled
• Scripting is interpreted based language, whereas Java, C, C++, and others are compiler-based language

• A script is nothing but sets of instructions
• Series of commands

For a long time, JavaScript is used only as aClient Side Front End Development language to build browser-based interactive web pages. But currently due to huge community support(Node or Nide.js) JavaScript is multi-purpose language and used to develop:

• Full-fledged Enterprise Web Application
• Full-blown Mobile Apps
• Real-time Networking Apps (Chats, Audio/Video Streaming Services)
• Games
• Command Line Tools (CLI-Command Line Interface utilities)

• JavaScript gives HTML designers aprogramming tool
• JavaScript can react toevents (mouse click, hover (rollover, rollout), focus, blur)
• JavaScript can be used tovalidate data (Client-side validation)
• JavaScript can manipulateHTML content andCSS styles
• Dynamicdrop-down menus, HTML contents at run time/on the fly
• Displaying live/current/dynamicdate and time (clocks)
• Displayingpop-up windows anddialog boxes (analert,confirm andprompt dialog box)
• Change the website'sbehavior and make it moredynamic with advanced web designs
• Perform andcontrol transitions andanimations

• Browser Detection - Detecting the browser used by a visitor
• Cookies - Storing information on the visitor's computer
• Control Browsers - Opening pages in customized windows
• Validate Forms - Validating inputs to fields before submitting a form

JavaScript was originally designed and developed to run only in browsers. But now with the help of theNode/Node.js (C++ program, that includes Google's V8 JavaScript engine) we can build the back-end(server-side) for our web and mobile applications.

• JavaScript is used by:

  • Front-end Developer
  • Back-end Developer
  • Full-stack Developer

• Big companies and brands build entire applications:

  • Netflix
  • Walmart
  • PayPal
  • Microsoft
  • Facebook (React.js)
  • Google (Angular.js)
  • Ebay
  • Uber
  • Groupon

• Invented by“Brandan Eich” atNetscape in1995 originally named as"LiveScript"
• Netscape &Sun Java agreements to rename"LiveScript" to"JavaScript" (Asjava is already popular in the market)
• Not at-all related toJAVA (completely different in concept and design)
• Microsoft has developed new version of "JavaScript" as"JScript" forIE-3 in1996
• JavaScript Submitted toECMAScript in 1997

1. Text Editor/HTML Editor/Code Editor/Visual Code Editor -NotePad, NotePad++, SublimeText, Atom, Brackets, Coda, Visual Studio Code, DreamWeaver etc.

   • Just visit registered website of any of your favorite editor, download and install it (likeVisual Studio Code =https://code.visualstudio.com)
   • A JavaScript file (.js) is a text file itself consists of JavaScript code/statements, so to create/modify a JavaScript file we can use any text editors

2. Browsers - To view output of .html pages with .js files -Google Chrome, Mozilla Firefox, Internet Explorer, Safari etc.

   • Once the .html/.htm file created and saved, we can create a .js file and link within HTML and then we can see its output in any latest web browser

3. JavaScript Output / Debugging Tool (Developer console) -

   • alert() or window.alert()
   • console.log()
   • Google Chrome / Safari –Developer Tools Inspect / Inpsect element (in browser -> Right Click on page -> chooseInspect / Inspect Element -> Console Tab
   • Mozilla FireFox –Firebug

Note:
UseF12 key on the keyboard to open thedeveloper tools then click on theConsole Tab, OR on empty area in browser pageRight Click -> Inspect (Developer Tool) -> Console Tab. Here You can write basic JavaScript statements and/or valid JavaScript code directly in browser console panel/tab and get the output

• The HTML<script>.....</script> tag is used to embed/insert/implement a JavaScript programs/code into any part of an HTML document/page
• The<script>.....</script> tag specifies that we are using JavaScript
• The<script>.....</script> element can be placed in the<head>, or<body> section of an HTML document
• Each<script>.....</script> tag blocks the page rendering process until it has fully downloaded and executed the JavaScript code
  • So the best practice is to place/add the<script>.....</script> at the bottom/end ofbody tag/section ie. just before the closing</body> tag

Note:
JavaScript is the default scripting language in HTML. The old HTML standard attributes liketype="text/javascript" andlanguage="javascript" no longer required in modern browser

Syntax & Example:03.01.js.script.tag.html

<head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>03.01.js.script.tag.html</title><!-- internal style --><style>/* css selector: { property:value; } */body {font-family: arial;      }</style><!-- internal JavaScript - head section --><script>// Write all JavaScript code herealert('welcome to JavaScript');</script></head><body>        Content<!-- internal JavaScript - body section --><script>/* Write all JavaScript code here */console.log('welcome to JavaScript');document.write('This is dyanamic content. Hello All, Lets write something on web page');</script></body>

1. Inside the HEAD section
2. Inside the BODY section
3. External JavaScript .js file (separation of concern)

• JavaScript programs/code/statements can be placed in the<head> section of an HTML page
• As each<script>.....</script> tag blocks the page rendering process until it has fully downloaded and executed the JavaScript code so placing them in thehead section (<head> element of the document without any valid reason will significantly impact your website performance

Syntax & Example:03.02.01.js.head.html

<head><!-- internal JavaScript - head section --><script>// Write all JavaScript code herealert('welcome to JavaScript written in head section');</script></head>

• JavaScript programs/code/statements can be placed in the<body> section of an HTML page
• As blocking nature of<script>.....</script> tag ideally, scripts should be placed at the end of thebody section, just before theclosing </body> tag, it will make your web pages load faster since it prevents obstruction of initial page rendering

Syntax & Example:03.02.02.js.body.html

<body>    page content<!-- internal JavaScript - body section --><script>// Write all JavaScript code herealert('welcome to JavaScript written in body section');console.log('welcome to JavaScript written in body section');document.write('<h2>welcome to JavaScript written in body section</h2>');</script></body>

• We can easily write JavaScript code in between thescript element. In a real-world application, we have 100+ maybe even 1000+ lines of code, we don't want to write all that code inline here
• We must have toextract and separate our JavaScript behavior code from our HTML markup code
• A simple thumb-rule is if we have a lot of JavaScript code, we can put it into a separate file
• We can use/add/attach an external JavaScript file by using<script> tag withsrc (source) attribute:
  • <script src="path/scriptfile.js"></script>
  • One can provide afull URL (absolute path) orrelative path from the current page
• We can create a single external JavaScript file and embed it in many/any HTML page which providecode re-usability

• It separates HTML and JavaScript code (separation of concern)
• Code re-usability
• It makes HTML and JavaScript file/code easier to read, maintain and more meaningful/semantic
• Web page loads faster /increase the speed of the webpage (Cached JavaScript files)

Note:
Usually, when an external JavaScript file is downloaded for the first time, it is stored in the browser's cache (like images and style sheets), so it won't need to be get downloaded multiple times from the web server that makes the web pages load faster/quickly.

Syntax & Example -.html file:03.02.03.js.external.html

<body>    page content<!-- include external JavaScript - body section --><scriptsrc="./03.script.js"></script></body>

Syntax & Example -.js file:03.02.03.script.js

// external js file// Write all JavaScript code herealert('welcome to JavaScript written in external file');console.log('welcome to JavaScript written in external file');document.write('<h2>welcome to JavaScript written in external file</h2>');

The syntax of JavaScript is theset of rules that define a correctly structured JavaScript program. Let's study some of the building blocks of JavaScript code:

• One line of JavaScript Code is one JavaScript Statement / Instruction / Command
• Statements are a command to Browser to do something / perform actions
• A Statement is a piece of code that expresses an action to take place
• JavaScript code/program (or just JavaScript) is a sequence of statements
• Statements are written in-between<script>.....</script> tag
• Statements are separated bySemicolon; so we may write many statements in a line (optional)
• JavaScript ignores extra line breaks and white spaces
• JavaScript is case sensitive language (VB, Pascal, HTML are case insensitive)
• JavaScript is interpreted not compiled (write and handed over to the web browser)
• All statement in JavaScript should be terminated by aSemicolon;

Note:
JavaScript statements are composed of:Values, Operators, Expressions, Keywords, and Comments

• JavaScript ignoresspaces, tabs, and newlines that appear in JavaScript programs
• We can freely use spaces, tabs, and newlines to format and indent programs in a neat-clean and consistent way that makes the code easy to read and understand (not advisable)

• JavaScript statements are generally followed by asemicolon; character
• A semicolon may be omitted inmost cases when a line break exists
• JavaScript interprets the line break as animplicit semicolon, called anautomatic semicolon insertion
• In most cases, a newline implies a semicolon, But “in most cases” does not mean “always”!

Note:
It is a good programming practice to use semicolons; after every statement

• JavaScript is a case-sensitive language
• in Javascript variables, language keywords, function names, and other identifiers must always be typed with a consistent capitalization of letters
• Example:var firstName='Dinanath'; andvar FirstName='Dinanath'; herefirstName & FirstName are different ie. two different variable

Note:
Take care/precautions while writing variable and function names in JavaScript

• JavaScript commands/statements/code can be grouped together in code blocks,inside curly brackets {...}
• Grouped statements/lines form code blocks
• The purpose of code blocks is to define statements to be executed together like a single JavaScript command
• An often occurrence of a code block in JavaScript is a JavaScriptfunction

Syntax & Example:03.03.05.script.js

// external js file// Write all JavaScript code here// define function - block of code to show welcome messagefunctionsayHello(){alert('Hello All! Welcome to JavaScript!!');}// define function - block of code to show total of two numbersfunctionshowTotal(){varnum1=10;varnum2=20;vartotal=num1+num2;alert('Total is : '+total);}// invoke / run  / call a functionsayHello();showTotal();

Usually, JavaScript commands/statements start with aspecific keyword which defines whataction/function should the browser will perform/do:

JavaScript has several reserved keywords. These are the words that you cannot use as identifiers (variable names, function names, and loop labels) in your JavaScript programs. The following list shows the keywords that are reserved inECMAScript 6. It also includes keywords that arereserved for future as well as keywords that aredisallowed in strict mode.

• arguments, await, break, case, catch, class, const, continue, debugger, default, delete, do, else, enum, eval, export, extends, false, finally, for, function, if, implements, import, in, instanceof, interface, let, new, null, package, private, protected, public, return, static, super, switch, this, throw, true, try, typeof, var, void, while, with, yield,

• The comments are a meaningful way todeliver the message (description to code) for others/for future reference and to understand/follow the code statements/lines
• Comments are special lines written for other developers as a reference purpose and browser ignores while interpreting
• It is used to add information about the code, warnings or suggestions so that end-user can easily interpret the code (Why and How of code/program/logic)
• Comments are used to explain code/programs/statements and to make it more readable for developers
• A comment is ignored by the JavaScript engine embedded in the browser
• Comments can also be used to prevent the execution of certain logic when testing code
• Comments can be put into any place of a script, they don’t affect its program execution because the engine simply ignores them
• Comments help tomake code easy to understand andit avoids the unnecessary code

There are two types of comments in #"auto">

• Single-line JavaScript comments are used for one line of comment only
• Single-line comments starts withtwo forward slash:// is single comment
• Any statements between// till the end of the line will be ignored by JavaScript (not be executed)
• Single-line comments do not need closure/closing

Syntax & Example:03.05.script.js

// external js file// Write all JavaScript code here// show alert boxalert('Welcome to JavaScript!');varfirstName='Dinanath';// variable to store firstNamevarlastName='Jayaswal';// variable to store lastName

• Multi-line comments usually comment out a block of code
• Multi-line comments in JavaScript can comment on bigger parts (a few lines) of code
• Multi-line comments are more convenient as it can be used to comment single as well as multi-line comments
• Multiline comments start withforward slash and an asterisk, /* and also end with an asterisk and a forward slash */: /* multi-line comment */
• Multi-line comments need closing
• Multi-line comments are more often used forformal documentation

Syntax & Example:03.05.script.js

/* show alert box */alert('Welcome to JavaScript!');/* This is a multiline comment.A code block can be commented on. *//* var firstName = 'Dinanath'; // variable to store firstNamevar lastName = 'Jayaswal'; // variable to store lastName */

• JavaScript does not have anydisplay or built-in print functions
• Many times we may need to generate output from your JavaScript code likesee the value of a variable, orwrite a message to browser console to help youdebug an issue in your running JavaScript code, and so on
• That is why you have to use the JavaScript output function to generating output(browser window or browser console dialog boxes, writing output into an HTML element, etc.)
• Using different output methods knowledge will help you while debugging or rewriting your code more conveniently

1. Writing into an alert box withalert() or window.alert()
2. Writing into browser console withconsole.log()
3. Writing into the HTML / Browser Window withdocument.write()
4. Write into an element of HTML / Inserting Output Inside an HTML Element withinnerHTML

• One can usealert dialog boxes to display the message or output data to the user
• An alert dialog box is created using thealert() or window.alert() method
• A small pop-up box appears with a closing button to close alert-box
• This method is great for short and rapid informative messages which can be instantly closed

Syntax & Example:04.01.01.script.js

// external js file// Write all JavaScript code herealert('I am Dinanath Jayaswal');window.alert('We are learning JavaScript');

• Programmers can easily output a message or write data to the browser console using theconsole.log() method
• console.log() function is mainly/widely used fordebugging code as it makes the JavaScript output print to console
• This is a simple, easy but very powerful method for generating detailed output

Syntax & Example:04.01.02.script.js

// external js file// Write all JavaScript code hereconsole.log('I am Dinanath Jayaswal');console.log('We are learning JavaScript');

Note:
UseF12 key on the keyboard to open thedeveloper tools then click on theconsole tab. You can write basic JavaScript statements directly in the browser console panel/tab and get the output.

• document.write() method is used to write the content to the current document while document is being parsed
• Programmers do ues document.write() fortesting purposes

Syntax & Example:04.01.03.script.js

// external js file// Write all JavaScript code heredocument.write('I am Dinanath Jayaswal');document.write('We are learning JavaScript');

• We can write or insert output inside an HTML element using the element'sinnerHTML property
• First we need to select the element using a method such asdocument.getElementById(id)

Note:
HTML element manipulating is fully dependent on JavaScript DOM manipulation concepts

Syntax & Example:04.01.04.script.js

/// external js file// Write all JavaScript code here// Writing text string inside an elementdocument.getElementById('mainHeadingText').innerHTML='Heading Text change dynamically on run-time';varparaText=document.getElementById('mainParaText');paraText.innerHTML='<strong>This Paragraphic text inserted dynamically through innerHTML method.</strong>';

With JavaScript, we can do many cool and dynamic pieces of stuff (Image Gallery, Games, Forms) but for that one should be familiar with core essentials/building blocks of JavaScript programming language like Variables, Functions, Operators, Loops, Conditional Statements, Array, Objects, Events, DOM (Document Object Model), etc. which will cover in coming lessons.

Variables are one of the most fundamental concepts in JavaScript and other all programming languages of the world.

• A variable iscontainer to store/hold the data/information
• Developers/Programmers use Variable tostore/hold the data/information temporarily in computer memory
• A variable is a kind of data holder where we can store some value for programming or calculation purpose
• A JavaScript variable is simply aname of the storage location (named containers/named storage) for data
• Variables are symbolic names for values
• Variables are used to store data of different types like a string of text, numbers, boolean values like true/false, an array of data, etc.
• The data or value stored in the variables can be set, updated, and retrieved whenever needed
• Variables are declared using the keywordvar keyword
• Theassignment operator (=) is used to assign value to a variable, like this:var varName = value; orvar firstName = 'JavaScript';
• By default value of variable defined in JavaScript isundefined (variable is defined but value not assigned:var firstName; orlet lastName; console.log(firstName, lastName); // undefined)

• Example: Variables are likebox or an envelope which we use toorganize various kinds of stuff and put alabel on each box or an envelope
• Example: Variable declaration and assignment is justlike Maths & Algebra:x = 10; and in JavaScript we writevar x = 10;

Note:
In ES6'let' and'const' keywords are used to defined variables

Note:
As a best practice of ES6, from now onwards variables must be define withlet keyword:let techName = 'JavaScript' ;

Syntax & Example:05.01.script.js

// variables defined to hold different types of datavartechName='JavaScript';// String literalvarversion=6;// Number literalvarisDone=true;// Boolean literalconsole.log('Learning '+techName+version);

Variables can also be declared without having any initial values assigned to them. This is useful for variables that are supposed to hold values like user inputs, calculations, status updates, etc.

Syntax & Example:05.01.script.js

// Declaring VariablesvartechName;varversion;varisDone;// Assigning valuetechName='JavaScript';version=6;isDone=true;console.log('Learning '+techName+version);// ------------------------------// Declaring VariablevaruserName;// Assigning valueuserName='Dinanath';console.log('Welcome '+userName);

We can alsodeclare multiple variables and set their initial values in a single statement, each variable isseparated by comma.

Syntax & Example:05.01.script.js

// Declaring multiple variablesvartechName='JavaScript',version=6,isDone=true;// Declaring multiple variables in multiple lines for readabilityvartechName='JavaScript',version=6,isDone=true;console.log('Learning '+techName+version);// ------------------------------// Declaring multiple variablesvarfirstName='Dinanath',lastName='Jayaswal',age=35,isMarried='true';// Declaring multiple variables in multiple lines for readability/* var firstName = 'Dinanath',lastName = 'Jayaswal',age = 35,isMarried = 'true'; */console.log('I am '+firstName+' '+lastName);

All JavaScript variables must beidentified/referred/defined/named withunique names, called asidentifiers. The naming rules in JavaScript are not much different from any other programming language.

• There are some rules while declaring/naming a JavaScript variable (also known asidentifiers)
  • Identifiers aresimply names in JavaScript
  • Identifiers are used to name variables, keywords, functions, and labels
  • Identifiers can beshort names/nick names (like name, age, num1, isDone, sum) or more descriptive names (firstName, totalDashboards, isSeniorCitizen)

The basic rules for defining/assigning names for variables (unique identifiers) are:

• A variable name muststart with a letter, underscore (_), or dollar sign ($)
  • Example: var firstName, var _firstName, var $firstName;
• Names can contain letters, digits, underscores, and dollar signs
  • Example: var $num_total1;
• A variable namecannot start with a number or special characters
  • Example: var 1num_total, var .num_total
• A variable namecannot contain spaces
  • Example: var num total;
• A variable Names arecase sensitive
  • Example: var firstName='Dinanath'; and var FirstName='Dinanath'; herefirstName & FirstName are different ie. two different variable
• A variable name cannot be aJavaScript keyword or a JavaScript reserved word
  • Example: var var; var switch; var for; var true;
• One should Always givemeaningful/descriptive names to variables
• for naming the variables that contain multiple words,camelCase method is commonly used (camelCase is the default method for identifier naming)

Note:
In the programming world, there have been two most popular methods/mechanism of writing multiple words identifiers: (Underscore, Camel Case)

1. Underscore: first_name, last_name, date_of_birth, is_passed, native_place
2. Camel Case:: firstName, lastName, dateOfBirth, isPassed, nativePlace OR
   : FirstName, LastName, DateOfBirth, IsPassed, NativePlace

Syntax & Example:05.04.script.js

// variables defined to hold different types of datavar_firstName='JavaScript';var$version=6;var$num_total1=10;window.alert('variables details: '+_firstName+' '+$version+' '+$num_total1);// wrong identifiers// var #name;

The scope of a variable is the region/coverage of your program in which it is defined and exist/available. JavaScript variables have two scopes:

1. Local Variables
2. Global Variables

• A JavaScript local variable is declaredinside block or function
• It is accessible within thefunction or blocks only
• A local variable will bevisible only within a function where it is defined
• Function parameters are always local to that function

Note:
In the function body, alocal variable takes precedence over a global variable with the same name.

Syntax & Example:05.05.01.script.js

// global variablevarglobalName='Global';window.alert(globalName);functionshowName(){// local variablevarlocalName='Local';window.alert(localName);window.alert(globalName);// recall global variable}// invoke/call/run functionshowName();// error - as local variable not exist/available outside of block { }window.alert(localName);

• A variabledeclared outside the function/at the root or declaredwith window object is known as a global variable
• A JavaScript global variable is accessible from any function
• A global variable has a global scope which means it can be defined and accessible anywhere in JavaScript code/program

Syntax & Example:05.05.02.script.js

// global variablevarglobalName='Global';window.alert(globalName);functionshowName(){// local variablevarglobalName='Local';window.alert(globalName);// define global variable with windowwindow.globalVersion=29;window.alert('global variable from inside function: '+window.globalVersion);}// invoke/call/run functionshowName();// access global variable defined inside functionwindow.alert('global variable from outside function: '+window.globalVersion);

ES6 introduces two new keywordslet andconst for declaring variables. Thevar, let and const keywords are almost the same, just a few differences with the scope.

• In older programs var is used a lot which declares a variable(function-scoped variables), but in a slightly differentold way, with scope issues
• Bothlet andconst keywords declare variables,scoped at block-level ({})
• Block scoping means that a new scope is createdbetween a pair of curly brackets {}

ES6 introduces the newlet keyword for declaring variables. Prior to ES6, the only way to declare a variable in JavaScript was the var keyword. Let's see what's the difference:

• Variables declared with thevar keyword arefunction-scoped and can behoisted at the top within its scope
• Variables declared withlet keyword areblock-scoped ({}) and they are not hoisted

Syntax & Example:05.06.01.script.js

// traditional var syntaxvartechName1='JavaScript';for(vari=1;i<=5;i++){console.log('i : '+i);// 1,2,3,4,5console.log('inside block:'+techName1);varversion1=100;}console.log('outside: '+i);console.log('outside: '+version1);// ------------------------------// ES6 syntaxlettechName2='LiveScript';for(letn=1;n<=5;n++){console.log('n : '+n);// 1,2,3,4,5console.log('inside block:'+techName2);letversion2=100;}console.log(n);// undefinedconsole.log('outside: '+version2);// undefined

ES6 introduces the newconst keyword for declaring variables.

• Useconst to declare a constant(read-only / unchanging) variable
• Constants areread-only, youcannot reassign new values to them
• In Programm/logic when the variable will never change, they can be declared asconst
• constants are named using capital letters and underscoreExample: const NATIVE_CITY
• const are alsoblock-scoped likelet
• However, you can changeobject properties orarray elements

Syntax & Example:05.06.02.script.js

// traditional var syntaxvarPI1=3.14;console.log(PI1);// 3.14PI1=100;console.log(PI1);// 100// ------------------------------// ES6 syntaxconstPI2=6.28;console.log('ES6 syntax const: '+PI2);// 6.28PI2=100;// error

A variable in JavaScript can containany type of data. Data types specify whatkind of data can be stored and manipulated within the variable in a program. In JavaScript, different data types are available to hold different types of values/data. There aretwo main categories/types of data types in #"auto">

Primitive data types canhold only one value at a time. Primitives arecompared by value. Two values are strictly equal if they have the same value.

There are different types of primitive data types in JavaScript. They are as follows:

• The string data type is used torepresent textual data (i.e. sequences of characters)
• Strings hold information inwords/text
• A string in JavaScript must be surrounded by"double" or'single' quotes
• Example:06.02.script.js

varfirstName="Java";varlastName='Script';

• The number data type simply defined without quotes is used to represent positive or negative numbers with or without a decimal place
• Many mathematical operations can be done on numbers, e.g.multiplication *, division /, addition +, subtraction, and so on
• Example:

varage=25;varid=1;

• The Boolean data type can hold only two values:true or false
• true = ON / yes / correct / 1, false = OFF / no, incorrect / 0
• Boolean data types is often used inconditional testing of code
• Example:

varisDone=true;varisMarried=false;

• The meaning of undefined is“value is not assigned”
• The undefined data type can only have one value-the special value undefined
• A Variable has been declared, butnot assigned a value
• A variablewithout a value, The type is also undefined
• Example:

varfirstName;varcountry;

• A null value means that there is no value
• The special value which represents“ nothing”, “empty” or “value unknown”
• It is not equivalent to an empty string ('' or ' ', "", " "), it is simply nothing
• Example:

varfirstName=null;varid=null;

• Non-primitive/Reference data types can holdcollections of values and more complex entities
• Non-primitive values are being compared byreference instead of value
• Data does not store in the variables but stored on the heap - a dynamically allocated memory reference
• Its a pointer to a location in memory, accessed by reference

There are different types of non-primitive data types in JavaScript. They are as follows:

We have two types of programming languages:

1. Static languages
   • Declare a variable, the type of the variable is set and it cannot be changed in the future
2. Dynamic languages
   • Variable can change at run time (one variable can store different types of value as per requirement, we again assign any value any time as per logic, requirements)

• A JavaScriptvariable can contain/hold any data ie. any type of data, A variable at one moment can be a number and at another moment be a string, boolean
• It simply means thatsame variable can be used to hold different data types
• JavaScript is a dynamic type language, means you don't need to specify a type of the variable because it is dynamically used by JavaScript engine

Syntax & Example:06.04.script.js

letname='JavaScript';name=false;name=100;alert(name);alert(typeof(name));

• The typeof operator returns thetype of the argument
• It’s useful to process values of different types differently or want to perform a quick data type check
• The typeof operator can be used to find out whattype of data a variable or operand contains
• It can be used with or without parentheses(typeof(x) ortypeof x

Syntax & Example:06.05.script.js

// use typeof to find data type of variables// Stringsalert(typeof"Hello");// "string"alert(typeof'12');// "string"// Numbersconsole.log(typeof(100));// "number"console.log(typeof(100.29));// "number"// Booleansalert(typeoftrue);// "boolean"alert(typeof(1==2));// "boolean"// Undefinedconsole.log(typeofundefined);// "undefined"varinit;console.log('type of init: '+typeofinit);// "undefined"// Nullconsole.log(typeofnull);// "object"varinitObject=null;console.log('type of initObject: '+typeofinitObject);// "object"// Objectsalert(typeof{name:'Dinanath',age:35});// "object"alert(typeofdocument);// "object"alert(typeofwindow);// "object"// ArraysvartechArray=[];console.log('type of techArray: '+typeoftechArray);// "object"console.log(typeof['JavaScript','jQuery','Angular']);// "object"console.log(typeof['Dinanath',35,'India']);// "object"// Functionsconsole.log(typeoffunction(){});// "function"console.log(typeofalert);// "function"console.log(typeofwindow.alert);// "function"// Symbolalert(typeofSymbol("dob"));// "symbol"

• Type conversion is nothing but taking a variable and changing its data type as per needs requirements and logic
• In JavaScript as and when we take aninput in the form, its data type is a string by default, so do any calculations we need toparse tointeger/int or the number
• Data type conversion can be either implicit (automatic) or explicit (forcefully/manually)

Syntax & Example:

// Number to String conversionletnum1=100;console.log(num1);console.log(typeofnum1);console.log(num1.length);//error as number type variables does not have lengthnum1=String(num1);console.log(num1);console.log(typeofnum1);console.log(num1.length);// Boolean to String conversionletboolValue1=String(false);console.log(boolValue1);console.log(typeofboolValue1);// Date to String conversionletcurDate=String(newDate());console.log(curDate);console.log(typeofcurDate);// Array to String conversionletnumArray=String([1,2,3,4,5]);console.log(numArray);console.log(typeofnumArray);// toString() methodletcurString=(1000).toStringletcurString=(true).toString//  String to Number conversionletnum2='100';console.log(num2);console.log(typeofnum2);console.log(num2.toFixed(2));//helps to fix decimals - error as string type variables does not have any properties or methods related to numbernum2=Number(num2);console.log(num2);console.log(typeofnum2);console.log(num2.toFixed(2));// Boolean to Number conversionletboolValue2=Number(false);// parseInt() methodletcurNumber=parseInt('100');letcurNumber=parseFloat('100.41');

• Type coercion simply refer to the JavaScript ability to convert type automatically (developer does not do it but JavaScript does it for us)
• Type coercion is the process of converting a value from one type to another (such as string to a number, object to boolean, and so on)
• JavaScript engine converts the type as per its rules (implicit ie. automatic conversion of data type)

Syntax & Example:

constnum1='20';constnum1=10;constsum=(num1)+(num2);console.log(sum);console.log(typeofsum);

• We know/use many operators since our initial school days, they are things like addition +, multiplication *, subtraction -, open-close round bracket ( ) or square bracket [ ]
• Operators are symbols/keywords that tell the JavaScript engine toperform some sort of actions
• JavaScript operators are symbols that are used to perform operations on operands
• Operators used along with our variables and constants to createexpressions to implement logic and algorithms

Note:
Let us take a simple expressionvar sum = 1 + 2;

• Here 1 and 2 are calledoperands and
• = &+ are called theoperator
• = is the assignment operator,+ is the arithmetic operator

Syntax & Example:07.01.script.js

// Lets take a look on simple expressionvarsum=1+2;// Here 1 and 2 are called `operands` and// `=` & `+` are called the `operator`// `= is the assignment` operator, `+ is the arithmetic` operator

JavaScript supports the following types of operators:

1. Arithmetic Operators
2. Assignment Operators
3. Logical Operators
4. Comparison (or Relational) Operators
5. Conditional (or ternary) Operators
6. String Operators
7. Bitwise Operators

• Arithmetic operators are used to performing arithmetic operations (just like mathematics - calculations) on numbers/the operands

JavaScript supports the following Arithmetic operators (List of Arithmetic operators):

Syntax & Example:07.02.script.js

// Arithmetic operatorsvarnum1=10;varnum2=4;alert('Addition '+(num1+num2));// 14alert('Subtraction '+(num1-num2));// 6alert('Multiplication '+num1*num2);// 40alert('Division '+num1/num2);// 2.5alert('Modulus reminder '+num1%num2);// 2num1++alert('after Increment '+num1);// 11num2--;alert('after Decrement '+num2);// 3num1=10;num2=4;alert('Exponentiation '+(num1**num2));// (10 ** 4) = 10* 10 * 10 * 10 = 10000

• The Assignment operators are used to assign particular values to variables

JavaScript supports the following Assignment operators (List of Assignment operators):

Syntax & Example:07.03.script.js

// Assignment operatorsvarnum1=10;varnum2=20// old methodology// num1 = num1 + num2;// console.log(num1); // 30// new techniquesnum1+=num2;console.log(num1);// 30// num2 -= num1;// console.log(num2); // 10// num1 *= num2;// console.log(num1); // 200// num2 /= num1;// console.log(num2); // 2

• The Logical operators are used to make decisions based on multiple conditions
• The logical operators are typically used to combine multiple conditional statements and evaluate

JavaScript supports the following Logical operators (List of Logical operators):

Syntax & Example:07.04.01.script.js

// Logical operators - basic examples// && (Logical AND) - returns true if both operands are trueconsole.log('true && true: ',true&&true);console.log('true && false: ',true&&false);console.log('false && true: ',false&&true);// ------------------------------// || (Logical OR) - returns true if one of the operand is trueconsole.log('true || true: ',true||true);console.log('true || false: ',true||false);console.log('false || true: ',false||true);// ------------------------------// ! (Logical NOT) True if operand is not true (means I will be true if other is false)varisSeniorCitizen=true;varisYoungGeneration=!isSeniorCitizen;console.log('isYoungGeneration: ',isYoungGeneration);

Syntax & Example:07.04.02.script.js

// Logical operators - real world scenario/example// check credit/loan eligibility - (if applicant have HIGH INCOME & GOOD CREDIT SCORE, he is eligible for credit/loan)varisEarningHighIncome=true;varisGoodCibilScore=false;varisEligibleForLoan;// check eligibility with && Logical AND operatorisEligibleForLoan=isEarningHighIncome&&isGoodCibilScore;alert('isEligibleForLoan: '+isEligibleForLoan);// check eligibility with || Logical OR operatorisEligibleForLoan=isEarningHighIncome||isGoodCibilScore;alert('isEligibleForLoan: '+isEligibleForLoan);// ! Logical NOTvarisLoanRefused=!isEligibleForLoan;alert('isLoanRefused: '+isLoanRefused);

• The JavaScript comparison operator compares the two operands
• It compares two values in a Boolean fashion
• The comparison operators are used to determine the similarity and difference between different variables

JavaScript supports the following Comparison (or Relational) operators (List of Comparison (or Relational) operators):

Syntax & Example:07.05.script.js

// Comparison (or Relational) operatorsvarnum1=25;varnum2=35;varnum3="25";alert(num1==num3);// truealert(num1===num3);// falsealert(num1!=num2);// truealert(num1!==num3);// truealert(num1<num2);// truealert(num1>num2);// falsealert(num1<=num2);// truealert(num1>=num2);// false

• Conditional Operator returns a value based on the condition, it is like if-else
• The conditional (ternary) operator is the only JavaScript operator that takes three operands
• The conditional operator that assigns a value to a variable based on some condition
• This operator is frequently used as a shortcut/short-hand method for the if statement
• Syntax: variablename = (condition) ? TRUE value: FALSE value

Syntax & Example:07.06.script.js

// Conditional (? or ternary) Operator// age categoryvarcurrentAge=100;varcategory;category=(currentAge<18) ?'Minor' :'Major';alert('AGE category: '+category);// fees categoryvarisAuthorisedMember=true;varfees;fees=(isAuthorisedMember==true) ?5 :10;alert('fees / charges: '+fees);

Variables can also have string values,+ operator can be used to concatenate strings as well as numbers.

There are two operators which can also be used be for strings:

Syntax & Example:07.07.script.js

// String Operatorsvarmessage1="Hello";varmessage2=" World!";alert(message1+message2);// Outputs: Hello World!message1+=message2;alert(message1);// Outputs: Hello World!

• If an expression has more than one operator, theexecution order is defined by their precedence, or the implicit priority order of operators
• Operator precedence determines/describes the way in which operators are parsed with respect to each other /order in which operations are performed
• The operations inside theparentheses () are computed first
• If many operations have the same precedence (like addition and subtraction), they arecomputed from left to right

Syntax & Example:07.08.script.js

// Operator precedencevarresult1=10+2*5alert('10 + 2 * 5 =  '+result1);// answer is 20 NOT 60 (12 * 5 ), actually * or multiplication have higher precedence so the actual calculation is like 10 + ( 2*5 ) = 10 + 10 = 20// change precedence with `parentheses ()`varresult2=(10+2)*5;alert('(10 + 2) * 5 =  '+result2);// (12) * 5 = 60// same precedence operatorsvarresult3=10+5-2alert('10 + 5 - 2 =  '+result3);// 13 first addition than subtractionvarresult4=10+(5-2);alert('10 + (5 - 2) =  '+result4);// 13 first subtraction ie. ( ) than addition

• A function is basically agroup of statements that perform specific tasks/operations
• Functions provide a way tocreate reusable code packages which are more portable and easier to debug
• Functions allow a programmer todivide a big program into a number of/several small and manageable functions
• It helps programmers in writingmodular codes
• The function is a kind of reusable tool where we can write code/functionality to reuse whenever we want (Function allow the code to be called many times without repetition)
• Wrapping up / making smaller chunks of statements / reusable codes together for readability or separation of concern/proper organization is functions – (Grouping of a repetitive task)
• Functions (logical block of code) are one of the most important control structure in any programming language
• In other languages, it might be calledMODULES, SUBROUTINES(SUB-ROUTINES)
• There are two steps to utilize function:
  1. create/define a function withfunction keyword
  2. call/invoke a function

Note:
Best Practice - First Define function than call/envoke it!

• Code reusability - call a function several times
• Less coding - makes our program compact, no need to write lines of code each time
• Easier to maintain - changes are done only at one location
• Easier to eliminate the errors - fixing errors becomes much easier

• The function declaration starts by using thefunction keyword,
• followed by aunique function name,
• a list ofparameters in parentheses i.e. () (that might be empty),
• and a statement block surrounded bycurly braces { }

Syntax & Example:08.01.script.js

//1. define / declare / create functionfunctionshowMessage(){//Body of function//code to be executedconsole.log('welcome to JavaScript function');alert('welcome to JavaScript function');}

• Defined function can be invoked/called/run from anywhere in the document, by typingfunction name followed by a set of parentheses, like functionName()

Syntax & Example:08.01.script.js

//2. invoke / call the functionshowMessage();

Functiondenotes an action/task. The function name should bebrief, as accurate as possible and describe what the function does, like averb.

Usually, Function name starts with:

• "getSomething" – returns value,
• "createSomething" – create something,
• "calcSomething" – calculate something,
• "checkSomething" – check something and return a boolean, etc.

Examples of function names:

• getSum();
• createFields();
• calcAge();
• checkUserType();

• Regular Function
• Parameterized Function
• Return Type Function (Function returning values)

• Simple/Normal function which we use daily to perform some action/task

Syntax & Example:08.02.01.script.js

varname='Dinanath';//1. define / declare / create functionfunctionsayHello(){//Body of function//code to be executedconsole.log('Hello '+name);alert('Hello '+name);}//2. invoke / call the functionsayHello();

• One can pass data to functions using parameters (function arguments)
• You can specify parameters when you define your function to accept input values at run time

Syntax & Example:08.02.02.01.script.js

// Parameterized function//1. define / declare / create functionfunctionsayHello(name){//Body of function//code to be executedconsole.log('Hello '+name);alert('Hello '+name);}//2. invoke / call the functionsayHello('Dinanath');sayHello('Dino');// ------------------------------vartotal;functioncalculateSum(num1,num2){total=num1+num2;console.log(total);}calculateSum(10,20);calculateSum(100,200);

With ES6, now you can specify default values to the function parameters. This means that if no arguments are provided to the function when it is called these default parameters values will be used.

Syntax & Example:08.02.02.02.script.js

// Parameterized function with default parameters//1. define / declare / create functionfunctionsayHello(name='User'){//Body of function//code to be executedconsole.log('Hello '+name);alert('Hello '+name);}//2. invoke / call the functionsayHello();sayHello('Amber');// ------------------------------vartotal;functioncalculateSum(num1=1,num2=2){total=num1+num2;console.log(total);}calculateSum();calculateSum(100,200);

• A function canreturn a value back to the script that called thefunction, as a result, using the return statement
• We can call a function that returns a value and use it in our program
• The return statement usually placed as the last line of the function

Syntax & Example:08.02.03.script.js

// Return type function//1. define / declare / create functionfunctiongetSum(num1,num2){//Body of function//code to be executedvarsum=num1+num2;return(sum);}//2. invoke / call the functionconsole.log(getSum(10,20));console.log(getSum(100,200));vartotal=getSum(50,50);alert(total);

The syntax that we've used before to create functions is calledfunction declaration. There is another syntax for creating a function that is called afunction expression andImmediately invoked function expression (IIFE)

• Variables contain the expressions of a function
  • Anonymous function expression
  • Named function expression

Syntax & Example:08.03.02.01.script.js

// function declaration (Regular / normal function)functiongetSum1(num1,num2){vartotal=num1+num2;returntotal;}// ------------------------------// function expression - AnonymusvargetSum2=function(num1,num2){vartotal=num1+num2;returntotal;};alert(getSum2(10,20));// ------------------------------// assign function to another variablevarsum1=getSum2;alert(sum1(100,200));

Syntax & Example:

// function expression - namedvargetSum2=functiongetTotal(num1,num2){vartotal=num1+num2;returntotal;};alert(getSum2(10,20));// ------------------------------// assign function to another variablevarsum1=getSum2;alert(sum1(5,10));

• It runs as soon as the browser finds it
• Declare and run the function at the same time

Syntax & Example:08.03.03.script.js

// Immediately invoked function expression (IIFE)(function(){console.log('Welcome to Immediately invoked function expression (IIFE)');}());(function(userName){console.log('Welcome',userName);})('Dinanath');

Syntax & Example:

constfirstName='Dinanath';constlastName='Jayaswal'constfullName=(firstName)+(lastName);console.log(fullName);console.log(typeoffullName);// concatenationconsole.log(firstName+' '+lastName);console.log('Hello '+firstName+' '+lastName+'Welcome to JavaScript!');// appendletname1='Dinanath ';letname1+='Jayaswal';console.log(name1);// concat() methodconsole.log(firstName.concat(' ',lastName));// lengthconsole.log(firstName.length);// change caseconsole.log(firstName.toLowercase());console.log(firstName.toUppercase());// escaping// let statement1 = 'wait I'm coming, that's good';letstatement1="wait I'm coming, that's good";letstatement2='wait I\'m coming, that\'s good';// string array - get specific character from string like an arrayconsole.log(firstName[0]);// indexOfconsole.log(firstName.indexOf('i'));console.log(firstName.lastIndexOf('a'));// charAt()console.log(firstName.charAt(2));// get last character from stringconsole.log(firstName.charAt(firstName.length-1));// replace();letreplaceString=('Dinanath','DJ');console.log('My name is:',replaceString);// substring();console.log(firstName.substring(0,4));// slice();console.log(firstName.slice(0,4));// slice(); negative number starts from backsideconsole.log(firstName.slice(-2));// includes();letmessage2='Hello Dinanath, welcome to JavaScript';console.log(message2.includes('Hello'));console.log(message2.includes('Hi'));// split()letmessage2='Hello Dinanath, welcome, to JavaScript';console.log(message2.split(','));console.log(message2.split(' '));letcourses='html5, css3, javascript, angular';console.log(courses.split(','));

• ES6 new featureStrings Template offers a convenient way to work with string concatenation/interpolation

• Template literals provide an easy and clean way to create multi-line strings and perform string interpolation

• Intuitive expression interpolation for single-line and multi-line strings

• Useback-tick (grave accent) character and{ var name in curly brace }, no + plus sign required

• The best part of Template Literals (Template Strings) is we canuse 'single' "double" quotes inside

• It is part of ES6 but compatible with all the modern browsers and its latest versions

Syntax & Example:

//old plain javascript approachletuser='Dinanath';letgreetMessage1='Welcome'+' '+user+' '+'to JavaScript.';console.log(greetMessage1);console.log('// ------------------------------');constfirstName='Dinanath';constlastName='Jayaswal'constcourse='JavaScript'constfullName=`Hey${firstName}${lastName} Welcome to${course}.`console.log('// ------------------------------');//ES6 Template Literals (Template Strings) approachletgreetMessage2=`Hello${firstName}, How are you?`;console.log(greetMessage2);console.log('// ------------------------------');// ------------------------------//ES6 multi-line stringletgreetMessage3=`ES6 Template Literals (Template Strings):                    With Template Literals (Template Strings)                    we can add multiple lines in string concatenation/interpolation`;console.log(greetMessage3);letgreetMessage4=ES6TemplateLiterals(TemplateStrings):WithTemplateLiterals(TemplateStrings)wecanaddmultiplelinesinstringconcatenation/interpolation;console.log(greetMessage4);

• Loops are used to execute thesame block of code again, with a different value, until a certain condition is met
• Loops can execute/repeat a block of code (an action) a number of/several times
• The basic idea behind a loop is toautomate the repetitive tasks within a program to save time and effort
• It makes thecode compact
• It is mostly used in array or object (to iterate through series)
• Loops/iterations is an instruction repeat until a specific condition is reached

1. for loop
2. while loop
3. do...while loop
4. for...in loop
5. for...of loop (ES6)
6. for...each

• TheFor loop is used to run a piece of code aset amount of times
• Loops through a block of code until thecounter reach a specified number
• The for looprepeats a block of code until a certain condition is met
• The for loop is the most simple/compact form of looping
• For loop consists of 3 statements (), mostlyi = index is used for loop initialization

Syntax & Example:09.01.01.script.js

// for loop/* for (statement 1; statement 2; statement 3) {  // Code to be executed} *//* for(variable definition/index/initialization; condition checking; increment/decrement expression) {  // Code to be executed} */for(leti=1;i<=5;i++){alert('Hello, The current index/num is: '+i);document.write('<li>Hello, The current index/num is: '+i+'</li>');console.log('Hello, The current index/num is: '+i);}

Syntax & Example:09.01.02.script.js

// for loop - reverse orderfor(leti=5;i>=1;i--){alert('Hello, The current index/num is: '+i);document.write('<li>Hello, The current index/num is: '+i+'</li>');console.log('Hello, The current index/num is: '+i);}

Syntax & Example:09.01.03.script.js

// for loop - to find out odd even numberfor(leti=1;i<=10;i++){if(i%2==0){console.log('The current index/num is EVEN : '+i);}/* else {    console.log('The current index/num is ODD : ' + i);  } */}

• Loops through a block of code until the specified condition evaluates to true
• In For loop, a variable is part of a loop, but in While loop, we need to declare variable externally

Syntax & Example:09.02.01.script.js

// while loop/*while(condition) {  // Code to be executed}*/leti=1;while(i<=5){alert('Hello, The current index/num is: '+i);document.write('<li>Hello, The current index/num is: '+i+'</li>');console.log('Hello, The current index/num is: '+i);i++;}

• The do...while loop is similar to the while loop except that thecondition check happens at the end of the loop
• The do...while loop will always beexecuted at least once (before checking if the condition is true), even if the condition is false

Syntax & Example:09.03.01.script.js

// do...while loop/*do {    // Code to be executed}while(condition);*/leti=1;do{alert('Hello, The current index/num is: '+i);document.write('<li>Hello, The current index/num is: '+i+'</li>');console.log('Hello, The current index/num is: '+i);i++;}while(i<=5);

• The for-in loop is a special type of a loop thatiterates over the properties of an object or the elements of an array

Syntax & Example:09.04.01.script.js

// for...in loop/*for(variable/key in array/object) {    // Code to be executed}*/// An array with some elementsletarrColors=["Red","Green","Blue","Cyan","Magenta","Yellow","Black"];// Loop through all the elements in the arrayfor(letcolorinarrColors){alert('Color is: '+arrColors[color]);document.write('<li>Color is: '+arrColors[color]+'</li>');console.log('Color is: '+arrColors[color]);}

Syntax & Example:09.04.02.script.js

// for...in loop/*for(variable/key in array/object) {    // Code to be executed}*/// An object with some propertiesletobjEmployee={'emp_name':'Dinanath','emp_addres':'Mumbai','emp_id':'029','emp_age':35};// Loop through all the properties in the objectfor(empinobjEmployee){alert('Employee '+emp+' is: '+objEmployee[emp]);document.write('<li>Employee '+emp+' is: '+objEmployee[emp]+'</li>');console.log('Employee '+emp+' is: '+objEmployee[emp]);}

Syntax & Example:09.04.03.script.js

// for...in loop/*for(variable/key in array/object) {    // Code to be executed}*/// Loop through all the properties in the inbuilt object - window, document, navigatorfor(propsinwindow){// alert('document object properties ' + props);document.write('<li>document object properties '+props+'</li>');console.log('document object properties '+props);}

• Loops overiterable objects such as arrays, strings, etc.
• ES6 introduces a new for-of loop which allows us to iterate over arrays or strings very easily
• The code inside the loop is executed for each element of the iterable object

Syntax & Example:09.05.01.script.js

// for...of loop/*for(element in array/string) {  // Code to be executed} */// Iterating over an arrayletarrDays=["Monday","TuesDay","Wednesday","Thursday","Friday","Saturday","Sunday"];for(letdayofarrDays){console.log(day);document.write('<li>'+day+'</li>');}// Iterating over stringletname='JavaScript';for(letletterofname){document.write(letter+',');console.log(letter+',');}

• break andcontinue keywords/statement can changehow the loop behaves
• break andcontinue keywords can be used in all loops to stop or continue the loop
• Thebreak statement is used to exit a loop early, to "jump out" of a loop, stops executing/running a loop
• Thecontinue statement tells the interpreter to immediately start the next iteration of the loop and skip the remaining code block

Syntax & Example:09.06.01.script.js

// break continue statement/* break */letarrDays=["Monday","TuesDay","Wednesday","Thursday","Friday","Saturday","Sunday"];leti=1;while(i<=10){if(i==5){break;}console.log(i);i++}console.log('// ------------------------------');for(leti=0;i<=arrDays.length;i++){if(i==3){break;}console.log(arrDays[i]);}console.log('// ------------------------------');/* continue */i=1;while(i<=20){if(i%2==0){// console.log('Even Number ', i);i++;continue;// skip rest of the loop bodyi+100;// non of useconsole.log('just in even num continue');// non of use}console.log('Odd Number ',i);i++;}console.log('// ------------------------------');for(i=1;i<=10;i++){if(i===5){continue;// skip rest of the loop bodyconsole.log('just after 5 continue...');// non of use}console.log(i);}console.log('// ------------------------------');for(letint=0;int<10;int++){if(int===2){console.log('2 is favorite EVEN number');continue;}if(int===5){console.log('at 5 stop the loop');break;}console.log('current Number is:',int);}

Syntax & Example: ``

letarrDays=["Monday","TuesDay","Wednesday","Thursday","Friday","Saturday","Sunday"];arrDays.forEach(function(day)){console.log(day);}

• Conditional statements are used to perform different action based on different condition
• Conditional statements allow the developer to make correct decisions and perform right actions as per condition
• It helps to perform different actions for different decisions
• We can use conditional operator to check our condition: >, <, >=, <=, ==, !=, ===

1. If Statement
2. If...else Statement
3. If...else if...else Statement
4. Switch...Case Statement

• If the conditional statement is the simplest and basic control statement make decisions and execute statements conditionally
• The if statement is used to execute a block of codeonly if the specified condition evaluates to true
• It evaluates the content onlyif an expression is true

If conditional statements are used to evaluate some kind of condition and do something/perform some actions based on the result

Note:
Useif to specify a block of code to be executed,if a specified condition is true

Syntax & Example:10.01.01.script.js

// if conditional statement/*if(condition/expression) {  // Code to be executed if condition/expression is true}*/letuser='Dinanath';if(user=='Dinanath'){console.log('Welcome Dinanath!');window.alert('Welcome Dinanath!');}if(user=='Dinanath'){console.log('Welcome Authorised User: '+user+'!');window.alert('Welcome Authorised User: '+user+'!');}// ------------------------------letage=20;if(age>=18){console.log('MAJOR! Eligible for Voting');window.alert('MAJOR! Eligible for Voting');}// ------------------------------letcurrentHours=10;if(currentHours<12){console.log('Good Morning!');window.alert('Good Morning!');}if(currentHours>=6&&currentHours<12){console.log('Good Morning!');window.alert('Good Morning!');}

• The JavaScriptif...else statement is used to execute the codeweather condition is true or false
• The developer can enhance the decision-making capabilities by providing an alternative choice through adding anelse statement to theif statement
• The condition can be any expression that evaluates to true or false
• If the condition evaluates to true, statements_1 are executed; otherwise, statements_2 are executed

Note:
Useelse to specify a block of code to be executed,if the same condition is false

Syntax & Example:10.02.01.script.js

// if...else conditional statement/*if(condition/expression){// content to be executed if condition is true - statements_1}else{// content to be executed if condition is false - statements_2}*/letuser='Ambar';if(user=='Dinanath'){console.log('Welcome Dinanath!');window.alert('Welcome Dinanath!');}else{console.log('Welcome Guest!');window.alert('Welcome Guest!');}// ------------------------------letage=15;if(age>=18){console.log('MAJOR! Eligible for Voting');window.alert('MAJOR! Eligible for Voting');}else{console.log('MINOR! NOT Eligible for Voting');window.alert('MINOR! NOT Eligible for Voting');}// ------------------------------letcurrentHours=10;if(currentHours<12){console.log('Good Morning!');window.alert('Good Morning!');}else{console.log('Good Evening!');window.alert('Good Evening!');}

• Theif...else if...else a special statement that is used tocombine multiple if...else statements
• It is an advanced form of if...else that allows us tomake a correct decision out of several conditions

Note:
Useelse if to specify a new condition to test,if the first condition is false

Syntax & Example:10.03.01.script.js

// If...else if...else conditional statement/*if(condition/expression 1) {    // Code to be executed if condition1 is true statements_1} else if(condition/expression 2) {    // Code to be executed if the condition1 is false and condition2 is true statements_2} else {    // Code to be executed if both condition1 and condition2 are false statements_3}*/letnum1=200;letnum2=100;if(num1==num2){console.log('Both numbers are equal');}elseif(num1<num2){console.log('Number2 is greater!');}else{console.log('Number1 is greater!');}// ------------------------------letage=15;if(age>=60){console.log('SINIOR CIRIZEN!');}elseif(age<18){console.log('MINOR!');}else{console.log('MAJOR - Middle Age!');}// ------------------------------letcurrentHours=15;if(currentHours>=6&&currentHours<12){console.log('Good Morning!');window.alert('Good Morning!');}elseif(currentHours>12&&currentHours<=18){console.log('Good AfterNoon!');window.alert('Good AfterNoon!');}else{console.log('Good Evening!');window.alert('Good Evening!');}

• The switch...case statement is alternative to an if...else if...else statement, both do almost the same thing
• This matches thecase and thevalue of condition and if the case matches, the subsequent block is executed and if none of the case matchesdefault block is executed
• The JavaScript switch statement is used to execute one code from multiple blocks of expressions

Note:
Useswitch to specify manyalternative blocks of code to be executed

Syntax & Example:10.04.01.script.js

// switch...case conditional statement/* switch(variable/expression){  case value1:    // Code to be executed if variable/expression === value1    break;  case value2:    // Code to be executed if variable/expression === value2    break;  default:    // Code to be executed if variable/expression is different from all values} */letgrade='B';// A.B,C, or somethingswitch(grade){case'A':console.log('Great Job! - A Grade');break;case'B':console.log('Good! - B Grade');break;case'C':console.log('Congratulations! - Passed');break;default:console.log('Sorry! - Failed...Keep trying!');break;}// ------------------------------letsweets='';//cake, chocolates, biscuitsswitch(sweets){case'chocolates':console.log('Chubby Chocolates!');break;case'cake':console.log('Happy BirthDay Cake!');break;case'biscuits':console.log('Enjoy Biscuits!');break;default:console.log('No Sweets! Try some other sweets!');break;}// ------------------------------constcolor='red';switch(color){case'red':console.log('The Dark RED');break;case'green':console.log('Go Green');break;case'blue':console.log('Boys are Blue');break;case'yellow':console.log('Golden Yellow');break;default:console.log('Its some other Color, Enter correct color');break;}// ------------------------------letcurrentDate=newDate();letcurrentDay;switch(currentDate.getDay()){case0:currentDay='Sunday';break;case1:currentDay='Monday';break;case2:currentDay='Tuesday';break;case3:currentDay='Wednesday';break;case4:currentDay='Thursday';break;case5:currentDay='Friday';break;case6:currentDay='Saturday';break;}console.log(`Today is${currentDay}!`);

• An Array is a special type of variable/object whichconsists of / stores multiple values
• Arrays are complex variables that allow us to store more than one value or a group of values under a single variable name
• Arrays are defined withsquare brackets [ ] and withnew keyword
• Array items are normally separated withcommas,
• Arrays arezero-indexed i.e. the first element of an array is at index/position 0
• An array isordered collection, where we have a 0th, 1st, a 2nd, and so on elements
• Each value (anelement) in an array has anumeric position, known as itsindex,starts from 0, so that the first array element position/index isarr[0] not arr[1]

There are 3 main ways to construct an array:

1. By array literal
2. By creating an instance of Array directly (using the new keyword)
3. By using an Array constructor (using the new keyword)

• The simplest way to create an array in JavaScript is enclosing acomma-separated list of values in square brackets [ ]
• var myArray = [element0, element1, ..., elementN];

Syntax & Example:11.02.01.script.js

// create array with array literal ie. [] square bracket// var myArray = [element0, element1, ..., elementN];vararrColors=['Red','Green','Blue','Orange'];console.log(arrColors);// show all elements// ------------------------------vararrCities=['Delhi','Mumbai','Kolkota','Bengaluru','Chennai'];console.log(arrCities[1]);// show 1st index ie. 2nd positioned element// ------------------------------vararrTechnologies=[];arrTechnologies[0]='Java';arrTechnologies[1]='Python';arrTechnologies[2]='C';console.log(arrTechnologies);console.log('Total Elements: '+arrTechnologies.length);

• Array instance can be created using thenew keywordnew Array()
• var myArray = new Array(); OR var myArray = Array();

Syntax & Example:11.03.01.script.js

// create array with new keyword// var myArray = new Array();vararrColors=newArray();arrColors[0]='Red'arrColors[1]='Green'arrColors[2]='Blue'arrColors[3]='Orange'console.log(arrColors);// show all elements// read/get array items/elementsfor(leti=0;i<arrColors.length;i++){alert(arrColors[i]);}// ------------------------------vararrCities=Array();arrCities[0]='Delhi';arrCities[1]='Mumbai';arrCities[2]='DeKolkotalhi';arrCities[3]='Bengaluru';arrCities[4]='Chennai';console.log(arrCities);// show all elements// ------------------------------vararrTechnologies=newArray();// add new array items/elementsfor(leti=0;i<=5;i++){arrTechnologies[i]='JavaScript';}console.log(arrTechnologies);// show all elements

• Array instance can be created using thenew keywordnew Array() passing arguments in constructor so that we don't have to provide value explicitly
• var myArray = new Array(element0, element1, ..., elementN);

Syntax & Example:11.04.01.script.js

// create array with new keyword Array constructor passing parameter// var myArray = new Array(element0, element1, ..., elementN);vararrColors=newArray('Red','Green','Blue','Orange');console.log(arrColors);// show all elements// ------------------------------vararrCities=newArray('Delhi','Mumbai','Kolkota','Bengaluru','Chennai');console.log(arrCities);// show all elements// ------------------------------vararrJsFrameworks=newArray('jQuery','Angular','React','Node','Vue','Express','D3');console.log(arrJsFrameworks);// show all elements

• Thelength property returns thelength of an array,total number of elements in an array
• length property brings back anarray length - the fixed amount of items stored in the array
• The array length is always greater than the index of any of its element(Array length = last array index + 1)
• The maximum length allowed for an array is4,294,967,295
• myarray.length

Syntax & Example:11.05.01.script.js

// get/retrieve/find array length// myarray.lengthvararrColors=newArray('Red','Green','Blue','Orange');console.log(arrColors.length);// ------------------------------vararrCities=newArray('Delhi','Mumbai','Kolkota','Bengaluru','Chennai');console.log(arrCities.length);// ------------------------------vararrJsFrameworks=newArray('jQuery','Angular','React','Node','Vue','Express','D3');console.log(arrJsFrameworks.length);