ITP 404
Modern Technologies of Web Development
Fall 2013
David Tang
Course Goals
Build upon the fundamentals of JavaScript and jQuery to create interactive web applications that leverage 3rd party API's, libraries, and frameworks
About Me
- Part-time lecturer for the past 2 years
- Full-time faculty now
- 5 years of industry experience in web development
- Full stack developer but mostly focus on JavaScript and PHP
Syllabus
(See Syllabus)
Course Concepts & Vocabulary
- Web Services
- Application Programming Interface (API)
- Document Object Model (DOM)
- JavaScript libraries
- Design Patterns
- Frameworks
Web Services
- Allow for communication between 2 machines over a network using HTTP
- Access 3rd-party data and functionality via web services
- We will explore:
- iTunes, Flickr, Twitter, Facebook, Instagram
- How developers interface with a web service is defined in their API
API
- An API is an interface that gives developers programmatic access to other software.
- If you want to access data on Facebook (a list of your friends, events, etc), Facebook has an API so that you as a developer can access that data and functionality programmatically from your own site without having to use their web pages.
- An API will define how you can interact with the software and what types of operations you can perform
jQuery API
- The jQuery library is another piece of software. In order to work with the library, jQuery provides functions / methods as an API to access the library functionality.
-
When you want to find out what these methods / functions do, you will look at the API Documentation.
Document Object Model
- The Document Object Model is an important concept when working in JavaScript. Think of it as the hierarchy of nodes/elements in your web page.
- When you write JavaScript for your web pages, you are typically interacting with the DOM. You are toggling classes on different elements, adding/removing elements, changing element properties, etc.
- The DOM provides an API for you to access these elements in your JavaScript. A few DOM API methods / functions include:
document.getElementById()
document.getElementsByTagName()
document.querySelectorAll()
JavaScript Libraries
- Think of a library as a toolbox. You can build a number of things using your tools
- jQuery abstracts away browser differences
Design Patterns
"Design patterns provide us a common vocabulary to describe solutions. This can be significantly simpler than describing syntax and semantics when we're attempting to convey a way of structuring a solution in code form to others." - Addy Osmani (Learning JavaScript Design Patterns)
JavaScript Frameworks
- Library vs Framework
- Frameworks provide structure to your code for maintainability and scalability
- Separation of data from the DOM
Mashup Samples
- Programmable Web for sample Mashups
- Austin Startup Map
- Bikesy
- Race Surfer (Herman's project)
- Many tend to be map based but it doesn't have to be!
Student Backgrounds
- Name
- Major
- What do you want to gain from taking this class?
- More technical knowledge
- A career in web development
- Build a particular project you have an idea for
- etc