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]