CS80 Module 3

Control Structures

The sequence (used by JavaScript), selection, and repetition structures, which control the flow of a program's logic; also called logic structures

DOM Nodes

"Node" is an interface that is implemented by multiple other objects, including "document" and "element". All objects implementing the "Node" interface can be treated similarly. The term "node" therefore (in the DOM context) means any object that implements the "Node" interface. Most commonly that is an element object representing a HTML element.

CSS Comments

/* this is a comment */

JavaScript Comments

// Used frequently to identify the meaning of a variable and continues until the end of the line (aka no closing tag). You can also write multiline comments with: /* text here across multiple lines */

HTTP

1) A URL identifying the target server and resource (e.g. an HTML file, a particular data point on the server, or a tool to run). 2) A method that defines the required action (for example, to get a file or to save or update some data). The different methods/verbs and their associated actions are listed below: GET: Get a specific resource (e.g. an HTML file containing information about a product, or a list of products). POST: Create a new resource (e.g. add a new article to a wiki, add a new contact to a database). HEAD: Get the metadata information about a specific resource without getting the body like GET would. You might for example use a HEAD request to find out the last time a resource was updated, and then only use the (more "expensive") GET request to download the resource if it has changed. PUT: Update an existing resource (or create a new one if it doesn't exist). DELETE: Delete the specified resource. TRACE, OPTIONS, CONNECT, PATCH: These verbs are for less common/advanced tasks, so we won't cover them here. Additional information can be encoded with the request (for example, HTML form data). Information can be encoded as: URL parameters: GET requests encode data in the URL sent to the server by adding name/value pairs onto the end of it — for example http://mysite.com?name=Fred&age=11. You always have a question mark (?) separating the rest of the URL from the URL parameters, an equals sign (=) separating each name from its associated value, and an ampersand (&) separating each pair. URL parameters are inherently "insecure" as they can be changed by users and then resubmitted. As a result URL parameters/GET requests are not used for requests that update data on the server. POST data. POST requests add new resources, the data for which is encoded within the request body. Client-side cookies. Cookies contain session data about the client, including keys that the server can use to determine their login status and permissions/accesses to resources.

Server Side Programming Use Cases

1) Efficient storage and delivery of information 2) Customized user experience (store user data) 3) Control content access 4) Store session/state data (sessions are basically, a mechanism that allows a server to store information on the current user of a site and send different responses based on that information) 5) Notifications & communication (Servers can send general or user-specific notifications through the website itself or via email, SMS, instant messaging, video conversations, or other communications services) 6)Data Analysis (refine data and responses based on data)

Tag used for indicating JavaScript

<script type = "text/javascript"

DBMS

A Database Management System (DBMS) is application software for creating and using a database.

Block

A block statement (or compound statement in other languages) is used to group zero or more statements. The block is delimited by a pair of curly brackets and may optionally be labeled. The purpose of code blocks is to define statements to be executed together. Ex: if (hour < 12) document.write( "h1>Good Morning</h1>" ); //block begins here if ( hour >= 12 ) { //convert to a 12-hour clock hour = hour - 12; //determine whether it is before 6pm if (hour < 6) document.write( "<h1>Good Afternoon</h1>" ); //determine whether it is after 6pm if (hour >= 6) document.write( "<h1>Good Evening</h1>" ); }

XML Namespace

A collection of element and attribute names. Each name space in an XML document must be unique. They are used to designate specifically where elements where elements and attributes are defined in order to avoid naming collisions. ex: <subject>math</subject> <subject>cardiology</subject> converted to: <course:subject>math</course:subject> <medical:subject>cardiology</medical:subject> highschool and medical are the namespace prefixes. A default namespace prefix can be applied to an element for all nested elements ex: <directory xmlns = "urn:deitel:textInfo" xmlns:image = "urn:deitel:imageInfo" <file filename = "book.xml" <description>a book list</description> </file> vs if not applied would be <file filename = "book.xml" <text:description>a book list</text:description> </file>

Databases

A database is simply an organized collection of data. Bottom tier of the three web application tiers

Flowchart

A diagram of the sequence of operations in a computer program or an accounting system

Dynamic Web Server

A dynamic web server consists of a static web server plus extra software, most commonly an application server and a database. We call it "dynamic" because the application server updates the hosted files before sending them to your browser via the HTTP server. For example, to produce the final webpages you see in the browser, the application server might fill an HTML template with contents from a database. Sites like MDN or Wikipedia have many thousands of webpages, but they aren't real HTML documents, only a few HTML templates and a giant database. This setup makes it easier and quicker to maintain and deliver the content.

