Download presentation
Presentation is loading. Please wait.
1
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
2
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
3
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
4
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:
5
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
6
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
7
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.
8
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">
9
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 :
10
DHTML Three Important Concepts involved in DHTML JavaScript Alone
JavaScript and the HTML DOM JavaScript and HTML Events JavaScript and CSS
11
JavaScript Alone document.write() <html> <body>
<script type="text/javascript"> document.write(Date()); </script> </body> </html>
12
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
13
JavaScript and HTML Events
To execute code when a user clicks on an element, use the following event attribute: onclick=JavaScript
14
JavaScript and CSS To change the style of an HTML element use: document.getElementById(id).style.property=new style
15
Thank You,
Similar presentations
