Module 9: Dynamic Web Pages

In client side dynamics, how does the client (browser) interact with Javascript?

Similarly to how the browser interprets and displays HTML files, it also interprets and executes the Javascript embedded in the HTML file to customize what is displayed.

What is the purpose of the "referral" section of the query string?

The "referral" is where you came to the page from. For example, if you followed a link to a product from Alice's website, the product page's query string might say "referral=alice", allowing them to track where you came from and give Alice commission for using her referral link.

What does putting your browser in private mode do?

They can prevent cookies from being made, and hide browsing history. However, there are still ways that people can track your activity.

<button type="button" onclick="increment()"> Click Me! </button> 1. What is onclick? 2. What is increment? 3. What is Click Me! ?

onclick is a special attribute telling the button what function to execute upon click. increment is the name of the function defined in the script. Click Me! is the text displayed on the button.

What tag is used to start and end a section of JavaScript within HTML?

script

What are 5 examples of parts of a query string?

session referral display options page request information auth

What is an example of something that could be a value pair in the display options section of a query string?

sound=off

What are the 2 attributes required in the <button> html element?

type="button" onclick="function_name()" Where function_name is the name of a function defined in the embedded script, that will be executed when the button is clicked.

1. What are client-server cookies? 2. What is the purpose? 3. How do they work?

1. A cookie is a message from the server, stored by the client, containing information about the client including preferences and activity. 2. It allows the server to be able to "remember" the client and credentials, preferences, and past activity the next time you visit the web page. 3. When the client makes an HTTP request to a server and the server responds, it also sends along the cookies which are stored by the client. The next time the client makes an HTTP request to the same server, it sends along the cookie, providing the server with the information.

When implementing JavaScript within HTML to make a button that counts how many times it is clicked, what are the 3 components that are introduced to make this work?

1. HTML that is to be manipulated by the script. - ie, text (the number 0) within a <span> with a specially assigned #id attribute that will be referred to by the script. The script will be able to manipulate what is within the <span> with this specially assigned #id. 2. HTML code for the button itself. - using the button element: <button type="button" onclick="increment()"> Click Me! </button> 3. Embedded Javascript defining the increment function.

How do the browser (client) and web server interact to give you a webpage? (5 steps)

1. The browser requests a file (path/reference) via HTTP. 2. The web server receives the request and retrieves the correct html files for the request page. 3. The web server sends the file (as packets) to the browser. 4. The browser interprets and displays the HTML file. 5. The browser makes more requests for other pages and images as required.

What is a query string and what is it's purpose?

In a web address, for example ... http://uwaterloo.com/content? ... the query string is everything that comes after the "?". It is information about the browsing session that both the server and client can see, and therefore acts as a method of communication between the server and client.

What is background communication and how does it work compared to regular communication? What are 2 examples of background communication that we use a lot?

It is a background "auto refresh" of pages. How it works: Javascript continuously loops/refreshes and makes requests for new data, and adjusts the web page based on whatever is received while the requests continue. Regular communication, on the other hand, is slower because the client has to wait for the server's response every time it makes a request before it makes changes or makes another request. Examples: real time message notifications, real time collab (Google Docs)

What is the purpose of the "session" part of a query string?

It is a number unique to every time you visit the page. Using the session number, the server and client can keep track of your page visits, and the sequence and length of visits.

What does the canvas tag do?

It is an HTML tag used for adding graphics within HTML

What is the purpose of the "auth" part of the query string?

It is an anonymous way of listing your username and password (credential) information. It allows the client and server to identify who you are and your viewing permissions.

What is a dynamic web page?

One that automatically changes based on the environment. Ie, the page is NOT changing as a result of a change in it's HTML code.

What is the syntax for pairs of values in a query string?

Pairs of values are separated by "&" and connected by "=". For example: http://uwaterloo.com/content?session=878d29&referral=alice pair 1 pair 2

What is the difference between query string session tracking and cookies?

Query string session: visits by the same user from different tabs or browsers are all tracked as separate visits, with separate session numbers. Cookies: cookies are stored in the browser, so using 2 different browsers means that they will have separate cookies and track activity separately. However, visits from different tabs in the same browser can be tracked by the same cookie but as 2 separate tabs.

In Amazon search experiences, what would be examples of server side and client side dynamics?

Server side: prices and stock. Client side: recommended items for you, items in your cart

What is the client?

A computer that is designed to request information from a server (ie, the browser)

What is the web server?

A computer that stores the web pages for a particular website or many websites. Ie, www.student.cs.uwaterloo.ca

How is a page/section in a query string different from a path?

A path takes you to different web pages. On the other hand, using the query string path/section, a single webpage can display different information based on what the client requests. For example, the undergraduate schedule for courses. It is one webpage that displays different course information based on the client's request for different courses.

What is a server side dynamic web page? How does it work?

A web page that changes in response to data/information provided by the server. The server does this by generating a new HTML file with updated information each time the page is loaded.

What are client side dynamic web pages? How does it work?

A web pages that changes in response to data/information provided by the client (web browser). The HTML file for the web page includes embedded code (ie, Javascript) that changes what is displayed based on the information from the client.