JPEG Compression and Color Theory Quiz

JavaScript Fundamentals

• JavaScript is a programming language used to create dynamic web content
• HTML and CSS are for static content, JavaScript adds interactivity and change based on user input.

Motivation

• HTML & CSS only allow static web content
• HTML & CSS cannot change based on user interaction
• Web browsers have JavaScript engine to generate dynamic content.

JavaScript Use Cases

• Interact with HTML/CSS document content and respond to events
• Implements standard JavaScript API's defined in W3C standard
• Extends DOM and selector APIs for multimedia, drawing, animation, geolocation, webcam etc.
• Work with remote data from HTTP web servers.

Deploying JavaScript in HTML

• Include in HTML file using <script> element; <script> attribute points to an external .js file.
• JavaScript file can be located on a web server
• Embedded script: <script> can be embedded within the HTML document.
• Chrome browser includes a "REPL (read-evaluate-print-loop)" console for evaluating JavaScript code.
• Run JavaScript code using a runtime environment, such as Node.js
• Use the <noscript> tag to handle situations when scripts have been disabled or a browser does not support them.

JavaScript Overview & Definitions

• Derived from the ECMAScript standard
• Initially intended for use on Netscape Navigator
• Not related to the Java programming language
• Built into web browsers to add dynamic behavior to static web content.
• Functions to run when HTML document loads or accompanied by form input.
• Useful for creating dynamic multimedia in documents.
• Primitive data types: number, String, boolean, null, undefined
• Object data types.

JavaScript Primitive Types

• Number: Numbers are stored in floating-point notation; include 5, 1.24, 1.1e5, Infinity, -Infinity, and NaN
• String: A sequence of characters, like 'hello',
• Boolean: Values are true or false
• Null: Represents a null value
• Undefined: A variable that has been declared but has no assigned value.
• boolean, if, delete, var, function, etc. = reserved words of the JavaScript language.

Variables & Constants

• The first letter of a variable: $ and _ or letters a-z, A-Z.
• Variable has two scopes; global and block scope.
• Var keyword is used to declare a local variable or object. If the var keyword is omitted, a global variable is declared.
• The keyword new is used to create instances of wrapper objects.

JavaScript Strings

• JS strings are a series of 16-bit unsigned integers, each representing a character.
• Escape characters use backslash: '\n', '\t', '\'
• Strings are immutable - any manipulation results in a new string
• Examples for String Methods
• indexOf: to search for a string inside another string
• substring: to extract sub strings

JavaScript Booleans

• Any value can be used as a Boolean in JavaScript (when used with logical operators).
• Falsy values: null, undefined, 0, NaN, "
• Truthy values: true, 6

JavaScript Null & Undefined

• Null: a value that can represent a "no value" assignment to a variable.
• Undefined: the variable was declared but no valid assignment was made.

Arrays

• Declaring an array can use literal notation
• An array constructor can also be used
• Elements of any type can be included in arrays, like numbers, strings, booleans, and other objects.
• array properties, push, pop, length,

Array Indices

• Use zero-based indexing scheme
• Arrays dynamically grow/shrink by adding/removing elements when elements are added/removed, the length property is updated automatically ■ The largest index in the array corresponds to the value of array.length - 1

Objects

• Objects are used to store key-value pairs, accessible through myobject.property or myobject['property'].
• Key-value pairs can be added to an object after initial declaration.

Error Objects

• Error Objects Instances are created when an exception is thrown
• Properties: Message–a descriptive message, and Name - type of error: TypeError, RangeError, URIError
• Custom error objects can be created using throw new Error(), only positive values are permitted.

Conditionals and Loops

• Conditional statements like if/else to control the flow of the program based on conditions
• Loop statements like for and while to execute blocks of code repeatedly
• JavaScript tries to convert strings to numbers if comparing them to other numbers.

JavaScript Operators and Expressions

• Unary operators include typeof, and increment/decrement operators (++, --)
• Binary operators include fundamental arithmetic operators: (+, -, /, *). Modulus operator (%)
• Concatenation is achieved using + or the concat method.
• Equality operators include === which checks for both type and value

Comparing Objects

• Objects are only equal if variables point to identical object references.

Declaring & Using Functions

• Functions are blocks of self contained reusable code and begin with the keyword "function".
• Function name follows; function parameters are in parentheses
• Curly braces contain the code to execute in the function
• Function can explicitly return a value using the "return" statement
• Or implicitly return undefined by default;
• Functions can be defined using an expression that can be stored in a variable.
• Functions accept a variable number of parameters.

Creating Custom Objects

• use the keyword "new" when creating custom objects
• The data associated to an object is accessed through dot notation (myobject.property).
• Data can still be added or removed from objects after they are created and initiated.

Prototypes

• Object instances inherit properties and methods from their object prototype.
• Built in JavaScript objects that can be constructed using the new keyword have built-in prototypes.
• All JavaScript objects have prototypes
• Script can add or override custom properties and methods to the prototype. This will change the behaviour of the objects without affecting the static object prototypes.

Debugging JavaScript

• Write messages to the browser's developer console
• Use an addXToThePage function for in page debugging.

