javascript introduction

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


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:


Creating JavaScript Objects

• Methods defined internally function Apple (type) {

this.type = type; this.color = "red"; this.getInfo = function() {

return this.color + ' ' + this.type + ' apple'; };

}



• Methods added to the prototypefunction Apple (type) {

this.type = type; this.color = "red";

} Apple.prototype.getInfo = function() {

return this.color + ' ' + this.type + ' apple'; };



• 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());


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();


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());


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'; };

}


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());


• JavaScript Functions• JavaScript Numbers• JavaScript Strings• JavaScript Dates• JavaScript Arrays• JavaScript Booleans• JavaScript Maths• JavaScript Operators• JavaScript If...Else Statements


• JavaScript Switch Statement• JavaScript For Loop• JavaScript While Loop• JavaScript Break and Continue• JavaScript Errors - Throw and Try to Catch• JavaScript Form Validation


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


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


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.


• 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


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>


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 />");}


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



• 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


• 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://)


• 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.


• JavaScript Popup Boxes– Alert Box– Confirm Box– Prompt Box


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


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=/";


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;


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.


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

javascript introduction

Technology