JavaScript/Notes/ClassnameSwap: Difference between revisions

From Noisebridge
Jump to navigation Jump to search
 
(22 intermediate revisions by 2 users not shown)
Line 6: Line 6:
Event flow is defined by DOM Events specification
Event flow is defined by DOM Events specification
[http://www.w3.org/TR/DOM-Level-3-Events/#event-flow DOM Event Flow]
[http://www.w3.org/TR/DOM-Level-3-Events/#event-flow DOM Event Flow]
[[File:Eventflow_.png]]
Event objects are dispatched to an event target. At the beginning of the dispatch, implementations MUST first determine the event object's propagation path.


Event flow example from Brainjar.com
Event flow example from Brainjar.com
[http://www.brainjar.com/dhtml/events/default3.asp event phase]
[http://www.brainjar.com/dhtml/events/default3.asp event phase]
Example of event bubbling on a table header:
[http://jsbin.com/ezEfOvaR/1]


=== Lesson: CSS ClassName Swap ===
=== Lesson: CSS ClassName Swap ===
By changing an element's <code>className</code> multiple styles can be changed at one time.  
By changing an element's <code>className</code>, multiple styles can be changed at one time.  


Using the descendant selector, and changing the <code>className</code> of an ancestor element, multiple elements can be updated simultaneously, with a modicum of highly efficient code.
Using the descendant selector, and changing the <code>className</code> of an ancestor element, multiple elements can be updated simultaneously, with a modicum of highly efficient code.


For Styles, replace a loop that applies styles to descendants by adding a class token to the nearest common ancestor ([http://jibbering.com/faq/notes/code-guidelines/descendant-sel.html example], [http://jibbering.com/faq/notes/code-guidelines/#design explanation]).
Jsbin Example: [http://jsbin.com/IYaYiTAC/4/edit document.body.className = ""]
 
For Styles, replace a loop that applies styles to descendants by adding a class token to the nearest common ancestor.
 
==== Example ====
Affect styles of descendant elements by adding a class token to the nearest common ancestor.[http://jsfaq.org/notes/code-guidelines/descendant-sel.html example], [http://jibbering.com/faq/notes/code-guidelines/#design explanation].
 
 
=== ClassName and ClassList ===
<source lang="html4strict">
<div id="foodiv" class="foo bar baz">blah</div>
</source>
<h4>ClassName and HTML5 ClassList</h4>
<source lang="html4strict">
foodiv.className; // "foo bar baz";
foodiv.classList.contains("foo"); // true;
foodiv.classList.add("bing"); // void.
foodiv.classList.remove("bar"); // void.
foodiv.classList.toggle("bing"); // void.
</source>
 
A fallback for older browsers that don't support HTMLElement DOMTokenList:
https://github.com/GarrettS/ClassTokenList
http://www.whatwg.org/specs/web-apps/2009-10-27/multipage/urls.html#domtokenlist-0


==== Calculating Selector's Specificity ([http://www.w3.org/TR/CSS2/cascade.html#specificity CSS 2.1]). ====
==== Calculating Selector's Specificity ([http://www.w3.org/TR/CSS2/cascade.html#specificity CSS 2.1]). ====
Line 21: Line 51:


CSS Selector specificity is determined four numbers, a-b-c-d, in a number system with a large base.
CSS Selector specificity is determined four numbers, a-b-c-d, in a number system with a large base.
a=1, b=0, c=0, and d=0
<blockquote cite="http://www.w3.org/TR/CSS2/cascade.html#specificity">
<blockquote cite="http://www.w3.org/TR/CSS2/cascade.html#specificity">
    count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
#    count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
    count the number of ID attributes in the selector (= b)
#    count the number of ID attributes in the selector (= b)
    count the number of other attributes and pseudo-classes in the selector (= c)
#    count the number of other attributes and pseudo-classes in the selector (= c)
    count the number of element names and pseudo-elements in the selector (= d)  
#    count the number of element names and pseudo-elements in the selector (= d)  
</blockquote>
</blockquote>


Line 57: Line 89:
.pdf.word {  
.pdf.word {  
     background-color: #D0D;
     background-color: #D0D;
}
.html {
    background-color: #e5d426;
}
}
</source>
</source>
Line 75: Line 111:
</source>
</source>
==== Bonus: CSS Transitions ====  
==== Bonus: CSS Transitions ====  
For bonus points, use [https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions CSS Transition]s for the active state of the rows and buttons.  
For bonus points, use [https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions CSS Transition]s for the active state of the rows and buttons. See also: [http://css-tricks.com/controlling-css-animations-transitions-javascript/ Controlling CSS Animations and Transitions with JavaScript]) by Chris Coyier


==== Extra Bonus: Gradients ====  
==== Extra Bonus: Gradients ====  
Add CSS Gradients. [http://www.colorzilla.com/gradient-editor/ Gradient editor]
Add CSS Gradients. [http://www.colorzilla.com/gradient-editor/ Gradient editor]

Latest revision as of 14:00, 2 March 2014

ClassName Swap, Language Review, RTFM, by Garrett Smith[edit]

This class shows a simple, efficient trick using event bubbling and css cascade:

Lesson: DOM Event Flow[edit]

Event flow is defined by DOM Events specification DOM Event Flow

Eventflow .png

Event objects are dispatched to an event target. At the beginning of the dispatch, implementations MUST first determine the event object's propagation path.

Event flow example from Brainjar.com event phase

Example of event bubbling on a table header: [1]

Lesson: CSS ClassName Swap[edit]

By changing an element's className, multiple styles can be changed at one time.

Using the descendant selector, and changing the className of an ancestor element, multiple elements can be updated simultaneously, with a modicum of highly efficient code.

Jsbin Example: document.body.className = ""

For Styles, replace a loop that applies styles to descendants by adding a class token to the nearest common ancestor.

Example[edit]

Affect styles of descendant elements by adding a class token to the nearest common ancestor.example, explanation.


ClassName and ClassList[edit]

<source lang="html4strict">

blah

</source>

ClassName and HTML5 ClassList

<source lang="html4strict"> foodiv.className; // "foo bar baz"; foodiv.classList.contains("foo"); // true; foodiv.classList.add("bing"); // void. foodiv.classList.remove("bar"); // void. foodiv.classList.toggle("bing"); // void. </source>

A fallback for older browsers that don't support HTMLElement DOMTokenList: https://github.com/GarrettS/ClassTokenList http://www.whatwg.org/specs/web-apps/2009-10-27/multipage/urls.html#domtokenlist-0

Calculating Selector's Specificity (CSS 2.1).[edit]

The classname swap example leverages the fact that class selectors (e.g. .foo) have higher specificity than element selectors (e.g. tr).

CSS Selector specificity is determined four numbers, a-b-c-d, in a number system with a large base.

a=1, b=0, c=0, and d=0

  1. count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
  2. count the number of ID attributes in the selector (= b)
  3. count the number of other attributes and pseudo-classes in the selector (= c)
  4. count the number of element names and pseudo-elements in the selector (= d)

JavaScript Review[edit]

Functions[edit]

Specifications[edit]

Other versions of ECMAScript, including E4X and Compact, are out of scope for this class.

FAQ[edit]

FAQ, is currently being ported to Github! Get involved

Assignment[edit]

Based off of the example, create a table with headers that when clicked highlight the rows of that type.

For example, for a table with three headers: "word", "pdf", "html"; create a table that has rows of class "word", "pdf", and "html". The rows need not be distinguishable in their default state (they can all look the same). When the header is activated, highlight the row by changing its className.

The row types need not be mutually exclusive. For example, you could, for a row with class="word pdf" use purple, as: <source lang="css"> .word {

   background-color: #00F;

}

.pdf {

   background-color: #F00;

}

.pdf.word {

   background-color: #D0D;

}

.html {

   background-color: #e5d426;

} </source>

<source lang="html4strict">

<thead>
 </thead>
 <tbody>
Word PDF HTML
Word

</source>

Bonus: CSS Transitions[edit]

For bonus points, use CSS Transitions for the active state of the rows and buttons. See also: Controlling CSS Animations and Transitions with JavaScript) by Chris Coyier

Extra Bonus: Gradients[edit]

Add CSS Gradients. Gradient editor