Webprogrammering frontend.
Frontend betyder det der sendes til browseren
HTML sider bliver genereret på Tomcat ved hjælp af JSP filer. JSP er en template engine der erstatter brugen af servletter til at danne HTML til brugeren. Med JSP får vi en java fil (Under overfladen en servlet) som vi kan skrive i som om vi skrev HTML med noget indlejret java. På Tomcat webserveren omdannes JSP til
HTML, som bliver sendt via internettet til brugerens browser. Browseren indlæser html siden og renderer et visuelt billede til brugeren (Det vi kalder en webside/web page).
Vi skal arbejde med følgende emner:
- Mere om JSP sider og HTML
- HTML komponenter (Form etc.)
- Styling med CSS (Framework som bootstrap)
- Javascript og DOM.
- Javascript events.
Oversigt over ugen:
| Dag | Emne |
|---|---|
| Mandag | Klasseundervisning |
| Tirsdag | Vejledning med tutorer: |
| Onsdag | Arbejd videre med Øvelse samt review. |
| Torsdag | Vejledning med tutorer: |
| Fredag | Arbejd videre med Øvelse samt review |
Oversigt over mandagen:
| Emne | Ressourcer |
|---|---|
| 1. Styling med CSS | CSS tutorial, |
| 2. Layout med CSS | Box Model, Tables, Forms, Flexbox, Navigation bar |
| 3. At bruge et library: Bootstrap | Bootstrap tutorial, Bootstrap templates, bootsnipp for små codestykker til design |
| 4. Javascript | Javascript tutorial, Html events, arrays, array sort, Objects, Video kursus på Lynda.com: 1-6, Regular Expression for validation |
| 5. Document Object Model (DOM) + Form value validation | DOM tutorial, Få data fra jsp session/request trukket ud i javascript |
| 6. Events og event handling | DOM events, Event handler |
| 7. JS function and callback | Callback introduction |
| 8. Lambda i java og Arrow notation i ES6 | Eksempelkode |
| 9. Array.map() og Array.filter i JS. | Tutorial om map, filter (og reduce) |
| 10. Functional programming | Introduction to functional programming with js |
Gennemgang i klassen
- Recap på ugen der er gået: Cup cake backend: Diagram, Example JSP drop down, Full example JSP with product line Example Servlet: add product,
- Opsætning af projekt med html, css/bootstrap og js
- Styling af font-family, div (border, width, height, padding, margin), links: horizontal, form, button
- Bootstrap grid, form og table
- Javascript selector (byId, byTagName)
- Javascript event (onclick, onsubmit)
- Javascript effect (.style, innerHTML, form value).
Øvelser i klassen
-
Opsæt projekt med css/bootstrap og js
-
Lav html table med personer (navn, alder).
-
Style table med bootstrap (zebra stribet)
-
Lav button og onclick event der trækker alderen ud, laver et gennemsnit og viser det i et div tag under tabellen.
-
Se resultat for js her
Resultatet
Efter denne uge har i været igennem følgende:
- Arbejdet med Styling af web sider både med rent CSS og med et framework som bootstrap.
- I har arbejdet med javascript og lavet event handlere.
- I har brugt javascript til at lave DOM manipulation så viewet kan genrenderes baseret på brugerinput.
Læringsmål
Efter denne uge er det meningen at du kan:
- Redegøre for hvad DOM er og bruge JS til at Manipulere med DOMen.
- Hente data ud af en form og bruge javascript til at verificere bruger input.
- Bruge CSS til at Style HTML sider og lave et ordentligt layout til brugeren.
- Bruge et bibliotek som bliver hentet ned fra en CDN server.
Erhvervskompetencer
Når ugen er omme har du opnået følgende kompetencer:
- Kunne javascript og CSS til frontend programmering.
- Kunne anvende externe biblioteker i frontend programmering.
- Kunne bruge regular expression til validering
- Kende til functionel programmering.
Øvelse 2: Arbejde videre med Cup cake shoppen
Onsdag - Review
Onsdag taler vi om de øvelser i har lavet. Vi vil gerne høre jer fortælle om …
| Niveau | Demo |
|---|---|
| Grøn | Øvelse 1.1-1.5, 2.1-2.3, 3.1-3.3.3 |
| Gul | 3.3.4 - 3.3.5 |
| Rød | 3.3.6 - 3.3.8 |
Fredag - Review
Når vi mødes fredag vil vi gerne have en demo af jeres arbejde med opgaverne.
Forventninger til fredag (Gul bygger videre på grøn og rød bygger videre på gul):
| Niveau | Demo |
|---|---|
| Grøn | Øvelse 2: 9.1 - 9.3, 10.1 - 10.2 |
| Gul | Øvelse 2: 9.4 - 9.5, 10.3 - 10.5 |
| Rød | Øvelse 2: 10.6 - 10.8, 11.1 - 11.2 |