1. Javascript & JQuery JQuery UI Plug-ins and Objects

2. jQuery UI
jQuery UI is a a lightweight, "write less, do more", JavaScript library, focusing on user interface interactions
Widget based
Built on top of the jQuery JavaScript Library
can use to build highly interactive web applications

3. Using jQuery Ui To start using jQuery UI:
Download the jQuery UI library from jQuery.com
Include jQuery UI from a CDN, like Google
Need to include these three files on any page
Stylesheet
<link rel="stylesheet" href="jquery-ui.min.css">
jQuery
<script src="external/jquery/jquery.js"></script>
jQuery UI
<script src="jquery-ui.min.js"></script>

4. jQuery UI Datepicker Widget
HTML
<input type="text" name="date" id="date">
Javascript
$( "#date" ).datepicker();
Resulting Widget

5. Using options
Plugins have a default configuration for the most basic and common use case
can override each of its default settings using "options“
set of properties passed into a jQuery UI widget as arguments
Example: Slider Widget
has an option for orientation, to specify whether the slider should be horizontal or vertical
$( "#mySliderDiv" ).slider({
orientation: "vertical",
min: 0,
max: 150,
value: 50
});
$( "#mySliderDiv" ).slider({
orientation: "vertical"
});

6. jQuery UI Accordian Widget
Displays collapsible content panels for presenting information in a limited amount of space
HTML
<div id="accordion">
<h3>Section 1</h3>
<div>
<p> Mauris mauris ante, </p>
</div>
<h3>Section 2</h3>
<p> Sed non urna, </p>
etc…
Javascript
$( function() {
$( "#accordion" ).accordion();
} );

7. jQuery UI Dialog Widget
an overlay positioned protected from page content
has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default
HTML
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
SCRIPT
$( function() {
$( "#dialog" ).dialog();
} );

8. jQuery UI Tooltips
When you hover the element with your mouse, a little box is displayed next to the element, just like a native tooltip. Uses title attribute
HTML:
<p><label for="age">Your age:</label>
<input id="age" title="We ask for your age only for statistical purposes."></p>
STYLE
label {
display: inline-block;
width: 5em; }
SCRIPT:
$( function() {
$( document ).tooltip();
} );

9. jQuery UI Menu
When you hover the element with your mouse, a submenu appears. Has mouse and keyboard interactions for navigation
HTML:
<ul id="menu"> <li class="ui-state-disabled"><div>Toys(n/a)</div></li> <li><div>Books</div></li> <li><div>Clothing</div></li> <li><div>Electronics</div> <ul> <li class="ui-state-disabled"><div>Home Entertainment</div></li> <li><div>Car Hifi</div></li> <li><div>Utilities</div></li> </ul> </li> <li><div>Movies</div></li> <li><div>Music</div>
SCRIPT:
$( function() {
$( "#menu" ).menu();
} );

10. Used for rollover effects to preload images
Image object
Used for rollover effects to preload images
The Image object represents an HTML <img> element
3 ways to access an image
using getElementById():
Images collection
document.images returns an array
Create an image element
var x = document.createElement("IMG");
var myImage = new Image();

11. Image object Properties:
border - The width of the border around the image in pixels
complete - A boolean value which identifies whether an image is completely loaded yet
height - The read only height of the image in pixels
hspace - The read only amount of horizontal space to the left and right sides of the image
lowsrc - The read or write string giving the URL of an alternate image for low resolution screen display
name - The assigned name of the image
prototype - Used for adding user-specified properties to the image
src - The URL of the image to be displayed. It is a read/write string
vspace - The read only vertical space above and below the image
width - The read only width of the image in pixels

12. Object Models

13. Javascript Object Model
JavaScript implementation is made up of three distinct parts
The Javascript Core (based on ECMAScript spec)
The Document Object Model (DOM)
The Browser Object Model (BOM)

14. Browser Object Model (BOM)
The larger representation of everything provided by the browser
Includes the current document, location, history, frames, and any other functionality the browser may expose to JavaScript
Not standardized - can change based on different browsers
Most important task is managing browser windows and enabling communication between the windows

