Java script

JavaScript Prepared By C A Yogaraja, Assistant Professor, CSE, Ramco Institute of Technology.

Introduction  "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.“

JavaScript HTML DOM With the object model, JavaScript gets all the power it needs to create dynamic HTML:  JavaScript can change all the HTML elements in the page  JavaScript can change all the HTML attributes in the page  JavaScript can change all the CSS styles in the page  JavaScript can remove existing HTML elements and attributes  JavaScript can add new HTML elements and attributes  JavaScript can react to all existing HTML events in the page  JavaScript can create new HTML events in the page

The DOM Programming Interface  The HTML DOM can be accessed with JavaScript (and with other programming languages).  In the DOM, all HTML elements are defined as objects.  The programming interface is used to access the properties and methods of each object.  A property is a value that you can get or set (like changing the content of an HTML element).  A method is an action you can do (like add or deleting an HTML element).

Example <html> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello World!"; </script> </body> </html>

Example Method-getElementById( )  The most common way to access an HTML element is to use the id of the element.  In the example above the getElementById method used id="demo" to find the element. Property-innerHTML  The easiest way to get the content of an element is by using the innerHTML property.  The innerHTML property is useful for getting or replacing the content of HTML elements.

JavaScript HTML DOM Document  The HTML DOM document object is the owner of all other objects in your web page. The HTML DOM Document Object  The document object represents your web page.  If you want to access any element in an HTML page, you always start with accessing the document object.

Finding HTML Elements Method Description document.getElementById(id) Find an element by element id document.getElementsByTagName(name) Find elements by tag name document.getElementsByClassName(name) Find elements by class name

Changing HTML Elements Method Description element.innerHTML = new html content Change the inner HTML of an element element.attribute = new value Change the attribute value of an HTML element element.setAttribute(attribute, value) Change the attribute value of an HTML element element.style.property = new style Change the style of an HTML element

<!DOCTYPE html> <html> <body> <p>Hello World!</p> <p > The DOM is very useful.</p> <p>This is example.</p> <p id="demo"></p> <script> var y = document.getElementsByTagName("p"); document.getElementById("demo").innerHTML = 'The first paragraph inside "main" is: ' + y[0].innerHTML; </script> </body> </html>

<!DOCTYPE html> <html> <body> <p>Hello World!</p> <img id="pic" src="old.jpg"> <script> var c=document.getElementsByTagName("p"); c[0].style.color ="blue"; </script> </body> </html>

Adding and Deleting Elements Method Description document.createElement(element) Create an HTML element document.removeChild(element) Remove an HTML element document.appendChild(element) Add an HTML element document.replaceChild(element) Replace an HTML element document.write(text) Write into the HTML output stream

<body> <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("This is new."); para.appendChild(node); var element = document.getElementById("div1"); element.appendChild(para); </script> </body>

<body> <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("This is new."); para.appendChild(node); var parent= document.getElementById("div1"); var child = document.getElementById("p1"); parent.insertBefore(para, child); </script> </body>

<body> <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var node = document.getElementById("p1"); node.remove (); </script> </body>

<body> <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child); </script> </body>

<body> <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("This is new."); para.appendChild(node); var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script> </body>

Adding Events Handlers Method Description document.getElementById(id).onclick = function(){code} Adding event handler code to an onclick event

<!DOCTYPE html> <html> <body> <h1 id="id1">My Heading 1</h1> <button type="button" onclick="document.getElementById('id1').style.color = 'red'">Click Me red!</button> <button type="button" onclick="document.getElementById('id1').style.color = ‘blue'">Click Me blue!</button> </body> </html>

Finding HTML Objects  The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and properties. These are still valid in HTML5.  Later, in HTML DOM Level 3, more objects, collections, and properties were added. Property Description DOM document.anchors Returns all <a> elements that have a name attribute 1 document.applets Returns all <applet> elements (Deprecated in HTML5) 1 document.baseURI Returns the absolute base URI of the document 3 document.body Returns the <body> element 1 document.cookie Returns the document's cookie 1 document.doctype Returns the document's doctype 3 document.documentElement Returns the <html> element 3

