JavaScript Introduction
Download as PPTX, PDF0 likes1,031 views
The document provides a comprehensive introduction to JavaScript, covering its popularity, variables, objects, functions, and the HTML DOM. It explains how to create and manipulate objects, use object literals, and implement methods for dynamic web page interactions. Additionally, it touches on cookies, regular expressions, and AJAX for asynchronous data handling.
![HTML DOM Node List Length
• The length property defines the number of nodes
in a node-list.
• You can loop through a node-list by using the
length property:
• x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City](https://image.slidesharecdn.com/20140326kietjavascript-140424221513-phpapp02/85/JavaScript-Introduction-18-320.jpg)
JavaScript Introduction
- 1. DESIGNVELOPER JavaScript Introduction • JavaScript is the most popular programming language in the world. • JavaScript is the language for the web Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 2. JavaScript Variables • Declaring: – var x=10 – var y • Global variable: Declaring : x=0; • Local variable Declaring : var x=0 Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 3. JavaScript Objects • Almost "everything" in JavaScript can be objects. Strings, Dates, Arrays, Functions.... • There are many different ways to create new JavaScript objects, and you can also add new properties and methods to already existing objects. • Example: Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 4. Creating JavaScript Objects • Methods defined internally function Apple (type) { this.type = type; this.color = "red"; this.getInfo = function() { return this.color + ' ' + this.type + ' apple'; }; } Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 5. Creating JavaScript Objects • Methods added to the prototype function Apple (type) { this.type = type; this.color = "red"; } Apple.prototype.getInfo = function() { return this.color + ' ' + this.type + ' apple'; }; Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 6. Creating JavaScript Objects • To instantiate an object using the Apple constructor function, set some properties and call methods you can do the following: • var apple = new Apple('macintosh'); apple.color = "reddish"; alert(apple.getInfo()); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 7. Using object literals • Literals are shorter way to define objects and arrays in JavaScript. To create an empty object using you can do: var o = {}; instead of the "normal" way: var o = new Object(); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 8. Using object literals • var apple = { type: "macintosh", color: "red", getInfo: function () { return this.color + ' ' + this.type + ' apple'; } } In this case you don't need to (and cannot) create an instance of the class, it already exists. So you simply start using this instance. apple.color = "reddish"; alert(apple.getInfo()); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 9. Singleton using a function • You can use a function to define a singleton object. Here's the syntax: var apple = new function() { this.type = "macintosh"; this.color = "red"; this.getInfo = function () { return this.color + ' ' + this.type + ' apple'; }; } Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 10. Singleton using a function • So you see that this is very similar to 1. discussed above, but the way to use the object is exactly like in 2. apple.color = "reddish"; alert(apple.getInfo()); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 11. • JavaScript Functions • JavaScript Numbers • JavaScript Strings • JavaScript Dates • JavaScript Arrays • JavaScript Booleans • JavaScript Maths • JavaScript Operators • JavaScript If...Else Statements Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 12. • JavaScript Switch Statement • JavaScript For Loop • JavaScript While Loop • JavaScript Break and Continue • JavaScript Errors - Throw and Try to Catch • JavaScript Form Validation Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 13. 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 Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 14. JavaScript - HTML DOM Methods • HTML DOM methods are actions you can perform (on HTML Elements) • HTML DOM properties are values (of HTML Elements) that you can set or change Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 15. JavaScript HTML DOM Document • In the HTML DOM object model, the document object represents your web page. • The document object is the owner of all other objects in your web page. Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 16. • JavaScript HTML DOM - Changing HTML • JavaScript HTML DOM - Changing CSS – <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; </script> <p>The paragraph above was changed by a script.</p> JavaScript HTML DOM Event • JavaScript HTML DOM Events Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 17. JavaScript HTML DOM Elements (Nodes) • To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element. • <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> Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 18. HTML DOM Node List Length • The length property defines the number of nodes in a node-list. • You can loop through a node-list by using the length property: • x=document.getElementsByTagName("p"); for (i=0;i<x.length;i++) { document.write(x[i].innerHTML); document.write("<br />"); } Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 19. The Browser Object Model Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 20. The Browser Object Model • The window object is supported by all browsers. It represent the browser's window. • For Internet Explorer, Chrome, Firefox, Opera, and Safari: – window.innerHeight - the inner height of the browser window – window.innerWidth - the inner width of the browser window • For Internet Explorer 8, 7, 6, 5: – document.documentElement.clientHeight – document.documentElement.clientWidth – or – document.body.clientHeight – document.body.clientWidth Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 21. The Browser Object Model • Some other methods: – window.open() - open a new window – window.close() - close the current window – window.moveTo() -move the current window – window.resizeTo() -resize the current window Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 22. • JavaScript Window Screen – screen.availWidth - available screen width – screen.availHeight - available screen height • JavaScript Window Location – location.hostname returns the domain name of the web host – location.pathname returns the path and filename of the current page – location.port returns the port of the web host (80 or 443) – location.protocol returns the web protocol used (http:// or https://) Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 23. • JavaScript Window History – history.back() - same as clicking back in the browser – history.forward() - same as clicking forward in the browser • JavaScript Window Navigator – The window.navigator object contains information about the visitor's browser. Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 24. • JavaScript Popup Boxes – Alert Box – Confirm Box – Prompt Box Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 25. JavaScript Timing Events • setInterval() - executes a function, over and over again, at specified time intervals • setTimeout() - executes a function, once, after waiting a specified number of milliseconds Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 26. JavaScript Cookies • Create a Cookie with JavaScript – document.cookie="username=John Doe"; • You can also add an expiry date (in UTC or GMT time). By default, the cookie is deleted when the browser is closed: – document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"; Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 27. JavaScript Cookies • Delete a Cookie with JavaScript – document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; • Read a Cookie with JavaScript – var x = document.cookie; document.cookie will return all cookies in one string much like: cookie1=value; cookie2=value; cookie3=value; Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 28. JavaScript RegExp Object • JavaScript RegExp Object • A regular expression is an object that describes a pattern of characters. • When you search in a text, you can use a pattern to describe what you are searching for. Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 29. Java Script Ajax • AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page. • How AJAX Works Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
- 30. Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City