Java script and html new

HTML • HTML stands for Hyper Text Markup Language • HTML describes the structure of a Web page • HTML consists of a series of elements • HTML elements tell the browser how to display the content • HTML elements are represented by tags • HTML tags label pieces of content such as "heading", "paragraph", "table", and so on • Browsers do not display the HTML tags, but use them to render the content of the page • What is Website, WebPage and Internet

Use of html • First developed by Tim Berners-Lee in 1990, HTML is short for HyperText Markup Language. HTML is used to create electronic documents (called pages) that are displayed on the World Wide Web. Each page contains a series of connections to other pages called hyperlinks.

First HTML PAGE • <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>

HTML Document •The <!DOCTYPE html> declaration defines this document to be HTML5 •The <html> element is the root element of an HTML page •The <head> element contains meta information about the document •The <title> element specifies a title for the document •The <body> element contains the visible page content •The <h1> element defines a large heading •The <p> element defines a paragraph

HTML Tags HTML Tags HTML tags are element names surrounded by angle brackets: <tagname>content goes here...</tagname> •HTML tags normally come in pairs like <p> and </p> •The first tag in a pair is the start tag, the second tag is the end tag •The end tag is written like the start tag, but with a forward slash inserted before the tag name

HTML Headings HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading: Example <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3>

HTML Paragraphs HTML paragraphs are defined with the <p> tag: Example <p>This is a paragraph.</p> <p>This is another paragraph.</p>

HTML Links HTML links are defined with the <a> tag: Example <a href="https://www.w3schools.com">This is a link</a>

HTML Images HTML images are defined with the <img> tag. The source file (src), alternative text (alt), width, and height are provided as attributes: Example <img src=“day01.jpg" alt="W3Schools.com" width="104" height="142">

Create HTML Document • Till now

HTML Active Controls HTML Buttons HTML buttons are defined with the <button> tag: Example <button>Click me</button>

HTML ListsHTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag, followed by <li> tags (list items): Example <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li>

Empty HTML Elements HTML elements with no content are called empty elements. <br> is an empty element without a closing tag (the <br> tag defines a line break): Example <p>This is a <br> paragraph with a line break.</p>

HTML Attributes • All HTML elements can have attributes • Attributes provide additional information about an element • Attributes are always specified in the start tag • Attributes usually come in name/value pairs like: name="value“ • <a href="https://www.w3schools.com">This is a link</a> • <img src="img_girl.jpg" width="500" height="600"> • <p style="color:red">This is a paragraph.</p> • <p title="I'm a tooltip"> This is a paragraph. </p> • <p title='John "ShotGun" Nelson'>

The HTML Style Attribute Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax: <tagname style="property:value;"> The property is a CSS property. The value is a CSS value.

Background Color The CSS background-color property defines the background color for an HTML element. This example sets the background color for a page to powderblue: Example <body style="background-color:powderblue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>

Text Color The CSS color property defines the text color for an HTML element: Example <h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>

Text Size The CSS font-size property defines the text size for an HTML element: Example <h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p>

Text Alignment The CSS text-align property defines the horizontal text alignment for an HTML element: Example <h1 style="text-align:center;"> Centered Heading</h1> <p style="text-align:center;"> Centered paragraph.</p>

In the previous chapter, you learned about the HTML style attribute. HTML also defines special elements for defining text with a special meaning. HTML uses elements like <b> and <i> for formatting output, like bold or italic text. Formatting elements were designed to display special types of text: •<b> - Bold text •<strong> - Important text •<i> - Italic text •<em> - Emphasized text •<mark> - Marked text •<small> - Small text •<del> - Deleted text •<ins> - Inserted text •<sub> - Subscript text •<sup> - Superscript text

Quotes, Abbr and Address • <p>Here is a quote from WWF's website:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote> • Abbreviation • <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> • Address • <address> Written by John Doe.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>

