reading-notes

6 Reasons for Paired Programming

Pair programming is the practice of two developers sharing a single workstation to interactively tackle a coding task together.

There are 2 roles in pair programming

• Driver

• Navigator

• The Driver is the programmer who is typing and the only one whose hands are on the keyboard.
  • manages the text editor
  • switches files
  • writes code
• The Navigator uses their words to guide the Driver but does not provide any direct input to the computer.
  • Does not write code
  • Thinks about what comes next
  • Looks up documentation and solutions

The SUPPOSED reasons for paired programming are

1. Efficiency - SUPPOSDEDLY even though it takes longer its leads to higher quality

2. Engaged Collaboration - SUPPOSDEDLY its more engaging

3. Learning from fellow students - (ok this is true) Partners can learn from one another while coding

4. Social Skills - improves social skills?

5. Job Interview readiness - prepares for a job interview environment

6. Work Environment Readiness - prepares for the work environment where you have to work in groups.

JavaScript & JQuery by Jon Duckett

P293-301 306-331 354-357 Ch 7

JQuery

jQuery is a JavaScript file that allows you to find elements using CSS-style selectors and then do somethng with the elements using jQuery methods

jQuery() - lets you find one or more elements in the page and creates an object called jQuery which holds reference to those elements.

• $() is the shorthand method of writing this

jQuery is similar to DOM in that you can use selectors, store objects in a variable and use methods and properties to manipulate DOM nodes. The syntax is just simpler

Example of a jQuery object

$('li.hot')

Example of a jQuery method

.addClass('complete');

Shown together

$$('li.hot').addClass('complete');

the period between the object and the method is called the member operator it indicates the method on the right should be used to update the elements in the object on the left

complete is the parameter. It provides details about how to update the elements.

In order to use JQuery you need to include the jQuery script on your page. It goes before the </body> tag. here is an example

<script src="js/jquery-1.11.0.js"></script>

after the jQuery tag you put the regualar js tag

pg 299 of the book shows an example of jQuery in action

jQuery doesn’t do anything you cant do with JavaScript but its more efficient and less code and has cross browser compatiblilty

Matched Set/jQuery Selection

single element - If a selector returns one element the JQuery object contains a reference to just one element node

multiple elements - If a selector returns several elements, the JQuery object contains refereces for each element

each element is given an index number

Get Information

If a jQuery selection holds more than one element and a method is used to get information from the selected elements, it will retrieve information from only the first element in the matched set.

Set Information

If a jQuery selection holds more than one element and a method is used to update information on the page, it will update all of the elements in the matched set, not just the first one

When you create a selection with jQuery, it stores a reference to the corresponding nodes in the DOM tree. It does not create copies of them. it stores the LOCATION of the object

the jQuery object is an array-like object because it stores a list of the elements in the same order that they appear in the HTML doc.

JQuery stores references to objects in variables

implicit iteration - the ability to update all of the elements in the jQuery selection

There is no need for looping in jQuery. You can update all of the elements using one method

chaining - The process of placing several methods in the same selection by using dot notation to seperate each one.

example of chaining

$( 'l i [i d!="one"] ') . hide() .delay(SOO) . fadeln(1400);

OR for easier reading you can put them on different lines

example:

$('li[id!="one"] ') .hide() .delay(500) . fadeln(1400);

Most methods used to update the jQuery selection can be chained but methods used to RETRIEVE info from the DOM cannot be chained. Also if one method in the chain does not work neither will the rest.

Example of the Ready Event method

$(function() {

};

Any statements inside themethod automatically run when the page has loaded

Getting Element Content

.html() - retrieves only the HTML inside the first element in the matched set, along with any of its descendants.

.text() - returns the content from every element in the jQuery selection, along with the text from any descendants.

pg 315 shows how to append to the DOM

Updating Elements

.replaceWith() - replaces every element in a matched set with new content. It also returns the replaced elements

.remove() - removes all of the elements in the matched set

.html - gives every element in the matched set the same new content which may include HTML

.text() - gives every element in the matched set the same new text content. Any markup is shown as text

These can all take a string as a parameter The string can:

• Be stored in a variable
• Contain markup

A function can also be used as a parameter for these methods

If you append a new element that has·attributes,

• use single quotes to surround the content.
• use double quotes for the attribute values themselves.

Inserting Elements

The following methods are used to add content to the DOM

.before() - inserts content before the selected elements

.after() - inserts content after the selected elements

.prepend() - inserts content inside the selected elements after the opening tag

.append() - inserts contenet inside the selected elements before the closing tag

prependTo() and appendTo are methods to add content. They work the other way around from .prepend() and .append()

Example

a. prepend(b) adds b to a a.prependTo(b) adds a to b

a. append (b) adds b to a a.appendTo(b) adds a to b

Getting and Setting Attribut Values

.attr() - This method can get or set a specified attribute and its value.

• To get the value of an attribute, you specify the name of the attribute in the parentheses. example:

$( ' li#one').attr('id');

• To update the value of an attribute, you specify both the attribute name and its new value.

example:

$('li#one').attr('id' , 'hot ' );

.removeAttr() - removes a specified attribute (and its value). You just specify the name of the attribute that you want to remove from the element in the parentheses.

example:

$('1 i #one') . removeAttr (' i d' };

.addClass() - adds a new value to the existing value of the class attribute. It does not overwrite existing values

.removeClass() - removes a value from the class attribute, leaving any other class names within that attribute intact

Getting and Setting CSS properties

.css() - a method that allows you to retrieve and set the values of CSS properties

1. To get the value of a CSS property, you indicate which property you want to retrieve in parentheses. If the matched set contains more than one element, it will return the value from the first element.

2. To set the values of a CSS property, you specify the property name as the first argument in the parentheses, then a comma, followed by its value as the second argument. This will update every element in the matched set. You can also specify multiple properties in the same method using object literal notation.

Working with Each Element in a selection

.each() - allows you to perform one or more statements on each of the items in the selection of the element that is returned by a selector. Similar to a loop in JavaScript * The only parameter it takes is the function containing the statements you want to run on each element * the function can be named or anonymous

$(this) - uses “this” to create a new jQuery selection containing the current element. It allows you to use jQuery methods on the current element

Event Methods

.on() - used to handle all events. adds an event listener to each element in the selection. It needs 2 parameters 1. the event you want to respond to 1. the code you want to run when that event occurs

The event object

page 328 lists the propertys and methods for events

Load jQuery scripts before the closing body tag because the script is not blocking other things from downloading and the DOM has already loaded by the time the script is executed.

https://deannaj401.github.io/reading-notes/