Property Description DOM document.documentElement Returns the <html> element 3 document.documentMode Returns the mode used by the browser 3 document.documentURI Returns the URI of the document 3 document.domain Returns the domain name of the document server 1 document.domConfig Obsolete. Returns the DOM configuration 3 document.embeds Returns all <embed> elements 3 document.forms Returns all <form> elements 1 document.head Returns the <head> element 3 document.images Returns all <img> elements 1 document.implementation Returns the DOM implementation 3 document.inputEncoding Returns the document's encoding (character set) 3 document.lastModified Returns the date and time the document was updated 3 document.links Returns all <area> and <a> elements that have a href attribute 1 document.readyState Returns the (loading) status of the document 3 document.referrer Returns the URI of the referrer (the linking document) 1 document.scripts Returns all <script> elements 3 document.strictErrorChecking Returns if error checking is enforced 3 document.title Returns the <title> element 1 document.URL Returns the complete URL of the document 1

Introduction In JavaScript, almost "everything" is an object.  Booleans can be objects (if defined with the new keyword)  Numbers can be objects (if defined with the new keyword)  Strings can be objects (if defined with the new keyword)  Dates are always objects  Maths are always objects  Regular expressions are always objects  Arrays are always objects  Functions are always objects  Objects are always objects All JavaScript values, except primitives, are objects.

Built-in / Native Objects in JS  JS Array  JS RegExp  JS Date  JS Math  JS Number  JS Boolean  JS Error  JS Global  JS JSON  JS Operators  JS Statements  JS String

Objects are Variables JavaScript variables can contain single values:  Example var person = "John"; Objects are variables too. But objects can contain many values.  The values are written as name : value pairs (name and value separated by a colon).  Example var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Object Methods  Methods are actions that can be performed on objects.  Object properties can be both primitive values, other objects, and functions.  An object method is an object property containing a function definition.  Example Property Value firstName John lastName Doe age 50 eyeColor blue fullName function() {return this.firstName + " " + this.lastName;} name = person.fullName();

JavaScript Keyword new The following example also creates a new JavaScript object with four properties: var person = new Object(); person.firstName = "John"; person.lastName = "Doe"; person.age = 50; person.eyeColor = "blue"; In a constructor function this does not have a value. It is a substitute for the new object. The value of this will become the new object when a new object is created.

Objects are Mutable  Objects are mutable: They are addressed by reference, not by value.  If person is an object, the following statement will not create a copy of person:  var x = person; // This will not create a copy of person.  The object x is not a copy of person. It is person. Both x and person are the same object.  Any changes to x will also change person, because x and person are the same object.  var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} var x = person; x.age = 10; // This will change both x.age and person.age

Object Properties  Properties are the values associated with a JavaScript object.  A JavaScript object is a collection of unordered properties.  Properties can usually be changed, added, and deleted, but some are read only. Accessing JavaScript Properties  objectName.property // person.age or  objectName["property"] // person["age"] or  objectName[expression] // x = "age"; person[x] Adding New Properties person.nationality = "English"; Deleting Properties delete person.age; // or delete person["age"];

The get Keyword <body> <p id="demo"></p> <script> // Create an object: var person = { firstName: "John", lastName : "Doe", language : "en", get lang() { return this.language; } }; // Display data from the object using a getter: document.getElementById("demo").innerHTML = person.lang; </script> </body>

The set Keyword <body> <p id="demo"></p> <script> var person = { firstName: "John", lastName : "Doe", language : "", set lang(lang) { this.language = lang; } }; // Set a property using set: person.lang = "en"; // Display data from the object: document.getElementById("demo").innerHTML = person.language; </script></body>

