Intro to Web Programming - Javascript Pt. 3

This lesson assumes you know how to create variables of these basic types:

  • Strings / Text
  • Numbers
  • Boolean (True/False)
  • Objects
  • Arrays (Lists)

…and that you can mix and match them creatively.

Quick Review

Here’s an example for a basic user account:

1
2
3
4
5
6
7
8
9
10
11
12
var user = {
loginCount: 14,
signupDate: 1417066602, // Unix Time -> http://www.unixtimestamp.com/
wantsNewsletter: true,
flags: ['moderator', 'staff', 'beta'],
socialNetworks: {
facebook: false,
twitter: "@example",
googlePlus: "Example"
}
}
Read the rest of the article

Intro to Web Programming - Javascript Pt. 2

So you’ve got some interesting data you want to work with. You’ve figured out your favorite way to store it using Javascript. What kind of things can you do with it? Well that’s up to your imagination, but let’s start with the tools!

First let’s fire up an environment where we can play around with Javascript. As in part 1, I’ll recommend using JS Bin with only the Javascript and Console panes active.

Playing with Variables

Javascript is a pretty flexible language, and one of the interesting things you can do with it is play around with your variables after running your code.

Read the rest of the article

Intro to Web Programming - Javascript Pt. 1

Earlier this year I was invited up to Vernon, BC to teach the first of two very basic intro courses to Javascript. Last year I taught this for the first time at Accelerate Okanagan with great success.

Thanks to the encouragement of the people who’ve attended both sessions, I’ve decided to try get in the habit of posting the material online for anyone to benefit from. So here’s the first part to my web programming series!


Modern web applications are typically broken down into two separate, but related systems. Here are the different components of each and their responsibilities:

Front-end

  • HTML
    • The structure and content of your website
  • CSS
    • The look & feel of your website
  • Javascript
    • The interactivity & data components of your site

Back-end

  • Web server (Apache, Lighttpd, Nginx, IIS, etc)
    • Serves static content like images, files and routes requests to the platform
  • Platform (Node.js (Javascript), PHP, Python, .NET, and many more)
    • Serves up information (data) to your front-end code
    • Manages authentication / user accounts (if needed)
    • Takes user input from front-end and figures out what to do with it
  • Database (MySQL, MongoDB, Neo4j, and many more)
    • Stores, indexes and retrieves information you need to keep around

These systems run independently, but work together in tandem to create a full experience. Each component and system can even be built separately by different people/teams of people and made to work together.

For the sake of this lesson I’m going to focus on Javascript.

Read the rest of the article