diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c0a0a52 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +.DS_Store +*.swp +*.swo +*.swn + diff --git a/README.md b/README.md new file mode 100644 index 0000000..55c1ac0 --- /dev/null +++ b/README.md @@ -0,0 +1,6 @@ +LLC-JavaScript +============== + +A full-day introductory workshop to JavaScript for #ladieslearningcode. + +Slides: http://gavinuhma.github.io/LLC-JavaScript/ diff --git a/assets/facebook.png b/assets/facebook.png new file mode 100644 index 0000000..0bf0d83 Binary files /dev/null and b/assets/facebook.png differ diff --git a/assets/flower-power-javascript.png b/assets/flower-power-javascript.png new file mode 100644 index 0000000..d5b2b67 Binary files /dev/null and b/assets/flower-power-javascript.png differ diff --git a/assets/gavinuhma_avatar.png b/assets/gavinuhma_avatar.png new file mode 100644 index 0000000..b036819 Binary files /dev/null and b/assets/gavinuhma_avatar.png differ diff --git a/assets/linkedin.png b/assets/linkedin.png new file mode 100644 index 0000000..dc1c81b Binary files /dev/null and b/assets/linkedin.png differ diff --git a/assets/reddit.png b/assets/reddit.png new file mode 100644 index 0000000..6f2b879 Binary files /dev/null and b/assets/reddit.png differ diff --git a/assets/twitter.png b/assets/twitter.png new file mode 100644 index 0000000..4a8cd72 Binary files /dev/null and b/assets/twitter.png differ diff --git a/assets/wordpress.png b/assets/wordpress.png new file mode 100644 index 0000000..4a34743 Binary files /dev/null and b/assets/wordpress.png differ diff --git a/assets/youtube.png b/assets/youtube.png new file mode 100644 index 0000000..52ef8cb Binary files /dev/null and b/assets/youtube.png differ diff --git a/exercises/solutions/complex-form-validation.txt b/exercises/solutions/complex-form-validation.txt index 7a5cf5c..3470dc2 100644 --- a/exercises/solutions/complex-form-validation.txt +++ b/exercises/solutions/complex-form-validation.txt @@ -1,76 +1,23 @@ -Name: - -
-Address: - -
-City: - -
-Postal Code: - -
+Name:
+Address:
+City:
+Postal Code:

- \ No newline at end of file + diff --git a/exercises/solutions/totals-and-discounts.txt b/exercises/solutions/totals-and-discounts.txt index 17c54e8..7ec7ac1 100644 --- a/exercises/solutions/totals-and-discounts.txt +++ b/exercises/solutions/totals-and-discounts.txt @@ -1,25 +1,20 @@ - \ No newline at end of file diff --git a/index.html b/index.html index 976b9eb..a40a176 100644 --- a/index.html +++ b/index.html @@ -53,9 +53,7 @@

I'm a H2 heading





-

Download zip file of slides
- and hands-on exercise code from:
- github.com/pchen/LLC-JavaScript

+

Download zip file of slides
and hands-on exercise code


Let's get started!

Click to go to next section

@@ -97,4 +95,4 @@

Let's get started!

}); - \ No newline at end of file + diff --git a/intro.html b/intro.html index 02d3672..61e046c 100644 --- a/intro.html +++ b/intro.html @@ -55,25 +55,14 @@

I'm a H2 heading

Introduction to JavaScript

-

Your instructors today

-
- pearl chen -

Pearl Chen

- pearl [at] karma-laboratory.com -
- klab.ca/+ -
- @pearlchen -
-
- christina truong -

Christina Truong

- hello [at] christinatruong.com -
- christinatruong.com -
- @christinatruong -
+

with

+

+ + Gavin Uhma +

Gavin Uhma

+ @gavinuhma + +


( Interactive code slides thanks to @@ -147,4 +136,4 @@

Homestretch

}); - \ No newline at end of file + diff --git a/jquery-indepth.html b/jquery-indepth.html index 0e41d01..97063de 100644 --- a/jquery-indepth.html +++ b/jquery-indepth.html @@ -243,14 +243,14 @@