Primary Key

A field (or group of fields) that uniquely identifies a given entity in a table. Each value in this column is guaranteed to be unique. This value is required and will present an error if duplicated.

Foreign Key

A foreign key is a column in a table that matches the primary-key column in another table.

Callback function

A function specified as part of an event listener; it is written by the programmer but called by the system as the result of an event trigger.

Pseudocode

A high-level description of the actions of a program or algorithm, using a mixture of English and informal programming language syntax

XML

A language used to store files as simple text along with information on how the application software would interpret that text. It creates portable data files vs application dependent. Tags can then be created to access that data for a particular application. Delimitation is completed with start and end tags. Every XML doc must have a root element that contains all other elements. There are tag sets for Web pages (XHTML), math (MathML), chemistry (CML), multimedia, comics, business, ...you name it. XML is extremely popular and powerful. It is open-source, i.e., vendor neutral. You definitely want to try to understand this core Web technology. It may seem a little hard to understand at first. But you know what the HTML tag set is. Now, with XML, many more tags sets are being defined so that data of any type, not just Web pages, can be handled in a portable, application neutral, vendor neutral way.

Relational Database

A logical representation of data that allows the data to be accessed without consideration of the physical structure. A database that represents data as a collection of tables in which all data relationships are represented by common values in related tables. Rows are normally unique (by primary key) but column values may be duplicated between rows.

Loosely Typed Language

A loosely typed language is a programming language that does not require a variable to be defined. When a value is declared in JavaScript, but not given a value then the variable has an undefined value.

Structured Programming

A method of programming which follows rules about selection, sequence, and iteration control structures. This eliminates the goto statements required by previous programs.

Entity Relationship Diagram

A methodology for documenting databases illustrating the relationship between various entities in the database.

Document Object

A platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

Port Number

A port number is used to determine the target server program that should receive this request. Only one server can "listen" for requests on a given port on a given machine. For example, if the port specified is 80, it is sent to the server listening on port 80. This will undoubtedly be a webserver since port 80 is the "well-known port number" for webservers. Note that the port number is not usually specified explicitly in the URL. Instead, it is implied by the protocol. For example, if the protocol is http, a default port number of 80 is implied. So, for example, the URL http://www.smc.edu, which does not specify a port number, is equivalent to http://www.smc.edu:80

Algorithm

A procedure for solving a problem in terms of: 1. The actions to be executed, and 2. The order in which the actions are to be executed

Meta-Language

A program can be designed to read, generate, analyze or transform other programs, and even modify itself while running.

XML Parser

A program that can format an XML file so it can appear on the screen of a computer, a wireless PDA, a mobile phone, or other device. Checks XML documents for errors in syntax and content.

em

A relative-length measurement which, as a measurement means the font's uppercase M height. This is the most frequently used font measurement.

ex

A relative-length measurement, usually set to a lowercase's x height.

Percentage

A relative-length measurement. Ex: font-size: 150%

Control-Statement Stacking

A set of control statements in sequence. The exit point of one control statement is connected to the entry point of the next control statement in sequence.

Anonymous Function

A set of related statements with no name assigned to it. Created in the same way as any other function, but with no identifier after the keyword function. This notation is useful when creating a function for the sole purpose of assigning it to an event handler. It's also useful when you must provide arguments to the function, since you cannot provide a function call as the second argument without JS calling the function.

Multiple-Selection Statement

A statement, such as the else if statement, that selects between two different actions or group of actions.

Single-Selection Statement

A statement, such as the if statement, that selects or ignores a single action or sequence of actions.

Static Web Server

A static web server, or stack, consists of a computer (hardware) with an HTTP server (software). We call it "static" because the server sends its hosted files "as-is" to your browser.

Nesting Quotation Marks

A string can be delimited by single ' or double quote characters. Within a string, you cant nest quotes of the same type, but you can't nest quotes of the other time.

Variable Statement Javascript

A variable is a location in the computer's memory where a variable can be stored for use by a script. All variables have a name, type and value. The name of a variable can be any valid identifier and if a new value is placed in a memory location, the old value is lost. ex for a variable statement called with a name called time: var time; The value could be user defined as: time = window.prompt( "Please enter the time" );

Rectangle Symbol

Action symbol indicates any type of action, including a calculation or an input/output operation

statusText

Additional information on the request's status. It's often used to display the error to the user when the request fails.

Argument

Additional information used by methods to perform its actions

setRequestHeader

Alerts the request header. The two parameters specify the header and its new value. It's often used to set the content-type field.

getAttribute

