Javascript Tutorial or Lessions
1. Javascript Tutorial Introduction
Javascript's role on the
Web
Hypertext markup
language
Create an HTML document
The Javascrip
programming language
Logic and Debugging
The <SCRIPT> tag
Create a Javascript
source file
Adding comments toa
Javascript program
Hiding Javascript from
incompatible browsers
Placing Javascript in
HEAD or BODY sections
2. Variables, Functions, Objects, and Events
Section
A: Working with variables, functions, and objects
Variables
Defining custom functions
Calling functions
Built-in Javascript
Objects
Understanding
Javascript objects
Custom Javascript
objects
Built-in Javascript
objects
Custom object
inheritance and prototypes
Custom
object methods
Variable scope
Section
B: Using events
Understanding events
HTML tags and events
Event handlers
Links
Link events
Create an image map
3. Data Types and Operators
Section
A: Using data type
Data types
Numeric data types
Boolean values
Strings
Arrays
Section
B: Expressions and Operators
Expressions
Arithmetic operatiors
Assignment operators
Comparison operators
Logical operators
Working with strings
(string object)
Operator precedence
Create the calculator
program
4. Decision Making with Control Structures and Statements
Section
A: Decision making
if statements
iff... else statements
Nested if and if...else
statements
switch statements
Section
B: Repetition
while statements
do ... while statements
for ... in statement
with statements
continue statement
5. Windowa and Frames
Section
A: Working with windows
The Javascript object
model
The window object
Opening and closing
windows
Working with timeouts
and intervals
Section
B: Working with frames and objects
Create frames
Using the TABLE
attribute
Nested frames
Frame formating
The NOFRAMES tag
The location object
The history object
The Navigator object
Referring to frames and
windows
6. Forms
Section
A: Working with forms in Javascript
Overview of froms
The Common Gateway
Interface
The <FORM> tag
From elements: an
overview
Input
fields
Text boxes
Password boxes
Radio buttons
Check boxes
Reset buttons
Command buttons
Submit button
Image submit buttons
Section
B: Validating a Using input to a form
Hidden form fields
The
form object
Referencing forms and
form elements
Form event handlers
Form methods
Form properties
E-mailing form data
7. Debuging JavaScript
Section
A: Basic degugging techniques
Understadning debugging
Error message
Tracing errors with the
alert() method
Tracing errors with the
write() and writeln() methods
Using comments to locate
bugs
Additional debugging
techniques
Checking HTML
Analyzing your logic
Testing statements with
Java URLs
Reloading an HTML
document
Section
B: Advanced debugging techniques and resources
Using a for .. in
statement to check object properties
Watch points in Netscape
Netscape
Javascript debugger
Source view
Styep commands
Breakpoints
Tacing variables and
expressions
The call stack window
Microsoft Script
debugger
Source view
Styep commands
Breakpoints
Tacing variables and
expressions
The call stack window
8. Dynamic HTML and Animation
Section
A: Dynamic HTML
Introduction
Document object model
Document object
properties
The image object
Animation with the image
object
image caching
Section
B: Animation and cascading stype sheets
Cascading
stype sheets
Using
Javascript with CSS styles
Using Javascript and
stypes in Older versions of Navigator
Using Javascript and
style in older versions of internet explorer
Using Javascript and
style with the W3C DOM
CSS
postioning
dynamic positioning in
older versions of internet explorer
dynamic positioning in
Navigator
dynamic positioning with
W3C DOM-compliant browsers
Cross-browser
compatibility
How to add text to div or division using jquery
In the previous example, we have seen how to add anchor tag to body using JQuery AppendTo Keyword. In the example we are going to see, how to append text to existing division.
Main Code:
$("<div class='NewClass'>Im new box by appendTo</div>").appendTo('#NewContent');
Complete Code:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id='NewContent' style="color:Green"></div>
<script type="text/javascript">
$("<div class='NewClass'>Im new box by appendTo</div>").appendTo('#NewContent');
</script>
</body>
</html>
Output:
 |
| How to add text to div using jquery |
JQuery and Javascript Best Practices
Best Practices
- Lesson Introduction
- JavaScript Best Practices
- JavaScript Best Practices Reviewed
- jQuery Best Practices
- jQuery Best Practices Reviewed
- Code Organization
- Code Organization Reviewed
- Do Not Treat jQuery as a Black Box
JQuery Plugin Basics and Advance Tutorial
JQuery Plugin Basics and Advance Tutorial
- Lesson Introduction
- How to Create a Basic Plugin
- How to Create a Basic Plugin Reviewed
- Finding and Evaluating Plugins
- Creating a Plugin Using the Alsup Pattern
- Creating a Plugin Using the Alsup Pattern Exercise Reviewed
- Writing Stateful Plugins with the jQuery UI Widget Factory
- Make a Table Sortable (Optional)
- Make a Table Sortable Exercise Reviewed
JQuery Ajax Tutorial or Lession
JQuery Ajax Tutorial
- Lesson Introduction
- Key Concepts
- jQuery Ajax-Related Methods
- jQuery Ajax-Related Methods Reviewed
- Ajax and Forms
- Working with JSON
- Working with JSON Reviewed
- Ajax Events
- Load External Content
- Load Content Using JSON
- Load Exercises Reviewed
JQuery Custom Events Tutorial
JQuery Custom Events
- Lesson Introduction
- About Custom Events
- About Custom Events Reviewed
- Custom Events
- Review of Custom Events Exercise
- Conclusion
JQuery Effects Tutorial
JQuery Effects
- Lesson Introduction
- Built-in Effects
- Built-in Effects Reviewed
- Limitations on Effects
- Queuing of Effects with Other Operations
- Queuing of Effects with Other Operations Reviewed
- Callbacks - Doing Something When an Effect is Done
- Custom Effects with $.fn.animate
- Custom Effects with $.fn.animate Reviewed
- Managing Effects
- Reveal Hidden Text
- Create Dropdown Menus
- Effects Exercises 6 & 7 Reviewed
- Create a Slideshow
Difference between window.onload and ready event in the JQuery
Introduction:
Using this JQuery tutorial, we will learn what is the difference between window.load and document.ready event in the JQuery.Description:
JQuery code fires DOM is ready to be traversed and manipulated. But for some of the situations, we need to wait for complete window and resources must be load. In that situations we have to use the load() event with JQuery.Please go through below JQuery Example. If you run below code u will get homepage as silver code after clicking on alert you will get background color as green.
Main code:
$(document).ready(function () {
$(document.body).css('background-color', 'silver');
});
$(window).load(function () {
alert('this will alert after all the window resources completly loaded');
$(document.body).css("background-color", "green");
});
Complete Code:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document.body).css('background-color', 'silver');
});
$(window).load(function () {
alert('this will alert after all the window resources completly loaded');
$(document.body).css("background-color", "green");
});
</script>
</head>
<body>
</body>
</html>
Output:
Before window load: |
Before window load:
|
After window load:
 |
| After window load in JQuery |
Difference between JavaScript and JScript?
JScript is the Microsoft ECMAScript scripting language specification.
JavaScript (Netscape/Mozilla implementation of the ECMA scripting language specification), JScript, and ECMAScript are very similar languages. But "JavaScript" is often used to refer to ECMAScript or JScript.
JQuery Append Keyword Example Code
Using this JQuery Append Keyword, we can able to Add the element to the existing DOM element with the deleting the previous content.
<script type="text/javascript">
$('#ranga').append("<b>jqueryexamplecode.blogspot.com</b>");
</script>
Complete Code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<title></title>
</head>
<body>
<div id="ranga"> <b>Ranga Rajesh Kumar -</b></div>
<script type="text/javascript">
$('#ranga').append("<b>jqueryexamplecode.blogspot.com</b>");
</script>
</body>
</html>
Output:
 |
| JQuery Append Keyword Example Code |
JQuery attr() Method Example Code
Using JQuery attr() method, we can able to add the attribute the DOM element. In the below example i have added the href attribute to the existing anchor tag.
Sample Code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<title></title>
</head>
<body>
<a>Ranga</a>
<script type="text/javascript">
jQuery('a').text('JQueryExampleCode.blogspot.com').attr("href", "http://jqueryexamplecode.blogspot.com");
</script>
</body>
</html>
Output:
 |
