Goal: In this module, you will learn the concepts of scripting on client-side and fundamentals of JavaScript

Objectives

After completing this module, you should be able to:

• Understand the basics of JavaScript programming
• Reduce the load of the server
• Use variables and their datatypes
• Handle conditional statements in your program

Topics

• History and Introduction
• Variables
• Data types
• Type Conversions
• Operators
• Conditional statements

Hands-on/Demo

• Implementing JavaScript on your HTML page
• Defining of variables and type conversion of datatypes

Goal: In this module, you will learn the memory management and process of function execution

Objectives

After completing this module, you should be able to:

• Minimize your code size by using reusable codes i.e., Functions
• Analyze Internal Memory Management in JavaScript
• Identify the type of declaration that should be applied for a variable
• Explain the concept of Variable Shadowing and Closures
• Understand the role of Garbage Collectors in JavaScript

Topics

• Functions
• Function Execution & Memory Management
• Variable Shadowing & Closures
• Garbage Collection

Goal: In this module, you will learn to use the benefits of Objects and Event Handling in JavaScript

Objectives

After completing this module, you should be able to:

• Create and use objects
• Access BOM methods and elements
• Access HTML Elements through DOM objects
• Understand how to change HTML Element style with DOM
• Attach Event Listeners to DOM elements
• Validate HTML forms before sending a request to the Server

Topics

• Objects
• Browser Object Model (BOM)
• Document Object Model (DOM)
• Events
• Validations

Hands-on/Demo

• Access and Change HTML elements
• Change the value of some of the CSS Properties
• Perform Validations on HTML Form elements

Goal: In this module, you will learn the different libraries and frameworks of JavaScript

Objectives

At the end of this module, you should be able to:

• Identify and work with errors/exceptions
• Use JSON and AJAX
• Identify the difference between libraries, frameworks and tools
• Differentiate between JQuery and JavaScript

Topics

• Errors
• JSON
• AJAX
• Libraries and frameworks
• JQuery
• Difference between JavaScript and JQuery

Hands-on/Demo

• Error Handling
• Installation of JQuery

Goal: In this module, you will learn to validate forms and handle events using JQuery

Objectives

At the end of this module, you should be able to:

• Use functions with JQuery
• Understand the usage of selectors in JQuery
• Traverse through and modify the DOM elements using JQuery
• Apply effects and animations in DOM

Topics

• Functions
• JQuery Forms
• Form Validations
• Event Handling
• AJAX with JQuery
• Plugins

Hands-on/Demo

• Validate form elements using JQuery
• Using plugins for accessing various pre-existing methods

What are the system requirements for this course?

The system requirement for this course is a system with Intel i3 processor or above, minimum 3GB RAM (4GB recommended) and an operating system can be of 32bit or 64 bit. In addition, you require a browser and a text editor.

How will I execute the practicals?

• A browser that supports JavaScript and a text editor
• Include JQuery Library in your JavaScript to run it

Which case studies will be a part of the course?

Design a quiz on any topic, where you will have a set off questions and answers.

• You also should maintain a scoreboard/progress bar for the number of questions attempted correct
• Every correct answer should change to green color and every wrong one would change to red
• At the end of the quiz, show the results with a smiley holding a card reading:
• Excellent (if the score if between 90-100)
• Good (if the score if between 70-89)
• Average (if the score if between 50-69)
• Poor (if the score if between 0-49)

Using JQuery, code a Railway reservation form. Take input from user like – Name, age, destination, boarding, class, train number. Perform validations like – Check if the age of the passenger is more than 60, if yes, pop up an alert with the message – passenger is senior citizen.