Build in Objects 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
JavaScript Primitives. A primitive value is a value that has no properties or methods. A primitive data type is data that has a primitive value. JavaScript defines 5 types of primitive data types: -> string -> number -> boolean -> null -> undefined
Value Type Comment "Hello" string "Hello" is always "Hello" 3.14 number 3.14 is always 3.14 true boolean true is always true false false is always false null null (object) null is always null undefined undefined is always undefined
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:
Example Programe JavaScript variables can contain single values: <!DOCTYPE html> <html> <body> <p>Creating a JavaScript Variable.</p> <p id="demo"></p> <script> var person = "John Doe"; document.getElementById("demo").innerHTML = person; </script> </body> </html> OUTPUT : Creating a JavaScript Variable. John Doe
Objects are variables too. But objects can contain many values 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). <!DOCTYPE html> <html> <body> <p>Creating a JavaScript Object.</p> <p id="demo"></p> <script> var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue" }; document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName; </script> </body> </html> Output : Creating a JavaScript Object. John Doe 50
Event Handler 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 Often, when events happen, you may want to do something.
HTML allows event handler attributes, with JavaScript code, to be added to HTML elements. With single quotes: <some-HTML-element some-event='some JavaScript'> With double quotes: <some-HTML-element some-event="some JavaScript">
In the following example, an onclick attribute (with code), is added to a button element: <!DOCTYPE html> <html> <body> <button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button> <p id="demo"></p> </body> </html> Output :
DHTML Three Important Concepts involved in DHTML JavaScript Alone JavaScript and the HTML DOM JavaScript and HTML Events JavaScript and CSS
JavaScript Alone document.write() <html> <body> <script type="text/javascript"> document.write(Date()); </script> </body> </html>
JavaScript and the HTML DOM With HTML 4, 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 To execute code when a user clicks on an element, use the following event attribute: onclick=JavaScript
JavaScript and CSS To change the style of an HTML element use: document.getElementById(id).style.property=new style
Thank You,