Overview of JavaScript Training
Javascript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.
JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers.
JavaScript Training Objectives
The objectives of this course are to:
- To get hands-on experience on JavaScript and jQuery.
- To learn how to work with binding events to the controls in JavaScript.
- To learn how to download jQuery library and refer it to the Html page.
- To learn the importance of $(document).ready(function(){ });
- To learn selecting the Html elements by name, attribute name, id or by content.
- To Learn Traversing of Html elements.
- To learn handling different events for different Controls.
- To learn how to provide effects to the elements or sections in the Html page.
- To learn manipulating elements by adding CSS classes dynamically, by inserting elements etc.
- To learn how to make an Ajax request using jQuery.
- To learn what is JSON, what is the use of it and what are its advantages.
Prerequisites
Participants are required to have basic knowledge of Html and JavaScript.
In case you do not have knowledge on Html and JavaScript, we suggest you to go through with Html and JavaScript Course and then get back with jQuery Course to have in-depth knowledge.
JavaScript Training Duration
- Regular classroom based training: 8 hours (1 week) of total training with 1 hour session per day.
- Fast Track(1-1): 8 hours (2 days) of total training with 4 hours of training per day.
- Pre-Recorded video based online trainingoption is available for now
Week 1: Introduction
| What is JavaScript |
| What can't you do with JavaScript? |
| Java "vs" JavaScript |
| The hierarchy of JavaScript Objects |
| window Object |
| document Object |
| Outputting Text with JavaScript |
| Using Arrays to Refer to Forms |
| Setting the bgColor & fgColor Properties |
| location Object |
| history Object |
| history & location Objects Examples |
| navigator Properties |
| DataTypes |
| parseInt() & parseFloat() |
| Variables |
| Variable concatenation Examples 1 & 2 |
| Expressions & Operators |
| Clock Example using the Conditional Operator |
| JavaScript Objects |
| String Object |
| JavaScript String Manipulation Examples |
| HTML String Methods |
| Math Object |
| Using PI & Sqrt |
| Calculating the Square or Square Root |
| Date Object |
| Date Object Example |
| JavaScript Built-in Functions |
| Three Types of Dialog Boxes in JavaScript |
Week 2
| Event Handlers |
| Incorporating JavaScript into your HTML pages |
| |
Method 1: The <SCRIPT> tag |
| |
Method 2: Placing JavaScript within HTML tags |
| |
Modularizing Event Handlers |
| |
Attributes for the <SCRIPT> tag |
| |
Hiding scripts from other browsers |
| |
JavaScripting Commenting |
| JavaScript and the HTML layout |
| The concept of Program Control |
| Introduction to if -- else Branching |
| |
Do You Love Me? (if -- else Example 1) |
| |
Weekend Checker (if -- else Example 2) |
| |
What time of day is it (if -- else Example 3) |
| |
Digital Clock using gifs -- Static |
| |
Digital Clock using gifs -- Dynamic |
| while loops |
| |
more about while loops |
| for loops |
| |
Calculating the Sum of the Digits |
| |
Nested for loops |
| |
Multiplication Table (more Nested for loops) |
| Functions |
| |
with no parameters |
| |
with parameters -- passing arguments |
| |
this keyword |
| |
returning values |
| |
"multiple" returns |
| |
Variable Scope |
| |
Local --vs-- Global Variables |
| |
Functions & their locations within a document |
| |
Functions at work |
| |
Recursive Functions |
| There's more than one way to call a Function |
Week 3
Status Bar
| Review of the JavaScript Object Hierarchy |
| |
onMouseOvers & Hyperlinks |
| |
onMouseOvers & onMouseOuts to perform different functions |
| |
"Automatic" Timer |
| |
defaultStatus & onFocus |
| |
Status Bar Messages with Image Maps |
| |
Status Bar Messages with Image Maps (corrected for IE 5.x) |
| |
Status Bar Digital Clock |
| |
Scrolling Status Bar Messages |
| |
Scrolling Status Bar Messages (Annotated Version) |
| |
Scrolling Status Flasher |
| RollOvers |
| RollOver "Bad Code" |
| Correct "image onMouseOvers" |
| Correct "image onMouseOvers" (Annotated Version) |
| Blinking Eye |
| Blinking Eye (Annotated Version) |
| Digital Clock |
| Digital Clock (Annotated Version) |
| Image Map |
| Image Map (that works with IE 5.x) |
| Changing an Image Using the onClick Event Handler |
| Changing images using a hyperlink |
| Glow Buttons |
| Arrays |
| |
Bouncing Ball |
| |
Dynamic Date Display |
| |
Digital Clock |
| |
Random Quotes |
| |
Rotating Banner |
| |
Rotating Banner with Synchronized Status Bar Messages |
| |
Random Rotating Banner with Synchronized Status Bar Messages |
| |
Slide Show |
| |
Slide Show Version 3 |
| |
Stroke the Squares |
| Jump to |
| "Browser Detection" Version 1 |
| "Browser Detection" Version 2 |
| "Browser Detection" Version 3 |
| Using typeof() |
| Calendar |
Week 4
CheckBox
Textfields
| Techniques for text String Management |
| Message Slide Show |
| Message Slide Show (Annotated Version) |
| Demo of document.write() & "how" it works |
| |
"Does" what it is suppose to |
| |
"Does not" do what it is suppose to |
| Form Object |
| Forms -- A Quick Introduction |
| Form Elements |
| Button -- Simple Calculator |
| Radio Button |
| |
light on/off |
| |
Radio Button test |
| |
Which browser is your favorite |
| |
Temperature Conversion |
| |
Temperature Conversion (Annotated Version) |
| |
Double or Square? |
| |
CheckBox Test |
| |
CheckBox Calculator |
| |
Manipulating the Values of a Textfield |
| |
Detecting Textfield Events |
| |
Echo -- Reflect |
| |
"Less Clutter" |
| Select -- a "through" study |
| |
Which browser is your favorite |
| |
Selects |
| |
Multiple Selects |
Week 5
"Practical" Examples using RegExps
| onChange & Select |
| MultiDimensional Arrays |
| Double Combination |
| Form Object |
| Form Handlers |
| Form Validation Overview |
| Quiz |
| JavaScript Regular Expressions -- RegExp |
| Regular Expression Methods |
| RegExp Examples |
| Summary of RegExp Pattern Syntax |
| |
"Trim" Function |
| |
"Swap" Function |
| |
Inserting/Removing Commas from Numbers |
| |
Validate Date Format |
| Using "type" |
| "Validation" Form |
| "Simple" Form Validation |
| "Simple" Form Validation (Annotated Version) |
| Car Picker Validation |
| Car Picker Validation (Annotated Version) |
Week 6
| Order Forms |
| |
Order Form Naming Convention |
| |
Order Form Calculations |
| |
Order Form Calculations (Annotated Version) |
| Credit Card "Validation" Form |
| |
Credit Card "Validation" Code |
| |
Credit Card "Validation" Code (Annotated Version) |
| CGI Introduction |
| GET & POST Methods |
| Perl CGI Examples |
| |
formget.pl |
| |
formpost.pl |
| |
form.pl |
| Where do I get my input from |
| ASP Form Examples |
| |
Display results using ASP v1 |
| |
Display results using ASP v1 (Annotated Version) |
| |
Display results using ASP v2 |
| CGI Environmental Variables |
| URL Encoding |
| |
URL Encoding & Decode |
| mailto: -vs- CGI |
| One File with "Multi-URL's" (Passing Data) |
| Calendar source code |
| JMail Examples & Implementations |
Week 7
| Quiz Examples |
| |
Quiz Source Code |
| |
quiz.js |
| |
Quiz Source Code (Annotated Version) |
| |
Form Conventions |
| |
Quiz Source Code -- MultiDimensional Arrays |
| |
Quiz Source Code -- MultiDimensional Arrays (Annotated Version) |
| |
answers.js |
| Server-Side Includes (SSI) |
| |
SSI Directives |
| |
SSI & HTTP/CGI Variables Output |
| |
SSI & HTTP/CGI Variables Source Code |
| |
SSI using #exec CMD |
| Web-Embedded Programming |
| |
Display results using ASP v1 |
| |
Display results using ASP v2 |
| |
Cold Fusion Markup Language |
| |
PHP Code Example |
| Cookies |
| |
Hidden Fields |
| |
Hidden Fields (hidden1.pl & hidden2.pl) |
| |
Cookies & Scripting |
| |
Cookie Functions (Annotated Version) |
| |
Cookie Functions |
| |
Register Your Name |
| |
Register Your Name (Annotated Version) |
| |
Register Your Name -- Version 2 |
| |
Cookies & Paths how they work |
| |
Cookies Created in Week 1 |
| |
Cookies Displayed |
| |
Perl & Cookies Example |
Week 8
| Frames |
| |
Voodoo's Introduction to Frames |
| |
Use Target attributes to direct pages |
| |
Frameset Communication |
| |
Colored Frames |
| |
Escaping Frames |
| |
Keeping a page out of a Frame |
| |
Forcing a page to be in Frame |
| |
Passing Information from Frame to another |
| |
The HTML Tester Page |
| |
Resume -- Top Frame Source Code |
| |
Resume -- Bottom Frame Source Code |
| Windows |
| |
window Object |
| |
Positioning New Opened Windows |
| |
Pop-up Centered Window |
| |
Shifting Focus between multiple Windows -- onClick |
| |
Shifting Focus between multiple Windows -- onMouseOver |
| |
Passing Information from the Child Window to the Parent Window |
| |
Passing Information from the Parent Window to the Child Window |
| |
Opening & Closing Child Windows |
| |
A Child Window that acts as a Control Panel - a variation |
| |
The Gallery Source Code |
| |
Pop-up Windows & Cookies Source Code |
| |
Customizable Second Window |
| |
Summary & Examples of Pop-up Windows |
| |
JavaScript & "buttons" |
Week 9
| mimeTypes & plugins |
| |
Media Types and Subtypes |
| |
Plugins & Viewers |
| |
What File Types Can the Browser Work With? |
| |
Here is tonight's dinner |
| |
Embedded Data |
| |
Checking for plug-ins |
| |
Sounds on RollOvers |
| |
Sound Controls |
| |
LiveAudio & LiveConnect |
| JavaScript & Java Connection |
| |
Simple Java Examples |
| |
Modifying a "Java Clock" through JavaScript dynamically |
| |
dynamictext.class |