<script src="">

</html>
- +

In the external file

-

In the external JavaScript file (scripts.js) you don't include script tags; just JavaScript code.

-

View this example: http://pchen.github.com/LLC-JavaScript/exercises/external-javascript.html

+

In the external JavaScript file (scripts.js) you don't include script tags; just JavaScript code.

+

View this example: http://gavinuhma.github.io/LLC-JavaScript/exercises/external-javascript.html

- +

script tag gotchas

@@ -476,4 +476,4 @@

Mini-exercise (20 mins)
jQuery Effects

}); - \ No newline at end of file + diff --git a/js_arrays_loops.html b/js_arrays_loops.html index 8f0c711..1060ae3 100644 --- a/js_arrays_loops.html +++ b/js_arrays_loops.html @@ -449,14 +449,14 @@

Mini-exercise #6 (10-15 minutes)

Download the HTML exercise file: - exercises/shopping_cart_products_start.html + exercises/shopping_cart_products_start.html

TODO: Check within the code for your THREE tasks.

If you're stuck, here's the solution file: - - http://pchen.github.com/LLC-JavaScript/exercises/shopping_cart_products_final.html + + http://gavinuhma.github.io/LLC-JavaScript/exercises/shopping_cart_products_final.html

@@ -500,4 +500,4 @@

Mini-exercise #6 (10-15 minutes)

}); - \ No newline at end of file + diff --git a/js_conditionals.html b/js_conditionals.html index 102c964..34bc743 100644 --- a/js_conditionals.html +++ b/js_conditionals.html @@ -611,7 +611,7 @@

Mini-exercise (10 minutes)
- +
@@ -683,73 +683,43 @@

Mini-exercise (5-10 minutes)

Mini-exercise (15-20 minutes)
Complex form validation

-

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

- -
-

1. Since there are multiple fields, we'll need to keep track of them. Simplest way would be to use a descriptively named variable that can hold a true or false value.
- 2. Similiar to the previous exercise, use a conditional test so someone cannot supply any blank fields.
- 3. Alert the right message to the user. (Hint: How do you test for something AND something else OR another thing at one time? Try looking at the cheatsheet on Slide #12 of this section.) -

+

Now here's a more complex shipping form that require four fields to be filled in. + You have been supplied with 3 additional variables: name, city, and postal.

+

    +
  1. Similiar to the previous exercise, use a conditional test so someone cannot supply any blank fields.
    2. +
  2. Alert the right message to the user. (Hint: How do you test for something AND something else OR another thing at one time? + Try looking at the cheatsheet on Slide #12 of this section.)
    3. +

-

If you get stuck, click here for the full solution.
Or if you want to reset, click here for the original code.

- -

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

- +

If you get stuck, click here for the full solution.
Or if you want to reset, click here for the original code.

@@ -792,4 +762,4 @@

Mini-exercise (15-20 minutes)
}); - \ No newline at end of file + diff --git a/js_functions.html b/js_functions.html index 4b26804..58f0dfe 100644 --- a/js_functions.html +++ b/js_functions.html @@ -56,11 +56,11 @@

JavaScript Part 2

Functions in JavaScript


-

Remember, functions are used to make the code "do things." It is especially useful for repetitive tasks.

+

Functions are used to make the code "do things." They are especially useful for repetitive tasks.

prompt() and - alert() + document.write() are two functions that are pre-written into JavaScript.

But sometimes you need to group tasks that aren't covered by one of the pre-written functions.

@@ -253,7 +253,7 @@

Mini-exercise (5-10 minutes):
- +
@@ -293,9 +293,9 @@

Functions in Functions

</script> <!-- HTML and CSS --> -<link rel="stylesheet" href="http://pchen.github.com/LLC-JavaScript/exercises/slides.css" type="text/css" media="screen" /> +<link rel="stylesheet" href="http://gavinuhma.github.io/LLC-JavaScript/exercises/slides.css" type="text/css" media="screen" /> <div class="item"> - <img src="http://pchen.github.com/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" /> + <img src="http://gavinuhma.github.io/LLC-JavaScript/exercises/assets/plush-android.jpg" width="195" height="195" /> <br /> <button onclick="addItem();">Add</button> <button onclick="removeItem();">Remove</button> @@ -348,7 +348,7 @@

