Advanced JavaScript & Web Application Development

Create dynamic, interactive web applications using JavaScript, DOM, and APIs.

Advanced JavaScript & Web Application Development
Course Features:
  • Language: English
  • list-box-outline Track: Software Development
  • Duration: 30 hours
  • layers-outline Level: Advanced
  • Learning Mode:
  • Jurisdiction: Nationwide
  • Certificate of Completion
Eligibility
  • Learner should preferably a std. 10th Pass student (Not Compulsory)
  • It is desirable that Learner should have done MS-CIT Course (Not Compulsory)
List of ALCs

Introduction

  • Recall the syntax and purpose of different types of loops and conditional statements in JavaScript, and apply them to solve programming problems.
  • Explain the structure and hierarchy of the JavaScript Document Object Model (DOM) and manipulate HTML elements, attributes, and styles dynamically using DOM methods.
  • Define core OOP concepts such as classes, objects, prototypes, inheritance, polymorphism, abstraction, and encapsulation, and construct JavaScript code demonstrating their application.
  • Recognize the benefits and common use cases of popular JavaScript libraries (e.g., jQuery, Lodash) and implement practical examples demonstrating their integration for specific tasks.
  • Describe the purpose and functionality of HTTP cookies and browser local storage, and develop JavaScript code to manage data persistence.
  • Illustrate basic painting and animation techniques on an HTML5 Canvas using JavaScript, and construct interactive graphics within the browser environment.
  • Outline the process of uploading web pages to GitHub Pages, and configure custom domain names and HTTPS for hosted projects.
  • Identify common types of errors and exceptions in JavaScript, and implement try-catch blocks and other error handling mechanisms to create robust applications.
  • Differentiate between function types (built-in, user-defined, recursive, arrow functions), explain the concept of closures, and utilize methods of the JavaScript Reflect API.
  • Identify and validate various HTML form elements (text, password, button, checkbox, radio, select) using client-side JavaScript, and implement strategies for enhancing form interactivity.

What you'll learn ?

  • Analyze and construct efficient and maintainable JavaScript programs utilizing fundamental control structures, functions, and advanced programming paradigms.
  • Design and implement interactive and dynamic web interfaces by effectively manipulating the Document Object Model (DOM) and managing various HTML form elements.
  • Apply object-oriented programming (OOP) principles in JavaScript to develop scalable, modular, and robust web applications.
  • Evaluate and integrate external JavaScript libraries and frameworks to streamline development workflows and enhance application functionality.
  • Utilize client-side storage mechanisms to create persistent and personalized user experiences within web applications.
  • Create compelling visual content and interactive animations on web pages using the HTML5 Canvas API.
  • Manage version control and deploy web projects efficiently using platforms like GitHub, including custom domain and secure connections.
  • Debug and troubleshoot complex JavaScript applications effectively, implementing robust error and exception handling strategies.
  • Differentiate between various JavaScript functions, their types, and advanced concepts like closures and the Reflect API.
  • Implement comprehensive client-side form validation techniques to ensure data integrity and enhance user experience.

