JavaScript For Kids For Dummies book cover

JavaScript For Kids For Dummies

By: Chris Minnick and Eva Holland Published: 08-24-2015

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.

Articles From JavaScript For Kids For Dummies

page 1
page 2
page 3
page 4
page 5
43 results
43 results
JavaScript For Kids For Dummies Cheat Sheet

Cheat Sheet / Updated 02-25-2022

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
What Are JavaScript Reserved Words?

Article / Updated 01-24-2017

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 debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var void volatile while with

View Article
Functioning Anonymously with JavaScript

Article / Updated 03-26-2016

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. An anonymous function is a function without a name. For example: function () { // do something } At first, this function may seem strange, because there seems to be no way to call it. However, you can assign an anonymous function to a variable, as in this case: var myFunction = function () { // do something } When you’ve done this, you can call the function by using the variable name, followed by parentheses, just as you would if you created a named (not anonymous) function. For example: myFunction(); In practice, both of these methods are usually interchangeable. However, there is an important difference. Named functions can be called from anywhere in a JavaScript program. If you make a function call to a named function, JavaScript goes looking for the function inside your program. Anonymous functions assigned to a variable can only be used after the var statement that creates them is run. So, if you try to run a function created in this way before the var statement that names the anonymous function runs, you’ll get an error. Anonymous function are usually used for cases where you may need to change the function during the program. Changing the anonymous function assigned to a variable is just as easy as changing the value of any variable. For beginners, anonymous functions can take some time to get used to and to get comfortable with. But if you’re aware of their existence, you’ll be able to recognize them. Eventually, you’ll come to know and appreciate all the many uses for anonymous functions.

View Article
Naming JavaScript Variables

Article / Updated 03-26-2016

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 ($). Variable names can only contain letters, numbers, underscores, or dollar signs. Variable names are case-sensitive. Certain words may not be used as variable names, because they have other meanings within JavaScript. Check out this complete list of the reserved words. You’ll be faced with many decisions when choosing how to name your variables: Do you want to begin your variable names with an uppercase letter or a lowercase letter, or do you want to use camelCase? Do you want to use multiple words within your variable names? Do you want to use an underscore (_) between the words in your variable name? (Remember: Variables can’t contain spaces.) Fortunately, you don’t have to make all these choices by yourself. Many professional programmers agree that there are best practices to keep in mind when naming your variables: Don’t use names that are too short. Simple one-letter names or names that don’t make sense are not a good option when naming variables. Use more than one word to name your variable. This will ensure your variable name is precise. When using more than one word in your variable names, always put the adjective to the left. For example, this is correct: var greenGrass. Pick a style for names with more than one word, and stick to it. The two most common ways to join words to create a name are camelCase and using an underscore (_). JavaScript is flexible — either method works. No matter what naming format you choose, remembering and using the best practices and being consistent in your naming format will make your code better organized and help you on your way to becoming a professional JavaScript programmer.

View Article
Troubleshooting Tips for JavaScript

Article / Updated 03-26-2016

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. Check the console The JavaScript Console in Google’s Chrome browser will tell you if there’s an error, even if it doesn’t always tell you exactly what the error is. To open the JavaScript Console, select More Tools → JavaScript Console from the Chrome menu. If you see an error in the console after running your program, it will often include a line number and a link. Click this link to open the spot in the JavaScript where Chrome thinks things went wrong in your program. If you don’t spot the error immediately (which often is the case), move on to the next tip. Look for misspellings JavaScript is picky. Capitalization in variable names as well as in JavaScript keywords makes all the difference. Some JavaScript function names, such as getElementById, are notorious causes of errors as a result of programmers capitalizing them wrong. Look carefully at each variable name and function name. A code editor that includes JavaScript code hints and code coloring can be a very valuable tool when looking for misspelled words. Some code editors will apply a special color to function names that are spelled correctly, while coloring misspelled names differently. Check your brackets Mismatched brackets or parentheses are a common cause of errors. Check to make sure that every parentheses, square bracket, or curly bracket that you open ({) has a matching closing bracket (}). Match up your quotes JavaScript will recognize both single and double quotes as holders for strings. But if you start a string with a single quote, it needs to end with a single quote. The same goes for double quotes. Use console.log() The console.log() function is a useful tool for figuring out where a program goes wrong. Insert console.log() statements throughout your code while debugging to print out the values of important variables. For example, if you have a loop in your program, you can make sure that the loop is running correctly by putting a console.log() statement inside it like this: for (var i = 0; i < 10; i ++) { console.log(“the value of i is: “ + i); } This statement won’t change what happens in the browser window, but if you look in the JavaScript console, you’ll see log entries, indicating that the loop is functioning properly. Take a break Sometimes, the best way to debug a program is to walk away from it and take a break. Get a glass of water, take a nap, read a book, or do anything but stare at the program and pull out your hair. When you return to the program, you’ll be refreshed! And the answer to the problem may appear obvious to you!

View Article
Converting CSS Property Names to JavaScript

Article / Updated 03-26-2016

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. Here is a complete reference of the property name conversions from CSS to JavaScript. CSS Property JavaScript Reference background background background-attachment backgroundAttachment background-color backgroundColor background-image backgroundImage background-position backgroundPosition background-repeat backgroundRepeat border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width borderBottomWidth border-color borderColor border-left borderLeft border-left-color borderLeftColor border-left-style borderLeftStyle border-left-width borderLeftWidth border-right borderRight border-right-color borderRightColor border-right-style borderRightStyle border-right-width borderRightWidth border-style borderStyle border-top borderTop border-top-color borderTopColor border-top-style borderTopStyle border-top-width borderTopWidth border-width borderWidth clear clear clip clip color color cursor cursor display display filter filter float cssFloat font font font-family fontFamily font-size fontSize font-variant fontVariant font-weight fontWeight height height left left letter-spacing letterSpacing line-height lineHeight list-style listStyle list-style-image listStyleImage list-style-position listStylePosition list-style-type listStyleType margin margin margin-bottom marginBottom margin-left marginLeft margin-right marginRight margin-top marginTop overflow overflow padding padding padding-bottom paddingBottom padding-left paddingLeft padding-right paddingRight padding-top paddingTop page-break-after pageBreakAfter page-break-before pageBreakBefore position position text-align textAlign text-decoration textDecoration text-decoration: blink textDecorationBlink text-decoration: line-through textDecorationLineThrough text-decoration: none textDecorationNone text-decoration: overline textDecorationOverline text-decoration: underline textDecorationUnderline text-indent textIndent text-transform textTransform top top vertical-align verticalAlign visibility visibility width width z-index zIndex

View Article
Web Browser Events in JavaScript

Article / Updated 03-26-2016

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. Event Occurs When . . . abort The loading of a file is aborted. blur An element has gone out of focus. In other words, the element is no longer the thing that the user is focusing on. change An element’s value has changed since losing and regaining focus. click A mouse has been clicked on an element. dbclick A mouse has been clicked twice on an element. error A file failed to load. focus An element has come into focus. In other words, the element is what the user is currently focusing on. input The value of an or </span> element is changed.</td> </tr> <tr> <td><span class="code">keydown</span></td> <td>A key is pressed down.</td> </tr> <tr> <td><span class="code">keyup</span></td> <td>A key is released after being pressed.</td> </tr> <tr> <td><span class="code">load</span></td> <td>A file and its attached files have finished loading.</td> </tr> <tr> <td><span class="code">mousedown</span></td> <td>A mouse button has been pressed down on an element.</td> </tr> <tr> <td><span class="code">mouseenter</span></td> <td>A mouse pointer is moved onto the element that has the listener attached.</td> </tr> <tr> <td><span class="code">mouseleave</span></td> <td>A mouse pointer is moved off the element that has the listener attached.</td> </tr> <tr> <td><span class="code">mousemove</span></td> <td>A mouse pointer is moved over an element.</td> </tr> <tr> <td><span class="code">mouseout</span></td> <td>A mouse pointer is moved off the element or one of its children that has the listener attached.</td> </tr> <tr> <td><span class="code">mouseover</span></td> <td>A mouse pointer is moved onto the element or one of its children that the listener is attached to.</td> </tr> <tr> <td><span class="code">mouseup</span></td> <td>A mouse button is released over an element.</td> </tr> <tr> <td><span class="code">mousewheel</span></td> <td>A wheel button of a mouse is rotated.</td> </tr> <tr> <td><span class="code">reset</span></td> <td>A form is reset.</td> </tr> <tr> <td><span class="code">resize</span></td> <td>The document has been resized.</td> </tr> <tr> <td><span class="code">scroll</span></td> <td>The document or an element has been scrolled.</td> </tr> <tr> <td><span class="code">select</span></td> <td>Text has been selected.</td> </tr> <tr> <td><span class="code">submit</span></td> <td>A form is submitted.</td> </tr> </table>

View Article
Advanced Looping with JavaScript

Article / Updated 03-26-2016

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 loop, you can run a block of code once for every property in this object. For example, to print out all the properties of the object, you would use the following loop: for (var veggie in mySalad) { console.log(veggie + “ is in my salad.”); } The result, when run in the JavaScript console, is shown below. do...while loops The do...while loop works almost the same as a while loop, except that it always runs its statements at least once. For example, here’s a snippet of JavaScript code that contains a while loop that will never run, because the condition clearly isn’t true: var age = 15; while (age > 100) { // do something } By using a do...while loop, you can guarantee that the statements will run once, even if the condition is never true. For example: var age = 15; do { // do something } while (age > 100); It’s possible to do anything you need to do in JavaScript with just one or two different types of loops. But if you know how to use all of the different loops, you can write code that’s easier to understand with fewer statements!

View Article
5 HTML5 Form Input Tricks

Article / Updated 03-26-2016

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. Here’s an example of the code used to create a text input: Here’s what this field looks like in a browser: Placeholder text Placeholder text appears inside the input field before a user starts typing. It’s useful for telling the user what you expect them to enter. Here’s an example of using placeholder text in a text input: Here’s what this field looks like in a web browser. Autofocus When the input field is selected and you can see your cursor inside of it, it “has focus.” If you want a certain field (such as the First Name field) to have “focus” as soon as a web page loads, you can use the autofocus attribute. Here’s what it looks like: Email input The email input field looks like a text box input and it works just like a text input field in most cases, too. But, sometimes, the web browser treats the email input field differently from a text input field. For example, when an email input field is “in focus” on an iPhone, a special keyboard displays that features shortcuts for entering email addresses. Here’s an example of using the email input field: Slider input A slider input is an input field that allows the user to select a number within a range of numbers, by using a drag-and-drop control. Here’s the code for creating a slider: Here’s what a slider looks like in a web browser. Required If you want force your user to enter a value into a field before he’s able to submit the form, HTML5 has an attribute called required. To make a form field required, you just need to add the new attribute within a form input field, like this: When a user tries to submit this form without filling in the phoneNumber field, she gets a message asking her to fill it in: As of this writing, not all web browsers support the required attribute, but it is supported by Chrome, Firefox, Internet Explorer, and Opera. Finding out more For more information about the elements and attributes and how to work with them in JavaScript, visit the HTML forms guide at Mozilla Developer Network.

View Article
CSS Properties and Douglas the JavaScript Robot

Article / Updated 03-26-2016

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. Then follow these steps: Find the fiddle called Chapter 6: Robot Style – Start and click the title to open it. You can also go directly to the Robot app. You see a screen with HTML in the HTML panel and some CSS in the CSS panel. Click Fork in the top menu to make a copy of the fiddle in your own JSFiddle account. Make some changes to Douglas's looks by modifying the values of some different CSS properties: Find the CSS rule for the p element. It's currently the second rule in the CSS pane. Change the value of the font‐size property to 2.5em. The complete rule should now look like this: p { font‐size: 2.5em; } There are several different ways to specify text sizes. The most commonly used ways are by using pixels (px), percent (%), or ems (em). When you use percent or ems, the font size of the selected element is set based on the font size of the parent element. For example 2.5em is two and a half times the font size of the selected element's parent. Click the Run button to see the change in the Results pane. Douglas with a bold message. Find the CSS rule for the body element. Change the value of the body element to the following, paying attention to the use of quotes: "Comic Sans MS", cursive, sans‐serif The complete CSS rule should now look like this: body { font‐family: "Comic Sans MS", cursive, sans‐serif; } Click the Run button to see the results. Douglas now has interesting letters on his shirt. Douglas, now with fun letters! Next, change Douglas's eye color to match your eye color! Find the CSS rule that contains Douglas's eye color. It currently looks like this: .eye { background‐color:blue; width: 20%; height: 20%; border‐radius: 50%; } Change the value of the background‐color property to your eye color. For example, if your eyes are brown, you would change it to the following: background‐color: brown; Click the Run button to see the results. The color that Douglas's eyes change to when you use the word brown doesn't look very brown, and the color that is used when you try to make Douglas's eyes green also isn't a color that anyone's eyes are likely to be. To get a more precise color, you can use another one of the CSS color names or create your own custom color by using hexadecimal notation.

View Article
page 1
page 2
page 3
page 4
page 5