Part 6: Javascript Baby Steps

Presented by

Agenda

  • What is/Why Javascript?
  • Hello Javascript
  • Including it in your HTML project
  • Tools and Resources
  • Questions?

What is Javascript?

  • Javascript is an interpreted Programming Language that web browsers can run
  • It is dynamic, weakly-typed (duck-typed), has first class functions
  • C-style syntax, supports Object-Oriented, functional, imperative programming

Why Javascript?

  • Enables User interactivity with your webpage
  • Can do client-side manipulation. I.E. Modify what a certain user sees w/o affecting other users
  • Allows asychronous communication between servers and other pages
  • Alter your HTML document's content on the fly

Hello Javascript

<script>
document.getElementById("helloButton").click(function() {
  alert("Hello Javascript!");
})
</script>
<button id="helloButton">Hello Javascript!</button>

The Javascript Language: Syntax

  • Weak typing like Python:
    var a = 3; // Make a variable 'a' with value 3
    
    /*  Make global variable b with value 'hello', don't need semicolon */
    b = 'hello'
    
    // Double quotes or single quotes for string
    name = "Chris " + 'Manghane'
  • Dicts and Lists:
    // Inline array initialization
    var primes = [2, 3, 5, 7, 9, 11, 13, 17, 19, 23];
    
    /* Dictionary to map any type to any type */
    var dictionary = {
      'one' : 'Loneliest #',
      'primes': primes,
      'morePrimes' : [27, 29, 31, 37],
      'anotherDict' : { 'hello' : 'world' }
    }

Javascript Functions

  • Javascript functions are first class objects:
    // Assign functions to variables
    var aFunction = function () {
      alert('This will open a popup box');
    }
    
    // Pass in functions as arguments to functions
    var bFunction = function (anotherFunction) {
      anotherFunction();
    }
    
    // Call the function with a function as a parameter
    bFunction(aFunction);
    
    // Function parameter could be an anonymous function.
    bFunction(function() {
      alert('welp');
    });
    

Javascript Callbacks

  • Some Javascript code runs asychronously, so how do I guarantee any order?
    // The second line could run before the click() function finishes.
    document.querySelector("button").click();
    alert('button has been clicked');
  • Every function call can take in an extra function argument, that will be ran once the function finishes: A callback
    // Now the alert will run when click finishes
    document.querySelector("button").click(function() {
      alert('button has been clicked');
    });

Difference between == and ===

  • In Javascript, there's a difference between '==' and '===', also between '!=' and '!==':
    '' == '0' // false
    0 == '' // true
    0 == '0' //true
    0 === '' // false
    0 === '0' // false
  • '==' checks equality and tries to convert the RHS before comparison, so 0 == '' is true since they both evaluate to false with coersion
  • '===' checks absolute equality so 0 === '0' if false

Including JS in your HTML project

  • Very similar to how you include CSS:
    <html>
      <head>
        <script type="text/js" src="main.js"></script>
      </head>
    </html>
  • You could inline it too:
    <html>
      <head>
        <script type="text/js">
          // Callback hell
          a = function(function(function() {
            alert('hello there');
          }) {
            alert('where am I?');
          }) {
            alert('top of function');
          }
        </script>
      </head>
    </html>

Tools and Resources

Questions?