Mini-exercise (5-10 minutes):
-
+
$20 each

@@ -388,7 +388,7 @@

Mini-exercise (5-10 minutes):
-
+
$20 each

@@ -640,7 +640,7 @@

Inline JavaScript

Using a Code Editor

-

Go to the exercises folder and open up pizzaMaking.html
+

Go to the exercises folder and open up pizzaMaking.html
(Psst: It's also in the ZIP folder that you downloaded earlier today.)

Sublime Text 2 @@ -678,7 +678,7 @@

Mini-exercise (now until lunch)
  • Sauce e.g. BBQ, honey mustard, buffalo, Thai

    • 3. Use function parameters and a single function to make the job of creating multiple types and flavours of wings easier -- versus writing multiple wing making functions.

    -

    If you're really stuck, go to the solutions folder and open up wingMaking.html +

    If you're really stuck, go to the solutions folder and open up wingMaking.html

    @@ -720,4 +720,4 @@

    Mini-exercise (now until lunch)
    }); - \ No newline at end of file + diff --git a/js_quick_start.html b/js_quick_start.html index 9e3a534..f38a5c8 100644 --- a/js_quick_start.html +++ b/js_quick_start.html @@ -63,7 +63,7 @@

    JavaScript Part 1

    planet-robots

    - +

    JavaScript Exercise Overview

    @@ -71,129 +71,137 @@

    JavaScript Exercise Overview

    You'll want to do things like offer online shopping and print shipping labels!

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

    That means customers can't submit empty forms and product totals are 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 functions, variables, and conditionals.

    +

    In order to create a website that can handle these requirements, we will need to learn how to use + variables and operators.

    - +
    -

    Intro to Functions

    -

    - What is something that you do that's very repetitive or a hassle? Wouldn't it be great if it was automated? Or at least hidden away? -

    - - - - - - - - - - - - -
    Paying for parking:
    - The old way - thumb-down - - The improved way - thumb-up -
    -
      -
    1. Find bank machine
      2. -
    2. Pull out bank card
      3. -
    3. Get money out from ATM
      4. -
    4. Buy chips so you can make change
      5. -
    5. Put change into machine
      6. -
    6. Take receipt
      7. -
    -     		-
      -
    1. Pull the PayPass credit card from your wallet
      2. -
    2. Tap
      3. -
    3. Take receipt
      4. -
    -
    -
    - - +

    JavaScript, meet HTML

    +

    JavaScript can modify HTML

    +

    JavaScript can add HTML

    +

    JavaScript can remove HTML

    +

    JavaScript can animate HTML

    + + +
    -

    Intro to Functions

    -

    - In the improved way, we can think of step 2 as a function. We can't see all the steps that happen but we know that if we perform the action of tapping the card, it will execute some instructions that will allow us to pay with the card. -

    - - - - - - - -
    - The improved way - thumb-up -
    -
      -
    1. Pull the PayPass credit card from your wallet
      2. -
    2. Tap
      3. -
    3. Take receipt
      4. -
    -
    -
    - - +

    JavaScript, meet HTML

    +

    JavaScript can modify HTML

    +

    Try it, click the Run button:

    + + + +
    -

    Intro to Functions

    -
    -

    Functions are used to make the code "do things."

    -

    To get the function to execute, you have to call the function by using the function name followed by round brackets.

    -

    If the credit card tap was a function in JavaScript, it could look something like this:

    -

    tapCard()

    +

    JavaScript, meet HTML

    +

    If we view source on the page, we'll see HTML like below.

    +

    Whatever was in the body before has been completely replaced!

    +
    +
    -

    Intro to Functions

    -

    We can create our own functions but there are already some handy ones built into JavaScript. There are three functions that are useful for testing and writing code.

    -

    - prompt() and alert() show popups in the browser. - document.write() outputs text onto the page, aka the document. -

    +

    JavaScript, meet HTML

    +

    Try it on Google. +

    Your mentor will show you how to open up the JavaScript Console (Opt+Cmd+j on mac, Alt+Ctrl+j on pc)

    +

    Then paste this code:

    + 
    document.body.innerHTML = 'Hi!';
    +
    + + +
    +

    JavaScript, meet HTML

    +
    +

    See how document.body.innerHTML relates to the HTML?

    +
    + +
    + + +
    +

    JavaScript, meet HTML

    +

    We can add a bunch of HTML using innerHTML.

    +

    Try adding your name along with some more HTML tags below:

    +
    - alert("This is an alert box."); - prompt("This is a prompt box. Enter some info."); - document.write("document.write outputs text into the page."); + +
    +

    Assignment Operators (Reference)

    +

    Assignment Operators, + like equals (=), assign whatever is on the right to whatever is on the left.

    + 
    document.body.innerHTML = "Hi!";
    +

    Read the above statement like this:

    +

    document dot body dot innerHTML equals Hi!

    +
    + + + +
    +

    Assignment Operators (Reference)

    +

    Remember that the left hand side gets completely replaced.

    +

    In the example below, the body will only contain "morning", + since the second statement completely replaces whatever was there before.

    +

    Try running this code:

    +
    - + +
    -

    Comments

    -

    - Sometimes you want to write notes to yourself (and others!!) to organize blocks of code or leave explanations. Use comments! JavaScript will ignore comments and not execute them. -

    -
    -// This is how you leave a single line comment.
