ITP DWD SPRING 2013
Notes
Assignment

Week 1 - Introduction to web development

Introduction to web development, server-side & client-side. Discussion of basic web requests. The tools you should have to get started. Getting started with JavaScript.

Web Development

Web development is a general term for implementing a web site including web design, content creation, server configuration and programming. In this class we will explore web programming in its current state with open source tools and code and methods to serve and collect data from users.

Web programming is a two-sided operation including servers and clients

Servers - accepting requests

A server is usually thought of as a powerful computer serving 1,000’s of user connections, but it is code that turns a powerful computer into a server. A server can be anything that is capable of running a piece of software to accept incoming connections from remote computers (or incoming requests from other applications). Arduinos can become servers with an Ethernet of Wifi Shield. iPhones and Android can also run code to act as a server.

The web server is specifically designed to accept HTTP requests and return appropriate responses, HTML, XML, JSON and even file mime type .gif, .jpg, .mp4.

There are a variety of web servers, Apache popular in the PHP community. Servers are created in many programming languages too, Ruby, Python, Java and more recently JavaScript. A typical server will be a piece of code, or script that opens a socket. This socket acts like a doorway, allowing clients to request access to content and resources.

Clients - making requests

On the client-side, we are usually referring to a web browser. Typical usage, a user makes a request from their browser. The user's request goes out on the Internet to find a specific server and make a specific request to that server. A web server returns the appropriate content or information which is rendered into a structured visual web page by the browser.

Besides web browsers, a web client is any device or application that communicates with a web server. A Processing sketch or Arduino may be set up as clients to request the latest weather from Yahoo. The new wifi bathroom scales and thermostats are web clients as well, sending user data to a web server for later use. Best guess 99% of mobile phone application that require an Internet connection are connecting to a web server, they too are web clients.

Web clients usually expect to receive content from the web server in a specific format, browsers expect HTML, Instant messenger applications likely expect XML, many mobile phone applications expect JSON. It is up to the web client developer to decide on which format they require as a response from the web server.

Databases

Databases store data in a structured format that supports searching/querying, aggregating and grouping, inserting, updating and deleting data. Databases can be accessed directly or interfaced with through a programming language like PHP, Python or JavaScript. Databases are popular for supporting relationships between different types of data (MySQL, Postgres), but there is a growing support for unstructured data not focused on relational data (CouchDB, MongoDB).

API's

An application programming interface or API is a method for one system to open its resources and data to another system which may be a remote server or in a separate application. One website might provide an API to search for location and return image URLs for any matching results. Another company may provide an API to allow a SMS sent or phonecall placed from JavaScript or Processing. API's connect products and services together with a defined request structure.

JavaScript

The most popular web programming language

JavaScript. It is the little language that could, only a few years ago it was performing pet tricks but has grown up to become the most popular language on the Web, today it is used for

  • AJAX and websocket real-time communication in a browser

  • Large scale browser web applications like GMail, Facebook and Twitter

  • Visualizations tools and Canvas drawing with projects like ProcessingJS

  • Web API’s favor sending data as JSON, JavaScript object notation over XML

  • Web and mobile web applications frameworks

  • Servers creating TCP, UDP, HTTP, HTTPS with NodeJS

Client-side JavaScript

Most people know of JavaScript because it is integrated into nearly every web browser. Modern browsers are continuing to improve the speed and capabilities to allow developers to create powerful web applications that run entirely inside the browser. JavaScript can manipulate, create HTML elements of a web page, manage CSS styles and even inject new JavaScript into a page. Rendered HTML in a browser is considered the Document Object Model or DOM, JavaScript has full access to the DOM and uses events to connect mouse clicks, mouse overs, drag - drop to custom JavaScript code.

Web browsers are not implemented equally, the JavaScript capabilities and runtimes vary from browser to browser. It is common to use JavaScript client-side libraries to make code work consistently from IE to FireFox to Chrome. jQuery, Mootools, ExtJS are a few of the libraries that have a large community of users and are known to work very well for cross-browser compatibility.

Server-side JavaScript

NodeJS is a web language in JavaScript. It uses the best parts of JavaScript, events and asynchronous I/O to create scalable web applications; NodeJS has become popular because of this and the ability to handle thousands of connections on a single instance.

For us at ITP, writing in JavaScript on the client and server side is an added benefit, we only need to worry about a single language. Client and server-side JavaScript share syntax and ideology.

Tools

Browsers

Please use a WebKit browser when developing, the JavaScript implementation is the best around.

WebKit browsers include a JavaScript console for testing and development.

Text editors

Online tools

Terminal

Getting to know your command line interface - basic unix commands

NodeJS & NPM

Git

By the end of the semester you will love Git (if you don't already). And it will make you a better person. Version control is at the center of all our examples and how we will push code to Heroku. We will cover Git repositories (repos), committing changes, pushing to remote Git repos.

JavaScript language basics

Variables

Always start your variables with var. 

var name = "Tony Pony"; // string

var age = 55; // number

Comments

// double slash will comment a line

console.log("This is a test message"); // In Chrome and Safari's JavaScript console you can log messages during code execution

Arrays

var myArray = []; //makes a new array

var myArray = new Array(); // same as above, just more work

var favoriteColors = ['green','orange','brown']; // create an array with 3 colors

favoriteColors.push('magenta'); //add an item to an existing array

console.log("favoriteColors contains the following colors...");

console.dir(favoriteColors); //view an object to console

For loop

Let's for loop through the array. Start at element 0. Increment i until i is greater than the length of favoriteColors. 

console.log("using the for loop to iterate");

for (i=0; i < favoriteColors.length; i++) { 

   console.log(i + " " + favoriteColors[i]); //print out each element

}

// an alternative to for, for n in obj

console.log("using for n in, instead of standard for loop")

for (n in favoriteColors) {

   console.log(n + " " + favoriteColors[n]);

}

Objects

An object is just an organized set of variables (or nouns) called properties that together represent a piece of data valuable to the program. The properties can be anything, strings, numbers, arrays and even other objects.

Objects can have methods (or verbs) that manipulate or act on the data.

http://jsbin.com/owidig/1/edit



Assignment

Download & Install

JavaScript Learning, Practivce, Review

Books

comments powered by Disqus