5
3/2 |
Channel:
K01 03.02 kl. 9.10 - Introduktion
Welcome
Introduction to the Semester and this Course
|
Goal for this Course?
WebTechnologies.docx (Overview 2021)
StateOfJs (2020) (JS Overview 2020)
LinkedIn Learning (Lynda.com): Create a linkedIn Learning Account (free for Zealand-students)
Udemy.com (not free, but the price is only about 10-20 euro per course)
|
Synopsis:
Synopsisdescription.html
Synopsis ideas
Examples:
Blazor.pdf
Jsoup.pdf
Crossplatformframeworks.pdf
ReactHooks.pdf
|
5
3/2 |
Channel:
K01 03.02 kl. 9.10 - Introduktion
Bemærk denne introduktion til Razor-Pages er en ekstra introduktion til WebProgrammering. Der er en del sammenfald med ASP.Net kurset - da det handler om Server-side web applikationer (c#)
Der kommer ikke obligatoriske opgaver Razor-pages i dette kursus! |
Razor-Pages
Razor Pages Arkitektur illustrationer:
RazorArchitecture(Req-Res).docx
RazorArchitecture(Service).docx
RazorArchitecture(Handler part1).docx
RazorArchitecture(Handler part2).docx
RazorPages_Tutorial: PART 1: Razor Pages (Chapter 4-8) |
Eksempel:
ItemRazorV3.zip (vist i klassen)
Exercise:
UserStoriesPart1.pdf
UserStoriesPart2.pdf
UserStoriesPart3.pdf (ekstra)
Solutions:
UserStoriesPart1.zip
UserStoriesPart2.zip
UserStoriesPart3.zip (ekstra) |
6
10/2 |
Channel:
K02 10.02 kl. 9.10 - JavaScript I
JavaScript (JS Basic)
JavaScript (JS Advanced Part1-2)
Global Environment
Global Object
Execution Context
Hoisting
Types
Object/Functions
Function statement/Function expression
Self-invoking functions
JavaScript (JS Advanced Part3)
Array-Helper-Methods:
forEach
map
filter
every
some
reduce
|
JavaScript
http://www.w3schools.com/js/default.asp
LinkedIn Learning courses:
You can find many
good courses on LinkedIn Learning eg:
JavaScript Esential Training with Simon Allardice (Very basic introduction)
Introducing the JavaScript Language with Joe Chellman (Very basic introduciton)
JavaScript: Functions with Ray Villalobos (Medium)
Learning ECMAScript 6 with Eve Porcello (More advanced)
ECMAscript, ES2015 (ES6), ES20XX
Video
JavaScript - Understanding the Weird Parts (the first 3.5 hours)
What is ECMAScript 6? (ES6, Transpiling, BabelJS, new features ...)
Recommendation:
Udemy: JavaScript - Understanding the Weird Parts (Price ~ 11 euro, for the full 11 hours course)
New in ES2015 (ES6):
let
class
const
Arrow function "=>"
Template Literals (Template Strings) back-tick (` `) and String interpolation
ECMAscript 6 compability table
Anjana Vakil: Learning Functional Programming with JavaScript
Array-Helper-Methods:
MDN web doc, Moz://a:
forEach
map
filter
find
every
some
reduce
Notes:
JavaScriptAdvancedPart1.pptx
JavaScriptAdvancedPart2.pptx
JavaScriptAdvancedPart3.pptx
ArrayHelperMethods.zip (Word Dok in DK, Henrik H) |
Examples (Code demonstated in the class):
ES2015Test (VSCode)
JavaScriptObjects (VSCode)
Examples/Solution (ArrayHelperMethods):
JavaScriptSamples.zip (VSCode - updated)
Exercise:
If JavaScript is "new" to you (or you fell very rusty in JS)
Do the exercises in Codecademy:
Codecademy: https://www.codecademy.com/learn/introduction-to-javascript
Exercise:
ArrayHelperMethods.zip (Word Dok in DK)
ArrayHelperMethods.zip (Word Dok in Eng)
|
7
17/2 |
Channel:
K03 17.02 kl. 9.10 - JavaScript II
JavaScript ( JS Advanced Part 4)
Callbacks
Closures
Promise
Concurrency and event loop
Asynchronious callbacks
Destructuring assignment
Spread Syntax [... ]
ES2017
Async/Await
|
Video (YouTube)
Philip Roberts: What the heck is the event loop anyway? (Understanding CallBacks, 26 min)
Techsith: JavaScript callback functions (15 min)
Techsith: JavaScript promises (13 min)
Webpages:
W3Shools: JavaScript Closures
DailyJS: I-never-understood-js-closures
MDN web docs: Concurrency model and Event Loop
Async JS: From Callbacks, to Promises, to Async/Await (Blog, by Tyler McGinnis)
https://tylermcginnis.com/async-javascript-from-callbacks-to-promises-to-async-await/
Moz://a-Hacks: Destructuring
MDN web docs: Spread Syntax
Notes:
Closures og Callback functions.docx (Word Dok in DK, Henrik H)
ExecutionEnvironment.docx (Word Dok in DK, Henrik H)
JavaScriptAdvancedPart4.pptx
Extra material:
Kyle Simpson: Advanced Async and Concurrency Patterns in JavaScript (Promises / Generators)
(Skip the first 7 min. ;))
Arindam Paul - JavaScript VM internals, EventLoop, Async and ScopeChains (38 min) |
Examples (Code demonstated in the class):
JavaScriptAdvanced.zip (VSCode)
Exercise:
ClosuresOpgaver.zip (Word Dok in DK)
PromiseOpgaver.zip (Word Dok in DK)
ClosuresExercise (Word Dok in Eng)
PromiseExercise (Word Dok in Eng)
|
8
24/2 |
Channel:
K04 24.02 kl. 9.10 - React
|
Recommendation:
Udemy: Modern React with Redux [2020 update] (Price ~ 12 euro, for the full 47.5 hours course)
Video (YouTube)
Mosh: Learn React - React Crash Course 2019
Techsith: React
freeCodeCamp: Lean React.js - Full Course for Beginners - Totorials 2019
React
Links (React):
https://reactjs.org/
JSX In Depth
Functional vs class components in React
How to pass props to components in React
https://www.w3schools.com/react/default.asp
Note:
React.pptx |
Examples (Code demonstated in the class):
jsx.zip
card.zip
season.zip
pics.zip (uses axios: npm install --save-dev axios)
PicsOverview.docx
Notice:
The zip files contain only src and public folders, i.e. to run the projects you must first install the project. Unzip the project in your React folder. Open VSCode, navigate to your new project folder and install the project (type: npm install in the terminal vindow) and run the project with npm start.
Exercise:
ReactExercise1 (Basic - JSX)
ReactExercise2 (Clock)
ReactExercise3 (Movie-input-output)
Solutions:
React-movie-input-output-solved.zip
React-movie-input-output-moviedb.zip (som ovenstående men med TheMovieDb istedet for Mock-data)
component-test-src.zip (Clock) |
9
3/3
|
Channel:
K05 03.03 kl. 9.10 - React Redux
|
Note:
How to share React projects: ReactAppFiles
Redux
https://redux.js.org/introduction/getting-started
Very interesting article explaining the relationship between Redux reducers and the Array-Method
.reduce( ):
https://medium.com/@thejasonfile/the-redux-reducers-and-reduce-puzzle-ecc935191fbf
React Redux
https://react-redux.js.org/introduction/quick-start
|
Examples (Code demonstated in the class):
ReactCounterAppOverview.docx
React-Redux-Songs-Overview.docx
counter.zip (Redux)
songs.zip (React-Redux)
Exercise:
ReduxExercise
ReactReduxExercise1
ReactReduxExercise2
Solutions:
color.zip (ReduxExercise) (Vanilla js uden React)
react-redux-counter-solved.zip (ReactReduxExercise1)
React-Redux-Count-Overview.docx
react-redux-movie-input-output-solved.zip (ReactReduxExercise2) |
10
10/3 |
Channel:
K06 10.03 kl. 9.10 - Router Thunk
|
React Router v4
https://blog.pshrmn.com/entry/simple-react-router-v4-tutorial/
https://reacttraining.com/react-router/web/guides/quick-start
React-Router v4 - Dynamic Routing (Philosophy):
https://reacttraining.com/react-router/core/guides/philosophy
Super! - Good explanations that elaborate on the above:
https://tylermcginnis.com/react-router-philosophy-introduction/
URL Rarameters with React Router
(Blog, by Tyler McGinnis)
https://tylermcginnis.com/react-router-url-parameters/
Pass props to React Router's Link component (Blog, by Tyler McGinnis)
https://tylermcginnis.com/react-router-pass-props-to-link/
React-Router - <NavLink>
Redux Thunk
https://github.com/reduxjs/redux-thunk
https://daveceddia.com/what-is-a-thunk/
https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60
Lodash: https://lodash.com/ |
Examples (Code demonstated in the class):
react-router.zip
Exercise:
ReactRouter.docx (finish the drawing, with references)
ReactRouterExercise1 (basic)
ReactRouterExercise2 (movie-router)
Solutions:
ReactRouterExercise1.zip (basic)
ReactRouterExercise2.zip (movie-router)
Examples (Code demonstated in the class):
blog.zip
React-Redux-Router-Overview.-Movie.docx
React-Redux-Thunk-Overview.docx
Behind-the-scenes-of-Redux-Thunk.docx
Exercise:
ReduxThunkExercise1
Solutions:
ReduxThunkExercise.zip (formular1 - under construction)
|
11-12 |
React Project
(Mandatory Assignment - Group-work) |
|
MandatoryAssignment |
13
|
Påske ferie |
|
|
14
7/4 |
Channel:
K07 07.04 kl. 9.10 - Angular Intro
Angular
Component interaction (Input/Output)
Routing & Navigating |
Angular
Henrik Høltzer: Angular - the PIXI Book (draft - under construction)
Slides:
Angular.pptx
Introduction to Angular.ppt
Angular-Input&Output.ppt
Angular-Routing.ppt
Video (Youtube Links):
Mosh: Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch Mindspace: Angular 2 Tutorial - Complete Introduction - Angular 2 CLI Setup, ...
JavaBrains: Angular 6
Links (Angular):
angular.io: Learning Angular
angular.io: Angular Architecture overwiew
angular.io: Component interaction
angular.io: Routing&Navigation
Victor Sakin: Angular Routing
The Ultimate Angular-cli Reference
Useful List of Angular 7 Event Types for Event Binding
Why you should NEVER use Redux with Angular
Todd Motto: https://toddmotto.com/
Victor Sakin: https://vsavkin.com/
|
Exercise: (Angular)
AngularExercise1-FirstApp.html
AngularExercise2-SimpleCalculator.html
AngularExercise3-SimpleCalculator-refactor.html
AngularExercise4-Movie-InputOutput.html
AngularExercise5-Routing.html
Solutions:
AngularExercise1-FirstApp.zip (MyFirstAngularApp)
AngularExercise3-SimpleCalculator-refactor.zip (SimpleCalculator.zip)
AngularExercise4-MovieInputOutput.zip (MovieInputOutput-Solved.zip)
AngularExercise5-Routing.zip (MovieRouter-Solved..zip)
Notice:
The solution zip-file don't contain the node_modules. If you want to try the solution:
1) Just unzip the file in your VSCode/Angular folder
2) Open VSCode an navigate to the new folder
3) Run: npm install in the integrated terminal window
(don't foget it takes some minuttes to generate the project).
4) Run: npm update (its an Angular 7 project)
5) Start the server by running: ng serve -o
(Don't forget to stop the server after use with: CTRL + C )
|
15
14/4 |
Channel:
K08 14.04 kl. 9.10 - Angular Continue
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/
RxJS Observable - push vs pull: https://rxjs-dev.firebaseapp.com/guide/observable
Links
Enable cross-origin resource sharing
Enabling Cross-Origin Requests in ASP.NET Web API 2 |
Examples (Code demonstated in the class):
MovieHttpServiceRxJS.zip
MyFirstAngularApp-Overview.docx
SimpleCalculatorRefactored-Overview.docx
MovieInputOutput-Overview.docx
MovieRouter-Overview.docx
MoviesHttpServiceRxJS-Overview.docx
Exercise: (Angular)
Mandatory assigment - part 2 (Individuel opgave, skal afleveres og godkendes individuelt):
AngularExercise6-HttpService.html
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: *
|
16 |
Angular Project
(Mandatory Assignment) |
Supervision |
Notice:
The Assignment has to be approved by me in MS Teams, no later than Wednesday, April 21, 2021 at 14:45. |
17-21 |
Synopsis
|
Specialization in one of your electives
The report must be handed in no later than Wednesday 27. May 2020 at 11.00 am in Wiseflow
|
Synopsisdescription
Synopsis ideas
Supervision - Booking Sheets |
?? |
Exam: ?? |
Examination meetinglist |
|