230 Review

Question 1 - What is the purpose of HTML markup?

HTML elements and their tags, attributes, and their values, are they building blocks of web pages. Structured documents with style sheets can be viewed on a wide variety of devices. HTML elements also assist computer agents such as search engines in making more sense of a page. - http://www.w3.org/standards/webdesign/htmlcss

Question 2 - View the HTML source of this page and identify the different parts of a HTML element.

Answer: opening tag, closing tag, element content, attribute(s)

Question 3- What is the purpose of CSS stylesheets?

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. - http://www.w3.org/Style/CSS/Overview.en.html

Question 4 - View the HTML source of this page and identify the different parts of a CSS rule.

Answer: selector, declaration block, property:value pairs

Question 5 - what are the three most common kinds of CSS selectors?

Answer: Selectors are a syntax for pattern matching and are used to "select" elements on the page that we want to style. The three most common selectors are:

type selector - which selects all elements on a page of a specific type
ex. p{color:red;}
class selector - which selects all elements on a page of a specific class -
ex. .myclass{color:red;}
id selector - which selects a single element on a page of a specific id -
ex. #weatherDiv{color:red;}

Question 6 - list at least 3 more CSS selectors.

Answer: universal selector, attribute selector, descendant combinator - see http://www.w3.org/TR/css3-selectors/#selectors for a full list.

Question 1 - Where should JavaScript code be placed on a web page?

Answer: When a <script> is encountered by the browser's parser, the code is passed off to the JavaScript interpreter and executed.

The <script> element is commonly placed in the <head> section of the document.
Another approach is to place the <script> element at the end the <body> tag.
JS code can also be placed inline in HTML elements by making it the value of certain event handling attributes. This approach is more or less deprecated.
The <script> element can also be placed in a separate file and linked to with a <script> tag. This is the preferred method if you have more than a trivial amount of JavaScript code on a page.

Question 2 - What does "use strict" do?

Answer: read here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode

Question 3 - What does this line of code do? window.onload = init;

Answer: It calls the init function once the window.onload event has fired. window.onload must point a reference to a function (i.e. the name of a function). Note: the name of the event is case sensitive, it's onload, NOT onLoad

Question 4 - Where can we see the results of console.log()

Answer: The results appear in the JavaScript console.

Chrome comes pre-installed with Developer Tools (a "web inspector") which you can view by right-clicking in the browser window and choosing "Inspect Element". Clicking on the console tab reveals the console log - which is handy for simple debugging.

OS X users have a Safari Web Inspector that is nearly identical to Chrome's and also invoked by right-clicking. Be aware you will have to first enable it, by checking "Show Develop in Menu Bar", which is located under Safari > Preferences... - the Advanced tab.

Question 5 - Adding parentheses at the end of init like this window.onload = init(); often causes the code to fail. Where can we see the error message? Why will the code usually fail?

Answer:

Your page may not behave as expected, and you may see an error message in the console.
Event handlers expect a reference to a function. If you add () to the end of the function it is instead called immediately, and whatever value the function returns is what is stored in the event handler. In the case above, window.onload would now point at Null
Calling the function earlier than you intended means it's likely the page or other resources are not yet loaded, often leading to error messages in the console because certain variables are undefined
Note: parentheses () are also known as the invocation operator or the function call operator. Placing them after a function name causes the function to be called immediately.

Question 6 - What is an alternative to using window.onload = init;?

Answer: jQuery's $.ready() function, or a JS event listener. Here's an example of an event listener: window.addEventListener("load", init) - note that in event listeners we use just the name of the event without the "on"(i.e. event listeners expect "load" or "click", not "onload" or "onclick" as the first argument)

HTML/CSS Review

JavaScript Review