JavaScript and Web API Concepts Quiz
41 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 will the value of location.port be if a URL includes no specified port?

  • The default port for the protocol
  • An empty string (correct)
  • An error message indicating a missing port
  • The protocol itself

    • Which property of the navigator object provides the user's do-not-track preference?

  • deviceMemory
  • gpuUsage
  • doNotTrack (correct)
  • navigator.connection

    • Which method is associated with retrieving the stream from available media device hardware?

  • getVRDisplays()
  • sendBeacon()
  • getUserMedia() (correct)
  • requestMediaKey()

    • What does the location.username property represent in a URL?

    <p>The username specified before the domain</p> Signup and view all the answers

    Which property indicates if the browser is currently connected to the Internet?

    <p>navigator.onLine</p> Signup and view all the answers

    What is the returned value of the mediaCapabilities property in the navigator object?

    <p>A MediaCapabilities object for interacting with media abilities</p> Signup and view all the answers

    Which property would you use to check if cookies are enabled in the browser?

    <p>navigator.cookieEnabled</p> Signup and view all the answers

    What type of information does the location.origin property provide?

    <p>Read-only property indicating the origin of the URL</p> Signup and view all the answers

    What does the deviceMemory property indicate?

    <p>An approximation of device RAM in gigabytes</p> Signup and view all the answers

    What method is used to stop a function from repeatedly executing with setInterval?

    <p>clearInterval()</p> Signup and view all the answers

    Which of the following statements about raster images is true?

    <p>Higher resolution raster images result in larger file sizes.</p> Signup and view all the answers

    Which JavaScript function is executed once after a specified time interval?

    <p>setTimeout()</p> Signup and view all the answers

    What characteristic of an image describes the difference between the darkest and lightest colors?

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

    How can an event handler added via addEventListener be removed?

    <p>Using removeEventListener with the same arguments</p> Signup and view all the answers

    What happens when you attempt to write an array value at an index that is greater than or equal to the array's length?

    <p>It will add an element at that index.</p> Signup and view all the answers

    Which of the following correctly describes JavaScript's handling of asynchronous behavior?

    <p>JavaScript operates on a single-threaded event loop model.</p> Signup and view all the answers

    In JavaScript, the error object properties include which of the following?

    <p>Message and Name of the error</p> Signup and view all the answers

    What is a key characteristic of callback functions in JavaScript?

    <p>They are functions passed to other functions and executed later.</p> Signup and view all the answers

    Which method is NOT commonly used in asynchronous JavaScript programming?

    <p>Using Iterative Loops</p> Signup and view all the answers

    What effect does modifying the prototype of an object have in JavaScript?

    <p>It changes the behavior of only the current instance.</p> Signup and view all the answers

    Which of the following is an example of a scenario that typically uses callbacks in JavaScript?

    <p>Event-driven functions for specific events</p> Signup and view all the answers

    What is the primary purpose of staging in animation?

    <p>To direct the audience's attention and clarify importance</p> Signup and view all the answers

    How does anticipation function in the animation process?

    <p>It prepares the audience for an action to enhance realism.</p> Signup and view all the answers

    Which best describes the technique of Follow Through in animation?

    <p>The continuation of movement after the main action has stopped.</p> Signup and view all the answers

    What does Slow-ins and Slow-outs imply about motion in animation?

    <p>Motion gradually accelerates and decelerates, creating lifelike movement.</p> Signup and view all the answers

    What characteristic of motion does timing influence in animation?

    <p>The number of frames for an action, affecting speed.</p> Signup and view all the answers

    Which of the following best explains overlapping actions?

    <p>Actions that do not all stop simultaneously.</p> Signup and view all the answers

    In terms of animation arcs, which statement is true?

    <p>Most actions follow a circular path for enhanced realism.</p> Signup and view all the answers

    What effect does secondary action have in animation?

    <p>It adds depth and dimension, enriching the main action.</p> Signup and view all the answers

    Which technique is characterized by creating keyframes first and then filling in between?

    <p>Pose To Pose animation</p> Signup and view all the answers

    What role does gravity play in slow-in and slow-out animations?

    <p>It determines the speed of motion at various points in an arc.</p> Signup and view all the answers

    What is the purpose of the black component in the CMYK colour model?

    <p>To reduce production costs by using cheaper ink</p> Signup and view all the answers

    Which of the following statements accurately describes the RGB colour model?

    <p>All colours can be created by adjusting primary component intensities.</p> Signup and view all the answers

    How many possible colors are represented in an 8-bit RGB graphic display?

    <p>16,777,216 colors</p> Signup and view all the answers

    What is one characteristic of the HSB (or HSV) colour model?

    <p>It measures color in terms of hue, saturation, and brightness.</p> Signup and view all the answers

    What do the initials CMY stand for in the CMY colour model?

    <p>Cyan, Magenta, Yellow</p> Signup and view all the answers

    What is the transformation matrix used for in colour models?

    <p>To convert between RGB and CMY colour spaces</p> Signup and view all the answers

    In the CMYK colour model, how does light interact with printed colours?

    <p>By subtractive mixing of reflected light</p> Signup and view all the answers

    Which of the following accurately describes the significance of the range 0-100% in CMYK?

    <p>It defines the intensity of each primary colour.</p> Signup and view all the answers

    What type of representation is primarily used by HSL (Hue, Saturation, Lightness)?

    <p>Cylindrical-coordinate representation</p> Signup and view all the answers

    Why are fluorescent and lacquered colours important in the context of CMYK?

    <p>They indicate the color intensity on the scale.</p> Signup and view all the answers

    Study Notes

    JavaScript Fundamentals

    • JavaScript is a programming language used by web browsers for dynamic web content.
    • HTML and CSS handle static web content, JavaScript enables dynamic changes based on user input.

    Motivation for JavaScript

    • HTML & CSS are insufficient for handling dynamic web content.
    • JavaScript allows interaction with HTML and CSS elements.
    • Provides methods for running and executing functions and methods from predefined APIs (specified by W3C standard)
    • Allows working with external media (e.g., multimedia, animation, geolocation, webcam, etc.).
    • Facilitates interaction with data from remote HTTP web servers.

    Deploying JavaScript in HTML

    • External scripts: Include external .js files using the <script> tag with the src attribute pointing to the file location. This file could be on a web server.
    • Embedded scripts: Embed directly into HTML using a <script> tag within the HTML file.
    • REPL (Read-Evaluate-Print-Loop) Console: The Chrome browser includes a REPL console for evaluating JavaScript code.

    JavaScript Overview & Definitions

    • ECMAScript-standard-derived.
    • Originated for Netscape Navigator- not directly related to Java.
    • JavaScript interpreters are built into web browsers: This adds dynamic functionality to static web content.
    • Can run when HTML loads, in response to user input, dynamic creation of multimedia elements, and in response to other events .

    JavaScript Primitive Types

    • Number: Stored using floating-point notation. Includes numbers like 5, 1.24, and special values like Infinity, – Infinity, and NaN (Not a Number).
    • String: Sequence of characters.
    • Boolean: Represents true or false.
    • Null: Represents the intentional absence of a value.
    • Undefined: A variable has been declared but has not been assigned a value yet.
    • Reserved Words: words like boolean, if, delete, var, function are parts of the JavaScript language and cannot be used as variable names.
    • Wrapper Objects: Some primitive data types have corresponding wrapper objects (Boolean, Number, String), but primitive types do not have methods or behavior.

    JavaScript Variables & Constants

    • Variable naming conventions: Variable names begin with a $, _, a–z, or A-Z character.
    • Local and global scope: Scope determines visibility of variables. Local variables are associated with a block. Global variables have wider visibility.
    • typeof operator: Useful for determining the type of a variable.
    • const: Creates a constant whose value cannot be changed.
    • var: Used to declare a local or global variable.

    JavaScript Strings

    • Strings are sequences of 16-bit unsigned integers. Each integer represents a character.
    • Immutability: String manipulation creates a new string. Existing methods (like concat() ) produce new strings.
    • Escape sequences: Use backslashes for special characters (\n, \t, \).

    String Methods

    • indexOf('str'): Finds the position of a sub-string, returns -1 if not found.
    • substring(start, end): Extracts a portion of the string from start to end, not including end.

    JavaScript Booleans

    • Falsy values (when used in a boolean context): null, undefined, 0, NaN, and an empty string ("")
    • Truthy values: other values are treated as true

    JavaScript Null & Undefined

    • Null: Represents the deliberate absence of an object value.
    • Undefined: Represents the reference where no value has been assigned. An integer starting with 0 is considered an octal value in JavaScript.

    Arrays

    • Array literals: Declare and initialize arrays using square brackets [ ].
    • Array methods:
      • length property: Returns the number of elements in the array.
      • push(element) Adds an element to the end of the array.
      • pop() removes the last element from the array and returns it.
    • Array index: Access elements using zero-based indexes.

    Array Indices

    • Zero-based indexing: Arrays use zero-based indexes for access.
    • Dynamic resizing: Arrays dynamically grow or shrink as elements are added and removed.
    • Length property: Reflects the largest index in the array.

    Objects

    • Key-value pairs: Store data using key-value pairs (e.g., pers = { name: "Ion Popa" }).
    • Accessing values: myobject.property or myobject["property"]
    • Adding properties: Add or modify properties using the notation obj.property = value or obj["property"] = value.

    Error Objects

    • Created when an exception is thrown.
    • Properties like message, and name(e.g., TypeError, RangeError, URIError) contain information about the error.
    • Custom error objects: Create custom errors using throw new Error().

    Conditionals and Loops

    • if/else statements.
    • for loops.
    • while loops.
    • do...while loops.

    JavaScript Operators and Expressions

    • Unary operators: Example: typeof n
    • Binary operators: Example: +, -
    • Concatenation: Example, +, +=
    • === operator: Compares type and value.
    • = operator: Assignment

    Comparing Objects

    • Object equality: Objects are only equal if they refer to the same object in memory (alias).

    Declaring and Using Functions

    • function keyword: Use function to declare a function.
    • Function name: Identify the function.
    • Parameters: Inside the function's parentheses.
    • Curly braces: Contain the function's code.
    • return: Explicitly returns a value; implicitly returns undefined.
    • Function expression: Assign a function to a variable.

    Creating Custom Objects

    • Keyword new : Used to create new class instances.
    • JavaScript classes: Allow developers to create objects with specific properties and methods.

    Prototypes

    • Object inheritance: Object instances inherit properties and methods from the prototype.
    • Built-in prototypes: JavaScript objects (constructed using the new keyword) have built-in prototypes.
    • Custom prototypes: Modify object prototypes to extend functionality.

    Debugging JavaScript

    • Browser developer console: Write JavaScript messages to the console for error analysis.
    • Add to page- Write messages to the page itself

    Asynchronous JavaScript

    • Event-driven programming: JavaScript programs in browsers are typically event-driven, responding to user actions, network events or other triggers.

    Asynchronous JavaScript– Common Methods

    • Use of callbacks: A function passed as an argument to another function, that executes when its conditions are met .
    • Promises
    • Use of async and await: A more contemporary way to handle asynchronous operations.
    • Asynchronous iteration

    Asynchronous Programming with Callbacks

    • Functional programming paradigm.
    • Interactivity in HTML documents.
    • A callback function (passed to another function), executes when specific conditions are met, or on an (asynchronous) event occurrence.
    • Common tasks using callbacks include various events, timers, and network requests.

    DOM Events & Event Flow

    • Event: Occurrences triggered by user actions or browser activities.
    • Handler/Listener: Function called in response to an event.
    • DOM event flow: Event execution proceeds through three phases- Capture, target and bubbling. The callback function can optionally intercept events during either the capture or bubbling phase.
    • DOM events (e.g.: general, load, keyboard, mouse events) give the user and browser the ability to interact in real time and respond to changes.

    DOM Events

    • Events: Describes various events like load, keydown, press, mousemove, mouseup, mousedown, click. -Event source element(this)
    • Event parameters (object): Contains information about the event.

    DOM Event Handlers

    • HTML event handlers: Assign event handlers within HTML attributes.
    • Node properties: Assign event handlers directly to the element.

    Intrinsic Events

    • Events associated with HTML elements: onload, onclick, onmouseover, onfocus, onkeyup, onsubmit, and onselect.

    Colors- Color Models

    • Properties of light: Light is a narrow frequency band within the electromagnetic spectrum, characterized by wavelength and intensity. ■ Color is perceived by the human eye based on the spectral distribution of wavelengths from the light source.
    • Color fundamentals: Luminance, Hue, Saturation, and Brightness.
    • Color systems (models): RGB and CMYK
    • Additive model: RGB is the additive color model used for screens, where each color is obtained by mixing red, green, and blue colors. RGB is essentially the combination of light sources.
    • Subtractive model: CMYK is the subtractive color model used for printing, where colour is obtained by removing certain wavelengths of light. Color removal is achieved by mixing pigments (for example, cyan, magenta, and yellow to remove red green, and blue colors.).
    • Complementary colors: Opposite colours on the color wheel. Additive color mixes will produce white (e.g., red and green) while subtractive will produce black (for example, red, green, and blue combined to absorb most all wavelengths of light).
    • Color models: HSB and HLS

    RGB Color Model

    • Represents colors by the intensity of red, green, and blue light.
    • Used for displays, monitors, etc: Displays combine various shades of red green and blue light to produce nearly all visible color hues.
    • 24-bit color: Represents 16.7 million colors. Essentially, various shades of red, green, and blue to produce the desired color output.

    CMYK Color Model

    • Represents colors by the amount of cyan, magenta, yellow, and black pigment.
    • Used for printing: Pigments absorb various wavelengths of white light, this creates the color desired hue.

    HSB Color Model

    • Uses hue, saturation, and brightness.
    • Cylindrical coordinate representation better than RGB.
    • More intuitive to human interpretation

    HLS Color Model

    • Uses hue, saturation, and lightness
    • Represents colors using a double-cone representation.

    YIQ Color Model

    • Used to encode colors in NTSC video standards (for compatibility with older black and white TV sets).
    • Separates luminance (Y) and chrominance (I, Q) channels to enable efficiency.

    Lab Color Model

    • Device-independent color model

    Grayscale Color Model

    • Represents shades of gray (monochrome).

    Color Selection and Applications

    • Graphical packages provide color selection wheels and tools for easier color choices for users.
    • Color guidelines: Ensure optimal viewing experiences for users (e.g. color grouping and contrast).

    CSS Color Property

    • HTML, CSS, provide syntax for declaring color values.
    • Color selections (from web colors, hex, and more).

    Color Wheel

    • Visual representation of colors.
    • Grouping of colors based on their relationship/mixes.
    • Primary, secondary, and tertiary colors.

    Color Conversion

    • Changing colors between color models (e.g., RGB to CMYK, or RGB to HSB, YIQ).
    • Often needed when changing from one visual representation to another or with changing media output devices.

    Canvas Element

    • 2D graphics context API for rendering.
    • Allows dynamic updates and animations.
    • JavaScript and HTML5, for visualizing graphics, games and more.

    Drawing Principles

    • HTML5 uses a graphical context for drawing operations (shapes, images, and text).
    • The properties of the context (like fillStyle, strokeStyle) will affect the outcome of drawings.
    • Immediate vs. Path/Buffered Mode: The former draws immediately after a command, while the latter stores commands in a buffer for efficient batch execution.

    Drawing with the Canvas Element

    • JavaScript methods: Configure, manipulate, draw graphical elements in the canvas (lines, rectangles, circles, text, images).
    • Attribute management: Methods configure elements' colors, styles, attributes (fillStyle, strokeStyle), and more.

    Summary of Path Mode Principles

    • Path mode efficiently groups drawing operations.
    • Draws the complete buffer of commands to produce the final output.
    • Method chaining: Call several functions during one operation.

    Dynamically Processing Shapes

    • Direct drawing of shapes and elements: Methods like fillRect(), strokeRect(), and clearRect().

    Drawing & Moving Functions

    • moveTo(): Changes current drawing position
    • Line drawing methods: lineTo(), rect(), arc()
    • Path-drawing methods: beginPath(), closePath(), fill(), stroke().
    • Curve drawing methods: quadraticCurveTo(), bezierCurveTo().

    Drawing Text

    • Drawing text: Methods like fillText() and strokeText(, to draw text characters.

    Canvas Attributes

    • fillStyle and strokeStyle: Color used for drawing.
    • lineWidth: Line thickness.
    • lineCap: Defines the style used to render the line tip(default, round).
    • lineJoin: Defines how the lines join, when 2 separate lines meet (default, round).
    • font: Font specification (typeface, size, etc.).
    • textAlign: Horizontal alignment for text.
    • textBaseline: Vertical alignment for text.

    Drawing Bézier Curves

    • Use cases/Formulas for parametric curves and surfaces.
    • Computation techniques based on de Casteljau's algorithm.

    2D Transformations

    • translate(): Changes the point of origin for drawings..
    • rotate(): Rotates the canvas around the origin, in radians.
    • scale(): Increases or decreases the scale of drawings, proportionally.
    • Transformations accumulate, affecting future drawings.

    2D Rendering Context Transformation Matrix

    • Use matrix-based transformation for flexibility (rotation, scaling, and translation).

    Drawing Images

    • drawImage(): Draw images or video content onto a canvas element.
    • getImageData(): Retrieve pixel data.
    • putImageData(): Draw pixel data back onto the canvas element.
    • Image source attributes such as <source> - which provide an identifier to different display resolutions and file types.

    ImageData Interface

    • createImageData(): Create a blank ImageData object with given width and height.
    • getImageData(): Retrieve pixel data from a given area in image.
    • putImageData(): Draw pixel data into a Canvas element.

    Drawing, Resizing, and Cropping Images

    • drawImage(): Draw images, dynamically resizing and cropping image data.

    Accessing Pixel Values

    • getImageData(): Extracts pixel data from a given portion of an image and returns it as an array. Accessing individual elements in the PixelData object, to modify them or manipulate them, to produce a visual effect.

    Animation

    • Interactivity: Dynamic movement of graphics and elements.

    Computer Animation

    • 2D Animation: Using 2D graphics, vectors and bitmaps.
    • 3D Animation: Manipulating 3D polygon meshes.

    Animation Functions

    • setInterval()
    • requestAnimationFrame()

    Animation Techniques

    • Keyframe animation.
    • Motion Capture animation.
    • Procedural Animation
    • Colour Change
    • Show/Hide/Toggle.

    Keyframe Animation

    • Keyframes: Define critical positions or moments in the animation.
    • In-betweens: Generated by software to fill the gaps between keyframes.
    • Interpolation: The procedures used to determine the in-betweens (e.g. linear interpolation or spline).

    Motion Capture Animation

    • Capturing real-world movement of humans or objects.
    • Transferring the movements onto 3D models.

    Procedural Animation

    • Automatically generating animation.
    • Rules-based animation generation.

    The 12 Basic Principles of Animation

    • Set of rules developed to determine how movement should appear fluid and realistic.

    Squash and Stretch

    • Gives weight and flexibility to moving objects.
    • Emphasizes movement and impact; creates a sense of weight and flexibility.

    Anticipation

    • Preparing for an action.
    • Exaggerating the preparation to direct the viewer's eyes.

    Staging

    • Clearly presenting ideas.
    • Using camera angles, framing, and character positioning.

    Straight Ahead Action and Pose to Pose

    • Straight Ahead: Drawing frames sequentially.
    • Pose to Pose: Establishing key poses (keyframes) and then adding in-betweens.

    Follow Through and Overlapping Action

    • Follow-through: Subsequent actions following main actions.
    • Overlapping actions: Movement occurring simultaneously.

    Slow In and Slow Out

    • Ease-in/Ease-out effect.
    • Creating natural-looking movement.

    Arc

    • Most natural movements follow arcs.
    • Improves fluidity and realism of movement.

    Secondary Action

    • Adds subtleties to the main action.
    • Supplements/reinforces the overall impact/feeling of the animation/movement.

    <start_of_image><start_of_image>دة العربية)

    Timing

    • Determining the appropriate speed and duration for actions.
    • Matching the pace to overall action and feelings.

    Exaggeration

    • Enhancing clarity and emphasis of emotions and actions.
    • Using exaggerated expressions for more prominent effect to better show emotions or feelings/states.

    Solid Drawing

    • Precise representation of characters.
    • Helps convey emotions and weight—crucial parameters in conveying the right feeling to viewers.

    Appeal

    • Making the characters charismatic.
    • Representing characters' personalities and emotional capabilities.

    CSS Animation

    • Using CSS to animate elements.
    • @keyframes rule: Defines animation stages.

    Animations Using JavaScript

    • setInterval() - for repeated execution of code
    • requestAnimationFrame() – for fluid and smooth animations synchronized with browser graphics,

    Procedural Animation

    • Using setInterval() or requestAnimationFrame() to create code that will continuously update and redraw parts of the application to make it look animated.

    Asynchronous JavaScript (2)

    • JavaScript programs in browsers are typically event-driven, driven by user actions , network events and other external triggers.
    • JavaScript-based servers essentially wait for client requests over a network to handle.

    Asynchronous JavaScript - Common Methods

    • callbacks;
    • promises.
    • async (and) await.
    • asynchronous iteration.

    Asynchronous Programming with Callbacks

    • Functional programming paradigm
    • Interactivity within HTML documents.
    • Callback functions (passed to another function), execute when requirements/conditions are met or (asynchronous trigger).

    Events and Event Handlers

    • Listener determines if an element needs to act or be triggered. The Handler is a function called when the trigger has been activated.

    JavaScript Timing Events/Timers

    • Using timers (setTimeout() or setInterval()) to delay or repeatedly execute code at specified time intervals.
    • Allows running code after a certain interval, or on a schedule.

    Promises

    • Promises are objects that represent the eventual outcome of an asynchronous operation.
    • There is no direct way to anticipate the value of a promise.
    • A callback function handles the results when ready.

    Promises Based Fetch API

    • Modern way using JavaScript promises to retrieve data from external sources like web servers or APIs.
    • fetch() function returns a promise.
    • then()/catch() methods; error handling.

    Drag and Drop Native API

    • API to handle drag and drop operations.
    • Events include dragstart, drag, dragend.
    • Data transfer object (dataTransfer): Allows to transfer/store data between draggable and droppable elements when used together.

    Draggability

    • Using draggable property to make elements draggable.
    • Specific methods (like addElement(), clearData(), setDragImage()) to manage drag data and to set or change the appearance as it is dragged between source & destination.

    Fundamentals of Digital Audio

    • Key concepts in multimedia applications.
    • Sound: Refers to vibrations within matter or mediums.
    • Types include narration, effects/music , instructions, or other audible sounds.

    Sound Fundamentals

    • Sound created by vibrations: Vibrations create sound waves that travel through a medium (like air pressure variations).
    • Waveforms and Noise: Periodic (repeating) for regular sounds, or non-repeating(noise like sounds)
    • Frequency: Measured in Hz : The rate of vibrations
    • Amplitude: Measured in dB : The loudness or intensity of a sound.

    Sound Wave Characteristics

    • Frequency = the number of cycles the wave completes per second.
    • Amplitude = The maximum displacement of a wave from its resting position.

    Range of Human Hearing

    • The range of frequencies audible to human ears.

    Anatomy of a Sound Wave

    • Different parts of the overall wave characteristic, such as crests, troughs, the distance between crests (wavelength), amplitude, are identified.

    Converting Analog Sound to Digital Audio

    • Process of converting analog waves to digital representation.

    Phases of Analog Audio Digitizing

    • The process includes filtering, sampling, and digital conversion, including examples like microphone input, to digitizing, and storage.

    Input from Analog Source vs Output into Analog Sound

    • Showing process changes and transformations from analog inputs to digital outputs such as microphone input, to digitized form, and output (like to speakers)

    Analog-to-Digital Converter (ADC)

    • Device converts continuous audio signals to discrete digital numbers.

    Sampling Process

    • Process that captures continuous sound at regular intervals.

    Quantization

    • Representing continuous audio value with a finite set of distinct levels.
    • Quantization error is the rounding error that can be inherent after quantization, which means that it may not be an exact copy but is similar enough to the initial value (for example, in sound).

    Storing Audio in Files

    • Digital audio can be saved in various file formats: WAV, AIFF, MP3, MP4 (MPEG4), Ogg, etc.,
    • Files can include various formats of compressed or uncompressed audio recordings.
    • Common audio codecs include PCM, GSM 6.10, AAC, and others.

    Factors Affecting Digital Audio Quality

    • Sample Rate (samples per second) determines the frequency range that can be captured.
    • Bit Depth(bits per sample) impacts the dynamic range and the precision that is able to be produced from the sample.

    Channel - Mono

    • Plays sound through a single audio channel, so it has only one listening dimension.

    Channel - Stereo

    • Plays sound through two channels (left and right), often producing a more natural listening experience.

    Sample Size

    • The amount of information stored about a sample value, which in turn determines the fidelity of sound.

    Audio Software Terms

    • Waveform: A visual representation of an audio function/signal.
    • Clip: A segment of audio.
    • Track: A channel upon which audio moves or travels.
    • Channel: Includes categories like Mono or stereo channels.
    • Trim: Removing any sounds at the beginning or at the end; sometimes referred to as editing, or selection.

    Sound Compression

    • Various techniques are employed to compress audio/reduce the file size (often at the cost of the quality and the clarity of the sound).
    • Audio compression techniques (like VBR) reduce the number of bits needed to reproduce a sound, but some details may be lost during encoding.

    MIDI (Musical Instrument Digital Interface)

    • MIDI (Musical Instrument Digital Interface): Represents a form of audio coding/data.

    MIDI Audio File

    • MIDI file sizes are generally considerably smaller than other audio formats.

    Audio File Formats

    • There are widely used audio files formats like: Wave (.wav) or MP3 (.mp3) files which use compression and decompressiong and other techniques.

    Streaming Audio

    • Method of delivering audio/video, where it’s played almost immediately after the initial request and data is streamed as needed.

    What is Streaming?

    • Streaming is an approach that transmits data continuously. Data is stored in a buffer, to be used to reproduce sound and video on an ongoing basis for the user.

    Data Visualization – An Introduction

    • D3.js (Data-Driven Documents) Framework: A versatile framework for constructing data visualization.

    D3.js Overview

    • Data-driven approach: Visualization changes based on the input data, or a new data stream.
    • DOM manipulation: D3.js manipulates the Document Object Model.
    • High interactivity: Visualizations can be interactive.

    Why do we use D3?

    • Leverage of existing Web standards (HTML, CSS, SVG - Scalable Vector Graphics)
    • Straightforward approach to code interactivity with the browser.
    • Tool compatibility: Works with existing tools like CSS and JavaScript debuggers as well as readily available tools in the browser.

    Data Visualization with D3.js

    • Data-driven visualizations (charts, maps, networks...).
    • Interactivity (e.g., mouse events, filtering, zooming).

    Core Functions | Selections

    • D3.js selection functions are similar to those found in other JavaScript libraries (e.g,. jQuery ), but they provide more flexibility and tools.
    • D3 select functions can select based on attributes (such as Id), properties, or classes.

    Core Functions | Selection.append

    • D3.js append() method: Adds a new element to the selection.

    Mapping data to elements

    • data(): Maps data elements to selections.

    Thinking with Data-Elements Joins

    • How D3.js manages data mappings to elements.

    A D3 Example

    • A basic example of D3 code.

    Working with External Data

    • d3.csv()/d3.json(): For handling external data.
    • JavaScript array features (e.g., mapping, sorting, filtering).

    Scales

    • Functions to map values from an input domain (data) to an output range (visual representation).

    Ordinal Scales

    • Mapping discrete data (data values which can be classified like A, B, C, D) to values in a visual representation (e.g.: assigning colors).

    Quantitative Scales

    • Mapping numerical quantitative data into a visual representation.

    Line (and Area) Generators

    • Using scales to create and display line and area charts/graphs.

    Further Samples

    • Links to sites for further learning.

    Data Persistence

    • Methods to store data persistently in a system.
    • Examples include storing data in cookies for browser-side persistent data.

    Workers and Messaging

    • JavaScript execution contexts.
    • Worker API.
    • Using dedicated worker for long running tasks — to prevent freezing of the web browser on long computations.
    • Communication between threads (e.g.: main thread to worker).

    Dedicated Worker Basics

    • Purpose of dedicated workers: Performing computationally intensive tasks and improving response time of web applications.

    Web Games – Introduction

    • Using diverse Web APIs for interactive game element manipulation in browsers.

    Progressive Web App

    • Hybrid application using standard web technologies.
    • Installability and offline capabilities.
    • Working modes on different devices and browser types and compatibility.

    What Advantages does a PWA Have?

    • PWA Installation and running without internet connection and their fast operating speed.
    • Native and cross-platform functionality that reduces development time and complexity.

    Progressive Web Apps Properties

    • App-like experience: Separating content/functionality of the app.
    • Connectivity independent: Utilizing service workers for offline operation.
    • Discoverable: Manifest file and search engines visibility and indexing.
    • Fresh: Continuous updating (using service workers)
    • Installable: Easy user installation to the home screen.
    • Linkable: The Web app links that are easy to access.
    • Responsive: Adapting across devices (mobile, desktop).

    Web Apps vs App Development

    • Features and benefits of Web Apps over native app development (iOS and Android).

    Pseudo-apps

    • Creating app-like experiences on browsers (without fully using native app functionalities).

    Testing PWAs

    • Lighthouse:Automated testing tools to evaluate PWA quality (aids like sw for error assessment).

    Top PWA Examples

    • List of popular PWA instances.

    How to Make a PWA?

    • Steps to create the Progressive Web App including manifest, service worker, etc.

    Digital Video Fundamentals

    • Different types of video signals: Analog (continuous) and digital (discrete frames).

    Analog Video Signals

    • Components (red, green, blue), composite, separate video.

    Video Standards/Frame Rates

    • NTSC, PAL, SECAM.
    • Different frame rates for different standards.

    How CRT Monitors and TVs Display Pictures - Methods of Display & Tracings

    • How CRTs display pictures and line tracing methods (progressive & interlaced).

    Sampling and Quantization of Motion

    • Sampling rate definition in the context of digital video and how it determines the clarity of the video (frames per second)
    • Image frame quality and resolution.

    Digital Video Standards

    • Defining standard video configurations(like HD / Full HD).

    The Term DV

    • Definition and usage of DV in video standards.

    Standard Definition DV25 Format

    • Detailed standard definition video characteristics (e.g.: 720 x 480 pixels, with aspect ratios, quality output methods, etc.).

    High Definition

    • Common High Definition video formats (e.g.: HDV, DVCPro, and more).

    Picture Format Notation

    • Representing video resolution and characteristics (e.g., frame(field) rate and frame size).

    Frame Size (Resolution) Comparison Between Standard Definition and High Definition

    • Comparing standard definition vs high-definition video formats.

    Digital Television

    • The Digital TV (DTV) broadcast specifications

    Common Video File Types

    • Lists commonly used video file formats. Includes file type, origin, and compatibility info.

    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 essential JavaScript and Web API concepts. This quiz covers topics including URL properties, navigator object, and media device functionality. Perfect for web developers looking to reinforce their understanding of JavaScript principles.

    More Like This

    Use Quizgecko on...
    Browser
    Open
    Browser
    Browser