Ladies Learning Code logoWelcome!

Get Connected

Wifi: 121Studios

Password: Mediac0work


Download
& Install

  1. Learner files (zip file): http://bit.ly/1oNRFA2
    • unzip the learner file (extract all if you’re on a PC)
    • open slides.html in the browser to view the slides
  2. Atom Editor: http://atom.io
  3. Chrome Browser: https://www.google.ca/chrome

Introduction to
JavaScript

Scott Blinch

with Scott Blinch

Sample Code Incoming!!

robot face

Who loves Ladies Learning Code?

When would reassigning values come in handy? Click this button:

Let's look at how this could work.

var loves = 0; // start value at 0
var update = document.getElementById('update'); // HTML element to be updated

// custom function - contains instructions to update the count
function moreLove(){
  loves = loves + 1; // take the current value of "love" and adds 1
  update.innerHTML = loves; // updates the HTML element with the current value of "loves"
}

Update quantities



Quantity

Applying everything that has been covered so far, let's create a program to allow the customer to update the quantity by selecting an add or remove button, like in the sample on the left.

Note! Right now, removing items can result in a negative number. We'll update that in the last exercise.

Conditional Statements Summary

If Statement

If...else statement

If...else if...else statement

```javascript if (condition) { // do something } ```
```javascript if (condition) { // do something } else { // otherwise do this } ```
```javascript if (condition) { // do something } else if (condition2) { // do something else } else { // otherwise do this } ```

Conditionals example

Looking at the example below, what value will you need to enter to get either message to appear? What if the value is 100? Click run and test your theory.

var price = prompt("How much is that robot?");

if ( price <= 100 ) {
  alert("$" + price + " isn't bad. Buy it!");
} else {
  alert("$" + price + "? No way! That's a lot of money!");
}

<script src="">

As you write bigger pieces of JavaScript, or working with a team, you will want to put the JavaScript into their own files to make it easier to manage. A big site could have thousands of lines of code written by many different people!

To link to an external JavaScript file:

<html>
  <head>
    <title>JavaScript example!
  </head>
  <body>
    <div id="example">This is an example.
    <script type="text/javascript" src="scripts.js"></script>
  </body>
</html>
The external file must be saved with a ".js" extension and within the file, the <script> tags are not required.

Thank you!

Intro to Programming
with JavaScript

Scott Blinch

with Scott Blinch

Illustrations by Florida Elago.
Slide presentation created by Christina Truong based on Lea Verou's SlideShow and reveal.js.