UNIT-4 Introduction«to JavaScript & jQueryIntroduction to JavaScript Understanding JavaScript: - JavaScript is the most Popular scripting language(Client side) - JavaScript was designed to add interactivity to HTML pages - you can make your webpage more lively and interactive with the help of JavaScript. - Ascripting language is a lightweight programming language - JavaScript is usually embedded directlyinto HTML pages - JavaScript is interpreted language - Free of cost Scripting Language - JavaScript is also being used: Widely in game development and Mobile application development. The 2. Integrating script with tag 3. Importing External JavaScript Javascript demo program: Basic of JavaScript programming & Elements A computer program is a list of "instructions" to be "executed" by a computer. In a programming language, these programming/instructions are called statements. A JavaScript program is a list of programming.statements ended with ;. JavaScript statements can be grouped together in code blocks, inside curly brackets { Elements of JavaScript: JavaScript comments: JavaScript comments canbe used to explain JavaScript code, and to make it more readable. Comments are nomexecutable code of the program. Single line comments start with //. Multi-line’comments start with /* and end with */. Any text between /* and */ will be ignored by JavaScript.JavaScript Statements * JavaScript statements are composed of: * Values, Operators, Expressions, Keywords, and Comments, JavaScript Values * The JavaScript syntax defines two types of,values: * Fixed values: Fixed values are called\Literals. * Variable values: Variable values are called Variables. JavaScript Literals * The two mostimportant syntax rules for fixed values are: 1. Numbers ar@written with or without decimals: Ex:,100, 10.5 2. Strings are text, written within double or single quotes: "John Doe“ ‘John Doe‘JavaScript Variables: In a programming language, variables are used to store information. JavaScript uses the var keyword to declare variables. An equal sign is used to assign values to variables. While naming your variables in JavaScript, keep:the following rules in mind. - You should not use any of the JavaScript.reserved keywords as a variable name. - You can not use mathematical orlogical operator in a variable name. - JavaScript variable names should not start with a numeral (0-9). They must begin with a letter or an.underscore character. - JavaScript names must not'’contain spaces ever. - JavaScript variable,names are case-sensitive. Variable declaration: var-pi =3.14; vanperson = "John Doe"; var Z=x+y;// Example of variable

JavaScript Variables

JavaScript Operators: * An operator is a special symbol used to perform operations on Operands (values and variables). * Here is a list of different operators you will leasmin this tutorial. * Assignment Operators * String Operators * Arithmetic Operators * Relational Operators * Logical Operators * Bitwise Operators * Compound.Operators* Assignment operators are used to assign values to variables. Ex: var x =5; * String Operator is use to concatenate (join) two or more strings. Use + Operator to join strings. Ex: "java" + "Script" * Arithmetic operators are used to perform arithmetic calculations. Op Meaning Example + Addition x+y - Subtraction x-y * Multiplication x*y / Division x/y % Remainder x%y ++ Increment (increments by 1) ++x Or X++ - Decrement (decrements by 1) --X OF X—* Relational operators compare two values and return a Boolean value, either true or false Op Meaning Example == Equal to: returns true if the operands are equal x== != Not equal to: returns true if the operands are not equal xl=y > Greater than: true if left operand is greater than the right operand = x>y >= Greater than or equal to: true if left operand is greater than or equal to the right operand x>=y <_ Less than: true if the left operand is less than the right operand x> Shift Right >>> Shift right zero fillCompound Operators are made using combination of more than one operator. Op Meaning Example +5 Add and Assignment CHE A -= Subtract and Assignment C=A Fe Multiply and Assignment C*=A /= Divide and Assignment C/=A %= Modules and Assignment C%=A Same logic applies to, Bitwise operators so they will become like <<=, >>=, >>=, &=, |= andy=.Conditional Operator (? :] * The conditional operator first evaluates an expression for a true or false value and then executes one of the two given statements depending upon the result of the evaluation. Op Meaning ?.: (Conditional) If Condition is true? Then value X : Otherwise value Y Ex: a=20, b=30 result = (a >b) ? 100 : 200;. . Flow Control Statements JavaScript supports the following conditional statements: if statement if...else statement if...else if... statement. if statement: The if statement is the fundamentahcontrol statement that allows JavaScript to make decisionS and execute statements conditionally. Syntax if (expression) { } Here-a JavaScript expression is evaluated. If the resulting value is true) the given code is executed. If the expression is false, then no statement would be executed. code to be executed if condition is trueif...else statement: * The ‘if...else’ statement is the next form of control statement that allows JavaScript to execute statements in a more controlled way. * Syntax if (expression) { } else { } * Here JavaScript expression is evaluated. If the resulting value is true, the given code in the ‘if’ block, are executed. If the expression is false, then the given code in the else block are executed. code to be executed if expression is true code to be executed if expression is falseExample: if...else if... Statement: * The if...else if... statement is an advanced form of if...else that allows JavaScript to make a correct decision out of several conditions. * Syntax if (Condition1) {code to be executed if Conditionlis true } else if (Condition2) {code to be executed if Condition2 is true } else if (Condition3) {code to be executed if Condition3 is true } else { Statément(s) to be executed if no expression is true } * Here JavaScript expression is evaluated. If the resulting value is trué,.the given code in the ‘if’ block, are executed. If the expression is false, then the given code in the else block are executed.Switch Statement Switch statement is use to select one of many blocks of code toybe executed. The objective of a switch statement is to give an.expression to evaluate and several different statements to execute based’on the value of the expression. The interpreter checks each case against the value of the expression until a match is found. If nothing-matches, a default condition will be used. Syntax : switch (expression) {case condition 1: statement(s) break; casecondition 2: statement(s) break; », Case Condition n: statement(s) break; default: statement(s) } The break statements indicate the end of a particular case. If they were omitted, the interpreter would continue executing each statement in each of the following cases.Example: Javascript Loops * Loops execute a block of code a specified number of times. * JavaScript supports main three kind of loops: While loop: The purpose of a while loop is to execut@a code block repeatedly as long as an expression is true. Once the expression becomes false, the loop terminates, * Syntax: while (expression) { code to be executed if expression is true do...while Loop : The do...while loop is similar to the while loop except that the’condition check happens at the end of the loop. This means that the loop will always be executed at least once, even if the condition is false.* Syntax: do { code to be executed; } while (expression); For Loop: The 'for' loop is the most compact form of looping. * It includes the following three importantparts - - loop initialization - Test statement - Iteration statement * You can put all the three’parts in a single line separated by semicolons. * Syntax: for (initialization; test condition; iteration statement) { code to be executedPopup Boxes in JavaScript * JavaScript provides various popup boxes to notify, warn, or to get input from the user. * JavaScript has three kind of popup boxes: Alert box, Confirm,béx, and’Prompt box. * All popup boxes are methods of the window object. * window method can be written without the window prefix» Alert Box: * Analert dialog box is mostly used to inform or alert the user by displaying some messages in a small dialogue box. * When the alert box is displayed to theuser, the user needs to press ok and proceed. + Syntax: window.alert("sometext"); © File | C/Users/admin/Desktop/PracticaVunit-2/alert. htm! This page saysConfirmation Box A confirmation box is used to let the user make a choice. When Javascript pops up a confirm box, the user will have to.click either "OK" or "Cancel" to proceed to the next step. This method simply returns a Boolean value (tnue.or false) depending on whether the user clicks OK or Cancel button. That's why its result is often assigned to a variable when it is used. Syntax : window.confirm("sometext"); © File | Cy/Users/admin/Desktop/PracticaVunit-2/alert.htm| This page saysPrompt Box : Javascript Prompt Box can be used when we want to get some user input for further use. After entering the required details user have to click ok to proceed next stage else by pressing the cancel button user returning the null value. If the user clicks OK button without entering any text,amempty string is returned. For this reason, its result is usually assigned to.a-variable when it is used. Syntax window.prompt("sometext","defaultText"); @ File | C/Users/admin/Desktop/Practical/unit-2/alerthtm! This page saysArrays The Array object lets you store multiple values in a single variable. It stores a fixed-size sequential collection of elements{of the same type. The Array parameter is a list of strings or integers. We define an array object with the new keyword. Syntax: var Arrayname = new Array(); EX: var scores = new Array(9,10,8,7)6); There are two ways of adding values to an array. Var fruits=new Array()-OR Var fruits=new Array(3) fruits[0]=“Mango”> fruits[1]=“Orange”} fruits[2]=“Banana”; OR var fruits = [" Mango ", " Orange ", " Banana "J;Common Array Properties and Methods: * The length property of an array returns the length of an array (the number of array elements). + Ex: fruit.length + Javascript array concat() method returns a new array comprised of this array joined with two or more arrays. * Syntax array.concat(value1, value2, ..., valueN); * Javascript array sort() method softs the elements of an array. array.sort( ); * Ex: var y = fruits.sort(); * Javascript array slice() method extracts a section of an array and returns a new array. array.slice( begin [,end] ); * Ex: fruits.slice( 1, 2)+ Javascript array reverse() method reverses the element of an array. The first array element becomes the last and the last becomes the first. array.reverse(); * Javascript array push() method appends the given element(s) in the last of the array and returns the length of the new array. array.push(element1, ...,elementN); + Javascript array pop() method removes the last element from an array and returns that element. array.pop();,JavaScript function A function is a group of reusable code which can be called anywhere in your program. You can use the same code many times with different arguments, to produce different results. A JavaScript function is a block of codé-designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it). You can use a function declaration or a function expression. Function can be defined\imthe and in the section of document. You may call function from anywhere within a page or even from other file.Function Syntax: * A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). * Function names can contain letters, digits and underscores (same rules as variables). * The parentheses may include parameter names\separated by commas: (parameter1, parameter, ...) (that might beempty) * The code to be executed, by the function, is placed inside curly brackets: {} Syntax: function functionname(parameter-list) { code to be executed* Function parameters are listed inside the parentheses () in the function definition. * Function arguments are the values received by the function when it is invoked. * Inside the function, the arguments (the parameters) behave as local variables. * A Function is much the same as a Procedure or a Subroutine, in other programming languages. Function Invocation: * The code inside the function will execute when “something" invokes (calls) the function: - When an event occurs (when a user clicks a button) - When it isinvoked (called) from JavaScript code - Automatically (self invoked)Example: function sayHello() { alert("Hello world"); } Function Return: * The return statement is used to-specify the value that is returned from the function. * When JavaScript reaches areturn statement, the function will stop executing. * Function thatare going to return a value must use the return statement. Event Handling Events are actions that can be detected by javascript. JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page. HTML events are "things" that happen to HTMb,.elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events. Examples of HTML events: . When a user clicks the mouse When a web page hasiloaded When an image has.been loaded When the mouse, moves over an element When an HTML form is submitted When’a.user strokes a key...HTML Events 1. Document Events 2. Mouse Events 3. Keyboard Events 4. Form Events* Here is a list of some common HTML events: Pacino [Descinion onload onunload onclick Ondblclick onmouseover onmouseout onmousedown onmouseup onkeypress onkeyup onsubmit onblur onfocus. onselect onresize The browser has finished loading the page The user exists the page The user clicks an HTML element The user double clicks an HTML element The user moves the mouse over an HTML element The user moves the mouse away from an HTML element The user pressed mouse button The user released mouse button The user pushes a keyboard key The user released a keyboard key The user pressed submit button An HTML element loses focus An HTML element gets focus Text is selected Awindow or frame is resizedDocument Events 1. Onload: * Triggers when the document or image load on webbrowser. + Syntax: Example: 2. Onunload: + The onunload event occurs’ence the browser window has been closed. + onunload occurs when the user navigates away from the page by clicking on a link, submitting a-form, closing the browser window, etc.. + Syntax: Example: Mouse Events 1. Onclick: * Triggers on a mouse click * User can define this event in any html tag. * Syntax: _ 2. Ondblclick: * This event is occur while‘user click mouse left key two time. * User can define this‘eventiin any html tag * Syntax: function OnDbIClickText() { alert ("You have double-clicked on the text!"); }

Click on me twice

w . OnMouseMove: Execute a JavaScript when moving the mouse pointer over a-specific html element: User can define this event in any html tag. Syntax: OnMouseover: Execute a JavaScript when movingthe mouse pointer over a specific html element: User can define this event'in any html tag. Syntax: 5. OnMouseout: * The onmouseout event occurs when the mouse pointer is moved out of an element. * User can define this event in any html tag. * Syntax: 6. OnMouseup & Onmousedown; * The onmouseup event occurs when a user releases a mouse button over an element. * The onmousedowmeyent occurs when a user presses a mouse button over an element. * Syntax: Keyboard Events In JavaScript keyboard events are performing while keyboard Key is pressed or released. This event work with form tag elements like textbox, textarea, email, number etc. There are three main keyboard events . OnKeypress onKeyup onKeydown . onKeypress : The onkeypress event occurs when the user presses a key (on the keyboard). The onkeypress-event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC) in all browsers. To detect-only whether the user has pressed a key, use the onkeydown event instead, because it works for all keys. Syntax? EX: . onKeyup: The onkeyup event occurs when the user releases a key (on the keyboard). It is little bit faster than keydown and keypress. Syntax: Ex: . onKeydown: The onkeydown event occurs when the user is pressing a key (on the keyboard). It will start reacting’after second time keydown. It is little bit’slower than keyup() event and similar to the keypress event. Syntax: Ex: Example of onkeyup and onkeydown:

Key up and down change background of the text field

RPWNR Form Events A form event is fired when a form control receive or loses\focus\or when the user modify a form control value such as by typing,text in a text input, select any option in a select box etc. Here are some most important form events and,their event handler. onfocus onblur onchange onsubmit1. onfocus: * The focus event occurs when the user gives focus to an element on a web page. You can handle the focus event with the onfocus event handler. * Syntax: Ex: 2. onblur: This event occurs when the.user takes the focus away from a form element. The onblur-evehthandler is used to handle this event. ° Syntax: Ex: 3. onchange: The change event occurs when a user changes the value-of a form element. You can handle the change event with the onchange() event handler. This event trigger when you change the option in the form select box. 4. onsubmit: The submit event occurs when \the submit button is clicked. The onsubmit() event handler is used to handle this event. * Syntax : Ex: Example of onfocus & onblur :

Performgetf6cus and lostfocus event with input field.

Enter-your-hame: Form Validation It is important to validate the form submitted by the user because it can have inappropriate values. So, validation is must to authenticate user. JavaScript provides facility to validate form's data on the client-side before sending it to the web server so data processing will be faster than server-side validation.. Form validation generally performs two functions. Basic Validation — First of all, the form must be checked to make sure all the mandatory fields are filled in. Data Format Validation,- Secondly, the data that is entered must be checked for correct form and value. Through JavaSeript, we can validate name, password, email, date, mobile numbers and more fields. <

Please input a number between 1 and 10:

Submit

Browsers and JS (Window Object) The window object is supported by all browsers. It represents the browser's window. All global JavaScript objects, functions, and variables’automatically become members of the window object. Global variables are properties of the window object. Global functions are methods of the,window object. Two properties can be used to détermine the size of the browser window. Both properties return,thé sizes in pixels: window.innerHeight >the inner height of the browser window (in pixels) window. innerWidth,- the inner width of the browser window (in pixels)Example:

Web Pages and JS Methods of the browser window. : window.open() - open a new window window.close() - close the current window window.moveTo() - move the current window window.resizeTo() - resize the current windowExample:

pn ann pwnp Assignment Compare HTML & JavaScript. Explain types of JavaScript in detail. List the element of JS and explain it. Discuss operators available in JS. Explain all types of loop available in JS. What is Array? Explain its properties ‘and methods. Explain JavaScript function with“example. What are events in JS? Explain Keyboard events in detail.