WebDev-Midterms

Scripting Language

Scripting Language

A type of programming language used to combine components together, but requires a host environment and has limited support for UI design, graphics, and data types.

Web Scripts

Scripts that can run on either the server-side or client-side, with the server-side host environment being the web server and the client-side host environment being the web browser.

Client-Side Script

A script that is integrated with HTML, responds to user interaction and other events, and has access rights to objects in the host environment such as the browser window, browser history, cookies, and web document components.

JavaScript

The most commonly used client-side scripting language, conceptualized by Brendan Eich in 1995. It is also used in server-side scripting and has evolved into a rich, high-level language with various paradigms and features.

Execution Environment

The environment where JavaScript can be specified in an HTML document, such as within a script element, as top-level code (code outside functions), or inside functions (executed only when the function is invoked).

External Script

A JavaScript script that is stored in a separate .js file and linked to the HTML document using the src attribute.

Internal Script

A JavaScript script that is embedded directly within the HTML document using the script element.

Inline Script

A JavaScript script that is included directly within an HTML tag using the event attribute.

Defer Attribute

An attribute used in script tags to download scripts asynchronously with HTML and web resources. The script executes only after the document has been parsed, but before firing the DOMContentLoaded event.

Async Attribute

An attribute used in script tags to download scripts asynchronously with HTML and web resources. The script executes as soon as it has been fetched in full, but before the Load event is fired.

Language Elements

Various elements and features in JavaScript, such as variable declarations (var and let), primitive data types (number, string, boolean, bigint, null, undefined), browser console, wrapper objects, object types, booleans, equality vs. identity, and strings.

Arrays in JS

Dynamically sized data structures in JavaScript that can contain elements of varying types. They have 0-based index values and various methods for manipulation and iteration.

Functions in JS

First-class objects in JavaScript that allow flexibility in coding. They can be stored in variables, part of an array, passed as an argument, and serve as a return value. Functions can be defined as expressions and can be named or anonymous.

User-Defined Objects

Objects defined by the user in JavaScript, which can have properties that may or may not be functions. Properties can be added dynamically to an object, and object definitions can be done using various syntaxes and methods.

JSON

JavaScript Object Notation, a text syntax for storing and exchanging data among applications. JavaScript allows JSON-formatted strings to be converted to JSON objects and vice versa using the JSON.stringify() and JSON.parse() methods.

JS APIs

Additional Web APIs used in JavaScript to access objects, such as the Browser Object Model (BOM) API (Window, Navigator, Screen, Location, History), Document Object Model (DOM) API, and others like Canvas, Fetch, Geolocation, IndexedDB, Local Storage, Push, Service Worker, Websockets, and Web Workers.

DOM API

The Document Object Model (DOM) API provides a representation of the parsed HTML document as a tree structure of nodes, including elements, element attributes, textual content, and HTML document components. It offers various interfaces and methods for manipulating and interacting with the DOM tree.

Functionalities

Various functionalities provided by the DOM API, including constructing/copying nodes, retrieving references to nodes/node collections, traversing the DOM tree, manipulating the DOM tree, event handling, and working with styles.

Event Handling

Events that occur in the DOM as a result of user interaction or generated by APIs to represent the status of tasks or DOM tree components. DOM elements can listen for events and handle them using event handlers, which can be registered to associate events with specific actions.

Events

Actions that can be triggered programmatically.

Event object

An object that represents an event and can be created to trigger events.

dispatchEvent()

A method used to trigger an event.

CustomEvent

An object used to define custom events.

AJAX

Asynchronous JavaScript and XML, a set of techniques and technologies that enable clients and servers to exchange data without reloading the entire page.

XMLHttpRequest (XHR) object

An object used to make asynchronous requests to a server.

callback functions

Functions that are executed when a request has been completed.

Promise

A type that represents the eventual completion (or failure) of an asynchronous task.

fetch API

A modern API for making network requests, including fetching resources from a URL.

Preprocessors

Tools that process data from one program and use the result as input for another program.

PUG

A JavaScript-based HTML preprocessor.

SASS

Syntactically Awesome Style Sheets, a CSS preprocessor with additional features.

LESS

A CSS preprocessor.

Libraries

Collections of utilities, functions, and modules that serve specific coding needs.

Frameworks

A set of libraries that provide a structure and functionality for building applications.

Library vs Framework

The difference between a library and a framework in terms of their usage and implementation.

Polyfills

Code or plugins that implement functionality that browsers do not natively support.

Utilization

How to use libraries and frameworks, including installation and integration instructions.

Coding Playgrounds

Online environments that provide separate frames for editing code and previewing the result.

Content Management Systems (CMS)

Software packages that provide tools for website authoring, collaboration, and administration.

Variables

let and const (block scope) vs var (function scope)

Data types

Primitive - number, string, boolean, null, undefined. Object - object, array, function

Built-in objects

Math, Date, JSON, RegExp

User-defined objects

Created using object literals, constructor functions, Object.create()

Methods

Functions associated with objects

Properties

Variables associated with objects

Arrays

Dynamically sized, zero-based indexing, mutating methods like push/pop

Functions

First-class objects, can be passed as arguments or returned from other functions

Arrow functions

Concise syntax for anonymous functions using =>

Template literals

Use backticks `` to embed expressions ${expression}

Spread operator

... used to expand iterables into individual elements

Destructuring

Extract values from arrays/objects into distinct variables

Scope

Global, function, block

Hoisting

Variable and function declarations moved to top of scope

Closures

Inner function has access to variables in outer function scope

this keyword

Refers to current execution context object

Strict mode

prevents accidental globals, disables some problematic language features

JSON

JavaScript Object Notation, parsing and stringification

Promises

Handles asynchronous operations, .then() and .catch()

Event handler

Function that runs in response to an event

addEventListener()

Registers an event handler on an element

Common events

click, submit, keydown, scroll, load, error

Event object

Contains details about event like target element

Event bubbling

Events propagate up DOM tree from child to parent

Event capturing

Events propagate down DOM tree from parent to child

preventDefault()

Cancels default behavior of event like form submission

stopPropagation()

Stops event from bubbling/capturing further

Inline handlers

<element onclick="...">

Synthetic events

Programmatically created and dispatched via dispatchEvent()

Mouse events

click, dblclick, mouseup, mousedown, mousemove

Keyboard events

keydown, keyup, keypress

Form events

submit, change, focus, blur

Document events

DOMContentLoaded, readystatechange

Window events

load, beforeunload, resize, scroll

Touch events

touchstart, touchmove, touchend

Gesture events

pinch, rotate

Pointer events

pointerdown, pointerup, pointercancel

Animation events

animationstart, animationend

Transition events

transitionstart, transitionend

Window

Represents browser window, methods like alert(), properties like innerWidth

Document

Represents page document, properties like title, methods like getElementById()

Navigator

Info about browser, userAgent property

Screen

Info about display, width and height properties

Location

URL information, href property and assign() method

History

Browser history, back(), forward(), go() methods

DOM tree structure

Document nodes in hierarchical tree structure

nodeType

Identifies type of node like element, text, comment

innerHTML

Renders HTML content inside element

textContent

Text inside element without HTML tags

parentNode

Node containing current node

childNodes

List of nodes contained in parent

firstChild, lastChild

First and last child nodes

nextSibling, previousSibling

Adjacent sibling nodes at same tree level

appendChild()

Adds new child node to parent

removeChild()

Removes child node from parent

insertBefore()

Inserts new child node before reference node

replaceChild()

Replaces old child node with new node

cloneNode()

Clones node for insertion elsewhere

getAttribute()

Gets value of element's attribute

setAttribute()

Sets value of element's attribute