Learn JavaScript programming by exercises & assignments

A fast way to learn JavaScript is to read this short online tutorial. Optionally, for more examples and assignments to work on, you may get the book - Sams Teach Yourself JavaScript in 24 Hours. Also, refer to the official site - W3Schools for examples, commands, functions, and more.

Exercises:

  • Create a single HTML page (or multiple pages) that shows JavaScript alert saying 'Hello World!'.
  • Using Function, Loop, Prompt, etc, prompt user to input a number and alert whether the number is prime. You may use modulo operator %.
  • Using Array and String, if the number is not prime, display (with alert) all of its divisors.
  • Using Event and Form, create a text input box that allows user to enter a number. After a number is submitted, display the result in another element or input box.

More Advanced Assignments:

  • OOP: Create 2 or more objects from a class called Book. Each book contains a title and a randomly generated year. Display all books in an HTML table.
  • AJAX: Use asychronous JavaScript call to display the server time. The PHP file can just print out the current time by using built-in function date().
  • CLOSURE: Create a countdown timer that counts to 0 from any number of seconds specified by user and pops up alert. You may use built-in function setTimeout().
  • CSS & CSS3: Create a modal window in HTML that says "Hello World" using CSS fixed positioning.
  • JQUERY: Create a DIV box that allows resizing by dragging.
  • HTML5 Canvas: Create an analog clock with 3 needles (hour, minute, second) that updates and displays local time every second.

Bonuses:

  • Write a function that compares 2 strings and returns 1 if the 1st string is alphabetically greater, 0 if equal, -1 if the 2nd is greater. Do not use built-in string comparison function.
  • Write a function that sorts an array of numbers (using merge-sort, quick-sort, etc). Do not use built-in sorting function.
  • Create 20 circles of random colors and directions that move and bounce around in the Canvas.

Links: