JavaScript Introduction PDF

Prepared By Prof. Vilas C. Rathod 1 Client Side Scripting (CET1005B)  Chapter No. 1 2 Basic of JavaScript Programming, Array, Function & String. Prepared By...

Prepared By Prof. Vilas C. Rathod 1 Client Side Scripting (CET1005B)  Chapter No. 1 2 Basic of JavaScript Programming, Array, Function & String. Prepared By Prof. Vilas C. Rathod  Client Side Scripting 3  Why use client-side programming? 4 PHP already allows us to create dynamic web pages. Why also use client-side scripting?  client-side scripting (JavaScript) benefits:  usability: can modify a page without having to post back to the server (faster UI)  efficiency: can make small, quick changes to page without waiting for server  event-driven: can respond to user actions like clicks and key presses  Why use client-side programming? 5  server-side programming (PHP) benefits:  security:has access to server's private data; client can't see source code  compatibility: not subject to browser compatibility issues  power: can write files, open connections to servers, connect to databases,...  History of JavaScript? 6  Invented by Brendan Eich: JavaScript was created by Brendan Eich while he was working at Netscape Communications Corporation.  It was initially developed in just 10 days in May 1995.  JavaScript was originally called Mocha, but quickly became known as LiveScript and, later, JavaScript.  Netscape Navigator: JavaScript was first integrated into Netscape Navigator 2.0 in September 1995, making it the first widely available scripting language for the web.  What is JavaScript? 7  a lightweight programming language ("scripting language")  used to make web pages interactive  insert dynamic text into HTML (ex: user name)  react to events (ex: page load user click)  get information about a user's computer (ex: browser type)  perform calculations on user's computer (ex: form validation)  What is JavaScript? 8  a web standard (but not supported identically by all browsers)  NOT related to Java other than by name and some syntactic similarities JavaScript is commonly used for client-side development, meaning it runs in the user's web browser. This allows for real-time interaction and dynamic updates without needing to reload the page.  What is JavaScript? 9  JavaScript is a high-level, interpreted programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.  It is a versatile and powerful language primarily used to create interactive and dynamic content on web pages.  Feature of JavaScript? 10  Feature of JavaScript? 11 1. JavaScript (JS) is a high-level, interpreted, cross-platform, and open-source programming language. 2. JavaScript (js) is a lightweight object-based scripting programming language that is mainly used in web programming. 3. It supports both client-side and server-side scripting. 4. It is responsible for making web pages interactive and responsive. 5. JS is not a compiled language, but it is an interpreted language. The JavaScript interpreter embedded inside the web browser software (such as Microsoft Internet Explorer, Google Chrome, Firefox, Opera, etc) translates the JavaScript code in the order they are written. 6. All popular web browsers such as Chrome, Firefox, Opera, etc. support JavaScript as they provide built-in execution environments. 7. JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured programming language. 8. It is a case-sensitive language. 9. JavaScript is supportable in several operating systems including, Windows, macOS, etc. 10. JavaScript programs do not depend on any specific hardware platform or operating system. It run inside HTML document. 11. Since JS is open-source, therefore, everyone can use JS without purchasing a license. 12. Since JS is a client-side scripting language, JS code can be directly embedded into HTML pages.  Javascript vs Java 12  interpreted, not compiled  more relaxed syntax and rules  fewer and "looser" data types  variables don't need to be declared  errors often silent (few exceptions)  key construct is the function rather than the class  "first-class" functions are used in many situations  contained within a web page and integrates with its HTML/CSS content CS380  JavaScript Can Change HTML Content 13 One of many JavaScript HTML methods is getElementById(). The example below "finds" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript":  JavaScript Can Change HTML Content 14 JavaScript Where To 15 The Tag In HTML, JavaScript code is inserted between and tags. CS380  JavaScript Output 16 CS380  JavaScript Output 17 using innerHTML. CS380  JavaScript Output 18 using document.write(). CS380  JavaScript Output 19 using window.alert(). CS380  JavaScript Output 20 using console.log(). CS380  JavaScript Variables 21 When to Use var, let, or const? 1. Always declare variables 2. Always use const if the value should not be changed 3. Always use const if the type should not be changed (Arrays and Objects) 4. Only use let if you can't use const 5. Only use var if you MUST support old browsers.  JavaScript Variables 22 Block Scope Global Scope Before ES6 (2015), JavaScript did not Variables declared with the var always have Block Scope. have Global Scope. JavaScript had Global Variables declared with the var keyword can Scope and Function Scope. NOT have block scope:  JavaScript Operators and Expressions 23 Types of JavaScript Operators Arithmetic Operators Assignment Operators Comparison Operators String Operators Logical Operators Bitwise Operators Ternary Operators Type Operators  JavaScript Operators- Arithmetic Operators 24 1.Arithmetic Operators: These operators are used to perform mathematical calculations. Addition (+): let sum = 10 + 5; // sum will be 15 Subtraction (-): let difference = 10 - 5; // difference will be 5 Multiplication (*): let product = 10 * 5; // product will be 50 Division (/): let quotient = 10 / 5; // quotient will be 2 Modulus (%): let remainder = 10 % 3; // remainder will be 1  JavaScript Operators- Arithmetic Operators 25  JavaScript Operators- Assignment Operators 26  JavaScript Operators- Comparison Operators 27  JavaScript-Expressions 28 Any unit of code that can be evaluated to a value is an expression. Since expressions produce values, they can appear anywhere in a program where JavaScript expects a value such as the arguments of a function invocation. There are 6 types of expressions in we will discuss about them in brief. 1. Primary Expressions 2. Object and Array initializers 3. Function definition expression 4. Property access expression 5. Invocation expressions 6. Object Creation Expressions  JavaScript-Expressions 29 1. Primary Expressions Primary expressions are the simplest expressions. There are three groups of primary expressions: literal values, variable references, and some keywords. Reserved keywords - Eg- true, false, null, this  JavaScript-Expressions 2. Object and Array initializers 30 Object initializer expression Array initializer expression Object initializer creates object with Array initializer creates array with literal notation and the value of this literal notation and the value of this expression is newly created object. expression is newly created array. It uses curly brackets surrounding It consists of square brackets object properties separated by surrounding elements separated by commas. commas. For example: For example: var obj = { var arr = [1, 2, 3]; prop1: "value1", prop2: 2 };  JavaScript-Expressions 31 3. Function definition expression Function expression defines a JavaScript function and the value of this expression is newly defined function. For example: var sum = function (x, y) { return x + y; } var z = sum (3, 4); //7  JavaScript-Expressions 32 4. Property access expression A property access expression evaluates to the value of an object property or an array element. JavaScript defines two syntaxes for property access: o expression.identifier — Dot notation expression o expression [ expression ] — Name of the property or the index of the property of the object or array For Example: var obj = {x: 1, y: 2}; obj.x // 1 obj['y’] // 2 var arr = [2, 3]; arr // 3  JavaScript-Expressions 33 5. Invocation expressions 6. Object Creation Expressions An invocation expression is Object creation expression JavaScript’s syntax for calling (or creates a new instance of object. executing) a function or method. It uses the keyword new For example — a.sort() followed by a constructor invocation. For Example 1 var obj = new Object();  JavaScript -Control & Looping Statement 34 JavaScript if-statement Example-1 It is a conditional statement used to decide let score = 45; whether a certain statement or block of statements will be executed or not i.e. if a certain // check if score is fifty or greater condition is true then a block of statements is executed otherwise not. if (score >= 50) { console.log("You passed the examination."); } else { console.log("You failed the examination."); } // Output: You failed the examination.  JavaScript -Control & Looping Statement 35 JavaScript if-statement Example-2  JavaScript -Control & Looping Statement 36 JavaScript if-else statement The if statement alone tells us that if a condition is true it will execute a block of statements and if the condition is false it won’t.  JavaScript -Control & Looping Statement 37 JavaScript if-else-if ladder statement Example: Use the else if statement to specify a new condition if the first condition is false.  JavaScript -Switch case statement 38 JavaScript switch The switch statement is used to perform different actions based on different conditions. Use the switch statement to select one of case 4: many code blocks to be executed. let day; day = "Thursday"; switch (new Date().getDay()) { break; case 0: case 5: day = "Sunday"; day = "Friday"; break; break; case 1: case 6: day = "Monday"; day = "Saturday"; break; } case 2: document.getElementById("demo").in day = "Tuesday"; nerHTML = "Today is " + day; break; case 3: day = "Wednesday"; break;  JavaScript -Loop statement 39  JavaScript -Loop statement 40  JavaScript -Loop statement 41  Example:- 1 JavaScript -Loop statement 42 The For In Loop The JavaScript for in statement loops through the properties of an Object: const person = {fname:"John", lname:"Doe", age:25}; let txt = ""; for (let x in person) { txt += person[x] + " "; } document.getElementById("demo").innerHTML = txt; Output JavaScript -Break statement 43 Example:- 1 Breaking the loop Normally, a loop exits when its condition becomes falsy. But we can force the exit at any time using the special break directive. Output JavaScript -continue statement 44 It doesn’t stop the whole loop. Instead, Output it stops the current iteration and forces the loop to start a new one (if the condition allows). Example:- 1 JavaScript -Declaring an Array 45 Example:- 1 An array is a special variable, which can hold more than one value: Example:- const cars = ["Saab", "Volvo", "BMW"]; JavaScript -Array 46 Example:- 2 Output: JavaScript - Accessing Array Elements 47 Example:- 2 You access an array element by referring to the index number: Output: JavaScript - Adding an Array elements 48 The easiest way to add a new element to an array is using the push() method: JavaScript - Adding an Array elements 49 Example:- function myFunction() { fruits.push("Lemon"); document.getElementById("demo").innerHTML = fruits; The push() Method } The push method appends a new element to an array. Try it Output: const fruits = ["Banana", "Orange", "Apple"]; document.getElementById("demo").innerHTML = fruits; JavaScript - Changing an Array Element 50 This statement changes the value of the first element in cars:  JavaScript Functions- definition & syntax 51 A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it). Syntax  JavaScript Functions- Example1 52  JavaScript Functions- Example2 53 Example of function in JavaScript that does not has arguments.  JavaScript Functions- definition & syntax 54 // Function to convert Fahrenheit to Celsius // Define the parameters for the conversion table function fahrenheitToCelsius(F) const startTemperature = 20; { const endTemperature = 120; return (F - 32) / 1.8; const incrementValue = 5; } // Generate the conversion table generateConversionTable(startTemperature, endTemperature, incrementValue); // Generate the conversion table function generateConversionTable(start, end, increment) { console.log("Fahrenheit Celsius"); for (let F = start; F