We are currently creating a course on React. If you find anything difficult to understand in React, let us know about it so that we can try our level best to cover it in our course.
Just write to us at mail@codeguage.com.
Home > Courses > JavaScript
Web DevLanguageFrontend

JavaScript

JavaScript is an interpreted multi-paradigm scripting language that forms the perfect web triad together with HTML and CSS of the front-end layer of web development.

A simple programming language to make web pages interactive

Table of contents ↓
  1. (Easy)
  2. Units
    15
  3. Chapters
    79
  4. Quizzes
    27
  5. Exercises
    55
  6. Projects
    1
Start Learning  

Things to know

What is this course about?

JavaScript is a client-side scripting language used together with HTML and CSS to build dynamic and interactive webpages. It completes the front-end development triad together with HTML and CSS and has a high demand out in the market. It has got a large supportive community with the help of which you can solve nearly any problem you face while developing programs in it.

JavaScript is a fairly easy-to-learn language as you can see from the statistics (on the right or below) and is a good choice for beginners for their first programming language as it can give them the feel of a programming flavor and yet not make things overwhelming. However its measure of ease is relative to other programming languages out there like C, C++, Java etc. These languages are quite complicated to understand and write programs in and have a low-level nature as compared to JavaScript's high-level one. So in short if you've learnt, or tried to learn any of these languages then learning JavaScript will be a piece of cake for you!

For those of you who haven't learnt any of these, the good news is that even for you JavaScript will be a piece of cake because of this course!

What will you learn in this course?

This course is aimed at making you perfect in developing JavaScript programs by teaching you how to do things and how to do them the right way. When you complete this course you will definitely feel, think and work like a real programmer and even be able to solve real word problems and create real programs on your own.

Being specific, at the end of this course you will know:

  1. JavaScript basics where to write JavaScript code, how to write it, how to use the console etc.
  2. How to work with numbers, strings (text), and booleans
  3. How to solve conditional problems using if..else statements and iterational problems using for and while loops
  4. How to work with data structures like arrays and objects
  5. How to work with functions and complex topics like closures and recursions
  6. How to work with objects and the importance of Object-Oriented Programming in general terms
  7. How to employ constructors and prototypes to emulate the behavior of OOP classes and sub classes
  8. How to work with HTML DOM and the Events API in building page interactivity and dynamicality by querying HTML and CSS and responding to user actions like clicking a button
  9. How to use JavaScript predefined functions to calculate dimensions of elements, viewports, including or excluding padding, borders, margins, outlines etc.
  10. How to work with HTTP related stuff using JavaScript, like cookies.

Although we have given roughly a lot of information on our course, you can check out more below in the course overview and explore the details of each unit seperately.

Why should you take this course?

There are tons, or maybe even more, JavaScript courses out there on search engines and in that ton we are also a listing, but how are we different from others?

  1. We'll take you through the course in a carefully planned hierarchical manner going from extreme basics to basics, to intermediate and so on. We won't introduce concepts to you before explaining them, or if we do so (very rarely) we will surely explain them at some point in the same chapter, same unit or some other unit
  2. We will deal with complex topics like closures, prototypes and explain them to you in a clear and precise manner (where most resources lack)
  3. We will introduce you to many coding ideas and how are they being used in today's programming era, like lazy loading, ajax, image galleries etc. Some will be covered in this course while some will be added in our Tutorials.
  4. We will take small basic quizes from you, between or at the end of every unit, to test your understanding of a given concept, give comments to your scores, give answers to wrong answered questions and thus make you improve as a whole in your skills!

Prerequisites

  1. HTML

    This course explores the advanced aspects of JavaScript, so obviously it's a clear requirement.

  2. CSS

    Although we won't be using much CSS in this course, the language is a requirement for learning JavaScript and hence we've included it in this very list as well.

Table of contents

Foundation

In this unit we begin with an introduction to the Javascript language with get you familiar with variables, comments, data types, and much more basic stuff. This unit will make you have a solid ground with coding in JavaScript.

Introduction
Get Started
Console
Basics
Basics Quiz
Addition Calculator Exercise
Variables
Simple Swapping Exercise
Constants
Comments
Data Types
Data Types Quiz
Sorted Numbers Exercise
Control Flow
Functions
Linear Search Exercise
Iterative Factorial Exercise
Operators
Rudimentary Calculator Exercise
Palindromes Exercise
Scopes
Values and References
Foundation Quiz

Numbers

Here we will get introduced to concepts in JavaScript numbers like integers, floats,parsing numbers from strings and much more stuff like that. We will also see some common methods deployed in JavaScript on top of the Math object.

Basics
Finding The Minimum Exercise
Number Methods
Number Methods Quiz
Better Precision Exercise
Math Object
Bisection Method Exercise
Numbers Quiz

Strings

Strings are an important concept in the programming world, and so are they in JavaScript. This course will introduce you to a ton of concepts, properties and methods of strings. We will also discover regular expressions - a very powerful way to match strings.

Basics
Bitwise NOT Exercise
Unicode
Manual Uppercasing Exercise
Letter Frequency Exercise
String Methods
Hyphenated Words Exercise
endsWith() Polyfill Exercise
Title Casing Exercise
Camel Words Exercise
String Split Exercise
Strings Quiz

Conditions

We will be exploring condition-based execution of code using the if family of conditional statements.