+      
    Assignment Operators (Reference)
    
+      
    Rather than replacing the body with "morning" we can append.
    
+      
    To do that we would use plus equals (+=).
    
+      
    The plus equals assignment operator adds the right side to the left.
    
+
+
    -// You can write many single line comments. -// Just make sure to add the double slash -// 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.

    + + +
    +

    JavaScript, meet HTML

    +

    Now we'll add in some HTML again.

    +

    Play around with the code below, add some more HTML and a few extra lines of statements

    +
    - + +

    Variables


    -

    Variables are like containers or a box. They are used to store values so you can use them later on, when you need them.

    +

    Variables are used to store values so you can use them later.

    @@ -201,55 +209,16 @@

    Variables

    Variables How-to

    Declare variables with the keyword var.

    - 
    var email;
    -

    Assign a value to the variable using the equals (=) sign.

    - 
    email = "hello@christinatruong.com";
    -

    Now the computer will remember my email address!

    + 
    var twitter;
    +

    Assign a value to the variable using the equals (=) operator.

    + 
    twitter = "@gavinuhma";
    +

    Now the computer will remember my twitter!

    Take note that the value of the variable is written between quotes.
    More on this soon.

    - -
    -

    Variables (cont'd)

    -
    -

    computer-memoryVariables 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 any one's name!

    -

    But it can remember if we use a variable.

    - - -
    -

    Variables (cont'd)

    @@ -262,11 +231,10 @@

    Variables (cont'd)

    - - +
    -

    Aside: Statements

    +

    Statements

    End a statement with a semicolon (;).

    Statements are commands that tell the computer what to do.
    @@ -275,10 +243,10 @@

    Aside: Statements

    with a period. It tells the computer that the statement is done.

    You can also declare a variable and its value in one statement.

    -
    var email;
-email = "hello@christinatruong.com";
+
    var twitter;
+twitter = "@gavinuhma";
 
    
-
    var email = "hello@christinatruong.com";
    
+
    var twitter = "@gavinuhma";
    @@ -287,28 +255,13 @@

    Aside: Statements

    Variables: Say My Name


    Let's try creating some variables.

    -

    Below is an example of a variable for your name. Try creating another variable for your email address. Output the values using document.write().

    +

    Below is an example of a variable for your name. Display the value using document.body.innerHTML.

    - @@ -325,12 +278,6 @@

    Assigning Variables

    You will see later that we can re-assign new values to an existing variable.

    - -

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

    @@ -376,9 +323,9 @@

    Variables: Tips & Best Practices

    var greet_me = "Hola, ¿cómo te llamas?"; // test our different variables by outputting them to the page - document.write("greetme: " + greetme + "
    "); - document.write("greetMe: " + greetme + "
    "); - document.write("greet_me: " + greetme + "
    "); + document.body.innerHTML = "
    greetme: " + greetme + "
    "; + document.body.innerHTML += "
    greetMe: " + greetMe + "
    "; + document.body.innerHTML += "
    greet_me: " + greet_me + "
    "; SCRIPTEND @@ -421,7 +368,7 @@

    Variables: Tips & Best Practices

    // A variable starting with a number is not valid. // A "silent" error will occur -- nothing happens when we press Run. var 3hundred = 300; - document.write(3hundred); + document.body.innerHTML = 3hundred; // However, when we open up the Chrome console (Alt+Cmd/Ctrl+J), // we can see the browser complain of a @@ -429,21 +376,22 @@

    Variables: Tips & Best Practices

    // A variable can start with a $ or _ var $dalmations = 1001; - document.write($dalmations); + document.body.innerHTML += $dalmations; SCRIPTEND +

    Whitespace in JavaScript

    @@ -459,18 +407,38 @@

    Whitespace in JavaScript

    - + + +
    +

    Comments in JavaScript

    +

    + Sometimes you want to write notes to yourself (and others!!) to organize blocks of code or leave explanations. Use comments! JavaScript will ignore comments and not execute them. +

    +
    +// This is how you leave a single line comment.
+
+// You can write many single line comments.
+// Just make sure to add the double slash
+// 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.

    +
    + +

    Mini-exercise (5-10 minutes):
    Simple Shipping Label

    @@ -522,26 +489,26 @@

    Mini-exercise (5-10 minutes):

    If you get stuck, click here for the full solution.
    Or if you want to reset, click here for the original code.

    - +-->
    -

    JavaScript Arithmetic Operators

    -

    We can also use JavaScript to do math using arithmetic operators.

    +

    Arithmetic Operators (Reference)

    +

    We can also use JavaScript to do math using arithmetic operators.

    Arithmetic operators in JavaScript are (+) for addition, (-) for subtraction, (*) for multiplication and (\) for division.

    @@ -552,13 +519,14 @@

    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.

    +

    Try it, set totalPrice to be tshirtPrice plus (+) androidPrice

    @@ -576,46 +544,36 @@

    Arithmetic Operators and Variables

    Mini-exercise (5-10 minutes):
    Totals and Discounts

    -

    Let's pretend that someone has checked out of our online store intending to buy 1 t-shirt and 1 Android plushie. Apply some arithmetic operations to get the final total after applying a discount.

    -
    -

    1. Calculate the sub-total given tshirtPrice and androidPrice. -
    - 2. Calcuate the discount amount given the sub-total and discountPercentage. -
    - 3. Calcuate the final total given the sub-total and discount amount. -

    -
    -
    -

    addition (+), subtraction (-), multiplication (*), division (/)

    -
    +

    Someone has checked out of our online store attempting to buy 1 t-shirt and 1 Android plushie.

    +

    Apply some arithmetic operations to get the final total after applying a 15% discount.

    +

    Steps: +

      +
    1. Calculate subTotal given tshirtPrice and androidPrice
      2. +
    2. Calcuate discountAmount given subTotal and discountPercentage
      3. +
    3. Calcuate finalTotal given subTotal and discountAmount
      4. +
    +


    + document.body.innerHTML += "Final Total: " + finalTotal; +

    If you get stuck, click here for the full solution.
    Or if you want to reset, click here for the original code.

    @@ -626,20 +584,21 @@

    Arithmetic Operators: Numbers vs. Str

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

    But numbers can come disguised as strings so be careful!

    When the addition (+) operator is used on strings, it doesn't "add" values, it concatenates them.

    - @@ -650,13 +609,13 @@

    Concatenation

    Unlike the other arithmetic operators, the (+) symbol has another purpose other than adding numbers. It is used to join strings together, also known as concatenation. You can concatenate variables, strings or a combination of both.

    @@ -673,17 +632,17 @@

    Concatenation and Strings

    var tshirtPrice = 25; var androidPrice = 10; var shoppingTotal = tshirtPrice + androidPrice; - document.write(shoppingTotal); - document.write("
    "); + document.body.innerHTML = shoppingTotal; + document.body.innerHTML += "
    "; //Concatenation with the + operator - //document.write("Your total is: " + "$" + shoppingTotal); - //document.write("
    "); + //document.body.innerHTML += "Your total is: " + "$" + shoppingTotal; + //document.body.innerHTML += "
    "; //no nos - //document.write("Your total is:" * shoppingTotal); - //document.write("
    "); - //document.write("$" + 20 + 1); + //document.body.innerHTML += "Your total is:" * shoppingTotal; + //document.body.innerHTML += "
    "; + //document.body.innerHTML += "$" + 20 + 1; @@ -693,27 +652,23 @@

    Concatenation and Strings

    Concatenation Practice

    Let's practice concatenating using variables and strings.

    - + document.body.innerHTML = sentence; +
    @@ -727,20 +682,94 @@

    Re-assigning Variables

    // Declare and initialize the variable with a default value var numberOfCookies = 0; - document.write("I started off with " + numberOfCookies + " cookies.
    "); + document.body.innerHTML = "I started off with " + numberOfCookies + " cookies.
    "; // Add 1 to the current value of the variable, // then re-assign the new value to the same variable numberOfCookies = numberOfCookies + 1; - document.write("I baked a cookie. Now I have " + numberOfCookies + " cookie.
    "); + document.body.innerHTML += "I baked a cookie. Now I have " + numberOfCookies + " cookie.
    "; // Subtract 1 from the current value of the variable, // then (once again) re-assign the new value to the same variable numberOfCookies = numberOfCookies - 1; - document.write("I just ate a cookie. Now I have " + numberOfCookies + " left."); + document.body.innerHTML += "I just ate a cookie. Now I have " + numberOfCookies + " left."; + +SCRIPTEND + + + + @@ -783,4 +812,4 @@

    Re-assigning Variables

    }); - \ No newline at end of file + diff --git a/resources.html b/resources.html index 78ebe26..46df09e 100644 --- a/resources.html +++ b/resources.html @@ -101,36 +101,30 @@

    Online tutorials or courses

    -
    + + @@ -168,4 +162,4 @@

    Christina Truong

    }); - \ No newline at end of file + diff --git a/tech_overview.html b/tech_overview.html index 0eada36..5249246 100644 --- a/tech_overview.html +++ b/tech_overview.html @@ -52,7 +52,7 @@

    I'm a H2 heading

    Development Environment

    -

     3  2 tools you need to get started

    +

    2 tools you need to get started

    @@ -102,33 +102,9 @@

    2. Code Editor

    - -
    -

    3. File Transfer Program (FTP)

    -

    - 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 -
    - CyberDuck -
    -
    -
    -
    -
    -

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

    -
    -
    -

    Technology Overview

    -

    Programming and JavaScript

    +

    JavaScript

    @@ -137,183 +113,20 @@

    What is JavaScript?

    It's a programming language -

    - designed to run in your web browser to -

    - manipulate content on web pages.

    - - - -
    -

    What is JavaScript?

    - It's a - programming language -

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

    -

    As the first step to our new system integration, please take a blind fold.

    -
    - - -
    -

    Better Code = Clearer Instructions

    -

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

    -

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

    -

    Give clear directions

    -
    - - - -
    -

    Break it down

    -

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

    -

    Break down the steps as much as possible:

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

    - -
    - - - -
    -

    What is a Programming Language?

    -

    - Programming is about having a conversation with your computer.

    -

    - Computers only understand things when you speak to them in a certain way. Much like English or any other natural language, programming is about sticking to grammar rules -- this is called - syntax - . -

    -

    Beep beep 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 is to JavaScript as ham is to hamster. + It's one of the most popular programming languages.

    -

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

    -
    - - - -
    -

    What is JavaScript?

    - It's a - programming language -

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

    -

    - Different programmig languages and the environments they run in -

    -
    - - -
    -

    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 referred to as a client-side or "front-end" web technology because it's interpreted by the web browser.

    - -
    - - -
    -

    Simple Client-Side Code Check

    -


    - Right-click to View Source -

    -

    -
    -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. + So that means you're cool for learning it.

    - - +
    -

    What is JavaScript?

    +

    Why JavaScript?

    - It's a - programming language -

    - designed to run in your web browser to -

    - manipulate content on web pages. + It can make web pages interactive and logical.

    @@ -321,7 +134,7 @@

    What is JavaScript?

    The Web Triad

    - JavaScript was meant to manipulate webpages written in HTML and works in tandem with CSS. + JavaScript can modify HTML and CSS

    @@ -332,87 +145,83 @@

    The Web Triad

    - - - - + + + + - - - - + + + +
    JavaScript
    is the programming language.
    content layerPresentation LayerBehaviour Layer
    Content LayerPresentation LayerBehaviour Layer
    It should define the content.It should define the presentationIt should define behaviour.
    It should define the content.It should define the presentationIt should define behaviour.
    -

    JavaScript in Different Browsers

    -

    - For the most part, JavaScript will run the same in various web browsers but sometimes they say "hi" with different accents.

    Imagine a British accent versus a Texas accent -- it's still English underneath but there's some variations and unique slang.

    -

    This is especially noticeable with newer "HTML5" features.
    - Insert Internet Explorer joke here. ;)

    - +

    All of the most popular websites use JavaScript

    +

    +

    +

    + Facebook + Twitter + YouTube + reddit + LinkedIn + WordPress

    -

    A JavaScript Experiment

    -

    - JavaScript is essential for "AJAX", "Web 2.0", and "HTML5" websites. -

    +

    JavaScript can make really cool apps

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

    +

    + FlowerPower + Try this demo

    -

    A JavaScript Experiment: Results

    -

    Note the sometimes subtle and sometimes major differences:

    -
      -
    • - No search auto-completion and instant page refreshes on google.com +

      The Web without JavaScript :(

      +

      Experiment: Let's see what the web looks like without JavaScript

      +
        +
      1. Go to Content Settings in Chrome chrome://settings/content
        2. +
      2. Select Do not allow any site to run JavaScript
        3. +
      3. Click the Done button.
        4. +
      4. Visit any of your daily sites (e.g. + Google, + Facebook, + Twitter)
        5. -
      5. - No inline video content or lightboxed photo viewers on facebook.com -- not to mention broken "Like" buttons and inability to comment on posts! -
        6. -
      6. - 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. -
        7. -
      7. - And you can't see it but most analytics tracking won't work either.
        8. -
    -

    - The modern web just sort of gives up without JavaScript! -

    + +

    Notice anything different?

    +

    The modern web is slow and broken without JavaScript!

    +

    When you're done, go back to Content Settings and select Allow all sites to run JavaScript

    -

    JavaScript helps make very nice websites!

    +

    Simple Client-Side Code Check

    +


    + Right-click to View Source +

    - Especially "one-page apps" where the experience is very seamless. +
    +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!)

    -

    - The new web design guidelines
    +

    - - Like - this one

    + +
    +

    Aside

    +

    Client-Side JavaScript: JavaScript runs most commonly in a web browser (e.g. Chrome, Safari, Firefox, Internet Explorer). + This is called client-side JavaScript. Today we'll focus on client-side JavaScript.

    +

    JavaScript and Java are different: JavaScript is what we are learning today. + Java is a completely different programming langauge.

    +

    js: The short-hand for JavaScript is js

    @@ -456,4 +265,4 @@

    JavaScript helps make very nice websites!

    }); - \ No newline at end of file +