CS 381 Study guide stuff

when implementing jQuery library files where do you implement it in the html file a. head b. body

head

What is the topmost object with DOM objects?

document object (current webpage)

what are some ways to use the jQuery selector instead of getElementsById or others

$("a") $("li.hot") $("#nav1") $(".fadein")

how would you use jquery to find the first child of the table element li

$("li: first-child")

how would you set content for both html and text using string and what do they affect

$("selector").html(htmlString) $("selector").text(textString) updates all of the elements in the matched set.

how would you call a jQuery method

$("selector").methodName(parameters)

how would you use jquery to find the even numbered rows in a table

$("table > tr:even")

to recreate a loop for every element selected what would you do using a function?

$('li').each(function(){ you NEED .each

if updating an html using jquery how could you be specific trying to change updated as its tag

$('li').html('<li>updated</li>');

give an example of getting html content

$('li').html();

updating text with specficness using updated as its selection for specific updating

$('li').text('updated');

how would you remove a value in jquery from its class attribute of selected elements

$('li).removeClass('hot').addClass(favorite');

how to assign event delegation? in jquery

$('ul').on( ;click mouseover', ':not(#four)', {status: 'important''}, function(e) .on is the prefered approach

what is the shorthand of jQuery()

$()

how to set a jQuery ready method and where do you place it

$(function(){ (at the beginning of the js file) }); (ends at the end of the js file)

how to use jquery selectors for multiple selectors (use commas)

'#faqs li, div p' 'p + ul, .minus'

how would you create an array of an object? (code wise)

(with function Product(label,cost){ this.label =label this.cost = cost;) var products = []; var item = new Product("milk", 2.45); products.push(item);

in jquery how would you add value to existing class attribute that does not overwrite

.addClass('new value')

in jquery how would you create an attribute?

.attr('attribute name')

what in jquery would you use to get the content of the selection

.html() but it only retrieves content from the first element in the matched set

in jquery how would you remove a specific atribute and its value

.removeAttr('attribute name')

how do you get the text content using jquery give an example

.text() $('li').text(); turns it into a string

What are the three was to handle an event?

1. HTML event handlers(also known as inline javascript) 2. Traditional DOM event handlers(DOM level 0 event handler) 3.DOM level 2 event listeners(DOM level 2 event handlers)

What are the 2 methods of event objects and what do they do?

1.) preventDefault(): cancel default behavior of the event if that event is cancelable 2.)stopPropagation(): stops the event from bubbling or capturing any further.

How to access the event object in the event handler? 2 options explain

1.) when the event handler function has no paramater except of the event object function stopDefAction(e){ e.preventDefault();} var el=document.getElementById('mybox'); el.addEventListener('click', stopDefAction,false); 2.)when the event handler function has paramaters other than the event object function checkUsername(e,minlength){ var target=e.target;} var el= document.getElementById('username'); el.addEventListener('blur',function(e){ checkUsername(e,5);},false);

What properties of Event objects are there and what do they do?

1.)target: indicates the target of the event(most specific element interacted) 2.)type: Indicates the type of event that was fired 3.)Cancelable: return a Boolean, which indicates whether you want to cancel default behavior of element/event

how would you add a button to a table

<td class='col-xs-1'><button type='button' value='0' id='cb-0' class='btn btn-primary add-item'>Add</button></td> must add td class first and /td at end

what are tables made of html tag wise(which is the headers and which are the locationsforeach sub area)

<tr> is typically the labels <td> is typically the sub labels <td> is usually added in (example) <tr id ='labels'> <td class='col-xs-2'>ID</td> <td class='col-xs-2>Make</td> </tr>

What are the three groups of build-in objects and what do they do?

Browser related objects: used to create a model of the browser tab or window. DOM related objects: used to create a model of the current web page. Global JavaScript objects: used to create models of different things in JavaScript.

What is an event?

Events are the browsers way of indicating something has happened (this causes your code to become interactive)

What two types of web storage are there?

