"The most important principle in Software Engineering is the Separation of Concerns (SoC): The idea that a software system must be decomposed into parts that overlap in functionality as little as possible."
- Learning Objectives
- About the Projects
- Suggested Study
- Practice
- Sundays & Projects
- Class Recordings
- Curriculum (external)
- HYF Home (external)
- Creating DOM elements
- Reading & writing from DOM element properties
.innerHTML.value.style- ...
- Attaching event listeners to DOM objects
- Writing event handlers
- Using
Eventobjects as parameters - Structuring user interactions in handler functions
- Using
- Using template strings to create HTML strings
- Document Life-Cycle
<head>: Scripts & styles are loaded top to bottom, before the<body><body>: Everything is executed/loaded top to bottom- so what? Any DOM script should be written/loaded below the element it interacts with
- JS & the DOM
- Adding event listeners to the DOM by
id - Reading & Writing values from DOM elements
- Using HTML strings and
.innerHTMLto update the DOM - Using template literal strings to render HTML
- The beginnings of DOM manipulation
- Adding event listeners to the DOM by
- Handling events:
- Reading user data from events
- Implementing user stories with this data
- Organizing your code based on it's role in your program
- DOM: define the structure of your user interface
- Styles: define the display of your user interface
- Event Listeners: define how users will interact with your program
- Handlers: define what happens when a user interacts with your program
- Logic: define & test how user data is transformed
- Incremental Development 2.0:
- Develop your projects one user-story at a time ...
- AND develop your user stories one step at a time!
- Carefully complete & test one piece of code before writing the next
Projects in this module will be more challenging than in the last module, adding even a little interactivity into a website will make things much more complicated! To help you deal with this complexity you will practice separating and organizing your JavaScript code into different files based on what role it plays in your application.
You will learn how to create interactive User Interfaces by reading and writing from the DOM:
- Users will pass input to your programs directly from the UI (no more
prompt) - Users will see results displayed directly in the UI (no more
alert)
Projects in this module will not include full DOM manipulation, you'll learn that in the next module. This module's projects will be limited to reading/writing .innerHTML & .value.
In this module you will learn how to completely separate your JavaScript from your user interface. You will be using .getElementById and .addEventListener instead of the onclick attribute.
When using onclick, you need to write some JavaScript in your HTML - this is not a good practice because your UI and JavaScript are too interdependent. Using HTML ids and JavaScript event listeners you can decouple your User Interface from the program logic.
Web development is fundamentally event driven, this means things don't happen until a something else happens. In your previous projects the prompt didn't appear until the user clicked a button and a prompt appeared. You've probably noticed by now that this is a limiting way to write your programs. It's hard to gather interesting data from a user, and impossible to display it in a nice way.
You will learn how to use DOM events to interact with users and to read more interesting data than just a few words or numbers. Things like mouse movements, the colors on a screen, and much more.
A working project is not enough! For projects in this module we will expect you to turn in code that is well organized in different files based on it's role. The first week's project will come with some starter-code to help you get used to the folder structure we expect. The using-user-input exercises will also act as a guide & practice for building well-structured projects.
Just like in the previous module, you will be expected to explain your development strategy in a separate file called development-strategy.md. Projects involving JavaScript are naturally more complicated than projects with only prompt & alert, for this reason you will be expected to structure the user stories in your development-strategy files differently than you did in the last module. To get an idea of how to describe your strategies in this module, take a look at the using-user-input exercises. (psst, it's like writing documentation!)
In this module’s project you have many more files and folders, and you’re learning how to break a single feature into more smaller pieces. To implement a single user story you will need HTML, CSS, event listener(s), handler(s) and possibly a logic function. All of these smaller tasks can be shared between different team mates.
The extra branching challenge this module is to create different branches for each user story like before, but then to also create branches off of the user story branches for the smaller units of work. This way your group can confirm your work before merging it into the feature, and confirm the feature before merging it to master
So it’s not about how many commits are on a branch, but how much work is on a branch. If you only commit once for your piece of work then there will be only commit on a branch, but that’s the measure
Good luck!
- Separation of Concerns
- Generating HTML with Template Literals
- The DOM
- Events
- Code to Study
Exercises for solo-study. We won't be checking these exercises unless you ask us to look them over, your learning is in your hands. Take a look through these and find the ones that help the most, the rest will be here for you later!
- 🐣 javascript-30
- mixed individual and group exercises
The focus of week 1 is using event listeners, event handlers and DOM elements to add interactivity to your web pages. You will learn how to read and write basic data from the DOM.
- Study
- Practice
There's an outstanding series of tutorials called The JavaScript 30 put together by Wes Bos, it's 30 fun frontend projects with video tutorials and finished code to study. The team project this week is to study one of the projects and reconstruct it as a collaborative project.
Each team member should fork HackYourFutureBelgium/javascript-30, this repo contains more detailed instructions for the week's project. You can use the javascript-30-starter repo to get off the ground.
No need to stop at 1 project! If your team is on a roll, keep going. There's a lot of projects :)
- [ ] [repo](https://github.com/_/_) with a complete README
- [ ] [live demo](https://_.github.io/_)
- [ ] [development-strategy](https://github.com/_/_/tree/master/development-strategy.md)
- [ ] [One branch per step in `development-strategy.md`](https://github.com/_/_/network)
- [ ] [One closed issue per task](https://github.com/_/_/issues?q=is%3Aissue+is%3Aclosed) (you can have more than task per development step!)
- [ ] [One closed PR per task issue](https://github.com/_/__/pulls?q=is%3Apr+is%3Aclosed)
- [ ] [A project board](https://github.com/_/_/projects/X)The focus of week 2 is using forms to handle more gather and process more user data.
- Event Parameter
- Event Delegation
Just like last week, choose a JavaScript 30 project to reverse-engineer as a team.
- [ ] [repo](https://github.com/_/_) with a complete README
- [ ] [live demo](https://_.github.io/_)
- [ ] [development-strategy](https://github.com/_/_/tree/master/development-strategy.md)
- [ ] [One branch per step in `development-strategy.md`](https://github.com/_/_/network)
- [ ] [One closed issue per task](https://github.com/_/_/issues?q=is%3Aissue+is%3Aclosed) (you can have more than task per development step!)
- [ ] [One closed PR per task issue](https://github.com/_/__/pulls?q=is%3Apr+is%3Aclosed)
- [ ] [A project board](https://github.com/_/_/projects/X)