Booleans
if-else
Exam Grades Exercise
switch
Status Codes Exercise
Ternary Operator
Conditions Quiz

Loops

In loops, we extend the idea of conditions to repeat a block of code over and over again until a condition is being fulfilled. Loops are an integral part of computing since they can automate thousands of lines of code in probably few lines.

for Loop
Multiply All Exercise
Greatest Common Divisor Exercise
Selection Sort Exercise
while Loop
Collatz Conjecture Exercise
Loops Quiz

Arrays

We begin with introducing you to arrays in general and then move on to explore their basics in JavaScript. You will also learn how to make full use of arrays using the properties and methods available to them

Basics
Array Reverse Exercise
Array Methods
Grocery List Exercise
Camel To Title Exercise
Array Methods Quiz
Matrix Arithmetic Exercise
Matrix Rotation Exercise
Matrix Transposition Exercise
Sorting
Binary Search Exercise
Arrays Quiz

Functions

Functions are vital to programming and accordingly we put a lot of focus on making you understand their fundamental concepts. We will take a look at arguments, IIFE's, recursions, and a lot more.

Basics
Basics Quiz
Arguments
Closures
Closures Quiz
Euclidean Distance Exercise
Recursions
Euclidean Algorithm Exercise
Function Methods
Function Methods Quiz

Objects

The heart of JavaScript will be detailed in this very unit - objects. We will look at how to create objects and then move on to explore advanced stuff like constructors and prototypes explained in a clear and easy manner.

Basics
Property Attributes
Constructors
Constructors Quiz
Prototypes
Prototypes Quiz
Square Matrix Class Exercise
Object.create() Polyfill Exercise
Object Methods
Objects Quiz

Exceptions

Handling errors is an integral part of all modern-day computer programs. In this unit, we'll see how to effectively handle errors in JavaScript using the try...catch set of statements.

Introduction
Basics
Required Arguments Exercise

HTML DOM

In this unit, we'll learn how to interact with the HTML content of a web page. By far, the most common thing done using JavaScript is DOM mutation and that's what we'll get to explore throughout this unit. We'll see how to access HTML elements, and then modify their properties, add/delete attributes, remove them completely from the markup, and so on and so forth.

Introduction
Basics
Nodes
Nodes Quiz
Text Content Exercise
Redefining replaceChild() Exercise
Node Count Exercise
Elements
Redefining insertAdjacentElement() Exercise
Redefining firstElementChild Exercise
Building Tables Exercise
Attributes
Attributes Quiz
Redefining className Exercise
HTML Serialization Exercise
Selecting Elements
Selecting Elements Quiz
Document Fragments
Document Fragments Quiz
Dynamic Lists Exercise
append() Polyfill Exercise
Documents
Documents Quiz
HTML DOM Quiz

CSSOM

The next logical step after learning how to access HTML elements in JavaScript is to be able to compute their dimensions. This unit teaches us all the aspects of such computations.

Introduction
The style Property
Viewport
Colored Squares Exercise
Screen
Client
Grid Lines Exercise
Elements
Computed Styles
CSSOM Quiz

Events

Extend the learnings of HTML DOM by using events in JavaScript. This unit will make sure you know what are events, how they work, some of their key ideas and implementing them in actual code.

Introduction
Basics
A Simple Counter Exercise
Many Counters Exercise
Event Objects
Div Clicked? Exercise
Sortable Tables Exercise
Event Propagation
Mouse Events
Pointer Circle Exercise
Creating Rectangles Exercise
Right-Click Menu Exercise
Keyboard Events
Scroll Event
Scroll Event Quiz
Load Events
Hashchange Event
Popstate Event
Popstate Event Quiz

Drag and Drop

Drag-and-drop is common in native desktop applications. But JavaScript is by no means behind. This unit aims at teaching us how to set up a simple drag-and-drop program using minimal JavaScript. We'll see, in detail, things such as draggable elements, drag data and what exactly are dropzones. Finally, we'll cover some drop effects before ending with the final unit quiz.

Basics
Basics Quiz
Draggable Elements
Drag Data
Dropzones
Drop Effects
Drag and Drop Quiz

Touch Events

With the rise of touch-based devices, it's difficult to ignore the importance of touch events in JavaScript. In this unit, we'll start by discovering the history of touch events, followed by understanding how to set up touch event handlers in applications. Finally, we'll explore the two most important interfaces when working with touch events — TouchList and Touch.

Introduction
Basics
The TouchList Interface
The Touch Interface

Misc

In this unit, we'll cover some of the miscellaneous concepts of JavaScript that couldn't be grouped under one single category. These include APIs such as Date, History, Location, and some global functions such as setTimeout() and setInterval().

Dates
Cookies
Timers
History
Location

Project: Analog Clock

This is the first of the projects that you'll create in this course. The project is to create an analog clock, similiar to the ones mounted on the walls of our house.

Let's begin learning.

Start Learning  

More to explore

Learning shouldn't stop at just one course!

Web Dev
AJAX

Reload content without reloading the whole page

  Easy
10 Chapters
Web DevLanguage
Advanced JavaScript

The real-pro aspects of JavaScript

  Average
26 Chapters
Web DevLanguage
CSS

A language used to design web pages in countless ways

  Simple
46 Chapters
Web DevFrontend
React

A JavaScript library to built interactive user interfaces

  Easy
13 Chapters
Explore Courses  
Explore Tutorials