Webprogramming - HTML5 and JavaScript frameworks

Semester: 4.sem., spring 2017
Teacher: Henrik Høltzer
Email: heho@easj.dk

Education guidelines and Objectives for the course

NB: The plan is preliminary and will properly be changed during the semester! (Last updated: june 2, 2017)

Week Topics Literature/Material Exercises/Notes
5 Welcome
Introduction to the course


HTML5/CSS3

The new semantic tags:
<nav>, <section>, <article>, <footer> ....
Flexible box model
(-webkit)
More CSS3 Features

Rounded corners
Shadows
Gradients
Alpha (transparencies)
Animation with transitions


Intro.ppt

Visual Studio Code (VSCode)
Links (VSCode):
Download:
https://code.visualstudio.com/

Beginner's Guide:
https://channel9.ms
dn.com/Blogs/raw-tech/Beginners-Guide-to-VS-Code





Html

Links (Html):
http://www.w3schools.com/htmL/
HTML5 (53 short Videos from TheNewBoston) (especially video no. 9-19)
Drive into HTML5
HTML5 Rocks
30 Must-See HTML5 tutorials ...
HTML CSS BOOK


CSS (Cascading Style Sheets)
Links (CSS+CSS3):
http://www.w3schools.com/css/default.asp
http://www.w3schools.com/css/css3_intro.asp

CSS Selectors: Class vs ID:

http://www.tizag.com/cssT/cssid.php


Video:

HTML4+CSS2
HTML4 and CSS2 (46 short Videos from TheNewBoston)

Lynda.com:
http://www.lynda.com/HTML-training-tutorials/224-0.html

Lynda.com is also a good site for you to lean more at home (if Web programming has your interest - and of course is has, otherwise you have chosen a wrong elective! ^^)


Get a free School-Account to Lynda.com.

Note:
If Basic Html is new for you - take a turn with the W3Schools tutorial! or look at some of Buckys great videos about basic XHTML and CSS: https://www.thenewboston.com/videos.php?cat=40

or do the exercises at codecademy

Codecademy:
http://www.codecademy.com/tracks/web

If you allready know some Html - look at Lynda.com and find som tutorial that gets your interest.


Examples (Code demonstated in the class):
TestHTML4.zip (VSCode)
TestHTML5.zip (VSCode)
SemanticTag.zip (VSCode)
FlexibleBoxModel.zip (VSCode)
RoundedCorner.zip (VSCode)

Exercise:
HTML/CSS

6 JavaScript
HTML DOM (Document Object Model)

JavaScript

Links (JavaScript):

W3Schools JavaScript Tutorial:
http://www.w3schools.com/js/default.asp

Webucators JavaScript Tutorial:
http://www.learn-javascript-tutorial.com/

JavaScript: 40 small Videos from Bucky and TheNewBoston.org:
https://www.thenewboston.com/videos.php?cat=10


JavaScript cheat-sheet
http://firstsiteguide.com/javascript-cheat-sheet/

Slides:
Introduction to JavaScript (pdf)

Lynda.com:
http://www.lynda.com/JavaScript-training-tutorials/244-0.html


Links (DOM - Document Object Model):
W3Schools HTML DOM tutorial:
http://www.w3schools.com/js/js_htmldom.asp

DOM4:
W3C Recommendation 19 November 2015
https://www.w3.org/TR/dom/

What is the DOM:
https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference/Introduction#What_is_the_DOM.3F



Examples (Code demonstated in the class):
HTML-Calculator.zip (VSCode)


Note:

If JavaScript is new for you, start watching JavaScript Esential Training with Simon Allardice (Lynda.com): http://www.lynda.com/JavaScript-tutorials/Welcome/81266/87513-4.html

If you need a very basic introduction you could also watch: Introducing the JavaScript Language with Joe Chellman (Lynda.com): http://www.lynda.com/JavaScript-tutorials/Introducing-JavaScript-Language/123563-2.html

