Jáchym Bártík, KSI
jachym.bartik@matfyz.cuni.cz
Please read this section at least one day prior to the seminar. This section outlines what you are expected to know, be able to do, or have prepared in advance. Following these instructions will help you get the most out of the seminar and ensure smooth participation.
Before the start of the practical, you should be able to:
defer or DOMContentLoaded event).In addition, please review this short JavaScript Crash Course. This time, make sure to check the second chapter (JS in Browser) as well.
This slide applies to you only if you plan to use your own computer for the practical.
We can put the JavaScript directly into HTML. Keep in mind that we should properly "escape" any HTML relevant content such as < and >.
<script type="text/javascript">
window.alert('Hello world');
</script>
We can load JavaScript from external resources.
<script type="text/javascript" src="./assets/js/main.js"></script>
When possible, prefer the second option.
Note: Do NOT add JavaScript directly to method handlers in HTML!
JavaScript code is executed as soon as it is encountered. To ensure that the code runs only after the page is loaded, we can:
defer attribute to the <script> tag:
<script type="text/javascript" defer>
document.getElementById('my-element').textContent = 'deferred';
</script>
defer doesn't work with inline scripts!
DOMContentLoaded event on the document object:
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('my-element').textContent = 'DOM Content Loaded';
});
load event?
Use an arbitrary web page with multiple links (e.g., Wikipedia) for this exercise. Write a script and paste it into the browser console.
First, make that clicking on a link won't cause navigation. Show an alert with the link's URL instead.
In the second part, track the number of times each link was clicked (use url as the identifier). Change the color of the links based on this number (e.g., create some color palette with ~10 colors).
Bonus: Store the click counts in the local storage, so that they persist after the page is reloaded (however, you will still have to paste the script again each time).
Continue to the next slide once you are done.
Download this page and update it so:
employees as <li> items in content list<h1> headings so that they are numbered (i.e., "1. First heading", …)Implement the functionality step by step. You are allowed to only put JavaScript code into the existing script tag. Mind proper naming and code-style.
Continue to the next slide once you are done.
The objective is to create a simple product list with text and atribute based filtering. You can start by downloading this page. The required functionality is described on following slides.
Implement the functionality step by step. You are allowed to only put JavaScript code into the existing script tag. You are allowed to change the surrounding HTML and CSS code. Mind proper naming and code-style.
In order to test your application we need to generate some data. Employ JSON generator with the following template:
[
"repeat(64)",
{
"id": "guid()",
"label": "product()",
"description": "productDescription()",
"material": "productMaterial()",
"price": "price()",
"category": "enum(camping, garden)"
}
]
Hardcode the generated data into the page.
Once the page is loaded, render the list into the HTML ul#item-list element.
You may need to pre-process the data.
Continue to the next slide once you are done.
Implement an HTML form inside the form#search-form element.
The form must be located above the list and must contains:
Think about the behavior and implement the event handlers.
Continue to the next slide once you are done.
When the user opens the page, read the filter values from the URL query. When the user performs a change in the filter, synchronize the change to the URL query.
For example, when the user searches for string "chair", the URL may change to ...?search=chair.
Continue to the next slide once you are done.
Once you finish all parts of the last exercise, upload all your files to ~/public_html/product-list/ directory at Webik.
The main file should be named index.html.