Allow you get an attribute value of an element. The getAttribute() method of the Element interface returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or "" (the empty string). ex: var attribute = element.getAttribute(attributeName); where attribute is a string containing the value of attributeName. attributeName is the name of the attribute whose value you want to get.

setAttribute

Allow you to modify an attribute value. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value. ex: Element.setAttribute(name, value); name A DOMString specifying the name of the attribute whose value is to be set. The attribute name is automatically converted to all lower-case when setAttribute() is called on an HTML element in an HTML document. value A DOMString containing the value to assign to the attribute. Any non-string value specified is converted automatically into a string. Boolean attributes are considered to be true if they're present on the element at all, regardless of their actual value; as a rule, you should specify the empty string ("") in value (some people use the attribute's name; this works but is non-standard). See the example below for a practical demonstration. Since the specified value gets converted into a string, specifying null doesn't necessarily do what you expect. Instead of removing the attribute or setting its value to be null, it instead sets the attribute's value to the string "null". If you wish to remove an attribute, call removeAttribute(). Return valueSection undefined. ExceptionsSection InvalidCharacterError The specified attribute name contains one or more characters which are not valid in attribute names.

z-index Property

Allows you to layer overlapping elements. 1 is the base layer and any higher layers appear over it. If not specified, layers appear from background to foreground in the order in which they're encountered in the document. The default z-index value is 0.

XML Vocabulary

An XML specification created for a particular purpose, such as the XBRL vocabulary for financial and business reporting. All XML vocabularies are written in the XML Schema Language and define a specific set of elements and attributtes and document structures for a particular purpose. ex: XHTML, MathML, VoiceXML etc.

Conditional Operator

An alternate way of coding an if-else statement using three (ternary) operands. The first statement is a boolean expression, second is the value for the conditional expression if the expression evaluates to true and the third and third is the value for the conditional expression if the value is false. is ex: document.writeln( grade >=60? "Pass" : "Fail" ) ;

Identifier

An identifier is a series of characters consisting of letters, digits, underscores and dollar signs that does NOT begin with a digit and is NOT a reserved JavaScript keyword. An identifier can NOT include spaces. By convention, identifiers should begin with a lowercase first letter and subsequent words with a capital letter. An identifier is an attribute whose value is associated with one and only one entity instance

Equality Operator

An operator in programming logic that tests whether or not two objects or items of data contain the same value. In many currently used languages, the double equals sign (==) is the symbol for testing equality and the (!=) is the symbol for testing nonequality.

Binary Operator

An operator that has two arguments.

Exception Handling

Behavior of a component or system in response to erroneous input, from either a human user or from another component or system, or to an internal failure. When there's an error, the program makes an error object and passes it off to the runtime system, which looks for a method in the call stack to handle it.

XML Container Element

Any element that contains other elements (also called parent elements). Nested elements are also called child elements. If they are at the same nesting level they are called siblings.

text-decoration Property

Applies decorations to text in an element. Options include none, overline, line-through and underline. By default, browsers underline the text of an (anchor) element. To remove the underline ex: { text-decoration: none; }

Statement

Argument in parathesis (the string) and the semicolon ; together are called a statement. Every statement ends with a semicolon.

AJAX

Asynchronous JavaScript And XML. A programming methodology that uses a number of existing technologies together and enables Web applications to make incremental updates to the user interface without the need to reload the browser page. The basic idea is that while the user is viewing and interacting with a web page, JavaScript is running in the background communicating with the server and updating the page with new data. Ajax is exemplified by gmail and Google Maps. So, we have JavaScript running on the client stealthily sending requests to the server for both data and to run scripts. The main advantage is that the user can be viewing the web page the whole time and does not need to wait while a whole new page loads and replaces the one he was viewing. Ajax apps have to be "served" by a web server. If you simply open the HTML file from your local hard drive, the Ajax code will fail. Raw Ajax coding is good to know, but in actual practice it is best to use a JavaScript library that supports Ajax due to cross-browser portability issues. The most popular JS library is jQuery. Others include ASP.NET Ajax and JSF Ajax capabilities.

Precendence (High to Low)

Author styles, user stylesheet (a browser setting), user-agent (browser) default stylesheet

stateChange Function

Callback function that's called when the client receives the response data

abort

Cancels the current request

CSS

Cascading Style Sheets, allowed you to specify the presentation of elements on a web page (fonts, spacing, sizes, colors, positioning) separately from the document's structure and content (section headers, body text, links etc.). This seperation of structure from presentation simplifies modifying and maintaining web pages, especially on large-scale websites.

