Sunday 2 February 2014

Java Script Syllabus


JavaScript Essentials

JavaScript Essentials

Chapter 1 Introduction To Web Development


Literals:
·          White space
·          Line break up code
·          type of operators
·         special operators (delete operator, new operator, void operator)
1.      
·           If statement
·         If else progra
·         Switch case
(II)               Jump statements(break, continue)
(III)             LOOPING STATEMENTS
  ·          For –in loop
·         For loop
·         While loop
FUNCTIONS : Defn, Syntax, Example , output
·         factorial of a given number

·         Popup boxes
·         Confirm box

(I)                 USER DEFINED FUNCTIONS
(II)               PREDEFINED FUNCTIONS (DIALOGUE BOXES)
3.       * Objects(how create, syntax, various objects) (i)
(i)                  Predefined objects or Native objects :Defn (ii) syntax (iii) properties of that objects (iv) methods
4.       DOM (DATA OBJECT MODEL)
5.       *Events
6.       * Validations
DHTML




Chapter 2 Getting Started With JavaScript

1.      Number Object
2.     Boolean object
3.     String object
4.     Array object
5.     Regular Expression
6.     Math object
7.     Date Object

Chapter 4 How To Test And Debug A Javascript Application

Chapter 5 How To Work With Arrays

Chapter 6 How To Script The DOM With Javascript

jQuery Essentials

Chapter 7 Get Off To A Fast Start With jQuery

Chapter 8 How To Use Effects And Animations

Chapter 9 How To Use The DOM Manipulation And Traversal Methods

Chapter 10 How To Work With Forms And Data Validation Form Basics
Chapter 11 How To Create And Use Plugins
jQuery UI Essentials
Chapter 12 Get Off To A Fast Start With jQuery UI Themes and Widgets
Chapter 13 How To Use Jquery Ui Interactions And Effects


Chapter 4 How To Test And Debug A Javascript Application

Chapter 5 How To Work With Arrays

Chapter 6 How To Script The DOM With Javascript

jQuery Essentials

Chapter 7 Get Off To A Fast Start With jQuery

Chapter 8 How To Use Effects And Animations

Chapter 9 How To Use The DOM Manipulation And Traversal Methods

Chapter 10 How To Work With Forms And Data Validation Form Basics
Chapter 11 How To Create And Use Plugins
jQuery UI Essentials
Chapter 12 Get Off To A Fast Start With jQuery UI Themes and Widgets
Chapter 13 How To Use Jquery Ui Interactions And Effects


Math object

The math object provides you properties and methods for mathematical constants and functions.
Unlike the other global objects, Math is not a constructor. All properties and methods of Math are static and can be called by using Math as an object without creating it.
Thus, you refer to the constant pi as Math.PI and you call the sine function as Math.sin(x), where x is the method's argument.
Syntax:
Here is the simple syntax to call properties and methods of Math.
var pi_val = Math.PI;
var sine_val = Math.sin(30);
Math Properties:
Here is a list of each property and their description.
Property
Description
E
Euler's constant and the base of natural logarithms, approximately 2.718.
Natural logarithm of 2, approximately 0.693.
Natural logarithm of 10, approximately 2.302.
Base 2 logarithm of E, approximately 1.442.
Base 10 logarithm of E, approximately 0.434.
Ratio of the circumference of a circle to its diameter, approximately 3.14159.
Square root of 1/2; equivalently, 1 over the square root of 2, approximately 0.707.
Square root of 2, approximately 1.414.
Math Methods
Here is a list of each method and its description.
Method
Description
Returns the absolute value of a number.
Returns the arccosine (in radians) of a number.
Returns the arcsine (in radians) of a number.
Returns the arctangent (in radians) of a number.
Returns the arctangent of the quotient of its arguments.
Returns the smallest integer greater than or equal to a number.
Returns the cosine of a number.
Returns EN, where N is the argument, and E is Euler's constant, the base of the natural logarithm.
Returns the largest integer less than or equal to a number.
Returns the natural logarithm (base E) of a number.
Returns the largest of zero or more numbers.
Returns the smallest of zero or more numbers.
Returns base to the exponent power, that is, base exponent.
Returns a pseudo-random number between 0 and 1.
Returns the value of a number rounded to the nearest integer.
Returns the sine of a number.
Returns the square root of a number.
Returns the tangent of a number.
Returns the string "Math".


