PIC 40A. Midterm 1 Review

Size: px

Start display at page:

Download "PIC 40A. Midterm 1 Review"

Francis Simon
6 years ago
Views:

1 PIC 40A Midterm 1 Review

2 XHTML and HTML5 Know the structure of an XHTML/HTML5 document (head, body) and what goes in each section. Understand meta tags and be able to give an example of a meta tags. Know the rules concerning tags, attributes and element nesting, placement of elements and general syntax.

3 In previous midterms I have given an screenshot of a web page or part of a webpage and asked the students to write the necessary XHTML that would render like the screenshot.

4 <table summary="some random numbers" border="border"> <caption>my Nums Rowspan</caption> <tr> <th>1</th> <td>2</td> </tr> <tr> <td>3</td> <td rowspan="2">5</td> </tr> <tr> <td>4</td> </tr> </table> <table summary="some more random numbers" border="border"> <caption>more Nums Colspan</caption> <tr> <td>7</td> <td>8</td> </tr> <tr> <th colspan="2">9</th> </tr> <tr> <td>10</td> <td>11</td> </tr> </table>

5 XHTML problem, if it is lengthy, may appear as its own problem. You may be asked to write short snippets of XHTML code in the short answer question section. Typically short answer question consists of 3-4 parts. Each part you are asked to accomplish some minor task using 1-5 lines of code. In addition XHTML may show up in conjunction with other questions such as CSS or JS. You may be asked to write some XHTML and then style it using CSS.

6 What to expect Examples of short answer XHTML/HTML5 questions: Question 1. a) Fall 2012 Example of longer XHTML question: Question 1. Winter 2012

7 CSS You should know why it is important to separate structure from style and be able to describe how CSS accomplishes this. Know CSS syntax and how to apply CSS to an XHTML document either by internal style or external stylesheet Understand selector rules Know how basic conflict between rules is resolved Understand the inheritance examples Box model Understand the big website example Understand CSS menus (HW #2, Example in class) You do not need to memorize all CSS properties and their corresponding values, but you should be able to know how to use a property if I give it to you.

8 a) Write a CSS code that specifies that all <span> elements nested inside a <p> element should be in bold and color blue. Hint: You may find the property font-weight useful. p span { color: blue; font-weight:bold;} b) Create a <p> element that belongs to a class red then write CSS code to style all elements in the red class to have red font color. <p class="red">mmmm...red...</p>.red {color: red;}

9 Assume we have the following XHTML: <div id="image_container"> <img id="image1" src="pic1.gif" alt="pic1" /> <img id="image2" src="pic2.gif" alt="pic2" /> </div> a) Write the necessary style instructions to position the two images on top of each other so that initially image1 is on top of image 2.

10 Solution: #image1 { position:absolute; left: 0; top: 0; z-index:1; } #image2 { position:absolute; left: 0; top: 0; z-index:-1; }

11 <div id="image_container"> <img id="image1" src="pic1.gif" alt="pic1" /> <img id="image2" src="pic2.gif" alt="pic2" /> </div> b) Write the necessary style instructions so that as the mouse cursor is moved over the div, image2 becomes the top image.

12 Solution: #image_container:hover img1{z-index:-2;}

13 3. [10pts.] Write the necessary CSS style instructions so that the XHTML code snippet below is rendered as the picture below shows. The container should have width 200px and the two boxes should have dimensions 50px by 50px. In addition when the mouse is moved over the box with the word "RED" the background of that box should turn red and when the mouse is moved over the box with the word "BLUE" the background of that box should turn blue. <div id="container"> <div class="red_box">red</div> <div class="blue_box">blue</div> </div>

14 Solution: <head>... <style type="text/css"> #container{width: 200px;} div.blue_box{width:50px; height:50px; border: 1px solid; float:right;} div.blue_box:hover{background-color:blue;} div.red_box{width:50px; height:50px; border: 1px solid; float: left;} div.red_box:hover{background-color:red;} </style> </head>

15 JavaScript may show up in few ways: A true or false question about a single line of code of JS A short answer question Debugging a given JS program Writing a JS program to solve a given problem

16 Basic JS You should know basic JS that we discussed in the first two JS lectures. Where to place JS and how. What do different placements mean? What is the point of script hiding? JS statements Rules concerning identifiers You should know data types. Number,String,Boolean,Undefined, Null Know how to declare variables. JS is dynamically typed! Many concepts carry over from C++ such as basic operations You should understand type convertions, both coercions and explicit casts. You should know how to concatenate.

17 JS Wrapper objects, input output, control structures, random numbers Wrapper objects You should know the string properties and methods You do not have to know the Number objects wrapper properties or methods Predefined objects Math object Date object Input output document.write alert confirm prompt Control structures Random numbers

18 JS functions You should know how to call a function You should know the basic syntax You should know the facts about functions (pass by value etc. ) Local vs Global variables JS Events onclick attribute for buttons settimeout setinterval

19 JS arrays The different ways of declaring an array Array methods and properties

20 Old exam questions 5. [20pts, a) 5pts, b) 5pts, c) 10pts] JavaScript This problem will guide you through creating a JS program that accomplishes the following task. The user is prompted to enter numbers until he hits cancel. Then, a histogram of these numbers is printed to the browser. For example, if the user inputs the numbers The browser should output the following picture: * * * * * * * * * * * * * * * * * * a) Keep prompting the user for a number and place the number in an array called numbers until the user hits cancel.

21 Old exam questions 5. [20pts, a) 5pts, b) 5pts, c) 10pts] JavaScript This problem will guide you through creating a JS program that accomplishes the following task. The user is prompted to enter numbers until he hits cancel. Then, a histogram of these numbers is printed to the browser. For example, if the user inputs the numbers The browser should output the following picture: * * * * * * * * * * * * * * * * * * a) Keep prompting the user for a number and place the number in an array called numbers until the user hits cancel.

22 Old exam question b) Write a function called max that takes as an argument an array of numbers and returns the max value in the array. Hints: Arrays have a property called length that gives the length of the array. max function will be useful in part c).

23 Old exam question c) Write the function called histogram that takes as an input an array of numbers and then outputs the histogram as in the example above. Hints: To print the histogram you must print an entire row at a time. To space out the columns use the character entity for space, Two spaces suffice to create the space between the columns. You must determine for each column if you need to print a * or not. If you do not need to print a *, then print an instead. One way to write the function is to use nested for loops, with the outer one controlling the number of rows and the inner one outputting each row.

24 JS question a) Write a JavaScript function called text_to_array that prompts the user to enter some phrase, and after that, each word in the phrase is stored in an array called words. Each slot of the array contains one word. (Do not worry about punctuation.) Hint: use the split method to split the text by " ". b) Write a JavaScript function called reverse_sort that takes as an argument the array words and sorts it in reverse lexicographical order. c) Write a JavaScript function called output that takes as argument the array words and writes its content using document.write. The content of each slot should be on a line of its own. Hint: Recall that arrays have a property called length that gives the last index-1 of the array.

25 JS DOM There will likely be a question on the DOM. Refer to: #4 Fall 2014 #4 Winter 2012

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks