Test 2
Computer Science 202 with Horton at University of Alabama - Tuscaloosa
About this deck
By: alexa verroi
Textbook:
HTML: Comprehensive Concepts and Techniques, Fourth Edition (Shelly Cashman Series)
Created: 2010-11-12
Size: 57 flashcards
Views: 126
Textbook:
HTML: Comprehensive Concepts and Techniques, Fourth Edition (Shelly Cashman Series)Created: 2010-11-12
Size: 57 flashcards
Views: 126
About StudyBlue
STUDYBLUE makes things that make you better at school.
Things like online flashcards with photos and audio.
Things like personalized quizzes and friendly reminders about when (and what) to study next.
Think of it as a digital backpack™: access to all of your study materials online and on your phone.
STUDYBLUE exists to make studying efficient and effective for every student, for free. Join us.
“I have used this website for three exams, and I see a huge difference in my test results.”
Naj
Naj
Sign up (free) to study this.
field
any place that a user can respond
form tag
all of a form's elements must be placed inside a <form> tag pair
- Properties:
method= get or post
action= URL or matrix
- Properties:
method= get or post
action= URL or matrix
Input tag
* most elements on forms are created with the input tag
< input type: "____" name="______" value="______">
< input type: "____" name="______" value="______">
- this name used IDs the field inside results but does not appear on the webpage
- For some types, a default answer can be set with the value. For others, the value is set to the server as data
Input types
* one-line textboxes
- type=text
- type=password
* Buttons:
- type=submit
- type=reset
- type=button
* Radio Buttons
- type= radio
( within a set the same name must be used: values should be different)
* Checkboxes
- type=checkbox
( within a set the same name must be used)
Drop-down boxes
also called selection lists
- structured like ordered and unordered lists
<select> tag surrounds the choices
- each answer choice is prefaced by an < option> tag
- use the name and value properties within < option>
- structured like ordered and unordered lists
<select> tag surrounds the choices
- each answer choice is prefaced by an < option> tag
- use the name and value properties within < option>
Comment areas
- created with the < textarea> pair
- use the row and cols properties to set the size
- use the row and cols properties to set the size
Conditional Statements
" a conditional statement is on e that runs only when specific conditions are met"
- the if statement is the most common
ex: if( x = = 10) document.write (" Game Over" );
if the condition is met, the command is executed
if it is not met: the if else comes in play
ex: if (x<10) { document.write ("Try Again");
} else { document.write( "Game Over");}
- the if statement is the most common
ex: if( x = = 10) document.write (" Game Over" );
if the condition is met, the command is executed
if it is not met: the if else comes in play
ex: if (x<10) { document.write ("Try Again");
} else { document.write( "Game Over");}
Loops
" A program loop is a set of instructions that is executed repeatedly" 2 types
- loops set to repeat a specific number of times ( For Loop)
- loops set to repeat as long as a condition is met ( While Loop)
Loop Syntax: Use a counter that tracks the number of times a loop has been run: for (initialization ; condition ; increment) {js commands}
While loops: run the commands as long as the condition is met: while (condition) { js commands}
- loops set to repeat a specific number of times ( For Loop)
- loops set to repeat as long as a condition is met ( While Loop)
Loop Syntax: Use a counter that tracks the number of times a loop has been run: for (initialization ; condition ; increment) {js commands}
While loops: run the commands as long as the condition is met: while (condition) { js commands}
Block-level boxes
width & height are attributes of block-level boxes that can be defined in terms of length (abs. or rel) or a % of the width of the parent element.
The float attribute
can have the values of right and left and be used to position the block-level element against the margin.
CSS
* Cascading Style Sheets
* CSS is the most popular way for web designers to format the appearance of web pages
* Style: is a rule that governs the appearance of an element in a web page
- CSS uses different property names than regular HTML ( e.g. there is no bgcolor property in CSS)
3 kinds of styles
1. inline
2. embedded
3. external
Inline styles
* placed inside HTML tags
- most every HTML tag has the style property
EX:
< h1 style: "color.red">Go Bama</h1>
* An inline style formats only the tag it is placed inside
Embedded
* placed inside the <head> section of a page inside a <style> pair
* syntax- selector( css-attribute: css-value)
ex: a ( background-color: lime)
- This style would format all of the hyperlinks in the webpage
External Styles
*are placed inside a CSS file
* to use an external stylesheet you must put linking information in the <head> of the webpage
* The CSS file contains the selectors and declaration lines only
* External style sheets are used for websites with multiple pages that should have the same formatting
Conflicting & merging styles
When styles conflice, the one closest to the tag prevails
* Inline overrides embedded> embedded overrides external
General rule: When styles do not conflict, their declaration are both used ( merged)
descendent element
an element that lies within another element
parent element
an element that contains another element
inheritance
the styles defined for each parent tag a transferred to the tag's decendants
- inheritance can be overridden by specifying a more specific style
Classes
- a class is a tag that has been given a name
- the name can then be used as a selector so that formatting may be applied
- different kinds of elements can be members of a class
merging styles
when styles do not conflict, their declaration are both used
contextual selectors
- ex: suppose you want all boldface text to be displayed in blue ( you would use)
B (cold:blue)
- ex2: suppose that you want only the bold face used in a list items to be blue. Contextual selector can look like
U B (color:blue)
<DIV> and <SPAN>
- these tags are used to mark text so that formatting can be applied.
- <div> is generally used for block elements while < span> is used for a single letter, word, or phrase
- divs and spans can be given class names too
ex: <DIV CLASS=name_it> This is a really long paragraph... this is it. <DIV>
<SPAN CLASS=name_it> NOTICE ME< /SPAN>
Array
The array is created with the statement new Array with a name. Ex.
coin = new Array();
coin[0] = "heads.jpg";
coin[1] = "tails.jpg";
Expressions and operators
+,-,*,/,+ +,- -,=,= = ,!=,& &, | |
+ arithmetic- adds 2 values together
- arithmetic- subtracts one values from other
* arithmetic-multiplies 2 values together
/ arithmetic- divides one value by another
+ + arithmetic- increment operator, increases by one
- - arithmetic- decrement operator, decreases by one
= assignment- assigns the value of the variable on the right to the variable on the left
= = comparison - compares the variables and returns true if equal
!= comparison- compares the variables and returns true if not equal
& & Logical- returns true if boeth expressions are true
| | Logical- returns true if either expression is true
Font Family
Allows you to specify a font face in your web page
2 TYPES:
* specific font
* generic font--- general description of the font type
-serif, sans serif, monospace, cursive, fantasy
Font size
1. As a unit of length ( absolute or relative)
- absolute: whole numbers or decimals
- relative: expresses size relative to the size of standard characters
- pixels
2. Using keyword description
- xx-small,x-small,small, medium, large, x-large
3. As a percentage of the parent element
4. Using a keyword expressing the size relative to the parent element
- larger, smaller
Specifying word, letter, and line spacing
word-spacing & letter- spacing--" normal" or value of in, mm, cm
line-height- specific length, a percentage of the font size
Font style and widths
style- normal, italic
weight- thickness bold ex
Text aligning
left, right, center, justify
- indenting
Text attributes
text-decoration- normal, underline, overline, line-through
text-transform- none, capitalize, uppercase, lowercase
font-variant- small caps
MouseOvers
A common effect seen on the web is to change an image when that image is moused-over. This effect is often termed as a "rollover". The rollover changes the source for the image. JavaScript uses two event handlers to produce this effect: onMouseOver and onMouseOut
MouseOvers Pt. 2
* The effect is created by two functions and two images. The functions are called on the events of the mouse pointer movement on and off the image. The <IMG> tag puts the default image on the page and the <A> tag is used to update the display in the event of a mouseover. The alt property of the image tag is used to provide a "tool tip"- like image
Question Marks
<script language="JavaScript"> var Car=8; document.write("Dale Jr. races car number" + Car);</script>
^ EQUALS: Dale Jr. races car number 8
<script language="JavaScript"> var Car=8; document.write("Dale Jr. races car number" + "Car");</script>
^ EQUALs: Dale Jr. races car number Car
Color in CSS
1. Color name
2. Hexadecimal RGB color value
3. Decimal RGB color value
4. A percentage of the RGB color value
Background color attribute
* can apply not only to the page background, but to almost any element in a web page
Background image attribute
* background-image: url( filename)
* background images can not only apply to page backgrounds, but almost any element in your web page
CSS tiling actions (images)
1. background-repeat:repeat ---- full tile
2. background-repeat:repeat-x ----- horizontal tile
3. background-repeat:repeat-y ----- vertical tile
4. background- repeat:no-repeat ----- image placed once( no tiling)
Background position
horizontal_place vertical_place expressed as distance from the upper left corner of display in length, %, or with top, bottom, center, left right
* Can also enable the background image to stay stationary or scroll along with the page contents
background-attachment: scroll or fixed
The background attribute
similar to the font attribute, you can pool the background attributes together; you can also use an abbreviated form which includes the background attribute followed by the values needed
List styles
CSs allows you to control the type of labels attached to list items and how the labels are positioned in relation to the text.
- you can pool the attributes together
** look up values for list-style-type attribute in figure 7-39
** contextual selectors can be used to format the outline levels of a list in figure 7-40
Image file can be used as labels: list-style-image:url(filename)
The position of the label in relation to the list item block can be controlled:
list-style-position: inside or outside
Formatting hypertext links
All of the text and font attributes can apply to the A selector
One popular link formatting trick is to remove the underline from a hypertext link: A{ text-decoration: none}
Display states of a hyperlink can be specified:
* A:visited { }
* A:link { }
* A:active { }
* A:hover { }
Functions
* a function is a NAMEd series of commands that performs an action or calculates a value
* A function must have a name. The naming rules are the same for functions as for values
Function Syntax
* a function contains the function keyword, the function name, parameter and the commands
function: bama{ }
document.write ("Roll Tide") >>>> calling the bama function would cause the words Roll Tide to print on the page
More on functions
* once your webpage contains the code for a function, the function is ready to use
* The function WON'T actually do anything until you call the function
* you call a function by stating its name
Events
An event is an occurrence of something or an action that the browser can recognize
- onclick, onLoad, onMouseOver
Events handler
* is a code that you set up a response to an event
* often functions are set up as event handlers ( to execute in response to an event)
JavaScript
* javaScript is a scripting language that we can use on an HTML webpage to bring in dynamic content
JavaScript Syntax
* javascript is case sensitive
* improper spacing or carriage returns can cause problems in JavaScript
* JavaScript code can go in the <head> or the <body> of a webpage
* JavaScript code must be contained inside a <script> tag pair
JavaScript Fundamentals
* object-based language
-document
-window
-form
-date
-image
-math
-navigator
** more on page 371
properties are attributes of objects that describe characteristics
EX: <script> document.bgColor="red" </script>
JavaScript Methods
Methods are actions or behaviors that an object can do
EX: <script> document.write("Alabama is number 1 this season); </script>
* some methods require additional information, called an argument. In the above example the text specifies the value to be written on the page
Variables
* Just like in math, JavaScript variable is a named element used to store and retrieve information
Naming Rules:
1. Name must begin with a letter or _
2. Name can contain letters, numerals or _ characters
3. Name may not use spaces or other punctuation
4. Name must not contain reserved words ( such as apple, shirt, dog)
Creating variables
Types:
1. Numeric
2. String- anything enclosed in quotes
3. Null- no value
4. Boolean- used for true/false testing conditions
* declaring a variable, storing a string in it, and retreaving the information with the variable and printing it on screen
<script>
var tvshow=“Sportcenter”;
document.write(“Every evening I enjoy ” + tvshow);
</script>
* With Java, when you need to combine other text with variable output use the + symbol to concatenate ( connect or link in a series or chain)
Using the Prompt( ) method
* the prompt method is associated with the window object
window.prompt(“What is your favorite color?”, “crimson”);
To store the answer, set a variable.
var favcolor=window.prompt(“What is your favorite color?”, “crimson”);
Working with the Date object
* Date ( ) is built-in JavaScript date object
* we can pass a date value into the parenthesis, or if we leave it empty, the browser will use the current date and time
- if you do put a date in the date is considered static
The date object's get methods
* dayo=timex.getdate ( );
Other methods:
*getday ( returns a numerical day of the week corresponding to sunday to saturday, starts at 0)
*getMonth( returns a numerical month of the year, starts at 0)
*get Hours
*getMinutes
*getSeconds
*getFullYear( returns a 4 digit year)
*getTime(returns the # of miliseconds elapsed since Dec. 31, 1969 at 6 p.m)< KNOW THIS DATE
About this deck
By: alexa verroi
Textbook: HTML: Comprehensive Concepts and Techniques, Fourth Edition (Shelly Cashman Series)
Created: 2010-11-12
Size: 57 flashcards
Views: 126
Textbook:
HTML: Comprehensive Concepts and Techniques, Fourth Edition (Shelly Cashman Series)Created: 2010-11-12
Size: 57 flashcards
Views: 126
About StudyBlue
STUDYBLUE makes things that make you better at school.
Things like online flashcards with photos and audio.
Things like personalized quizzes and friendly reminders about when (and what) to study next.
Think of it as a digital backpack™: access to all of your study materials online and on your phone.
STUDYBLUE exists to make studying efficient and effective for every student, for free. Join us.
“I have used this website for three exams, and I see a huge difference in my test results.”
Naj
Naj