⇦ Back

WDX-180

Web Development X

Week 15 | JavaScript Events

Week 15 - Day 1 | ES6 Modules & The Arguments Object

Schedule

Watch the lectures
Study the suggested material
Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

Part 1: Check your Frontend knowledge / Learn about the arguments object
Part 2: ECMAScript 6 Modules (import/export)

You can find the lecture code here

Suggested material for study:

References & Resources:

Summary

In the first lecture, we try to answer some of the following questions and check whether we are up-to-date with some important Frontend concepts:

What is Browser-Caching?
What is Cache Busting?
What is Server-Caching?
What is rendering?
What are Backend languages?
What is dynamic content?
What are the steps of <script> parsing in the Browser?
What is defer/async?

Next, the first lecture explores the arguments object that is used inside function definitions to access all the arguments passed to the function, even if they are not declared as parameters.

In the second lecture we explore JavaScript modules and imports:

Basic import and export statements
Using the import statement with curly braces ({})
Dynamic imports using the import() function
Using async/await with dynamic imports
Handling errors and rejections when importing modules

The lecture also covers examples of how to use dynamic imports to preload modules, such as importing a module when the mouse cursor is close to an element on the screen.

Exercises

Complete the MDN article on Modules and share your code and questions on Slack
Try to implement modules on your personal/group project(s)
Try to implement dynamic module loading when the mouse cursor is close to the button about to be clicked (you can try the mouseenter, mousemove events)

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week15/progress/progress.draft.w15.d01.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Extra Resources

Read Good Code, is a love letter to the next developer who will maintain it by Addy Osmani

Photo by Lukas

Week 15 - Day 2 | iframe, eval & syntax highlighting

Schedule

Study the suggested material
Practice on the topics and share your questions

Study Plan

First of all, some theory. Start by reading about iframe and eval (or as some people call it, evil()):

Exercises

The challenge for today is to build an exact replica of this reference table using HTML and CSS.

For each row of the table, the user must be able to click on it and some sample code must be displayed that shows the difference between the 3 ways of declaring a variable and the particular feature (e.g. function scope, hoisting, etc.). See the screenshot below for an idea on how to display the code. It’s up to you to find the most appropriate solution. Feel free to experiment and also come up with various ways to do this.

The code must be syntax highlighted. You must use the prism.js library for that and pick the tomorrow night theme.

You can optionally go one step further and make the code runnable. You can experiment with things like eval, iframe or anything you can think of or find on StackOverflow. You might also want to experiment with ready-made libraries like Flems.

Good luck!

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 15 - Day 3 | Event Propagation & Delegation

Schedule

Watch the lectures
Study the suggested material
Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

Part 1: Events & Event Propagation
Part 2: Event Propagation & Event Delegation

The lecture code can be found here (Download link)

Lecture Notes:

The event object:
- The event object becomes available automatically inside an event handler function:

  document.body.addEventListener("click", function(){
    console.log( event ); // `event` is here, even though we never declared it!
  });  

If you want to supply a custom name for the event object, you should also supply a parameter name and change both occurrences (parameter+usage of the parameter):

  function clickHandler( ev ){ console.log(ev); }  

Best practices: ALWAYS supply the event parameter and use meaningful and descriptive names, e.g. event, eventObject, etc.
event.target is ALWAYS the element that triggered the event
addEventListener (alarm) listens on the (outgoing) bubbling phase of the event flow (propagation)
Unregistering Inline (Anonymous) Event Handlers:

  document.addEventListener('click', function register(e){ // 1) Name the function
    if condition
      document.removeEventListener('click', register) // 2) Use the function name to remove it
  });

Study Material:

Study the Event Flow diagram (again) to understand what happens every single time an event is triggered.
Study and experiment with the code that we’ve created during the first session.
Study and practice some of the events we’ve covered and mentioned: click, dblclick, contextmenu, mouseover. If you find some other cool events, please share it!
Check the MDN documentation on the addEventListener
What about the event object properties? Make sure to find about all of them.
Explore the visibilitychange event.

Exercises

Finish the 3 tasks found in the Target Practice Exercise (Download link)
Study the code that we’ve created during the 2nd session (Poor man’s Excel) and try to recreate a table that contains inputs that the user can update.

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Extra Resources

JavaScript Reserved Keywords
Event Propagation
JavaScript Key Codes (interactive)
Explore Custom Events:
- Custom Events
- Creating and triggering events

Week 15 - Day 4 | Events Recap

Schedule

Re-watch yesterday’s lectures
Study the suggested material
Practice on the topics and share your questions

Week 15 - Day 5 | Events Part 2

Schedule

Watch the lectures
Study the suggested material
Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

Part 1: Events & target vs currentTarget
Part 2: Events & Stopping Propagation, Creating a Modal
Learn about removeEventListener()
HTMLElement.className (MDN) (Read/Write)
- document.querySelector(“h1”).className === <h1 class=”THIS VALUE HERE”>
HTMLElement.nodeName (MDN) (Read-only)
- nodeName, gives you the tag name in UPPERCASE e.g. HEADER === <header>, H1 === <h1>, BUTTON === <button>, DIV === <div>
event.target is ALWAYS the element that triggered the event, e.g. the button or any element that was clicked.
event.stopPropagation() (MDN): stops the event flow (propagation) from moving forward. Can happen from within an Event Listener at any step (capturing, bubbling).
event.currentTarget is the element that has the eventListener added to it.

  CURRENTTARGET.addEventListener( event, function(event){  
    event.currentTarget === CURRENTTARGET  
  })  

Code

The Accept Cookies Modal example

Exercises

Study, practice and try to solve the counter challenge

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!

Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham

WDX-180

Week 15 | JavaScript Events

Week 14 ⇦

⇨ Week 16

Week 15 - Day 1 | ES6 Modules & The Arguments Object

Schedule

Study Plan

Summary

Exercises

Extra Resources

Week 15 - Day 2 | iframe, eval & syntax highlighting

Schedule

Study Plan

Exercises

Week 15 - Day 3 | Event Propagation & Delegation

Schedule

Study Plan

Exercises

Extra Resources

Week 15 - Day 4 | Events Recap

Schedule

Week 15 - Day 5 | Events Part 2

Schedule

Study Plan

Exercises