Asynchronous JavaScript (1)

• JavaScript programs in browsers are event-driven.
• JavaScript programs that are server based typically wait for requests to be complete before doing anything.
• JavaScript Core language does not have asynchronous capabilities,
• The JavaScript language does provide functionalities that enable asynchronous programming, such as: promises, async, await and for/await

Asynchronous JavaScript (2), Common Methods

• Using Callbacks • Using Promises • Using async and await • Using asynchronous iteration

Asynchronous Programming with Callback

• Derived from functional programming.
• Often employed to add interactivity in HTML documents
• JavaScript callback functions are functions that are passed as arguments to other functions and executed inside them. ▪ When a certain condition is met in called function, the callback is invoked.
• Common Forms: • Events: Events-driven JavaScript programs can register callback functions for specified event types. • Timers: Set and clear timers using setTimeout and setInterval. • Network Events: Fetching data from a web server using XMLHttpRequest.

DOM Events

• Source element - this (the element that the event occurred to)
• Event object - properties of events: general, keyboard, and mouse
• events load, keyboard{keydown, keypress, keyup}, mouse{ mouseenter, mouseleave, mousemove, mouseup, mousedown, click, dblclick}

Assigning DOM Event Handlers

• By HTML Event Handlers- using attributes. Example onclick
• Using Node properties - assign a function to an event. Example, btn.onclick = function() .
• By Event Handlers: addEventListener() (removeEventListener()) – allow for multiple event handlers to be added.

Intrinsic Events in Web App

• Scripts may be assigned to an element through an intrinsic attribute.
• Events like onload, onclick, onmouseover, onfocus, onkeyup, onsubmit, onselect.

Colors

• Different color models.
• RGB; Red, Green, Blue - additive color model
• CMYK; Cyan, Magenta, Yellow, Black - subtractive color model
• HSB: Hue, Saturation, Brightness
• HSL: Hue, Saturation, Lightness
• Color gamut.
• Complementary colors

Displaying Colors

• Using CSS to define colors in a variety of ways: Name, hex, shorthand hex, decimal color value, HSL
• Tools for selecting colors.

Colour Wheel

• A visual representation of colors, arranged according to their chromatic relationship.
• Primary, secondary and tertiary colors defined by mixtures.

Colour Conversion

• Converting between color models occurs when processing images and data.

RGB Color Model

• The tristimulus theory of color vision. ■ It states that human eyes perceive color through the stimulation of the three visual pigments in the cones of the retina ■ Red, Green and Blue.
• RGB model can be represented by a unit cube defined on R,G and B axes.
• Ex. of colors with 8 bits/channel: 256 power 3 =16,777,216 colours.

CMYK Color Model

• A subtractive color model, useful for printing using pigments on a surface with light reflecting
• Color is produced by mixing color pigments with white and black pigments
• Based on Cyan, Magenta, and Yellow primary pigments, plus added black pigment.
• Unit representation - white at origin.
• Transformation from RGB to CMYK and vice versa.

HSB Color Model

• A cylindrical-coordinate representation for colors.
• Involves Hue, Saturation, and Brightness.

HLS Color Model;

• Another cylindrical-coordinate representation for colors.
• Involves Hue, Lightness and Saturation.

YIQ Color Model

• A color encoding used for forming a composite video signal used for color television
• Conversion matrix from RGB to YIQ and vice versa.

Lab Color Model

• A device-independent color model, that describes how colors appear to the human eye.
• Uses lightness, green-red and blue-yellow components.

Grayscale Color Model

• Generates shades of gray by varying intensity/brightness

Comparison of Colors Models

Color Selection & Applications

• Graphical packages can offer color selection tools for better user experience .
• Including color sliders, wheels, and other visual aids for selecting values instead of raw numerical values.
• Guidelines for app design- use guidelines for spacing colors to prevent eye fatigue, and using tints and shades for visual appeal.

CSS Color and Properties