Background / Foreground Color •Example •<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p> •Text Color • <h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border Color • You can set the color of borders: • Hello World • Hello World • Hello World • Example • <h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>

HyperLinks • HTML links are hyperlinks. • You can click on a link and jump to another document. • When you move the mouse over a link, the mouse arrow will turn into a little hand. • Note: A link does not have to be text. It can be an image or any other HTML element. • <a href="url">link text</a> • <a href="html_images.asp">HTML Images</a>

Styling HTML with CSS CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. CSS can be added to HTML elements in 3 ways: •Inline - by using the style attribute in HTML elements •Internal - by using a <style> element in the <head> section •External - by using an external CSS file

Inline CSS An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element. This example sets the text color of the <h1> element to blue: Example <h1 style="color:blue;">This is a Blue Heading</h1>

Internal CSS An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element: Example <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

External CSSAn external style sheet is used to define the style for many HTML pages. With an external style sheet, you can change the look of an entire web site, by changing one file! To use an external style sheet, add a link to it in the <head> section of the HTML page: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>

StyleSheet Attributes •Use the HTML style attribute for inline styling •Use the HTML <style> element to define internal CSS •Use the HTML <link> element to refer to an external CSS file •Use the HTML <head> element to store <style> and <link> elements •Use the CSS color property for text colors •Use the CSS font-family property for text fonts •Use the CSS font-size property for text sizes •Use the CSS border property for borders •Use the CSS padding property for space inside the border •Use the CSS margin property for space outside the border

• <style> a:link { color: green; background-color: transparent; text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } Style for Hyperlink

HTML Links - The target Attribute The target attribute specifies where to open the linked document. The target attribute can have one of the following values: •_blank - Opens the linked document in a new window or tab •_self - Opens the linked document in the same window/tab as it was clicked (this is default) •_parent - Opens the linked document in the parent frame •_top - Opens the linked document in the full body of the window •framename - Opens the linked document in a named frame <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

HTML Images • <!DOCTYPE html> <html> <head> <style> img { width: 100%; } </style> </head> <body> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> </body> </html> The width, height, and style attributes are valid in HTML. However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:

Image Maps The <map> tag defines an image-map. An image-map is an image with clickable areas. In the image below, click on the computer, the phone, or the cup of coffee: <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"> </map>

Section 02 Tables (HTML) JavaScript

Table Company Contact Country Alfreds Futterkiste Maria Anders Germany Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading Helen Bennett UK Laughing Bacchus Winecellars Yoshi Tannamuri Canada Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Example • <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>

HTML Table - Adding a Border If you do not specify a border for the table, it will be displayed without borders. A border is set using the CSS border property: Example table, th, td { border: 1px solid black; } table, th, td { border: 1px solid black; border-collapse: collapse; }

HTML Table - Left-align Headings By default, table headings are bold and centered. To left-align the table headings, use the CSS text-align prop Example th { text-align: left; }

HTML Table - Cells that Span Many Columns To make a cell span more than one column, use the colspan attribute: Example <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table>

HTML Table - Cells that Span Many Rows To make a cell span more than one row, use the rowspan attribute: Example <table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table>

HTML Table - Adding a Caption To add a caption to a table, use the <caption> tag: Example <table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr>

javaScript • Why Study JavaScript? • JavaScript is one of the 3 languages all web developers must learn: • 1. HTML to define the content of web pages • 2. CSS to specify the layout of web pages • 3. JavaScript to program the behavior of web pages

First JavaScript • <!DOCTYPE html> • <html> • <body> • <h2>JavaScript in Body</h2> • <p id="demo"></p> • <script> • document.getElementById("demo").innerHTML = "My First JavaScript"; • </script> • </body>

JavaScript Function • <!DOCTYPE html> <html><head> <script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } </script> </head> <body> • <h1>A Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> • </body> </html>

