Welcome to the JavaScript Center! This will be my topic used to teach JavaScript lessons. It is aimed toward individuals quite familiar with Scratch but who have not a clue of any other programming language. This tutorial will require you to have a text editor and JavaScript reader, such as a web browser. I recommend using the JavaScript Scratchpad on Firefox by hitting shift-F4 or Codecademy Labs (on codecademy.com)

I will post each lesson on this topic along with a link in the table of contents below. Anyone is welcome to correct me if you see a mistake, discuss, or ask questions on this topic. If you think my tutorials are not understandable, please tell me! To set up a good JavaScript executor:

-open Mozilla Firefox
-hit shift-F4 and open Scratchpad
-hit ctrl-shift-K to open the web console

As long as you find a way to make and run JavaScript code, you can follow this tutorial.

Ooooh, cool! (might fit better in MaC, but whatever )

JSFiddle and Codecademy Labs are both good resources to program on.

Tutorial 1: Getting Started
Moving from Scratch to a text-based language can be quite challenging at first. However, you will soon find that you will be able to relate the concepts of Scratch to what you create in JavaScript. JavaScript itself is quite an advanced language, but learning it first will make all other languages come to you naturally. Just like Scratch's operators blocks, JavaScript performs math. An example would be the following:
That would produce a sum of 5! Subtraction, multiplication, and division all work the same way.
If you type in the above code and ran it in JavaScript, what would happen? Nothing! The answer would be evaluated but it is not put into action. All web browsers have a web console which displays error messages or any text output. Only you can decide what text is displayed to the web console. To print something to the web console, simply use:
That is part of the JavaScript syntax! The syntax of a programming language is basically its dictionary- it's the set of rules that can be read. The above code prints whatever is within the parentheses to the web console. Programmers might use that for debugging and finding JavaScript errors. Try the following code:
Run the code! What you will get displayed to the web console is “5” (without the quotations).

So you already know numbers- just like English! But what about strings? A string is a series of keyboard characters. When we write a string, we put it in quotation marks like so:
If you printed to the console a string, the string would appear in the console without the quotes. Give it a try a few times! Play around with numbers, strings, and console.log();

You just learned:

-numbers
-simple mathematics
-strings
-printing to the console

Tutorial 2: Variables
Variables are one of the most important part of programming. In Scratch you know them as:

(variable)
set [variable v] to (0)
change [variable v] by (2)

In JavaScript you will be able to relate to Scratch! A variable is declared with the following syntax in JavaScript:
When you write a variable for the first time like this, it is called declaring a variable. Notice and memorize the syntax until it sticks in your head. Above we assigned the variable a number value. We can also assign it string values:
Always remember that semicolon. It is important because it tells JavaScript when a definite action or statement ends and to move on to the next one.

Remember how we had to put strings in quotes? When we call the name of a variable, we don't need any quotes, just type the name. The following code prints the above variable to the console:
What gets printed to the console is not “name” but the value of “name”, which is “Jim”.

What you learned:

-how to declare a variable
-variable syntax
-uses of semicolons

Tutorial 3: Strings oh Strings
Just like Scratch, JavaScript can manipulate strings, though it has more options. To review strings first, recall that a string is a series of computer characters. In more simple terms, it can be a letter, word, sentence, or anything longer. Strings are always placed in quotation marks to tell JavaScript it is working with a string and not something else, such as a variable. The following is string syntax:
Remembering the quotes is vital, and Scratch does not require quotes, so the adjustment can take some time. What more can be done with strings, though? Recall in Scratch the following block:

(length of [])

The block reports the length of the string typed into the parameter. JavaScript's way of doing this uses the following syntax:
What JavaScript would report is the length of the string, meaning how many characters it has. The above example would report 6 because there are 6 letters in “string”. Try printing (logging) to the console the length of various strings. You should have numbers printed instead of strings. For example:
Another thing we can do is taking a substring. First we need to cover something confusing, the indexing or placement of characters in a string. In Scratch, the following script:

(letter (1) of [scratch])

Would report “s” because “s” is the first letter in “scratch”; it has an index of 1 in Scratch. In JavaScript, the indexing starts with 0 and counts up. JavaScript indexing does not count the characters but instead the spaces between characters. The index of 0 in the string “scratch” comes before the “s”. The index of 1 in JavaScript comes between the “s” and “c”. Now that we know the indexing, take a look at this syntax:
What this does is takes a portion of the string, starting at the index of 0 and ending at 3. In this case, it returns “scr”, the first 3 letters of “scratch”.

To not get confused, imagine the following block being in Scratch:

(letters (1) through (3) of [scratch]) //category=operators

That functions exactly the same as the JavaScript code above. He only difference is the first number: due to JavaScript's indexing, that must be downed by 1 to meet the desired results of the first 3 letters. Good job on this harder lesson! Try logging to the console string manipulations:

nXIII wrote:

Another way to think about strings is to assign each character an index starting at 0:

0 1 2 3 4
h e l l o

This helps more with methods like charAt(…) that only take a single number (thus “between two positions” doesn't really make sense). In that case, you can think of methods like substring(a, b) as starting at character #a (inclusive) and continuing up to but not including character #b (exclusive).


It's also worth noting that substring(…) takes two positions, and substr(…) takes a position and a length.

'hello'.substring(1, 2) === 'e'
// start after the 1st character and end after the 2nd character
 
'hello'.substr(1, 2) === 'el'
// start after the 1st character and take a string of 2 characters

With the above said, let's consider the following:
The following syntax will report the corresponding character:
The charAt() method is a quicker alternative than using substrings when only accessing one character from a string.

You just learned:

-strings review
-length of strings
-substrings
-JavaScript indexing

Wouldn't substr(0, 3) take the first four letters? (0, 1, 2, 3)

EDIT: Huh, that's confusing You might want to include that it starts at the first number, and ends at the number before the second number (if I make sense xD)

EDIT TWO: Reread the post and I understand.

Firedrake969 wrote:

Wouldn't substr(0, 3) take the first four letters? (0, 1, 2, 3)

EDIT: Huh, that's confusing You might want to include that it starts at the first number, and ends at the number before the second number (if I make sense xD)

Wait, in the string scratch I think
Wouldn't 0-3 just be “scr”?

Oops, yeah.

Another way to think about strings is to assign each character an index starting at 0:
This helps more with methods like charAt(…) that only take a single number (thus “between two positions” doesn't really make sense). In that case, you can think of methods like substring(a, b) as starting at character #a (inclusive) and continuing up to but not including character #b (exclusive).


It's also worth noting that substring(…) takes two positions, and substr(…) takes a position and a length.

That clears things up, thanks.