Book Image

JavaScript Projects for Kids

By : Syed Omar Faruk Towaha
Book Image

JavaScript Projects for Kids

By: Syed Omar Faruk Towaha

Overview of this book

JavaScript is the most widely-used programming language for web development and that's not all! It has evolved over the years and is now being implemented in an array of environments from websites to robotics. Learning JavaScript will help you see the broader picture of web development. This book will take your imagination to new heights by teaching you how to work with JavaScript from scratch. It will introduce you to HTML and CSS to enhance the appearance of your applications. You’ll then use your skills to build on a cool Battleship game! From there, the book will introduce you to jQuery and show you how you can manipulate the DOM. You’ll get to play with some cool stuff using Canvas and will learn how to make use of Canvas to build a game on the lines of Pacman, only a whole lot cooler! Finally, it will show you a few tricks with OOP to make your code clean and will end with a few road maps on areas you can explore further.
Table of Contents (17 chapters)
JavaScript Projects for Kids
About the Author
About the Reviewer

Our first program

Now, let's check whether JavaScript works on your machine.

From the tools, select Console. If you cannot find Console, click on the >> symbol, as follows:

Once your console is open, type the following code and hit Enter on your keyboard:

document.write("Hello World");

If you can see the output on the left-hand side panel as shown in the following, then you have successfully configured JavaScript on your browser:

The output that you will see is as follows:

Hello World



Downloading the example code

You can download the example code files for all the Packt books that you have purchased from your account at If you purchased this book elsewhere, you can visit and register in order to have the files e-mailed to you directly.

If you cannot see the text, check your code or install Google Chrome with administrative rights.

You can also click on the gear button of your console. Check whether Disable JavaScript is unchecked:

You can also debug your JavaScript codes using this tool.

If you type anything wrong; consider that you forgot the inverted commas of the Hello World string, you will get the following errors:

To speed up writing your codes, you may learn some keyboard shortcuts for both console and Atom text editor.

Here are few keyboard shortcuts for console:

  • Ctrl + L: Clear console

  • Tab: Autocomplete common prefix

  • Right arrow: Accept suggestion

  • Ctrl + U: Clear console prompt

  • Up/Down: Next/previous line

  • Enter: Execute command

Here are few keyboard shortcuts for Atom text editor:

  • Ctrl + B: Browse list of open files

  • Ctrl +Alt + R: Reload Atom

  • Ctrl +Shift + L: Change syntax highlighting

  • Alt +Shift + S: Show available code snippets

  • Ctrl +Shift + M: Markdown preview

  • Ctrl +Alt + I: Toggle Developer Tools

  • Ctrl + N: New file

  • Ctrl +Shift + N: New Window

  • Ctrl + P: Open file (type the name to perform a search)

  • Ctrl + O: Open file

  • Ctrl +Shift + O: Open folder

  • Ctrl + S: Save

  • Ctrl +Shift + S: Save as

  • Ctrl + W: Close tab

  • Ctrl +Shift + W: Close window

  • Ctrl + G: Go to line

  • Ctrl + L: Select line

  • Ctrl +Shift + D: Duplicate line

  • Ctrl +Shift + K: Delete line

  • Ctrl + Up/Down: Move line up/down

  • Ctrl + /: Toggle comment line

  • Ctrl + Enter: New line below

  • Ctrl + [/]: Indent/unindent selected lines

  • Ctrl + J: Join lines

  • Ctrl + Alt + .: Complete bracket

  • Ctrl + M: Go to matching bracket

  • Ctrl + Alt + M: Select code inside matching brackets

  • Ctrl + Alt + /: Fold/unfold code

  • Ctrl + Alt + F: Fold selected code

  • Ctrl + Alt + [/]: Fold/unfold all code

  • Ctrl + F: Find in current file

  • Ctrl + Shift + F: Find in project

  • F3: Find next

  • Shift + F3: Find previous

  • Ctrl + Enter: Replace all

  • Ctrl + Alt + /: Use Regex in search

  • Ctrl + Shift + =/-: Increase/decrease text size

  • Ctrl + 0 (zero): Reset text size

  • F11: Toggle fullscreen