| JQuery attr() Method Example Code |
JQuery Events and Event Handlers Tutorial
Events and Event Handlers
- Lesson Introduction
- Connecting Events to Elements
- Connecting Events to Elements Reviewed
- Inside the Event Handling Function
- Triggering Event Handlers
- Triggering Event Handlers Reviewed
- Increasing Performance with Event Delegation
- Event Helpers
- Create an Input Hint
- Create an Input Hint Reviewed
- Add Tabbed Navigation
jQuery Basic Tutorial or concepts
jQuery Basic Tutorial
- Lesson Introduction
- Introducing jQuery
- Using $(document).ready()
- Including and Using jQuery
- Selecting Elements
- Selecting
- Selecting Elements Reviewed
- Working with Selections
- CSS, Styling, and Dimensions
- Traversing
- Traversing Reviewed
- Traversing
- Manipulating the DOM
- Manipulating
- Manipulating the DOM Reviewed
JQuery Ready() function syntax and usage
JQuery fires the custom event called ready(), whenever DOM is loaded and ready for manipulation.
If you want to execute any kind of events, what should work from this ready() handler only.
There are different ways are there for using ready function in the JQuery. Here i am discussing three ways.
Way 1
// Standard.
jQuery(document).ready(function () { alert('DOM Ready!'); });
Way 2
jQuery(function () { alert('Using this syntax also DOM is ready'); });
Way 3
jQuery(function ($) {
alert('Here also DOM is loaded');
});
Output:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
// Standard.
jQuery(document).ready(function () { alert('jqueryexamplecode.blogspot.com'); });
jQuery(function () { alert('Using this syntax also DOM is ready'); });
jQuery(function ($) {
alert('Here also DOM is loaded');
});
</script>
</head>
<body>
</body>
</html>
Output:
 |
| JQuery Ready() function syntax and usage |
When to load CSS Files while working with JQuery?
JQuery is recommending to load all CSS files before firing ready event.
jQuery Core Tutorial
jQuery Core
- Lesson Introduction
- $ vs jQuery
- $ vs $()
- $ vs $()
- Utility Methods
- Utility Methods Reviewed
How to use $ or jQuery keyword differently in JQuery coding
After some days with jquery, i got a doubt like "can we customize $ or jQuery keyword in jquery coding". We can do that using JQuery.
It is very simple to do conversion of $ with your custom name.
Main Code:
var JQueryExampleCode = $; //(or) jQuery
JQueryExampleCode(function () {
JQueryExampleCode('body').css("background-color", "Silver}");
alert('JQueryExampleCode.blogspot.com');
});
Complete Code:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var JQueryExampleCode = $; //(or) jQuery
JQueryExampleCode(function () {
JQueryExampleCode('body').css("background-color", "Silver}");
alert('JQueryExampleCode.blogspot.com');
});
</script>
</head>
<body>
This is body content.
</body>
</html>
Output:
 |
| How to use $ or jQuery keyword differently in JQuery coding |
How to append Anchor tag to HTML Body Dynamically using jquery
Using JQuery we can add anchor tag to body very easily. This can be possible by the AppendTo JQuery Method.
In the below example, i am appending anchor tag to body using jquery. We can also append div to any class or div using this Jquery AppendTo Keyword.
MainCode:
$('<a href="http://jqueryexamplecode.blogspot.com">JQueryExampleCode.blogspot.com</a>').appendTo('body');
Complete Code:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id='NewContent' style="color:Green"></div>
<script type="text/javascript">
$('<a href="http://jqueryexamplecode.blogspot.com">JQueryExampleCode.blogspot.com</a>').appendTo('body');
</script>
</body>
</html>
Output:
 |
| How to append Anchor tag to HTML Body Dynamically using jquery |
jQuery text() method example code
In most of the situations, we will use the JQuery text() method in the coding part. This JQuery text method will show the data from that particular element. This JQuery text method can concatenates the strings found in the elements of a wrapper set.
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div class="MyClass">
Ranga
</div>
<div class="MyClass">
Rajesh
</div>
<div class="MyClass">
Kumar -- jqueryexamplecode.blogspot.com
</div>
<script type="text/javascript">
alert($('.MyClass').text());
</script>
</body>
</html>
Output:
 |
| jQuery text() method example |
JQuery Coding - Keyword Color Standards
JQuery color coding standards are like javascript only. we can see this color standard from the Visual studio.
See below image for the reference.
 |
| JQuery Coding - Keyword Color Standards |
JQuery Plugin Tutorial - My First JQuery Plugin alert tutorial
In this JQuery Tutorial, I am writing my first JQuery Plugin. JQuery plugin code writing is very awesome experience to the Web Developers.
This is the JQuery plugin code. We can keep this code in the separate js file also. Since it is basic tutorial I have included in the html page itself.
(function($){
$.fn.MyFirstPlugIn = function () {
alert('My first plug in alert');
}
})(jQuery);
Below example will show the alert message at the time of loading page.
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.MyFirstPlugIn = function () {
alert('My first plug in alert');
}
})(jQuery);
$(document).ready(function () {
$('#ranga').MyFirstPlugIn();
});
</script>
</head>
<body>
<div id="ranga">
http://aspnettutorialonline.blogspot.com/
</div>
</body>
</html>
Output:
 |
