Coding with JavaScript For Dummies
By Chris Minnick and Eva Holland
()
About this ebook
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.
Read more from Chris Minnick
JavaScript All-in-One For Dummies Rating: 5 out of 5 stars5/5Coding with AI For Dummies Rating: 0 out of 5 stars0 ratingsCoding All-in-One For Dummies Rating: 0 out of 5 stars0 ratingsWriting Computer Code: Learn the Language of Computers! Rating: 5 out of 5 stars5/5JavaScript For Kids For Dummies Rating: 0 out of 5 stars0 ratingsMastodon For Dummies Rating: 0 out of 5 stars0 ratingsBeginning ReactJS Foundations Building User Interfaces with ReactJS: An Approachable Guide Rating: 0 out of 5 stars0 ratingsBeginning HTML5 and CSS3 For Dummies Rating: 0 out of 5 stars0 ratings
Related to Coding with JavaScript For Dummies
Related ebooks
Web Coding & Development All-in-One For Dummies Rating: 1 out of 5 stars1/5HTML, CSS, and JavaScript Mobile Development For Dummies Rating: 4 out of 5 stars4/5HTML, CSS, & JavaScript All-in-One For Dummies Rating: 0 out of 5 stars0 ratingsCoding All-in-One For Dummies Rating: 4 out of 5 stars4/5HTML5 For Dummies Quick Reference Rating: 4 out of 5 stars4/5Getting a Coding Job For Dummies Rating: 4 out of 5 stars4/5Beginning Programming with Java For Dummies Rating: 0 out of 5 stars0 ratingsPHP, MySQL, & JavaScript All-in-One For Dummies Rating: 5 out of 5 stars5/5Coding For Dummies Rating: 5 out of 5 stars5/5Programming Interviews For Dummies Rating: 0 out of 5 stars0 ratingsHTML5 and CSS3 All-in-One For Dummies Rating: 0 out of 5 stars0 ratingsSQL For Dummies Rating: 0 out of 5 stars0 ratingsBeginning Programming with C++ For Dummies Rating: 0 out of 5 stars0 ratingsjQuery For Dummies Rating: 4 out of 5 stars4/5C# 7.0 All-in-One For Dummies Rating: 0 out of 5 stars0 ratingsBuilding a Web Site For Dummies Rating: 3 out of 5 stars3/5Networking For Dummies Rating: 5 out of 5 stars5/5C++ All-in-One For Dummies Rating: 4 out of 5 stars4/5Java For Dummies Rating: 0 out of 5 stars0 ratingsLinux All-in-One For Dummies Rating: 3 out of 5 stars3/5JavaScript and AJAX For Dummies Rating: 4 out of 5 stars4/5Beginning Programming with Python For Dummies Rating: 3 out of 5 stars3/5JavaScript: Beginner's Guide to Programming Code with JavaScript: JavaScript Computer Programming Rating: 0 out of 5 stars0 ratingsJava All-in-One For Dummies Rating: 0 out of 5 stars0 ratingsProfessional JavaScript for Web Developers Rating: 0 out of 5 stars0 ratingsLearning JavaScript Data Structures and Algorithms Rating: 5 out of 5 stars5/5Mastering JavaScript Rating: 4 out of 5 stars4/5Responsive Web Design with HTML5 and CSS3 Essentials Rating: 5 out of 5 stars5/5JavaScript: Beginner's Guide to Programming Code with JavaScript Rating: 5 out of 5 stars5/5
Programming For You
Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5HTML in 30 Pages Rating: 5 out of 5 stars5/5Python Programming : How to Code Python Fast In Just 24 Hours With 7 Simple Steps Rating: 4 out of 5 stars4/5SQL QuickStart Guide: The Simplified Beginner's Guide to Managing, Analyzing, and Manipulating Data With SQL Rating: 4 out of 5 stars4/5Programming Arduino: Getting Started with Sketches Rating: 4 out of 5 stars4/5PYTHON: Practical Python Programming For Beginners & Experts With Hands-on Project Rating: 5 out of 5 stars5/5C# Programming from Zero to Proficiency (Beginner): C# from Zero to Proficiency, #2 Rating: 0 out of 5 stars0 ratingsC Programming For Beginners: The Simple Guide to Learning C Programming Language Fast! Rating: 5 out of 5 stars5/5Linux: Learn in 24 Hours Rating: 5 out of 5 stars5/5SQL All-in-One For Dummies Rating: 3 out of 5 stars3/5Python for Data Science For Dummies Rating: 0 out of 5 stars0 ratingsMastering Windows PowerShell Scripting Rating: 4 out of 5 stars4/5USB Complete: The Developer's Guide Rating: 4 out of 5 stars4/5JavaScript Demystified Rating: 4 out of 5 stars4/5Spies, Lies, and Algorithms: The History and Future of American Intelligence Rating: 4 out of 5 stars4/5Beginning Programming with C++ For Dummies Rating: 4 out of 5 stars4/5Tiny Python Projects: Learn coding and testing with puzzles and games Rating: 4 out of 5 stars4/5Raspberry Pi Cookbook for Python Programmers Rating: 0 out of 5 stars0 ratingsMastering C# and .NET Framework Rating: 5 out of 5 stars5/5Python: Learn Python in 24 Hours Rating: 4 out of 5 stars4/5Learning Google Apps Script Rating: 4 out of 5 stars4/5Gray Hat Hacking the Ethical Hacker's Rating: 5 out of 5 stars5/5Linux Command-Line Tips & Tricks Rating: 0 out of 5 stars0 ratings
Reviews for Coding with JavaScript For Dummies
0 ratings0 reviews
Book preview
Coding with JavaScript For Dummies - Chris Minnick
Part I
Getting Started with JavaScript
webextra Visit http://www.dummies.com for great Dummies content online.
In this part …
check.png Find out how to write your first JavaScript program.
check.png Get the inside scoop on how to work with variables and arrays.
check.png Discover how to work with operators, expressions, and statements.
check.png Use loops and branches in your JavaScript coding.
check.png Visit http://www.dummies.com for great Dummies content online.
Chapter 1
The World's Most Misunderstood Programming Language
In This Chapter
arrow Getting to know JavaScript
arrow Figuring out what JavaScript does
arrow Understanding why you need JavaScript
People understand me so poorly that they don't even understand my complaint about them not understanding me.
— Søren Kierkegaard
JavaScript hasn’t always been as highly regarded as it is today. Some people have called it the best and worst programming language in the world. Over the last few years, there have been a great number of improvements made to the way programmers write JavaScript and to JavaScript interpreters. These improvements have made JavaScript a much better language today than it’s been in the past.
In this chapter, you discover what JavaScript is and a little bit of the history of the language. You also find out what JavaScript does and why you need to know it.
ontheweb Don’t forget to visit the website to check out the online exercises relevant to this chapter!
What Is JavaScript?
Back in the very early days of the web, browsers were simple readers for web pages (see Figure 1-1). They had virtually no capabilities themselves, except for the ability to display text in various sized fonts. As soon as Microsoft released its Internet Explorer browser, the browser wars were on, and the features started flying! One browser introduced the ability to display images, then another introduced the capability to have different fonts, and then blinking text, moving text, and all sorts of other wacky capabilities were introduced!
Figure 1-1: The first web browsers weren’t much to look at.
It wasn’t long before someone got the idea that browsers could actually do useful things themselves, rather than just acting as fancy document display programs.
The Eich-man cometh
JavaScript got its start back in 1995 at Netscape. The creator of JavaScript, Brandon Eich, wrote JavaScript in record time (some say in as few as ten days!) by borrowing many of the best features from various other programming languages. The rush to market also created some interesting quirks (or, less politely described, mistakes) in the design of the language. The result is a sort of Esperanto-like language that looks deceptively familiar to people who are experienced with other programming languages.
Mocha-licious
The original name of JavaScript was Mocha. It was renamed LiveScript with the first beta deployment of Netscape Navigator and was then changed to JavaScript when it was built into the Netscape 2 browser in 1995. Microsoft very quickly reverse-engineered JavaScript and introduced an exact clone of it in Internet Explorer, calling it Jscript in order to get around trademark issues.
Netscape submitted JavaScript to the standards organization known as Ecma International, and it was adopted and standardized as EMCAScript in 1997.
technicalstuff Brandon Eich, the creator of JavaScript, famously commented about the name of the standardized language; stating that ECMAScript was an unwanted trade name that sounds like a skin disease.
warning Not only is ECMAScript an unappealing name for a programming language, the name given to the language by Netscape and which most people refer to it as, is rather unfortunate as well. If you already know how to program in Java or if you learn how to at some point, it’s a very good idea to keep in mind that the two languages may have some similarities, but they are, in fact, quite different animals.
We need more effects!
When JavaScript debuted, it quickly became very popular as a way to make web pages more dynamic. So-called Dynamic HTML (DHTML) was an early result of JavaScript being built into web browsers, and it enabled all sorts of fun effects, like the falling snowflake effect (see Figure 1-2), pop-up windows, and curling web page corners, but also more useful things like drop-down menus and form validation.
Figure 1-2: JavaScript made it possible to have snowflakes falling on your web page.
JavaScript grows up
Now entering its third decade, JavaScript has become the world’s most widely used programming language and virtually every personal computer in the world has at least one browser on it that can run JavaScript code.
JavaScript is flexible enough that it can be used and learned by nonprogrammers, but powerful enough that it can (and is) used by professional programmers to enable functionality on nearly every website on the Internet today, ranging from single-page sites to gigantic sites like Google, Amazon, Facebook, and many, many others!
Common misconceptions about JavaScript
Over the years, JavaScript has had some pretty nasty things said about it. While sometimes rumors are interesting, they aren't always true. The following list explains some common misconceptions about JavaScript:
Myth: JavaScript is not a real programming language. Reality: JavaScript is often used for trivial tasks in web browsers, but that doesn’t make it any less of a programming language. In fact, JavaScript has many advanced features that have raised the bar for programming languages and are now being imitated in languages such as PHP, C++, and even Java.
Myth: JavaScript is related to Java. Reality: Nope. The name JavaScript was invented purely as a marketing strategy because Java was incredibly popular at the time JavaScript came out.
Myth: JavaScript is new. Reality: JavaScript has been around for over 20 years! Some of the professional JavaScript programmers we know weren’t even born when JavaScript was created.
Myth: JavaScript is buggy and runs differently in different browsers. Reality: While this used to be true in some cases, browser makers decided to support the standardized version of JavaScript long ago. Every browser will run JavaScript the same today.
Dynamic scripting language
JavaScript is often described as a dynamic scripting language. In order to understand what this means, we need to first define a couple of terms and provide some context.
Computer programs are sets of instructions that cause computers to do things. Every computer programming language has a set of instructions and a certain way that humans must write those instructions. The computer can’t understand these instructions directly. In order for a computer to understand a programming language, it needs to go through a conversion process that translates human-readable (and writable) instructions into machine language. Depending on when this translation takes place, programming languages can be roughly divided into two types: compiled and interpreted (see Figure 1-3).
Figure 1-3: Programming languages are classified according to when the compilation takes place.
Compiled programming languages
Compiled programming languages are languages in which a programmer must write the code and then run it through a special program called a compiler that interprets the given code and then converts it into machine language. The computer can then execute the compiled program.
Examples of compiled languages include C, C++. Fortran, Java, Objective-C, and COBOL.
Interpreted programming languages
Interpreted languages are technically still compiled by the computer into machine language, but the compiling takes place by the user’s web browser right as the program is being run. Programmers who write interpreted languages don’t need to go through the step of compiling their code prior to handing it off to the computer to run.
The benefit of programming in an interpreted language is that it’s easy to make changes to the program at any time. The downside, however, is that compiling code as it’s being run creates another step in the process and can slow down the performance of programs.
Partially because of this performance factor, interpreted languages have gotten a reputation for being less than serious programming languages. However, because of better just-in-time compilers and faster computer processors, this perception is rapidly changing. JavaScript is having a big impact in this regard.
Examples of interpreted programming languages include PHP, Perl, Haskell, Ruby and of course, JavaScript
What Does JavaScript Do?
If you use the web, you're making use of JavaScript all the time. The list of things that can be enabled with JavaScript is extensive and ranges from simple notices you get when you forget to fill out a required field on a form to complex applications, such as Google Docs or Facebook. Here’s a short list of the most common uses for JavaScript on the web:
Nifty effects
Input validation
Rollover effects
Drop-down/fly-out menus
Drag and drop features
Infinitely scrolling web pages
Autocomplete
Progress bars
Tabs within web pages
Sortable lists
Magic Zoom (see Figure 1-4)
Figure 1-4: So-called Magic Zoom effects are enabled using JavaScript.
Why JavaScript?
JavaScript has become the standard for creating dynamic user interfaces for the web. Pretty much any time you visit a web page with animation, live data, a button that changes when you hover over it, or a drop-down menu, JavaScript is at work. Because of its power and ability to run in any web browser, JavaScript coding is the most popular and necessary skill for a modern web developer to have.
JavaScript is easy to learn
Keep in mind that programming languages were created in order to give people a simple way to talk to computers and tell them what to do. Compared with machine language, the language that the computer’s CPU speaks, every programming language is easy and understandable. To give you a sample of what sort of instructions your computer is actually obeying, here is a machine language program to write out Hello World
.
b8 21 0a 00 00
a3 0c 10 00 06
b8 6f 72 6c 64
a3 08 10 00 06
b8 6f 2c 20 57
a3 04 10 00 06
b8 48 65 6c 6c
a3 00 10 00 06
b9 00 10 00 06
ba 10 00 00 00
bb 01 00 00 00
b8 04 00 00 00
cd 80
b8 01 00 00 00
cd 80
Now look at one way you can accomplish this simple task with JavaScript:
alert(Hello World
);
Much easier, yes?
tip Once you learn the basic rules of the road (called the syntax), such as when to use parentheses and when to use curly brackets ({}), JavaScript actually resembles plain old English.
remember The first step in learning any language, including programming languages, is to get over your fear of getting started. JavaScript makes this easy. There are thousands of sample bits of JavaScript code on the web that anyone can just pick up and start messing around with. You already have all the tools you need (see Chapter 2), and it’s easy to start small with JavaScript and gradually build up to making great and wonderful things.
Where is JavaScript? JavaScript is everywhere!
Although JavaScript was originally designed to be used in web browsers, it has found a home in many other places. Today, JavaScript runs on smartphones and tablets, on web servers, in desktop applications, and in all sorts of portable devices.
JavaScript in the web browser
The most common place to find JavaScript, and what it was originally designed to do, is running in web browsers. When JavaScript runs in this way, it’s called client-side JavaScript.
Client-side JavaScript adds interactivity to web pages. It accomplishes this in several ways:
By controlling the browser itself or making use of functionality of the browser
By manipulating the structure and content of web pages
By manipulating the styles (such as fonts and layout) of web pages
By accessing data from other sources
In order to understand how JavaScript is able to manipulate the structure and style of web pages, you need to know a little bit about HTML5 and CSS3.
HTML5
Hypertext Markup Language (HTML) is the language used to structure web pages. It works by marking up content (text and images) to give web browsers information about the content, such as what is a heading, what is a paragraph, where an image goes, and so on. Listing 1-1 shows a simple HTML document. Figure 1-5 shows how a web browser displays this document.
Figure 1-5: Web browsers use HTML to render web pages.
Listing 1-1: A Simple HTML Document
This is HTML
introduction>This simple document was written with Hypertext Markup Language.
Here is everything you need to know about HTML right now in order to move forward with learning JavaScript:
In HTML, the characters surrounded by angle brackets are called tags.
The ending tag (which comes after the content being marked up) has a slash after the first angle bracket. For example
is an ending tag.A group of two tags (beginning and ending), plus the content in between them, is called an element.
Elements are generally organized in a hierarchal way (with elements nested within elements).
Elements may contain name/value pairs, called attributes. If an element has attributes, they go in the beginning tag. Name/value pairs assign values, in quotes, to names (which aren’t in quotes) by putting an equals sign between them. For example, in the following tag, width and height are both attributes of the div element:
100>
Some elements don’t have content and therefore don’t need an ending tag. For example, the img tag, which simply inserts an image into a web page, looks like this:
myimage.jpg width=320
height=200
alt=Here is a picture of my dog.
>
All the data necessary to show the image is included in the beginning tag using attributes, so the img tag doesn’t require an ending tag.
When you write a web page with HTML, you can include JavaScript code directly in that document, or you can reference JavaScript code file (which end in .js) from the HTML document. Either way, your viewer’s web browser will download the JavaScript code and run it when a user accesses a web page containing that JavaScript.
remember Client-side JavaScript runs inside of your users’ web browsers.
CSS3
Cascading Style Sheets (CSS) is the language used to add formatting and different layouts to web pages. The word style, when used in CSS, refers to many aspects of how the HTML document is presented to the user, including
Typefaces (or font faces)
Type size
Colors
Arrangement of elements in the browser window
Sizes of elements
Borders
Backgrounds
Creation of rounded corners on element borders
Like JavaScript, CSS can be either placed directly into an HTML document, or it can be linked to from the HTML document. Once it’s downloaded, it immediately does its thing and formats the document according to your specifications.
Style sheets in CSS are made up of CSS rules, which contain properties and values that should be applied to an element or a group of elements. Here’s an example of a CSS rule:
p{font-size: 14px; font-color: black; font-family: Arial, sans-serif}
This rule, reading from left to right, specifies that all p elements (which indicate paragraphs in HTML) should be displayed in text that is 14px large, black, and using the Arial font. If Arial isn’t available on the user’s computer, it should be displayed in some sans serif typeface.
The part of the CSS rule that’s outside of the curly brackets is called the selector. It selects the elements that the properties within the curly brackets apply to.
technicalstuff Throughout this book, you find out how to use JavaScript with HTML and CSS. We provide just enough information here to be able to show you how HTML and CSS work. If you need to learn more, you can find some excellent books about them. One that we highly recommend is Beginning HTML5 and CSS3 For Dummies by Ed Tittel and Chris Minnick (Wiley).
JavaScript is powerful!
JavaScript running in a web browser used to be slow, and JavaScript got a bad reputation early on among programmers. Today, JavaScript code runs 80 percent as fast as compiled code. And, it keeps getting faster all the time. What this means is that today’s JavaScript is much more powerful than the JavaScript of just a few years ago. And, it’s many times more powerful than the JavaScript that was first introduced in 1995.
JavaScript is in demand
JavaScript is not only the most widely known programming language, it’s also one of the most in-demand skills in the job market. It’s projected that the job market for JavaScript programmers will increase by 22 percent between 2010 and 2020. Exciting things are happening with JavaScript, and there has never been a better time than right now to learn it.
Chapter 2
Writing Your First JavaScript Program
In This Chapter
arrow Arranging your development environment
arrow Getting to know JavaScript code
arrow Understanding a simple JavaScript program
arrow Understanding the value of commenting your code
The secret of getting ahead is getting started.
— Mark Twain
Simple JavaScript programming isn’t difficult to understand. In this chapter, you go through the process of setting up your computer for writing JavaScript. You also write your first JavaScript program and get to know the basic syntax behind everything you’ll do with JavaScript in your future as a programmer.
ontheweb Don’t forget to visit the website to check out the online exercises relevant to this chapter!
Setting Up Your Development Environment
It’s important to have all of your tools set up and in place before beginning to write your first JavaScript program. We walk you through the process of downloading and installing our favorite JavaScript development tools, which are, coincidentally, the ones we use in this book. If you have similar tools that you prefer, please feel free to use those. However, we recommend that you still read this section of the book in order to learn why we’ve chosen these tools and to make your own decisions about whether to use them.
After you install each of the tools, we share some tips and tricks with you for how to get the most out of each of them.
Downloading and installing Chrome
The web browser that we prefer to use when working with JavaScript is Google Chrome. If you prefer to use a different web browser day to day, that’s fine, of course.