Course Outline

The morning (lunch @ ~12:00pm)

• What is JavaScript?
• JavaScript Theory: variables, operators, and conditionals

After lunch (small break @ ~3:30pm)

• JavaScript Theory: functions, objects, arrays, and loops
• JavaScript objects and the DOM

Homestretch

• Debugging in Chrome
• Quick intro to jQuery
• Where can you go from here?

1. Web Browser

Choose a modern web browser that has good, built-in development tools to help make building web pages easier.

Google Chrome

(If you are unable to install Chrome:
install Firefox .)

A Website that lets you write code

JSBin lets you write HTML, CSS and JavaScript directly in your browser.

JSBin.com

Code Editor

JSBin (and other similar tools) are a great way to quickly try out and share your HTML, CSS and JavaScript but in reality we want people to visit our actual web pages.

There are many, many free and paid options but let's keep it simple for our mentors today and use the same editor to edit our code. Other options like TextWrangler, Notepad++ and Text Edit are available, too.

Sublime Text

How do I get it online?

Are you using Dropbox? Sharing your public files is easy:

There are many services now that turn your public Dropbox into a full website
instead of having to share the ugly public link), read more here.

Webhosting

Do you already have your own hosted website? FTP software will let you copy the files you work on today to somewhere where the rest of the world can see them!

CyberDuck

Again, there are many, many free and paid options.
FileZilla is good when you're more advanced.

What is JavaScript?

It's a programming language

that was designed to run in your web browser to

manipulate content on web pages.

What is JavaScript?

It's a programming language

that was designed to run in your web browser to

manipulate content on web pages.

What is Programming?

A program is a set of instructions meant for a computer to execute.

Computers are fast but blind.

Programming is giving instructions to your computer

Think about a tourist that stops you to ask for directions:

The clearer the instructions, the more likely they will get to their destination.

Break your goal down into steps

Suppose I want a computer to say hello using my name.

Break down the steps as much as possible:

1. Allow me to type in my name.
2. Remember my name.
3. Say "Hello" and repeat back my name.

Speak the computer's language

Programming is like having a conversation with your computer. You write to it using a programming language and give it instructions this way.

Computers only understand instructions when you speak to them in a language they can understand. Much like Japanese, English or any other natural language, programming is about sticking to grammar rules called syntax.

Computers have come a long way since their binary days (0 1 0 0 1 0 0 0 0 1 0 0 0 1 0 1 0 1 0 0 1 1 0 0 0 1 0 0 1 1 0 0 0 1 0 0 1 1 1 1) so meet them half-way.

Example Programming Syntaxes

Different programming languages have different syntax.

Here are two ways a computer could say hi to me:

Java

Scanner userInput = new Scanner(System.in);
String name;
System.out.print("What's your name? ");
name = userInput.next();
System.out.println("Hello, " + name);

JavaScript ( Try it out now! )

var name;
name = window.prompt("What's your name?",'');
document.write("Hello, " + name);

JavaScript versus Java

They might vaguely look the same (as a lot of programming languages do) but they are not related at all.

(Java was really popular at the time so Netscape just hijacked the name.)

What is JavaScript?

It's a programming language

that was designed to run in your web browser to

manipulate content on web pages.

JavaScript in the Browser

C++, Java, and .NET are also programming languages but they can be run directly by the operating system (e.g. Windows, Mac, Linux).

JavaScript is typically meant to be run in a web browser (e.g. Safari, Firefox, Chrome, Internet Explorer).

Web Programming Languages: Server-side vs Client-side

Java, .NET, PHP or Ruby can be considered server-side or "back-end" web technology because the code is typically compiled and executed by the operating system of a computer serving up web pages.

JavaScript is often referred to as a client-side or "front-end" web technology because it is interpreted by the web browser. It can be used for server-side programs too, but today we'll be focusing on the browser.

Simple Client-Side Code Check

