CSCE Test 2
Universal Selector, Group Selector, Descendant Selector
* , article header{} descendant uses spaces group uses commmas
assembler
-assembly language uses an assembler to convert it into machine code and then back.
title element
-defines a title in the browser tab -provides a title for the page when it is added to favorites -displays a title for the page in search engine results
ways to put in webpage
-external file -within the script element -attribute value of an event handler
examples of properties
-font-size: sets the size of the font -font-weight: configures the boldness of the test -font-style: used to configure text displayed in italics -text-transform: configures the capitalization of text -line-height: modifies the default height of a line of text, 200% double spaces text -font-varient: specifies whether or not a text should be displayed in a small-caps font -border: sets all the border properties in one declaration with border-width, border-style, and border-color
using background images
-place images in the body of CSS styling page background-image background-position background-repeat background-attachment
event handler
-software routine that processes actions such as keystrokes and mouse movements: onclick, onmouseover
What file extensions can be used to create an HTML document?
.html .htm
comment in CSS
/*comment*/ /comment/
special entity characters
<> $; characters reserved in html
linking to other files you created
<a href="All_Index.html">go to Lab 1 Assignment</a>
Creating an image that is a link (using an <img . . . > tag inside an <a> element)
<a href="dog.jpg"><img src="dog.jpg" alt="dog"></a>
creating image as a link
<a href="http://google.com" <img src="babyJ2.JPG" alt="baby with a hat" ></a>
creating hyperlink using anchor element
<a href="http://google.com"> Go to Google</a>
hyperlink
<a> used to link one page to another
nesting elements
<em><strong></strong></em>
*Be able to write the code, to solve a problem, by making a web page interactive using an event handler
<h1 onclick="alert('Make an A'); this.style.color='lime'; this.style.backgroundColor='blue'; this.style.textDecoration='underline';">This class is so much fun!</h1> <h4 onmouseover="this.style.color='yellow';document.body.style.backgroundColor='blue';>I learn so much about technology</h4> <h3 onmouseover="this.style.color='lime';document.getElementById('bradyn').style.fontSize='57pt';">Do not fail this class</h3> <h1 onclick="newColor=prompt('what is your favorite color?');document.body.style.backgroundColor=newColor">Change the color</h1>
Img map: map tags, area tags
<head> <map name="campus" id="campus"> <area href="dog.jpg" shape="circle" coords="x1,y1,r" alt="russel" title="russel"> </head> <body> <img src="dog2.jpg" alt="dog2" usemap="#campus"> </body>
using an image from the web you did not save
<img src="copied url" alt="Allie">
JavaScript: How to create an image rollover. Be able to write the code to solve the problem.
<img src="whale1.jpg alt="whale1 id="whale1" onmouseover="this.src='whale2.jpg'; document.getElementById('whale2').src='whale1.jpg';" onmouseout="this.src='whale1.jpg'; document.getElementById('whale2').src='whale2.jpg';"> <img src="dog1.jpg" alt="dog" id="dog" onmouseover="document.getElementById('cat').src='mountain.jpg';"> <img src="cat1" alt="cat" id="cat" onmouseover="document.getElementById('dog').src='horse.jpg';"> *changes the cat to a mountain and the dog to a horse
How to create a button (input element)
<input type="button" name="button1" id="b1" value="add" onclick="addition( )"> <input type="button" name="b2" id="b2" value="change background to purple" onclick="document. body.style.backgroundColor='purple'">
How to create a text box (input element)
<input type="text" name="txtbox1">
attribute
<input type="text"> the type="text" is an attribute
2 ways to associate a label with a textbox.
<label for="t1">Name:</label> <input type="text" name="t1" id=" "> Or <label>Name:<input type="text" name="t1" id="t1"></label>
nested list
<ol> <li>1.Dogs</li> <li>2.Cats</li> <ul> <li>California Spangles</li> <li> Cheetoh</li> </ul> <li>3.Horses</li> </ol>
JavaScript: Concatenation ("Hello" + "my name")
<script> alert("Hello!"); varname=prompt("What is your name?"; alert(name+"Hello"); </script>
Writing functions: Executing functions
<script> alert("Hi"); function PLACE ( ) { alert("GO!"); } PLACE ( ); </script>
JavaScript: Changing CSS properties with JavaScript
<script> document.getElementById("p2").style.color = "blue"; </script>
Know how to access the information in a textbox and to display new information in a textbox
<script> function addition( ){ document.form1.textbox3.value= parseFloat(document.form1.textbox2.value)+ parseFloat(document.form1.textbox1.value);} </script>
JavaScript: Alerts, prompts (built in functions of the windows object)
<script> function changeColor( ) { alert("Click button to change text color"); var color = prompt("Enter a color"); } </script> <script> alert("Hi"); function PLACE( ) { alert("GO!"); } PLACE( ) </script> to call alert: <h1 onclick="PLACE">
math with text boxes: addition, subtraction, multiplication, division, squareroot of a number, power of a number
<script> function multiply ( ){ document.form1.textbox3.value= parseFloat(document.form1.textbox1.value)*parseFloat(document.form1.textbox2.value); } </script>
JavaScript: How to swap 2 images using a JavaScript function
<script> function swap(x,y) { var temp=document.getElementById('image1').src; document.getElementById('image2').src; document.getElementById('image2').src=temp; } </script> <img src="dog.jpg" id="image1" onmouseover="swap('dog.jpg','dog2.jpg')"> <img src="dog2.jpg" id="image2" onmouseover="swap('dog2.jpg','dog.jpg')">
tables: using colspan/rowspan
<td colspan="#"></td>
innerHTML
<td onlick="this.innerHTML='pear'">Apple</td> <script> function changeImage(Image){ document.getElementById('description'); innerHTML=image,alt; </script> <img src="dog1" alt="dog" onclick="changeImage(this)"> *changes in your document what you set the innerHTML equal to *will change picture of dog to the word dog
images in tables
<th>Animals</th> <tr> <td><img src="dog.jpg" alt="dog"></td> </tr>
buttons in tables
<th>Animals</th> <tr> <td><input type="button" name="b1" value="change background color to pink" onclick="body.style.backgroundColor='pink';"></td> </tr>
ondblclick onclick onmouseover onmouseout
<tr><th><element ondblclick="this.style.fontSize='16pt';"></th></tr> <h1 onclick="this.style.textDecoration='underline';document.getElementById('p2').style.backgroundColor='green';">heading</h1> <img src="dog.jpg" alt="dog" id="dog" onmouseover="document.getElementById('fish').src='images/mountain.jpg';"> <img src="images/cat.jpg" alt="cat" id="cat" onmouseout="document.getElementById('dog').src='dog.jpg'>
what are properties
CSS properties are used when adding style with CSS. Example: p {color:red;background-color:yellow;text-indent:10%;} h2 {color:purple;font-size:130pt}
three types of css
Internal/embedded: defined in the head section of a web page. these style instructions apply to the entire web page document External: coded in a separate text file, called an external style sheet. Its associated with the web page by coding a link element in the head section. local/inline: put in style=blah, coded in the body of the web page as an attribute of an HTML tag. They style only applies to the specific element that contains it as an attribute.
Does an HTML file (filename.html) ever actually contain an image?
No they are stored as separate files that are referenced in the HTML
how do we separate presentation from structure?
Structures in HTML, presentation in CSS
inheritance
The type that takes precedence and inherits from and overrides the others is the one that is listed last. So if the style element occurs after the link element the internal override the external.
logical errors
Undesired output (no output) when a program is executed
using document.getElementById("theIdGoesHere").value and document.nameofform.nameoftextbox.value
Way #1: function addition( ){ document.form1.textbox3.value= parseFloat(document.form1.textbox2.value)+ parseFloat(document.form1.textbox1.value);} Way#2: function subtraction( ){ document.getElementById('t3').value= parseFloat(document.getElementById('t1').value)-parseFloat(document.getElementById('t2').value)
syntax
a sequence of characters in any programming language
computer program
a set of instructions to perform a specific task. Ex: (someone who doesn't know how to bake a cake) 1.Mix ingredients, 2. Put it in the oven 3. Ready **Algorithm (someone who does know how to bake cake) 1. Mix eggs, flour, water, vanilla, sugar 2. Preheat the oven to 350 F 3. bake for 30min 4. Ready **computer program
external style sheet
a text file with a .css file extension that contains CSS style rules. Its associated with a web page using the link element -provides a way for multiple web pages to be associated with the same external style sheet -does not contain any HTML tags-only CSS style rules <a hreff="proj1.css">
JavaScript: Assignment Statement Example:
a=5 x=7
difference between algorithm and computer program
alg- a step by step procedure to solve a problem. computer program- a set of instructions to perform a task Ex: (someone who doesn't know how to bake a cake) 1.Mix ingredients, 2. Put it in the oven 3.Ready **Algorithm (someone who does know how to bake cake) 1. Mix eggs, flour, water, vanilla, sugar 2. Preheat the oven to 350 F 3. bake for 30min 4. Ready **computer program
fragment identifier
an HTML element with an id attribute
syntax errors
an error in the syntax of a sequence of characters that is intended to be written in a particular programming language
classes
apply a CSS declaration to one or more areas on a web page. -when setting a style for a class, configure the class name as the selector. Place a period in front of the class name in the style sheet
internal style sheet
apply to the entire document and are placed within a style element located in the head section of a web page.
positioning background images
background-repeat:repeat-y (vertical repeat) repeat-x (horizontal repeat) no-repeat background-position:left, top, center, bottom, and right
block-level elements vs phrase inline
block-level:always starts new line ex: <div><h1-6><p> inline: can be placed inline
The input element
can be inside a form or used without the form. Document.formName.ElementName.value= for element inside a form Document.getElementById('Id')= for element outside a form
psuedo classes
can be used to apply a special effect to a selector: (Love Very Hairy Apes) a:link a:visited a:hover a:active
target attribute
can configure one on an anchor tag with target="_blank" to open a hyperlink in a new browser window or browser tag
shapes: circle, rect, poly- The coordinates for each shape
circle-x,y,r rect-x1,y1,x2,y2 poly-x1,y1,x2,y2,x3,y3
Using color hexadecimal value representation
colors are displayed combining red, green, and blue -written as 3 double digit numbers, starting with a #sign -highest value is f, lowest value is 0
JavaScript: What is a variable?
containers for storing data values.
span
defines a section on a web page that is displayed inline without empty space above and below. Use when you need to format an area that is contained within another, such as within a <p>, <blockquote>, or <div> element
JavaScript: Changing properties of the page
document.body.style.backgroundColor='black'; document.body.style.color,
JavaScript: getElementById, and this. In your notes and in Lab Assignments
document.getElementById <th ondblclick="this.style.fontSize='16pt';">font size</th>
Writing functions: Naming, defining, and calling functions
function bgcolor( ) *name=bgcolor-can name it anything can define a function to take as many arguments as you want <script> function multiply(num1,num2) { var total=num1*num2; alert(total); } </script>
JavaScript: Clicking an element and expanding the image on the same page.
function changeImage(image,x) document.getElementById('me').src=x; <tr> <td><img src="thumbnails/iceland.thumb.jpg" alt="iceland" onclick="changeImage(this,thumbnails/iceland.jpg>
Types of images gif/jpeg/png
gif: best used for flat line drawings containing mostly solid tones and simple images such as clip art, contains 256 colors, on browser it will contain the same pixels as the original jpeg: best used for photographs, contains 16.7 million colors, on the browser some pixels will be lost png: combine the best of GIF and JPEG images and will be a replacement for GIF in the future, none of the original image is lost
body
heading, paragraph,
element
html tag has a greater than or less than sign, <head> </head>. An element is the content between the opening and closing tags which includes the tags.
Writing functions: The purpose of functions
if you want to re-use the same piece of code more than once
img element in relation to an image map
image map in style section image element in body
Label element
labels text boxes and buttons on webpage
programming languages
low level-1.machine language, 0's and 1's 2.assembly language:uses an assembler to convert it to machine code and back high level-1.programming language, uses a compiler to convert to machine code 2.scripting language
What type of language is Hyper Text Mark-up Language?
markup language
what purpose of html
markup language for describing web documents
computer languages
markup language: html
JavaScript: naming variables
must begin with letter x=1 y=2 z=x+y
empty/void element
no closing tag <img>, <br>
comment tag
not displayed in browser, can use to comment on code
what type of language is javascript
scripting language
JavaScript: Two types of JavaScript comments
single line comment: //textyouwant multiline: /*textyouwant*/
is a browser hardware or software?
software
software
something you can not see. comprised of computer programs, libraries, and non-executable data -Libraries hold definitions and can be used many times
span vs div
span is an inline element div is block-level use div as a containing element
Tables: <th> <tr> <td>
table heading table row table data
hardware
the physical components of a computer system Ex. Hard drive, monitor, keyboard, mouse, CPU (central processing unit or tower, contains the hardrive)
What ties the image to the map?
the usemap element
What is a parameter? How and why are they used?(in class notes)
thing inside parathases of function, pass data to a function
heading
title, style, script, meta
Know what parseFloat( ) does and how and why to use it
transfers a string to actual numbers, you can add two strings so when you use parsefloat it get rid of quoatations so you are just adding the numbers and your outcome is a number parseFloat converts text to a number, so you get an integer. The original two numbers will have parenthesis around them, the answer will not, therefore no parseFloat needed
compiler/interpretor
translates high level to binary code so computer can execute it -looks for errors in syntax (compile errors) -converts source code into object code
div element
used to configure a generic structural area or "division" on a web page as a block display with empty space above and below. Used when you need to format an area of a web page that may contain other block display elements such as headings, paragraphs, unordered lists, and even other div elements
using id selector to create different styles
used to identify and apply a CSS rule uniquely to a single area on a web page -only applied once per web page -when setting a style for an id, place a hash mark (#) in front of the id name in the style sheet
what are cascading style sheets?
used to separate the presentation style of a web page from the information on the web page. Used to configure text, color, and page layout
when is the path name needed?
when a file is in a different directory
Passing parameters to functions
when calling a function you put an argument where the parameter was already defined and the function plugs it into the equation
when would local style be used?
when you are using CSS, but a page or a section needs a special style, specific to one tag in a page
structural/semantic elements:
• article element • section element(contains a header) • nav element(links at top of page to help navigate) • header element