JavaScript Can Change HTML Content One of many JavaScript HTML methods is getElementById(). This example uses the method to "find" an HTML element (with id="demo") and changes the element content (innerHTML) to "Hello JavaScript": <!DOCTYPE html> <html> <body> <h2>What Can JavaScript Do?</h2> <p id="demo">JavaScript can change HTML content.</p> <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button> </body> </html>

Light bulb • <!DOCTYPE html> • <html> • <body> • <h2>What Can JavaScript Do?</h2> • <p>JavaScript can change HTML attribute values.</p> • <p>In this case JavaScript changes the value of the src (source) attribute of an image.</p> • <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button> • <img id="myImage" src="pic_bulboff.gif" style="width:100px"> • <button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button> • </body> • </html>

Changing html cstyle • <!DOCTYPE html> • <html> • <body> • <h2>What Can JavaScript Do?</h2> • <p id="demo">JavaScript can change the style of an HTML element.</p> • <button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button> • </body> • </html>

Hiding html content • <!DOCTYPE html> • <html> • <body> • <h2>What Can JavaScript Do?</h2> • <p id="demo">JavaScript can hide HTML elements.</p> • <button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button> • </body> • </html>

External Call of JavaScript External scripts are practical when the same code is used in many different web pages. JavaScript files have the file extension .js. To use an external script, put the name of the script file in the src (source) attribute of a <script> tag: Example <script src="myScript.js"></script> Try it Yourself » You can place an external script reference in <head> or <body> as you like. The script will behave as if it was located exactly where the <script> tag is located. External scripts cannot contain <script> tags.

CODE • <!DOCTYPE html> • <html> • <body> • <h2>External JavaScript</h2> • <p id="demo">A Paragraph.</p> • <button type="button" onclick="myFunction()">Try it</button> • <p>(myFunction is stored in an external file called "myScript.js")</p> • <script src="Script1.js"></script> • </body> // JavaScript source code function myFunction() { document.getElementById("demo").inner HTML = "I am called from external file"; }

External JavaScript Advantages • Placing scripts in external files has some advantages: • It separates HTML and code • It makes HTML and JavaScript easier to read and maintain • Cached JavaScript files can speed up page loads • To add several script files to one page - use several script tags:

JavaScript Display Possibilities JavaScript can "display" data in different ways: •Writing into an HTML element, using innerHTML. •Writing into the HTML output using document.write() •Writing into an alert box, using window.alert(). •Writing into the browser console, using console.log(

1. Using innerHTML To access an HTML element, JavaScript can use the document.getElementById(id) method. The id attribute defines the HTML element. The innerHTML property defines the HTML content: Example <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My First Paragraph</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 5 + 6; </script> </body> </html>

2. Document write • <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> document.write(5 + 6); </script> </body> </html>

3. window.alert() • <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> window.alert(5 + 6); </script> </body> </html>

Semicolons ; • Semicolons separate JavaScript statements. • Add a semicolon at the end of each executable statement: • var a, b, c; // Declare 3 variables a = 5; // Assign the value 5 to a b = 6; // Assign the value 6 to b c = a + b; // Assign the sum of a and b to c • When separated by semicolons, multiple statements on one line are allowed: • a = 5; b = 6; c = a + b;

• <!DOCTYPE html> • <html> • <body> • <h2>JavaScript Statements</h2> • <p>Multiple statements on one line is allowed.</p> • <p id="demo1"></p> • <script> • var a, b, c; • a = 5; b = 6; c = a + b; • document.getElementById("demo1").innerHTML = c; • </script></body> • </html>

Code blocks • <!DOCTYPE html> • <html> • <body> • <h2>JavaScript Statements</h2> • <p>JavaScript code blocks are written between { and }</p> • <button type="button" onclick="myFunction()">Click Me!</button> • <p id="demo1"></p> <p id="demo2"></p> • <script> • function myFunction() { • document.getElementById("demo1").innerHTML = "Hello COMSATS!"; • document.getElementById("demo2").innerHTML = “How are all?"; • } • </script></body> • </html>

Keyword Description break Terminates a switch or a loop continue Jumps out of a loop and starts at the top debugger Stops the execution of JavaScript, and calls (if available) the debugging function do ... while Executes a block of statements, and repeats the block, while a condition is true for Marks a block of statements to be executed, as long as a condition is true function Declares a function if ... else Marks a block of statements to be executed, depending on a condition return Exits a function switch Marks a block of statements to be executed, depending on different cases try ... catch Implements error handling to a block of statements var Declares a variable

JS Strings • <html> <body> • <h2>JavaScript Strings</h2> • <p>You can use quotes inside a string, as long as they don't match the quotes surrounding the string.</p> • <p id="demo"></p> • <script> • var answer1 = "It's alright"; • var answer2 = "He is called 'Johnny'"; • var answer3 = 'He is called "Johnny"'; • document.getElementById("demo").innerHTML = • answer1 + "<br>" + answer2 + "<br>" + answer3; • document.getElementById("demo").innerHTML = "<br>" + "String length is " + answer3.length; • </script></body> </html>

Special Characters The string will be chopped to "We are the so-called ". The solution to avoid this problem, is to use the backslash escape character. The backslash () escape character turns special characters into string characters: Code Result Description ' ' Single quote " " Double quote Backslash <body> <h2>JavaScript Strings</h2> <p>The escape sequence " inserts a double quote in a string.</p> <p id="demo"></p> <script> var x = "We are the so-called "Vikings" from the north."; document.getElementById("demo").innerHTML = x; </script> </body>

Strings Can be Objects Normally, JavaScript strings are primitive values, created from literals: var firstName = “xyz"; But strings can also be defined as objects with the keyword new: var firstName = new String(“xyz"); Example var x = “xyz"; var y = new String(“xyz"); // typeof x ?? // typeof y ??

