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
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
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
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
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
Creating JavaScript Objects
• Methods added to the prototypefunction 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
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
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
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
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
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
• 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
• 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
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
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
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
• 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
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
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
The Browser Object Model
Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
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
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
• 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
• 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
• 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
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
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
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
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
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
Top Related