Exam 1 Review - Kutztown University
Download
Report
Transcript Exam 1 Review - Kutztown University
Review 1
csc242 – web programming
Professor John Carelli
Kutztown University
Computer Science Department
World Wide Web
• Two inventions provided standardization for information sharing
• Both in content formatting and transmission
• Developed by Tim Berners-Lee of CERN (European Nuclear Research
Organization)
• HTML
• HyperText Markup Language
• Enables hyperlinked text documents
• HTTP
• HyperText Transfer Protocol
• Communication protocol for sending info across the web
Professor John Carelli
Kutztown University
Computer Science Department
Web Technology
• Web is client/server technology
• Client (web browser)
• requests resources from web servers
• Resource – any object retrieved from a web server, such as an XHTML
document, image, video, audio, Database information, etc.
• Web servers
• Service the request – provide content
• Use specialized software (apache, IIS)
Professor John Carelli
Kutztown University
Computer Science Department
XHTML
• XHTML derived from HTML
• Based on XML (Extensible Markup Language)
• Tag based
• Must have both open and closing tags
• <xxx> and </xxx>, content is in between
• <xxx />, if no content is needed
• May contain “attributes”
• Syntax is: <xxx attribute1=“value1” attribute2=“value2”>
• Web page formatting (rendering) depends on tags
• Not the format of the html code itself
Professor John Carelli
Kutztown University
Computer Science Department
Some XHTML Tags (note: incomplete!)
•
•
•
•
•
•
•
<html> - main html tag
<head> - html header section
<body> - web page body
<meta> - page keywords/description
<h1> thru <h6> - six levels of headers
<p> - paragraph
<a> - create links with href attribute
• href, mailto: …
• <ol> <ul> - ordered, unordered lists
• <div> - division/section of code
Professor John Carelli
Kutztown University
• <span> - inline section of code
• <title> - page title
• <img> - image
• <hr /> - horizontal rule
• <br /> - break, new line
• Various table tags…
Computer Science Department
More XHTML
• Tags can have attributes
• <xxx attribute=“value” …
• One attribute is an id
• <xxx id=“something” …
• Can be linked in an anchor <a href=“#something” …
• Block vs. inline elements
• Block: starts a new line, takes up entire width (p, h#, div, …)
• Inline: no new line, only takes up what’s needed (span, a, img, …)
• Special characters
• &em; < © &del; ⊃ ⊂ &#num;
Professor John Carelli
Kutztown University
Computer Science Department
HTML Tables
• Tags for tables
•
•
•
•
•
•
•
•
•
• Some attributes
• align
• width, border
<caption> table caption
<table> - create a table
<thead> - table header
<tfoot> - table footer
<tbody> - table body
<tr> - table row
<th> - table header cell
<td> - table data cell
<(row|column)span> - merge
Professor John Carelli
• pixels or percent…
Kutztown University
Computer Science Department
CSS – Cascading Style Sheets
• XHTML defines a web page structure
• Items and placement
• CSS defines the appearance
• Purpose is to separate the structure from the presentation
• Note: Browsers have default settings than can be overridden!
Professor John Carelli
Kutztown University
Computer Science Department
CSS – three main approaches
• inline
• style directives located with the items they affect
• embedded “style sheet”
• a style section included in the web page affects elements on just that page
• external “style sheet”
• separate file imported into a web page
• used to share appearance among pages
• Provide uniformity of appearance among pages in a web site
Professor John Carelli
Kutztown University
Computer Science Department
CSS Inline Style
• Style attribute is embedded in HTML tag
• Syntax:
• style = “attribute1: value; attribute2: value2; …”
• Example:
• <p style = "font-size: 20pt; color: red”>
• Only affects that tag
Professor John Carelli
Kutztown University
Computer Science Department
CSS - Embedded
• defined with <style type=“text/css”> tag
• when placed in <head> it applies to all matching elements in document
• type=“text/css” is MIME format (Multipurpose Internet Mail Extensions)
• Rules are placed in the style tag section, syntax is:
• ruleName { attribute1: value1, value2; attribute2: value }
• rules apply to specified tag or ccs selector types
Professor John Carelli
Kutztown University
Computer Science Department
CSS Selectors (see online examples)
• Can be an explicit HTML tag
• .classname
• Invoked in an HTML tag with the class attribute
• <xxx class=“classname”…
• Can be tag specific
• a.nodec
• Comma separated to apply to multiple items
• h1, em { text-decoration: underline }
• Space separated for embedded items
• ul ul { font-size: .8em }
• :pseudoclass (like a:hover)
Professor John Carelli
Kutztown University
Computer Science Department
CSS External Style Sheet
• CSS rules are placed in a separate file
• Invoked in the HTML file with a <link> tag
• <link rel=”stylesheet” type=”text/css” href=”styles.css” />
• rel – specifies the relationship between the HTML and other doc
• type – MIME type style sheet
• href – URL for the referenced document
Professor John Carelli
Kutztown University
Computer Science Department
CSS Inheritance and Precedence
• Inheritance
• unspecified style elements are inherited from higher level object
• specificity
• lower level element styles override higher level definitions
• Precedence
• in the following order
• author (the page itself – person who wrote it)
• user (person viewing page)
• user agent (the browser)
Professor John Carelli
Kutztown University
Computer Science Department
Box Model and element positioning
All block-level XHTML are rendered based on a “Box Model”
• Can be controlled with CSS
Boxes have (from outside in)
• margin, border, padding
Border is around the element itself
• Border has a thickness
• margin defined the distance between the outside of the border and other external
elements
• padding defines the distance between the inside of the border and internal content
Positioning and the float element
• float removes the element from the normal placement flow
• Element can be “floated” right or left
Professor John Carelli
Kutztown University
Computer Science Department
Javascript
• Object-oriented, interpreted, programming (scripting) language
• Interpreted – no compilation step required
• Code is read, syntax checked, and executed line-by-line
• Language is “loosely typed”
• Variables must be declared BUT no there are no explicit variable types
• Declaration:
var x1, x2 , x3;
• Variable type is inferred based on usage
• Type may change as program is executed (dynamically typed)
• Otherwise, language constructs generally follow C/C++ conventions
Professor John Carelli
Kutztown University
Computer Science Department
Javascript general constructs
• var for variable declarations
var x1, x2 , x3;
• Uninitialized variables have value undefined
• C/C++ constructs
• do, for, while, switch, if
• logical operators: && || !
• 0/1 and empty non-empty strings evaluate to Boolean false/true
• for (i in object) - to loop over members of an object
• Functions defined with function keyword
• Local/global variables
Professor John Carelli
Kutztown University
Computer Science Department
Javascript Arrays
• Two ways to define:
•
•
•
•
• Associative Arrays:
• Arbitrary array indicies
• capitals["China"] = "Beijing";
var n = new Array(3);
var n = [3];
Will grow automatically
Can be multidimensional
•
var population = {
"Beijing": 20693000,
"Moscow": 11541000,
"Washington": 658893
};
• Initializing:
• var n = new Array (1, 2, 3, 4, 5);
• var n = [ 1, 2, 3, 4, 5 ];
Professor John Carelli
or define with JSON notation
Kutztown University
Computer Science Department
Javascript Objects
document object
• document.write() and document.writeln()
window object
• window.prompt (also window.alert() and window.confirm())
Date
• var d= new Date()
• many methods for getting/formatting dates and time
• Similar for Arrays
• X.length, X.sort(), etc…
Professor John Carelli
Kutztown University
Computer Science Department
More methods and functions
• Methods for variables interpreted as strings
• indexof(), split(), join(), etc…
• For numbers
• X.toString()
• Global functions:
• encodeURI, eval, isFinite, isNaN, parseInt, parseFloat, decodeURI
Professor John Carelli
Kutztown University
Computer Science Department