String Methods Finding a String in a String The indexOf() method returns the index of (the position of) the first occurrence of a specified text in a string: Example var str = "Please locate where 'locate' occurs!"; var pos = str.indexOf("locate"); Searching for a String in a String The search() method searches a string for a specified value and returns the position of the match: Example var str = "Please locate where 'locate' occurs!"; var pos = str.search("locate"); Extracting String Parts There are 3 methods for extracting a part of a string: •slice(start, end) •substring(start, end) •substr(start, length) •Replace (“old text”,”new text”)

String Methods • String.toUpperCase() and String.toLowerCase() • String.Concat() or use + Operator • String.trim() • String.charAt(SomeIndex) • String.charCodeAt(someindex) returns ASCII Code • String[index] or String[index] = ‘x’ • Split () • var txt = "a,b,c,d,e"; // String txt.split(","); // Split on commas txt.split(" "); // Split on spaces txt.split("|");

JS Arrays <!DOCTYPE html> <html> <body> <h2>JavaScript Arrays</h2> <p>JavaScript array elements are accessed using numeric indexes (starting from 0).</p> <p id="demo"></p> <script> var cars = ["Saab", "Volvo", "BMW"]; cars[0] = "Opel"; document.getElementById("demo").innerHTML = cars; </script> </body> </html>

Array Elements Can Be Objects • JavaScript variables can be objects. Arrays are special kinds of objects. • Because of this, you can have variables of different types in the same Array. • You can have objects in an Array. You can have functions in an Array. You can have arrays in an Array: • myArray[0] = Date.now; myArray[1] = myFunction; myArray[2] = myCars; Array Properties and Methods The real strength of JavaScript arrays are the built-in array properties and methods: Examples var x = cars.length; // The length property returns the number of elements var y = cars.sort(); // The sort() method sorts arrays

Looping through Arrays • <body> • <h2>JavaScript Arrays</h2> • <p>The best way to loop through an array is using a standard for loop:</p> • <p id="demo"></p> • <script> • var fruits, text, fLen, i; • fruits = ["Banana", "Orange", "Apple", "Mango"]; • fruits.push("Lemon"); fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits • fLen = fruits.length; • text = "<ul>"; • for (i = 0; i < fLen; i++) { • text += "<li>" + fruits[i] + "</li>"; } • text += "</ul>"; • document.getElementById("demo").innerHTML = text; • </script> • </body>