• CSS allows for various ways of specifying color values, such as color names (e.g., red, blue), using hexadecimal color values (e.g., #FF0000), and decimal values (e.g., rgb(255,0,0))

SVG

• A two-dimensional graphics format that employs an XML grammar
• Supports various shapes, colors, and attributes,
• Attributes for specifying, shapes, coordinates, colors, and other features,
• Supports interaction between these elements,
• Uses CSS and JavaScript for further customization.

Data Persistence

• In the context of cookies and other data persistence mechanisms
• Cookies are tied to a domain and can store data in variable length strings
• Can be tied to a specific domain, or subdomain (e.g mydomain.com subdomain.mydomain.com)
• Cookies used for authentication for instance
• Cookies have expiration dates - enabling automatic cookie deletion
• Different means of storage exist besides using cookies, these methods will differ based on app requirements and functionality.

Workers and Messaging

• Single threaded JavaScript challenge for use cases that span across multiple events or processes.
• Introduce workers (dedicated web workers or shared web workers) to use to handle long operations in the background; to offload these tasks onto a separate thread
• JavaScript workers enable many concurrent processes to run independently.
• Allows communication with their parent thread using asynchronous messaging.

Web Games

• Using multiple canvas elements that can be stacked, or layered on a single page for more complex games
• Working at >60 frames per second using the requestAnimationFrame API; using dedicated processing threads to prevent the main thread from freezing
• Data for audio, images and textures can be included through the Web Audio API, and other HTML elements for displaying media and handling effects and interactivity, using event listener methods.

Progressive Web App (PWA)

• Hybrid application combining web apps and native app capabilities
• Built using standard web technologies (HTML, CSS and JavaScript)
• Functions like being installable (as an app) through the main browser
• Using a service worker enables offline functionality
• Use a manifest to define the app's functionality and behaviour as well as specify icon images, etc.

Digital Video Fundamentals

• Digital video consists of stored images (frames) shown at a certain rate
• Frames are captured at a given rate, e.g 24, 25, 30 or 60 frames per second
• Analog video is represented as a time-varying signal and requires certain encoding and decoding methods to view on a device.

Analog Video Signals

• Component video - Higher-end systems that use red, green, and blue color signals
• Composite video - color and intensity signals mixed into a single carrier wave
• S-video- uses two wires: one for luminance and another for a color chrominance signal.

Standards for Analog Color TV

• NTSC - U.S., Japan, Taiwan, parts of the Caribbean, and South America
• PAL - Australia, New Zealand, Western Europe, and Asia
• SECAM - France, former Soviet Union, and Eastern Europe
• Conversion methods (e.g., the matrix from RGB to Y'IQ) and frame rates (e.g., 30 fps for NTSC) differ by standard.

How CRT Monitors and TVs Display Pictures

• CRT monitors display pictures by tracing horizontal lines across the screen
• Lines are traced sequentially from top to bottom in steps
• Progressive and Interlaced scanning are two methods of tracing.

Video Sequence Access

• Time code and frame numbers provide access into the sequence of frames within the video recording.

Digital Video Standards

• Standard definition
• High definition
• Digital television

The DV Term

• DV compression, and DV format-specific types of compression and format
• Used specifically by digital video formats.

Common Video File Types

• .mov
• .avi
• .mpeg
• .divx
• .ogg/.ogv
• .webm
• .flv
• .f4v
• .wmv

Image Types

• Raster (pixel-based) images- composed of discrete points
• Vector (path-based) images - define images through geometric shapes instead of continuous colours

Image File Compression Strategies

• Lossless Compression
• Lossy Compression

Lossless Compression

• A lossless compression method reduces the file size but does not lose any image quality
• Compression and decompression techniques always go together.
• Ex. Run length encoding (RLE) - based on repetitions in the image
• Ex. Huffman Coding, Shannon-Fano Algorithm, and Arithmetic Coding

Lossy Compression

• A lossy compression method reduces the file size by discarding some image data, but the loss is generally unnoticeable in typical images, or multimedia.
• Commonly used techniques: JPEG, MPEG, MP3
• Suitable for images/videos, but not suitable for text files

Compression Ratio

• Compression Ratio is a calculation used to determine the effectiveness of a compression algorithm.
• calculated by dividing the number of bits before compression by the number of bits after compression

MPEG Video Codec

• Used for digital moving pictures and audio storage/archival
• MPEG standards for encoding video in different formats

MPEG Family (1), MPEG (2), MPEG (4)

• MPEG-1, MPEG-2, MPEG-4
• Main features, video types (I-frame, P-frame, B-frame) and structure
• Each MPEG version is designed to create certain advantages over their predecessors, especially better compression and handling of various quality outputs/in puts

MPEG Goals

• Optimized for applications that support a continuous transfer bit rate of about 1.5mbps.
• Does not support interlaced sources, and was initially used for Web and CD ROM playback, rather than for TV programming.
• Designed for high resolution video, used for DVD video format, and high quality video transmission.

Streaming Audio

• streaming audio - Play audio immediately after the request
• Advantages- addresses long download times; controls distribution and copyhright
• Disadvantage - sound quality may be affected by low speed or unstable connections

D3.js

• Web-accessible, sophisticated data visualisation framework.
• Based on HTML and CSS elements, and provides a visual framework and tools to enable data-driven interactions
• Data-driven transformations instead of recreating the data display elements
• Visualisation is possible to many types of structured data like JSON/CSV inputs
• Enabling various graphic interfaces like maps, charts, and other types of graphical displays are possible

Data Visualisation with D3.js

• Charts
• Interactivity
• Maps
• Networks
• Hierarchical layouts
• MVC Dashboard
• Extends D3
• Optimization

D3 Core Functions

• Core functions to help create D3 visualisation through manipulating selections, mapping data, and data-element joins
• D3 Selects function enables elements selection to subsequently change their appearance using CSS and other options

Scales

• Scale functions- D3.js scaling functions map values from a given domain range to a new visual space.
• Three categories of scales: ordinal, quantitative and others

Line (and Area) Generators

• D3.js data binding patterns enable easy construction of dynamically changing lines and regions on a canvas with various data mappings, such as those constructed from object types
• By using D3.js data binding functions, and mapping functions, the transformation of data into visual lines/regions is handled seamlessly.