BIT 4444 EXAM2

jQuery form selectors

$(":input") - All form elements $(".text")- All form elements with type = "text" $(:submit")- All form elements with type ' "submit" $(":button")- All form elements with type = "button"

jQuery attribute selectors

$("[attrName]")- all elements with an attrName attribute $("tag[attrName = 'value']")- tag elements with the attrName attribute value equal to the given value

Arithmetic operators:

+addition -subtraction * multiplication /division %modulus (remainder) ++increment --decrement

Why use javascript?

- Adds interactivity and visual enhancement - Mainly used for client-side execution - Processing client requests that do not require server processing - No internet traffic

CSS media queries

- Allows you to decide what a page should look like depending on the media type being used to display the page - A media type can be screen, print, handheld, braille and speech - If css style applies to all media types, it is declared by @media all

Potential problem of viewport that may cause bad user experience:

- An element can be wider than the viewport - No guarantee that content will look good one all screens.

Changing HTML elements: element.innerHTML = new html content element.attribute = new value element.setAttribute(attribute, value) element.style.property = new style

- Changes the inner HTML of an element - Changes the attribute value of an HTML element - Changes the attribute value of an HTML element - Changes the style of an HTML element

Where does javascript code go?

- Embedding javascript in HTML - Putting the javascript in its own file

Arrays: The first element in every array is the first element. The th element of array c is referred to as c[i - 1] Every array in JavaScript knows its own length, which it stores in its length attribute and can be found with the expression arrayname.length

- False (Its the zeroth element) - True - True

Grid systems

- Fluid grid system is the most commonly used in RWD - Supports 12 columns and columns will automatically re-arrange depending on the screen size

When to use javascript?

- For visual enhancement that CSS cant do - For advanced animation

Two old models for registering event handlers:

- Inline model treats event as attributes of HTML element. (calls javascript function directly in the HTML code) - Traditional model assigns the name of the function to the event property of a DOM node

Declaring and allocating arrays:

- JavaScript arrays are Array objects. You use the new operator to create an array and to specify the number of elements in an array. E.g., varn1= new Array(3); varn3 = new Array(); varn2 = ["Ford", "Toyota", "Honda"];

CSS media queries disadvantages

- Lengthy code - Cant cover all possible devices

What are the ways to return control to the point at which a function was invoked

- Reaching the function-ending right brace - Executing the statement return; - Executing the statement "return expression;" (to return the value of expression to the caller)

Advantages of jQuery

- Separation of javascript and HTML - Brevity and clarity Elimination of cross- browser incompatibilities -Extensibility

Cons of javascript

- The client may not have enough processing resources - Javascript can be turned off for security reasons.

DOM's hierarchical structure:

- The top level is a document object - Each element name is represented by a node - A node that contains other nodes is called a parents node - A parent node can have many children , but a child node can have only one parent - Nodes that are peers are sibling nodes - A node's descendant nodes includes its children, its children's children and so on - A node's ancestor nodes include its parent, its parent's parent and so on.

Viewport

- User's visible area of a web page - Varies depending on the size of the device screen - Automatically sets the width of the page to the screen-width of the device <meta name="viewport" content="width=device-width, initial-scale=1.0"

RWD solutions

- Viewport - CSS media queries - Grid systems

date methods in javascript

- getHours (0-23) - getDay (0-6) - getDate (1-31) - getMinutes (0-59) - getMonth (0-11) - getFullYear (yyyy)

Input / output in javascript Debug

: console.log() : console.error()

Input / output in javascript (limited bc of security) Output

: window.alert() -popup message box : document.writeln() or document.write()

Input / output in javascript Input

: window.prompt() - input box : confirm() - ok/cancel box

jQuery basic filters

:first- First of the given selector type :last- last of the given selector type :gt(idx), :lt(idx), :eq(idx)- Elements with indices greater than, less than, or equal to an index :animated - items that are being animated :focus - the element that currently has the focus :has(tag)- elements that a tag element :contains(text)- elements that contains text

What code indicates that javascript function "start" should be called when the body elements load:

<body onload = "start()">

What is an anonymous function?

A function without a name

What is an array?

A group of variables that have the same name and normally are of same type

What happens when the mouse cursor leaves the element?

A mouseout event occurs for that element

Adding event handlers: document.getElementById(id).onclick = function () {code}

Adds event handler code to an onclick event

Array methods: push()

Adds new element to the end of an array

Window methods: alert() setTimeout() setInterval()

Alert()- display an alert message and an OK button setTimeout()- call a function a specified number of milliseconds setInterval()- call a function at the specified interval in milliseconds

What does javascript events do?

Allows scripts to respond to user interactions and modify the page accordingly

Why use DOM?

Allows us to access or manipulate a document's elements when writing programs (ex- javascript)

What happens when the mouse cursor enters an element?

An mouseover event occurs for that element

What does the window object represent?

An open window in a browser. If a document contains frames (<iframe>tag), there is a window object for the HTML document, and one additional window for each frame

Logical operators:

And (&&)- (A<B) && (C>D) Or (||) - (A<B) || (C>D) Not (!!) (E>F)

Client side scripting and their limitations.

Client side scripting: - validate user input - interact with the browser - enhance web pages - add client/server communication between a browser and web server Limitations: - The browser or scripting host must support the scripting language and capabilities - Sensitive information, such as passwords or other personally identifiable data, cannot be stored or validated on the client - Placing large amounts of javascript on the client can cause security issues

What can javascript do?

Client-side - Control browser features - Modify document appearance - Modify document content - Store & use information about user - Manipulate images - React to state of browser and client system

Array methods: concat()

Concatenates two arrays into one

What is an element? And how are those elements referred to?

Element is an each individual location. Elements are referred to by giving the array's name followed by the position number of the element in square brackets []

Method AddEventListener can only be called once. (True or False)

False Method addEventListenercan be called multiple times on a DOM node to register more than one event-handling method for an event.

What does document object model do?

Gives you scripting access to ALL the elements on a web page. It defines: - HTML5 elements as objects - The properties of all HTML elements - The methods to access all HTML elements - The events for all HTML elements

What does responsive web design use to resize, hide, shrink, enlarge, or move the content to make a web page look good on any screen?

HTML and CSS (cost effective alternative to mobile applications)

What does events and event handling do?

Helps make web applications more dynamic and interactive

What is PHP?

Hypertext Preprocessing - A programming language for creating dynamic web pages and is always executed on the web server (as opposed to the web browser on the client side) - PHP commands typically contain HTML code - When PHP commands are processed, only the output is sent by the web server to the client's web browser

Javascript functions: Built- in function

Includes math calculations, String manipulation, Date and time manipulations, Manipulations of collections of data called arrays

What is responsive web design?

It makes your web page look good and have the same user experience on all devoces..\

What is an event handler? What is registering an event handler?

Its a function that responds to an event. Assigning an event handler to an event on a DOM node .

What is jquery?

JQuery is a cross-browser javascript library, which aims to simplify javascript programming. - Free, open source Core features- - DOM element selection and manipulation - Handling events - Creating animations - Ajax applications

Assignment operators:

JScript Example SameAs = x=y x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y

What does javascript do?

Lets you create, modify and remove elements in the page dynamically by: - changing all the HTML elements in the page - changing all the HTML attributes in the page - Change all the CSS styles in the page - Removing existing/add new HTML elements and attributes - Reacting to all existing HTML events in the page - By creating new HTML events

What does valid javascript variable names consist of?

Letters, digits, underscore and dollar signs - DOES NOT BEGIN WITH A DIGIT - NOT RESERVED JAVASCRIPT KEYWORD

What are DOM collections?

Links, images, forms, and anchors.

What does the load event do?

Load event fires when the window finishes loading successfully - All its children are loaded and all external files referenced by the page are loaded - DIFFERENT from the Form.Load event in VB.NET (Every DOM element has a load event, but its most commonly used on window object_

Is Javascript java?

No - No graphical user interface - No read/ wrote file access on clients - Not a class-based object model - No multithreading - Do not need the java virtual machine (needs a browser)

Javascript dynamic data types

Number - var length = 16; String - var lastName = "Mishra"; Array - var cars = [crv, accord, civic]; Object - var x = {firstName: "Anuja", lastName = "Mishra"};

Bootstrap

Open-source front-end framework, also known as UI toolkit, for designing web applications

Array methods: shift()

Removes first element in array and return the removed element

Array methods: pop()

Removes last element in array and returns the removed element

Array methods: indexOf()

Search array for an element and retuen its position index

Server side scripting and their limitations

Server- side scripting - Wider range of programmatic capabilities than their client- side equivalents Limitations- - Increased demand for computing resources on the server - Increased network traffic - Dependent on a network connection

String operators:

String concatenation (+)

jQuery basic events

The document ready event fires after the document is finished loading (is ready) $(document).ready(function(){ //code here// })

Examples of multi-tier application architecture

Top tier- (front-end) HTML, CSS< javascript, jQuery Logic tier- (middleware) PHP, java EE, ASP.NET Data tier- (back-end) MySql, Sql Server, Oracle, DB2

Both HTML and XML are specified in the Document Object Model (DOM). (True or False)

True

DOM is an internal map of the HML/SML document. (The root element of an HTML document object is <HTML>

True

Document object is the root of an HTML document. (True or False)

True

If a script in the head attempts to get a DOM node for an HTML element in the body, getElementByIdreturns null because the body has not yet loaded. (True or False)

True

Javascript is case-sensitive (True or False)

True

The html node in a DOM tree is called the root node, which is the parent node of all HTML elements in the page. (True or False)

True

The nodes in a document make up the page's DOM tree, which describes the relationships among elements. (True or False)

True

The traditional model uses a property of an object to specify an event handler. (True or False)

True

How do you find HTML attribute?

Use the dot(.) operator to access element attribute values. Example: <html>... <imgid="myImage" src="oldpic.jpg"> ...</html> varx=document.getElementById('myImage'); x.src= "newpic.jpg";

Multi-tier application architecture

Web-based applications are oftern multitier applications that divide functionality into separate tiers. Although tiers can be located in the same computer, the tiers of web- based applications typically reside on separate computers. Bottom tier (data or information tier)- maintains the application data Middle tier- implements business logic (business rules), controller logic and presentation logic to control interactions between the applications' client and data Top tier (client tier) - user's interface. In response to user actions, the client tier interacts with the middle tier to make requests and to retrieve data from info. tier. The client then displays the data retrieved for the user. (The client never directly interacts with the information tier)

Can a function be used as an argument to another function?

Yes eg- window.setTimeOut(obj, 5000);

Javascript functions: Programmer defined functions

You can define functions that perform specific tasks

jQuery manipulating CSS

addClass("className")- Add class attributes with value=className to selected element(s) removeClass("className")- Remove a specific class attribute from selecte delements hasClass("className")- Return True if the selected elements have the specified className css("cssproperty")- Return the css property value of the first selected element css("cssproperty", "value")- Set a specified css property with the given value for all selected elements

If var a = 10; what is: b = a++; b = ++a; b = a--; b = --a;

b = 10 and a = 11 b = 11 and b = 11 b = 10 and a = 9 b = 9 and a = 9

var a = 3; var b = "3"; var c = (a==b); var d = (a===b); Is c and d true or false

c = true; d = false; (the data type is different_

More events

click()$("p").click(function(){ ...}) mouseenter()$("p").mouseenter(function(){ ...}) mouseleave()$("p").mouseleave(function(){ ...}) hover()$("p").hover(function1(){...}, function2(){...}) focus()$("input").focus(function(){ ...}) blur()$("input").blur(function(){ ...}) submit()$("#target").submit(function(){ ... })

Control structure: Loops Do

do {// loop code goes here } while (condition);

Adding and Deleting Elements: document.createElement(element) document.removeChild(element) document.appendChild(element) document.replaceChild(element) document.write(text) what do these methods do?

document.createElement- creates an HTML element document.removeChild- remove an HTML element document.appendChild- Add an HTML element document.replaceChild- Replace an HTML element document.write(text)- write into the HTML output stream

The collection's length property specifies the number of items in the collection. What are some of the examples of that:

document.forms.length //number of forms in the page document.images[1] //the second image in the page

Finding HTML elements: document.getElementById(id) document.getElementsbyTagName(name) document.getElementsByClassName(name)

document.getElementById(id)- find an element by element id document.getElementsbyTagName(name)- find an element by tag name (ex- p or h1 etc) document.getElementByClassName(name) - find elements by class name

What javascript code indicates that function "start" should be called when document loads

document.onload = "start()";

Comparison operators:

equal == (x==y) strict equal === (x===y) not equal! = (x!=y) strict not equal !== (x!==y) greater than > (x>y) (or equal) >= (x>=y) less than < (x<y) (or equal) <= (x<=y)

Embedding javascript in HTML is the best way for code reuse? (True or False)

false

Control structure: Loops For

for(statement 1; condition; statement 2){ // loop code goes here}; Example: for (i=0; i<5; i++) { ...};

Template of programmer defined function

function name (parameters, if any) { // function code goes here }

Document object methods: getElementById() writeLn() write()

getElementById()- returns the value of the element at the specified id writeLn()- writes a line of output to the document (adds a new line at the end) write()- writes output to the document

Control structure: conditions: if

if (condition) { // area when condition is true } else { // area when condition is false };

jQuery basic syntax and selectors:

jQuery basic syntax: $(selector:filter).action() jQuery basic selectors: $("tagName") - All tagName elements $("tag1, tag2") - All tag1 and tag2 element $("id value")- The element with the id value $(".className")- All elements with class className $("tag.className") - Tag elements that have class className $("*")- All elements in the page $(this)- The element with the current focus

Array methods: sort()

sorts an array

Control structure: conditions: switch

switch (expression) { case n; // code when case is true break; ... default: // default code break; };

jQuery manipulating HTML

text("txt")- set or return the text content of selected elements html()- set or return the content of selected html elements (including tags) val()- set or return the value of form fields append() / prepend() - Insert content at the end/ beginning of the selected elements after() / before()- Insert content after/before the selected elements

A function can be considered as an object and referenced by a variable. For example:

var obj = function(){ console.log("Hello");};

Control structure: Loops while

while (condition){ // loop code goes here };

if: x = "hello " + 'world" x = "hello" = 5 x = "5" + 5 x = Number("5") + 5 what does x equal:

x = hello world x = hello5 x = 55 x = 10

var x = "Virginia Tech" var y = x.length y = x.IndexOf("i") y = x.lastIndexOf('i") var z = x.substring(9, 13) z = x.substr(9,4) z = x.toUpperCase() z = x.toLowerCase()

y = 13 y = 1 (starts from 0) y = 6 z = "Tech" z = "Tech" z = VIRGINIA TECH z = virginia tech