Object Constructors  Sometimes we need a "blueprint" for creating many objects of the same "type".  The way to create an "object type", is to use an object constructor function.  In the example above, function Person() is an object constructor function.  Objects of the same type are created by calling the constructor function with the new keyword: <script> // Constructor function for Person objects function Person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; } </script>

<body> <h2>JavaScript Object Constructors</h2> <p id="demo"></p> <script> function Person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; this.nationality = "English"; //new property to a constructor } var myFather = new Person("John", "Doe", 50, "blue"); document.getElementById("demo").innerHTML ="My father” + myFather.firstName + “Nationality is " + myFather.nationality; </script> </body>

Built-in JavaScript Constructors  var x1 = new Object(); // A new Object object  var x2 = new String(); // A new String object  var x3 = new Number(); // A new Number object  var x4 = new Boolean(); // A new Boolean object  var x5 = new Array(); // A new Array object  var x6 = new RegExp(); // A new RegExp object  var x7 = new Function(); // A new Function object  var x8 = new Date(); // A new Date object The Math() object is not in the list. Math is a global object. The new keyword cannot be used on Math.

Get Date Methods Method Description getFullYear() Get the year as a four digit number (yyyy) getMonth() Get the month as a number (0-11) getDate() Get the day as a number (1-31) getHours() Get the hour (0-23) getMinutes() Get the minute (0-59) getSeconds() Get the second (0-59) getMilliseconds() Get the millisecond (0-999) getTime() Get the time (milliseconds since January 1, 1970) getDay() Get the weekday as a number (0-6) These methods can be used for getting information from a Date object

<body> <p>The getFullYear() method returns the full year of a date:</p> <p id="demo"></p> <script> var d = new Date(); document.getElementById("demo").innerHTML = d.getFullYear(); </script> </body> Output: The getFullYear() method returns the full year of a date: 2018

<body> <p id="demo"></p> <script> var d = new Date(); var months = ["January","February","March","April","May","June","July","August","September", "October","November","December"]; document.getElementById("demo").innerHTML = months[d.getMonth()]; </script> </body> Output: August

UTC Date Methods UTC date methods are used for working with UTC dates (Universal Time Zone dates): Method Description getUTCDate() Same as getDate(), but returns the UTC date getUTCDay() Same as getDay(), but returns the UTC day getUTCFullYear() Same as getFullYear(), but returns the UTC year getUTCHours() Same as getHours(), but returns the UTC hour getUTCMilliseconds() Same as getMilliseconds(), but returns the UTC milliseconds getUTCMinutes() Same as getMinutes(), but returns the UTC minutes getUTCMonth() Same as getMonth(), but returns the UTC month getUTCSeconds() Same as getSeconds(), but returns the UTC seconds

Set Date Methods Set Date methods let you set date values (years, months, days, hours, minutes, seconds, milliseconds) for a Date Object. Method Description setDate() Set the day as a number (1-31) setFullYear() Set the year (optionally month and day) setHours() Set the hour (0-23) setMilliseconds() Set the milliseconds (0-999) setMinutes() Set the minutes (0-59) setMonth() Set the month (0-11) setSeconds() Set the seconds (0-59) setTime() Set the time (milliseconds since January 1, 1970)

<body> <p>Please note that month counts from 0. December is month 11:</p> <p id="demo"></p> <script> var d = new Date(); d.setFullYear(2020, 11, 3); document.getElementById("demo").innerHTML = d; </script> </body> Output: Please note that month counts from 0. December is month 11: Thu Dec 03 2020 10:16:14 GMT+0530 (India Standard Time)

Compare Dates <body> <p id="demo"></p> <script> var today, someday, text; today = new Date(); someday = new Date(); someday.setFullYear(2100, 0, 14); if (someday > today) { text = "Today is before January 14, 2100."; } else { text = "Today is after January 14, 2100."; } document.getElementById("demo").innerHTML = text; </script> </body> Output: Today is before January 14, 2100.

JavaScript Regular Expression(RegExp)

JS RegExp Object  A regular expression is an object that describes a pattern of characters.  Regular expressions are used to perform pattern- matching and "search-and-replace" functions on text.  A regular expression can be a single character, or a more complicated pattern. Syntax /pattern/modifiers;

JS RegExp Object  Modifiers are used to perform case-insensitive and global searches: Modifier Description i Perform case-insensitive matching g Perform a global match (find all matches rather than stopping after the first match) m Perform multiline matching

Example var patt = /Ramco/i Example: /Ramco/i is a regular expression. Ramco is a pattern (to be used in a search). i is a modifier (modifies the search to be case- insensitive).

Using String Methods  In JavaScript, regular expressions are often used with the two string methods: search() and replace(). The search() method uses an expression to search for a match, and returns the position of the match.  var str = "Visit Ramco!"; var n = str.search(“Ramco");

Using String Methods With a Regular Expression  var str = "Visit Ramco"; var n = str.search(/Ramco/i); The replace() method returns a modified string where the pattern is replaced.  var str = "Visit Microsoft!"; var res = str.replace(/microsoft/i, ‘’Ramco");

<body> <p id="demo"></p> <script> var str = "Visit Ramco!"; var n = str.search(/Ramco/i); document.getElementById("demo").innerHTML = n; var res = str.replace(/Ramco/i, “RIT"); document.getElementById("demo").innerHTML = res; </script> </body> 6 Visit RIT!

Metacharacters  Metacharacters are characters with a special meaning: Metacharacter Description [abc] Find any character between the brackets [^abc] Find any character NOT between the brackets [0-9] Find any character between the brackets (any digit) [^0-9] Find any character NOT between the brackets (any non-digit) (x|y) Find any of the alternatives specified

<body> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <p id="demo1"></p> <p id="demo2"></p> <p id="demo3"></p> <script> function myFunction() { var str = "Is this all there is 6789"; var patt = /^(([w]*s?))*$/; var patt1 = /([^a]|[i-s])/g; var patt2 = /([h]|[7-9])/; var patt3 = /([h]|[7-9])/g var result = str.match(patt); var result1 = str.match(patt1); var result2 = str.match(patt2); var result3 = str.match(patt3); if(str.match(patt)) { document.getElementById("demo").innerHTML = "1"; } Else { document.getElementById("demo").innerHTML = "0"; } document.getElementById("demo1").innerHTML = result1; document.getElementById("demo2").innerHTML = result2; document.getElementById("demo3").innerHTML = result3; } </script> </body> OUTPUT 1 I,s, ,t,h,i,s, ,l,l, ,t,h,e,r,e, ,i,s, ,6,7,8,9 h,h h,h,7,8,9

Character Class  In addition to Metacharacters there are some Character Classes are available Character Class Description w Find a word character W Find a non-word character d Find a digit D Find a non-digit character s Find a whitespace character S Find a non-whitespace character b Find a match at the beginning of a word B Find a match not at the beginning of a word 0 Find a NUL character t Find a tab character v Find a vertical tab character

<body> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <p id="demo1"></p> <script> function myFunction() { var str = "Visit Ramco789"; var patt = /w/g; var patt1 = /bRA/i; var result = str.match(patt); var result1 = str.match(patt1); document.getElementById("demo").innerHTML = result; document.getElementById("demo1").innerHTML = result1; } </script> </body> OUTPUT V,i,s,i,t,R,a,m,c,o,7,8,9 Ra

Quantifiers Quantifier Description n+ Matches any string that contains at least one n n* Matches any string that contains zero or more occurrences of n n? Matches any string that contains zero or one occurrences of n n{X} Matches any string that contains a sequence of X n's n{X,Y} Matches any string that contains a sequence of X to Y n's n{X,} Matches any string that contains a sequence of at least X n's n$ Matches any string with n at the end of it ^n Matches any string with n at the beginning of it Quantifiers define quantities:

<body> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <p id="demo1"></p> <p id="demo2"></p> <p id="demo3"></p> <p id="demo4"></p> <script> function myFunction() { var str = "Hellooo World! Hello Ramco!"; var patt = /o+/g; var patt1 = /o*/g; var patt2 = /o?/g; var patt3 = /o{2}/g; var patt4 = /l{1,}/g; var result = str.match(patt); var result1 = str.match(patt1); var result2 = str.match(patt2); var result3 = str.match(patt3); var result4 = str.match(patt4); document.getElementById("demo").innerHTML = result; document.getElementById("demo1").innerHTML = result1; document.getElementById("demo2").innerHTML = result2; document.getElementById("demo3").innerHTML = result3; document.getElementById("demo4").innerHTML = result4; } </script> </body> OUTPUT ooo,o,o,o ,,,,ooo,,,o,,,,,,,,,,o,,,,,,o,, ,,,,o,o,o,,,o,,,,,,,,,,o,,,,,,o,, oo ll,l,ll

RegExp Object Properties Property Description global Checks whether the "g" modifier is set ignoreCase Checks whether the "i" modifier is set lastIndex Specifies the index at which to start the next match multiline Checks whether the "m" modifier is set source Returns the text of the RegExp pattern var p=new RegExp; p=/[a-z]/ig; var r=p.properties;

<body> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <p id="demo1"></p> <p id="demo2"></p> <script> function myFunction() { var str = "The rain in Spain stays mainly in the plain"; var patt1 = /ain/gm; var res = patt1.global; var res1 = patt1.ignoreCase; var res2 = patt1.source; document.getElementById("demo").innerHTML = res; document.getElementById("demo1").innerHTML = res1; document.getElementById("demo2").innerHTML = res2; } </script></body> OUTPUT true false ain

RegExp Object Methods Method Description compile() Deprecated in version 1.5. Compiles a regular expression exec() Tests for a match in a string. Returns the first match test() Tests for a match in a string. Returns true or false toString() Returns the string value of the regular expression var p=new RegExp; p=/[a-z]/ig; var r=p.method();

<body> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <p id="demo1"></p> <p id="demo2"></p> <script> function myFunction() { var str = "The best things in life are free"; var patt = /est/i; // or new RegExp("est","i"); patt.compile(patt); var res = patt.exec(str); var res1 = patt.test(str); var res2 = patt.toString(); document.getElementById("demo").innerHTML = res; document.getElementById("demo1").innerHTML = res1; document.getElementById("demo2").innerHTML = res2; } </script></body> OUTPUT est true /est/i

Validation  Form validation normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button.  If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information.  If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information.  This was really a lengthy process which used to put a lot of burden on the server.

JavaScript-Validation JavaScript provides a way to validate form's data on the client's computer before sending it to the web server. 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. It would require just a loop through each field in the form and check for data.  Data Format Validation − Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data.

<head> <script> function validateForm() { //var x = document.forms["myForm"]["fname"].value; or var x=document.myForm.fame.value; if (x == "") { window.alert("Name must be filled out"); return false; } } </script> </head> <body> <form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname" id="fame"> <input type="submit" value="Submit"> </form> </body> OUTPUT

<input type="text" id="numb"> <button type="button" onclick="myFunction()">Submit</button> <p id="demo"></p> <script> function myFunction() { var x, text; x = document.getElementById("numb").value; if (isNaN(x) || x < 1 || x > 10) { text = "Input not valid"; } else { text = "Input OK"; } document.getElementById("demo").innerHTML = text; } </script></body> OUTPUT 5 Input OK X Input not valid

Other Validation Type Pattern Mobile Number /d{10}/ or /d{3}-d{3}-d{4}$/ Email /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/ Password ^[A-Za-z]w{7,15}$

Credit Card Validation Format of some well-known credit cards.  American Express :- Starting with 34 or 37, length 15 digits.  Visa :- Starting with 4, length 13 or 16 digits.  MasterCard :- Starting with 51 through 55, length 16 digits.  Discover :- Starting with 6011, length 16 digits or starting with 5, length 15 digits.  Diners Club :- Starting with 300 through 305, 36, or 38, length 14 digits.  JCB :- Starting with 2131 or 1800, length 15 digits or starting with 35, length 16 digits.

JavaScript Errors - Throw and Try to Catch The try statement lets you test a block of code for error / define a block of code to be tested for errors while it is being executed.. The catch statement lets you handle the error /define a block of code to be executed, if an error occurs in the try block. The throw statement lets you create custom errors.

JavaScript Errors - Finally The finally statement lets you execute code, after try and catch, regardless of the result. try { Block of code to try } catch(err) { Block of code to handle errors }

<body> <p id="demo"></p> <script> try { aalert("Welcome guest!"); } catch(err) { document.getElementById("demo").innerHTML = err.message; } </script> </body> OUTPUT aalert is not defined

<body> <p>Please input a number between 5 and 10:</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">Test Input</button> <p id="p01"></p> <p id="p02"></p> <script> function myFunction() { var x; x = document.getElementById("demo").value; try { if(x == "") throw "empty"; if(isNaN(x)) throw "not a number"; x = Number(x); if(x < 5) throw "too low"; if(x > 10) throw "too high"; } catch(err) { document.getElementById("p01").i nnerHTML = "Input is " + err; } finally { document.getElementById("p12").i nnerHTML="THE END"; } } </script> </body> OUTPUT Please input a number between 5 and 10: k Input is not a number THE END

Error Name Values Five different values can be returned by the error name property: EvalError  Newer versions of JavaScript does not throw any EvalError.

Error Name Values Range Error  A RangeError is thrown if you use a number that is outside the range of legal values. For example: You cannot set the number of significant digits of a number to 500. var num = 1; try { num.toPrecision(500); // A number cannot have 500 significant digits } catch(err) { document.getElementById("demo").innerHTML = err.name; }

Error Name Values Reference Error  A ReferenceError is thrown if you use (reference) a variable that has not been declared:  Example var x; try { x = y + 1; // y cannot be referenced (used) } catch(err) { document.getElementById("demo").innerHTML = err.name; }

Error Name Values Syntax Error  A SyntaxError is thrown if you try to evaluate code with a syntax error.  Example try { eval("alert('Hello)"); // Missing ' will produce an error } catch(err) { document.getElementById("demo").innerHTML = err.name; }

Error Name Values Type Error  A TypeError is thrown if you use a value that is outside the range of expected types:  Example var num = 1; try { num.toUpperCase(); // You cannot convert a number to upper case } catch(err) { document.getElementById("demo").innerHTML = err.name; }

Error Name Values URI (Uniform Resource Identifier) Error  A URIError is thrown if you use illegal characters in a URI function:  Example try { decodeURI("%%%"); // You cannot URI decode percent signs } catch(err) { document.getElementById("demo").innerHTML = err.name; }

JS MATH Math is a built-in object that has properties and methods for mathematical constants and functions. Not a function object. Unlike the other global objects, Math is not a constructor. All properties and methods of Math are static. You refer to the constant pi as Math.PI and you call the sine function as Math.sin(x), where x is the method's argument.

Math.PI <body> <p>Math.PI p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = Math.PI; </script> </body> OUTPUT Math.PI 3.141592653589793

Math Object Methods Method Description Math.round(4.7) returns 5 Math.pow(8, 2) returns 64 Math.sqrt(64) returns 8 Math.abs(-4.7) returns 4.7 Math.ceil(4.4) returns 5 Math.floor(4.7) returns 4 Math.sin(90); returns 1 Math.min(0, 150, 30, 20, -8, -200) returns -200 Math.random() returns a random number

Math Properties (Constants) JavaScript provides 8 mathematical constants that can be accessed with the Math object:  Math.E // returns Euler's number  Math.PI // returns PI  Math.SQRT2 // returns the square root of 2  Math.SQRT1_2 // returns the square root of ½  Math.LN2 // returns the natural logarithm of 2  Math.LN10 // returns the natural logarithm of 10  Math.LOG2E // returns base 2 logarithm of E  Math.LOG10E // returns base 10 logarithm of E

JavaScript Events (Event handling)

Events  HTML events are "things" that happen to HTML elements.  When JavaScript is used in HTML pages, JavaScript can "react" on these events.  An HTML event can be something the browser does, or something a user does.  Here are some examples of HTML events:  An HTML web page has finished loading  An HTML input field was changed  An HTML button was clicked

Events  HTML allows event handler attributes, with JavaScript code, to be added to HTML elements. With single quotes:  <element event='some JavaScript'> With double quotes:  <element event="some JavaScript">

Syntax  <element event=“action”>  document.getElementById(“elementId").event=function(){action}; document.getElementById(“elementId").addEventListener(“event", action);

Common HTML Events Event Description onchange An HTML element has been changed onclick The user clicks an HTML element onmouseover The user moves the mouse over an HTML element onmouseout The user moves the mouse away from an HTML element Onkeydown/up The user pushes a keyboard key Onload The browser has finished loading the page

Onchange  The onchange event occurs when the value of an element has been changed.  For radiobuttons and checkboxes, the onchange event occurs when the checked state has been changed. Tip: This event is similar to the oninput event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed. The other difference is that the onchange event also works on <select> elements.

Onchange <body> <select id="mySelect" onchange="myFunction()"> <option value="Audi">Audi <option value="BMW">BMW </select> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("mySelect").value; document.getElementById("demo").innerHTML = "You selected: " + x; } </script></body>

Onchange-HTML <body> Enter your name: <input type="text" id="fname" onchange="myFunction()"> <script> function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> </body>

Onchange-JS <body> Enter your name: <input type="text" id="fname"> <script> document.getElementById("fname").onchange=function(){myFunction()}; function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> </body>

Onchange-JS(addEventListener) <body> Enter your name: <input type="text" id="fname"> <script> document.getElementById("fname").addEventListener("change", myFunction); function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> </body>

Onclick In JavaScript, using the addEventListener() method: object.addEventListener("click", myScript); In JavaScript: object.onclick = function(){myScript}; In HTML: <element onclick="myScript">

Onclick-html <body> <button onclick="myFunction()">Click me</button> <p id="demo"></p> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; } </script> </body>

Onmouseover and Onmouseout <body> <h1 id="demo" onmouseover="Over()" onmouseout="Out()">Mouse over me</h1> <script> function Over() { document.getElementById("demo").style.color = "red"; } function Out() { document.getElementById("demo").style.color = "black"; } </script> </body>

DHTML JavaScript  HTML stands for Dynamic HTML. Dynamic means that the content of the web page can be customized or changed according to user inputs i.e. a page that is interactive with the user. In earlier times, HTML was used to create a static page.  It only defined the structure of the content that was displayed on the page. With the help of CSS, we can beautify the HTML page by changing various properties like text size, background color etc.  The HTML and CSS could manage to navigate between static pages but couldn’t do anything else.  If 1000 users view a page that had their information for eg. Admit card then there was a problem because 1000 static pages for this application build to work. As the number of users increase, the problem also increases and at some point it becomes impossible to handle this problem.

JavaScript and the HTML DOM  With HTML , JavaScript can also be used to change the inner content and attributes of HTML elements dynamically.  To change the content of an HTML element use:  document.getElementById(id).innerHTML=new HTML  To change the attribute of an HTML element use:  document.getElementById(id).attribute=new value

JavaScript and HTML Events  the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element.  To execute code when a user clicks on an element, use the following event attribute:  onclick=JavaScript

JavaScript and CSS  JavaScript can also be used to change the style of HTML elements.  To change the style of an HTML element use:  document.getElementById(id).style.property=new style

Reference  https://www.w3schools.com

Java script

More Related Content

What's hot

Similar to Java script

More from Yoga Raja

Recently uploaded

Java script