Later you should watch: JavaScript: Functions with Ray Villalobos (Lynda.com): http://www.lynda.com/JavaScript-tutorials/JavaScript-Functions/148137-2.html

If JS allready is well know for you -watch: Up and Running with ECMAScript 6 with Eve Porcello (Lynda.com): http://www.lynda.com/JavaScript-tutorials/Up-Running-ECMAScript-6/424003-2.html



Exercise:

a) Do the exercises in Codecademy:
Codecademy: http://www.codecademy.com/tracks/javascript

The most importen lessons is:
Unit 2: "Introduction to Funcions in JS"
Unit 6: "Arrays and Objects in JS"
Unit 8: "Introduction to Object II"


You don't need to fulfill the rest of the lessons (many are very simple for a C# or Java programmer)

b) Make a new web-page containing some JavaScript or add Javascript to one of your old web-pages.



Exercise:
Make your own simple HTML-Calculator, with html, css and js in seperate files.

7

Debugging JS

JavaScript Objects


More HTML5
querySelectorAll
<video>
<audio>
<embed>
Geolocation
<canvas>


JQuery

Debugging JavaScript
Chrome DevTools (Ctrl Shift I)

JavaScript Debugging:
http://www.w3schools.com/js/js_debugging.asp



Object Oriented JavaScript
Introduction to Object-Oriented JavaScript

JavaScript Objects
http://www.w3schools.com/js/js_objects.asp
http://www.w3schools.com/js/js_object_definition.asp

JavaScript Hoisting
https://www.w3schools.com/js/js_hoisting.asp

M
ore HTML5/CSS3

Links (more HTML5):
HTML5 Video player
http://videojs.com/

HTML Video Tutorial
http://www.mrc-productivity.com/techblog/?p=722

HTML5 Geolocation:
http://www.mrc-productivity.com/techblog/?p=714

HTML5 Canvas
http://www.mrc-productivity.com/techblog/?p=718

Nice Web-based drawing Tool using the Canvas element:
http://muro.deviantart.com



JQuery

Links (JQuery):

http://jquery.com/
http://jqueryui.com/

jQuery.com Tutorial:
http://try.jquery.com/

W3Schools JQuery Tutorial:
http://www.w3schools.com/jquery/

TheNewBoston:
https://www.thenewboston.com/videos.php?cat=32

JQuery Tutorial / Best practice
http://www.learn-jquery-tutorial.com/BestPractices.cfm#.USx5vB1WySp

Lynda.com:
http://www.lynda.com/jQuery-tutorials/jQuery-Essential-Training/183382-2.html

Slides:
JQuery.ppt
Codeschool_try_jquery.pdf
JQuery-essentials-slideshow


Exercise:
Use Chrome DevTools to debug your simple HTML-Calculator
(Add a debugger-statement in Add(), Sub(), .. functions, Run your application in Chrome and start Chrome DevTools (Ctrl Shift I) - can you inspect the values?)


Examples (Code demonstated in the class):
HTML-Calulator.zip (VSCode)
JavaScriptObjects
(VSCode)
HTML5Stuff.zip
(HTML5 Media tags)
Geolocation.zip (Geolocation with simple HTML5 and Google Maps API)


Exercise:
Make a experimental wep-page where you are using some of the new HTML5 features:
Video, Audio, Embeded YouTube and Geolocation




Examples (Code demonstated in the class):
JQuerySelectTest.zip (VSCode)


Exercise:
Do the tutorial at TRYjQuery: http://try.jquery.com/


Mandatory Assignment (Part 1) - JQuery

8 Responsive web design (RWD)

BootStrap

Responsive Web Design
Ethan Marcotte: A List Apart
In this article, from May 2010, Ethan Marcotte define the term “Responsive Web Design” for the first time – he cited fluid grids, flexible images, and media queries as three “technical ingredients” of RWD.

Kezz Bracey: The State of Responsive Web Design
In this article, from Jan 2015, Kezz Bracey give an up-to-date description of “Responsive Web Design”.

More to read about RWD:
This Is Responsive There you can find responsive design patterns, more responsive resources, and responsive news.

