CINXE.COM

JavaScript for Kids | No Starch Press

<!DOCTYPE html> <html lang="en" dir="ltr" xmlns:og="https://ogp.me/ns#"> <head> <link rel="profile" href="https://www.w3.org/1999/xhtml/vocab" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="https://nostarch.com/sites/default/files/favicon.ico" type="image/vnd.microsoft.icon" /> <meta name="description" content="JavaScript for Kids is a lighthearted introduction to the JavaScript language and programming in general." /> <meta name="generator" content="Drupal 7 (http://drupal.org)" /> <link rel="image_src" href="https://nostarch.com/sites/default/files/jsfk_cover-front_final.png" /> <link rel="canonical" href="https://nostarch.com/javascriptforkids" /> <link rel="shortlink" href="https://nostarch.com/node/275" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://nostarch.com/javascriptforkids" /> <meta property="og:title" content="JavaScript for Kids" /> <meta property="og:description" content="JavaScript for Kids is a lighthearted introduction to the JavaScript language and programming in general." /> <meta property="og:updated_time" content="2023-07-31T06:41:22-07:00" /> <meta property="og:image:url" content="https://nostarch.com/sites/default/files/jsfk_cover-front_final.png" /> <meta property="og:image:secure_url" content="https://nostarch.com/sites/default/files/jsfk_cover-front_final.png" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@nostarch" /> <meta name="twitter:url" content="https://nostarch.com/javascriptforkids" /> <meta name="twitter:title" content="JavaScript for Kids" /> <meta name="twitter:description" content="JavaScript for Kids is a lighthearted introduction to the JavaScript language and programming in general." /> <meta name="twitter:image" content="https://nostarch.com/sites/default/files/jsfk_cover-front_final.png" /> <meta property="product:price:amount" content="34.99" /> <meta property="product:price:currency" content="USD" /> <meta property="product:isbn" content="978-1-59327-408-5" /> <meta property="article:published_time" content="2013-10-02T17:03:25-07:00" /> <meta property="article:modified_time" content="2023-07-31T06:41:22-07:00" /> <meta property="product:retailer_part_no" content="jsforkids-Combo" /> <meta property="product:mfr_part_no" content="jsforkids-Combo" /> <title>JavaScript for Kids | No Starch Press</title> <link type="text/css" rel="stylesheet" href="https://nostarch.com/sites/default/files/css/css_lQaZfjVpwP_oGNqdtWCSpJT1EMqXdMiU84ekLLxQnc4.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://nostarch.com/sites/default/files/css/css_guSWpwqRBCVb2J7ivC8BaNuaPffCXmbkGB5xDBqKKu8.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://nostarch.com/sites/default/files/css/css_Dw0rmhFX_owMmlf1HH5Y-_BnOHcMlkri1yMjYHD4ffs.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://nostarch.com/sites/default/files/css/css_XJm3Wqia1GUjoI4j54duSLNZVR3Kxhbwy0s3UwuhhHg.css" media="all" /> <!-- HTML5 element support for IE6-8 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script>window.jQuery || document.write("<script src='/sites/all/modules/contrib/jquery_update/replace/jquery/2.2/jquery.min.js'>\x3C/script>")</script> <script src="https://nostarch.com/misc/jquery-extend-3.4.0.js?v=2.2.4"></script> <script src="https://nostarch.com/misc/jquery-html-prefilter-3.5.0-backport.js?v=2.2.4"></script> <script src="https://nostarch.com/misc/jquery.once.js?v=1.2"></script> <script src="https://nostarch.com/misc/drupal.js?sska4v"></script> <script src="https://nostarch.com/sites/all/modules/contrib/jquery_update/js/jquery_browser.js?v=0.0.1"></script> <script src="https://nostarch.com/misc/form-single-submit.js?v=7.103"></script> <script src="https://nostarch.com/sites/all/modules/contrib/ubercart/uc_file/uc_file.js?sska4v"></script> <script src="https://nostarch.com/sites/all/libraries/colorbox/jquery.colorbox-min.js?sska4v"></script> <script src="https://nostarch.com/sites/all/modules/contrib/colorbox/js/colorbox.js?sska4v"></script> <script src="https://nostarch.com/sites/all/modules/contrib/colorbox/styles/plain/colorbox_style.js?sska4v"></script> <script src="https://nostarch.com/sites/all/modules/contrib/colorbox/js/colorbox_load.js?sska4v"></script> <script src="https://nostarch.com/sites/all/modules/contrib/colorbox/js/colorbox_inline.js?sska4v"></script> <script src="https://nostarch.com/sites/all/modules/contrib/ubercart/uc_cart/uc_cart_block.js?sska4v"></script> <script src="https://nostarch.com/sites/all/modules/contrib/google_analytics/googleanalytics.js?sska4v"></script> <script src="https://www.googletagmanager.com/gtag/js?id=UA-5027625-1"></script> <script>window.google_analytics_uacct = "UA-5027625-1";window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments)};gtag("js", new Date());gtag("set", "developer_id.dMDhkMT", true);gtag("config", "UA-5027625-1", {"groups":"default","anonymize_ip":true});gtag("config", "G-51XGZT9Y4H", {"groups":"default","anonymize_ip":true});</script> <script src="https://nostarch.com/sites/all/themes/nostarch/js/bootstrap.min.js?sska4v"></script> <script src="https://nostarch.com/sites/all/themes/nostarch/js/main.js?sska4v"></script> <script src="https://nostarch.com/sites/all/themes/nostarch/js/front_grid_height.js?sska4v"></script> <script>jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","setHasJsCookie":0,"ajaxPageState":{"theme":"nostarch","theme_token":"pJXcNLR6ajkY6Kk3tbSqtnW9HPqhNwzpD44n5EDn-r0","js":{"sites\/all\/modules\/contrib\/addthis\/addthis.js":1,"sites\/all\/libraries\/shariff\/shariff.min.js":1,"sites\/all\/themes\/contrib\/bootstrap\/js\/bootstrap.js":1,"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.2.4\/jquery.min.js":1,"0":1,"misc\/jquery-extend-3.4.0.js":1,"misc\/jquery-html-prefilter-3.5.0-backport.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"sites\/all\/modules\/contrib\/jquery_update\/js\/jquery_browser.js":1,"misc\/form-single-submit.js":1,"sites\/all\/modules\/contrib\/ubercart\/uc_file\/uc_file.js":1,"sites\/all\/libraries\/colorbox\/jquery.colorbox-min.js":1,"sites\/all\/modules\/contrib\/colorbox\/js\/colorbox.js":1,"sites\/all\/modules\/contrib\/colorbox\/styles\/plain\/colorbox_style.js":1,"sites\/all\/modules\/contrib\/colorbox\/js\/colorbox_load.js":1,"sites\/all\/modules\/contrib\/colorbox\/js\/colorbox_inline.js":1,"sites\/all\/modules\/contrib\/ubercart\/uc_cart\/uc_cart_block.js":1,"sites\/all\/modules\/contrib\/google_analytics\/googleanalytics.js":1,"https:\/\/www.googletagmanager.com\/gtag\/js?id=UA-5027625-1":1,"1":1,"sites\/all\/themes\/nostarch\/js\/bootstrap.min.js":1,"sites\/all\/themes\/nostarch\/js\/main.js":1,"sites\/all\/themes\/nostarch\/js\/front_grid_height.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/field\/theme\/field.css":1,"sites\/all\/modules\/contrib\/logintoboggan\/logintoboggan.css":1,"modules\/node\/node.css":1,"sites\/all\/modules\/contrib\/uc_fedex\/uc_fedex.css":1,"sites\/all\/modules\/contrib\/ubercart\/uc_file\/uc_file.css":1,"sites\/all\/modules\/contrib\/ubercart\/uc_order\/uc_order.css":1,"sites\/all\/modules\/contrib\/ubercart\/uc_product\/uc_product.css":1,"sites\/all\/modules\/contrib\/ubercart\/uc_store\/uc_store.css":1,"sites\/all\/modules\/contrib\/views\/css\/views.css":1,"sites\/all\/modules\/contrib\/ckeditor\/css\/ckeditor.css":1,"sites\/all\/modules\/contrib\/uc_discounts_alt\/uc_discounts\/uc_discounts.css":1,"sites\/all\/modules\/contrib\/colorbox\/styles\/plain\/colorbox_style.css":1,"sites\/all\/modules\/contrib\/ctools\/css\/ctools.css":1,"sites\/all\/modules\/contrib\/ubercart\/uc_cart\/uc_cart_block.css":1,"sites\/all\/libraries\/shariff\/shariff.complete.css":1,"sites\/all\/themes\/nostarch\/css\/en_styles.css":1,"sites\/all\/themes\/nostarch\/css\/custom.css":1,"sites\/all\/themes\/nostarch\/css\/bootstrap-3-vert-offset.css":1,"sites\/all\/themes\/nostarch\/css\/bootstrap-3-autoclear.css":1,"sites\/all\/themes\/nostarch\/css\/glyphicons.css":1}},"colorbox":{"opacity":"0.85","current":"{current} of {total}","previous":"\u00ab Prev","next":"Next \u00bb","close":"Close","maxWidth":"98%","maxHeight":"98%","fixed":true,"mobiledetect":true,"mobiledevicewidth":"480px","file_public_path":"\/sites\/default\/files","specificPagesDefaultValue":"admin*\nimagebrowser*\nimg_assist*\nimce*\nnode\/add\/*\nnode\/*\/edit\nprint\/*\nprintpdf\/*\nsystem\/ajax\nsystem\/ajax\/*"},"better_exposed_filters":{"views":{"topics":{"displays":{"block":{"filters":[]}}},"related_products":{"displays":{"block":{"filters":[]}}}}},"googleanalytics":{"account":["UA-5027625-1","G-51XGZT9Y4H"],"trackOutbound":1,"trackMailto":1,"trackDownload":1,"trackDownloadExtensions":"7z|aac|arc|arj|asf|asx|avi|bin|csv|doc(x|m)?|dot(x|m)?|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt(x|m)?|pot(x|m)?|pps(x|m)?|ppam|sld(x|m)?|thmx|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls(x|m|b)?|xlt(x|m)|xlam|xml|z|zip","trackColorbox":1},"urlIsAjaxTrusted":{"\/javascriptforkids":true},"bootstrap":{"anchorsFix":"0","anchorsSmoothScrolling":"0","formHasError":1,"popoverEnabled":1,"popoverOptions":{"animation":1,"html":0,"placement":"right","selector":"","trigger":"click","triggerAutoclose":1,"title":"","content":"","delay":0,"container":"body"},"tooltipEnabled":1,"tooltipOptions":{"animation":1,"html":0,"placement":"auto left","selector":"","trigger":"hover focus","delay":0,"container":"body"}}});</script> </head> <body class="html not-front not-logged-in two-sidebars page-node page-node- page-node-275 node-type-product uc-product-node"> <div id="skip-link"> <a href="#main-content" class="element-invisible element-focusable">Skip to main content</a> </div> <header id="" class="header" role="banner" class="navbar navbar-default"> <div class="container"> <div class="row"> <nav role="navigation" class="navbar navbar-default visible-xs"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand text-uppercase" href="/"><img src="https://nostarch.com/sites/all/themes/nostarch/logo.png" alt="Home" class="img-responsive"/></a> </div> <div id="navbar" class="navbar-collapse collapse text-center"> <ul class="menu nav navbar-nav"><li class="first leaf"><a href="/catalog.htm" title="Explore our catalog">Catalog</a></li> <li class="leaf"><a href="https://nostarch.com/merchandise-0" title="Merchandise">Merchandise</a></li> <li class="leaf"><a href="/blog" title="The No Starch Press blog">Blog</a></li> <li class="leaf"><a href="https://nostarch.com/early-access-program" title="Media contact">Early Access</a></li> <li class="leaf"><a href="/writeforus" title="Submit a book proposal">Write for Us</a></li> <li class="leaf"><a href="/about" title="About No Starch Press">About Us</a></li> <li class="last leaf"><a href="/contactus" title="Contact Us">Contact Us</a></li> </ul> <div class="region region-navigation"> <section id="block-uc-cart-cart" class="block block-uc-cart clearfix"> <h2 class="block-title"><a href="/cart"><span class="cart-block-icon-empty" title="View your shopping cart."></span></a><span class="cart-block-title-bar" title="Show/hide shopping cart contents.">Shopping cart<span class="cart-block-arrow arrow-down"></span></span></h2> <p class="cart-block-items collapsed uc-cart-empty">There are no products in your shopping cart.</p><table class="cart-block-summary"><tbody><tr><td class="cart-block-summary-items"><span class="num-items">0</span> Items</td><td class="cart-block-summary-total"><label>Total:</label> <span class="uc-price">$0.00</span></td></tr></tbody></table> </section> <section id="block-search-api-page-site-search" class="block block-search-api-page clearfix"> <form action="/javascriptforkids" method="post" id="search-api-page-search-form-site-search" accept-charset="UTF-8"><div><div class="form-item form-item-keys-2 form-type-textfield form-group"><input placeholder="Search" class="form-control form-text" type="text" id="edit-keys-2" name="keys_2" value="" size="15" maxlength="128" /> <label class="control-label element-invisible" for="edit-keys-2">Enter your keywords</label> </div><input type="hidden" name="id" value="2" /> <button class="icon glyphicon glyphicon-search btn-primary form-control btn form-submit" type="submit" id="edit-submit-2" name="op" value=""></button> <input type="hidden" name="form_build_id" value="form-IG5_JAhLJN4nkD8FoISM1gt9l0lsHG6xqoqmCIcZvw0" /> <input type="hidden" name="form_id" value="search_api_page_search_form_site_search" /> </div></form> </section> </div> </div> </nav> <div class="navbar-header"> <div class="logo-wrapper col-sm-6 hidden-xs"> <a class="logo navbar-btn pull-left" href="/" title="Home"> <img src="https://nostarch.com/sites/all/themes/nostarch/logo.png" alt="Home" class="img-responsive"/> </a> </div> <div class="logo-wrapper col-sm-6 hidden-xs"> <div class="region region-navigation"> <div class="region region-navigation"> <section id="block-uc-cart-cart" class="block block-uc-cart clearfix"> <h2 class="block-title"><a href="/cart"><span class="cart-block-icon-empty" title="View your shopping cart."></span></a><span class="cart-block-title-bar" title="Show/hide shopping cart contents.">Shopping cart<span class="cart-block-arrow arrow-down"></span></span></h2> <p class="cart-block-items collapsed uc-cart-empty">There are no products in your shopping cart.</p><table class="cart-block-summary"><tbody><tr><td class="cart-block-summary-items"><span class="num-items">0</span> Items</td><td class="cart-block-summary-total"><label>Total:</label> <span class="uc-price">$0.00</span></td></tr></tbody></table> </section> <section id="block-search-api-page-site-search" class="block block-search-api-page clearfix"> <form action="/javascriptforkids" method="post" id="search-api-page-search-form-site-search" accept-charset="UTF-8"><div><div class="form-item form-item-keys-2 form-type-textfield form-group"><input placeholder="Search" class="form-control form-text" type="text" id="edit-keys-2" name="keys_2" value="" size="15" maxlength="128" /> <label class="control-label element-invisible" for="edit-keys-2">Enter your keywords</label> </div><input type="hidden" name="id" value="2" /> <button class="icon glyphicon glyphicon-search btn-primary form-control btn form-submit" type="submit" id="edit-submit-2" name="op" value=""></button> <input type="hidden" name="form_build_id" value="form-IG5_JAhLJN4nkD8FoISM1gt9l0lsHG6xqoqmCIcZvw0" /> <input type="hidden" name="form_id" value="search_api_page_search_form_site_search" /> </div></form> </section> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="navbar-collapse collapse"> <nav role="navigation"> <ul class="menu nav navbar-nav"><ul class="menu nav navbar-nav"><li class="first leaf"><a href="/catalog.htm" title="Explore our catalog">Catalog</a></li> <li class="leaf"><a href="https://nostarch.com/merchandise-0" title="Merchandise">Merchandise</a></li> <li class="leaf"><a href="/blog" title="The No Starch Press blog">Blog</a></li> <li class="leaf"><a href="https://nostarch.com/early-access-program" title="Media contact">Early Access</a></li> <li class="leaf"><a href="/writeforus" title="Submit a book proposal">Write for Us</a></li> <li class="leaf"><a href="/about" title="About No Starch Press">About Us</a></li> <li class="last leaf"><a href="/contactus" title="Contact Us">Contact Us</a></li> </ul></ul> </nav> </div> </div> </div> </header> <div class="main-container container"> <header role="banner" id="page-header"> <div class="region region-header"> <section id="block-block-159" class="block block-block clearfix"> <style> <!--/*--><![CDATA[/* ><!--*/ #banner { height: 120px; } #banner-graphic { width: 700px; } #banner-countdown { width: 240px; } #banner-cta { width: 200px; text-align: center; margin-top: 19px; } .banner-column { float: left; } .banner_image { max-width: 100% } @media (max-width: 1199px) { #banner-graphic { width: 500px; } } @media (max-width: 991px) { #banner { height: 160px; } #banner-graphic { float: none; width: 100%; } #banner-countdown { width: 50%; } #banner-cta { width: 50%; } } @media (max-width: 422px) { #banner { height: 200px; } #banner-countdown { float: none; width: 100%; } #banner-cta { float: none; width: 100%; margin-top: 10px; } } .time-left { margin: 1em; font-size: .75em; font-weight: bold; text-transform: uppercase; font-family: Arial, Helvetica, Verdana, sans-serif; text-align: center; } .countdown-container { display: flex; justify-content: center; } .countdown-timer { font-family: Arial, Helvetica, Verdana, sans-serif; color: white; } .countdown-timer .countdown-timer-counter { background-color: #222; display: inline-flex; flex-direction: column; justify-content: space-around; text-align: center; border-radius: 0.2em; width: 3em; line-height: 1.3; margin: 0 0.2em; padding: .6em 0.15em 0.75em; text-shadow: 1px 1px 1px rgba(0,0,0,0.85); } .countdown-timer .countdown-timer-counter .countdown-timer-number { font-weight: bold; font-size: 1em; } .countdown-timer .countdown-timer-counter .countdown-label { font-size: 0.75em; } .cta-parent { text-align: center; } .cta-button { font-family: Arial, Helvetica, Verdana, sans-serif; color: white; display: inline-block; font-weight: bold; text-decoration: none; background-color: #ec6352; border: 1px solid #ec6352; cursor: pointer; padding: 0.8em 1.25em 1em; margin: 0.75em auto 0; font-size: 1.15em; text-rendering: optimizeLegibility; border-radius: 0.3em; text-shadow: 1px 1px 1px rgba(0,0,0,0.65); text-transform: uppercase; transition-duration: 0.2s; transition-property: background-color, border, color, box-shadow, text-shadow; transition-timing-function: ease-in-out; white-space: nowrap; } .cta-button:hover { background-color: #ec6352; border: 1px solid #ec6352; } /*--><!]]>*/ </style><div id="banner1"> <div class="banner-column" id="banner-graphic"> <p><a href="https://www.humblebundle.com/books/computer-science-fun-way-no-starch-books" target="_blank"><img src="https://nostarch.com/images/banners/HumbleBundleWebsiteBanner_March2025.png" class="banner_image" /></a></p> </div> <div class="banner-column" id="banner-countdown"> <div class="time-left">time left</div> <div class="countdown-container"> <div class="countdown-timer"> <div class="countdown-timer-counter" data-unit="days"> <div class="countdown-timer-number"></div> <div class="countdown-label">days</div> </div> <div class="countdown-timer-counter" data-unit="hours"> <div class="countdown-timer-number"></div> <div class="countdown-label">hours</div> </div> <div class="countdown-timer-counter" data-unit="minutes"> <div class="countdown-timer-number"></div> <div class="countdown-label">min</div> </div> <div class="countdown-timer-counter" data-unit="seconds"> <div class="countdown-timer-number"></div> <div class="countdown-label">sec</div> </div> </div> </div> </div> <div class="banner-column" id="banner-cta"><a href="https://www.humblebundle.com/books/computer-science-fun-way-no-starch-books" target="_blank"><span class="cta-button">Get The Bundle</span></a></div> </div> <script> <!--//--><![CDATA[// ><!-- function initCountdown(bannerId, endDate) { var countdownTime = new Date(endDate); var banner = document.getElementById(bannerId); var x = setInterval(function() { var now = new Date(); var distance = countdownTime - now; var days = Math.max(Math.floor(distance / (1000 * 60 * 60 * 24)), 0); var hours = Math.max(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)), 0); var minutes = Math.max(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)), 0); var seconds = Math.max(Math.floor((distance % (1000 * 60)) / 1000), 0); function padZero(num) { return num.toString().padStart(2, '0'); } banner.querySelector('[data-unit="days"] .countdown-timer-number').textContent = padZero(days); banner.querySelector('[data-unit="hours"] .countdown-timer-number').textContent = padZero(hours); banner.querySelector('[data-unit="minutes"] .countdown-timer-number').textContent = padZero(minutes); banner.querySelector('[data-unit="seconds"] .countdown-timer-number').textContent = padZero(seconds); if (distance < 0) { clearInterval(x); banner.querySelector('.countdown-container').textContent = "Event has ended"; } }, 1000); } // Initialize the countdown for banner1 initCountdown('banner1', '2025-03-24T19:00:00Z'); //--><!]]> </script> </section> </div> </header> <!-- /#page-header --> <div class="row"> <aside class="col-sm-3" role="complementary"> <div class="region region-sidebar-first well"> <section id="block-views-topics-block" class="block block-views clearfix"> <button class="btn btn-primary btn-block visible-xs vert-offset-top-2" data-toggle="collapse" data-target="#topics"><span class="glyphicon glyphicon-menu-down pull-left"></span> <span class="btn-text">Topics</span><span class="glyphicon glyphicon-menu-down pull-right"></span></button> <h2 class="block-title hidden-xs">Topics</h2> <div id="topics" class="view-content collapse dont-collapse animateCollapse"> <div class="view view-topics view-id-topics view-display-id-block view-dom-id-8f29a5fbe8590709b1691d619ee17d2e"> <div class="view-content"> <div class="item-list"> <ul> <li class="views-row views-row-1 views-row-odd views-row-first"> <div class="views-field views-field-name"> <span class="field-content"><a href="/catalog/art-photography-design">Art &amp; Design</a></span> </div></li> <li class="views-row views-row-2 views-row-even"> <div class="views-field views-field-name"> <span class="field-content"><a href="/catalog/general-computing">General Computing</a></span> </div></li> <li class="views-row views-row-3 views-row-odd"> <div class="views-field views-field-name"> <span class="field-content"><a href="/catalog/security">Hacking &amp; Computer Security</a></span> </div></li> <li class="views-row views-row-4 views-row-even"> <div class="views-field views-field-name"> <span class="field-content"><a href="/catalog/hardware-and-diy">Hardware / DIY</a></span> </div></li> <li class="views-row views-row-5 views-row-odd"> <div class="views-field views-field-name"> <span class="field-content"><a href="/catalog/kids">Kids</a></span> </div></li> <li class="views-row views-row-6 views-row-even"> <div class="views-field views-field-name"> <span class="field-content"><a href="/catalog/lego">LEGO®</a></span> </div></li> <li class="views-row views-row-7 views-row-odd"> <div class="views-field views-field-name"> <span class="field-content"><a href="/catalog/linux-bsd-unix">Linux &amp; BSD</a></span> </div></li> <li class="views-row views-row-8 views-row-even"> <div class="views-field views-field-name"> <span class="field-content"><a href="/catalog/manga">Manga</a></span> </div></li> <li class="views-row views-row-9 views-row-odd"> <div class="views-field views-field-name"> <span class="field-content"><a href="/catalog/programming">Programming</a></span> </div></li> <li class="views-row views-row-10 views-row-even"> <div class="views-field views-field-name"> <span class="field-content"><a href="/catalog/python">Python</a></span> </div></li> <li class="views-row views-row-11 views-row-odd"> <div class="views-field views-field-name"> <span class="field-content"><a href="/catalog/rforall">R for All</a></span> </div></li> <li class="views-row views-row-12 views-row-even"> <div class="views-field views-field-name"> <span class="field-content"><a href="/catalog/science-math">Science &amp; Math</a></span> </div></li> <li class="views-row views-row-13 views-row-odd"> <div class="views-field views-field-name"> <span class="field-content"><a href="/catalog/scratch">Scratch</a></span> </div></li> <li class="views-row views-row-14 views-row-even"> <div class="views-field views-field-name"> <span class="field-content"><a href="/catalog/system-administration">System Administration</a></span> </div></li> <li class="views-row views-row-15 views-row-odd views-row-last"> <div class="views-field views-field-name"> <span class="field-content"><a href="/catalog/early-access">Early Access</a></span> </div></li> </ul></div> </div> <div class="view-footer"> <style> <!--/*--><![CDATA[/* ><!--*/ .view-topics .item-list a {font-weight: bold;} .view-topics ul {padding-left: 20px;} /*--><!]]>*/ </style> </div> </div> </div> </section><section id="block-block-12" class="block block-block clearfix"> <div class="rounded_border_block"><span style="font-family:Arial,Helvetica,sans-serif"><strong><span style="font-size:12px"><span style="color:#c0392b"><a href="https://nostarch.com/about_ebooks.htm">FREE ebook edition with every print book purchased from nostarch.com!</a></span></span></strong></span></div> <p class="rtecenter"><span style="font-size:22px">+</span></p> <div class="rounded_border_block"><span style="font-family:Arial,Helvetica,sans-serif"><strong><span style="font-size:12px"><a href="https://nostarch.com/early-access-program"><span style="color:#c0392b">EARLY ACCESS lets you read full chapters months before a title's release date!</span></a></span></strong></span></div> </section> <section id="block-nostarch-custom-login-block" class="block block-nostarch-customclearfix"> <h2 class="block-title">User login</h2> <ul> <li><a href="/user">Log in</a></a></li> <li><a href="/user/register">Create account</a></a></li> </ul> </section> <section id="block-block-78" class="block block-block clearfix"> <script data-account="eeqOpWOUyZ" src="https://cdn.userway.org/widget.js"></script> </section> </div> </aside> <!-- /#sidebar-first --> <section class="col-sm-6" style=""> <a id="main-content"></a> <div class="region region-content"> <section id="block-system-main" class="block block-system clearfix"> <div class="ds-1col node node-product view-mode-full clearfix"> <div class=""> <div class="field field-name-field-image-cache field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><div class="product-image"><div class="main-product-image"><a href="https://nostarch.com/sites/default/files/styles/uc_product_full/public/jsfk_cover-front_final.png?itok=8vF40PE2" title="JavaScript for Kids" class="colorbox" rel="uc_image_0"><img class="img-responsive" src="https://nostarch.com/sites/default/files/styles/uc_product/public/jsfk_cover-front_final.png?itok=jakVjNZG" alt="JavaScript for Kids" title="JavaScript for Kids" /></a></div></div></div></div></div><div class="field field-name-entity-title field-type-ds field-label-hidden"><div class="field-items"><div class="field-item even"><h1 class="page-header">JavaScript for Kids</h1></div></div></div><div class="field field-name-field-subtitle field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">A Playful Introduction to Programming</div></div></div><div class="field field-name-field-author field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">by Nick Morgan</div></div></div><div class="field field-name-released-date field-type-ds field-label-hidden"><div class="field-items"><div class="field-item even">December 2014, 336 pp.</div></div></div><div class="field field-name-field-isbn13 field-type-text field-label-inline clearfix clearfix"><div class="field-label">ISBN-13:&nbsp;</div><div class="field-items"><div class="field-item even">978-1-59327-408-5</div></div></div><div class="field field-name-field-special field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">Full Color</div></div></div><div class="add-to-cart"><form action="/javascriptforkids" method="post" id="uc-product-add-to-cart-form-275" accept-charset="UTF-8"><div><div id="uc_product_add_to_cart_form-275-attributes" class="attributes"><div class="attribute attribute-1 odd"><div class="form-item form-item-attributes-1 form-type-radios form-group"><div id="edit-attributes-1" class="form-radios"><div class="form-item form-item-attributes-1 form-type-radio radio"> <label class="control-label" for="edit-attributes-1-3"><input type="radio" id="edit-attributes-1-3" name="attributes[1]" value="3" checked="checked" class="form-radio" />Print Book and FREE Ebook, $34.99</label> </div><div class="form-item form-item-attributes-1 form-type-radio radio"> <label class="control-label" for="edit-attributes-1-2"><input type="radio" id="edit-attributes-1-2" name="attributes[1]" value="2" class="form-radio" />Ebook (PDF, Mobi, and ePub), $27.99</label> </div></div></div></div></div><input type="hidden" name="qty" value="1" /> <input type="hidden" name="form_build_id" value="form-QE3XYmTFFJrRsEwkBaNiV2sZxRRc9f08PQ6QkpRK_cE" /> <input type="hidden" name="form_id" value="uc_product_add_to_cart_form_275" /> <div class="form-actions form-wrapper form-group" id="edit-actions"><button class="node-add-to-cart btn btn-success form-submit icon-before" type="submit" id="edit-submit-275" name="op" value="Add to cart"><span class="icon glyphicon glyphicon-plus" aria-hidden="true"></span> Add to cart</button> </div></div></form></div><div class="field field-name-product-menu field-type-ds field-label-hidden"><div class="field-items"><div class="field-item even"><div class="menu-wrapper"><ul class="menu nav"><li><a href="#content">Contents</a></li><li><a href="#reviews">Reviews</a></li><li><a href="#updates">Updates</a></li></ul></div></div></div></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><blockquote><p>"I’ve fallen in love with a book. Like fallen head-over-heels, carry-it-all-around-town, sneak-in-pages-whenever-I-can in love. The real deal."<br /> —<b>GeekDad <a href="http://geekdad.com/2014/12/javascript-for-kids/">(Read more)</a></b></p> <p>"An absolutely phenomenal guide with a crisp design and clear, concise explanations."<br /> —<b>Kirkus Reviews <a href="https://www.kirkusreviews.com/book-reviews/eric-weinstein/ruby-wizardry/">(Read more)</a></b></p> <p>"Does a great job of clearly presenting programming concepts like data types, control structures, functions strings, arrays, loops. Nothing is dumbed down."<br /> —<b>Boing Boing <a href="https://boingboing.net/2015/11/04/javascript-for-kids-a-playful.html">(Read more)</a></b> </p></blockquote> <p><spacer size="2"></spacer></p> <ul> <li><u><a href="/download/JS4K_ch7.pdf" target="_blank">Download Chapter 7 "Creating a Hangman Game"</a></u> (PDF)</li> <li><u><a href="/download/JavaScriptForKidsCode.zip">Download the sample code from the book</a></u></li> <li><u><a href="/download/JavaScriptForKidsSolutions.zip">Download the solutions to programming challenges</a></u></li> </ul> <p><strong>Look Inside!</strong></p> <div class="lookinside" style:=""> <a href="/images/treasure.png" class="colorbox"><img src="/images/treasure.png" alt="Build Your Own Website" width="125" style="max-width:262px;border:1px solid;margin:0 10px 0 0;" /></a><a href="/images/horse.png" class="colorbox"><img src="/images/horse.png" alt="JavaScript for Kids" width="125" style="max-width:262px;border:1px solid;margin:0 10px 0 0;" /></a><a href="/images/snowman.png" class="colorbox"><img src="/images/snowman.png" alt="Build Your Own Website" width="125" style="max-width:262px;border:1px solid;margin:0 10px 0 0;" /></a><a href="/images/intro11.png" class="colorbox"><img src="/images/intro11.png" alt="JavaScript for Kids" width="125" style="max-width:262px;border:1px solid;margin:0 10px 0 0;" /></a> </div> <p>JavaScript is the programming language of the Internet, the secret sauce that makes the Web awesome, your favorite sites interactive, and online games fun!</p> <p><i>JavaScript for Kids</i> is a lighthearted introduction that teaches programming essentials through patient, step-by-step examples paired with funny illustrations. You’ll begin with the basics, like working with strings, arrays, and loops, and then move on to more advanced topics, like building interactivity with jQuery and drawing graphics with Canvas.</p> <p>Along the way, you’ll write games such as Find the Buried Treasure, Hangman, and Snake. You’ll also learn how to:</p> <ul> <li>Create functions to organize and reuse your code</li> <li>Write and modify HTML to create dynamic web pages</li> <li>Use the DOM and jQuery to make your web pages react to user input</li> <li>Use the Canvas element to draw and animate graphics</li> <li>Program real user-controlled games with collision detection and score keeping</li> </ul> <p>With visual examples like bouncing balls, animated bees, and racing cars, you can really see what you’re programming. Each chapter builds on the last, and programming challenges at the end of each chapter will stretch your brain and inspire your own amazing programs. Make something cool with JavaScript today!</p> <p>Ages 10+ (and their parents!)</p> </div></div></div><div class="field field-name-field-author-bio field-type-text-long field-label-abovec"><div class="field-label">Author Bio&nbsp;</div><div class="field-items"><div class="field-item even"><p><strong>Nick Morgan</strong> is a British front-end engineer at Twitter. He loves all programming languages but has a particular soft spot for JavaScript. Nick lives in San Francisco (the foggy part) with his girlfriend and their fluffy dog, Pancake. He occasionally blogs at <a href="http://skilldrick.co.uk">skilldrick.co.uk</a>.</p> </div></div></div><div class="field field-name-field-toc field-type-text-long field-label-abovec" id="content"><div class="field-label">Table of contents&nbsp;</div><div class="field-items"><div class="field-item even"><p><strong>Introduction</strong></p> <p><strong>Part I: Fundamentals</strong></p> <p><b>Chapter 1:</b> What Is JavaScript?<br /> <b>Chapter 2:</b> Data Types and Variables<br /> <b>Chapter 3:</b> Arrays<br /> <b>Chapter 4:</b> Objects<br /> <b>Chapter 5:</b> The Basics of HTML<br /> <b>Chapter 6:</b> Conditionals and Loops<br /> <b>Chapter 7:</b> Creating a Hangman Game<br /> <b>Chapter 8:</b> Functions</p> <p><strong>Part II: Advanced JavaScript</strong></p> <p><b>Chapter 9:</b> The DOM and jQuery<br /> <b>Chapter 10:</b> Interactive Programming<br /> <b>Chapter 11:</b> Find the Buried Treasure!<br /> <b>Chapter 12:</b> Object-Oriented Programming</p> <p><strong>Part III: Canvas</strong></p> <p><b>Chapter 13:</b> The canvas Element<br /> <b>Chapter 14:</b> Making Things Move on the Canvas<br /> <b>Chapter 15:</b> Controlling Animations with the Keyboard<br /> <b>Chapter 16:</b> Making a Snake Game: Part 1<br /> <b>Chapter 17:</b> Making a Snake Game: Part 2</p> <p><b>Afterword: Where to Go from Here</b><br /> <b>Glossary</b><br /> <b>Index</b></p> <p>View the detailed <a href="http://www.nostarch.com/download/JavaScript_for_Kids_dTOC.pdf" target="new">Table of Contents</a> (PDF)<br /> View the <a href="http://www.nostarch.com/download/JavaScript_for_Kids_Index.pdf" target="new">Index</a> (PDF)</p> </div></div></div><div class="field field-name-field-reviews field-type-text-long field-label-abovec" id="reviews"><div class="field-label">Reviews&nbsp;</div><div class="field-items"><div class="field-item even"><p>"Vibrant and visually engaging, with chuckle-worthy asides...instructive and kid-friendly."<br /> —<b>School Library Journal, The Maker Issue <a href="http://www.slj.com/2015/05/collection-development/maker-bookshelf-a-starter-collection-for-current-and-aspiring-makebrarians-the-maker-issue/">(Read more)</a></b></p> <p>"I'd recommend this book for anyone in middle school through to retirement who wants to see what programming is all about, but wants a gentle, fun introduction."<br /> —<b>IT World <a href="http://www.itworld.com/article/2863696/javascript-for-kids-a-playful-introduction-to-programming.html#tk.itwtwitter">(Read more)</a></b></p> <p>"This exists and it looks awesome."<br /> —<b>Khoi Vinh, Former NYTIMES.com design director</b></p> <p>"An interesting kid focused JavaScript book from No Starch."<br /> —<b>Peter Cooper, curator of JavaScript Weekly</b></p> <p>"Has your child resolved to learn to code in 2015? Check out this new book."<br /> —<b>Girl Develop It, Ann Arbor</b></p> <p>"We had a JS workshop for kids 9-12 last Friday and it helped very much when it came to explaining various concepts—Nick is great! "<br /> —<b>Kathryn Barrett, Ladies Learning Code</b></p> <p>"May work well as the source material for something like Code Club."<br /> —<b>Alex Young, Editor-in-Chief of DailyJS</b></p> <p>"I wish I had had something like this when I was 10. The book is very thorough yet accessible."<br /> —<b>Malte Ubl, Curator of JSConfEU</b></p> <p>"Another winner from No-Starch Press."<br /> —<b>Tim Cox, MagPi Magazine <a href="http://pihardware.com/">(Read more)</a></b></p> <p>"This is the kind of book I would easily recommend for the beginning Web coder."<br /> —<b>Bismark Tribune <a href="http://bismarcktribune.com/news/columnists/keith-darnay/cyber-monday-sales-web-coding-books/article_5c8d1e80-87aa-11e4-90b9-b391c7959add.html">(Read more)</a></b></p> <p>"Boy asks 'Dad, can we do some NEW programming?' So, we are now on Chapter 1 of <i>JavaScript for Kids</i>. 'Dad, JavaScript is kinda fun.'"<br /> —<b>Kevin Stewart, Director of Engineering at Adobe</b></p> <p>"I wish I had a book like this when I was learning programming over 20 years ago."<br /> —<b>Tim Caswell, Nodejs hacker and teacher</b></p> <p>"This book takes the mantle of the 'Dummies' series for learning complex subjects...highly recommended."<br /> —<b>Becky Walton, MLIS, Ingram Collection Development <a href="http://marketing.ingramcontent.com/mrkng/nryouth/0215/reviews.html">(Read more)</a></b></p> <p>"A fantastic primer that is both immensely educational and wildly fun."<br /> —<b>Outright Geekery <a href="http://outrightgeekery.com/2015/02/05/javascript-for-kids-is-a-robust-primer-for-future-kings-of-code/">(Read more)</a></b></p> <p>"Fantastic...one of the best and most comfortable introductions to a real and useful programming language we've seen."<br /> —<b>Ric Getter for MacDirectory Magazine</b></p> <p>"Whether you’re 10 or 110, this book can be a fun way to start learning how to code. This book doesn’t talk down to its audience, so no matter your age, if you’re looking for a relaxed and enjoyable introduction to JavaScript, this book is for you."<br /> —<b><a href="https://blog.devmountain.com/7-highly-recommended-programming-books/" target="_blank">DevMountain</a>, 10 best programming books</b></p> </div></div></div><div class="field field-name-field-updates field-type-text-long field-label-abovec" id="updates"><div class="field-label">Updates&nbsp;</div><div class="field-items"><div class="field-item even"><p>View the <a href="/download/JavaScriptforKids_errata_p9.pdf" target="_blank"><u><b>latest errata</b></u></a>.</p> </div></div></div> </div> </div> </section> <section id="block-shariff-shariff-block" class="block block-shariff clearfix"> <div class="shariff" data-services="[&quot;facebook&quot;,&quot;print&quot;,&quot;twitter&quot;]" data-theme="colored" data-orientation="horizontal" data-twitter-via="nostarch" data-lang="en"></div> </section> </div> </section> <aside class="col-sm-3" role="complementary"> <div class="region region-sidebar-second"> <section id="block-system-navigation" class="block block-system block-menu clearfix"> <h2 class="block-title">Navigation</h2> <ul class="menu nav"><li class="first last leaf"><a href="/user" title="">My account</a></li> </ul> </section> <section id="block-block-52" class="block block-block clearfix"> <p><a href="/mailchimp/subscribe">Want sweet deals? <br />Sign up for our newsletter.</a></p> </section> <section id="block-views-related-products-block" class="block block-views clearfix"> <h2 class="block-title">You might also like...</h2> <div class="view view-related-products view-id-related_products view-display-id-block auto-clear view-dom-id-1e6c2abfcc6ca5451aea24e28be67b3d"> <div class="view-content"> <div class="views-row views-row-1 views-row-odd views-row-first col-xs-6 col-sm-6 col-md-12"> <div class="views-field views-field-field-image-cache"> <div class="field-content"><a href="/powerfunctions2"><img class="img-responsive" src="https://nostarch.com/sites/default/files/styles/product/public/LEGOPowerFunctionsBookv2_cover.png?itok=Q3EqRHa4" width="90" height="113" alt="LEGO Power Functions Idea Book v. 2" title="LEGO Power Functions Idea Book v. 2" /></a></div> </div> </div> <div class="views-row views-row-2 views-row-even col-xs-6 col-sm-6 col-md-12"> <div class="views-field views-field-field-image-cache"> <div class="field-content"><a href="/graph-algorithms-fun-way"><img class="img-responsive" src="https://nostarch.com/sites/default/files/styles/product/public/GraphAlgorithmsFW_frontcover.png?itok=7qCWWLu3" width="90" height="119" alt="Graph Algorithms the Fun Way placeholder cover" title="Graph Algorithms the Fun Way placeholder cover" /></a></div> </div> </div> <div class="views-row views-row-3 views-row-odd col-xs-6 col-sm-6 col-md-12"> <div class="views-field views-field-field-image-cache"> <div class="field-content"><a href="/greatcode3"><img class="img-responsive" src="https://nostarch.com/sites/default/files/styles/product/public/WCG_vol3_fcvr_05-01.png?itok=X4vRozzd" width="90" height="119" alt="Write Great Code, Volume 3 Cover" title="Write Great Code, Volume 3" /></a></div> </div> </div> <div class="views-row views-row-4 views-row-even col-xs-6 col-sm-6 col-md-12"> <div class="views-field views-field-field-image-cache"> <div class="field-content"><a href="/mathadventures"><img class="img-responsive" src="https://nostarch.com/sites/default/files/styles/product/public/mathadv_cover-front_new.png?itok=apYQzu_f" width="90" height="119" alt="Math Adventures with Python" title="Math Adventures with Python" /></a></div> </div> </div> <div class="views-row views-row-5 views-row-odd col-xs-6 col-sm-6 col-md-12"> <div class="views-field views-field-field-image-cache"> <div class="field-content"><a href="/real-world-python"><img class="img-responsive" src="https://nostarch.com/sites/default/files/styles/product/public/realWorldPython_comp.png?itok=ddzIFvon" width="90" height="119" alt="Real-World Python cover" title="Real-World Python cover" /></a></div> </div> </div> <div class="views-row views-row-6 views-row-even views-row-last col-xs-6 col-sm-6 col-md-12"> <div class="views-field views-field-field-image-cache"> <div class="field-content"><a href="/art-clean-code"><img class="img-responsive" src="https://nostarch.com/sites/default/files/styles/product/public/ArtofCleanCode_front.png?itok=FQ2vO64_" width="90" height="119" alt="The Art of Clean Code" title="The Art of Clean Code" /></a></div> </div> </div> </div> </div> </section> </div> </aside> <!-- /#sidebar-second --> </div> </div> <footer class="footer container"> <div class="region region-footer"> <section id="block-block-16" class="block block-block clearfix"> <div id="footer-links"> <br> <a class="footer-links" href="/about.htm">About Us</a> &nbsp;<span class="footer-divider">|</span>&nbsp; <a class="footer-links" href="/Jobs.htm">Jobs!</a> &nbsp;<span class="footer-divider">|</span>&nbsp; <a class="footer-links" href="/distribution.htm">Sales and Distribution</a> &nbsp;<span class="footer-divider">|</span>&nbsp; <a class="footer-links" href="/rights">Rights</a> &nbsp;<span class="footer-divider">|</span>&nbsp; <a class="footer-links" href="/media.htm">Media</a> &nbsp;<span class="footer-divider">|</span>&nbsp; <a class="footer-links" href="/academic.htm">Academic Requests</a> &nbsp;<span class="footer-divider">|</span>&nbsp; <a class="footer-links" href="/conferences.htm">Conferences</a> &nbsp;<span class="footer-divider">|</span>&nbsp; <a class="footer-links" href="/orderfaq.htm">FAQ</a> &nbsp;<span class="footer-divider">|</span>&nbsp; <a class="footer-links" href="/contactus">Contact Us</a> &nbsp;<span class="footer-divider">|</span>&nbsp; <a class="footer-links" href="/writeforus">Write for Us</a> &nbsp;<span class="footer-divider">|</span>&nbsp; <a class="footer-links" href="/privacypolicy.htm">Privacy</a> </div> </section> <section id="block-nostarch-custom-custom-footer-copyright" class="block block-nostarch-custom clearfix"> <div class="block-block"> <p>Copyright 2025. No Starch Press, Inc</p> </div> </section> </div> </footer> <script src="https://nostarch.com/sites/all/modules/contrib/addthis/addthis.js?sska4v"></script> <script src="https://nostarch.com/sites/all/libraries/shariff/shariff.min.js?sska4v"></script> <script src="https://nostarch.com/sites/all/themes/contrib/bootstrap/js/bootstrap.js?sska4v"></script> <!-- Reddit Pixel --> <script> !function(w,d){if(!w.rdt){var p=w.rdt=function(){p.sendEvent?p.sendEvent.apply(p,arguments):p.callQueue.push(arguments)};p.callQueue=[];var t=d.createElement("script");t.src="https://www.redditstatic.com/ads/pixel.js",t.async=!0;var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}}(window,document);rdt('init','t2_6acpsf9y');rdt('track', 'PageVisit'); </script> <!-- DO NOT MODIFY UNLESS TO REPLACE A USER IDENTIFIER --> <!-- End Reddit Pixel --> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9220c72b9c4f823d',t:'MTc0MjI1OTQ2OS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>

Pages: 1 2 3 4 5 6 7 8 9 10