Coding with JavaScript For Dummies book cover

Coding with JavaScript For Dummies

By: Chris Minnick and Eva Holland Published: 05-26-2015

Go from beginner to builder quickly with this hands-on JavaScript guide

Coding with JavaScript For Dummies provides easy, hands-on instruction for anyone looking to learn this popular client-side language. No experience? No problem! This friendly guide starts from the very beginning and walks you through the basics, then shows you how to apply what you've learned to real projects. You'll start building right away, including web page elements and simple applications, so you can immediately see how JavaScript is used in the real world. Online exercises allow you to test your code and expand your skills, and the easy-to-follow instruction provides step-by-step guidance toward understanding the JavaScript syntax, applications, and language.

JavaScript enhances static web pages by providing dynamic elements that can adapt and react to user action. It's a need-to-know tool for aspiring web designers, but anyone can benefit from understanding this core development language. Coding with JavaScript For Dummies takes you from beginner to builder quickly as you:

  • Learn what JavaScript does, how it works, and where to use it
  • Master the core elements of JavaScript and immediately put it to work
  • Build interactive web elements and try out your code online
  • Create basic applications as you apply JavaScript to the app development workflow

Anytime a website responds to your movement around the screen, that's JavaScript. It makes websites more functional, more beautiful, and more engaging, and your site visitors will demand nothing less. If you want to build a better website, you need JavaScript. If you need JavaScript, Coding with JavaScript For Dummies gets you started off quickly and painlessly, with plenty of hands-on practice.

Articles From Coding with JavaScript For Dummies

page 1
page 2
page 3
page 4
page 5
41 results
41 results
Coding with JavaScript For Dummies Cheat Sheet

Cheat Sheet / Updated 03-03-2022

Master coding with JavaScript by discovering which words are reserved in JavaScript, an extensive list of HTML5 APIs, and jQuery selectors. Just check out these helpful tips to get started.

View Cheat Sheet
JavaScript For Dummies Cheat Sheet

Cheat Sheet / Updated 02-18-2022

JavaScript opens up Web pages to you so that you can add interactive features and those user-friendly touches. Of course, you have to know how to fit JavaScript into existing code and what to input to get the effects you want. And, when things aren't working well, you may need a little help troubleshooting the problem to get back on track.

View Cheat Sheet
10 Online Tools to Help You Write Better JavaScript

Step by Step / Updated 03-07-2017

JavaScript has more libraries, resources, and helpful tools for working with it than for any other programming language. Here are ten of the best resources for helping you write more and better JavaScript.

View Step by Step
10 JavaScript Frameworks and Libraries to Learn Next

Step by Step / Updated 01-26-2017

You’ve only just begun your JavaScript journey. The universe of tools, frameworks, and libraries built with JavaScript and that will help you write better JavaScript programs is vast and growing at a mind-boggling pace. Here are ten great JavaScript frameworks and libraries.

View Step by Step
JavaScript Reserved Words

Article / Updated 01-24-2017

When coding with JavaScript, it will benefit you to know certain reserved words. The following list contains JavaScript reserved words. You can’t use these words as JavaScript variables, functions, methods, loop labels, or object names. abstract final public boolean finally return break float short byte for static case function super catch goto switch char if synchronized class implements this const import throw continue in throws debugger instanceof transient default int true delete interface try do long typeof double native var else new void enum null volatile export package while extends private with false protected

View Article
List of HTML5 APIs for Coding with JavaScript

Article / Updated 03-26-2016

