You are previewing JavaScript Projects for Kids.
O'Reilly logo
JavaScript Projects for Kids

Book Description

Gear up for a roller-coaster ride into the world of JavaScript and programming with this easy-to-follow, fun, and entertaining project-based guide

About This Book

  • Get to know the concepts of HTML and CSS to work with JavaScript

  • Explore the concepts of object-oriented programming

  • Follow this step-by-step guide on the fundamentals of JavaScript programming

  • Who This Book Is For

    If you've never written code before or you are completely new to the world of web programming, then this book is the right choice for you. This book is for kids of age 10 years and above and parents who are completely new to the world of programming and want to get introduced to programming.

    What You Will Learn

  • Learn how to work with Google Developer tools to iterate, debug and profile your code

  • Develop a Battleship game using the basic concepts of HTML and CSS

  • Get to know the fundamentals of JavaScript programming

  • Create our own version of Pac Man game.

  • Discover the vital concepts of object-oriented programming

  • In Detail

    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.

    Style and approach

    This is an easy-to-follow, informative, and fun guide that takes a project-based approach to teaching programming in JavaScript. You will learn everything you need to get started with serious web application development.

    Downloading the example code for this book. You can download the example code files for all Packt books 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 to have the code file.

    Table of Contents

    1. JavaScript Projects for Kids
      1. Table of Contents
      2. JavaScript Projects for Kids
      3. Credits
      4. About the Author
      5. About the Reviewer
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. Exploring JavaScript in the Console
        1. Installing Google Chrome
        2. Installing Atom
        3. Chrome Developer Tools
        4. Our first program
        5. Why do we use Chrome Developer Tools?
        6. Why do we use Atom as the text editor?
        7. Exercise
        8. Summary
      9. 2. Solving Problems Using JavaScript
        1. Variables
        2. Comments
        3. Arithmetic operators
          1. Addition
          2. Subtraction
          3. Multiplication
          4. Division
          5. Modulus
        4. More operators and operations
          1. Increment or decrement operators
          2. Assignment operators
          3. JavaScript comparison and logical operators
        5. Summary
      10. 3. Introducing HTML and CSS
        1. HTML
          1. Your first webpage
          2. More HTML tags
          3. Coloring HTML text
          4. Linking HTML text
          5. Inserting an image
        2. CSS
        3. JavaScript on an HTML page
        4. Summary
      11. 4. Diving a Bit Deeper
        1. JavaScript methods
        2. HTML buttons and form
          1. Buttons
          2. Form
        3. If statement
        4. Switch-case
          1. Exercise
        5. Loops
          1. The for loop
            1. Exercise
          2. The while loop
            1. Exercise
        6. Summary
      12. 5. Ahoy! Sailing into Battle
        1. The HTML part
        2. The CSS part
        3. The JavaScript part
        4. The final code
        5. Summary
      13. 6. Exploring the Benefits of jQuery
        1. Installing jQuery
        2. Explaining the code
        3. Going deeper
          1. The load() method
          2. The keyup() and keydown() methods
          3. The change() method
          4. The blur() and focus() methods
          5. The resize() method
          6. The scroll() method
        4. Summary
      14. 7. Introducing the Canvas
        1. Implementing canvas
        2. Adding JavaScript
        3. Drawing a rectangle
        4. Drawing a line
        5. A quick exercise
        6. Drawing a circle
        7. Draw linear gradient
        8. A quick exercise
        9. Let's make a clock!
        10. Summary
      15. 8. Building Rat-man!
        1. Game user interface
        2. Adding functionalities to the game
          1. The app.main.js file
          2. The app.display_functions.js file
          3. The app.init.js file
        3. Images for Rat-man!
          1. The monsters folder
          2. The player folder
          3. The portal folder
          4. The walls folder
        4. Adding images to our cats
        5. Draw the canvas
          1. The app.key_handler.js file
          2. The app.movement_functions.js file
          3. The app.constants.js file
        6. Playing the game
        7. Summary
      16. 9. Tidying up Your Code Using OOP
        1. Inheritance in JavaScript
        2. Encapsulation in JavaScript
        3. Dissecting Hangman
        4. Summary
      17. 10. Possibilities
        1. JavaScript as your first programming language
          1. JavaScript is everywhere
          2. JavaScript developer as profession
        2. All chores can be done by JavaScript
          1. Robotics
          2. 3D games
          3. Making apps for your smartphones
          4. Running web servers
          5. Running Ruby and Python
          6. Writing OS-independent desktop applications
          7. Web scraping and screenshotting
          8. Web analytics
          9. Responsive and interactive contents
          10. Animation
          11. Creating cookies
        3. Awesome JavaScript examples
        4. Summary
      18. Index