Mediaqueri  There you’ll find a huge showcase of responsive websites (perfect if you need some inspiration).


Bootstrap
Bootstrap: http://getbootstrap.com/

Free themes for Bootstrap
Bootstrap CDN: http://www.bootstrapcdn.com/#bootswatch_tab

W3schools: Bootstrap get started
http://www.lynda.com/Bootstrap-training-tutorials/1421-0.html
Bootstrap Tutorial For Beginners: https://www.youtube.com/watch?v=no-Ntkc836w

Slide: Bootstrap3.pdf

Codecademy
Make a website: Bootstrap

CodeSchool

Blasting off with Bootstrap (not for free, only the first part)

Google
Test tool: Mobile-friendly Test

Examples (Code demonstated in the class):
BootstrapTest.zip (VSCode)
BootstrapLynda.zip
(VSCode)

Examples (Responsive and not Responsive):
A good responsive website (New York Times)
A typical not responsive website (EASJ.dk)


Lynda.com:

Bootstrap 3: Essential Training with Ray Villalobos
Watch the video, redo the demonstrated stuff and do the Challenge.

Bootstrap 3: Advanced web development
Watch the video - chap 2:

  • Adding basic navigation
  • Creating dropdown
  • Automating dropdown with jQuery

Do some more experiments by your self.


9 No lessons   Mandatory Assignment (Part 2) - Bootstrap
10

ES2015 (ES6)

NodeJS
NPM
GIT

TypeScript

ECMAscript, ES2015 (ES6), ES20XX
Lynda.com
What is ECMAScript 6? (ES6, Transpiling, BabelJS, new features ...)

New in ES2015 (ES6):
let
class
const
Arrow function "=>"
Template Literals (Template Strings) back-tick (` `) and String interpolation

Understanding ES6 Modules
import
export

ECMAscript 6 compability table

NPM (Node Package Manager)
Lynda.com:
npm: Up and Running with NPM with Ray Villalobos

Kennedy, Hugh; DeVay, Paul
"Understanding npm"Nsight. Retrieved 22 July 2016




TypeScript

Anders Hejlsberg: Introducing TypeScript
Anders Hejlsberg: What's new in Typescript
Classes: http://www.typescriptlang.org/docs/handbook/classes.html
Interfaces: https://www.typescriptlang.org/docs/handbook/interfaces.html
Overloading TypeScript functions: https://visualstudiomagazine.com/articles/2015/11/01/overloading-typescript-functions.aspx

Modules (imports and exports): https://www.typescriptlang.org/docs/handbook/modules.html

Lynda.com:
TypeScript: Essential Training with Jess Chadwick


TypeScript Playground

Examples (Code demonstated in the class):
ES2015Test (VSCode)