Here is an extensive list of HTML5 APIs that have either been proposed or implemented. Browsers are constantly being updated with new features. For the latest on which browsers support which features, visit caniuse.com. API What It Does Ambient Light API Provides information about the ambient light levels, as detected by a device’s light sensor. Battery Status API Provides information about the battery status of the device. Canvas 2D Context Allows drawing and manipulation of graphics in a browser. Clipboard API Provides access to the operating system’s copy, cut, and paste functionality. Contacts Allows access to a user’s contacts repository in the web browser. Drag and Drop Supports dragging and dropping items within and between browser windows. File API Provides programs with secure access to the device’s file system. Forms Gives programs access to the new data types defined in HTML5. Fullscreen API Controls the use of the user’s full screen for web pages, without the browser user interface. Gamepad API Supports input from USB gamepad controllers. Geolocation Provides web applications with access to geographical location data about the user’s device. getUserMedia/Stream API Provides access to external device data (such as webcam video). History API Allows programs to manipulate the browser history. HTML Microdata Provides a way to annotate content with computer-readable labels. Indexed database Creates a simple client-side database system in the web browser. Internationalization API Provides access to locale-sensitive formatting and string comparison. Offline apps Allows programmers to make web apps available in offline mode. Proximity API Provides information about the distance between a device and an object. Screen Orientation Reads the screen orientation state (portrait or landscape) and gives programmers the ability to know when it changes and to lock it in place. Selection Supports selecting elements in JavaScript using CSS-style selectors. Server-sent events Allows the server to push data to the browser without the browser needing to request it. User Timing API Gives programmers access to high-precision timestamps to measure the performance of applications. Vibration API Allows access to the vibration functionality of the device. Web Audio API API for processing and synthesizing audio. Web Messaging Allows browser windows to communicate with each other across different origins. Web Speech API Provides speech input and text-to-speech output features. Web storage Allows the storage of key-value pairs in the browser. Web sockets Opens an interactive communication session between the browser and server. Web Workers Allows JavaScript to execute scripts in the background. XMLHttpRequest2 Improves XMLHttpRequest to eliminate the need to work around the same-origin policy errors and to make XMLHttpRequest work with new features of HTML5.

View Article
jQuery Selectors for Coding with JavaScript

Article / Updated 03-26-2016

JQuery provides many different ways to match sets of elements within a document beyond the methods built into JavaScript. Check out this list of all the jQuery selectors. To use them, simply pass them to the jQuery function (or, you can use the $ alias for the jQuery function). For example: $("*") selects every element. $("div p:first-child") selects the first paragraph child of each matched div element. $("div:contains('We hold these truths')") selects the divs that contain the matching text. Check here to see examples of each of these jQuery selectors inside programs. Selector What It Selects All Selector (“*”) All elements. :animated Selector All elements that are animated at the time of selection. Attribute Contains Prefix Selector [name|="value"] Elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-). Attribute Contains Selector [name*="value"] Elements that have the specified attribute with a value containing a given substring. Attribute Contains Word Selector [name~="value"] Elements that have the specified attribute with a value containing a given word, delimited by spaces. Attribute Ends With Selector [name$="value"] Elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive. Attribute Equals Selector [name="value"] Elements that have the specified attribute with a value exactly equal to a certain value. Attribute Not Equal Selector [name!="value"] Elements that either don’t have the specified attribute or do have the specified attribute but not with a certain value. Attribute Starts With Selector [name^="value"] Elements that have the specified attribute with a value beginning exactly with a given string. :button Selector All button elements and elements of type button. :checkbox Selector Elements of type checkbox. :checked Selector All elements that are checked or selected. Child Selector (“parent > child”) All direct child elements specified by “child” of elements specified by “parent”. Class Selector (“.class”) Elements with the given class. :contains() Selector Elements that contain the specified text. Descendant Selector (“ancestor descendant”) Elements that are descendants of a given ancestor. :disabled Selector Elements that are disabled. Element Selector (“element”) Elements with the given tag name. :empty Selector Elements that have no children (including text nodes). :enabled Selector Elements that are enabled. :eq() Selector The element at index n within the matched set. :even Selector Even elements, zero-indexed. See also odd. :file Selector Elements of type file. :first-child Selector Elements that are the first child of their parent. :first-of-type Selector Elements that are the first among siblings of the same element name. :first Selector The first matched element. :focus Selector The element that is currently focused. :gt() Selector Elements at an index greater than index within the matched set. Has Attribute Selector [name] Elements that have the specified attribute, with any value. :has() Selector Elements which contain at least one element that matches the specified selector. :header Selector Elements that are headers, like h1, h2, h3, and so on. :hidden Selector Elements that are hidden. ID Selector ("#id") A single element with the given id attribute. :image Selector Elements of type image. :input Selector All input, textarea, select, and button elements. :lang() Selector Elements of the specified language. :last-child Selector Elements that are the last child of their parent. :last-of-type Selector Elements that are the last among siblings of the same element name. :last Selector The last matched element. :lt() Selector Elements at an index less than index within the matched set. Multiple Attribute Selector [name="value"][name2="value2"] Elements that match all the specified attribute filters. Multiple Selector (“selector1, selector2, selectorN”) The combined results of all the specified selectors. Next Adjacent Selector (“prev + next”) All next elements matching “next” that are immediately preceded by a sibling “prev”. Next Siblings Selector (“prev ~ siblings”) All sibling elements that follow after the “prev” element, have the same parent, and match the filtering “siblings” selector. :not() Selector Elements that do not match the given selector. :nth-child() Selector Elements that are the nth-child of their parent. :nth-last-child() Selector Elements that are the nth-child of their parent, counting from the last element to the first. :nth-last-of-type() Selector All the elements that are the nth-child of their parent in relation to siblings with the same element name, counting from the last element to the first. :nth-of-type() Selector Elements that are the nth child of their parent in relation to siblings with the same element name. :odd Selector Odd elements, zero-indexed. See also even. :only-child Selector Elements that are the only child of their parent. :only-of-type Selector Elements that have no siblings with the same element name. :parent Selector Elements that have at least one child node (either an element or text). :password Selector Elements of type password. :radio Selector Elements of type radio. :reset Selector Elements of type reset. :root Selector The element that is the root of the document. :selected Selector Elements that are selected. :submit Selector Elements of type submit. :target Selector The target element indicated by the fragment identifier of the document’s URI. :text Selector All input elements of type text. :visible Selector Elements that are visible.