Local storage: Items in local storage that stay between browser sessions. you use localStorage to access it Session storage: items that when the session ends will dissapear from storage. use sessionStorage to access.

what is the "this" keyword used for?

Used to access the element that event is bound to.

What kind of events are there?(name 6)

User interface events(load, scroll) Keyboard events(keypress, keyup) mouse events(click, mouseover) focus events(focus,blur) html events(form related to events) mutator events&observers

in jquery what do these do to a jquery object a. .before() b .after() c .prepend() d .apend()

a Insert content, specified by the parameter, before each element in the set of matched elements b Insert content, specified by the parameter, after each element in the set of matched elements. c Insert content, specified by the parameter, to the beginning of each element in the set of matched elements. d insert content, specified by the parameter, to the end of each element in the set of matched elements.

in dom with jquery selection we can access other element nodes, what do these do a .siblings b. .next() c .nextAll() d .prev() .prevAll()

a find all siblings of current selection b find next sibling of current element c findall subsequent sibling of current element d same as next only backwards

in dom with jquery selection we can access other element nodes, what do these do a .find() b .parent() c .parents() d .children()

a find elements within current selection with what you give it b find direct parent of current selection c find all parents of current selection d find all children of current selection

how to use jquery selector to search for elements by relationship a. descendants b. adjacent siblings c. general siblings d. children

a. '#faqs p' b. 'h2 + div' c. 'h1 ~ h2' d. 'div > ul'

how to use a jquery selector to find an elemnt by a. element b. id c. class

a. 'elementname' b. '#idname' c. '.classname'

difference between data storing sets in arrays and objects

arrays allow you to store items in order objects allow you to select items by name

what does .on do? in jquery give example

attachs an even handler to one or more events of the selected elements .on(events[, selector] [,data], handler)

what 3 properties are nodes usually made from and define them

className: returns value(s) of the class attribute from an element id: return the value of the id attribute from an element value: return the value of the value attribute

what does jQuery offer

easy to use functions and javascipt tasks. updates DOM tree easily, along with event handling, very consistent and is cross-browser compatible!!

When is the event error used?

fire when the browser encounters a javascript error or an asset does not exist

When is the event resize used?

fires when the browser window has been resized

When is the event scroll used?

fires when the user has scrolled up or down the page.

When is the event load used?

fires when the web page has finished loading.

When is the event unload used?

fires when the web page is unloading (usually becomes a new page has been requested)

When is the event keydown used?

fires when tuser presses any key on the keyboard

When is the event keypress used?

fires when user presses a key that would result in a character being shown on the screen.

When is the event keyup used?

fires when user releases a key on the keyboard

What is Jquery?

free, open-source, javascript library. provides functions for commonweb features.

using product how could you create a product object type with id type price and dprice

function Product(pid, ptype, price, dprice){ this.pid=pid this.ptype = ptype; this.price = pricce; this.dprice = dprice; } var product_list =[];

how would you add a element to a function like adding a table row

function addTableRow(index){ var newTrElement = document.createElement('tr'); var newTDElement = createNewTdElement(item.type); newTrElement.appendChild(newTdElement);

How do you declare a function? (written out)(both with and without a function)

function fname(paramater list){ function statments(like var*var=var) return value(s); } var vname = function(param list){ function statements; return value(s);} //assigning func to var

How can you interact with methods related to attributes?

getAttribute(), setAttribute(), hasAttribute(), removeAttribute()

what would the selector :eq(n) do

gets you the element at the index (n)

When is the event mouseover used?

hovering over an element

in jquery what does forEach() do?

it Iterates an element in object array

in jquery what does push() do?

it adds the item to an object array

in jquery what does .filter() do?

it filters the array object elements

what are the two key jquery libraries

jQuery(core library) and jQuery UI (user interface for use of jQuery core)

What is the one property String objects have?

length like "bob" bob.length==3

how would you remove and or clear an item from local storage? give an example using email.

localStorage.removeITem("email") localStorage.clear();

Examples of set and get for local storage for an email.

localStorage.setItem("email", "[email protected]"); localStorage(.getItem"email")

When is the event mouseout used?

moves off the element

How to deal with functions with parameters as event handlers?

put a named function with parameters within an anonymous function. ex.) var el=getElementById('username'); el.onblur=function(){checkUsername(5)}; el.addEventListener('blur', function(){checkUSername(5);},false);