At any time, someone can right-click and "view source" on a web page to see all the JavaScript that went into it.

(I suggest that you do this yourself every time you see something you like!)

Whereas for server-side code, it's sometimes a mystery what technology is running on a server.

What is JavaScript?

It's a programming language

that was designed to run in your web browser to

manipulate content on web pages.

The Web Triad

JavaScript was meant to manipulate webpages written in HTML and works in tandem with CSS.

HTML (Hypertext Markup Language) is the markup language.	CSS (Cascading Style Sheets) is the style sheet language.	JavaScript is the programming language.
It should define the content.	It should define the presentation	It should define behaviour.

JavaScript in Different Browsers

Usually JavaScript will run the same way in various browsers.

But, browsers are software programs written by many different people/companies (people programming things just like you!), so sometimes they say "hi" with different accents.

Imagine a British accent versus a Texas accent.

This is especially noticeable with newer "HTML5" features.

A JavaScript Experiment

JavaScript is essential for "AJAX", "Web 2.0", and "HTML5" websites. All these terms refer to various methods of making interactive web pages using Javascript.

Try this experiment: Turn off JavaScript in your web browser. Go to the JavaScript settings for Chrome ( chrome://settings/content ) and select "Do not allow any site to run JavaScript"

Then visit your daily sites.

e.g. Google , Facebook , Twitter

(Remember to turn JavaScript back on to see this presentation!)

A JavaScript Experiment: Results

Note the sometimes subtle and sometimes major differences:

• No search auto-completion and instant page refreshes on google.com
• No inline video content or lightboxed photo viewers on facebook.com -- not to mention broken "Like" buttons and inability to comment on posts!
• On twitter.com - older tweets don't load at the bottom of the page. Warning message on top of page. Navigation doesn't work. Popups don't work.
• And you can't see it but most analytics tracking won't work either.

The modern web just sort of gives up without JavaScript!

JavaScript helps us make nice websites

Especially "one-page apps" where the experience is very seamless.

Like this one

As the owner of the thriving store, Planet Robots, you have to make sure you have a top notch website.

JavaScript Exercise Overview

You'll want to do things like offer online shopping, print shipping labels and tempt loyal customers with members only sales!

You'll also want to make sure that everything works properly as well.

That means customers shouldn't be able to submit empty forms and product totals must be calculated properly in their shopping carts.

In order to create a website that can handle these requirements, we will need to learn how to use variables, functions, objects, arrays and loops.

Variables

Variables are used to store values.

Declaring a variable tells the computer that it exists and to
remember it.

Variables are like boxes; it can be used to store different things.

Variables (cont'd)

Variables are also like the computer's short-term memory. It doesn't remember anything unless you tell it to. In this example, the computer can't remember anyone's name!

Variables (cont'd)

In a web checkout form that asks for your name and address, variables can be used to store this information. Then they can be used to create things like shipping labels.

An Aside...

Before we continue, here's a few helpful JavaScript built-ins that will help with testing and writing code.

Variables How-to

Declare variables with the keyword var.

var email;

Assign a value to the variable using the equals (=) sign.
End the statement with a semicolon (;).

var email = "hello@isanybodyoutthere.com";

Now the computer will remember my email address!

Assigning Variables

IMPORTANT!

Using the equals (=) symbol in Javascript is NOT the same as in math.

var total = 1 + 1 is not the same as 1 + 1 = 2

You will see later that we can change the value of a variable.

Variables are assigned a value with whatever you place to the right of '='.

Various Variables

Variables can hold different kinds of values.

1. Numeric variable (integers & decimals)

var someIntegerNumber = 10;
var someDecimalNumber = 10.5;

2. String variable (letters, words & sentences)

var singleWordString = "hello";
var sentenceString = "Hello, good day to you!";
var numberString = "10";

3. Boolean variable (true/false)

var isSaturday = false;
var isSunday = true;

Variables: Tips & Best Practices

Variables cannot start with a number or any special characters except for underscores (_) and dollar signs ($).

Variables: Tips & Best Practices

Variables can't contain spaces. Use a convention called camel case.
Every new word is capitalized and the result looks likeCamelHumps.

JavaScript is case sensitive so variable names are also case sensitive.

Another convention is to use underscores to_separate_words. This is common in other programming languages (like PHP).

Variables: Tips & Best Practices

When naming a variable, it's best to give it a descriptive name.

It makes it easier to see at a glance, what kind of value that variable is going to hold.

This is especially useful when sharing code with others who may not use the same kinds of abbreviations.

var firstName; ← Clear that first name will go here.
var fn; ← Not as obvious as firstName.
var x; ← Not clear at all.

Whitespace in JavaScript

Whitespace refers to blank characters and includes space characters, tabs and line breaks.

JavaScript ignores whitespace except when used in a string.

var name="Sean";
//same as 
var name = "Sean";

Comments

Sometimes you want to write notes to yourself (and others!) to organize blocks of code or leave explanations, but you want the browser to ignore it. Use comments!

// This is how you leave a single line comment.

// You can write many single line comments.
// Just make sure to add the double backslash
// for every new line.

Here's another way to comment larger blocks of text.

/* This is how you leave
multi-line comments for when you
want to write a longer message */

Multi-line comments are great for "hiding" large blocks of code so you can try something new without erasing your old code. Don't forget to remove the old code later if you decide that you don't need it though!

Mini-exercise #1 (5-10 minutes)

Here's a test shipping form. Right now, after you press Run, the shipping label is blank. How do we fix this?

JavaScript Arithmetic Operators

We can use JavaScript to do math using arithmetic operators.

The arithmetic operators in JavaScript are (+) for addition, (-) for subtraction, (*) for multiplication and (/) for division.

Arithmetic Operators and Variables

Getting JavaScript to do math can be very useful.
For example, we can use it to calculate totals in a shopping cart form.

Instead of using just numbers, JavaScript can do math using variables with numerical values.

Arithmetic Operators,
Numbers & Strings

Remember there were different variable types? Arithmetic operators can only be performed on numerical values.

But numbers can be declared as strings too, so be careful!

If you put double quotes (" ") or single quotes (' ') around the value, the computer will thinks it's a string.

Shopping Cart: Totals and Discounts

Let's try applying some arithmetic operations to our shopping cart.

Re-assigning Variables

Even after a variable has been declared with a value, we can still
re-assign the value. For example, we may want to increase or decrease values by 1. This will come in handy when we discuss Loops later on.

Who loves LadiesLearningCode?

Don't worry about the function or unfamiliar parts right now. You will be familiar with them soon enough.

Run it and see what happens!

Mini-exercise #2

Here's a one-product shopping page where you can update the
quantity by adding or removing it from the shopping cart.

Here's what it will look like.

Go to the next slide to get the exercise code.

Mini-exercise #2: Go! (5-10 minutes)

Concatenation

Now that we've calculated some numerical totals, how do we format the output to add a non-numerical value like a dollar sign? We use concatenation.

Concatenation is the joining of strings, using the (+) symbol. Remember this example?

Concatenation and Strings

If you use the (+) operator with numerical values, it will add the values. Otherwise, it will combine the outputs as a string.

Only the addition (+) operator can be used to combine strings.

Concatenation in action (results)

Let's re-visit mini-exercise #2 and add a total cost field.

Conditional Statements

Let's pretend to be your wise but nagging grandmother right now:

• I hear it's cold out: bring a sweater!
• The weather network says it's going to rain: take your umbrella!
• It's cold and snowing: wearing your warm boots!
• If (condition) then (perform instruction)

All these things make logical sense to us as grown up humans but computers are a blank slate. The last one is a little closer to the simple instructions that a computer needs.

As a programmer, you tell the computer how to behave across certain states or events by using CONDITIONALS.

If Conditionals

...

if ( weather == rain ) {
    bringUmbrella();
}
            

Important!
Assignment is not the same as equality

Drill this into your head. Tattoo it to your arm! So many errors happen because of this key difference:

Using Several If Conditionals

Sometimes it can be rainy but warm, or rainy and cold. You react to each thing individually.

Use several if statements when you're testing mutually inclusive scenarios.

if ( weather == rain ) {
    bringUmbrella();
}

if ( temperature < 10 ) {
    wearSweater();
}

if/else Conditionals

Sometimes there's a catch-all state that you want to happen if your previous tests don't happen.

if ( weather == rain ) {
    bringUmbrella();
}else{
    dressNormally();
}
            

if/else if/else Conditionals

It shouldn't snow and rain at the same time so sometimes these conditions are mutually exclusive.

if ( weather == rain ) {
    bringUmbrella();
}else if ( weather == snow ) {
    wearWarmBoots();
}else{
    dressNormally();
}
            

Conditionals used for UI elements

A basic conditional that your browser does internally is to react to mouse clicks on a HTML element. The browser does its own conditional check behind the scenes.

<button onclick="animate()">Pull</button>

IF a user has clicked on a button
    THEN call the animate() function.

...And Interactivity

Notice how the brush acts when you speed up / slow down, or get close to other lines. You can even change brushes.

http://mrdoob.com/projects/harmony/

...And Games!

(Notice how the birds fly differently based on how far you pull them back in the slingshot, and in what direction.)

http://chrome.angrybirds.com/

Conditional Statements Summary

if (condition) {

 // do something

}

if (condition) {

  // do something

} else {

  // otherwise do this

}

if (condition) {

  // do something

} else if (condition2) {

  // do something else

} else {

  // otherwise do this

}

Testing Conditions

What does a condition actually look like?

if ( condition ) { ... }

Cheat Sheet: Comparison and Logical Operators

Here's a cheat sheet of different operators that can be used in conditional statements.

Using these two variables, var two = 2 and var ten = 10 , the examples below show how the statements would return true using the various operators.

More Conditional Examples

Let's look at some examples. What do you think the output will be? Uncomment the code to be executed for each condition to see if the result is what you expected. Try changing the variable values too!

Variables, Operators, Concatenation and Conditionals

Now that we know what variables, operators and conditionals are, let's put them all into action using dynamic content.

Mini-exercise #3 (10 minutes)

Uh-oh! Someone can attempt to put a negative number of products in their shopping cart! Complete task #1 in the next slide to fix this. For task #2, warn the user that they are attempting to check out with an empty basket. Make a more robust shopping cart so that your customer's order doesn't go sideways.

This is based on Exercise #3 so it should look very familiar!

(Hint: How do you test if a number is greater than, less then, or equal to another number?)

Mini-exercise #3 (10 minutes)

TODO: Check within the code for your THREE tasks.

Mini-exercise #4 (5-10 minutes)

Let's revisit the shipping form again -- it's a very simple shipping form, but you don't want someone to be able to submit their order if they haven't filled out their address!

You have been supplied with 1 variable ("address") which will automagically match what is typed into the form field (minus extra whitespace) after you press the "Check out now!" button.

(Hint: If you don't type anything into the address field, you get an "empty string". How do you test for an empty string?)

Mini-exercise #4 (5-10 minutes)

TODO: Check within the code for your ONE task.

Mini-exercise #5 (15-20 minutes)

Now here's a more complex shopping form that you require all fields to be filled in. You have been supplied with 3 additional variables which will automagically update: "name", "city", and "postal".

(Hint for task #3: How do you test for something AND somethingElse OR anotherThing at one time?)

Bonus: There's always different ways to get to the same end goal. If you're finished early, try out different ways that you can reduce the number of variables and lines of code.

Mini-exercise #5 (15-20 minutes)

TODO: Check within the code for your FOUR tasks.