JavaScript Introduction

876 views

Published on

Websites: https://www.designveloper.com
Visit our blog https://www.designveloper.com/blog
Like Facebook page https://www.facebook.com/designveloper/
Youtube: http://bit.ly/29PTtFS

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
876
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript Introduction

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 19. The Browser Object Model Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  20. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 30. Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

×