Introduction to java_script

JavaScript
www.PracticalCoding.inwww.PracticalCoding.in

A little Background
➢ JavaScript isn’t JAVA
➢ Developed by Brendan Eich at Netscape
➢ Was called LiveScript
➢ Not a compiled language
➢ Case sensitive :
function oneDrive() is different from function OneDrive()

What’s in a JavaScript Program?
Statements formed from tokens, operators, and identifiers placed
together in an order that is meaningful to a JavaScript interpreter,
which is contained in most web browsers.

Where should I write it ?
➢ <head>...</head>
➢ <body>...</body>
➢ External file included in the HTML file
<html>
<head>
<title>A Web Page Title</title>
<script type="text/javascript">
// JavaScript Goes Here
</script>
<script type="text/javascript" src="myscript.js">
</head>
<body>
// JavaScript can go here too
</script>
</body>
</html>

Comments
➢/* This is a multiline
comment */
➢// This is a single line comment

Keywords

Data types
➢Numbers
➢Strings
➢Booleans
➢Null (Empty is not Null)
➢undefined
➢Objects

Math object
➢Math.Random()
➢Math.abs(x)
➢Math.pow(x,y)
➢Math.round(x)

Strings
Open firebug, type a string and explore the
methods available

Date object
Open firebug and explore

For loops
for (var i = 0; i < 1000; i++) {
//do something
)

Operators
➢ Additive operators ( +/- )
➢ Multiplicative operators ( *, /)
➢ Bitwise operators (&,|,^,!,<<,>>,>>>)
➢ Equality operators (==,!=,===,!==)
➢ Relational operators (<,>,>=,<=,in, instanceof)
➢ Unary operators(delete,void,typeof,++,--,+,-,!,~)
➢ Assignment operators

Controlling flow with conditionals and loops
➢ if else conditional statement and ternary operations
➢ switch statement
➢ while loop and a do...while loop
➢ for loops (general, for..each and for..in)

Functions
function myFunction() {
var firstArg = arguments[0];
var secondArg = arguments[1];
alert("firstArg is: " + firstArg);
alert("secondArg is: " + secondArg);
}
myFunction("hello","world");
</script>

Function literal
JavaScript does not require functions to be
defined formally.

Objects
Properties
Methods
and whats this ?

Arrays
➢ Creation
➢ Methods
➢ Copying arrays
➢ push() and pop()
➢ Iterating through arrays using for()
Explore arrays in Firebug !

Timers
➢ setInterval()
➢ clearInterval()
➢ setTimeout()
➢ clearTimeout()

Window object
➢ document
➢ frames
➢ history
➢ location
➢ navigator
➢ screen
➢ self/window/parent

Observing the built in properties and methods
var body = document.getElementsByTagName("body")[0];
for (var prop in navigator) {
var elem = document.createElement("p");
var text = document.createTextNode(prop + ": " +
navigator[prop]);
elem.appendChild(text);
body.appendChild(elem);
}
Replace the ‘navigator’ with other objects to check.

Tree structure of DOM

Retrieving Elements
➢getElementById()
➢innerHTML
➢getElementsByTagName()

HTML Collections
➢document.anchors (requires ‘name’)
➢document.forms
➢document.images
➢document.links(requires ‘href’)

Siblings and Children
➢ .childNodes[0]
➢ nextSibling
➢ previousSibling
➢ firstChild
➢ lastChild

Events
onblur() The element lost focus (that is, it is not selected by the user).
onchange() The element has either changed (for example, a user typed into a text field) or lost focus.
onclick() The mouse clicked an element.
ondblclick() The mouse double-clicked an element.
onfocus() The element got focus.
onkeydown() A keyboard key is pressed (as opposed to released) while the element has focus.
onkeypress() A keyboard key is pressed while the element has focus.
onkeyup() A keyboard key is released while the element has focus.
onload() The element is loaded (a document, a frameset, or an image).
onmousedown() A mouse button is pressed.
onmousemove() The mouse is moved.
onmouseout() The mouse is moved off of or away from an element.
onmouseover() The mouse is over an element.
onmouseup() A mouse button is released.
onreset() The form element is reset, such as when a user presses a form reset button.
onresize() The window’s size is changed.
onselect() The text of a form element is selected.
onsubmit() The form is submitted.
onunload() The document or frameset is unloaded.

Learn More
@
www.PracticalCoding.in

Introduction to java_script

More Related Content

What's hot

Viewers also liked

Similar to Introduction to java_script

Recently uploaded

Introduction to java_script