Web Development - Unit 1-4 for midterm
Interacting with BOM - five children
Screen: Window: Navigator: History: Location:
Literal array
var mySchedule = ["CSCI-A 340", "MATH-M 215"];
Explain dynamic arrays - example is the other side
var mySchedule = new Array([size]); mySchedule[0] = "CSCI-A 340"; mySchedule[1] = "MATH-M 215";
How to get the form object with DOM
var theForm = document.getElementById("form1");
four types of loops?
while, do-while, for, for-in
Input methods in JavaScript apply to the BOM's WINDOW object.
window.prompt(msg, [input]); var myName; myName = window.prompt("please enter your name")
The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined _____
with a "#".
The class selector uses the HTML class attribute, and is defined with a...
"." in front of the selector
error handling - 4 components
* try lets you test a block of code for errors. • catch lets you handle the error. • throw lets you create custom errors. • finally lets you execute code, after try and catch, regardless of the result.
External style sheet should be stored in a file with the extension of ______
*.CSS
Colors in CSS can be specified by the following methods:
- Hexadecimal colors - RGB colors - RGBA colors - HSL colors - Predefined color names
Differences between java and JS? Java answers
- Java is an Object Oriented Programming (OOP) language created by James Gosling of Sun Microsystems. - Java is a stand alone language and runs on a virtual machine. - Java is compiled in a bytecode (an intermediate machine language) and produces a stand-alone executable. - Object-oriented: (Encapsulation, inheritance, polymorphism) - Strongly typed language.
Differences between java and JS? JavaScript answers
- JavaScript is a scripting language that was created by Netscape and was originally known as LiveScript. - JavaScript must be part of a HTML document and runs within a browser. - JavaScript is interpreted line-by-line by the browser. - Object-based: Code uses built-in, extensible objects, but no classes or inheritance. - Dynamically typed language
Block-level element is surrounded by the following:
- Padding - Border - Margin
CSS3 transitions are effects that let an element gradually change from one style to another. • To do this, you must specify two things:
- Specify the CSS property you want to add an effect to - Specify the duration of the effect
Position can be:
- Static (default) - Relative - Absolute - Fixed - Inherit (inherit from parent)
2D Transformations are a follows: 3 things
- Translation (moving in x and/or y coordinate) - Rotation (about a fixed point) - Scaling (enlarging or reducing the object)
CSS commnet
/* words */
Elements in HTML5 can be stacked on top of each other (or overlap) using two different CSS properties:
1. Position 2. Z-index
Embedded style information can be placed in the ______ section of a HTML document and should be put in between ___ tags
<head> , <style> </style>
what are IP addresses
A temporary number assigned to a node on the internet
Using the _____ & _______ property, the user can have much better control over the positioning and layering of objects on a web page.
Absolute positioning and the z ‐ index
what does Array.push(value); do?
Adds the argument values to the end of the array, and modifies the original array with the new additions. Returns the new length of the array.
JavaScript has several built-in objects like...
Array Boolean - Date - Math - Number - String RegExp - Global
Inline:
As attributes of a tag
Embedded:
As part of the a HTML document. Within tags and inside the tag.
Why did the world move to style sheets?
Because HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document: like header or paragraph When tags like , and color attributes were added to the HTML 3.2 specification, it created a problem. Now every html element (in every html page) could potentially need a series of these tags! To resolve this potential problem, the World Wide Web Consortium (W3C) developed CSS.
Both Java and JavaScript syntax are based on _____ language so it is easy to learn the basics.
C and C++ lang
What does CSS stand for and what does it entail?
Cascading Style SheetsUsed to control the "style and layout" of our web documents.
What does Array. Concat() do?
Concatenates either a single elements or another array of elements with the existing array, and returns the new array.
what does Array. Join([separator]) do?
Converts each element within the array to a string, and joins them into one large string. Pass in an optional separator as argument to be used to separate each array element. If none is passed, the default comma (,) is used
The text-decoration property specifies the decoration added to text. what are they?
Decoration includes: - None - Underline - Overline - Line-through - Blink
what does array.pop(); do?
Deletes the last element within array and returns the deleted element. Original array is modified.
DOM Manipulation: 5 items
Document Element Attributes Style Events (mouse, keyboard, objects, form, drag-drop, copypaste, etc)
What is DOM?
Document Object Model is an Application Programming Interface (API) for HTML and XML documents. It defines a structure of the document, and how it can be accessed.
What does <!DOCTYPE> declaration do?
Helps the browser to identify and correctly display a web page. identifies the document as a HTML5 document.tag defines the document type (in this case HTML).
What does HTML stand for?
Hyper Text Markup Language.It is a language for describing creating web pages.
What does HTTPS stand for and what is it?
Hyper Text Transfer Protocol Secure is implemented as a SSL (secure socket layer) or TLS (Transport Layer Security) on top of the existing HTTP protocol.Provides both authentication of the Web Server (as certified) as well as bi-directional encryption between the client (web browser) and the web-server.
What does HTTP stand for and what is it?
Hyper Text Transfer Protocol is one of the transfer (data communication) protocols used in the WWW.
Sorting an Array (Bubble Sort)
If (TheArray(Index) > TheArray(Index + 1) ) Then Hold = TheArray(Index) TheArray(Index) = TheArray(Index + 1) TheArray(Index + 1) = Hold End If
External CSS File:
In a separate file which can be loaded (linked to) within the HTML document
Style can be defined in 1 of 3 ways?
Inline, Embedded, and External
What is server side programming?
It is the program that runs on server dealing with the generation of content of web page. The Programming languages for server-side programming are : 1) PHP 2) C++ 3) Java
What is client side programming?
It is the program that runs on the client machine (browser) and deals with the user interface/display and any other processing that can happen on client machine like reading/writing cookies. The Programming languages for client-side programming are 1) Javascript 2) VBScript 3) HTML 4) CSS 5) AJAX
_____ is the de facto standard for client side programming for web based applications.
JavaScript
If a child and a parent have style, which one wins?
Properties defined on for descendant (child) elements have a higher specificity that properties of parent elements. Conflicts are resolved in favor of higher specificity. child's styles take precedence!
Interacting with DOM: 3 things
Properties: Methods: Events:
_____selectors are used to add special effect to "some" selectors. syntax?
Pseudo ‐class selectors Syntax: - selector:pseudo-class {property:value;}
HTTP request: get
Requests data from a specified resource (e.g., the web server).HTTP servers are required to implement at least the GET and HEAD methods.
HTTP request: post
Requests that the server accept some data from the client. The data POSTed might be some data that is the result of submitting a web form.
what does Array. Map(mappingfunction()) do?
Returns a new array based on the return value of testfunction() on each of the array elements. Original array is not changed. Use it to transform the values of all elements within an array using some logic and derive the results as a new array
true or false: The condition (x === y) x= int y=double
Returns false because it compare their type and their value
what does Array. indexOf(targetElement) do?
Returns the first index in which targetElment (value) is found within an array, or -1 if nothing is found.
true or false: The condition (x == y) x=1 y=1
Returns true because it compares their values
What is the web?
Short for World Wide Web, contains billions of documents called Web pages
HTTP request: head
Similar to GET request, but without the response body. This is useful for retrieving meta-information written in response headers, without having to transport the entire content.HTTP servers are required to implement at least the GET and HEAD methods.
What is the difference between a static and dynamic web page?
Static web pages are generally simple HTML written pages which serve as response from browser to server in which all the information and data is static in nature and it does not get changed until someone changed it manually. On other hand Dynamic webpages are the pages written in some more complex language such as ASP.NET in which data is rendered after some interpretation and capacity to produce distinctive content for different calls.
DOM is organized as ____
The DOM organizes the entire web page as a document composed of a hierarchy of nodes like a tree structure and using the DOM API, nodes can be removed, added, and replaced
What does this phrase mean: Variables in JavaScript are dynamically typed
Their type is determined only after they are assigned a value.
The overflow property specifies what happens if content overflows an element's box. four types:
Visible - Hidden - Scroll - Auto
What distinguishes PHP from JavaScript?
What distinguishes PHP from JavaScript is that PHP code is executed (interpreted) on the server, it generates HTML, which is then sent to the client. The client (browser) would receive the results of running that script, but would not know what the underlying code was.
BOM manipulation: 5 items
Window Navigator Screen History Location
The browser object has a _______ object, and one of _______ object elements is its _______ object (e.g., the DOM)
Window, window, document
What are associate arrays?
______ array is an array that uses a "string" (instead of a number) as the index to the elements of an array.
CSS was developed by:
a World Wide Web Consortium (W3C) team headed by Bert Bos and Håkon Lie
what is network?
a communications, data exchange, and resource-sharing system created by linking two or more computers and establishing standards, or protocols, so that they can work together
An HTTP session is?
a sequence of request- response transactions between a browser and a web server.
How is an HTML document represented?
a tree structure where each node in the tree is an object representing a part of the document.
Specifying an element's position as ______ will remove it from the normal flow of elements on a page. Instead, the element can be positioned according to a distance from top, left, right, bottom of its containing block-level element.
absolute
What is PHP and what does it stand for?
acronym for PHP: Hypertext Preprocessor. popular and robust server-side scripting language used for web application development. used to build web application logic based on C / C++ language. open source embedded in HTML documents. It can also embed HTML tags and data. needs interpreter
BOM allows the developer to ____
allows the developer to manipulate the browser window.
DOM allows the developer to ______
allows the developer to manipulate the document
By default the function sort(), sorts the arrays ________ and ______
alphabetically and in ascending order
what are IP packets?
are the unit of communication and transmission. Packets are logical structures that are passed between two or more points of communication that have a specific layout that enables them to be interpreted upon receipt.
href of a link is
attribute specifies the URL of the style sheet.
tyle of a link is
attribute specifies the document's MIME type as "text/css"
rel of a link is
attribute specifies the relationship of the link.
The {Declaration} of css
block is typically one or more style attributes (such as color, font, text-alignment, etc) that we want to apply a selector.
All ____ elements have a virtual box drawn around them.
block level
BOM: navigator
contains information about the browser. - (appName, CookiesEnabled, JavaEnabled, etc)
BOM: location
contains information about the current URL. - (host, hostname, href, port, protocal, assign(), reload(), replace())
BOM: Screen
contains information about the visitor's screen. - (height, width, colorDepth, etc)
BOM: history
contains the URLs visited by the user (within a browser window). - (length, back(), forward(), go(), etc.)
BOM is organized/implemented as ____
differently; each browser has its own implementation.
CSS allows the user to use pagination features such as multiple columns: syntax?
div { ‐moz‐column‐count:3; /* Firefox */ ‐webkit‐column‐count:3; /* Safari and Chrome */ column‐count:3; }
DOM: properties
doctype, documentURI, inputEncoding, xmlEncoding, anchors, forms, images, links, referrer, title, URL, domain, lastmodified, etc.
Output methods in JavaScript apply to DOM
document.write("hello"); document.writeln("hello");
absolute positioned elements
elements are removed from the flow of the document, but they are relative to their parent elements. (Other elements in the page will behave as if it is not even there!)
fixed positioned:
elements are similar to Absolute positioned element, except that they are fixed to the document not any parent element.
what are recursive functions? example as answer
function factorial(number) { if (number <=1) //base case return 1; else return (number * factorial(number-1)); } alert(factorial(5)); //call the function
What is JavaScript?
is a scripting language which is typically used to enhance the functionality and appearance of web pages. the de facto standard for client side programming for web based applications. executed by the browser, however some browsers disable this capability.
what are network protocals
is an established set of rules that determine how data is transmitted between different devices in the same network.
relative positioning
is based on the parent and other elements and can be adjusted using the margin, top, bottom, left and right properties.
static positioning
is the default and the z-index has no effect on statically positioned elements.
selector of the css
is typically an HTML element (such as Body, h1, p, div, etc.)
How does HTTP client initiate a request?
it initiates a request by establishing a (TCP) connection to a particular port on a server (usually 80) - The server sends back a status line, such as "HTTP/....OK", and a message of its own. The body of this message is typically the requested resource (such as a web page.)
External CSS are included in the HTML document by placing a _______ to the file in the ______ tag of the document.
link, head
DOM: events
load, unload, resize, scroll, click, dblclick, mousedown, mouseup, mouseover, mouseover, mouseout, keydown, keyup, keypress, etc.
Margin and Padding can be set by using the "margin" and "padding" parameters. - they go...
margin: top right bottom left padding: top right bottom left
meta tag <meta>
meta data about the document(ex is author, date, assignment, etc.)can be used by browsers, search engines, or other web services.
link tag <link>
mostly used to connect to a CSS style sheet ex: rel="stylesheet" type="text/css" href="01_MyStyle.css"
Each declaration consists of a pair....
of "attribute:value" and is terminated with a ";"
DOM: methods
open(), close(), write(), writeln(), getElementByName(), getElementById(), getElementByTagName(), renameNode(), setAttribute(), getAttribute(), removeAttribute(), etc.
external link of css has three components
rel="stylesheet" type="text/css" href="styles.css"
BOM: window
represents an open window in a browser. - (open, close, name, length, width, parent, screenleft, screentop, alert(), prompt(), print(), moveTo(),moveBy(), scrollBy(), scrollTo(), blur(), setTimeout(), etc)
CSS documents are simply a series of rules that govern how various HTML elements are displayed. Each rule has two main parts:
selector and declaration
Z-index is
simply a number. - Smaller number means farther away from you
The class selector is used to
specify a style for a group of elements.
CSS stands for and it is used for?
stands for Cascading Style Sheets. is used to control the "style and layout" or our web documents.
When creating a tag, we can include some inline style information by simply using the _____ attribute
style,
font style vs font weight
style: normal, italic, oblique weight: normal, bold, bolder, light
The text-shadow property attaches one or more shadows to text. The property. It is a comma-separated list of shadows directions - syntax ?
text-shadow: h‐shadow v‐shadow blur color;
base tag <base>
the default address for all "relative" links on the page
The text-align property specifies....
the horizontal alignment of text in an element. Alignment includes: - Left - Right - Center - Justify
title tag <title>
the title of the document
What elements are within the <head> tag?
title, meta, base, style, link, script
The margin shorthand property sets all the margin properties in one declaration. This property can have from one to four values. - how does that settings of the margins works?
top, right, bottom, left