View Article
10 Things You Didn't Know JavaScript Could Do

Article / Updated 03-26-2016

JavaScript has more to it than meets the eye. As you begin programming, you wull discover just howversatile it is. Here are ten things that JavaScript can do that you may not have known about: Make better TV: The Yahoo! ConnectedTV platform allows programmers to write TV apps using JavaScript. Apps built with Yahoo!'s platform can run on a variety of different smart TVs. TV apps let you create dynamic Internet services and deliver them to the video or television-viewing audience. Make coffee: In one of the more important developments in JavaScript-enabled devices, Caffeine-4-Me is a program, written in JavaScript, that interacts with a hardware controller to turn a coffee pot on and off through a website interface. Fly a drone: AR.Drone WebFlight is a web application for controlling the AR.Drone 2.0 using your web browser. WebFlight supports plugins that can do everything from recording video of your flights to facial recognition. Control a robot: Use your JavaScript expertise to manipulate robots! NodeBots is a community of programmers and robot enthusiast who get together at events around the world and hack robots using JavaScript. What could be more fun? How about an entire day dedicated to JavaScript controlled robots? Well, it just so happens that July 27 is international NodeBots day! Video conference without plugins: WebRTC (Web Real-time Communications) is an open source project that’s creating the standards that give web browsers and mobile applications real-time communication capabilities. Some of the companies behind WebRTC include Google, Mozilla, and Opera. Create native mobile apps: Apache Cordova is a set of APIs that allow mobile app developers to create native apps using HTML, CSS, and JavaScript. Because they're developed using platform-independent languages, apps built with Cordova can be deployed to multiple mobile operating systems with minimal effort. Write apps for Google Glass: Google Glass is Google’s Internet-connected eyewear. Because it uses the Android operating system, developing apps for Glass requires developers to use specialized Android software development tools. WearScript lets you create Google Glass applications using HTML, CSS, and JavaScript so you can develop, test, and release new programs faster and more easily. Use virtual reality with JavaScript: Leap Motion combines a motion detection controller with JavaScript to allow programmers to create virtual reality applications or to allow people to use existing websites and apps using virtual reality. Examples of apps that have been developed for Leap Motion include a chess game, a hands-free recipe app, a virtual reality sculpting app, and numerous games. Report the weather: EnviroReport is a JavaScript application that works with a Tessel hardware device and sensors to report the current temperature and humidity. Create a Clap Switch: Few inventions are more important or iconic than the clap-activated switch. Built using JavaScript and the Tessel hardware controller, the Tessel Clap-Switch has but one function: to turn something on when you clap and then to turn it off when you clap again.

