Skip to content

Instantly share code, notes, and snippets.

@martinlaws

martinlaws/0_lecture_notes.md

Forked from fzero/0_lecture_notes.md
Created August 22, 2016 20:53
Show Gist options
  • Save martinlaws/2649680ce33a6d4ddca4a11f29a4156c to your computer and use it in GitHub Desktop.
Save martinlaws/2649680ce33a6d4ddca4a11f29a4156c to your computer and use it in GitHub Desktop.
Download ZIP
LighthouseLabs - W6D1 Breakout - JS + DOM intro
Raw
0_lecture_notes.md

Javascript in the browser!

  • window, navigator
    • BOM - Browser Object Model
      • navigator represents the the browser basic code (or kernel) and properties, like version, user agent string, language, geolocation options and so on.
      • window is a "god object" containing all browser components, such as the address bar (window.location), modal dialogues (alert(), prompt()) and the window being displayed on screen itself. It's also the top object where all global variables are assigned to.
  • document
    • DOM - Document Object Model
    • Contains all of the content being displayed - in other words, whatever is inside the window.
    • The document represents all content as nodes - tags, text, images, and so on.
    • The document API makes these nodes available to the Javascript engine
      • document.getElementById - find a single element using its id
      • document.getElementsByClassName / document.getElementsByTagName - find all elements by class or tag
      • document.querySelector - find a single element using a jQuery-like selector
      • document.querySelectorAll - find all elements matching a selector
  • Events
    • element.addEventListener - attaches a function to an event. Examples:
      • button.addEventListener('click', function(ev){...}) - run function when button is clicked
      • document.addEventListener('mousemove', function(ev){...}) - run function when the mouse is moved
    • DOMContentLoaded
      • A useful event that's triggered when the page finishes loading
      • Usage: document.addEventListener('DOMContentLoaded', function(){...})
      • If you're using jQuery, you can use the $(function(){...}) shortcut instead
    • Propagation
      • Events always propagate outwards from the innermost object - the one that's nested deeper in the document.
      • This means that if you click a button inside a div that's inside another div, all three elements will receive the click event.
      • To prevent propagation, use event.stopPropagation()

Other considerations

  • Javascript code is asynchronous and event-driven. This means it will likely run out of order.
  • Because of that, it's really important to organize your code in short, simple functions.
  • This is especially useful when dealing with callbacks - and all events will require one.
  • About DOM objects:
    • If an object can contain text or html, you can get and set its contents by using the innerText and innerHTML properties.
    • You can also get/set element attributes by using the getAttribute()/setAttribute() methods.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Javascript in the browser!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello there!</h1>
<div class="add_some_space_bro" id="outer">
<div class="add_some_space_bro" id="inner">
<button id="thebutton">Click me!</button>
</div>
</div>
<!--
One way to make sure we have all DOM elements ready when the page is
loaded is to simply add all JS code at the bottom.
The other way is to hook into the `DOMContentLoaded` event.
If you're using jQuery you can also use the $(function(){})
shortcut.
-->
<script src="javascript.js"></script>
<script src="more.js"></script>
</body>
</html>
Raw
javascript.js
// Using an IIFE to protect variables defined here
(function(){
var application = "My beautiful twisted dark application";
var btn = document.querySelector('#thebutton');
var inner = document.querySelector('#inner');
var outer = document.querySelector('#outer');
btn.addEventListener('click', function(ev) {
ev.stopPropagation();
alert(application);
})
inner.addEventListener('click', function(ev) {
alert('inner');
})
outer.addEventListener('click', function(ev) {
alert('outer');
})
// To make a variable global we need to manually attach it to window
window.global_value = "Something";
})();
Raw
more.js
// This won't clobber the `application` variable we've defined in
// javascript.js, since it's in a separate function scope.
var application = "I'ma let you finish this application";
// This will display window.global_value.
console.log(global_value);
Raw
style.css
body {
margin: 2em;
font-family: "Helvetica", sans-serif;
}
.add_some_space_bro {
padding: 2em;
border: 1px solid black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment