JavaScript Basics Quiz
43 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What is the primary purpose of JavaScript in web development?

  • To manage database queries
  • To style web pages
  • To add dynamic behavior to static content (correct)
  • To create static web pages

    • JavaScript is closely related to Java.

    False

    Name one type of primitive data in JavaScript.

    Number

    The reserved keyword __________ is used to declare a local variable in JavaScript.

    <p>var</p> Signup and view all the answers

    Match the following JavaScript types with their characteristics:

    <p>Number = Can represent integers and floating-point values String = Used to represent text Boolean = Represents a true or false value Null = Indicates no value or object</p> Signup and view all the answers

    Which of the following can be used to include an external JavaScript file in an HTML document?

    &lt;script src='file.js'>&lt;/script> Signup and view all the answers

    The REPL console included in Chrome is used for evaluating JavaScript code.

    <p>True</p> Signup and view all the answers

    What will be the value of isIndex after executing opinion.indexOf('is')?

    <p>8</p> Signup and view all the answers

    Strings in JavaScript are mutable.

    <p>False</p> Signup and view all the answers

    What is the difference between null and undefined in JavaScript?

    <p>Null is a value representing 'no value', while undefined means a variable has been declared but not assigned a value.</p> Signup and view all the answers

    In JavaScript, the keyword ______ is used to create instances of wrapper objects.

    <p>new</p> Signup and view all the answers

    Match the following terms with their descriptions:

    <p>Null = No value assigned to a variable Undefined = Variable declared but not assigned a value Falsy values = Values that evaluate to false in a Boolean context Truthy values = Values that evaluate to true in a Boolean context</p> Signup and view all the answers

    What will numbers.length return after executing numbers = [1, 2, 3]?

    <p>3</p> Signup and view all the answers

    The use of backslash in a string is for using special characters.

    <p>True</p> Signup and view all the answers

    What does the concat method do in JavaScript strings?

    <p>The <code>concat</code> method merges two or more strings into one.</p> Signup and view all the answers

    With JavaScript arrays, you can use the ______ method to add an element at the end of the array.

    <p>push</p> Signup and view all the answers

    Which of the following is NOT a version of SVG?

    <p>SVG 1.5</p> Signup and view all the answers

    SVG documents can exist without a root element.

    <p>False</p> Signup and view all the answers

    Name one fundamental type of graphical object that can be used within SVG drawings.

    <p>Primitive vector shapes</p> Signup and view all the answers

    A distance measurement in SVG is given as a number along with a unit called __________.

    <p>length</p> Signup and view all the answers

    Match the following SVG attributes with their descriptions:

    <p>fill = Specifications of the type of paint used when filling a graphic element stroke = Specifications of the type of paint used when stroking a graphic element transform = Used to specify a list of coordinate system transformations color = A CSS2 compatible specification for a color in the sRGB color space</p> Signup and view all the answers

    What is produced by adding both black and white pigments?

    <p>Tones</p> Signup and view all the answers

    A monitor uses the subtractive color model.

    <p>False</p> Signup and view all the answers

    What are the three primary colors in the RGB color model?

    <p>Red, Green, Blue</p> Signup and view all the answers

    When red and green light are added together, they produce ______.

    <p>yellow</p> Signup and view all the answers

    Match the primary colors of the RGB color model with their combinations:

    <p>Red = Green + Blue = Cyan Green = Red + Blue = Magenta Blue = Red + Green = Yellow</p> Signup and view all the answers

    Which of the following pairs are complementary colors?

    <p>Green and Magenta</p> Signup and view all the answers

    The color gamut refers to the range of colors produced by a specific method.

    <p>True</p> Signup and view all the answers

    What does the term 'color space' refer to?

    <p>An abstract mathematical model that describes how colors can be represented.</p> Signup and view all the answers

    In the subtractive color model, blue is mixed with ______ to create the color cyan.

    <p>green</p> Signup and view all the answers

    In the RGB color model, how many primary colors are sufficient for most purposes?

    <p>3</p> Signup and view all the answers

    What is the main advantage of Extended Huffman Coding?

    <p>It allows grouping several symbols into one codeword.</p> Signup and view all the answers

    In LZW coding, the dictionary starts with a fixed size of 2l0.

    <p>True</p> Signup and view all the answers

    What does LZW stand for?

    <p>Lempel-Ziv-Welch</p> Signup and view all the answers

    The average code length for an information source S is strictly less than _____ + 1.

    <p>η</p> Signup and view all the answers

    Match the following coding techniques with their descriptions:

    <p>Extended Huffman Coding = Groups symbols to reduce codeword count LZW = Uses fixed-length codewords for variable-length strings Dictionary-based Coding = Dynamically builds a dictionary during encoding Compression = Reduces data size for storage or transmission</p> Signup and view all the answers

    When does the dictionary in LZW need to be flushed?

    <p>When l maximum is reached and fully occupied</p> Signup and view all the answers

    The size of the new alphabet in Extended Huffman Coding increases as symbols are grouped.

    <p>True</p> Signup and view all the answers

    What does LZW encoder and decoder do during data processing?

    <p>Builds a dynamic dictionary</p> Signup and view all the answers

    In LZW coding, the code length l is maintained within the range of [l0, _____].

    <p>lmax</p> Signup and view all the answers

    Which of the following best describes the nature of the symbols grouped in Extended Huffman Coding?

    <p>They must occur frequently together.</p> Signup and view all the answers

    Signup and view all the answers

    Signup and view all the answers

    Study Notes

    JavaScript Language - The Basics

    • HTML & CSS are used for static web content
    • JavaScript allows for dynamic web content that changes based on user input
    • Web browsers have an engine to generate dynamic content using JavaScript
    • JavaScript can be used to:
      • Interact with HTML and CSS content of a document and respond to events
      • Use standard JavaScript APIs defined in W3C standard
      • Use numerous APIs in addition to DOM and selector APIs (multimedia, drawing, animation, geolocation, webcam, etc)
      • Work with remote data from a remote HTTP web server

    Deploying JavaScript in HTML

    • Include JavaScript in HTML files (external script using <script> element with src attribute)
    • External scripts can be located on a web server
    • Embedded scripts can be included in HTML documents using <script> tags within HTML
    • A browser console (like Chrome’s REPL– read evaluate print loop) can be used to evaluate JavaScript code
    • JavaScript files (*.js) can be run in a runtime environment such as Node.js.
    • <noscript> tags are useful for situations where scripts cannot or have been disabled.

    JavaScript - Overview & Definitions

    • Derived from the ECMAScript standard
    • Originally designed to run on Netscape Navigator
    • Not related to Java
    • A JavaScript interpreter is embedded in web browsers to add dynamic behavior to static web content
    • Scripts can run when HTML documents load, accompany forms to process input, be triggered by events, and dynamically create multimedia resources.
    • JavaScript types are divided into primitive types and object types

    JavaScript Primitive Types

    • Numbers (5, 1.24, 1.1e5) are stored using floating-point notation. Includes Infinity, -Infinity, and NaN (Not a Number).
    • Strings ("Hello")
    • Booleans (true, false)
    • Null (null)
    • Undefined (undefined)
    • Boolean, if, delete, var, function, etc. are reserved words in JavaScript.
    • Primitive data types do not have associated methods or behaviors.
    • Some primitive types have wrapper objects (Boolean, Number, String).

    JavaScript Variables & Constants

    • Variables can begin with "$", "_", "a"–"z", or "A"–"Z".
    • A variable can hold a number, string, or Boolean.
    • Variables have global and block scopes.
    • var keyword is for declaring local variables or objects (var keyword omitted declares global variables).
    • typeof operator is useful for knowing the type of a variable depending on its value.
    • The new keyword is used to create instances of wrapper objects

    JavaScript Strings

    • JavaScript strings are series of 16-bit unsigned integers representing characters.
    • Escape characters use a backslash (\).
    • Strings are immutable - manipulation results in a new string.
    • String methods can be used for string manipulation (e.g., indexOf(), substring()).

    String Methods

    • indexOf(): Searches for a substring, returning its position or -1 if not found.
    • substring(): Extracts a substring from a given starting index to an ending index (exclusive)

    JavaScript Booleans

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

    JavaScript Null & Undefined

    • Null: a value that can be assigned to represent "no value".
    • Undefined: a variable was declared but no value has been assigned.

    Arrays

    • Arrays may be declared using array literal notation (e.g., [1, 2, 3]) or using array constructor notation (e.g., new Array(1, 2, 3)).
    • Arrays are zero-indexed. Array indices are used to access array elements.
    • Arrays grow dynamically by adding elements using push().
    • Elements can be removed using pop().

    Array Indices

    • Use a zero-based indexing scheme.
    • length property = largest integer index in the array.
    • arrayVar[index] adds an element at that index if index >= arrayVar.length.
    • Creating a mapping from the index to the element if index < 0.

    Objects

    • JavaScript objects store key-value pairs.
    • Access values using myobject.property or myobject['property'].
    • Key-value pairs can be added after initial declaration.

    Error Objects

    • Error objects are created when an exception is thrown.
    • Properties contain information about the error (e.g., Message, Name).
    • Custom error objects can be made (e.g., throw new Error("Only positive values are permitted")).

    Conditionals and Loops

    • if statement for conditional execution.
    • else statement for alternative execution.
    • for loop for repeating execution.
    • while loop for repetitive execution.
    • JavaScript first tries to convert strings to numbers.

    JS Operators and Expressions

    • Unary operators: typeof, ++, -- (opposite of a number)
    • Binary operators: +, -, /, *, % (modulo)
    • Concatenation operators: +, +=
    • === operator compares both type and value (strict equality)

    Comparing Objects

    • Objects are only equal if the variables are aliases (refer to the same object).

    Declaring and Using Functions

    • Functions use the function keyword.
    • Functions can have parameters in parentheses.
    • Functions often return a value using the return statement.
    • Default return value is undefined.
    • Functions can also be declared as expressions that can be stored in variables (rez = functionName(parameters)).

    Creating Custom Objects

    • The new keyword creates objects.

    Prototypes

    • Object instances inherit properties and methods from their prototype.
    • Prototypes of built-in objects exist.
    • Scripts can add or override custom properties and methods to the prototype, which applies to current working instances.
    • Modifying an object’s prototype alters its associated template (how it behaves in future instances).

    Debugging JavaScript

    • Write messages in the browser's developer console.
    • Use functions such as addXToThePage() within the Web page to display messages in the browser console.

    Asynchronous JavaScript (1)

    • JavaScript programs in a browser are typically event-driven.
    • Asynchronous means that your function does not block any other tasks or functions, but rather it runs concurrently.

    Asynchronous JavaScript (2)

    • No fundamental features in JavaScript are asynchronous by default.
    • JavaScript provides powerful tools for working with asynchronous operations. Tools include promises, async/await, and for/await

    Asynchronous JavaScript – Common Methods

    • Using Callbacks;
    • Using Promises;
    • Using async and await;
    • Using Asynchronous Iteration.

    Asynchronous Programming with Callbacks

    • Derived from functional programming.
    • Used for adding interactivity to HTML.
    • Functions (callback) are passed to other functions containing logic that execute that callback function when a particular condition is met.
    • May include arguments based on a condition or event.
    • Common callback-based asynchronous programming includes events, timers, and network events (such as XMLHttpRequest class).

    DOM Events & Event Flow

    • Events result from user actions or from the browser.
    • Event handlers are functions that execute when an event occurs,
    • They are named with on prefix (e.g., onclick or onchange)
    • Event flow involves capturing, target, and bubbling phase (ordering of how events are handled).

    DOM Source Events

    • How to access and use events from the source element
    • General events (target, type, preventDefault())
    • Keyboard events (key, keyCode, altKey, ctrlKey, shiftKey)
    • Mouse events (pageX, pageY, button, altKey, ctrlKey, shiftKey)
    • Standard events (e.g., load, DOMContentLoaded, keydown, keypress, keyup, mouse events)

    Assigning DOM Event Handlers

    • Handling events through HTML attribute notation. Example: <element EventAttribute=FunctionName()></element>.
    • Defining event handlers within JavaScript, using the property approach.
    • Example: btn.onclick = function(){}
    • Handling multiple event handlers via addEventListener() and removeEventListener().
    • Example: element.addEventListener(‘type’, function, phase).

    Intrinsic Events in Web App

    • Intrinsic events are those that are implemented directly as methods of the element

    Colours - Colour Models

    • Colour models in computer graphic programs for defining colours used by computer. The specific method of defining how colours should function is determined by the particular software used.

    Properties of Light

    • Light is a narrow band of the electromagnetic spectrum.
    • The electromagnetic spectrum includes various types from gamma rays to radio waves.
    • Red light has a frequency of around 3.8x1014 Hz; Violet is from 7.9x1014 Hz.
    • The spectrum of light source describes the distribution of light intensities according to wavelengths. It refers to how the light is related or transmitted and the colour produced.

    Colour Fundamentals

    • Luminance: measures the strength of light in a particular colour.
    • Hue: refers to the nuance (red, green, blue) and the basic colour
    • Saturation: is the intensity or purity of colour
    • Brightness: a psychological measure of the perceived intensity; the relative degree of black mixed in with a particular hue.

    Humans Only Perceive Relative Brightness

    • Humans perceive brightness according to the relative amount of blackness mixed in the image.

    Colour Properties

    • Psychological colours characteristics: ■ Dominant frequency (hue, colour), ■ Brightness = total light energy ■ Purity (saturation)
    • Chromaticity – collectively refers to purity and dominant frequency.
    • Colours can be created by artificial or natural light
    • Chemical pigments may be used to produce or change colours
    • Shades, tints and tones ■ Intuitively color concepts– Shades, tints and tones (using white and black to modify hues)

    Colour Systems

    • Additive (RGB) - Used for devices that emit light (TV sets, monitors, projectors, lighted displays, cameras, scanners)
    • Subtractive (CMYK) used for devices that absorb light (prints, paper-based, and stained glass)
    • The addition of colors in RGB can produce white; in CMYK it is black.

    Complementary Colours

    • Additive complementary colours ▪ Blue is one-third of the red, green, and a bit of blue. ▪ Yellow is two-thirds red, and green, with a bit of blue.
    • Subtractive complementary colours ■ Orange is between red and yellow ■■ Green-cyan <=> magenta-red

    Colour Models

    • Method for explaining behaviour or properties of colours in particular contexts
    • Combining light sources with different dominant frequencies produces new colours with varying intensities.
    • Different types of colour systems use different sets of colours that are essential for applications such as printers.
    • Different applications (e.g. graphic design programs) have different types of colour gamut, based on available primary colours.
    • Colour space describes the range of different colours that can be produced using a particular method.

    RGB Colour Model

    • The tristimulus theory of vision states that human eyes perceive colour through the stimulation of red, green and blue cone cells of the retina.
    • The RGB colour model can be visually represented by a unit cube.

    RGB Colour Model (cont.)

    • The 3 primary colours – red, green, and blue – are used to generate colours on monitors.
    • An increase in intensity of each primary colour results in a wide range of different colours.

    RGB Colour Model (cont.)

    • Using 8 bits per channel allows for a range of colours (from 0-255) for each colour component (red, green, and blue); to produce a total number of 2563 =16.77 million colours
    • Pixel values are defined by intensities (0 to 255) for red, green, and blue.

    CMYK Colour Model

    • Cyan, Magenta, Yellow, Black
    • Used in printing
    • A subtractive color model
    • Colour is produced by mixing the primary colours cyan, magenta, and yellow with black pigment.
    • Printing pictures using colours is based on the reflectance of light by pigments (subtractive process).

    CMYK Colour Model (cont.)

    • Black Pigment was introduced to reduce drying time of inks.
    • Spot colours can be fluorescent inks or lacquered colours.
    • CMYK model-used by various devices (and often results in images with a different color-representation-when compared to an RGB image)

    CMYK Colour Model (cont.)

    • Transformations between RGB and CMY color spaces use mathematical matrices.
    • RGB to CMY transformations include matrices and are used to reproduce colors from an RGB image to a CMY image.

    HSB Colour Model

    • Hue, Saturation, Brightness (also known as HSV) and HSL (Hue, Saturation, and Lightness); are
    • Cylindrical-coordinate representations of colours. Used for better intuitive understanding (as opposed to RGB) and to be perceptually relevant
    • Useful in programs where users interact directly with defining colours (e.g programs for graphic design)

    HSB Colour Model (cont.)

    • Hue: measured as the colour location on the colour wheel (0° - 360°);
    • Saturation: the intensity or purity of a colour. Measured as a percentage from 0% to 100%.
    • Brightness: the lightness or darkness of a colour. Measured as a percentage from 0% (black) to 100% (white).

    HSB Colour Model

    • Hue - the most notable quality of a colour
    • Saturation - high saturation means rich and full color; low means dull, grayish
    • Brightness - lightness vs darkness; tints and shades are related terms for lightness and darkness of colours.

    HSB Colour Model (cont.)

    • HSB is useful for selection of colors in programs that involve user interaction.
    • It is based on intuitive ideas rather than sets of primary colours
    • It is derived from relating HSB parameters to the direction of the RGB cube.

    Transformation RGB->HSB

    • Method for transforming RGB color space to HSB color space. The transformation is non-linear, and uses minimum and maximum values for transformations.

    HLS Colour Model

    • hue, lightness, saturation
    • another color space model that uses cylindrical-coordinate representation of colours. Provides intuitive and perceptually relevant color definitions.
    • YIQ-used in the NTSC analog video signal
    • Y - luminance
    • I and Q - chrominance (hue and saturation)
    • YIQ format converts a RGB color image into a new representation to allow older analog TV's to represent the image.
    • Matrices can be used to convert between RGB and YIQ colour spaces.

    Lab Colour Model

    • Uses human colour perception to define colours.
    • Includes luminance (L; 0-100), and two color components: green-red (a) and blue-yellow (b).
    • Device-independent model, showing color as it appears, rather than how it is created (e.g. additive or subtractive).

    Grayscale Colour Model

    • A grayscale model generates only shades of gray (from black to white)
    • An image consisting entirely of shades of grey has a fixed number of shades determined by the bit depth per pixel.

    Comparison

    • Compare types of colour systems from different images in terms of properties.

    Colour Selection and Applications

    • Graphic packages for color selection usually include tools such as sliders and color wheels.
    • Guidelines for color design may involve considerations such as colour pairs that may result in eye fatigue.

    CSS Colour Property

    • CSS (Cascading Style Sheets) syntax can specify colors in multiple ways.
    • Options include named colors (red or green), hexadecimal values (#RRGGBB or #RGB), RGB values (rgb(R, G, B)), and HSL values (hsl(h, s, l)).
    • Packages and tools often offer visual representations or utilities to aid in selection.

    Colour Wheel

    • Circular visual representation of colours using a chromatic relationship.
    • Used to represent and visualize colour relationships in graphic design.
    • Primary colours include red, yellow and blue.
    • Secondary colours include a combination of two primary colours (e.g. red and yellow result in orange)
    • Tertiary colours result from a mix of primary and secondary colours

    Colour Conversion

    • The need to convert colours in graphic design or presentation tools (e.g. converting from RGB to grayscale or CMYK).
    • The process often involves some data loss in quality of color details.

    Canvas Element

    • HTML5 feature that provides a 2-D bitmap canvas for graphics or animation.
    • Used for rendering different types of shapes (lines, rectangles, ellipses, arcs, curves) and visual effects
    • Functions for drawing operations (drawImage(), getImageData(), putImageData())
    • Several drawing styles that can be manipulated (colour, drawing width, shadows, alpha channel and advanced drawing modes)

    Drawing Principles

    • Graphic Operations in HTML5 use a graphic context that controls shape, text, and image properties.
    • Drawing operations can be grouped for efficient optimization (path mode vs. immediate mode) when performing drawing on the canvas.
    • The Graphic Processing Unit (GPU) of graphics hardware can handle processing for functions that allow parallelism
    • Buffers can be created, filled, drawn and altered using canvas element API.

    Drawing with Canvas Elements

    • Using the Canvas 2D Context API (http://www.w3.org/TR/2dcontext2) to configure the canvas element.
    • Use methods to get the graphical context element reference (id of canvas to obtain element)

    Summary of Path Mode Principles

    • Path mode drawing groups drawing operations into a buffer for efficient processing (e.g. drawing multiple figures at once).

    Dynamically Processing Shapes

    • Direct drawing involves rendering shapes directly on the canvas using functions (like fillRect(), strokeRect(), clearRect());
    • Drawing using path involves creating a path using a sequence of functions; followed by using functions (like fill() or stroke()) to draw operations on the path.

    Drawing and Moving Functions

    • moveTo(x, y): Changes the current drawing position.
    • lineTo(x, y): Draws a line.
    • rect(x, y, w, h): Draws a filled rectangle.
    • arc(x, y, radius, startAngle, endAngle, anticlockwise): Adds an arc
    • arcTo(xctrl, yctrl, xPos, yPos, radius):
    • quadraticCurveTo(cp1x, cp1y, epx, epy): Adds a quadratic curve.
    • bezierCurveTo(cp1x,cp1y,cp2x, cp2y, epx, epy): Adds a Bézier curve

    Drawing Text

    • fillText(text, x, y): Draws filled text
    • strokeText(text, x, y) draws an outline of text
    • font property describes text size and font
    • shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor for effects.

    Canvas Attributes

    • fillStyle / strokeStyle : colour used for drawing
    • lineWidth: thickness of lines.
    • lineCap: style of line endings (butt, round, square)
    • lineJoin: style of line corners (bevel, round, miter)
    • font: text size and font.
    • textAlign: text position relative to the x-coordinate (left, right, center)
    • textBaseline: text position relative to the y-coordinate (top, hanging, middle, alphabetic, bottom).
    • save() / restore(): saving and restoring contexts.

    Drawing Bézier Curves

    • Bézier curves are smooth curves that are determined by a sequence of points.
    • D3JS supports drawing Bézier curves of various orders (quadratic (one control point), cubic (2 control points)) using functions.

    2D Transformations - Canvas

    • translate(x, y) - translates (moves) the coordinate system.
    • rotate(angle) - rotates the coordinate system.
    • scale(x, y) - scales the coordinate system.
    • Transformations affect all elements drawn after the transform method is called.

    2D Transformations

    • translation: Moves the origin (0, 0) of the coordinate space
    • rotation: Rotates the coordinate space by a given angle
    • scale: Scales the coordinate space by a given factor

    rotation

    • Rotation-Rotates the coordinate system. It is defined by the angle and the center of rotation.

    Scaling/Zoom

    • scale(x-factor, y-factor) scales the drawing canvas by a ratio

    Drawing Images

    • Motivation: Using images together with 2D drawing functions.
    • Image data can be obtained using getImageData() to then work with the pixels of the image, or putImageData() to place the data into a canvas. Note: getImageData() requires a web server in some cases for security reasons.

    ImageData Interface

    • ImageData objects are used for representing rectangular areas of a canvas. The parameters provided define the area of interest in the canvas (using coordinates).
    • ImageData functions use pixel coordinates (and sizes)

    Drawing, Resizing and Cropping Images

    • drawImage(imageData, x, y) : draws an existing image at the given coordinates
    • drawImage(image, x, y, width, height) draws, and scales the image
    • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) : draws an area of an image

    Accessing Pixel Values

    • getImageData(x, y, width, height) extracts pixels from a canvas.

    Animation

    • Computer animation involves creating illusions of movement using technology.
    • Includes 2D and 3D animation.
    • 2D animators utilize bitmap graphics to generate/edit images.
    • 3D animators utilize geometric/multimedia primitives to model and manipulate objects to generate images.

    Animation Functions

    • Animation is used to provide wonder or surprise
    • animation is useful to represent things more easily and effectively
    • animation is used to provide entertainment

    Animation Techniques

    • Keyframe animation
    • Motion capture animation
    • Procedural animation
    • Color change animation
    • Show/hide/toggle animation

    Keyframe Animation

    • Keyframes are used in animation as a sort of checkpoints (images) that help determine how transitions should occur between frames.
    • Several methods of interpolation exist to transform between keyframes and provide smooth transition.

    Motion Capture Animation

    • capturing movements and using the data for animation
    • Capture movements in 3D space to represent the movement of a character
    • More realistic than other types of animation; secondary movements can also be captured to produce more realistic animation

    Procedural Animation

    • Animation based on set of rules and initial conditions
    • Used in natural phenomena simulations

    The 12 Basic Principles of Animation

    • Set of rules to achieve consistent and beautiful animation.
    • Several rules for techniques in animation (e.g., Squash and Stretch, Anticipation, Staging)

    Squash and Stretch

    • used to impart that objects such as living things have a sense of weight and flexibility to drawn objects
    • it involves emphasizing motion/impact by exaggerating the deformations of an object as if it were a pliable material
    • it must be remembered that although objects may distort like rubber, the volume of the object must be retained throughout the operation.

    Anticipation

    • A technique that prepares an audience for action, and helps make an action seem more natural

    Staging

    • A technique to focus attention and enhance understanding of a scene using camera viewpoint, framing and character positioning

    Straight Ahead Action & Pose to Pose Animation

    • Straight Ahead: Draws frames in sequence to create spontaneous motion
    • Pose to Pose: Creates strong poses (keyframes) first, and then adds in-between frames.

    Follow Through & Overlapping Action

    • Follow Through: parts of an object continue to move after the main action has ended to impart a sense of weight & flexibility to animations
    • Overlapping Actions: involves motion occurring simultaneously with the main action

    Slow In & Slow Out

    • Slow in / slow out or ease in / ease out: used to create a more natural or realistic feel to animations.
    • It involves starting and finishing an action slowly to enhance how the motion appears.

    Arc

    • Arc motion creates a more natural motion in animation.
    • The motion follows a curved or arc-like path.

    Secondary Action

    • secondary actions are minor actions or movements that enhance the main action
    • it is not independent of the primary action, but rather a result or an enhancement

    Timing

    • Timing refers to the speed and duration of an action in animation.
    • The timing of an action will contribute to emotional response & impact.

    Exaggeration

    • Exaggeration: ■used to enhance and increase the clarity of emotions and actions, ■ often used for exaggerated characteristics or poses

    Solid Drawing

    • Solid drawing: ■ Used to generate animated characters with weight, character, and emotion, ■ Involves proper drawing of characters ■ Often used for generating images or objects with greater sense of depth, balance, and realism

    Appeal

    • The appeal is what makes a character sympathetic to an audience (e.g. through flaws and unique characteristics).
    • It's what makes the animation appealing (and often relatable).

    CSS Animation

    • Uses the @keyframes rule for defining animations.
    • animation-name, duration, delay, iteration-count, direction, timing-function, fill-mode

    Animations Using JavaScript

    • Procedural animation is used to improve the animation of single objects.

    Procedural Animation - One Animated Object

    • Using setInterval to implement animation based on changes in HTML or CSS to animate objects

    Procedural Animation – Several Simultaneous Animations

    • Uses requestAnimationFrame() for multiple, simultaneous animations that are smoother than setInterval-based animations. It is more efficient in terms of CPU and memory usage.

    Procedural Animation (cont.)

    • Animation functions (e.g. animate) can use parameters for defining the duration of the animation, the calculation for the timing (using a function) and what should be drawn in different stages of the simulation.

    Asynchronous JavaScript (2)

    • JavaScript programs in a web browser are usually event-driven
    • JavaScript-based servers typically wait on incoming client requests.
    • Fundamental JavaScript commands are not usually asynchronous. However, promises, async/await, and for/await allow asynchronous operations to occur in JavaScript.

    Asynchronous JavaScript – Common Methods

    • Using Callbacks
    • Using Promises
    • Using async and await
    • Using Asynchronous Itertaion

    Asynchronous Programming with Callbacks

    • Derived from functional programming
    • Used to add interactivity in HTML
    • Function (callback) gets passed to another function and then executes afterward
    • Common: events, timers, external network events

    Events and Event Handlers

    • Listener determine if an element should act on an event
    • Handler is a function that executes when the event occurs

    JavaScript Timing Events / Timers

    • Used to run some code after a certain amount of time has elapsed.
    • The window object lets calls occur at specified time intervals that are often used to perform timing events.

    Promises

    • A Promise object is a representation of an asynchronous computation.
    • A callback function returns when a Promise value is ready.

    Promises Based Fetch API

    • A promise-based API.
    • The fetch() API allows for processing, error handling, and asynchronous tasks in a chain using .then()and .catch().

    Drag-and-Drop API

    • Drag & drop operations across windows and applications
    • It relies on DOM (document object model) for data
    • A dataTransferobject is part of the event, and is used to handle string data and MIME data type.

    Draggability

    • Images, links and text are often pre-configured and draggable.

    Fundamentals of Digital Audio

    • Sound's importance in multimedia
    • Types of sound in the context of multimedia

    Sound Fundamentals

    • Sound is created by vibration of matter.
    • Involves a sound source, transmitting medium and a receiver.
    • Sounds can be classified as periodic wave formats (e.g. musical instruments) and noise (e.g. random sounds).
    • Characterized by frequency and amplitude.

    Sound Wave Charactersitics

    Frequency; Amplitude

    Range of Human Hearing

    Anatomy of a Sound Wave

    Converting Analog Sound to Digital Audio

    • Analog sound is continuous (e.g. microphone signal).
    • Converting it to digital sound requires conversion and digitization (sampling & quantization).

    Phases of Analog Audio Digitizing Process

    • Input: Acquiring analog signal.
    • Anti-aliasing: Filters high frequencies before sampling
    • Sampling: capturing the signal at regular intervals
    • Quantization: Rounding or allocating samples numeric values in the code
    • Storage/Transmission: Storing the digital data.

    Analog to Digital Converter (ADC)

    • Converts analogue signals to digital signals
    • Analog signals have continuous values
    • digital signals have discrete values

    Sampling Process

    • Sampling involves extracting samples at a constant frequency from a continuous analog signal

    Digital Sampling Frequency

    • Specifies a rate for sampling of a continuous analog signal

    Quantization

    • Used to assign numbers to amplitude, based on available numeric values in the code.
    • Determines the quality resolution

    Storing Audio in Files

    • WAV (.wav): For storing uncompressed audio of high quality (lossless).
    • AIFF (.aiff): For storing high quality (lossless) audio.
    • MP3 (.mp3): Uses MPEG layer 3 codec, good for web and is efficient for storing audio.
    • Ogg vorbis (.ogg): An open source format well suited for web and often used for gaming.
    • Real Audio (.ram): a format well suited for streaming in real-time (requires special player)

    Factors Affecting Digital Audio Quality

    • Sample Rate (frequency of sampling),
    • Bit Rate (or Bit Depth); (vertical resolution and describes how many bits are used to describe a sample)
    • Channel (number of sound channels: e.g. mono/stereo)
    • Sample size

    Sample Size

    • Number of bits (8 bit, 16 bit or 24 bit) per sample
    • Used for audio data; greater sample size results in higher quality

    Audio Software Terms

    • Waveform – a graph representing the analog signal.
    • Clip – a small piece of audio
    • Track/Channel – an area that plays audio content

    Audio Software Terms (Cont.)

    • Channel – refers to mono (single audio channel used for reproduction) or stereo (two channels)

    Sound Compression

    • Reducing audio file size.
    • Lossy and lossless codecs used for different purposes (e.g mp3 is lossy; used for web), while other codecs (such as WAV) are lossless

    MIDI (Musical Instrument Digital Interface)

    • MIDI is a standard that allows music instruments to connect, and transfer commands to each other; these include notes, volumes and instruments, rather than transmitting sound data.
    • MIDI files have smaller file size.
    • MIDI files are not capable of storing natural sounds.

    MIDI Audio File

    • MIDI files: contain sequenced commands
    • These include commands like note, instrument and volume as a form of coded instructions for a device

    Audio File Formats

    • Wave files (.wav) are relatively uncompressed
    • MPEG Layer-3 files (.mp3) are compressed, reducing file size.
    • Other formats include formats like ogg and wma for more specialized settings and reduced file sizes

    Audio File Formats (cont)

    • WAV – a common, uncompressed audio format commonly used in programs such as Adobe Audition, and used on Windows PCs.
    • MP3 - a popular, compressed audio file format; reduces file size when compared to .wav files but the quality will be reduced.
    • Real Audio (.ra, .ram, .rm) – Proprietary format that is suitable for streaming audio over a network in real-time.

    Streaming Audio

    • Streaming audio occurs by sending data continuously to the client so that there is instant access and playback,
    • it avoids the problem of long downloads and waiting for entire files of data before being able to listen

    What is Streaming?

    • Streaming involves sending data to a user continuously with data being stored in a buffer
    • The buffer usually stores the current data being viewed by the user, as well as other data that are near the current point being viewed.

    Data Visualization - An Introduction

    • Data visualization involves converting data into visual representations to improve and ease the understanding of the data
    • D3.js – a JavaScript-based framework for handling and performing complex tasks/operations related to data visualization. The framework offers a rich set of functions and can be used for generating interactive visualizations.

    D3.js Overview

    • A JavaScript framework for handling sophisticated data visualization tasks
    • It is data driven, rather than generating new data representation, and provides high interactivity
    • It provides a set of functions for managing DOM (document object model), to build, construct and update the view in response to changes in data

    Why do we use D3?

    • D3 uses existing web standards
    • it is future-proofed for use with existing web tools
    • Has a lower entry barrier because data is easily manipulated using familiar web tools and functions

    Data Visualization with D3.js

    • D3.js facilitates data visualizations, ranging (e.g.) from basic charts, hierarchical layouts, networks to maps.

    Core Functions | Selections

    • Selections are an atomic unit in D3 to select elements based on criteria (e.g. CSS classes, IDs, etc.)
    • Selections can be used to alter elements via attributes, properties and styles.

    Core Functions | Selections

    • D3 selections have 3 categories of information (styles, attributes, properties) that influence behaviour/appearance of elements

    Core Functions | Selection.append

    • D3 provides append functions to add new elements to the DOM

    Mapping data to elements

    • Data in array/object formats can be mapped.
    • Useful for generating dynamic visuals in response to data changes (e.g. enter, update, or exit).

    Thinking with Data-Elements Joins

    • .enter(): used to figure out what has changed in the dataset
    • .update(): assigns data items to visual elements
    • .exit(): deletes items that are no longer displayed in datasets.

    A D3 example

    • Example code illustrating use of D3 methods to create/manipulate/alter circle elements. D3 methods operate on selections to compute joins (e.g. enter, update, and exit) to produce results.

    Working with external data

    • D3 uses asynchronous methods to work with external data
    • This involves using the .csv() and .json functions in asynchronous processes.

    Scales

    • Scales are used to map data to visual elements.
    • Different types of scales (Ordinal scale maps a discrete domain to a discrete range)
    • Quantitative scale maps a continuous domain to a continuous range (e.g. d3.scaleLinear())

    Ordinal scales

    • Used to map a discrete range (e.g. a list of strings) to a discrete set of values. Often, this is used to give visual representation in a data visualization, rather than numeric values

    Quantitative scales

    • Scales that map continuous numerical values to a continuous visual range.
    • Useful for numerical data (e.g. d3.scaleLinear(), d3.scaleSqrt(), d3.scaleLog())

    Line (and Area) Generators

    • Used to create lines or shapes

    Further Samples

    • Includes links/references to other sources with D3.js examples and sample code. 

    Data Persistence

    • Persisting information on a web application.

    Persisting Information with Cookies

    • How cookies are used to track user information
    • Cookies are tied to particular domains and cannot be accessed by other domains.

    Workers and Messaging

    • The need for thread based processing.

    Worker's Purpose

    • Workers provide a way to run concurrent tasks outside the main browser thread.
    • A WorkerGlobalScope global object object exists along with the self keyword in workers.

    When to create Workers?

    • Use Worker when working with computationally intensive tasks or in applications where responsiveness is required. Avoid use of Worker for trivial, non-intensive tasks.

    Types of Workers

    • Dedicated Workers,
    • Shared Workers, and
    • Service Workers

    Worker API

    • Worker object: how workers are created and access the environment from JavaScript
    • WorkerGlobalScope: is the global object for a JavaScript Worker; it resembles the window object in a typical JavaScript environment but has more limited properties.
    • self keyword can be used in place of window.

    Worker Object — Properties & Methods

    • onerror: Assigns an event handler, and receives error events
    • onmessage: Assigns an event handler, and receives message or other types of events

    WorkerGlobalScope Properties & Methods

    • Various properties and methods are available (e.g., navigator, location, `performance

    Studying That Suits You

    Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

    Quiz Team

    Related Documents

    JavaScript Tutorial PDF

    Description

    Test your knowledge on the fundamentals of JavaScript with this interactive quiz. Covering topics such as data types, variable declarations, and the use of JavaScript in web development, this quiz is perfect for beginners looking to reinforce their understanding. Challenge yourself and see how well you know JavaScript!

    More Like This

    Use Quizgecko on...
    Browser
    Open
    Browser
    Browser