Syllabus

  • What are loops in computer programming?
  • How programmers can save time by using loops!
  • Types of loops
  • Loop control statements
  • A program with and without loops
  • What are flowcharts?
  • Understanding initialization and test conditions
  • Understanding increment and decrement of loop counters
  • Explanation of each loop with variables and conditions
  • Assisted demo on loops!
  • Benefits of using loops in JavaScript and working with loops
  • Conditional statements
  • JavaScript switch statement
  • Types of loops – Part 1
  • Types of loops – Part 2
  • For loop in JavaScript
  • Nested for loop in JavaScript
  • Assisted demo for for loop!
  • Assisted demo for while loop!
  • Defining functions
  • Purpose of functions
  • Function declaration and placement – Part 1
  • Function declaration and placement – Part 2
  • Built-in functions – Part 1
  • Built-in functions – Part 2
  • User-defined functions – Part 1
  • User-defined functions – Part 2
  • Recursive functions
  • Assisted demo on functions!
  • Passing parameters
  • Scope of variables and return values – Part 1
  • Scope of variables and return values – Part 2
  • Function types
  • call() method
  • apply() method
  • Closures
  • Returning multiple values
  • Arrow functions
  • Tips for arrow functions!
  • Callback functions
  • Immediately Invoked Function Expressions (IIFE)
  • Working of dialog boxes!
  • Alert dialog box
  • Prompt dialog box
  • Confirm dialog box
  • Assisted demo on alert, prompt, and confirm dialog boxes!
  • Creating custom dialog boxes
  • Assisted demo on custom dialog boxes!
  • Definition of a class
  • Declaration of a class
  • Abstract class
  • Definition of an object
  • Declaration of objects
  • Initializing an object
  • Access modifiers
  • Member functions and data members
  • Declaring classes with corresponding objects and members
  • Introduction to the JavaScript instance hierarchy
  • Document object
  • JavaScript DOM
  • Properties of HTML objects
  • Methods of HTML objects
  • How JavaScript objects are created
  • JavaScript innerHTML property
  • JavaScript innerText property
  • Different JavaScript objects and their uses
  • Form object: methods and properties
  • Form elements: description and syntax
  • Methods of form elements: element name, method name, and description
  • Assisted demo on form elements!
  • Association of JavaScript with HTML form GUI controls
  • Understanding built-in objects in JavaScript
  • Built-in objects: String, Math, and Date
  • User-defined objects and how to create them
  • Text box, text area, and password elements
  • Button, submit, and reset elements
  • Checkbox and radio button elements
  • Select and option elements
  • Demo on button elements!
  • JavaScript Reflect object
  • Reflect.apply() and Reflect.construct() methods
  • Reflect.defineProperty(), Reflect.deleteProperty(), and Reflect.get() methods
  • Reflect.getOwnPropertyDescriptor(), Reflect.getPrototypeOf(), and Reflect.has() methods
  • Definition of cookies
  • How cookies are used in web pages
  • Benefits of using cookies in web pages
  • JavaScript cookies
  • How to set cookies
  • Cookie attributes
  • Cookies with multiple names
  • How to delete cookies
  • Assisted demo on using cookies!
  • Changing HTML styles
  • Ways to manipulate CSS using JavaScript
  • HTML DOM Style Object reference
  • Working with document stylesheets: adding, removing, and modifying stylesheets
  • Working with stylesheet rules
  • Working with individual DOM elements and modifying styles
  • Assisted demo on stylesheets!
  • Assisted demo on stylesheet rules!
  • Assisted demo on individual DOM elements!
  • Inheritance: terminology and types
  • Types of inheritance with flowcharts
  • Important facts about inheritance
  • Implicit inheritance
  • Explanation of inheritance types with examples
  • Definition of polymorphism and its types
  • Static vs dynamic polymorphism
  • Function overloading and operator overloading
  • Demo on function and operator overloading!
  • Basics of abstraction in JavaScript
  • Introduction to encapsulation in JavaScript
  • Differences between abstraction and encapsulation
  • How to implement abstraction in JavaScript
  • How to implement encapsulation in JavaScript
  • Understanding form validation
  • Form validation in JavaScript – Part 1
  • Form validation in JavaScript – Part 2
  • Client-side form validation – Part 1
  • Client-side form validation – Part 2
  • Form enhancement techniques
  • Auto-tabbing between form fields – Part 1
  • Auto-tabbing between form fields – Part 2
  • Trimming spaces from input fields
  • Selecting all content of a text area
  • Checking and unchecking all checkboxes
  • Disabling text inputs and case conversion – Part 1
  • Disabling text inputs and case conversion – Part 2
  • Assisted demo on validation!
  • What are libraries and their uses?
  • Overview of JavaScript libraries
  • jQuery library – Part 1
  • jQuery library – Part 2
  • Lodash library – Part 1
  • Lodash library – Part 2
  • Assisted demo on jQuery!
  • Assisted demo on Lodash!
  • Canvas: drawing and animation
  • Local storage: usage, browser support, and limitations
  • Handling errors and exceptions!
  • What is GitHub?
  • How to upload pages to GitHub
  • How GitHub Pages works
  • Setting up a domain name
  • Configuring DNS
  • Finding IP addresses for GitHub Pages
  • Setting up a www subdomain using CNAME
  • Linking a domain name to GitHub Pages
  • Enabling free HTTPS on GitHub Pages!

Certificate

  • MKCL awards a certificate to DEEP learners upon successful completion of the prescribed course.

    • Academic Approach

    The Academic Approach of the course focuses on the “work centric” education i.e. begin with work (and not from a book !), derive knowledge from work and apply that knowledge to make the work more wholesome, useful and delightful. The ultimate objective is to empower the Learner to engage in socially useful and productive work. It aims at leading the learner to his/her rewarding career as well as development of the society.

    Learning methodology

    • Learners are given an overview of the course and its connection to life and work.
    • Learners are then exposed to the specific tool(s) used in the course through the various real-life applications of the tool(s).
    • Learners are then acquainted with the careers and the hierarchy of roles they can perform at workplaces after attaining increasing levels of mastery over the tool(s).
    • Learners are then acquainted with the architecture of the tool or Tool Map so as to appreciate various parts of the tool, their functions and their inter-relations.
    • Learners are then exposed to simple application development methodology by using the tool at the beginner’s level
    • Learners then perform the differential skills related to the use of the tool to improve the given ready-made outputs.
    • Learners are then engaged in appreciation of real-life case studies developed by the experts.
    • Learners are then encouraged to proceed from appreciation to imitation of the experts.
    • After imitation experience, they are required to improve the expert’s outputs so that they proceed from mere imitation to emulation.
    • Finally, they develop the integral skills involving optimal methods and best practices to produce useful outputs right from scratch, publish them in their ePortfolio and thereby proceed from emulation to self-expression.

    Evaluation Pattern

    Evaluation Pattern of DEEP Courses consists of 4 Sections as per below table:

    Section No. Section Name Total Marks Minimum Passing Marks
    1 Learning Progression 25 10
    2 Internal Assessment 25 10
    3 Final Online Examination 50 20
    Total 100 40
    4 SUPWs (Socially Useful and Productive Work in form of Assignments) 5 Assignments 2 Assignments to be Completed & Uploaded

    MKCL’s DEEP Certificate will be provided to the learner who will satisfy the below criteria:

    1. Learners who have successfully completed above mentioned 3 Sections i.e. Section 1, Section 2 and Section 3
    2. Additionally, learner should have completed Section 4 (i.e. Section 4 will comprise of SUPWs i.e. Socially Useful and Productive Work in form of Assignments)
      • Learner has to complete and upload minimum 2 out of 5 Assignments

    DEEP Course Fee

    For course fee details, please contact your nearest Authorised Learning Center (ALC).

    To locate nearest ALC: please click here

    View Courses on Offer

    Recommended Courses

    DEEP Courses
    DEEP Courses
    Nationwide