CSCE 102 ―EXAM Study Guide No hats are allowed during the test so don’t wear a hat on test days. You must bring your Id to the test. Cascading Style sheets • Setting the style with CSS • Using local styles • Using classes and ids with style sheets User defined tags • Using <div> and <span> Images • *Using images Anchor Tag • *Creating a hyperlink using the anchor element (<a ... >. . . </a>) • When is the path name necessary? • Creating an image that is a link Tables • Creating a table • Using colspan and rowspan *JavaScript • What Type of language is JavaScript? • Data Types; examples, using • *Alerts, prompts (built in functions (Methods)of the windows object) • Creating a button using HTML and clicking it to execute JavaScript • Using event handlers to execute JavaScript from within HTML elements • *Changing CSS properties using JavaScript • Objects and properties • Which are the objects, which are the properties? Example: document.body.style. backgroundColor object object object property • *Writing functions • The purpose of functions • Naming and using functions • Executing functions • What is a parameter? How and why are they used?(in class notes) • *Using parameters • Purpose of parameters • What is a variable? • Naming variables • *Using the assignment statement • The properties of the document object • Changing properties of the page document.body.style.backgroundColor document.body.style.color • *Concatenation • The methods toLowerCase() toUpperCase() • * Using this. To change the current element • *Using getElementById in your notes and in lab assignment • *innerHTML − Changing the text in HTML elements on that have already been loaded on the page, in your notes and on lab assignment *document.write • How to use it. *Image rollover • Creating image rollovers *Textboxes • Know how to create a textbox in HTML • *Know how to access the information in a textbox • *Know how to display new information in a textbox *Math with textboxes • *Know what parseFloat() does and how and why to use it • addition, subtraction, multiplication, and division • Math methods (Math.) from your notes *If statements • Write the code to create an if statement. • Know how to use both relational and logical operators • *Know which part of the code is executed if the condition in the if statement is true/false. *Loops • For loops • While loops • Do while loops • Do you understand the code from class and from the last lab? Slide Show • In class notes Check boxes • In class notes Radio buttons, check boxes, and pull down menus; Caution code copied from word may not work. function Jasmine(){ if (document.formcat.cat[1].checked) { alert("that is correct") } else { alert("Please try again") } } function jordan(){ if (document.formpig.pig.selectedIndex==2) { alert ("that is correct") } else{ alert("Please try agian") } } </script> </head> <body> <form name="formdog" id="formdog" action=""> <h2>Select a valid variable name</h2> <input type="checkbox" name="dog1" id="dog1">Dog<br> <input type="checkbox" name="dog2" id="dog2">7days<br> <input type="checkbox" name="dog3" id="dog3">alert<br> <input type="checkbox" name="dog4" id="dog4">my total<br> <input type="checkbox" name="dog5" id="dog5">who<br> <input type="button" name="b1" id="b1" value="click" onclick="isitvalid()"> </form> <form name="formcat" id="formcat" action=""> <h2>Select the event handler</h2> <input type="radio" name="cat" id="cat" onclick="Jasmine()">function<br> <input type="radio" name="cat" id="cat" onclick="Jasmine()">onmouseover<br> <input type="radio" name="cat" id="cat" onclick="Jasmine()" >if<br> <input type="radio" name="cat" id="cat" onclick="Jasmine()">else<br> </form> <form name="formpig" id="formpig" action=""> <h2> Select a event handler from the pull down menu</h2> <select name="pig" id="pig"> <option>alert </option> <option>atl </option> <option> onmouseover </option> <option>if </option> </select> <input type="button" name="b2" id="b2" value="click" onclick="jordan()"> </form> • Difference between the checkboxes and the radio buttons Coin Flip Problem − discussed in class Caution code copied from word may not work. <form name="x" id="x"> <h2> My Random Number </h2> <input type="text" name="t1" id="t1"> <input type="button" name="b1" id="b1" value="coinflip" onclick="coinflip()"> <input type="text" name="t2" id="t2"> </form> <img src="question.jpg" alt="heads or tails" id="flip"> <script> var rannum, roundednum function coinflip() {rannum=Math.random(); document.getElementById("t1").value=rannum; roundednum=Math.round(rannum); document.getElementById("t2").value=roundednum; if (roundednum==1) {document.getElementById("flip").src="coin_heads.bmp" } else {document.getElementById("flip").src="coin_tails.bmp" } } </script> Guess the Number Problem – mentioned in class, on the class webpage *Understanding the logic in code What to study: Your class notes (code used in class), the study guide, the lab assignments, the code from the last few labs, our web page, the both text books (DOM- Chapter 2) *It is on the test.