This lab seeks to help introduce you to Developer Tools and basic HTML and JavaScript.

Useful Links

• Docker setup guide
• Starter code
• Autograder
• HTML Documentation
• JavaScript Document Methods

Setup

If you haven’t already, follow our Docker guide to learn how to set up Docker on your computer. This will be useful both for this lab as well as for the remaining projects and labs.

To get the code for this lab, create a repo using the GitHub template. Make sure to make this repoistory is private. Clone the repoistory onto your system, then open it in VS Code. If you successfully set up Docker, you should be greeted with a pop-up in the bottom right asking you to reopen the directory in the development container; do so now.

Tasks

You will write your answer for part 1 in submit.toml. You will write your answers for part 2 in the task<N>.js files.

Part 1: Page Inspector

Find the Secret String

This lab aims to introduce you to your browser’s Developer Tools. In most browsers, these can be accessed with a right click, then selecting ‘Inspect’. If this option is not visible, it may need to be activated in your browser settings.

The Developer Tools of each browser are slightly different, so refer to to documentation for DevTools in Chrome, Firefox, Safari, Edge, or the other browser of your choice.

A Web Inspector or a Browser Inspector is part of the Development Tools suite. It helps to identify and locate what’s inside the web page in a browser. With the Web Inspector, we can explore and manipulate the browser’s code to see the screen’s sudden changes. This is also popularly referred to as “inspecting an element”. The inspector shows the CSS, HTML, and JavaScript of the web page so that the developer or the tester can analyze the web page and use the browser developer tools’ features to run checks, observe network activity, and see what information the website is caching, among other things.

Project 2 requires the use of the page inspector for a host of reasons, so it’s important to familiarize yourself with how to access it. To open the page inspector, right-click on a webpage and click ‘Inspect’.

Task 1 Navigate to the EECS 388 Lab 2 Spec in the browser. The webpage has a secret message embedded in the HTML that you can see through the Page Inspector. Copy the secret message into submit.toml.

Hint: The Hidden Message is contained in an HTML comment underneath the ‘Find the Secret String’ subheading in the Lab Assignment 2 spec. Highlight the Find the Secret String subheading, right click, and then click Inspect.

Fetch a Cookie

HTTP Cookies are an essential part of the modern internet. They let websites remember you, your website logins, shopping carts and more. However, if a webpage is misconfigured, they can be used to carry out dangerous attacks.

Task 2 Open lab2.eecs388.org/mungle in your browser. We can view the cookies a webpage stores in our browser using the Development Tools suite. Open Dev Tools, and navigate to the ‘Application’ tab in order to find the site cookies (the cookies may be in a different tab, such as ‘Storage’, depending on your browser). Once on the Application tab of the Development Tools suite, navigate to ‘Cookies’ on the sidebar. Find the cookie named eecs388. Copy the information about that cookie into submit.toml. When asked to provide a binary cookie attribute, simply put true or false.

Change a Cookie’s Value

Cookies are stored on your browser, and are sent with HTTP requests to the server that set them. Since they are stored on your browser, they can be modified by the client. This can be useful for testing, but can also allow attackers to induce behavior that the server did not intend.

Task 3 Modify the cookie from the previous task to have value isawesome and the path set to /cookie. Then, make a request to lab2.eecs388.org/cookie. If successful, you should get back a secret password. Copy the secret password into submit.toml.

Part 2: The Web Console and Element Selection

An important feature of modern web browsers is the Web Console. It logs information associated with a web page: network requests, JavaScript, CSS, security errors and warnings as well as error, warning and informational messages explicitly logged by JavaScript code running in the page context. Additionally, it enables developers to interact with a web page by executing JavaScript expressions in the context of the page. This means that instead of having to go back to the source script each time, we can execute JS in the browser and watch what is returned in real-time.

In this task, you’ll be using the Web Console to interact with elements contained in part2.html. To do this, we’ll utilize an important paradigm of web programming: the Document Object Model (DOM). The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory. DOM methods allow programmatic access to the tree. With them, you can change the document’s structure, style, or content.

To access the DOM, we can use the Document interface, which serves as the entry point to a web page’s content. Useful DOM methods can be found on the
Document() Interface methods page.

part2.html is a short page that contains information on US states, cities and counties. Please open this page in your browser. After the page has loaded, open the Development Tools suite and navigate to the Console tab. Here, you will write commands to target specific parts of the HTML content.

Task 4 Write a command that returns all elements with the class name state. It should return an HTMLCollection of length 3. After ensuring your command’s correctness, copy your command into task4.js after let answer =.

Task 5 Write a command that returns all <h1> elements. It should return an NodeList of length 3. After ensuring your command’s correctness, copy your command into task5.js after let answer =.

Task 6 Write a command that returns the third child element of the counties div. It should return a div of class ‘county’, and the heading of thatdiv should be Suffolk County. After ensuring your command’s correctness, copy your command into task6.js after let answer =.

Hint: to access the children of the div with the id ‘counties’, use the .children property

Part 3: Local Files in the Browser

HTML is the standard language used for creating and designing the structure of a web page, and nearly every single page you visit on the internet is written in it. You can verify this by visiting a website, going to the page inspector, and viewing the page source; this is the HTML code that your browser is using to create what you see on the screen!

The ability to interpret, render, and display HTML code is one of the browser’s most important jobs. However, this feature is not limited to the internet: you can also use your browser to view and render HTML files stored on your computer! This is useful for testing and debugging, as well as for viewing web pages you are building without needing to upload them to a server.

Task 7 Create a HTML file that contains the text local files are great! and save it as task7.html. You can verify your file by opening it in your browser, and ensuring that the text is displayed correctly.

To actually view the file in your browser, first open up a new tab. Pressing (Ctrl/Cmd, O) will prompt your browser to open a file explorer; Then, find your HTML file, and open it. Alternatively, you can input file://(...) in the URL bar, where the (...) is replaced by the full path to a file, such as /path/to/lab2/task7.html.

PS C:\Users\YourUsername> wsl -l -v
NAME      STATE           VERSION
Ubuntu    Running         2

Submission

Submit the following files to the Autograder by the deadline:

• submit.toml
• task4.js
• task5.js
• task6.js
• task7.html