what does .off do? in jquery give example

remove an event handler from one or more events of the selected elements off(events [, selector], handler)

what does .remove() do in jquery

removes all of the elements in the matched set

what does .replaceWith(replaceString): do? jquery

replaces every element in a matched set with the new content and returns replaced content

When is the event dblclick used?

same as click only you have to double click the element

what would the selector :gt(n) do and :lt(n)

selects all elements higher than the index selected (n) and selects all elements less than the index selected

Look at page 128 and 137 in your textbook

seriously do it.

what is the script called that you have to implement into the html file

src='jquery-1.12.3min.js"

if you use jQuery library alone then you only need to include the jQuery javascript file (true or false)

true

How to remove an event handler?

useing removeEventListener (similar to addEventListener)

How does HTML event handlers work

uses some attributes defined in html to specify event and attatch event handler (<input type="text" id="username" onblur="checkUsername()">) this is not used typically

how does DOM event Listeners work?

using event methods associated with DOM objects), reccomended way. var el =getELementByID('username'); el.addEventListener('blur', checkUsername, false); element.add(or remove)EventListener('event',functionName,[,boolean]);

how does DOM Event Handlers work?

using event properties associated with DOM objects ex.) var el=getElementBYId('username'); el.onblur = checkUsername; element.onevent = functionName; //bind an event to an html element(must have "on")

how would you attach an event handler to the additem() function

var elements = document.getElementsByClassName('add-item); for(vari=0; i<elements.length; i++){ elements[i].onclick = addItem;

give an example of how to create an object using a hotel as an example

var hotel={};//declare a blank object first hotel.name='quay' hotel.rooms=40; hotel.booked=25; hotel.gym=true; hotel.roomTypes=['twin','double','suite']; hotel.checkAvailibility=function(){ return this.rooms - this.booked;};

how to access/modify objects. say you want to change the hotel name how?

var hotelName =hotel.name; //dot notation var hotelName = hotel['name'] //square notation hotel.name = 'park';

how to add table rows with data cells

var newTextNode = document.createTextNode(cell_content); var newTdElement = document.createElement('td'); newTdElement.appendChild(newTextNode); return newTdElement

give an example of storing objects into an array and then retrieving them

var people = [ {name: 'casey', rate: 70, active: true}, {name: 'joe', rate: 80, active: false}] [] are important var name = people[0].name; var rate = people[0].rate;

give an example of storing objects into another object

var people = { {name: 'casey', rate: 70, active: true}, {name: 'joe', rate: 80, active: false} } {}are important var name = people.Casey.name; var people.Casey.rate;

When is the event DOMNodeInsertedIntoDocument used?

when a node is inserted into DOM tree as a descendant of another node that is already in the document

When is the event DOMNodeInserted used?

when a node is inserted into the DOM tree

When is the event DOMNodeRemoved used?

when a node is removed from the DOM tree

When is the event DOMNodeRemovedFromDocument used?

when a node is removed from the DOM tree

When is the event focus used?

when an element gains focus (text box being ready for text with the |)

When is the event blur used?

when an element loses focus (click on something else)

What is an event object?

when an event occurs, the event object can tell you info about it and which element it happened too.

When is the event DOMSubtreeModeified used?

when the DOM structure changes

When is the event mousemove used?

when u move the mouse

When is the event click used?

when user clicks on lmb or the enter key on keyboard when element has focus

When is the event mousedown used?

when user presses a mouse button while over an element

When is the event mouseup used?

when user releases a mouse button while over an element (dragging)

how to create a dynamic variable object

window[dynamic variable name] or an example v var item = window['product_' + i]