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

  1. count the number of ID selectors in the selector (= a)

  2. count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)

  3. 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>

  1. Set a placeholder value for the name field.
  2. Make the name field description bold.
  3. 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

Made with Slides.com

JavaScript 101: Session 2 - The Browser

  • 2,018

More from Ray Nicholus