JavaScript For Kids For Dummies
Overview
Have big dreams? Kick start them with JavaScript!
If we've learned one thing from the Millennial generation, it's that no one is too young to make history online. JavaScript For Kids For Dummies introduces pre-teens and early teens alike to the world of JavaScript, which is an integral programming language that drives the functionality of websites and apps. This informative, yet engaging text guides you through the basics of coding with JavaScript, and is an essential resource if you want to expand your technology skills while following easy, step-by-step instructions. Through small, goal-oriented projects, you learn key coding concepts, while actually creating apps, games, and more. This hands-on experience, coupled with the presentation of ideas in a simple style, allows you to both learn and retain JavaScript fundamentals.
JavaScript has been heralded as 'the programming language
of the web,' and many kids are interested in learning how to use it; however, most schools don't offer coding classes at this level, and most families can't afford the high cost of coding classes through a summer camp. But this can't stop you from developing your JavaScript coding skills! This fun text is all you need to get started on your JavaScript journey.
- Explore the basics of JavaScript through the creation of a calculator app
- Deepen your understanding of HTML, arrays, and variables by building a grocery shopping app
- Learn conditional logic through the development of a choose your own adventure game
- Discover loops and strings by creating a lemonade stand app and MadLibs-style game
JavaScript For Kids For Dummies brings pre-teens and early teens into the world of coding by teaching them one of the key Web design languages.
Read More
About The Author
Chris Minnick and Eva Holland are experienced web developers, tech trainers, and coauthors of Coding with JavaScript For Dummies. Together they founded WatzThis?, a company focused on training and course development.
Sample Chapters
javascript for kids for dummies
CHEAT SHEET
When you’re programming in JavaScript, you need to know how to convert CSS property names to JavaScript. An important part of JavaScript’s ability to perform useful functions in the browser is its ability to respond to events, including those listed here. Finally, some words cannot be used as JavaScript variables, functions, methods, loop labels, or object names; those reserved words are listed here.
View Cheat Sheet
View Cheat Sheet
HAVE THIS BOOK?
View Book Companion Site
Access practice tests
Additional Book Resources
Articles from
the book
The most common way to get user input for a JavaScript program is by using HTML form elements. The latest version of HTML, HTML5, has several new form elements and attributes.
Text inputs
Text inputs are the most basic type of HTML form field. They’re used for giving the website user a blank input where she can enter any value.
The most commonly used types of loops in JavaScript are the for loop and the while loop. However, there are a couple other, more specialized, types of loops you may need to use.
for...in
The for...in loop performs statements repeatedly, once for each item inside an object or an array. For example, the following object has three properties in it:
var mySalad = {tomatoes: 3, cucumber: 2, lettuce: 1};
Using the for.
In order to be compiled correctly into machine language instructions, JavaScript programs need to be written very precisely. As a programmer, your job is to think about the big picture of what you want the program to do, and then break it down into bite‐size steps that can be accomplished by the computer without errors.
In this project, you modify and add styles to an HTML robot named Douglas. Douglas was delivered from the robot factory this morning. His JavaScript skills are outstanding; he doesn't need much maintenance (just a new variable to play with every now and then); and he tells good jokes!
The only problem is, his looks are a bit boring!
JavaScript
CSS properties are what change the characteristics of elements. Douglas the JavaScript Robot's beautiful eye color, the size of his body and arms, the roundness of the corners of his head, and the position of his different parts are all determined by the values of properties.
To get started, open your web browser and log into the public dashboard.
Just as you can use JavaScript to change the HTML in a web page, you can also use it to change CSS styles. The process is very similar.
The first step is to select the element you want to apply or change a style on. For example, to select a robot's left eye, you can use the following code:
document.getElementById("lefteye")
After you've selected an element, you can change its style by attaching the style property to the selector, followed by the style you want to change.
You can convert CSS property names to JavaScript. However, there are a few things you should remember if you plan on doing this. When changing styles with JavaScript, there are a couple simple rules:
If the CSS property is one word (such as height), it remains as it is.
If the CSS property is more than one word, separated by dashes, it gets converted to camelCase.
Creating an array in JavaScript starts the same way as any variable: with the var keyword. However, in order to let JavaScript know that the object you're making isn't just a normal variable, you put square brackets after it.
To create an array with nothing inside it, just use empty brackets, like this:
var favoriteFoods = [];
To create an array with data inside it, put values inside the brackets, separated by commas, like this:
var favoriteFoods = ["broccoli","eggplant",<br/>"tacos","mushrooms"];
Storing different data types
Arrays can hold any of the different data types of JavaScript, including numbers, strings, Boolean values, and objects.
You can create functions in JavaScript. The most common way to create a function in JavaScript is by using the function keyword. Here’s an example of that technique in action:
function myFunction() {
// do something
}
This function definition creates a function that has a name. Whenever the function is called using the name of the function, it will run:
myFunction();
Another way to create a function is by writing an anonymous function.
The one essential tool that you need for working with JavaScript is a web browser. Google Chrome is currently the most popular web browser, and it has a number of great tools for working with JavaScript.
You have many different web browsers to choose from, and nearly all of them will do a great job running JavaScript.
JavaScript
JavaScript gives you several ways to modify arrays. The first way is to give an existing array element a new value. This is as easy as assigning the value. Follow these steps in your JavaScript Console to see how this works:
Create a new array with the following statement:
var people = ["Teddy","Cathy","Bobby"];
Print out the values of the array elements with this statement:
console.
By using JavaScript, you can change any part of an HTML document in response to input from the person browsing the page. Before you get started, take a look at a couple of concepts. The first is a method called getElementById.
A method is an action that's done to or by an object in a JavaScript program.
Fetching elements with getElementById
getElementById is probably the easiest and most commonly used way for JavaScript programmers to work directly with HTML.
JavaScript
In JavaScript, you can combine input and output to display customized output, based on input from a user. This is really the heart of what JavaScript can do for web pages!
Follow these steps in the JavaScript Console to create a letter to yourself in your web browser. Make sure to press Return or Enter after the end of each statement (after each semicolon).
Creating a variable in JavaScript is pretty simple. To create a variable, you use the var keyword, followed by the name of the variable, and then a semicolon, like this:
var book;
As a programmer, you have a lot of flexibility when naming your variables. You can be very creative in naming your variables, but you don't want to get too crazy.
Creating a JSFiddle account for your JavaScript programming isn't required, but it will make viewing and sharing your work later on easier. Follow these steps to create a JSFiddle account:
Click the Fork button in the top menu.
When you create your own version of a program that's based on someone else's code, it's called forking their code.
JavaScript comments are a way that you can put text into a program that isn't a string or a statement. This may not sound so great, but the thing that makes comments so important and useful is precisely that they don't cause JavaScript to do anything at all.
Programmers use comments within their code for several reasons:
To tell their future selves, and anyone else who works on the program in the future, why they wrote something in the particular way they did
To describe how the code they wrote works
To leave themselves a note telling what they still need to do, or to list improvements that they intend to make at a later date
To prevent JavaScript statements from running
JavaScript has two different kinds of comments: single‐line and multi‐line.
JavaScript
One way to ask a user for data is by using the JavaScript prompt command. To try out the prompt command, open the JavaScript console and type the following:
prompt("What is your name?");
After you press Return or Enter, a pop‐up window appears in your browser window with a text field, as shown here.
Prompting the user for input.
JavaScript
You've received data from the user in JavaScript and know how to store that data, but how do you respond? Take a look at two of the ways that you can use JavaScript to respond to the user.
Using alert() to respond in JavaScript
The alert() command pops up a notification box in the user's browser containing whatever data is between the parentheses.
It's time to start experimenting with some real JavaScript code! If you don't already have it open, open the JavaScript Console by selecting it from the Other Tools menu under the Chrome menu, or by clicking the Console tab in the Developer Tools.
Follow these steps to run your first JavaScript commands:
Click inside the JavaScript console, near the >, to start inserting code.
After you've created a variable in JavaScript, you can store any sort of data inside it. When the data is in there, you can recall it at any time. Try it out!
Open the JavaScript Console in Chrome.
Create a new variable named book by typing the following and then pressing Return (Mac) or Enter (Windows):
var book;
You've created your container, or variable, and named it "book.
CSS colors describe the millions of possible colors that a web browser can display by using different combinations of red, green, and blue.
Here's an example of a CSS color in hexadecimal notation:
#9BE344
Take a closer look at this code.
The hash symbol (#) indicates that this is a hexadecimal code. After that, the first and second symbols (9B) indicate the shade of red to blend into the new color, the third and fourth symbols (E3) indicate the shade of green to blend in, and the fifth and sixth symbols (44) indicate the amount of blue.
Unlike in strings in JavaScript, the contents and spelling of text outside of quotes matters a lot. When text isn't surrounded by quotes (single or double) in JavaScript, it's considered part of the code of the JavaScript program.
JavaScript code is very picky about spelling and capitalization. In JavaScript code, the following words are completely different:
FOR
for
For
Only the one in the middle means anything special to JavaScript.
In JavaScript programming, a piece of text inside of quotes is called a string. You can remember this name by thinking of text inside quotes like a piece of string with letters, numbers, and symbols tied to it. These letters stay in the same order, and each one takes up a certain amount of space on the string.
Do you think JSFiddle is a web app, a website, or both? It's actually both. In fact, every web application is a website. Not all websites are web applications, however. To get started with JSFiddle, open your web browser and type http://jsfiddle.net into the address bar. You'll see the JSFiddle website, shown here.
When you’re programming in JavaScript, you need to know how to convert CSS property names to JavaScript. An important part of JavaScript’s ability to perform useful functions in the browser is its ability to respond to events, including those listed here. Finally, some words cannot be used as JavaScript variables, functions, methods, loop labels, or object names; those reserved words are listed here.
Forming JavaScript sentences is called writing statements. Statements are mostly made up of operands (which are like nouns) and operators (which are like verbs). An expression in JavaScript is any valid piece of code that resolves to a value.
When you say that an expression "resolves to a value," what you mean is that when everything the computer needs to do is done, some sort of value is produced.
A variable name should accurately identify your variable. When you create good variable names, your JavaScript code becomes easier to understand and easier to work with. Properly naming variables is really important! Here are rules JavaScript has for naming variables:
Variable names cannot contain spaces.
Variable names must begin with a letter, an underscore (_) or a dollar sign ($).
JavaScript
White space is all the spaces, tabs, and line breaks in your program. JavaScript ignores white space between words and between words and symbols in code. For example, in a message printer program, you could make the whole thing easier for people to read by spacing it out over multiple lines, as shown here.
for (var i = 0; i < 300; i++) {
document.
JavaScript
Every element in an HTML document is a rectangle. Even if an element looks like a circle (like Douglas's eyes), it's actually treated like a rectangle surrounding the circle. Because everything is a rectangle, you can change the size of elements with CSS by adjusting their width and height.
To get started, open your web browser and log into the public dashboard.
Switch statements in JavaScript are like highways with many different exits. The switch statement chooses among multiple cases by evaluating an expression. These values are like the exits. Each of these values in a switch statement is called a case.
The switch statement starts with the switch keyword, followed by an expression in parentheses and then a series of different options (called cases).
In English, people talk in sentences. In JavaScript, a single instruction to the computer is called a statement. Like a sentence, statements are made up of different parts and have certain rules that they must follow in order to be understood.
Following shows an example of a statement.
alert("Coding is fun!");
This statement causes a web browser to open up a popup alert window with the sentence "Coding is fun!
The Boolean data type in JavaScript can store one of two possible values: true or false. Boolean values are the result when you do comparisons in JavaScript. If you ask JavaScript something like: "Is 3 equal to 30?," it will respond with a Boolean value of false.
The Boolean data type is named after the mathematician George Boole, so it's always capitalized.
One type of data that JavaScript understands is the number data type. Numbers can be positive or negative, as well as whole numbers or decimal numbers. Numbers are stored in variables without using quotation marks.
The range of possible numbers that can be used in JavaScript goes from very, very small to very, very large.
The string data type in JavaScript holds text. There are a few cool tricks that you can do with strings besides just storing and printing them.
One cool string trick is to count how many characters the string is made up of. The way you do that is to use .length after the string, or after a variable holding the string.
All JavaScript programmers — beginners and experts alike — have times when they write a program that seems like it should work, but it just doesn’t. Computers will always run programs that are coded correctly, so how do you find the error in your code? Where do you start looking and how do you track it down? Here are some tips for the first things you should look for when a JavaScript program just won’t run.
Web pages are much more than just static displays of text and graphics. JavaScript gives web pages interactivity and the ability to perform useful work. An important part of JavaScript’s ability to perform useful functions in the browser is its ability to respond to events.
Here is a list of common events that happen in web browsers that JavaScript can respond to.
Arrays are a special kind of variable in JavaScript that can hold multiple values using the same name. You can picture an array as being similar to a dresser with multiple drawers. Each drawer can hold something different, but the whole thing is still your dresser.
If you want to tell someone which drawer to look in for socks, you can say, "The socks are in the top drawer.
Functions are programs inside of programs. Functions in JavaScript are great at handling tasks that may be required multiple times by different parts of a program. They're also a great way to keep things organized within your program.
Built‐in functions
Some functions are built into JavaScript, such as the methods of arrays, strings, numbers, and other objects.
JavaScript has some reserved words you should know before you begin coding. The following table contains a list of JavaScript reserved words, which cannot be used as JavaScript variables, functions, methods, loop labels, or object names.
abstract
boolean
break
byte
case
catch
char
class
const
continue
debugge
Of all the things that were invented in the earliest days of the web, the thing that has had the biggest impact over the longest time was JavaScript. In the early days of the web, every web page consisted of nothing but plain text in different sizes with links between pages.
There were no web forms, there certainly wasn't any animation, and there weren't even different styles of text or pictures!
Functions in JavaScript have a special vocabulary and way that they must be written and used. To really understand functions, you need to be able to speak their language. So, look at a couple words and take apart a function to see what's inside!
Defining a function
When you write a function, that's called defining it.
Array methods in JavaScript are built-in things that can be done with or to JavaScript arrays. These methods are perhaps the best part about working with arrays in JavaScript. Once you know how to use them, you’ll save yourself a lot of time and effort. Plus, they can also be a lot of fun!
JavaScript’s built-in array methods are listed here.
In addition to the basic data types (string, number, and Boolean), operands in JavaScript can also be of the object type. JavaScript objects can have properties (things that describe them) and methods (things that they can do).
Now, you find out how to create your own objects! To create an object, start with the var keyword, just as you do to create any variable, followed by an equal sign (=):
var myObject =
After the equal sign is where things get a little different.
Load More Articles
Related Books
0:00
0:00
https://cdn.prod.website-files.com/6630d85d73068bc09c7c436c/69195ee32d5c606051d9f433_4.%20All%20For%20You.mp3
Frequently Asked Questions
No items found.
