Project 2 - WEB 124

Read Chapter 2 Basic JavaScript Instructions
Key the code exercises throughout Chapter 2.
Watch applicable youtubes.
Complete the following exercises by building a single semantic, validated, spell-checked web page with both the questions and the answers. Apply a linked, validated, flexible, and visually pleasing style sheet. Post your files to the student web server and put the corresponding URL in the Project 2 drop box.
Note color coding: keyword, blue: HTML, pink: CSS, green: JavaScript, black: general instructions)

As always, spell check all content and identify your name and the current date in all files using comments. In html files you may use the html meta tag, e.g. <meta name="author" content="John Doe">.

Chapter Debrief

Create three thoughtful questions about the code examples in Chapter 2 to discuss in class. Code them as <p> elements with id="q1", id="q2", and id="q3" respectively.

JavaScript syntax: Create and complete the following table

Programming syntax is the set of rules that define the symbols and rules by which a particular language is written.

JavaScript syntax characters	description	provide an example
when do you use the semicolon ;	used to terminate a full statement	`console.log("Hi World!");`
when do you use { curly braces }	used to surround code blocks also used to create a custom object (but we are not that far in class yet so I wanted to provide this example)	`if (user === "Lisa") { console.log("Hi Lisa!" ); }` `const lisa = { lname: 'Friedrichsen', title: 'Professor', school: 'JCCC' }`
how do you write a one-line comment
how do you write multi-line comment
how do you declare variable
how do you assign a textual value to a variable
when do you use 'apostrophes' vs. "quotation marks"
when do you use the backwards slash \
what is the most straight forward way of creating an array?

Let's Write Some JavaScript!

In html file....

In the <body>, after the table, add 6 paragraph tags with id="p1" through id="p6" respectively.
Enter Johnson County Community College as the text within each of the paragraph tags.
In the html file, add script tags just above the closing body tag that reference a file named project2.js in the same folder as the html file.

Render your page in the browser and fix any errors using the html and css validators! In the browser, open the Console. (right-click your browser|Inspect|click Console tab)

In external js file named project2.js...

create and initialize a string variable named myName with your full name
create and initialize a variable named para1 and set it equal to document.getElementById("p1");
set para1.textContent = myName;

Refresh your html page in the browser and fix any errors noted in the Console! You should see your name in paragraph 1!

In external js file...

create and initialize two number variables with the names n1 and n2 using any numeric values desired
create and initialize a variable named numberSum to add the two numbers using their variable names
set document.getElementById("p2").textContent = numberSum;

Refresh your html page in the browser and fix any errors noted in the Console! You should see the addition of your two numbers in paragraph 2!

In external js file...

create and initialize a variable named numberMult to multiply the two numbers using their variable names.
set document.getElementById("p3").textContent = numberMult;

Refresh your html page in the browser and fix any errors noted in the Console! You should see the multiplication of your two numbers in paragraph 3!

In external js file...

create and initialize a variable named myNameAddNum to add one of your numeric variables to the string variable
set document.getElementById("p4").textContent = myNameAddNum;
(yes, you can add strings and numbers -- note the result!)

Refresh your html page in the browser and fix any errors noted in the Console! You should see the concatenation of your two numbers in paragraph 4!

In external js file...

create and initialize a variable named myNameMultNum to multiply one of your numeric variables to the string variable
set document.getElementById("p5").textContent = myNameMultNum;
(no, you cannot multiply, divide, or do any math (other than "add") on text -- note the result!)

Refresh your html page in the browser and fix any errors noted in the Console! You should see NaN (not a number) in paragraph 5!

In external js file...

create and initialize a variable named ageCompare to compare your age to the multiplication of your numeric variables (hint, use <, <=, >, or >= to do a comparison. The comparison will evaluate true or false).
set document.getElementById("p6").textContent = ageCompare;

Refresh your html page in the browser and fix any errors noted in the Console!

In external js file...

change and save your n1 and n2 values.

Refresh your web page to observe the changes. Do this as often as you desire. Have fun!

Review Questions:

When does the JavaScript in this project run?
Answer this question in your html file in a new paragraph with id="p7".
Why can you + text with a number but not * text with a number in JavaScript?
Answer this question in your html file in a new paragraph with id="p8".
What is the difference between the textContent and innerHTML properties and why was it more appropriate to use textContent for this exercise?
Answer this question in your html file in a new paragraph with id="p9".
What is "automatic semicolon insertion" in JavaScript?
Answer this question in your html file in a new paragraph with id="p10".
When is it OK to break a statement onto two lines in JavaScript without using special characters?
Answer this question in your html file in a new paragraph with id="p11".
How are tabs and spaces used and treated in JavaScript?
Answer this question in your html file in a new paragraph with id="p12".