| JQuery Plugin Tutorial |
JAVASCRIPT Basic Tutorial or Lessions
Javascript Basics
- Lesson Introduction
- Syntax Basics
- Reserved Words
- JavaScript Basics Quiz 1
- Operators
- Operations on Numbers and Strings
- Operations on Numbers and Strings Reviewed
- Logical Operators
- Comparison Operators
- JS Basics Quiz 2
- Conditional Codes
- Conditional Variable Assignments with the Ternary Operator
- Switch Statements
- Loops
- Arrays
- Objects
- Objects Reviewed
- Functions
- JS Basics Quiz 3
- Testing Type
- Scope
- Scope Reviewed
- Closures
JQuery Tutorial or Lessons
JQuery Tutorial or Lessons
I am offering JQuery training with low cost in the Bangalore. I will training in the Weekends only. Training cost will be 2, 000 rupees.
Interested people can send mail to me : dotnetrangarajesh@gmail.com
1. JAVASCRIPT Basics
- Lesson Introduction
- Syntax Basics
- Reserved Words
- JS Basics Quiz 1
- Operators
- Operations on Numbers and Strings
- Operations on Numbers and Strings Reviewed
- Logical Operators
- Comparison Operators
- JS Basics Quiz 2
- Conditional Codes
- Conditional Variable Assignments with the Ternary Operator
- Switch Statements
- Loops
- Arrays
- Objects
- Objects Reviewed
- Functions
- JS Basics Quiz 3
- Testing Type
- Scope
- Scope Reviewed
- Closures
2. jQuery Basic Concepts
- Lesson Introduction
- Including jQuery
- Using $(document).ready()
- Including and Using jQuery
- Selecting Elements
- Selecting
- Selecting Elements Reviewed
- Working with Selections
- CSS, Styling, and Dimensions
- Traversing
- Traversing Reviewed
- Traversing
- Manipulating the DOM
- Manipulating
- Manipulating the DOM Reviewed
3. jQuery Core
- Lesson Introduction
- $ vs jQuery
- $ vs $()
- $ vs $()
- Utility Methods
- Utility Methods Reviewed
4. Events and
Event Handlers
- Lesson Introduction
- Connecting Events to Elements
- Connecting Events to Elements Reviewed
- Inside the Event Handling Function
- Triggering Event Handlers
- Triggering Event Handlers Reviewed
- Increasing Performance with Event Delegation
- Event Helpers
- Create an Input Hint
- Create an Input Hint Reviewed
- Add Tabbed Navigation
5. EFFECTS
- Lesson Introduction
- Built-in Effects
- Built-in Effects Reviewed
- Limitations on Effects
- Queuing of Effects with Other Operations
- Queuing of Effects with Other Operations Reviewed
- Callbacks - Doing Something When an Effect is Done
- Custom Effects with $.fn.animate
- Custom Effects with $.fn.animate Reviewed
- Managing Effects
- Reveal Hidden Text
- Create Dropdown Menus
- Effects Exercises 6 & 7 Reviewed
- Create a Slideshow
6. Ajax
- Lesson Introduction
- Key Concepts
- jQuery Ajax-Related Methods
- jQuery Ajax-Related Methods Reviewed
- Ajax and Forms
- Working with JSON
- Working with JSON Reviewed
- Ajax Events
- Load External Content
- Load Content Using JSON
- Load Exercises Reviewed
7. Plug
ins
- Lesson Introduction
- How to Create a Basic Plugin
- How to Create a Basic Plugin Reviewed
- Finding and Evaluating Plugins
- Creating a Plugin Using the Alsup Pattern
- Creating a Plugin Using the Alsup Pattern Exercise Reviewed
- Writing Stateful Plugins with the jQuery UI Widget Factory
- Make a Table Sortable (Optional)
- Make a Table Sortable Exercise Reviewed
8. Custom
Events
- Lesson Introduction
- About Custom Events
- About Custom Events Reviewed
- Custom Events
- Review of Custom Events Exercise
- Conclusion
9. Best Practices
- Lesson Introduction
- JavaScript Best Practices
- JavaScript Best Practices Reviewed
- jQuery Best Practices
- jQuery Best Practices Reviewed
- Code Organization
- Code Organization Reviewed
- Do Not Treat jQuery as a Black Box
Slide Out Navigation - JQuery Plug in
This is one of the good plug in for the Slide show navigation.
Required Changes:
- HTML Tags
- CSS
- Javascript
