CS 1100: Web Development: Client-Side Coding

1. Working with strings

Create four variables named byte1, byte2, byte3, and byte4. Assign each of these variables a value in the range 0-255.

1. Convert byte1 to a string using the number method toString() method: byte1.toString().
   What is the result?
2. What happens if you use toString(2) or toString(16) instead?
3. Create a variable named ipAddress and assign it the value of combining your four "byte" variables together, separated by a ".". Recall that we can concatenate strings using the + operator. The result should look something like "192.168.2.1".
   What is the value of ipAddress?

2. Working with the DOM

Open Session 16's notes in a new tab or a separate window.

1. Create a variable named heading1 and give it the value of document.querySelector('h1').
   What is value of heading1?
2. What is value of heading1.innerHTML?
3. What is value of heading1.innerText?
4. Create a variable named anchor and give it the value of heading1.querySelector('a').
   What is value of anchor?
5. What is value of anchor.innerText?
6. Write an assignment statement to give anchor.innerText a new string value of your own choosing (or "Eugene's Fun House" if you prefer).
   What happens to the web page?
7. Swap the values of the first h2 on the page and the first h3 on the page.
   You can do this with two statements to retrieve the elements and three statements to make the exchange:

   let h2 = document.querySelector('h2');
   let h3 = document.querySelector('h3');
   
   let temp = h2.innerText;
   h2.innerText = h3.innerText;
   h3.innerText = temp;
   

   Do the headings take their size with them, or do they swap sizes, too?

3. Changing the Content of a Page

Write a sequence of JavaScript statements to modify a web page you have created for this course. The statements can make any changes to the page you like, as long:

• You modify at least two standard HTML elements.
• You change the text of at least one element.
• You change the HTML of at least one element.
• You add a link (an a element) to the text of at least one element.
  Remember that you will need to use \" for the double-quote character inside any string you create.

Once you are satisfied with the code, copy the statements into a new script file named change_page.js.

At the top of the file, put a JavaScript comment with the name of the file you used your code on so that I can run your code on the same page.

4. Interacting with the User

Use the built-in prompt() function to ask the user (in this case, you) for a response.

prompt('Enter a number, please.');

1. Use prompt() to get a value from the user and assign it to a variable. Let's ask the user for an HTML tag that appears in this webpage:

   let selector = prompt('Enter an HTML tag that appears in this page.');
   

2. Next, use prompt() to get some new text from the user:

   let newContent = prompt('What should be the new content?');
   

3. Find the element having the user-supplied selector:

   let element = document.querySelector(selector);
   

4. Finally, change the body of the element to match the user's new content:

   element.innerText = newContent;
   

Congratulations! You have just given the user the ability to modify almost any part of a web page.

Copy your four JavaScript statements into a new script file named change_element.js.

Bonus question: Why can't we use this code to modify any part of the page?