Project 3 - WEB 124

Read Chapter 3 Functions, Methods, & Objects
Key the code exercises throughout Chapter 3.
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 3 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 3 to review in class. Code them as  elements with id="q1", id="q2", and id="q3" respectively.

JavaScript variable names: Create and complete the following table

Which JavaScript variable names are valid and why?

variable name	valid? yes or no	If NOT valid, why NOT? If valid, from a best practices standpoint, is this a good variable name or not? If NOT, why NOT?
`JCCC`
`$JCCC`
`_JCCC`
`%JCCC`
`1jccc`
`jccc`
`jccc-ks`
`jccc.ks`
`var`
`function`
`streetaddress`
`streetAddress`
`StreetAddress`
`street-Address`

JavaScript Arrays!

In html file....

in the <body>, add 9 paragraph tags with id="p1" through id="p9" respectively
Enter Web Development & Digital Media as the text within each of the paragraphs.
In the html file, add script tags just below the closing id="p9" tag that references a file named project3.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 project3.js, after a comment with your name and the current date....

create and initialize a variable named months equal to ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep", "Oct","Nov","Dec"] (Hint: Do NOT use the new Array syntax. Use the clean JavaScript syntax such as textArray = ["text1", "text2"])
console.log(months);

Save your JavaScript, refresh your html page in the browser, and fix any errors noted in the Console! (aka. Save, refresh, fix, repeat.) You should see the values of your months array in the Console!

Expand your array list to see each element in the array by clicking the arrow to the left of it in the console.

In external js file...

set the value of months array item 0 to "January"

Save, refresh, fix, repeat. Now the console.log statement logs the original array values but when you expand the array list in your console, you should see the value of the first element in the array change to January!

In external js file...

Move the console.log statement after the "January" assignment statement.

Save, refresh, fix, repeat. Note that the first item in the months array now logs out as "January".

In external js file...

set the value of months array item 1 to "February"
set the value of the p1 paragraph to the first item in the months array. (Remember that arrays start with the index value of 0).
set the value of the p2 paragraph to the second item in the months array.
set the value of the p3 paragraph to the third item in the months array.

Save, refresh, fix, repeat.

In external js file...

create and initialize a variable named myBirthdayMonth and set it equal to a string that contains your birthday month (the complete month, not an abbreviation of the month)
set document.getElementById("p4").textContent = "My birthday is in the month of "+ myBirthdayMonth;
set document.getElementById("p5").textContent = "My birthday is in the month of "+ insert the reference to the month array that holds the value of your birth month
Note that the next 2 instructions are similar to the first 2 instructions but use apostrophes ' versus quotation marks "
set document.getElementById('p6').textContent = 'My birthday is in the month of '+ myBirthdayMonth;
set document.getElementById('p7').textContent = 'My birthday is in the month of '+ insert the reference to the month array that holds the value of your birth month
Note that the next 2 instructions are similar to the first 2 instructions but compare the use of an HTML element,  using the innerHTML property
set document.getElementById("p8").innerHTML = "My birthday is in the month of "+ myBirthdayMonth + " using the innerHTML property";
set document.getElementById("p9").innerHTML = "My birthday is in the month of "+ insert the reference to the month array that holds the value of your birthday month + " using the innerHTML property";

Save, refresh, fix, repeat.

Array Review Questions...

What is the difference between using "quotation marks" versus 'apostrophes' in JavaScript? Insert your answer as text directly into a new id="p10" paragraph.
What is the key difference between the innerHTML property and the textContent property? Insert your answer as text directly into a new id="p11" paragraph.
For a reference to a month, why might it make more sense to reference an array value vs. a variable? Insert your answer as text directly into a new id="p12" paragraph.

Function terminology: Create and Complete the Following Table

term	definition
function
statement
parameter
argument
return value
function declaration
function expression
anonymous function
immediately invoked function expression

Function Review questions ...

How do you call a function named showTotal if it doesn't have any parameters?
Insert your answer as text directly into a new paragraph identified as id="f1".
How do you call a function named showTotal if it has two parameters named tax and total and you wish to pass the number 2 as an argument to the tax parameter and 10 as an argument to the total parameter?
Insert your answer as text directly into a new paragraph identified as id="f2".
How do you call a function named showTotal if it has two parameters named tax and total and you wish to pass the variable stateTax as an argument to the tax parameter and totalBeforeTax as an argument to the total parameter?
Insert your answer as text directly into a new paragraph identified as id="f3".

Variable Scope questions...

What JavaScript statement forces you to explicitly declare all variables, and where is it placed?
Insert your answer as text directly into a new paragraph identified as id="s1".
What are two ways to create a global (window-level) variable?
Insert your answer as text directly into a new paragraph identified as id="s2".
What JavaScript keyword is used to create a block-level variable?
Insert your answer as text directly into a new paragraph identified as id="s3".

Object Terminology: Create and Complete the Following Table

term	definition
object
property
method
key
literal notation
dot notation
constructor notation
this
undefined

User-Created Object questions...

What is the benefit of using literal notation over constructor notation to create an object?
Insert your answer as text directly into a new paragraph identified as id="j1".
What is the benefit of using constructor notation over literal notation to create an object?
Insert your answer as text directly into a new paragraph identified as id="j2".
If a function is created in the global scope, what does this refer to?
Insert your answer as text directly into a new paragraph identified as id="j3".
If a function is created within an object, the function becomes a method of that object. In that case, what does this refer to?
Insert your answer as text directly into a new paragraph identified as id="j4".

Storing Data....

In your js file, declare the following items to store data. After each declaration, add a console.log statement to review the data in the browser console.

A variable to store your full name
A variable to store your desired annual salary
A variable to store your veteran status (either you are a veteran or you are not a veteran)
An array to store the names of three of your friends.
An array to store the value of the desired annual salary for your three friends
A literal object to store the first name, last name, and desired annual salary of yet another friend

Built-in Objects: Create and Complete the Following Table

	Browser	Document	Global String	Global Number	Global Math	Global Date
Example of a common method for that object
Explanation of example

Data Types: Create and Complete the Following Table

	String	Number	Boolean	Undefined	Null
Provide an example of how to declare a variable with each of these data types.