School

Advanced Javascript

Week 02

Class

Read

  • Inline Event Handling

    Registering event handlers. Don't use inline event registration. (separate behavior and structure) Default Action - prevent and allow. Event script is executed first and then the default action takes place after. Can't prevent unload. This keyword (owner of a function) pass as argument to store parent object

  • Modern JS Functions

    const myFunction = () => { //... } Parameters are passed in the parentheses or if only one param, omit parentheses Implicit return. Wrap objects with curly braces in parentheses const myFunction = () => ({ value: 'test' }) myFunction() //{value: 'test'} "this" keyword This is where regular functions should be used instead, when dynamic context is not needed.

  • Searching the DOM

    document.getElementById(id)

    Method Searches by... Can call on an element? Live?
    querySelector CSS-selector ✔ -
    querySelectorAll CSS-selector ✔ -
    getElementById id - -
    getElementsByName name - ✔
    getElementsByTagName tag or '*' ✔ ✔
    getElementsByClassName class ✔ ✔
    Besides that: There is elem.matches(css) to check if elem matches the given CSS selector. There is elem.closest(css) to look for the nearest ancestor that matches the given CSS-selector. The elem itself is also checked. And let’s mention one more method here to check for the child-parent relationship, as it’s sometimes useful: elemA.contains(elemB) returns true if elemB is inside elemA (a descendant of elemA) or when elemA==elemB.

Watch