Frontend Web Development

Quiz for Week 19

What element is used to include JavaScript files into the document?
1. <link>
2. <js>
3. <script>
4. <body>
What element is used to change the character set?
1. <charset>
2. <meta>
3. <html>
4. <!doctype>
What element is used to set a short description about the document?
1. <header>
2. <h1>
3. <meta>
4. <h2>
What element is used for content that is tangentially related to the main section of the page?
1. <sidebar>
2. <other>
3. <aside>
4. <footer>
What element is used to create a numbered list?
1. <ol>
2. <nl>
3. <dl>
4. <ul>
What element is used for fine (legal) print?
1. <aside>
2. <legal>
3. <small>
4. <q>
What attribute determines how a file referenced by a link tag is treated?
1. role
2. type
3. name
4. rel
What attribute is used on form fields to define the key in the key/value pairs in form data?
1. key
2. attr
3. value
4. name
What CSS property spaces an element out from its siblings?
1. spacing
2. margin
3. min-width
4. padding
What CSS property determines whether text is bold or not?
1. boldness
2. font-style
3. font-weight
4. text-decoration
What CSS property determines whether text is italicized or not?
1. text-decoration
2. font-variant
3. font-style
4. border
What CSS property provides the text contents inside a pseudo-element?
1. content
2. before
3. after
4. text
What CSS property determines the height of a line of text?
1. font-size
2. font-height
3. height
4. line-height
Which two (2) CSS properties can make an element not be shown, but still take up space on the page?
1. opacity
2. display
3. position
4. visibility
What pseudo-selector would you use if you only want to target even-numbered elements?
1. :even-child()
2. :nth-child()
3. :first-child
4. :even
What CSS measurement unit refers to the width or height of a single character?
1. pt
2. in
3. ft
4. em
What is the difference between width: 100% and width: auto?
width: 100% sets the content area of an element to be 100% the size of its container, while width: auto stretches the content area out as far as it can go, minus the element's horizontal margin and padding.
What CSS rules are defined in the user agent stylesheet for the span element?
1. display: inline; font-size: 1em;
2. display: inline-block;
3. display: inline;
4. None
What is the CSS function that refers to a file for background images?
1. file()
2. include()
3. url()
4. hsla()
Define, and assign a value to, a variable in JavaScript.
```
var x = "hello";
```
Write an anonymous function in JavaScript that accepts a variable called hello and returns the string "world".
```
function (hello) {
  return "world";
}
```
Write an expression (not a function) in JavaScript that can evaluate to true or false.
```
"2" === 2
```
(will evaluate to false)

Write a conditional statement that has at least three separate outcomes in JavaScript.

if ('yes') {
  alert('uh huh');
} else if ('no') {
  alert('nope');
} else {
  alert('what?');
}

What JavaScript function can change a string into an integer?
1. toInt
2. toString
3. parseInt
4. int
What DOM function shows a browser dialog box that has the user press Cancel or OK?
1. confirm
2. alert
3. prompt
4. choose
Why might a JavaScript command written on line 8 of an HTML file not be able to reference an element written on line 20?
Because it didn't wait for the DOM to finish loading, meaning the element on line 20 doesn't yet exist
How do you find the <body> element using jQuery?
```
$('body')
```
Name at least one jQuery function that can request a URL.
$.get, $.getJSON, $.getScript, $.ajax, $.post, load
What jQuery function sets the opacity of an element to 0, displays it, then animates its opacity level to 1?
fadeIn
Give at least two jQuery functions that assign event listeners to elements.
Most functions on this page. The best one to use is on.
Why won't the following JavaScript function return "1"?
```
function() {
  $('#box').css('opacity', 0);
  $('#box').fadeIn();
  return $('#box').css('opacity');
}
```
Because JavaScript is does not wait for asynchronous tasks, like fade-in animation, to complete before evaluating the next expression. It will return "0" or something very close as the expression runs immediately after #box has been told to fade in.
What is the name for the in-memory representation of the page's current layout?
1. HTML
2. RAM
3. API
4. DOM
What are the two (2) most common HTTP verbs?
1. PUT
2. GET
3. UPDATE
4. POST
What is the HTTP status code for Internal Server Error?
1. 500
2. 200
3. 401
4. 403
Why might a file loaded from a URL ending in index.html not be treated like an HTML file?
Because the server might deliver it with a Content-Type other than text/html.

Extra credit

These next questions come from an interview quiz I wrote, so they're generally harder yet cover some of the same ground.

How can you make new HTML5 sectioning elements accessible via JS in IE8 and below?
document.createElement('elementname') or use html5shiv (or Modernizr which comes with it)
Having done that, how can you make new HTML5 sectioning elements render properly in IE8 and below?
Set them all to display: block, or use a modern CSS reset file which does that for you
What is the correct element to use for paragraph-length quotations?
<blockquote>
How can you use jQuery to execute code when the DOM is ready, without using the ready function?
```
$(function() {...});
```
What are the vendor prefixes for IE and Opera (pre-Webkit)?
-ms- and -o-
What CSS property name (not value) do you use for gradients? For gradients in IE9 and below?
background-image, filter
Explain the pros and cons of including <script> tags in the <head>, or bottom of the <body>.
Tags in the <head> load and execute immediately, slowing down the perceptual load time of the page, but they can prepare the DOM to render the rest of the page properly (a la html5shiv).

Tags at the bottom of the <body> load after the HTML and CSS has all been displayed on the page, which is good because a user shouldn't interact with a page until they can see it rendered properly.
Why is it a bad idea to use the ID selector (#) in CSS files?
Because the rule can then only be used once per page, which is inflexible.
Why is it a bad idea to hard-code the style attribute into elements?
Because it leads to potential repetition if it's used all over the place and is difficult to easily override via stylesheets. Classes should be hard-coded instead.
Explain how to prevent an element from collapsing if it only contains floated elements.
Use a clearfix hack.
What is a jQuery function you can use to attach event listeners for elements that might not yet exist?
on
What is a good way to ensure strings utilized by JavaScript files are in the proper locale along with the rest of the HTML content?
Assign the strings in inline <script> tags. This is a good practice because content should come with HTML, and it lets internationalization tools populate the proper text along with the rest of the document.
What are the two required attributes for the <img> tag?
src and alt
What is the CSS3 notation for alpha-transparent colors?
rgba()
What is the difference between <div> and <span> in a typical user-agent stylesheet?
<div> has display: block
What is the HTTP status code for OK (no errors)?
200
How can you reference external files and have them always match your page's current protocol?
Don't include the protocol in the href/src, like "//www.google.com/"

Solution