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

JavaScript Variables
• Declaring:
– var x=10
– var y
• Global variable:
Declaring : x=0;
• Local variable
Declaring : var x=0
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:
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';
};
}
District, HCM City

• Methods added to the prototype
function Apple (type)
{
this.type = type;
this.color = "red";
}
Apple.prototype.getInfo = function() {
};
District, HCM City

• 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());
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();
District, HCM City

Using object literals
• var apple = {
type: "macintosh",
color: "red",
getInfo: function () {
}
}
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.
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 () {
};
}
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.
District, HCM City

• JavaScript Functions
• JavaScript Numbers
• JavaScript Strings
• JavaScript Dates
• JavaScript Arrays
• JavaScript Booleans
• JavaScript Maths
• JavaScript Operators
• JavaScript If...Else Statements
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
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
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
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.
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
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>
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 />");
}
District, HCM City

The Browser Object Model
District, HCM City

• 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
District, HCM City

• 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
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://)
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.
District, HCM City

• JavaScript Popup Boxes
– Alert Box
– Confirm Box
– Prompt Box
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
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=/";
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;
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.
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
District, HCM City

District, HCM City

JavaScript Introduction

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Viewers also liked

Viewers also liked (6)

Similar to JavaScript Introduction

Similar to JavaScript Introduction (20)

More from Designveloper

More from Designveloper (20)

Recently uploaded

Recently uploaded (20)

JavaScript Introduction