Unit - 4 all script are here Javascript.pptx
- 1. JAVASCRIPT
- 2. STRUCTURE OF JAVASCRIPT • JavaScript is a scripting language most often used for client-side web development. • JavaScript into a webpage is much like inserting any other HTML content. The tags used to add JavaScript in HTML are <script> and </script>. • JavaScript can be added to your HTML file in two ways: • Internal JavaScript • External JavaScript
- 3. INTERNAL JS • Create an HTML file(.html) extension and write JavaScript code inside the ‘script’ tag • Then simply load the HTML file in the browser • create a separate JavaScript file(.js) with .js extension. Write your code in it. • Now link this js file with the HTML document using script tag like: • <script src='relative_path_to_file/file_name.js'></script> • Either in the body or in the head. EXTERNAL JS
- 4. A Simple Script • <html> • <head><title>First JavaScript Page</title></head> • <body> • <h1>First JavaScript Page</h1> • <script type="text/javascript"> • document.write("<hr>"); • document.write("Hello World Wide Web"); • document.write("<hr>"); • </script> • </body> • </html>
- 5. DATA TYPES • JavaScript has 8 Datatypes 1. String 2. Number 3. Boolean 4. Undefined 5. Null 6. Symbol 7. Object
- 6. DATA TYPES • Number: JavaScript numbers are always stored in double-precision 64-bit binary format IEEE 754. Unlike other programming languages, you don’t need int, float, etc to declare different numeric values. • String: JavaScript Strings are similar to sentences. They are made up of a list of characters, which is essentially just an “array of characters, like “Hello GeeksforGeeks” etc. • Boolean: Represent a logical entity and can have two values: true or false. • Null: This type has only one value that is null. • Undefined: A variable that has not been assigned a value is undefined. • Symbol: Symbols return unique identifiers that can be used to add unique property keys to an object that won’t collide with keys of any other code that might add to the object. • BigInt: BigInt is a built-in object in JavaScript that provides a way to represent whole numbers larger than 253-1.
- 7. • String : A string (or a text string) is a series of characters like "John Doe". Strings are written with quotes. You can use single or double quotes // Using double quotes: let carName1 = "Volvo XC60"; // Using single quotes: let carName2 = 'Volvo XC60’; • Number : All JavaScript numbers are stored as decimal numbers (floating point). Numbers can be written with, or without decimals. // With decimals: let x1 = 34.00; // Without decimals: let x2 = 34;
- 8. • Bigint : All JavaScript numbers are stored in a 64-bit floating-point format. JavaScript BigInt is a new datatype (ES2020) that can be used to store integer values that are too big to be represented by a normal JavaScript Number. let x = BigInt("123456789012345678901234567890"); • Boolean : itBooleans can only have two values: true or false let x = 5; let y = 5; let z = 6; (x == y) // Returns true (x == z) // Returns false Yourself
- 9. • Undefined : In JavaScript, a variable without a value, has the value undefined. This type is also undefined. let car; // Value is undefined, type is undefined • Null : An empty value has nothing to do with undefined. An empty string has both a legal value and a type. let car = ""; // The value is "", the typeof is "string"
- 10. VARIABLE IN JS • JavaScript Variables can be declared in 4 ways: • Automatically • Using var • Using let • Using const
- 11. Example • In this first example, x, y, and z are undeclared variables. • They are automatically declared when first used: • x = 5; y = 6; z = x + y; • Note:- • The var keyword was used in all JavaScript code from 1995 to 2015. • The let and const keywords were added to JavaScript in 2015. • The var keyword should only be used in code written for older browsers.
- 12. Example using var • From the examples you can guess: • x stores the value 5 • y stores the value 6 • z stores the value 11 • var x = 5; var y = 6; var z = x + y; • The var keyword was used in all JavaScript code from 1995 to 2015. • The let and const keywords were added to JavaScript in 2015. • The var keyword should only be used in code written for older browsers.
- 13. Mixed Example • const price1 = 5; const price2 = 6; let total = price1 + price2; • The two variables price1 and price2 are declared with the const keyword. • These are constant values and cannot be changed. • The variable total is declared with the let keyword. • The value total can be changed.
- 14. JavaScript Operators • Operators are used to assign values, compare values, perform arithmetic operations, and more. • There are different types of JavaScript operators: • Arithmetic Operators • Assignment Operators • Comparison Operators • Logical Operators • Conditional Operators
- 15. Arithmetic Operators Operators Name Example Results + Addition x = y + 2 y=5, x=7 - Subtraction x=y-2 y=5, x=3 * Multiplication x=y*2 y=5, x=10 ** Exponentiation x=y**2 y=5, x=25 / Division x = y / 2 y=5, x=2.5 % Remainder x = y % 2 y=5, x=1 ++ Pre increment x = ++y y=6, x=6 ++ Post increment x = y++ y=6, x=5 -- Pre decrement x = --y y=4, x=4 -- Post decrement x = y-- y=4, x=5
- 16. JavaScript Assignment Operators Operators Example Same As Result = x = y x = y x = 5 += x += y x = x + y x = 15 -= x -= y x = x - y x = 5 *= x *= y x = x * y x = 50 /= x /= y x = x / y x = 2 %= x %= y x = x % y x = 0 : x: 45 size.x = 45 x = 45
- 17. Comparison Operators Operators Name Comparing Returns == equal to x == 8 false == equal to x == 5 true === equal value and type x === "5" false === equal value and type x === 5 true != not equal x != 8 true !== not equal value or type x !== "5" true !== not equal value or type x !== 5 false > greater than x > 8 false < less than x < 8 true >= greater or equal to x >= 8 false <= less or equal to x <= 8 true
- 18. Logical Operators Operators Name Example && AND (x < 10 && y > 1) is true || OR (x === 5 || y === 5) is false ! NOT !(x === y) is true
- 19. Control Structure • The JavaScript if-else statement is used to execute the code whether condition is true or false. There are three forms of if statement in JavaScript. • If Statement • If else statement • if else if statement
- 20. JavaScript If statement • It evaluates the content only if expression is true. The signature of JavaScript if statement is given below. if(expression){ //content to be evaluated } Example <script> var a=20; if(a>10){ document.write("value of a is greater than 10"); } </script>
- 21. The If … else Statement • Use the if statement to specify a block of JavaScript code to be executed if a condition is true. • Use the else statement to specify a block of code to be executed if the condition is false. • If…… else • use if… else to specify a new condition to test, if the first condition is false Syntax: if (condition) { // block of code to be executed if the condition is true } else { // block of code to be executed if the condition is false Example: if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; }
- 22. The else if Statement • Use the else if statement to specify a new condition if the first condition is false. if (condition1) { // block of code to be executed if condition1 is true } else if (condition2) { // block of code to be executed if the condition1 is false and condition2 is true } else { // block of code to be executed if the condition1 is false and condition2 is false }
- 23. The else if Statement • Example • If time is less than 10:00, create a "Good morning" greeting, if not, but time is less than 20:00, create a "Good day" greeting, otherwise a "Good evening": if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; } Result: Good day
- 24. For loop • The JavaScript for loop iterates the elements for the fixed number of times. It should be used if number of iteration is known. The syntax of for loop is given below. • for (initialization; condition; increment) • { • code to be executed • }
- 25. <script> for (i=1; i<=5; i++) { document.write(i + "<br/>") } 1.</script> • Output: • 1 2 3 4 5 For loop Example
- 26. while loop • WHILE loop loops through a block of code as long as a specified condition is true. • he JavaScript while loop iterates the elements for the infinite number of times. It should be used if number of iteration is not known. The syntax of while loop is given below. Syntax:- while (condition) { // code block to be executed } Example:- <script> var i=11; while (i<=15) { document.write(i + "<br/>"); i++; } </script>
- 27. do while loop • Do While loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true. • Syntax:- do { // code block to be executed } while (condition); <script> var i=21; do{ document.write(i + "<br/>"); i++; }while (i<=25); </script>
- 28. Mouse events: Event Performed Event Handler Description click onclick When mouse click on an element mouseover onmouseover When the cursor of the mouse comes over the element mouseout onmouseout When the cursor of the mouse leaves an element mousedown onmousedown When the mouse button is pressed over the element mouseup onmouseup When the mouse button is released over the element mousemove onmousemove When the mouse movement takes place.
- 29. Keyboard events: Event Performed Event Handler Description Keydown & Keyup onkeydown & onkeyup When the user press and then release the key
- 30. Form events: Event Performed Event Handler Description focus onfocus When the user focuses on an element submit onsubmit When the user submits the form blur onblur When the focus is away from a form element change onchange When the user modifies or changes the value of a form element
- 31. Window/Document events Event Performed Event Handler Description load onload When the browser finishes the loading of the page unload onunload When the visitor leaves the current webpage, the browser unloads it resize onresize When the visitor resizes the window of the browser