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>

MDN has a complete element reference

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


<form id="myForm">
    <span class="nameFieldText">Please enter your name:</span>
    <input type="text" name="full name">
    <input type="submit">
</form>

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