Exercise: (Install: Node + npm, Git and TypeScript)
Install Node + npm (download: https://nodejs.org/en/)
Verify that it works by running: node -v

Install Git (download: https://git-scm.com/)
Verify that it works by running: git --version

Install the TypeScript compiler globally by issuing:
npm install -g typescript
Verify the compiler works by running
tsc -v


Exercise: (Typescript)
Exercise1-TypeScript.html
Exercise2-TypeScript.html

Solutions: New!
Exercise1-TypeScript.zip
Exercise2-TypeScript.zip

11

WebPack 2
Angular

 

Extra material (if you want to go futher with JS)
Links (A deeper dive into JS - behind the sceens?):

Techsith: JavaScript callback functions
Philip Roberts: What the heck is the event loop anyway? (Understanding CallBacks)
Arindam Paul - JavaScript VM internals, EventLoop, Async and ScopeChains
Anjana Vakil: Learning Functional Programming with JavaScript
Kyle Simpson: Advanced Async and Concurrency Patterns in JavaScript (Promises / Generators) (Skip the first 7 min. ;))

W3Shools: JavaScript Closures
Techsith: JavaScript promises


WebPack 2
What is Webpack?

Lynda.com
What is Webpack?

Angular
Slides:
Introduction to Angular.ppt

Youtube Links (Angular):

Mosh: Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch
Mindspace: Angular 2 Tutorial - Complete Introduction - Angular 2 CLI Setup, ...


Links (Angular):
angular.io: Learning Angular
angular.io: Angular Architecture overwiew
The Ultimate Angular-cli Reference


Todd Motto: https://toddmotto.com/
Victor Sakin: https://vsavkin.com/


Exercise: (Webpack)
Exercise3-Webpack.html

Solutions: New!
Exercise3-Webpack.zip (JS-Modules)


Exercise:
(Angular)
Exercise4-Angular-FirstApp.html
Exercise5-Angular-SimpleCalculator.html
Exercise6-Angular- SimpleCalculator-refactor.html

Solutions: New!
Exercise4-Angular-FirstApp.zip (MyFirstAngularApp)
Exercice5-Angular-SimpleCalculator.zip
Exercise6-Angular-SimpleCalculator-refactor.zip (SimpleCalculator)

 

12

Angular (continue)

Component interaction (Input/Output)

Routing & Navigating


JSON

Links (Angular):
angular.io: Component interaction
angular.io: Routing&Navigation
Victor Sakin: Angular Routing

Slides:
Angular-Input&Output.ppt

Angular-Routing.ppt

Exercise: (Angular)
Exercise7-Angular-Movie-InputOutput.html
Exercise8-Angular-Routing.html

Solutions:
Exercise7-Angular-Movie-InputOutput (Movies.zip)
Exercice8-Angular-Routing (MoviesRouting.zip)

Lynda.com:

JavaScript and JSON

    Internship - Supervisor Mandatory Assignment (Part 3) - Angular WebApp
13 Angular (continue)
Ajax & RxJS

Web-Architecture
Webservice
Links (RxJS):
RxJS: http://reactivex.io/rxjs/
Andre Staltz: The introduction to Reactive Programming you've been missing
Interactive diagrams of Rx Observables: http://rxmarbles.com/


Links:

Enable cross-origin resource sharing
Enabling Cross-Origin Requests in ASP.NET Web API 2


Exercise: (Angular)
Exercise9-Angular-HttpService.html

Solutions: New!
Exercise9-Angular-HttpService.html (F1SimpleHTTPService.zip)

Notice:
If you are using Crome and have your webservice on your localhost, the "same origin policy" prohibits you accessing your data. You can disable the same origin policy on Google's Chrome browser by closing Chrome an open it from the cmd with: --disable-web-security (C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --disable-web-security - on my computer)
see: stackoverflow: disable same origin policy in chrome

or install: Allow-Control-Allow-Origin: *

14

No lessons

Supervision - mandatory assignment

MEAN stack (MongoDB, Express, Angular, NodeJS)
FireBase

NodeJS
Introduction to Node with Ryan Dahl

Lynda.com:

Up and Running with Node.js with Alexander Zanfir
Building a Website with Node.js and Express.js  with Ray Villalobos
Node.js Essential Training with Alex Banks

MongoDB
https://www.mongodb.org/
MVA: You've Got Documents! A MongoDB Jump Start
Code School: The Magical Marvels of MongoDB

MEAN
Code School: Become a MEAN Stack Developer

FireBase
https://firebase.google.com/
https://www.youtube.com/user/Firebase?hl=da
15-16 No lessons Easter Hollidays  
17   Demonstration of Mandatory assignment  
18-22 Synopsis Specialization in one of your electives
The report must be handed in no later than Friday 2 June 2017 at 11.00 am in Wiseflow

Synopsisdescription
Synopsis ideas

Supervision - Booking Sheets

2017 Exam 16 June - Examination meetinglist  
  Do you want to go deeper?

Asynchronous Programming:
https://egghead.io/courses/mastering-asynchronous-programming-the-end-of-the-loop

ReactJS
Lynda.com:

Learn React.js: The Basics with Eve Porcello
Building a Web Interface with React.js
with Ray Villalobos

RxJS
Reactive extensions for JS (RxJS) and reactive programming