String Concatenation

Combining several strings into a single string, or combining a string with other data into a new, longer string.

background-color Property

Configures the background color of an element, can also be used in case the image is not found. background color: lightgrey;

Try Block

Contains code that might create exceptions you want to handle.

Single-Entry/Exit Control Statements

Control statements are attached to one another by connecting the exit point of one to the entry point of the next.

parseInt Funtion

Converts a text string into an integer. Also has an optional second parameter known as the radix, that specifies the base number system that's used to parse the number (e.g. 8 for octal, 10 for decimal and 16 for hexidecimal). The default is 10.

Program Control

Correctly specifying the order in which the actions are to execute

DELETE

Delete rows from a specified table DELETE FROM tableName WHERE criteria

createTextNode

Creates a new Text node. This method can be used to escape HTML characters. ex: var text = document.createTextNode(data); text is a Text node. data is a string containing the data to be put in the text node.

block-level element

Creates boxes that contribute to the layout of the document.

Block-Level Element

Creates boxes that contribute to the layout of the document. Some examples of block-level elements include section, div, p and heading elements (h1 through h6).

GROUP BY

Criteria for grouping rows

ORDER BY

Criteria for ordering rows - ASC is the default ORDER BY column ASC ORDER BY column1, column2 DESC

WHERE

Criteria for selection that determine the rows to be retrieved. The clause criteria can contain the operators <, >, <=, >=, =, <> and LIKE. ex: SELECT * FROM * tablename WHERE copyright > '2009' Like used for pattern matching - ex for all names where the name starts with a D (percent indicates any # of letters can follow) with quotations: SELECT * FROM table WHERE name LIKE 'D%' _ indicates placement so _D% would have to have D as the second letter vs first

Diamond Symbol

Decision symbol which indicates that a decision is to be made.

Inline Styles

Declare an individual element's format using the HTML5 attribute style. Inline styles override any other styles applied. ex: <p> This paragraph does not have inline styling</p> <p style = "font-size: 20pt; color: deepskyblue;"> This one specifies two properties, font size and color, which are seperated by a semicolon</p>

ATTLIST Attribute-List Declaration

Defines an attribute named type for the contact element. For example #fixed requires a certain value to be present or #required specifies that the attribute must be present in the element <!ATTLIST contact type CDATA #fixed "01757">

Style Element

Defines the embedded style sheet. Styles placed in the head apply to matching elements wherever they appear in the body.

Prompt

Directs the user to a specific action

Browser Debugging: Log

Display a list of all of the resources that were requested when the page loaded. You can click on each file to determine if one is not found as well as see if a sheet is missing.

Partial Page Updates

Display new data without reloading the entire page

Prompt Dialog

Displays a dialog which allows the user to enter a value. If cancel is chosen then the prompt dialog submits null as the value. This is not a string literal so if the user writes null then null will display in the web page. A default value can also be defined. var = window.prompt( "Text that shows in dialog" );

DOM

Document Object Model gives you scripting access to all the elements on a web page. Inside the browser, the whole web page is represented in an object hierarchy.

DTD

Document Type Definition, a schema that defines the document's proper structure. Some validating parsers will use this to verify the defined structure is used properly. When using this, all required entries must be included but can be left with no space ex: <address2></address2>

Dynamic vs Static Web Page

Dynamic page content has the ability to change based on user input.

Relative Positioning

Elements are positioned relative to other elements. Setting the position to relative offsets it by the specified top, bottom, left or right value. ex: <style type = "text/css"> .super { position: relative; top: -1ex; } .sub { position: relative; bottom: -1ex; } .shiftleft { position: relative; left: -1ex; } </style> <p>the text at the end of this sentence <span class = "super">is superscript</span></p>

XML Element

Elements are tags that can envelop data and be organized into a hierarchy, the headers and message is package by wrapping it in layers of tags. There are no predefined tags. They must begin with either a letter or an underscore and they should not begin with xml in any combination of letters.

Embedded Style Sheets

Enable you to embed a CSS3 document in an HTML5 document's head section. ex: <head> <meta charset = "utf-8"> <title>Embedded Style Sheet Example</title> <style type = text/css"> em { font-weight: bold; color: black; } h1 { font-family: tahoma, arial, serif; } p { font-size: 12pt; font-family: arial, sans-serif; } .special { color: purple; } </style> </head> To render the special font use <p class = "special">

Rule of Entity Integrity

Entity Integrity ensures that there are no duplicate records within the table and that the field that identifies each record within the table is unique and never null. The existence of the Primary Key is the core of the entity integrity. If you define a primary key for each entity, they follow the entity integrity rule. Entity integrity specifies that the Primary Keys on every instance of an entity must be kept, must be unique and must have values other than NULL.

Rule of Referential Integrity

Every foreign-key value must appear as another table's primary-key value.

XSL

Extensible Stylesheet Language a language for defining transformations from XML documents to other output formats for different platforms

Oval Symbol

Flowchart that represents an algorithm - contains the words "begin" and "end" to reflect a complete algorithm. In a flow chart with only a portion of the algorithm, the oval symbols are omitted in favor of using small circle symbols (also called connector symbols.

Browser Debugging: Eyedropper

Gives full color info including transparency

GUI

Graphical User Interface, currently the dominant method for designing human-computer interaction.

DOM Collections

Groups of related objects on a page. DOM collections are accessed as properties of DOM objects, such as the document object or a DOM node. The document object has properties containing the: images collection, links collection, forms collection, anchors collection.

HTTP Client/Server Model

HTTP provides clear rules for how a client and server communicate. We'll cover HTTP itself in a technical article later on. For now, just be aware of these things: Only clients can make HTTP requests, and then only to servers. Servers can only respond to a client's HTTP request. When requesting a file via HTTP, clients must provide the file's URL. The web server must answer every HTTP request, at least with an error message. The MDN 404 page as an example of such error pageOn a web server, the HTTP server is responsible for processing and answering incoming requests. On receiving a request, an HTTP server first checks whether the requested URL matches an existing file. If so, the web server sends the file content back to the browser. If not, an application server builds the necessary file. If neither process is possible, the web server returns an error message to the browser, most commonly 404 Not Found. (That error is so common that many web designers spend quite some time designing 404 error pages.)

HTTP Status Code

HTTP status code of the request. A status of 200 means that the request was successful. A status of 404 means that the requested resource was not found. A status of 500 denotes that there was an error while the server was processing the request.

responseXML

If the server's response is in XML format, this property contains the XML document; otherwise its, its empty. It can be used like a document object in JavaScript, which makes it useful for receiving complex data (e.g. populating a table)

Object

Implies that attributes (data) and behaviours (methods) are associated with the object. The objects methods use the attributes to perform useful actions for the client of the object.

Persistent XSS

In a reflected XSS attack, the malicious string is part of the victim's request to the website. The website then includes this malicious string in the response sent back to the user.

open

Initializes the request and has two mandatory parameters - method and URL. The method parameter specifies the purpose of the request - typically GET or POST. The URL parameter specifies the address of the file on the server that will generate the response. A third optional Boolean parameter specifies whether the request is asynchronous (set to true by default)

INSERT

Insert rows into a specified table. ex: INSERT INTO table name (column1, column2, ..) VALUES (value1, value2, ..) Most tables support autoincremented values from the primary key

JSON vs XML

JSON is Like XML Because Both JSON and XML are "self describing" (human readable) Both JSON and XML are hierarchical (values within values) Both JSON and XML can be parsed and used by lots of programming languages Both JSON and XML can be fetched with an XMLHttpRequest JSON is Unlike XML Because JSON doesn't use end tag JSON is shorter JSON is quicker to read and write JSON can use arrays

JSON

JavaScript Object Notation (JSON) - a popular data interchange format, JSON is a technology standard often used to format data when being sent or received via APIs.

JSON

JavaScript Object Notation (JSON) - a popular data interchange format, JSON is a technology standard often used to format data when being sent or received via APIs. JSON is text, and we can convert any JavaScript object into JSON, and send JSON to the server. We can also convert any JSON received from the server into JavaScript objects. This way we can work with the data as JavaScript objects, with no complicated parsing and translations. JSON syntax is derived from JavaScript object notation syntax: Data is in name/value pairs ex: "name":"John" Data is separated by commas Curly braces hold objects Square brackets hold arrays

Declaration

JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.

readyState

Keeps track of the requests' progress. It's usually used in the callback function to determine when the code that processes the response should be launched. The progress is monitored in values 0 to 4 0 = request is not initialized 1 = request is loading 2 = request has been loaded 3 = data is actively being sent from the server 4 = request has been completed

XML Prolog

Line before xml doc <?xml version = "1.0" encoding="UTF-8"?> Any space or characters before the prolog will result in an error.

INNER JOIN

Merges rows from two tables by matching values in columns that are common to the tables. ex: SELECT column1 FROM table1 INNER JOIN table2 ON table1.ColumnName = table2.columnName two column merges would be: table1.column2 = column1same.column2same

MVC architecture

Model-View-Controller clearly separates applications into three parts: data model, presentation, and program logic. • The model is the data plus any constraints on the data. • The view prepares and presents results to the user. •The controller controls the interaction between the user and the application. • The model encapsulates the application logic and state. It maintains and manipulates the application's state. It includes a database, DBMS, and database driver. • The view presents a UI. It includes HTML, images, scripts, taglibs, etc. It includes all of the modules presented directly to the user. • The controller handles user actions. It includes handling user requests, validating requests, obtaining request parameters, and reformating data for transaction processing. The MVC reduces the coupling among the three parts of an application making it easier to develop and maintain. Advantages of the MVC architecture are simplicity, independence, scalability, and developer specialization.

MIME

Multipurpose Internet Mail Extensions describes the element's content. As of HTML5 the default type for a style element is CSS so this attribute is no longer needed. CSS documents use the MIMS type text/css PNG images use image/png JavaScript uses text/javascript Plain text uses text/plain JPEG uses image/jpeg HTML markup uses text/html

Arithmetic Operators

Must be in single line. Parenthesis can be used to group expressions in the same manner as algebraic expressions. EVALUATED FIRST Multiplication * Division / Remainder % EVALUATED LAST Addition + Subtraction - Evaluation beyond type is from left to right

Object Hierarchy

Objects are defined from other base objects. The new objects inherit the properties and functions of the prior objects.

Relational Operator

One of the operators that compares its operands: >, <, >=, and <=.

XML Declaration

Optional but helps identify the file as an XML file. Also helps you to list encoding (defines what types of characters your going to use) and standalone declaration. utf-8 is a unicode encoding standard corresponds well to the ascii character set. Has to be at the very very beginning of the file.

background-position Property

Places the position of the image on the page. The keywords top, bottom, center, left and right are used individually or in combination for vertical and horizontal positioning. You can position an image using lengths by specifying the horizontal length followed by the vertical length. For a horizontally centered image 30 pixels from the top use ex: background-position: 50% 30px;

Inline Scripting

Placing JavaScript code within an X/HTML tag, rather than between the file's head section.

Nested Else If Statements

Placing else if statements inside if...else statements ex: if ( studentGrade >= 90 ) document.writeln( "A" ) else if (studentGrade >=80 ) document.writeln( "B" ) else if etc.....

Alert Dialog

Popup dialog type for alerts. This dialog type also includes an ok button to dismiss the dialog. ex: window.alert( "Welcome!" );

JavaScript Interpreter

Process the commands in JavaScript, contained in all major web browsers

psuedo-class

Psuedo-classes give you access to information that is not declared in the document, such as whether the mouse is hovering over an element or whether the user has previously clicked(visited) a particular hyperlink. Psuedo classes are seperated by a colon with no surrounding spaces from the name of the element to which they're applied. ex: a:hover { text decoration: underline; }

Queries

Requests information that satisfies given criteria

SELECT

Retrieves data from one or more tables

getElementById

Returns objects called DOM nodes. Every element in an HTML5 page is modeled in the web browser by a DOM node. All the nodes in an element make up the page's DOM tree/

getResponseHeader

Returns the header data that precedes the response body. It takes one parameter, the name of the header, to retrieve. This call is often used to determine

RIA

Rich Internet Application, web applications that approximate the look, feel and usability of desktop applications. Two key attributes are performance and a rich GUI.

Client of the Object

Script that calls the methods

send

Sends the request to the server. It has one optional parameter data, which specifies the data to be to be POSTed to the server (set to null by default)

External Style Sheets

Separate documents that contain only CSS rules. You can provide a uniform look and feel to an entire website or portion of one. You can also reuse the same external style sheet across multiple websites. This also enables designers and content writers to work in parallel. ex: <link rel = "stylesheet" type = "text/css" href = "style.css">

Pixel

Short for "picture element" it is the fundamental unit of a digital image, typically a tiny square or dot which contains a single point of color of a larger image. A pixel is a relative-length measurement, it varies in size based on screen resolution.

Browser Debugging: Layout

Shows dimensions of the inspected element and padding rules

Browser Debugging: Console

Shows the code execution and errors

SQL String Delimitation

Single quotes unless there is an ' in the string ex: 'o'malley'

Reserved Keywords

Special words used by programming languages. They cannot be used to make legal variable names.

Transfer of Control

Specifies that the next statement to execute is not the next one in sequence

font-weight property

Specifies the boldness of the text. Possible values are bold, normal (the default), bolder (bolder than bold text) and lighter (lighter than normal text). Boldness can also be specified with multiples of 100 from 100 to 900. Text specified as normal is equivalent to 400 and bold text is equivalent to 700. However, many systems do not have fonts that can scale with this level of precision so using these numeric values might not display the desired effect. ex: em { font-weight: bold; color: black; }

Element Type Declaration

Specifies the element types and attributes ex: <!ELEMENT letter ( contact+, salutation, paragraph, closing, signature)> <!ELEMENT contact (name, address)> <!ATTLIST contact type CDATA #fixed "01757">

XML Elements

Specify the document's structure ex: first name for all the first names

SQL

Structured Query Language (SQL) is a standard language supported by most modern relational DBMSes. It consists of statements for creating and manipulating databases. Allow for the access and storage of data without concern for the internal representation of data.

Style Class

Style class declarations are preceded by a period and define styles that can be applied to any element. You can also declare ID selectors. If an element in your page has an ID, you can declare a selector of the form #elementid to specify that element's style. ex: .special { color: purple; }

Specifity

Styles declared in a child element override inherited styles

FROM

Tables involved in the query - required for every SELECT ex: all table data: SELECT * FROM tablename specific columns: SELECT column2, column2 FROM tablename

String Literal

Text enclosed by double quotes.

responseText

Text that is returned to the client by the server

Assignment Operator

The '=' character causes the compiler or interpreter to evaluate to the expression on its right and store the result in the variable(s) on its left. ex: name = window.prompt( "please enter your name" )

Pre Element

The HTML <pre> element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional ("monospace") font. Whitespace inside this element is displayed as written. Javascript escape sequences impact this.

Three-Tiered Web App Architecture

The HTTP client (the front end) runs in the browser. Client-side technologies, such as HTML, CSS, JS, Ajax, and others, are used here. Also, XML and JSON which are data representation technologies, may appear in all three tiers. The middle tier is the business logic that runs on the HTTP server. Server-side technologies, such as PHP, JSP, ASP, or ColdFusion among others, are used here. The information tier (the back end) is the data store. This is often a RDBMS that is manipulated using SQL. The client cannot directly access the information tier. Rather, it does so indirectly through the web server as follows: The client sends an HTTP GET or POST request to the web server. The web server handles this request by creating a SQL query which it sends to the database system. The database system returns the query results to the web server. The web server puts these results in a form the client can understand - some combination of HTML, XML or JSON, etc. which it then sends to the client.

ON

The ON clause of the INNER JOIN specifies the columns from each table that are compared to determine which rows are merged.

Reflected XSS

The attacker includes HTML code within a link to a web address knowing the linked page will fail to sanitize the included HTML code, which is often seen on pages that display the query that a user entered.

If Statement

The common programming structure that implements "conditional statements". ex: var now = new Date(); var hour = now.getHours(); if (hour < 12) document.write( "<h1>Good Morning!</h1>" );

font-family Property

The font-family property specifies the name of the font to use. Not all users have the same fonts installed on their computers, so CSS allows you to specify a comma-seperated list of fonts to use for a particular style. The browser attempts to use the fonts in the order in which they appear on the list. It's advisable to end a font list with a generic font family name in case the other fonts are not installed on the user's computer. ex: h1 { font-family: tahoma, arial, serif; }

font-size Property

The font-size property specifies the font size. Measurements are possible in pt (point) font. Relative values - xx-small, x-small, small, smaller, medium, large, larger, x-large and xx-large can also be used. Generally, relative font-size values are preferred over points because an author does not know the specific measurements of each client's display. Relative values permit more flexible viewing of web pages. Specifying a point size prevents the browser from scaling fonts. A relatvie font size allows the browser to determine the actual size of the font displayed. p { font-size: 12pt; font-family: arial, sans-serif; }

Apache

The most popular Web server on the WWW today is the open-source Apache, Usually running on a Unix platform. MS IIS (Internet Information Services) is the second most popular, usually running on a Windows platform.

CSS Selector

The part of a CSS rule-set that defines which HTML elements the style should be applied to. Each rule is enclosed in curly braces { example }. The property name is followed be a colon : and the property value. Multiple properties are separated by semicolons. <head> <meta charset = "utf-8"> <title>Embedded Style Sheet Example</title> <style type = text/css"> em { font-weight: bold; color: black; } h1 { font-family: tahoma, arial, serif; } p { font-size: 12pt; font-family: arial, sans-serif; } .special { color: purple; } </style> </head>

LAMP

The popular combination of Linux OS, Apache Web server, MySQL, and PHP (or Python or Perl) is known as the LAMP stack. Other combinations such as Windows, IIS, MySQL, PHP have similar acronyms such as WIMP, WAMP, etc

readystatechange event

The readystatechange event is fired when the readyState attribute of a document has changed. Register a listener for this even to specify the callback function - the event handler that gets called when the server responds.

Statement Terminator

The semicolon (;) is used to indicate the end of a statement.

Root Node

The top level of a file structure. The folder that contains all other folders. The HTML node at the top of the tree is called the root node because it has no parent.

Absolute-Length Measurements

Units that do not vary in size based on the system. Units include in, cm, mm, pt and pc (picas ; 1 pc = 12 pt). It is not advisable to use absolute-length measurements.

UPDATE

Update rows in a specified table UPDATE tableName SET columnName = value1, columnName2 = value2 WHERE criteria

XMLHttpRequest object

Used to exchange data with a server via AJAX

Absolute Positioning

Used when items are positioned using x- and y-coordinates and are removed from the standard flow of the page. Gives you greater control over how document elements are displayed. <style type = "text/css"> .background_image { position: absolute; top: 0px; left: 0px; z-index: 1; } .foreground_image { position: absolute; top: 25px; left: 100px; z-index: 2; } .text { position: absolute; top: 25px; left: 1000px; z-index: 3; font-size: 20pt; font-family: arial; } </style>

Nondestructive Process

When a value is used, but not destroyed

Sequential Execution

When statements in a script execute one after another in the order in which they're written

Skinning

When style change across all the pages using those styles.

Dialog

Windows that "pop up" on the screen to grab the user's attention

onreadystatechange

With the XMLHttpRequest object you can define a function to be executed when the request receives an answer. The function is defined in the onreadystatechange property of the XMLHttpResponse object: xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send();

XHR

XMLHttpRequest - usually used to implement interaction with the server when using JSON. Any server-side tech can be used including PHP, ASP.NET and JavaServer Faces.

Cross-Site Scripting (XSS)

XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts through the website into the browsers of other users. Because the injected code comes to the browser from the site, the code is trusted and can do things like send the user's site authorization cookie to the attacker. When the attacker has the cookie, they can log into a site as though they were the user and do anything the user can, such as access their credit card details, see contact details, or change passwords.

Escape Character

\ Indicates that a special character is to be used in the string. ex: can be used before quotation marks to allow a user to delimit the same quotation type within the string

Single and Double Quote Escape Sequences

\' or \" to use the same quotation type within a string.

Backslash Escape Sequence

\\ used to represent the backslash character in a string

New Line in Javascript String

\n position the screen cursor at the beginning of the next line.

Horizontal Tab in Javascript String

\t move the screen cursor to the next tab stop

Nodes are related to each other through

child-parent relationships. An HTML5 element inside another element is said to be its child with the containing element known as its parent. A node can have multiple children, but only one parent. Nodes with the same parent node are referred to as siblings. ex: the head and body nodes are siblings because they're both children of the html node.

Change Color JavaScript

document.write( "<h1 style = ' color: magenta'>"); document.write( "Welcome! </h1>;

Write Text JavaScript

document.write( "Welcome to JavaScript " + "Programming!</h1>" );

Boolean Expression

in programming, an expression that evaluates to True or False.

Most styles defined for parent elements are also _____ by child (nested) elements

inherited

Conflicts are resolved in favor of properties with a higher ____

specificity, so the child's styles take precedence.

background-image Property

specifies the image URL for the image.

Inheritance

styles applied to a parent element are inherited by its children

DOM property and methods

the length property, the item method and the namedItem method. The item method receives an integer in the argument and returns the corresponding item in the collection. The namedItem method recieves an element id as an argument and finds the element with that id in the collection.

Obtain current date and time Javascript

var now = new Date(); to get the exact hour you would then use var hour = now.getHours();

Javascript Repetition Statements

while, do...while, for and for...in

AJAX Send Server Request

xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); open(method, url, async) Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) send() Sends the request to the server (used for GET) send(string) Sends the request to the server (used for POST) GET is simpler and faster than POST, and can be used in most cases. However, always use POST requests when: A cached file is not an option (update a file or database on the server). Sending a large amount of data to the server (POST has no size limitations). Sending user input (which can contain unknown characters), POST is more robust and secure than GET.

Containing Block

• If an element's position is absolute, the containing block is the nearest positioned ancestor. In other words, the containing block must have a position of absolute, fixed, or relative. If no such element exists, the page is the containing block. • If an element's position is fixed, the containing block is the browser viewport. • If an element's position is relative, the containing block is the nearest block level ancestor—in other words, its parent.