15. Browser Object Model
Browser object model (BOM) or client-side object model
Hierarchy of objects
Each provides programmatic access
To a different aspect of the web browser window or the web page
Window object
Represents a Web browser window
Called the global object
Because all other BOM objects contained within it

16. Browser Object Model (cont’d.)
Window object and Document object

17. Browser Object Model (cont.)

18. Window Object

19. the Window Object Window object
Includes properties containing information about the web browser window or tab
Contains methods to manipulate the web browser window or tab itself

20. Window Object

21. Window Object

22. Window Object

23. Window Object window.close(); self.close(); self property
Refers to the current Window object
Identical to using the window property to refer to the Window object
Examples:
window.close();
self.close();
Web browser assumes reference to global object
Good practice
Use window or self references
When referring to a Window object property or method

24. Opening and Closing Windows
Reasons to open a new Web browser window
To launch a new Web page in a separate window
To use an additional window to display information
When new Web browser window opened:
New Window object created
Represents the new window
Can assign the new window to a variable, or give it a name, to communicate to the new window
Know how to open a link in a new window using the a element’s target attribute
<a href= target="wikiWindow">
Wikipedia home page</a>

25. Opening a Window window.open(url, name, options, replace); Syntax
open() method of the Window object
Opens new windows
Syntax
window.open(url, name, options, replace);

