Learn Javascript: The "Wrong" Way...
By: Mr. Walt
In starting a Javascript book/tutorial, I know what you're wondering... You're wondering what I mean by "the wrong way" of learning.
To me what that really means is that you want to know how I learned to play the guitar.
Well I'm glad you asked.
After being a drummer for many years, I decided I'd like to QUICKLY learn to play guitar. So, I asked a really great guitar player to teach me how...
He sat me down, and in one single afternoon, taught me 5 or 6 musical scales. He told me if I practiced them until I could play them all smoothly, I'd know everything about guitar that he did.
Then he laughed, because it wasn't true (that I'd know as much as him), but, he knew he was making a very good point.
I dove in on the scales, and within a week could play them pretty well.
So, during my second lesson he put on a set of songs and asked me to play along. He said "just try each scale in the key of the song, see which one fits the song, then improvise by skipping around and playing different notes from that scale."
To my amazement, I could suddenly play along with just about any song, and within a few weeks, I was even playing parties with the band.
This lesson from this very cool guy always stuck with me through my whole life.
There are often "jems" in any subject that let you skip ahead very quickly, to greatly simplify, and more easily remember even a very complicated subject, like music. Or, you guessed it: programming in JavaScript!
It's my personal opinion that people who skip ahead don't miss out on the fundamentals. In fact, the fun you have in quickly being able to do something sparks passion and interest that always brings you back to learn the fundamentals later. And, the fundamentals make a lot more sense and are easier to remember and learn because you can already see clearly how they fit in to what you are planning to do!
So, that's the "wrong way" approach of this book! I'm going to get you up and running with JavaScript so fast that you will hardly be able to believe it!
No mumbo jumbo, no wasted text. Particularly fun examples, and, you'll be able to write your own USEFUL programs in an incredibly short time.
THEN, we'll double back and cover some fundamentals too.
(Yes, for the record, I often eat desert before a meal too.)
My goal is to teach you everything you need to know to write exciting programs in JavaScript in less than a week of reading this book, just as long as you are willing to "buckle down" for that time.
So, this book is particularly useful if you:
Are new to programming, and want to create an application as quickly as possible.
Or
Already program in another language and want to skip the usual terminology.
Or
If you just like to have desert before dinner too.
One last note: Although I will lay things out so that you can use what you learn here as a "quick reference source" later, everything written here will be so direct and brief, that the BEST way to use this book is to and not skip anything. Even information you may already know.
I promise, no extra words! And always the cool stuff first!
What Is JavaScript?
I could never get a straight answer to that question!!! So, here it is:
The short answer on JavaScript is, JavaScript can really be looked at as just an extension of HTML.
Now I know experts will argue that point, but it's my book, so, there's really just not much they can do to stop me.
Think of it this way:
HTML is the language that web pages are written in.
HTML is not a true "language" because it's simply a set of commands that tell the web server how to display your pictures and graphics on the web.
So, HTML is much more like a word processor, like Microsoft Word in nature. You can't tell it to make much of a calculation, or write a web page video game using it.
Enter JavaScript! JavaScript runs within your web page, and gives you the commands HTML has always lacked.
In short, JavaScript let's you make web pages that are INTERACTIVE, rather than pages that are just sitting there and look pretty..
You can write a program in JavaScript to do calculations on a web page, or display moving graphics, play a game, flip images or just about anything else you want your web page application to do!
And most importantly: It's super easy!
So, if you've ever wanted to write a program that runs on a web page, JavaScript is a fantastic way to do that!
A few very cool things about JavaScript:
Programs you write using this book will run "as is" without modification, just by uploading them. (Most other languages require that the web server have special software to execute them, which can create a lot of compatibility issues.)
The reason for Javascript's incredible compatibility is, JavaScript actually runs in the users browser! So, it runs within Firefox, Chrome, Internet Explorer etc. and not on the web page itself. This can provide a great deal of security and speed for programs you write, and even a "stand alone" capability to run when a user is off line!
In short, if it runs when you test it in your browser, it will run for anyone visting your web page with a similar browser!
JavaScript is an "interpeted" language, not a compiled language. This simply means that code written in JavaScript always remains in "plain English" within the web page HTML.
This is good and bad. It's good because this prevents malicious code from being written in JavaScript (since any malicious code could be seen) but it's "bad" in the sense that you can't easily hide your code should you ever want to.
Ultimately however, having open code of this type means that code you write will be trusted by most internet and computer security programs, and this saves a great many compatibility hassles as well!
Setting Up Your Computer To Program In JavaScript
There are at least two fantastic ways to write your programs in JavaScript.
One is simply to use an online editor, and to write your programs right from the online editor web page any time and anywhere!
You can find an online editor with a Google search like "JavaScript on line editor."
One of my favorites is from w3schools:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst
Note: w3schools has the best online JavaScript instructions I have ever seen, so, add them to your bookmarks!
The other way to write JavaScript programs on your computer is to just write them using a word processor built into your computer like Notepad.
There is a free version of Notepad online specifically made for programming called "Notepad++." It is available for both Mac and Windows.
You can download a free copy at: https://notepad-plus-plus.org/
For this tutorial, I'll assume you downloaded "Notepad++," and give examples based on that. However, you are welcome to use any editor you'd like!
A Quick And Important Note
The sample programs within this text are going to include the HTML text necessary to run them from a web page, in addition to the JavaScript program we are writing.
There are two reasons I am doing this.
The first is that I want everything you learn here, or use as the basis for your own program, to run right from a web page without any hassles should you choose to use it.
i.e. for maximum speed, I want you to be able to cut and paste anything here into your own web page creation and have it run right away!
Another reason to include the HTML code as well is that buttons, text blanks or other forms of inputting and outputting data into your program usually has to be done in HTML anyway. So, we're going to need to learn just a few HTML commands anyway!
Here is an example of what I mean. The following JavaScript program will print "Hello World" to the screen:
<!DOCTYPE html>
<html>
<body>
<script>
document.write("Hello World")
</script>
</body>
</html>
Please note that the ENTIRE JavaScript program is placed in between the two "<script>" statements. This is how all your programs will work.
Your JavaScript code will appear between the two "<script>" commands on any web page.
All the other statements outside the "<script>" are simply HTML commands to create the web page when uploaded.
So, taking a look at the little program above, you can replace "Hello World" with ANYTHING you would like your computer to say...
In case you didn't notice, you now already know how to write a web page where Javascript prints anything to the screen you want!
Gosh, this is just going to be way too easy... :-)
Our First Program
PRINTING STUFF TO THE SCREEN
Note: As we go through this tutorial, I'm going to put in big print (as seen above), exactly what each lesson covered.
The reason for that is, after we quickly cover each topic, you'll be able to make your own programs quickly by just cut, pasting, and modifying existing code from the examples in without having to remember structure right away.
The first thing everyone wants to do with a new language, is to print something to the screen.
There are several ways to do this is JavaScript which everyone seems to argue about. So, here are the most popular ways, simplified and "demystified!!!"
Each of the following will print "hello."
#1. You can create an alert box, using the command:
window.alert("hello")
An Alert box will pop up with any text you write on the screen and look like this:
#2. For testing, you can print directly to your web page using the command:
document.write("hello").
Warning!!! When you use "document.write" to print to the screen, it will erase your HTML web page.
#3. You can print right into an element you create, using the command:
document.getElementById("demo").innerHTML = "hello";
Note: Method #3 is probably what you will use most often!
Into your browser's console using the command:
console.log("hello")
Note: Writing to your browser's console can useful in developing programs because it will tell you when you have made errors, which makes them much easier to find.
O.K. Let's try it out!!!
Type, or cut and paste the following text into Notpad++:
<!DOCTYPE html>
<html>
<body>
<script>
document.write("Hello World")
</script>
</body>
</html>
If this is your first time using Notpad++, select Language/H/HTML:
Next type in (or cut and paste) our program, and then click on File/Saveas and enter a file name (let's call it hello.html).
Note: You need to save your program each time you make a change to it before running it.
Also, make sure to use the ".html" extension. (Notepad++ will usually do this for you automatically.)
Now that your program is saved, let's try running it!
Select Run, and then "Launch In" and select whatever browser your system currently has. (Chrome, Firefox, Internet Explorer, Safari and most others will work.)
You should see the following result:
As you can see, we just printed "Hello World" to the screen.
Let's do exactly the same thing, but use the alert box!
Just replace:
document.write("Hello World")
in your program with:
window.alert("Hello World");
Save the new program, and then run it in your browser just as we did above!
Next, let's try the console... Replace:
window.alert("Hello World");
in your program with:
console.log ("Hello World");
Save the new program, and then run it in your browser just as we did above!
NOTHING HAPPENED!
Perfect, that's just what we wanted.
Click F12 while in your browser, and then select "Console."
You will now see your program run, and your browser will check it and point out errors.
So, console is a great place to develop programs.
Last, let's use the command I think you'll use most often for printing:
document.getElementById("demo").innerHTML = "hello";
As I mentioned, what's cool about this command is that it will write your text into an element you create. By this, I mean that you can have a text box, or a line on your web page and this command will place your text right there!
So, we have to add one extra line to our HTML to define the element where the text is to be placed.
Type or cut an paste this in:
<!DOCTYPE html>
<html>
<body>
<p id="demo"</p>
<script>
document.getElementById("demo").innerHTML = "Hello World";
</script>
</body>
</html>
As you can see, everything is the same, except we added the line:
<p id="demo"</p>
This tells the computer where to place your text in the HTML by creating an element called "demo."
Save your program and run it.
You now know all the most popular ways to print ANYTHING to the screen using JavaScript!
Congradulations!
Chapter 2