Introduction to JavaScript(A, B, C, D)COGS3 – Introduction to Computing Assignment

purpose:

LEARN JS

use NotePad++, Atom, Sublime, or VSCode

save your html files in the following format:cg3xzz_lastname_hw5_labx.html

cg3xzz = your class account

Turning in your assignment:

1. transfer it to the class server acsweb.ucsd.edu

2. save it in your public_html/hw5 folder

• To receive full credit your file and directory names must follow the exact specifications outlined the instructions.

• Please pay particular attention to:• case, hyphens, underscores, and

spaces

Academic Integrity

all work is to be completed individually;

you may work and help each other in the lab but you cannot have someone else “do/think” your work for you (even if you are doing the typing!)

if you are repeating this class, you cannot re-submit assignments from a previous quarter.

please review all ACS and UCSD academic integrity policies – you will be tested on them on the midterm and final exams.

the best way to learn programming is to do it – give yourself the time to explore and enjoy the process.

use w3schools.com js tutorialas your JAVASCRIPT resource.

Part A Goals and Objectives:By the end of this assignment, you will be able to:1. Read and write simple JS programs embedded inside HTML

documents.2. Write a JS program that the computer runs when a user clicks a

button.3. Write a JS program that gets input from a popup window and

sends output to a popup window.4. Get more practice using Bootstrap 4

save your files as: cg3xzz_lastname_hw5_laba.html

Part A Example of your output:

It is good practice to comment your code.

It is requiredfor your assignments.

Part B

Part B:

Use JS to generate a popup window and have the user can type input back. You will write HTML document with JS that:

1. Gets input from a user with a popup window

2. Creates a greeting using string concatenation

3. Displays that greeting to the user in another popup window

4. Continue to use Bootstrap 4 for styling practice

save your file as: cg3xzz_lastname_hw5_labb.html

Part B Example of your output:

Part C

Part C:

Use JS to input text and modify the DOM using getElementById JS method:

1. Use the <input> tag to get the user’s name. Note: this tag uses a unique id attribute value that is used to identify it in the JS script.

2. Output a saying using <p> tag. Note: the example shows a <p> tag with another unique id attribute that is used by JS to insert the saying into the <p> … </p> container.

Using tags for input and output is better than using popup windows to interact with the user. (Most users consider popup windows annoying.)

3. Continue using Bootstrap 4 to style.

save your file as: cg3xzz_lastname_hw5_labc.html

Part C

Step 1. Setup the page using the usual Bootstrap4 links.

Part D

Part D: Convert Fahrenheit to Celcius

save your file as: cg3xzz_lastname_hw5_labd.html

1. Extend your skills to modify the DOM by using getElementByIdto modify a style and content.

2. Use Math libraries in JavaScript3. Work with float and text data types4. Extend the example by writing a Celsius to Fahrenheit function

with a user input output interface. 5. Continue Bootstrap 4 skill development

Part D