Sorting Arrays • <body> • <h2>JavaScript Array Sort</h2> • <p>Click the buttons to sort the array alphabetically or numerically.</p> • <button onclick="myFunction1()">Sort Alphabetically</button> • <button onclick="myFunction2()">Sort Numerically</button> • <p id="demo"></p> • <script> • var points = [40, 100, 1, 5, 25, 10]; • document.getElementById("demo").innerHTML = points; • function myFunction1() { • points.sort(); • document.getElementById("demo").innerHTML = points; } • function myFunction2() { • points.sort(function (a, b) { return a - b }); • document.getElementById("demo").innerHTML = points; • } </script> </body>

JS Dates Date objects are created with the new Date() constructor. There are 4 ways to create a new date object: new Date() new Date(year, month, day, hours, minutes, seconds, mill new Date(milliseconds) new Date(date string)

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) Date.now() Get the time. ECMAScript 5.

Date methods <!DOCTYPE html> <html> <body> <h2>JavaScript getMonth()</h2> <p>The getMonth() method returns the month as a number:</p> <p>You can use an array to display the name of the month:</p> <p id="demo"></p> <script> var d = new Date(); var months = ["January","February","March","April","May","June","July","August","September","October","Novembe r","December"]; document.getElementById("demo").innerHTML = months[d.getMonth()];</script> </body> </html>

JavaScript Form Validation • HTML form validation can be done by JavaScript. • If a form field (fname) is empty, this function alerts a message, and returns false, to prevent the form from being submitted: • JavaScript Example • function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == "") { alert("Name must be filled out"); return false; } }

