INTRO // Goal

By the end of this workshop, our goal is:

- modify a basic task list application

- marks tasks as complete when clicked

- update a count of completed tasks

The Internet

INTRO

INTRO // Web Development

The development process can be broken into two areas

FRONT-END WEB DEVELOPMENT

BACK-END WEB DEVELOPMENT

• How things look to the user

• Involves: Images, Content, Structure

• HTML, CSS, & Javascript

• How things work

• Involves: "business logic"

• Ruby, PHP, C++, Java, etc.

_________________________________________________________________________________________

INTRO // How The Web Works

A simplified look at a typical web architecture

Client

(Web Browser, Mobile App)

Web Server

Database

Requests

Responses

INTRO // Front-End Technologies

HTML

Content

CSS

Presentation

JavaScript

Interactivity

We'll be learning about JavaScript today

INTRO

Tools We'll Be Using

INTRO // Tools

Web Browser

We'll be using Google Chrome

It provides many developer-friendly tools ("inspect element")

INTRO // Tools

Coding Environment

We'll be using Cloud9

• It's free

• Provides syntax highlighting, code hinting, auto completion, and a lot more features geared toward writing code

• Word, Pages and any WYSIWYG editor are NOT suitable for code!

INTRO

Let's take a look!

JavaScript

The dynamic programming language built into every web browser

What's JavaScript used for?

JS

Adds interactivity to your web pages

Check out this fun lightbox example!

JS

JavaScript is available in every browser

JS

JavaScript is NOT Java

This is a common misconception

JS

Running Javascript Programs

JS

Any programming language needs to be run by some kind of interpreter that can recognize the code we write and have it do something. With JavaScript, we have a couple of options:

A) Web browsers have this interpreter

B) You can install a standalone interpreter on your computer (i.e. Node.js)

LET'S OPEN UP OUR CONSOLES

View   >   Developer   >   JavaScript Console

MAC

cmd + option + j

WIN

ctrl + shift + j

F12

or

JS

Basic Syntax

        
          var someNumber = 10;

• This is an example of a JavaScript statement

• Every statement ends with a semi-colon

JS

Comments

        
    // This is a single line comment

• The two forward slashes denote a single line comment

JS

How do you store values?

Values are stored in variables

JS

Variables

JS

Declaring a variable

        
           var someNumber = 5;

• var is reserved keyword

JS

• Prefix a statement with ' var ' to declare a variable

• Can change its value at anytime

• Equal sign is the assignment operator

Data Types

• Number

JS

• String

• Boolean

• Object

Some common data types are:

Let's look at a few data types ...

JS

Number

        
   var someDecimalNumber = 3.1415926;

• Values of the number type are numerical values

JS

• Can be a regular integer

• Can be a decimal number

String

        
 var someString = "Some random text here";

• Strings are used to represent text

JS

• Defined by enclosing string of text characters in quotes

• Can use " "  or  ' '

Boolean

        
        var aTruthyValue = true;
        var aFalseyValue = false;

• true and false are reserved words

JS

• Similar to the concept of 1 & 0

• true is different from "true"

Arrays (One Type of Object)

        
     var someArray = [45, "bloop", true, null];

• Allows you to store a sequence of values

JS

• It's a list of values stored between square brackets, separated by commas

• The values stored in the array can be of any data type

Arrays cont'd

        
     var someArray = [45, "bloop", true, null];
         someArray[1] // returns "bloop"

• Arrays are an ordered list of items

JS

• Each element in the array has an index position

• Index positions always start counting at 0

• Syntax: nameOfArray[indexPosition]

Arrays cont'd

        
     var someArray = [45, "bloop", true, null];
         someArray.length // returns 4

• To check how long an array is, check its length property

JS

• The length property returns how many elements are stored in the array

Time to try it yourself!

JS

Writing Basic Javascript Programs

JS

alert(''Hello");

console.log("Hello");

Producing Output:

NOTE - In the first example, the alert will only work if the code is being run from within a browser.

Writing Basic Javascript Programs

JS

var monthName = "June";

if (monthName == "June") {
  console.log("It must be summer");
}

Conditional Logic:

Conditional logic involves the use of expressions to evaluate statements that are true or false using operators:
==, <, >, >=, <=, != 

Writing Basic Javascript Programs

JS

var monthName = "July";
​
if (monthName == "June" || monthName == "July") {
  console.log("It must be summer");
}

Conditional Logic:

Expressions can be combined using "OR", which is represented by double pipe characters ||

Writing Basic Javascript Programs

JS

var monthName = "July";
var currentYear = 2016;
​
if (monthName == "July" && currentYear == 2016) {
  console.log("It must be summer of 2016!");
}

Conditional Logic:

Expressions can also be combined using "AND" which is represented by double ampersands &&

Writing Basic Javascript Programs

JS

var monthName = "July";
var currentYear = 2016;
​
if (monthName == "July" && currentYear == 2016) {
  console.log("It must be summer of 2016!");
}

Conditional Logic: