Skip to content

Latest commit

 

History

History
130 lines (114 loc) · 7.63 KB

web-apps-0.md

File metadata and controls

130 lines (114 loc) · 7.63 KB
Raw

About this Web App Tutorial Series

I. Overview

This series of tutorials & notes will get you started in creating web applications, which are client-server applications in which the client code runs in a web browser.

II. Prerequisite knowledge

  • The HTML/CSS which we have covered in this course and in IGME-110
  • CSS selectors (in particular the CSS3 selectors) will come in handy
  • Fundamental programming concepts that you gleaned from the (at least) 2 programming classes you have taken prior to this course.

III. How to get the most out of these tutorials

  • Try out the code samples! Tweak and modify them! Most of the code samples are 100% complete. You just need to copy the code and paste it into a text file, and save it to your desktop. You can then make changes to the code and preview them in a web browser (we will be using Chrome)
  • Be sure to complete the related Study Quiz questions for each section, and do the exercises... some will be assigned in class, others will be assigned as homework.

IV. The Tutorials

  1. Introduction to Web Applications:
    1. what is a web app?
    2. what components of the web browser can I program?
    3. what are web standards?
  2. Introduction to JavaScript
    1. a brief history of JavaScript
    2. variables, constants, and "primitive" types
    3. running code in the JavaScript console
    4. viewing error messages in the JavaScript console
    5. common built-in JavaScript objects
    6. type conversion and Falsy/Truthy values
    7. JavaScript's strict mode
  3. Introduction to the Web Browser DOM
    1. did the HTML elements on the page load?
    2. selecting elements on a web page
    3. modifying elements on a web page
    4. add elements to a page, primarily with .innerHTML
    5. viewing the "live" DOM tree with the web inspector
    6. using the JavaScript debugger to "break on exceptions"
    7. adding code breakpoints in the JavaScript debugger
    8. viewing the value of variables in the JavaScript debugger
    9. dealing with null values
  4. More Web Browser DOM Methods
    1. the DOM inverted tree
    2. relationships: parent, child & sibling
    3. creating and modifying DOM elements
    4. inserting and deleting DOM elements from the DOM tree
  5. JavaScript Functions
    1. writing basic functions
    2. function declarations & expressions
    3. functions as first-class objects
    4. ES6 Block & Script Scope
    5. Variable "hoisting" and the "Temporal Dead Zone"
    6. ES6 Arrow Functions
    7. more practice with the debugger
  6. JavaScript Events & the this keyword
    1. event handlers
    2. utilizing function declarations, expressions, and arrow functions
    3. addEventListener(), removeEventListener()
    4. adding properties to elements with element.dataset
    5. values of this in regular functions and arrow functions
    6. the window.onload event
  7. JavaScript Object Literals
    1. creating Object literals with properties and methods
    2. iterating over object keys and values
    3. creating "Object Factories"
    4. ES6 Object literal changes
    5. value types & reference types
    6. another look at const
    7. controlling object mutability with Object.seal() and Object.freeze()
  8. JavaScript Arrays and array-like objects
    1. methods of Array
    2. looping through Array - for, for...of, .forEach(), .filter(), .map()
    3. NodeList
    4. JavaScript typed arrays
    5. method chaining & fluent interfaces
  9. The WebStorage API
    1. localStorage.setItem(key,value)
    2. localStorage.getItem(key)
    3. serializing (stringifying) objects for storage
  10. Intro to Web Services
    1. AJAX v. Ajax
    2. JSON
    3. Utilizing XMLHttpRequest (XHR)

V. Assignments

Be sure to consult the checklists for information about what you should be doing when.

Required Homeworks will be added to this list:

Optional Homeworks for extra credit are in this list:

Assignment at end of Chapter 10:

* the starred assignments are "walkthroughs", you just have to type the code in. Take your time and be sure you understand everything, if you don't, then be sure to ask in class!

VI. Demos

These demos could be nice starting points for a project:

VII. What has been left out of this series

This course's content is primarily focused on giving students an introduction to web publishing, and an introduction to scripting a web browser for both applications and games. Later courses will go deeper and cover more topics, and there is very much more that that to learn about web applications on your own. Here are some major topics that we are NOT covering:

  • Advanced JavaScript Concepts will continue to be covered in downstream courses.
  • Canvas API is covered in IGME-330.
  • Cloud Computing is the practice of using a network of remote servers hosted on the Internet to store, manage, and process data. While we are going to utilize Internet resources in the form of web services, in this course our application code will be 100% on the client machine (the web browser). In later courses (IGME-330 & IGME-430) you will get the opportunity to read/write data to "the cloud", and even have application logic running on remote servers.
  • Database/Data Modeling - creating a key:value server utilizing Node.js is covered in IGME-430 (an elective), Data Modeling and the SQL language are covered in ISTE-230 (an elective)
  • Package Managers - such npm & Bower and other build tools such as Gulp & Grunt are covered in later courses.
  • Server-side programming - is covered primarily in IGME-430, but we did already give you a little bit of PHP --> About this PHP Tutorial Series
  • Web MVC or MVVM Frameworks - these involve data binding and components examples include Vue, React and Angular, which are covered in later courses.
  • Web Games will be covered later in this course, and we will build several games or interactive experiences using the PixiJS rendering engine. Our course's PixiJS materials can be found here --> PixiJS Tutorial Series
  • WebGL is an implementation of OpenGL ES 2.0 that runs natively in web browsers, and is the fastest way to draw to the browser screen. WebGL shaders may be briefly looked at while we are covering PixiJS.

VIII. Resources

Get Started -> Introduction to Web Applications (chapter 1)