Learn Javascript: The Completely 'Wrong' Way



Redlands Conservatory

Learn Javascript: For Kids!

By: Mr. Walt

After completing our first school year learning JavaScript, as promised, I've taken some time and compiled all of our lessons into one super easy to read and understand JavaScript Primer!

Here condensed into LESS THAN 25 PAGES, you will find SIMPLE examples and explanations of the entire JavaScript core procedural language!

You'll also find a fantastic introduction to creating both 2D and 3D graphics in the easiest possible way using the mighty JavaScript.

So, the purpose of this book is two fold: If you are a student, I've written this book for you to refer back to and to have a terrific reference and review source of everything we learned as you head out on Summer break! (Never stop coding! You are the programmers of the future.)

And if you were not a student of the conservatory then... that's absolutely fine too!

All of us at the Redlands Conservatory are driven to create simple, clear, and speedy ways for you to join us and learn to code as well.

Learning At Warp Speed: How To Use This Book.

Because I've condensed everything down to the minimum number of pages for you, this is one of the very few books where I would say "don't skip around," but instead buckle down and read and try the examples on each page in order; at least the first time through.

By doing that, truly within hours, you can have a solid grasp of the entire procedural core of a language used on more interactive web pages than any other!

Chapters and headings are organized so you can quickly find the things you need to use. So, after working through the book one time, it is then designed to become a rapid reference source for you in the future.

All of the example programs can be cut and pasted from the book without typing, and, are written to run perfectly from a web page without any additional code.

So, you'll be able to create you own programs in a flash!

And last, there is a step by step video that will take you through all the examples covered in the book on our class page.

So, make sure to bookmark and visit:



For everything that's new! (Our more sophisticated sample programs and student projects are also available there.)

Thanks for a wonderful year, and enjoy JavaScript For Kids!

(Recommended for ages 8 - 99.)

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 the 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 visiting your web page with a similar browser!

JavaScript is an "interpreted" 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."

The best online editor I have found is at:



Note: This editor is wonderful because it is full screen, and saves your work right from the main screen. However, it also REQUIRES you use Google Chrome to run properly, and a few computers have trouble running it.

An alternative online editor is from w3schools:



Note: w3schools has the best online JavaScript instructions I have ever seen, and was often an inspiration in writing this text, 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:

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!

Part I

Core Of The Language

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!

Here is an example of what I mean. The following JavaScript program will print "Hello World" to the screen:

document.write("Hello World")

Please note that the ENTIRE JavaScript program is placed in between the two "" statements. This is how all your programs will work.

Your JavaScript code will appear between the two "" commands on any web page.

All the other statements outside the "" 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:

[pic]

#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 everything else on the 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!

Last, you can print 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!!!

Note: The following examples use Notepad, or Notepad ++, but, you CAN use the online editors mentioned in the "setting up your computer" section above if you find that more convenient.

Type, or cut and paste the following text into Notpad++:

document.write("Hello World")

If this is your first time using Notpad++, select Language/H/HTML:

[pic]

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).

[pic]

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.)

[pic]

You should see the following result:

[pic]

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:

document.getElementById("demo").innerHTML = "Hello World";

As you can see, everything is the same, except we added the line:

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!

Congratulations!

Chapter 2

COMMENT/REMARKS

As you program in any language, it's important to be able to leave yourself (and others) notes within your code to make it easy to remember what you were doing later when you come back to work on your code and it suddenly looks like spaghetti!

You can leave yourself a note in JavaScript by placing "//" in front of anything you'd like to say, and the computer will ignore any text that follows the "//."

Example:

// This comment will be ignored by the computer, so, I can leave myself a note here.

You can also leave a large block of comments by using the " ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download