Home Programming JavaScript Projects for Kids

JavaScript Projects for Kids

By Syed Omar Faruk Towaha
books-svg-icon Book
eBook $22.99
Print $27.99
Subscription $15.99
$10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
BUY NOW $10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
eBook $22.99
Print $27.99
Subscription $15.99
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
  1. Free Chapter
    Exploring JavaScript in the Console
About 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.
Publication date:
January 2016
Publisher
Packt
Pages
188
ISBN
9781785287176

 

Chapter 1. Exploring JavaScript in the Console

Before we start talking about lines of codes, objects, variables, and so on, we need to know what JavaScript is. JavaScript is a programming language that is used to add interactivities to the web pages and build web applications. Static websites are not very popular these days, therefore, we use JavaScript to make our websites interactive.

Some people also call it a scripting language as it is an easy language and does not require compilers like other languages. JavaScript was not designed as a general purpose programming language, it was designed to manipulate web pages. You can write a desktop application using JavaScript. JavaScript can also access your machine's hardware. You can try making a desktop application with a software development kit (SDK) such as PhoneGap for mobile or the Microsoft app SDK for desktop. The JavaScript codes are interpreted on web pages and then run by a browser. Any modern Internet browser, for example Firefox, Safari, Google Chrome, UC Browser, Opera, and so on, supports JavaScript.

Note

A compiler is a computer program that processes codes and turns them to machine language. Making a website interactive means adding features that are controlled by the users to the website. For example, online registration forms, online calculator, and so on. The Static website has fixed objects and contents and it displays the same information to all the visitors.

Basically, JavaScript is included on an HTML page or written on a separate file that has a .js extension. If you know nothing about HTML, don't worry as you will learn about it in Chapter 3, Introducing HTML and CSS. So, where can you use JavaScript?

The answer is simple, you can do the following:

  • You can create an active user interface.

  • You can control web browsers.

  • You can validate user inputs (if they are typed wrong).

  • You can create custom web pages that can pop up on the browser, holding information or images.

  • You can create dynamic pages without Common Gateway Interface (CGI). CGI is used by the web servers to process a browser's information.

Note

The thing that you should remember is JavaScript is not Java, the programming language developed by Sun Microsystem.

Throughout this book, we will use Google Chrome as the default browser and Atom as the text editor.

If you do not have these two software already installed on your computer, it is necessary to download and install them.

We will use the Atom text editor as it is a cross-platform editor, has a built-in package manager, does smart autocompletion, and has a lot of other advantages.

 

Installing Google Chrome


To install Google Chrome go to http://www.google.com/chrome and click Download now, as shown in the following screenshot:

Then press the Accept and Install button, as shown in the following screenshot:

The installation will be completed depending on your network speed and machine's hardware configurations.

Note

Uncheck Set Google Chrome as my default browser if you don't want to use Google Chrome as your default browser.

 

Installing Atom


To install the Atom text editor, follow the https://atom.io/ link and press Download Windows Installer, as shown in the following screenshot:

A file called AtomSetup.exe will start downloading.

Click on the AtomSetup.exe file to get started with installing Atom.

Tip

Make sure that you give the administrative rights while installing it for better performance.

Atom will launch automatically after the installation is completed.

If you are on another platform, use the Other platforms link:

  • If you are a Mac user, go to the https://github.com/atom/atom/releases/latest link and download the atom-X.X.X-full.nupkg file, where X.X.X is the version number of Atom. Install it by double-clicking on the file.

  • If you are an Ubuntu user, you can follow the https://github.com/atom/atom/releases/latest link and download the atom-amd64.deb file. After downloading it, launch your Terminal in the same folder, where you placed the file after downloading it. Then, write the following code:

    sudo dpkg --install atom-amd64.deb
    

    You may need the administrative password to install it. After the installation is complete, you can run Atom from the Terminal by typing Atom and pressing Enter.

 

Chrome Developer Tools


Let's take a look at the Chrome Developer Tools that are used for JavaScript, specially the console. Since Google Chrome is downloaded and installed on your machine, open the Google Chrome browser, go to the menu (on the right-hand top corner), hover on More tools and select Developer tools, as shown in the following screenshot:

You will see the following tools:

  • Elements

  • Network

  • Sources

  • Timeline

  • Profiles

  • Resources

  • Audits

  • Console

 

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

Congratulations!

Note

Downloading the example code

You can download the example code files for all the Packt books that you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support 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

 

Why do we use Chrome Developer Tools?


The following points the use of Chrome Developer Tools:

  • Easy to see the errors

  • Easy to edit/debug codes using the line numbers

  • Real-time output (No need to refresh the page)

 

Why do we use Atom as the text editor?


The following points the use of Atom as the text editor:

  • Zero-compromise combination of hackability and usability

  • An open source text editor

  • Every Atom window is essentially a locally-rendered web page

 

Exercise


To enhance your knowledge of JavaScript, write a program that will print your name.

 

Summary


In this chapter, we saw how to download Google Chrome and Atom, and install them.

You learned how to write your first code using Chrome Developer Tools (Console). You have also learned a few keyboard shortcuts for Chrome Developer Tools and Atom text editor.

You also learned what JavaScript is, why learning JavaScript is important, and how JavaScript is different from other languages.

We can now jump in the world of JavaScript.

Your journey begins from Chapter 2, Solving Problems Using JavaScript.

About the Author
  • Syed Omar Faruk Towaha

    Syed Omar Faruk Towaha is a data scientist, and currently working at Meta. He has two bachelor's degrees, one in Physics, another in Computer Science and a Master's in Data Science. He is based in London, England, and has interests in data science and IoTs. While Syed is not busy with his jobs, he uses his time to write something about new technologies. His recent publications include Building Smart Drones With ESP8266 and Arduino, Introduction to Rust Programming, Learning C for Arduino, and JavaScript Projects for Kids.

    Browse publications by this author
Latest Reviews (8 reviews total)
Livro excelente para iniciantes. Conteúdo bem organizado.
JavaScript Projects for Kids
Unlock this book and the full library FREE for 7 days
Start now