View Article
Using Polyfills to Code with JavaScript

Article / Updated 03-26-2016

HTML5 brings some pretty amazing new functionality to JavaScript web pages, and the HTML 5 APIs are rapidly giving web browsers access to new universes of data and making installable computer applications a thing of the past. However, not every browser is on board with the future yet. Or, not every browser can agree on what that future should be. As a result, it’s quite possible, and quite common to want to use a particular HTML tag or API and find that it just doesn’t work in some browsers. Fortunately, some ingenious folks have come up with a strategy, called polyfills, for implementing features in browsers that don’t yet support them. Modernizr is a JavaScript library that detects whether a browser supports features of HTML5 and CSS3. A typical way to use a polyfill is to first detect whether the user’s browser supports the feature in question, using Modernizr, and then use the polyfill if not. To install Modernizr, select the particular tests that you'll be using in your web application, and build a custom version of the library that you can then import into your website using the script element. Modernizr uses a simple syntax to select between different paths based on whether a user’s browser supports a feature. For example, here’s a Modernizr test that checks for geolocation support: Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' }); A common case in which you would want to use a polyfill is with video. The HTML5 element allows browsers to play videos without using any plugins. However, different browsers require different video formats, and some older browsers don’t support the element at all. In order to smooth over these differences, you can include and use a JavaScript polyfill called MediaElement.js. To use it, you can simply download and include the appropriate JavaScript and CSS files and include the following script elements in the of your document: Then, using just a single video file in any browser can be as simple as just using the element and specifying a single .mp4 source file. If the browser doesn’t support or this format, a Flash video player will be used as a backup. Polyfills exist for nearly every new HTML5 feature. A complete list of polyfills is maintained by Modernizr.

View Article
Deferred Loading with JavaScript

Article / Updated 03-26-2016

One major cause of slow web pages is the so-called blocking script. A blocking script is a JavaScript file whose loading and execution blocks the loading of a web page. In extreme circumstances, a browser may download an entire webpage and show a blank screen for several seconds or longer while the JavaScript is loaded and parsed. Because web users tend to become bored quickly, this situation should absolutely be avoided. Fortunately, there are several ways to defer JavaScript loading and execution and to make your web pages display faster. The first way is by using the defer attribute of the script element. Here’s what it looks like: Note that the defer attribute can be used only with external JavaScript files. It can’t be applied to </span> blocks within a document.</p> <p>When present, the <span class="code">defer</span> attribute will cause the script to be executed once the page has finished parsing.</p> <p>Another way to defer loading and execution of a script is the method recommended by Google. Google recommends putting the following code at the very bottom of your web page. To use it, you would replace the sample script name (here, myscript.js) with your own filename, of course.</p> <pre class="code"><script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "myscript.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load",downloadJSAtOnload,false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; Another attribute for helping to defer JavaScript is the async attribute. The async attribute is new in HTML5. Here’s what it looks like: Like the defer attribute, the async attribute can only be used with external scripts (where the src attribute is used). When present, the async attribute will cause the script to be executed asynchronously with the rest of the page. In other words, the script will execute at the same time as the rest of the page. Whichever method you choose to use may have an effect on whether the rest of the JavaScript on your page runs correctly. Make sure to test everything after implementing deferred loading. Done correctly, deferring JavaScript can dramatically decrease your users’ wait time and make everyone happier.

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