I'm Fabio.

I started programming for the web 15 years ago.

I studied Computer Science & Kinesiology at the University of Vancouver Island.

Since then I've worked on many web projects, big and small.

I've been teaching web development at Bitmaker for the past three years.

I'm really passionate about technology and the web.

I'm Fabio.

You can email me here:

fabio@bitmakerlabs.com

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

Let's check out some cool examples!

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)

Running Javascript in a Web Browser

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

Basic Syntax

        
    // This is a single line comment

• The two forward slashes denote a single line comment

JS

Data Types

• Number

JS

• String

• Boolean

• Object

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 (A 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 in Javascript, check its length property

JS

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

• Objects can have "properties" which you can use to get or set various things for a given object

Time to try it yourself!

JS

Let's head to Cloud9 and try some exercises

JS and HTML (DOM)

JS Events