T-10 to Course Start

Try jQuery (3.7 to end)

  • Interaction:
    • First things first: everything goes after the initial event handler that waits till html loads
      • $(document).ready(function(){ //all your code here code here ]);
      • Event ready takes 1 argument, a function that you will declare
        • $document.ready(<event handler function>);
    • Event delegation (target specific): fetch specific elements based on events, and then execute functions on them
      • How to look for an event, and do something with it, generally:
        • $('button').on('click', function() { // codeycode });
      • Or:
        • $('.class').on('click', 'element', function() {} );
          • can define an action that you want to execute, and call it as the third argument later:
            • $('.class').on('mouseenter', 'tag', predefined_action_function);
            • no parentheses on the function name (if there were, it would call immediately)
            • when you define a function, after the closing curly bracket, you don’t need a semicolon
      • a note about handling events
        • a click even may traverse its ancestor nodes of an html file and do strange things (follow links)
          • when calling the function in an event, pass in the event parameter and stop its propagation: $(“.class1”).on('click', '.class2', function(event) { event.preventDefault(); //behaviour desired code });
        • stopPropagation will prevent another event handler from being called, but wont stop the weird link-following behavior in the html
    • Things to listen for
      • mouse: focusin, focusout, mousedown, mouseup, mousemove, mouseout, mouseover, mouseenter (hovering over), mouseleave, dblclick
      • keyboard: keypress, keydown, keyup (stopped pressing a key)
      • forms: blur, focus (clicking into it), select, submit, change
    • Things to do:
      • class manipulation (say…highlighting)
        • Best:
          • .addClass('newclass'),  .removeClass('oldclass'), and .toggleClass() are used without periods for the class in the parentheses
          • just make subclasses that contain some change, and then trigger that subclass
        • Putting in CSS into your Javascript:
          • .css(attr, value)
          • many:
            • can chain many of these together to change the values of many attributes
            • better: .css( { 'attr1': 'value1', 'attr2': 'value2' });
          • hide/show css: .show() or .hide()
      • Hiding and showing an element
        • .slideToggle(), .slideDown(), .slideUp()
        • .fadeIn(), .fadeOut(), .fadeToggle()
        • might be useful to assign a variable to an elements that you fetch
          • can then do many actions on the same element
          • and then add them to other elements (fetch contents of one tag and then repackage them)
      • getting/returning values:
        • get: place.val()
        • place: place.text(quantity)
          • sets either a value or a string
      • attaching nodes From Yesterday: where.append(new_guy), .prepend(), .after(), .before(), .remove()
      • animations
        • having some CSS in your JS
          • For Example: .animate({'top': '-10px'}, millisecond_length) . default millisecond is 400 ('fast'/'slow' = 200/600)
          • add dependencies with conditions
            • since we know how to add classes in cases where things are clicked or mouse over, we can then have some animation be triggered by the change of a class
              • useful to depend on .toggleClass('')
            • if place.hasClass('class_we're_lookingfor') { // stuff to do }
        • changing the CSS itself
          • on the class that will be left, add: transition: top 0.2s;
            • CSS transitions must be supported by the browser too
              • look for info on internet, might need: -moz-transition: top 0.2s; -o-transition: top 0.2s; ......
          • on the class that will be entered, add: top: -10px
  • Traversing with more precision
    • $(this).action() with events
    • can select from something’s parents: $(this).parents('.vacation')
    • .closest('.class') finds the closest, returns either 1 or 0 elements
    • $('.class1').filter('.class2') is a union search, (for intersection just use commas)
  • data- tag
    • interact via: .data(<name>, <value>)
  • Debugging tips
    • calling .length on a DOM object will return the number of nodes on the page: $('li').length; => 3 if there are three li ‘s on the page
  • More jQuery?

CSS

  • adding CSS into html
    • link to stylesheet: <link rel="stylesheet" href="styles.css">
  • selectors (more)
    • element selector, html elements mapped to CSS
      • html: head = CSS: header
    • class=
    • id=
    • can compound selectors
      • in the html, class names that have spaces in them are like subclasses, so to refer to them from the CSS sheet, treat them as such (with periods, or Sass nesting).
      • nested elements (NO matter what they are, class, id, html element) just have spaces between them in the CSS (.class1 .class2)
  • Precedence: external stylesheets < head < inline < marked !important
  • Stylesheet: can reopen classes, but conflicts will be settled by a later attribute’s occurrence
  • float: left/right/none
    • containers don’t stretch to the floater size if the container doesn’t have any non-floating items: leads to overlap on top of other containers
    • clearing floats
      1. target containers that come after the floater filled one
          • give following containers’ classes a clear left/right/both in its CSS
            • Caveats: subsequent ones are indeed fine, but if you change sequence of elements, no good… and doesn’t work with borders
      2. target container with floats instead, add a class with a clear after the floater
        • requires an empty element – removing the floater later will leave that empty element
      3. clearfix
        • .group:after { content: ""; display: table; clear: both; }
        • add group class to a parent container, and have it self clear any floated elements inside of it
  • Override inheritance with nesting
    • Specificity: 0, 0, 0 , 0
      • number inline styles, num of id selectors, num of class selectors, num of element selectors
      • so, don’t use too many ids

Core Javascript

  • Comparisons
    • "55" == 55 => true because it employs data conversion
    • === does not employ data conversion
  • Statements
    • do/end curly brackets go around each part of an if/else if/else statement: if (condition) {}; else if (condition) {} ; …….
    • do/while: do { } while (condition); (p70)
  • Rubylike
    • comparisons of letters work: "a" < "b" => true
    • my favorite ternary operation is in Javascript, and is a descendant of Java: condition ? returned_if_true : returned_if_false
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s