"hello widen"



JavaScript 101

Session 1

Basic Concepts

assumptions



  1. little to no prior knowledge
  2. non-development background
  3. comfortable with the browser
  4. basic understanding of HTML/CSS

goals



  1. become more comfortable with JavaScript
  2. ...with the browser's dev tools
  3. troubleshoot client-side code
  4. be able to help yourself
  5. (maybe) write e2e/unit tests

non-goals



  1. Develop a non-trivial web app or library
  2. Deep understanding of libraries such as jQuery, angular

approach



  • move slowly
  • start simple
  • introduce & return

tools


GitHub
slid.es
Chrome
Cloud9 IDE

what is JavaScript?



  • ECMAScript
  • scripting language
  • available in all browsers
  • available server-side (node.js)
  • everything is an object*

why should i care?

growing in popularity


also...



  • relatively easy to learn
  • quick results, few obstacles to entry

    • deconstructing "hello world"



    console.log("hello widen!");

    objects


    console.log("hello widen!");

    functions


    console.log("hello widen!");

    primitives


    console.log("hello widen!");

    • undefined
    • null
    • string
    • boolean
    • number

    console?



    where did the  console  object come from?

    ...from the  window  object

    quick & dirty variables


                  function shadowingEx() {
            var a = 1;
            (function() {
                var a = 2;
                    console.log(a);
            }());

            console.log(a);
        }
        shadowingEx();

    other ways to output this text



    1. Browser Object Model:  window.alert(...)
    2. Document Object Model:  node.textContent = ""


    arrays



    • lists of items (of any type)
    • 0-indexed
    • concept of length
    • other helpful methods on prototype...

    creation


    literal:
    var array1 = ["one", 2, {three: 3}, function four() {}];


    via constructor:
    var array2 = new Array("one", 2, {three: 3});

    reading & simple updates


    read via index:

    array1[0] === "one"; 
    array1.0 === "one"; //syntax error

    add:
    array1[array.length] = "new element";

    clear:
    array1.length = 0;

    complex operations


    remove/insert at index:
    [1,2,3].splice(1,1); //remove @ index 1 
    [1,2,3].splice(1,0,"hi"); //add "hi" @ index 1

    combine 2 arrays:
    [1,2,3].concat([4,5,6]);

    search:
    ["foo", "bar"].indexOf("bar") === 1;

    including JavaScript on a page


     <script src="stuff.js"></script>

    -or-

    <script> console.log("hello widen!"); </script>

    useful references



    JavaScript 101: Session 1 - The Basics

    By Ray Nicholus

    Made with Slides.com

    JavaScript 101: Session 1 - The Basics

    • 1,935

    More from Ray Nicholus