John Rhea - An Introduction to Programming in Javascript: Stomping Zombies With Variables, Loops, Functions And

1. Front Matter

Copyright 2020 by John Rhea. This book is licensed under the Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)

Distributed by the Undead Institute a division of StoryLab LLC

This book made possible by a generous grant from Grant for the Web.

Honest feedback. Enjoyed the book? Found an error or an omission? Still confused about something? Want to complement the authors sense of humor (or lack thereof)? Email John directly at

https://undead.institute

Stop those zombie cowboys!

This book contains a large amount of information, zombies, silliness, and a sense of humor that some would call terrible. If youre looking for straight technical information or a cure to your insomnia, this is not the book for you.

If youre looking for a book thats accessible to those without technical training or inclination and/or dont mind laughing a bit while youre learning, this book is for you. We at the Undead Institute believe that getting braaains should be fun. Join us and lets stop those smelly zombies once and for all! (No, seriously. Their breath is terrible.)

When you sign up for Webpocalypse Weekly, our email newsletter. This printable cheat sheet covers JavaScript loops, variable, conditionals and functions. Write JavaScript easily with your very own Apocalyptic Javascript-ic Cheat Sheet

https://undd.link/intro2js

by John Rhea

Published by The Undead Institute

JavaScript differs from other front-end web languages, such as HTML and CSS. Its much more programmatic and uses logic and variables and functions and loops and all kinds of thingsbut dont fear for your mind as though a zombie were hot on your trail. Well walk you through everything and get you up to speed, even if this is your first taste of JavaScript and/or of a more traditional programming language.

This book assumes a small amount of HTML/web page knowledge. If you have none, you can get what you'd need from our free book Punching Zombies: An HTML & CSS Quick Start Guide for Writers, Designers, and Beginners

One of the first things to understand is a concept called variables. Variables are like buckets you store things in. You can put water in a bucket or your lunch or a mannequin head or the rookie cards of the 2037 Los Angeles Zombie-Dodgers Human Resistance Cell. You can put just about anything in a bucket.

There are also lots of different JavaScripty types of things you can put in a bucket, such as:

Numbers: These are what you think they are.

Strings of Letters (Strings): These are actually more than just lettersthey are any text or character that you want to treat as a single thing. Enclose strings in quotation marks (both single and double quotes work in JavaScript) and can include any valid character. Examples of strings are:

Or,

Or,

Or,

Or,

Or,

So you can have number characters in a string too, but theyll behave as strings and not as numbersso you cant add or multiply them without converting them back to numbers. If something is in quotes, its a string.

Boolean: The value is true or false and cant be anything else. This makes it great for using it like a switch to turn something on or off.

There are a few more types of variables in JavaScript, but this is enough to get us started.

Some buckets can only hold one type of thing. For instance, a bucket with a hole in the bottom wouldnt hold water or the soda from the last working soda fountain in North America, but it could be great for holding books or large rocks or the personal effects of your zombified roommate. Similarly, variables often only hold one type of thing.

In some programming languages, putting the wrong type of content in the wrong bucket can cause errors, but JavaScript is forgiving. The positive side of that is that JavaScript just handles a lot of stuff without complaining. The negative is that if it messes up or handles something different from what you expect, you can get weird results or programming bugs that are hard to track down.

Night of the Living Tip:

One common place these types of bugs happen is when you try to add a number (2) and a string that looks like a number (2). In JavaScript, 2 + 2 is 22. Since one of these is a string, it casts/treats the other as a string too and puts them together or concatenates them. (This can be very useful when you need to construct a message for the user.) Thus, be careful that you are adding numbers with numbers and not strings.

These buckets weve been talking about are called variables. Theyre called variables because they areahemvariable. You can put something in them, and, during your program, you can take that out and look at it or take it out and do something with it or take it out and put something else in. You can do that any number of times.

Before we can use these buckets/variables to beat back the zombie hordes, we have to name them. We can name a variable just about anything we want. However, we can only use letters, numbers, and underscores. We cant use any other characters, and the first character cant be a numberi.e., 7zombies is invalid, but sevenzombies or _7zombies or zombies_numbering_7 would all work just fine.

Also, variables are case sensitive, so a variable of zombie is different from a variable of Zombie, which is also different from a variable named ZOMBIE, which is different from zOmBiEso watch which case you use, and use that case throughout your code.

Night of the Living Tip:

We can use this to our advantage with camel case. Camel case makes multi-word variable names much easier to read and understand. In camel case, you write the first word in all lower case, and then capitalize the first letter of each additional word. Here are some examples:

sevenZombies sevenFormerHumans thatGuyFromAccountingWhoTurnedZombie dawnOfTheDeadFromSales rickTheUndeadHarbingerOfDoom

The last rule for variable names is that you cant use any of JavaScripts reserved wordsmeaning the words that have special meaning to JavaScript and are how the language functions. If HTML had variables, itd be like naming your bucket

. It would be hard for the browser to understand when you meant the p tag and when you meant the variable/bucket, as youd given both the same name.

Now how do you declare a variable in JavaScript? There are three ways: var, let, and const. (These would be examples of reserved words that cannot be variable/bucket names.)