Skip to content

LLC: JavaScript for the Web

Jump to bottom
Jonathan edited this page Apr 15, 2023 · 38 revisions

Information

  • Current version: 2.0.0-a.2

Links

Extras

Learner Language References

HTML

Syntax & Concepts

  • elements— web pages are made of elements which determine structure and content. There are over 100 different elements, some of which are listed below, separated into content elements (elements for holding and presenting content) and sectioning elements (elements for laying out a web page and grouping elements together).
  • attributes— extra information describing an HTML element
    • id— a unique identifier for an element (CSS selector: #elementId).
    • class— a label for an element to distinguish it from other elements (CSS selector: .className).
<section id="using-css" class="is-collapsible"> ... </section>

Content elements

  • h1, h2, h3— first, second, and third level headings (page and section titles).
  • p— a container for text (short for 'paragraph' but can be any block of text).
  • span, mark, strong, em— selection of text within a larger block to highlight, emphasize, or modify it.
  • ul— conatiner for an unordered (bulleted) list
    • li— individual list items in a list.
  • img— an element for displaying images

Sectioning elements

  • header— a container for the header of a web page or of a section on a web page.
  • section— a container to group together related content and elements.
  • main— a container for the main content of a web page.

CSS

Syntax & Concepts

  • rule— styling that is applied to an element.
  • class— styling that is applied to elements with a specified class, e.g.:
.dark {
  background-color: darkslategrey;
  color: white;
}

Selectors

  • element type— the name of the element (syntax: elementName, e.g.: h2, section)
  • id— a unique identifier for an element (syntax: #elementId).
  • class— a label for an element to distinguish it from other elements (syntax: .className).
  • descendant— an element contained inside another element (syntax: parentElement descendantElement), e.g.:
    • section header— selects header elements that are inside section elements.
  • child—a descendant element that is directly related to its parent, i.e., not the child of a child of the parent. (syntax: parentElement > childElement), e.g.:
    • main section will select 6 elements: all the top-level section elements (5), plus one section element that is contained within one of the sections.
    • main > section will select 5 elements: only section elements that are direct descendants of main.

JavaScript

Syntax & concepts

  • Objects— Collections of related information and functions.
  • Properties— Information related to an object. Accessing properties with dot notation: objectName.propertyName.
  • Functions— Instructions to execute. Using (calling) functions: functionName().
  • Methods— Functions that are properties of objects. Using (calling) methods: objectName.methodName().

Exercises

Exercise 0

console.log('some message');

Exercise 1

document.querySelector('someSelector');

Exercise 2

Pre-made CSS classes to use: picked, hidden, fun.

An element's classList property contains a list of its classes.

  • add('classToAdd')— adds classToAdd to the classList. If it is already there, nothing happens
  • remove('classToRemove')— removes classToRemove from the classList. If it isn't there, nothing happens.
  • toggle('classToToggle')— if classToToggle is in the classList, it is removed; if classToToggle isn't there, it is added.
document.querySelector('someSelector').classList;

document.querySelector('someSelector').classList.add('classToAdd');
document.querySelector('someSelector').classList.remove('classToRemove');
document.querySelector('someSelector').classList.toggle('classToToggle');

Exercise 3

Pre-made CSS classes to use: hidden, transparent, fun.

  • Variables are created (declared) using the let keyword, followed by another word which beocmes the variable's name.
  • Variables are start with an undefined value and are assigned values using the assignment operator, =.
  • Using a single statement to both declare a variable and assign it a value is called initializing:
let newVariable = valueOfVariable;

Exercise 4

An array is an ordered collection of data. A NodeList isn't an array, but it behaves similarly enough for our purposes.

  • document.querySelectorAll('someSelector')
  • myArray[index]— retrieves an element from myArray in the position specified specified by index inside the square brackets ([])

Exercise 5

Pre-made CSS classes: message, reveal.

for loop syntax to loop through an array or list (e.g., myArray):

for (let index = 0; index < myArray.length; index = index + 1) {
 // code to repeat
}

Exercise 6

Pre-made CSS classes: is-collapsible, collapsible.

Exercise 7

  • Listeners are added to elements using the addEventListener() method of an element. For a mouse click listener (a click event), this typically looks like:
someElement.addEventListener('click', listenerFunctionName)
  • listenerFunctionName— the name of the function that gets run when the specified event is detected (called a callback function).
  • Function creation:
function functionName (parameterA, parameterB, ...){
 // function code
}
  • function— JavaScript's keyword for declaring functions.
  • functionName— the name of the function that's being created; used to run (call) the function.
  • (parameterA, ....)— information that the function needs to run properly.
  • { function code }— code to run when the function is called.

Clone this wiki locally