26. Opening a Window Include all (or none) window.open() method arguments
Example:
window.open("

27. Opening a Window Customize new browser window or tab appearance
Use window.open() method options argument

28. Opening a Window window.open()
name argument specifies window name where the URL should open
If name argument is already in use
JavaScript changes focus to the existing Web browser window instead of creating a new window
window.open(‘wiki.html’,’wikiWindow’,’height=200’)
<a href=‘ target="wikiWindow">
Wikipedia home page</a>

29. Opening a Window
Assign the new Window object created with the window.open() method to a variable to control it
focus() method
Makes a window the active window
newWin.focus();
newWin=window.open(‘wiki.html’,’wikiWindow’,’height=200’)

30. Closing a Window close() method window.close() or self.close()
Closes a web browser window
window.close() or self.close()
Closes the current window

31. History Object

32. The History Object History object Security features
Maintains internal list (history list)
All documents opened during current web browser session
Security features
Will not display URLs contained in the history list

33. The History Object (cont’d.)

34. The History Object (cont’d.)
go() method
Allows navigation to a specific previously visited web page
History object length property
Provides specific number of documents opened during the current browser session
Example:
Return to first document opened in current browser session:
history.go(-(history.length - 1));

35. Location Object

36. The Location Object Location object
Allows changes to a new web page from within JavaScript code
Location object properties allow modification of URL individual portions
Web browser automatically attempts to open that new URL

37. The Location Object (cont’d.)

38. The Location Object (cont’d.)
Location objects’ assign() method
Same action as changing the href property
Loads a new web page
Location objects’ reload() method
Equivalent to the browser Reload or Refresh button
Causes current page to open again
Location objects’ replace() method
Replaces currently loaded URL with a different one

39. NAVIGATOR Object

40. The Navigator Object Navigator object
Obtains information about current web browser
Example: determine type of web browser running

41. The Navigator Object (cont’d.)
console.log("Web browser name: " + navigator.appName);
console.log("Web browser version: " + navigator.appVersion);
console.log("Operating platform: " + navigator.platform);
console.log("User agent: " + navigator.userAgent);
Navigator object properties in Firefox console

42. The Navigator Object (cont’d.)
with statement
Eliminates need to retype object name
When properties of the same object being referenced in a series
with (navigator) {
document.write("<p>Browser code name: "
+ appCodeName + "<br />");
document.write("Web browser name: "
+ appName + "<br />");
document.write("Web browser version: "
+ appVersion + "<br />");
document.write("Operating platform: "
+ platform + "<br />");
document.write("User agent: " + userAgent + "</p>"); }

43. screen Object

44. The Screen Object Screen object Common use of Screen object properties
Obtains information about display screen’s size, resolution, color depth
Common use of Screen object properties
Centering a web browser window in the middle of the display area

45. The Screen Object (cont’d.)

46. The Screen Object (cont’d.)
Common Screen object properties uses
Center a web browser window
var winWidth = 300;
var winHeight = 200;
var leftPosition = (screen.width - winWidth) / 2;
var topPosition = (screen.height - winHeight) / 2;
var optionString = "width=" + winWidth + ",height=" + winHeight + ",left=" + leftPosition + ",top=" + topPosition;
var openWin = window.open("", "CtrlWindow", optionString);

47. Object-oriented terminology
Object, data, encapsulation, inheritance

48. Reusing Software Objects
Object-oriented programming (OOP)
Allows reuse of code without having to copy or recreate it
Creating reusable software objects
Easily incorporated into multiple programs
Object
Programming code and data treated as an individual unit or component
Also called a component
range from simple controls to entire programs
C++, Java, Visual Basic
Data
Information contained within variables or other types of storage structures

49. What Is Encapsulation? Encapsulation places code inside a “black box”
Encapsulated objects
Code and data contained within the object itself
Encapsulation Interface
Elements required for program to communicate with an object
Principle of information hiding
Any methods and properties other programmers do not need to access should be hidden
Advantages of encapsulation
Reduces code complexity
Prevents accidental bugs and stealing of code

50. What Is Encapsulation? (cont’d.)
Calculator interface

51. What Is Encapsulation? (cont’d.)
Document object is encapsulated (black box)
getElementById() method
Part of the interface JavaScript uses to communicate with the Document object
Using the interface for the Document object

52. Classes
Methods, properties, instantiation, inheritance

53. Understanding Classes
Classes (base classes)
Grouping of code, methods, attributes, etc., making up an object
Instantiating
create an object from an existing class
Inheritance
Creating an instance of the class inherits the methods and properties from a class

54. Built-In JavaScript Classes

55. Using Built-In JavaScript Classes
Some classes require no instantiation
Math class
// calculate the area of a circle based on its radius
function calcCircleArea() {
var r = document.getElementById("radius").value;
var area = Math.PI * Math.pow(r, 2); // area is pi times ↵
radius squared
return area; }

56. Using Built-In JavaScript Classes
Some classes require programmer to instantiate a new object
Can instantiate Array object using constructor function
var myArray = new Array();
var today = new Date();
Can instantiate Array object using array literal
Example: var deptHeads = [];
Can instantiate empty generic object using object literal
Example: var accountsPayable = {};

57. Date Class

58. Manipulating the Date and Time with the Date Class
Methods and properties for manipulating the date and time
Allows use of a specific date or time element in JavaScript programs
Date class constructors

59. Working with Date Objects
Date objects contain information about a specified date and time
To create a date object containing the current date and time, use the following JavaScript command:
variable = new Date()
To store a date and time in a variable, use the JavaScript command
variable = new Date("month day, year hours:minutes:seconds") myDate = new Date(“February 28, :00:00”);
where variable is the name of the variable that contains the date object, and month, day, year, hours, minutes, and seconds indicate the date and time to be stored in the object.
Time values are entered in 24-hour time

60. Working with Date Objects
Can also use shorthand to create a date, as in
variable = new Date(year, month, day, hrs, mins, secs) var myDate = new Date(2013,1,28,19,0,0”);
Resolves to Feb 28, 2013 at 7PM
var someDate = new Date(1776, 6, 4);
Resolves to ??
Days of the week and months of the year are stored using numeric representations
Starting with zero: similar to an array

61. Date and Time with the Date Class
After creating a new Date object
Manipulate date and time in the variable using the Date class methods
Date and time in a Date object
Not updated over time like a clock
Date object contains the static (unchanging) date and time
Set at the moment the JavaScript code instantiates the object

62. Date and Time getters

63. Date and Time setters
Date methods can be used to change information in a date object

64. Date and Time with the Date Class
Each portion of a Date object can be retrieved and modified using the Date object methods
Examples:
var curDate = new Date();
curDate.getDate();
Using date returns, can use other program constructs to display date data in differing formats

65. Date and Time with the Date Class
var today = new Date();
var curDay = today.getDay();
var weekday;
if (curDay === 0) {
weekday = "Sunday";
} else if (curDay === 1) {
weekday = "Monday";
} else if (curDay === 2) {
weekday = "Tuesday";
} else if (curDay === 3) {
weekday = "Wednesday";
} else if (curDay === 4) {
weekday = "Thursday";
} else if (curDay === 5) {
weekday = "Friday";
} else if (curDay === 6) {
weekday = "Saturday"; }

66. Date and Time with the Date Class
Example: include an array named months
12 elements assigned full text names of the months
var today = new Date();
var months = ["January","February","March",↵
"April","May","June",↵
"July","August","September",↵
"October","November","December"];
var curMonth = months[today.getMonth()];

67. Number Class

68. Number Class Number class
Methods for manipulating numbers and properties containing static values
Representing some numeric limitations in the JavaScript language
Can append the name of any Number class method or property
To the name of an existing variable containing a numeric value

69. Number Class
Using Number class methods

70. Number Class Using Number class methods (cont’d.)
Primary reason for using any of the “to” methods
To convert a number to a string value with a specific number of decimal places
toFixed() method
Most useful Number class method
toLocaleString() method
Converts a number to a string formatted with local numeric formatting conventions

71. Number Class

72. Controlling How JavaScript Works with Numeric Values
Some mathematical operations can return results that are not numeric values.
You cannot divide a number by a text string
Returns “NaN”
You cannot divide a number by zero
Returns “Infinity”
The isNaN function is a Boolean function that tests a value to see whether it is numeric or not.
The isFinite function is a Boolean function that checks for the value of Infinity.

73. Controlling How JavaScript Works with Numeric Values

74. Math Class

75. Math Object and Math Methods
The Math object is an object that contains methods and properties that can be used to easily do mathematical calculations
Also contains pre-defined variables that will give values of important constants like Pi, LN2, log base 10 etc...
Common Math methods used for performing advanced calculations and mathematical operations such as:
Generating random numbers
Extracting square roots
Calculating trigonometric values

76. Math Functions with the Math Class
Use the Math object and one of its methods or properties directly in the code
Do not instantiate a Math object using a statement such as: var mathCalc = new Math();
Example:
var curNumber = 144;
var squareRoot = Math.sqrt(curNumber); // returns 12

77. Performing Math Functions with the Math Class

78. Math Functions with the Math Class

79. Math Functions with the Math Class
Example:
Use the PI property to calculate the area of a circle based on its radius
Code uses the pow() method to raise the radius value to second power, and the round() method to round the value returned to the nearest whole number
var radius = 25;
var area = Math.PI * Math.pow(radius, 2);
var roundedArea = Math.round(area); // returns 1963

80. Examples
Example: <script type="text/javascript"> document.write('Absolute value of is ::'+Math.abs(-4.23) + "<br/>"); document.write('Absolute value of null is ::'+Math.abs(null) + "<br/>"); </script> Result: Absolute value of is :: Absolute value of null is ::0
<html> <input type=button onclick="ceil()" name="button" value="ceil a number"> <script type="text/javascript"> function ceil(){ ceilval = prompt("Enter a number:", " "); alert('Round off value of the number is::'+Math.ceil(ceilval)); } </script> </html>

81. Custom Objects

82. Introducing Custom Objects
All JavaScript objects are derived from a single fundamental base object
Properties and methods of a base object:

83. Declaring Basic Custom Objects
Use the Object object (base class)
var objectName = new Object(); //constructor
var objectName = {}; //object literal
To define a custom object drawn from the base class:
var newObject = new Object() {
this.property = value;
this.method = function;
... }
To define a custom object as an object literal:
var newObject = {
property : value,
method : function,
The this keyword refers to the object that calls the constructor function

84. Garbage Collection Performing garbage collection
Cleaning up, or reclaiming, memory reserved by a program
Declaring a variable or instantiating a new object
Reserves memory for the variable or object
JavaScript knows when a program no longer needs a variable or object
Automatically cleans up the memory