Getting Started with Javascript

Getting Started with Javascript.

What am I learning? This is JavaScript (JS), a programming language. There are many languages, but JS has many uses and is easy to learn.

What can we use JavaScript for?

make websites respond to user interaction build apps and games (e.g. blackjack) access information on the Internet (e.g. find out the top trending words on Twitter by topic) organize and present data (e.g. automate spreadsheet work; data visualization)

confrim method:

1 confirm('This is an example of using JS to create some interaction on a website. Click OK to continue!');

What is programming?

Programming is like writing a list of instructions to the computer so it can do cool stuff with your information.

Programs can’t yet make your bed, but they can do math, keep track of your bank account, or send a message to a friend.

To do any of these actions, the program needs an input. You can ask for input with a prompt.

Examples:

1
2 prompt("what is your name?");
prompt("my name is Lucas Gatsas");

Data Types I & II: Numbers & Strings

Data comes in various types. You have used two already!

a. numbers are quantities, just like you’re used to. You can do math with them.

b. strings are sequences of characters, like the letters a-z, spaces, and even numbers. These are all strings: “Ryan”, “4” and “What is your name?” Strings are extremely useful as labels, names, and content for your programs.

To make a number in your code, just write a number as numerals without quotes: 42, 190.12334.

To write a string, surround words with quotes: “What is your name?”

Write a string with at least 3 words. Check out the examples of strings above. Find the length of the string by writing a period (full stop) and the word length, like this:

“string”.length Length counts every character in the string - including spaces!

“lucas are studying”.length = 18 types

3 words

Data Type III: Booleans

Nice job! Next let’s look at booleans. A boolean is either true or false.

For example, comparing two numbers returns a true or false result:

23 > 10 is true 5 < 4 is false

Let’s compare two numbers to return a true result:

First, write the string “I’m coding like a champ” Next, find the length of the string using .length Then, compare the string’s length to see if it is greater than 10 If you want to check your code, click “Stuck? Get a hint!” below.

1 "Lucas is a great coder!".length > 9;

Using console.log

You may have noticed that the interpreter doesn’t print out every single thing it does. So if we want to know what it’s thinking, we sometimes have to ask it to speak to us.

console.log() will take whatever is inside the parentheses and log it to the console below your code—that’s why it’s called console.log()!

This is commonly called printing out.

Comparisons

So far we’ve learned about three data types:

strings (e.g. “dogs go woof!”) numbers (e.g. 4, 10) booleans (e.g. false, 5 > 4) Now let’s learn more about comparison operators.

List of comparison operators:

1
2
3
4
5
6
7
8
9
10
11   > Greater than

  < Less than

    <= Less than or equal to

    >= Greater than or equal to

  === Equal to

  !== Not equal to

1
2
3
4
5
6
7 // Here is an example of using the greater than (>) operator.
console.log(15 > 4); // 15 > 4 evaluates to true, so true is printed.

// Fill in with >, <, === so that the following print out true:
console.log("Xiao Hui".length < 122);
console.log("Goody Donaldson".length >  8);
console.log(8*2 === 16);

Decisions, decisions

Nice work on comparisons! Now let’s see how we can use comparisons to ask yes or no questions.

Say we want to write a program that asks whether your name is longer than 7 letters. If the answer is yes, we can respond with “You have a long name!” We can do this with an if statement:

1
2
3 if ("my name is lucas gatsas".length >= 7 ) {
    console.log("you have a long name");
}

Computers are smart

Great! We used an if statement to do something if the answer to the condition was yes, or true as we say in JavaScript.

In addition to doing something when the condition is true, we can do something else if the condition is false. For example, if your name is shorter than 7 letters, we can respond with “You have a short name!” We can do this using an if / else statement:

1
2
3
4
5
6
7
8
9
10
11 if ("Lucas Gatsas".length >= 7 ) 
{
    console.log("Let's go down the first road!");
}
else 
{
    
    console.log("you are the code champion!")
    // What should we do if the condition is false? Fill in here:
    
}

More practice with conditionals

Now let’s practice using if/else statements. Do as much as you can by yourself, but if you need a reminder!

Write an if/else statement, just like we did in the last exercise. Here’s what the outline of the code looked like:
If your condition is true, use console.log to print “The condition is true”.
therwise (else) when it is false, use console.log to print “The condition is false”.
Make sure your condition evaluates to false, so that your program prints out “The condition is false”.

1
2
3
4
5
6
7
8
9
10
11 if (10 < 3)
{
     //if condition is true
     console.log("The condition is true");
     // do this code
}
else //"otherwise"
{
    console.log("The condition is false");

}

Computers aren't that smart

Well done! Now, computers are very literal. Syntax needs to be in exactly the right place for the computer to understand the code.

As you get started with programming, we will teach you many syntax rules. This is sort of like the grammar of programming languages. Grammar first, then programming poetry!

There are many mistakes in this code. Find them and fix them all.

You are doing what’s called “debugging,” a term popularized by Grace Hopper when she literally removed a moth from her computer.

1
2
3
4
5
6 if (10 === 10) 
{
    console.log("You got a true!");
} else {
    console.log("You got a false!");
}

Mid-lesson breather

We’ve covered a lot of ground so far! So many new terms, so much syntax. Let’s take a breather and review. We have learned:

Confirm and prompt

We can make pop-up boxes appear! confirm(“I am ok”); prompt(“Are you ok?”);

Data types

a. numbers (e.g. 4.3, 134)

b. strings (e.g. “dogs go woof!”, “JavaScript expert”)

c. booleans (e.g. false, 5 > 4)

Conditionals

If the first condition is met, execute the first code block. If it is not met, execute the code in the else block. See the code on the right for another example.

1
2
3
4
5
6
7 // This is an example of an if / else statement.

if (12 / 4 === "Ari".length) {
    confirm("Will this run the first block?");
} else {
    confirm("Or the second block?");
}

Math

We saw basic math before. The basic math symbols we learned in school work here. Even the order in which the computer understands the math is the same as in school!

Code:

( ): control order of operations
- and /: multiplication and division
- and +: subtraction and addition

Examples:

100/10 evaluates to 10
“Jane”.length + 5 evaluates to 9
5*(3+1) evaluates to 20

Complete the missing bits of code to construct the if / else statement. Make the condition evaluate to true. Finish the else statement by printing out the string “Error Error Error” to the console.

1
2
3
4
5
6
7
8
9 if ("Jon".length * 2 / (2+1) === 2)
{
    console.log("The answer makes sense!");
} 
else 
{
    console.log("Error Error Error");

}

Math and the modulo

Let’s meet an interesting symbol called modulo. When % is placed between two numbers, the computer will divide the first number by the second, and then return the remainder of that division.

So if we do 23 % 10, we divide 23 by 10 which equals 2 with 3 left over. So 23 % 10 evaluates to 3.

More examples:

17 % 5 evaluates to 2

13 % 7 evaluates to 6

Use console.log and modulo three times to print the remainder of the following equations:

a. 14 / 3

b. 99 / 8

c. 11 / 3

Kontakt