<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<script type="text/javascript">
 document.write(Math.max(6,8)+"<br/>");
 document.write(Math.min(6,8)+"<br/>");
 document.write("roound()"+Math.round(8.8)+"<br/>");
 document.write("floor()"+Math.floor(8.8)+"<br/>");
 document.write("ceil()"+Math.ceil(8.8)+"<br/>");
 document.write("random()"+Math.random()+"<br/>");
 document.write("sqrt()"+Math.sqrt(16)+"<br/>");
 document.write("PI"+Math.PI+"<br/>");  
 </script>
</body>
</html>



Date object

Once a Date object is created, a number of methods allow you to operate on it. Most methods simply allow you to get and set the year, month, day, hour, minute, second, and millisecond fields of the object, using either local time or UTC (universal, or GMT) time.
The ECMAScript standard requires the Date object to be able to represent any date and time, to millisecond precision, within 100 million days before or after 1/1/1970. This is a range of plus or minus 273,785 years, so the JavaScript is able to represent date and time till year 275755.
Syntax:
Here are different variant of Date() constructor:
new Date( )
new Date(milliseconds)
new Date(datestring)
new Date(year,month,date[,hour,minute,second,millisecond ])
Note: Paramters in the brackets are always optional
Here is the description of the parameters:
  • No Argument: With no arguments, the Date( ) constructor creates a Date object set to the current date and time.
  • milliseconds: When one numeric argument is passed, it is taken as the internal numeric representation of the date in milliseconds, as returned by the getTime( ) method. For example, passing the argument 5000 creates a date that represents five seconds past midnight on 1/1/70.
  • datestring:When one string argument is passed, it is a string representation of a date, in the format accepted by the Date.parse( ) method.
  • 7 agruments: To use the last form of constructor given above, Here is the description of each argument:
1.     year: Integer value representing the year. For compatibility (in order to avoid the Y2K problem), you should always specify the year in full; use 1998, rather than 98.
2.     month: Integer value representing the month, beginning with 0 for January to 11 for December.
3.     date: Integer value representing the day of the month.
4.     hour: Integer value representing the hour of the day (24-hour scale).
5.     minute: Integer value representing the minute segment of a time reading.
6.     second: Integer value representing the second segment of a time reading.
7.     millisecond: Integer value representing the millisecond segment of a time reading.
Date Properties:
Here is a list of each property and their description.
Property
Description
Specifies the function that creates an object's prototype.
The prototype property allows you to add properties and methods to an object.
Date Methods:
a) getDate() :- Returns present Date.
Ex : var d=new Date();
d.getDate();
b) getDay() :- Returns week day.
Ex : d.getDay();
c) getMonth() :- Returns month.
Ex : d.getMonth();
d) getFullYear() :- Returns year.
Ex : d.getFullYear();
e) getTime() :- Returns Time.
Ex : d.getTime();
f) getHours() :- Returns time in hours.
Ex : d.getHours();
g) getMinutes() :- Returns time in minutes.
Ex : d.getMinutes();
h) getSeconds() :- Returns time in seconds.
Ex : d.getSeconds();
get() To get date and time.
set() To set date and time.
Ex : d.setDate();
Date Static Methods:
In addition to the many instance methods listed previously, the Date object also defines two static methods. These methods are invoked through the Date( ) constructor itself:
Method
Description
Parses a string representation of a date and time and returns the internal millisecond representation of that date.
Returns the millisecond representation of the specified UTC date and time.

How to use the Date() method to get today's date.
getFullYear()
Use getFullYear() to get the year.
getTime()
getTime() returns the number of milliseconds since 01.01.1970.
setFullYear()
How to use setFullYear() to set a specific date.
toUTCString()
How to use toUTCString() to convert today's date (according to UTC) to a string.
getDay()
Use getDay() and an array to write a weekday, and not just a number.
Display a clock
How to display a clock on your web page.

5. Date Object
Manipulates Date and Time.

Methods

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<script>
 var date=new Date();
 document.write("Date :"+date+"<br/>");
 document.write("Day: "+date.getDate()+"<br/>");
 document.write("Month :"+date.getMonth()+"<br/>");
 document.write("Year :"+date.getYear()+"<br/>");
 document.write("Hours :"+date.getHours()+"<br/>");
 document.write("Minutes :"+date.getMinutes()+"<br/>");
 document.write("Seconds :"+date.getSeconds()+"<br/>");
 </script>
 </body>
</html>

Ex2: digital clock

<!DOCTYPE html>
<html>
<head>
<script>
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>