Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Projects for the JavaScript beginner

I'm currently learning JavaScript from the Lynda.com video series. It seems to be going well so far.

I was wondering what sort of introductory projects you would recommend for someone new to programming, using the JavaScript language. Perhaps you may suggest that I think of something of interest and shoot to get it done. I really don't know yet, anything I'd eventually like to build seems far from reach, ie. element animation, etc.

I have experience with jQuery, but for this purpose I wouldn't use a framework.

Thank you.

like image 866
Jonathan Musso Avatar asked Mar 11 '11 19:03

Jonathan Musso


3 Answers

A good beginning is:

The Guess The Number Game

Here is good link of beginning programs (in Python)

http://www.scribd.com/doc/50490971/11/Guess-the-Number-s-Source-Code

Have the program pick a random number, you try to guess it. The program tells you if you are "high", "low", or "correct". At the end of the game, it tells you how many tries it took you to guess.

Add ons:

  • variable "you won!" messages depending on how long it took you.
  • include "very high", "very low", etc. to your guess responses
  • allow the game to be replayed

For ease of use, I would probably use a library like JQuery to help with the UI for the game. Ok, so the UI is trivial, but it is alot easier to jazz up later on using JQuery.

like image 156
Samg Avatar answered Oct 10 '22 17:10

Samg


These two go well together:

  • Retrieve data from an XML file from your server using XMLHttpRequest
  • Construct a <table> (of tabular data, of course) using only loops and DOM functions, no HTML.
like image 45
drudge Avatar answered Oct 10 '22 17:10

drudge


Also being a somewhat beginner, one of the first projects I made, was a pixel maker.

For my basic version, I used jquery, but I would say making it in pure javascript could be a nice challenge! It also gives a basic understanding of how illustration programs like photoshop, krita are built.

Here is a very high level example: http://pixelartmaker.com/

like image 2
ShowstopperCode1 Avatar answered Oct 10 '22 18:10

ShowstopperCode1