The Browser
JavaScript 101
Session 2
HyperText Markup Language
Defines the semantics of a web document
Created by Tim Berners Lee @ CERN - 1990
First Implemented in WorldWideWeb/Nexus - 1991
First popular implementation was Mosaic - 1993
Current: Version 5 (HTML5)
Simple Example
<!DOCTYPE html>
<html>
<head>
<title>A Simple Example</title>
</head>
<body>
<div>Some text</div>
</body>
Cascading Style Sheets
Language that defines the style of a web document
CSS 1.0 (partially) implemented in 1996 in IE 3
Latest: Version 3
Selectors
'#' - ID
'.' - class
'::before' - pseudo-class
':hover' - pseudo-class
'>' - child
'{{TAG_NAME}}' - element
[attr=val] - attribute
'~' & '+' - sibling (general & adjacent)
'{{SPACE}} ' - descendant
Cascading
Given an HTML fragment:
<div class="test">
<span>hi</span>
</div>
... and some CSS rules:
DIV > SPAN {
text-decoration: line-through;
}
.test > SPAN {
text-decoration: underline;
}
Which rule wins?
Specificity
A formula used to determine which style applies to an element
- count the number of ID selectors in the selector (= a)
- count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
- count the number of type selectors and pseudo-elements in the selector (= c)
a b c
The Web Without JavaScript
Some sites function mostly as they did before
(google.com, yahoo.com)
...others are drastically affected
(gmail.com, fineuploader.com)
Should you disable JavaScript?
Yes.
Also, download all HTML files & read them in a text editor too (just to be extra safe)
The Web API
Interface that allows us to manipulate the browser via JavaScript
Sub APIs: DOM & BOM
The DOM
Standardized in 1998 by the W3C
Provides JavaScript objects that mirror elements in a browser document
Create, locate, manipulate, and describe elements
Element Objects
JavaScript representation of document elements
for example:
a <div> is an HTMLDivElement object
an <a> is an HTMLAnchorElement object
etc...
Hierarchy of DOM Elements
Creating Elements
document.createElement("div");
document.createElement("a");
document.createElement("table");
...
Finding Elements
document.getElementById("element_id")
element.getElementsByClassName("element_class")
element.getElementsByTagName("element_tag")e
element.children
node.parentNode
node.firstChild
node.lastChild
node.parentElement
node.nextSibling
node.previousSibling
More versatile locators...
document.querySelector("selector_string");
document.querySelectorAll("selector_string");
element.querySelectorAll("selector_string);
Get the "link-related" content
<div id="foo">
<span class="moreinfo">
<span>For a unique uploading experience...</span>
<a href="http://fineuploader.com">check it out</a>
</span>
</div>
var foo = document.getElementById("foo");
var more_info = foo.getElementsByClassName("moreinfo")[0];
var link_related_content = more_info.children;
...how else can we do this?
Identifying Elements
var element = document.getElementById("container");
What is this element?
console.log(element.tagName);
Is it a <video>?
element.tagName === "VIDEO"
-or-
element instanceof HTMLVideoElement
Changing Elements
- Set a placeholder value for the name field.
- Make the name field description bold.
- Make the name field input required.
But how?
Don't Overuse JavaScript
- Don't style via JS unless necessary
- Don't add attrs or generate HTML via JS needlessly
JavaScript 101: Session 2 - The Browser
By Ray Nicholus
JavaScript 101: Session 2 - The Browser
- 2,001