Number Validation • <script> • function myFunction() { • var x, text; • // Get the value of the input field with id="numb" • x = document.getElementById("numb").value; • // If x is Not a Number or less than one or greater than 10 • if (isNaN(x) || x < 1 || x > 10) { • text = "Input not valid"; • } else { • text = "Input OK"; • } document.getElementById("demo").innerHTML = text; • } • </script>

Constraint Validation HTML Input Attributes Attribute Description disabled Specifies that the input element should be disabled max Specifies the maximum value of an input element min Specifies the minimum value of an input element pattern Specifies the value pattern of an input element required Specifies that the input field requires an element type Specifies the type of an input element

Constraint Validation DOM • If an input field contains invalid data, display a message: • The checkValidity() Method • <input id="id1" type="number" min="100" max="300" required> <button onclick="myFunction()">OK</button> <p id="demo"></p> <script> function myFunction() { var inpObj = document.getElementById("id1"); if (!inpObj.checkValidity()) { document.getElementById("demo").innerHTML = inpObj.validationMessage; } } </script> Property Description checkValidity() Returns true if an input element contains valid data. setCustomValidity() Sets the validationMessage property of an input element.

JavaScript Events There are a lot of different types of events that can occur, for example: • The user clicking the mouse over a certain element or hovering the cursor over a certain element. • The user pressing a key on the keyboard. • The user resizing or closing the browser window. • A web page finishing loading. • A form being submitted. • A video being played, or paused, or finishing play. • An error occurring. You can gather from this (and from glancing at the MDN Event reference) that there are a lot of events that can be responded to. Each available event has an event handler, which is a block of code (usually a JavaScript function that you as a programmer create) that will be run when the event fires.

JavaScript 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 The user pushes a keyboard key onload The browser has finished loading the page

What can JavaScript Do? Event handlers can be used to handle, and verify, user input, user actions, and browser actions: • Things that should be done every time a page loads • Things that should be done when the page is closed • Action that should be performed when a user clicks a button • Content that should be verified when a user inputs data • And more ... Many different methods can be used to let JavaScript work with events: • HTML event attributes can execute JavaScript code directly • HTML event attributes can call JavaScript functions • You can assign your own event handler functions to HTML elements • You can prevent events from being sent or being handled • And more ...

Button Event <html> <head><title> JavaScript Button Event Query Selector </title></head> <body> <button>Change color</button> <script> const btn = document.querySelector('button'); function random(number) { return Math.floor(Math.random() * (number+1)); } btn.onclick = function() { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; } </script> </body> </html>

Events in JavaScript • Node.js is a very popular JavaScript runtime that enables developers to use JavaScript to build network and server-side applications. • The Node.js event model relies on listeners to listen for events and emitters to emit events periodically — it doesn't sound that different, but the code is quite different, making use of functions like on() to register an event listener, and once() to register an event listener that unregisters after it has run once. The HTTP connect event docs provide a good example of use. • As another example, you can also use JavaScript to build cross-browser add-ons — browser functionality enhancements — • using a technology called WebExtensions. The event model is similar to the web events model, but a bit different — event listeners properties are camel-cased (such as onMessage rather than onmessage), and need to be combined with the addListener function. See the runtime.onMessage page for an example.

How to Program an Event in Jscript const btn = document.querySelector('button'); btn.onclick = function() { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; } 1. Use OnClick Property The onclick property is the event handler property being used in this situation. It is essentially a property like any other available on the button (e.g. btn.textContent, or btn.style), but it is a special type — when you set it to be equal to some code, that code is run when the event fires on the button. const btn = document.querySelector('button'); function bgChange() { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; } btn.onclick = bgChange; 2. Use Event Handler using Named Function

Practice: Other Event Handlers make a local copy of Button_Event_Query_Selector, and open it in your browser. Now try changing btn.onclick to the following different values in turn, and observing the results in the example: •btn.onfocus and btn.onblur — The color changes when the button is focused and unfocused; try pressing tab to focus on the button and press tab again to focus away from the button. These are often used to display information about how to fill in form fields when they are focused, or display an error message if a form field has just been filled in with an incorrect value. •btn.ondblclick — The color changes only when the button is double-clicked. •window.onkeypress, window.onkeydown, window.onkeyup — The color changes when a key is pressed on the keyboard. The keypress event refers to a general press (button down and then up), while keydown and keyup refer to just the key down and key up parts of the keystroke, respectively. Note that it doesn't work if you try to register this event handler on the button itself — we've had to register it on the window object, which represents the entire browser window. •btn.onmouseover and btn.onmouseout — The color changes when the mouse pointer is moved so it begins hovering over the button, or when pointer stops hovering over the button and moves off of it, respectively.

+ Note: Some events are very general and available nearly anywhere (for example an onclick handler can be registered on nearly any element), whereas some are more specific and only useful in certain situations (for example it makes sense to use onplay only on specific elements, such as <video>). <button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>

Inline Events<html> <head> <meta charset="utf-8"> <title>Random color example — event handler attribute</title> <style> button { margin: 10px }; </style> </head> <body> <button onclick="bgChange()">Change color</button> <script> function random(number) { return Math.floor(Math.random()*number); } function bgChange() { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; } </script> </body> </html>

Event Coding Guide You can find HTML attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice. It might seem easy to use an event handler attribute if you are just doing something really quick, but they very quickly become unmanageable and inefficient. For a start, it is not a good idea to mix up your HTML and your JavaScript, as it becomes hard to parse — keeping your JavaScript all in one place is better; if it is in a separate file you can apply it to multiple HTML documents. One button is OK, but what if you had 100 buttons? You'd have to add 100 attributes to the file; it would very quickly turn into a maintenance nightmare. With JavaScript, you could easily add an event handler function to all the buttons on the page no matter how many there were, using something like this

The newest type of event mechanism is defined in the Document Object Model (DOM) Level 2 Events Specification, which provides browsers with a new function — addEventListener(). This functions in a similar way to the event handler properties, but the syntax is obviously different. addEventListener() and removeEventListener() const btn = document.querySelector('button'); function bgChange() { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; } btn.addEventListener('click', bgChange); Add_Event_Lister_HTML Inside the addEventListener() function, we specify two parameters — the name of the event we want to register this handler for, and the code that comprises the handler function we want to run in response to it. Note that it is perfectly appropriate to put all the code inside the addEventListener() btn.removeEventListener('click', bgChange);

EventListener Advantages • for larger, more complex programs it can improve efficiency to clean up old unused event handlers. • this allows you to have the same button performing different actions in different circumstances — all you have to do is add or remove event handlers as appropriate. • Second, you can also register multiple handlers for the same listener. The following two handlers wouldn't both be applied: myElement.onclick = functionA; myElement.onclick = functionB; The second line overwrites the value of onclick set by the first line. This would work, however: myElement.addEventListener('click', functionA); myElement.addEventListener('click', functionB); using DOM Listeners both functions will work on click

Event Objects • Sometimes inside an event handler function, you might see a parameter specified with a name such as event, evt, or simply e. This is called the event object, and it is automatically passed to event handlers to provide extra features and information. For example, let's rewrite our random color example again slightly: function bgChange(e) { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; e.target.style.backgroundColor = rndCol; console.log(e); } btn.addEventListener('click', bgChange); an event object, e, in the function, and in the function setting a background color style on e.target — which is the button itself. The target property of the event object is always a reference to the element that the event has just occurred upon. So in this example, we are setting a random background color on the button, not the page. Example

JavaScript Examples • JavaScript PopoUP • JavaScript Matrix • JavaScript Form

JavaScript vs React.JS • Web apps are becoming increasingly complex and dynamic. In response, new tools and libraries like React have been created to speed up the process. • But how is developing a web app with React different than developing an app with just plain JavaScript?

JavaScript • To set some boundaries, let’s first define what we mean by "plain" JavaScript (also called "vanilla" JavaScript). • React is a library that defines the way apps are written. It does this by setting very clear rules about how data can flow through the app, and how the UI will adapt as a result of that changing data. There are other libraries that set similar boundaries, such as Angular and Vue. • Plain JavaScript (that is, JavaScript written without libraries) on the other hand, doesn’t set any rules about how data can be defined, or how the UI can be changed. That makes apps written without these libraries more freeform and customizable. But going this route can also lead to problems down the road

The major differences Since there are so many ways to write vanilla JS, it can be difficult to pin down a list of differences that applies to 100% of apps. But here we’ll define some key differences that apply to many plain JS apps that are written without a framework. • How the user interface is first created • How functionality is split up across the app • How data is stored on the browser • How the UI is updated

In plain JS, the initial user interface is generally created in HTML on the server. Meaning, HTML is dynamically created on the server, and might look something like this: <div> <h1>Grocery List</h1> <ul> <li>Milk</li> <li>Bread</li> <li>Eggs</li> </ul> </div> That gets sent to the web browser and displayed—no JavaScript needed yet! In contrast, a React app will start with a fixed HTML file that looks like this: <div id=“root”></div> How the user interface is first created

UI in REACT Instead of defining the initial UI on the server, the UI gets defined on the browser. So the app starts with a blank container (a div in this case), and then the UI gets loaded into that container. The UI is defined by a component that returns JSX. JSX looks like HTML, but is actually JavaScript - and might look like this: function GroceryList(props) { return ( <div> <h1>Grocery List</h1> <ul> <li>Milk</li> <li>Bread</li> <li>Eggs</li> </ul> </div> ) };

• The UI is defined by a component that returns JSX. JSX looks like HTML, but is actually JavaScript - and might look like this: function GroceryList(props) { return ( <div> <h1>Grocery List</h1> <ul> <li>Milk</li> <li>Bread</li> <li>Eggs</li> </ul> </div> ) };

Java script and html new

More Related Content

What's hot

Similar to Java script and html new

Recently uploaded

Java script and html new