JavaScript

Content

 

Intro

Grammar

Objects

Functions

Inheritance

Arrays

 

 

Intro

Intro

  • Language of the browser
  • Thus - one of the most popular programming languages of the world
  • At the same time, there is a lot of controversy around JS
  • DOM
    • Awful API, JS is blamed
    • Poorly specified, inconsitent implementation
  • JS
    • Expressive language
    • Get things done without knowing all parts

Intro #2

  • JS based on some good and bad ideas
  • Good ideas
    • Functions, loose typing, dynamic objects, expressive object literal notation
  • Bad ideas
    • Programming model based on global variables
  • Functions are first class objects
  • First main stream lambda language
  • JS more in common with Lisp and Scheme than Java
  • JS ~ Lisp in C clothing

Intro #3

  • Most programming languages demand strong typing
    • Detect large class of errors at compile time
  • JS loosely typed language
    • Unable to detect type errors
  • Strong vs. loosely typing 
    • Strong typing still needs careful testing
    • Loose typing liberating
    • No complex class hierarchies
    • No fighting with the type system
  • Powerful object literal notation (inspired JSON)
  • Prototypal inheritance
    • Controversal feature

Grammar

Whitespace

  • Used to format characters or comments
  • Usually insignificant
  • Occassionally used to separate sequences of characters that would be combined into a single token
  • var myVar = 'Hi';
  • Space between var and myVar cannot be removed but other whitespace is optional
  • var myVar='Hi';
  • Comments
    • Block comments: /* */
    • Line-ending comments: //
  • Use Line-ending comments
    • /* may occur in regular expressions 
  • Write accurate comments, bad comments are worse than no comments

Names

  • Name is a letter optionally followed by one or more letters, digits, or underbars
  • Name cannot be a reserved word
    • abstract
    • boolean break byte
    • case catch char class const continue ...
  • Some words that cannot be used and are not reserved
    • undefined NaN Infinity
  • Names are used for statements, variables, parameters, property names, operators, and labels
  • Not permitted to name a variable or paramter with a reserved word
  • Not permitted as object property 

Numbers

  • JS has single number type
  • Internally represented as 64-bit floating point
  • double in Java
  • 1 and 1.0 are the same
  • All you have to know about a number is that it's a number
  • Large class of numeric type errors are avoided
  • Numbers may have exponent part
    • 100 ~ 1e2
  • Negative numbers by - prefix operator
  • NaN is a number value of result of an operation that cannot produce a normal result
  • NaN is not equal to any value except to itself
    • isNaN(number) may be used to detect NaN
  • Infinity all numbers greater 1.79769313486231570e+308

Strings

  • String literal may be packed in "abc" or 'abc'
  • Zero or more characters
  • \ (backslash) is escape character
  • JS characters are 16-bit wide
    • At beginning of JS Unicode was 16-bit character set
  • JS does not have a character type
  • Escape sequence allow for inserting characters into strings that are not normally permitted
  • 'A' === '\u0041'
  • String have a length property
    • 'JavaScript'.length is 10
  • Strings are immutable
  • Concatenating strings with + operator 
  • 'c' + 'a' + 't' === 'cat'

Statements

  • Compilation unit contains set of executable statements
  • Each <script> tag delivers a compilation unit, that is compiled and executed
  • JS has no linker
    • throws all compilation units in a global namespace
  • var statements
    • var myVar = 'test';
    • When used in functions, var statement defines function's local variables
  • switch, while, for, and do statements are allowed to have a label statement as prefix (interact with break statement)

 

Statements #2

  • Statements tend to be executed in order
    • from top to bottom
  • Alter sequence of execution with conditional statements
    • if and switch
    • Looping statements: while, for, do
    • Disruptive statements: break, return, throw
    • function invocation
  • Block is a set of statements wrapped in curly braces
  • Blocks in JavaScript do NOT create a new scope
  • Then block of if statement is executed if the expression is truthy
  • Falsy values: false, null, undefined, '', 0, NaN
  • All other values are truthy:
    • true, 'false', objects, ...

Expressions

  • literal values (strings, numbers)
  • variables
  • built-in values (true, false, null, undefined, ...)
  • invocation expression preceded by new
  • refinement expression preceded by delete
  • expression wrapped in parantheses
  • expression preceded by a prefix operator
  • expression followed by
    • Infix operator or another expression
    • Ternary operator (?:)
    • Invocation
    • Refinement

Operator Precedence

. [] ( )                         Refinement and invocation
delete new typeof + - !          Unary operators
* / %                            Multiplication, division, modulo
+ -                              Addition/concatenation, subtraction
>= <= > <                        Inequality
=== !==                          Equality
&&                               Logical and
||                               Logical or
?:                               Ternary

Objects

JavaScript Types

  • Simple types are numbers, strings, booleans (true, false), null and undefined
  • All other values are objects
  • Numbers, strings and booleans are object like
    • they have methods
    • but immutable
  • Objects in JavaScript are mutable keyed collections
  • Arrays, functions and regular expressions are objects too 

JavaScript Types #2

  • Object is a container of properties
  • Each property has a name and a value
  • Property name can be any string (including empty string)
  • Property value can be any value except for undefined
  • Objects in JavaScript are class-free
    • No constraints on the names or values of properties
  • Objects are useful for collecting and organizing data
  • Objects can contain other objects
  • JavaScript provides prototype feature
    • Allows an object to inherit the properties of another
    • Reduces object init time and memory consumptions

Object Literals

var empty_object = {};

var stooge = {
    "first-name": "Jerome",
    "last-name": "Howard"
};

var flight = {
    airline: "Oceanic",
    number: 815,
    departure: {
        IATA: "SYD",
        time: "2004-09-22 14:55",
        city: "Sydney"
    },
    arrival: {
        IATA: "LAX",
        time: "2004-09-23 10:42",
        city: "Los Angeles"
    }
};

Object Retrieval

stooge["first-name"] // "Joe"

stooge["middle-name"] // undefined
flight.status // undefined
stooge["FIRST-NAME"] // undefined

var middle = stooge["middle-name"] || "(none)";
var status = flight.status || "unknown";

flight.equipment // undefined
flight.equipment.model // throw "TypeError"
flight.equipment && flight.equipment.model // undefined

Object Update

stooge['first-name'] = 'Jerome';

// If the object does not already have that property name, the object is augmented:
stooge['middle-name'] = 'Lester';
stooge.nickname = 'Curly';

flight.equipment = {
    model: 'Boeing 777'
};

flight.status = 'overdue';

Object Reference

var x = stooge;
x.nickname = 'Curly';
var nick = stooge.nickname;
// nick is 'Curly' because x and stooge
// are references to the same object

var a = {}, b = {}, c = {};
// a, b, and c each refer to a
// different empty object

a = b = c = {};
// a, b, and c all refer to
// the same empty object

Prototype

  • Every object is linked to a prototype object from which it can inherit properties
  • All objects created  from object literals are linked to Object.prototype
    • Std object in JavaScript
  • When creating a new object, you may select the prototype

Prototype #2

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        var F = function () {};
        F.prototype = o;
        return new F();
    };
}

var another_stooge = Object.create(stooge);

another_stooge['first-name'] = 'Harry';
another_stooge['middle-name'] = 'Moses';
another_stooge.nickname = 'Moe';
  • When object is updated, the prototype is not touched
  • Prototype link has just effect on updating
  • If we try to retrieve property from an object, object lacks that property
    • Runtime tries to retrieve it from the prototype object
    • All up the prototype chain (delegation)
  • If property does not exist in prototype chain - undefined

Prototype #3

stooge.profession = 'actor';
another_stooge.profession // 'actor'
  • The prototype relationship is dynamic
  • If we add a new property to a prototype, that property will immediately be visible in all of the objects that are based on that prototype

Reflection

typeof flight.number      // 'number'
typeof flight.status      // 'string'
typeof flight.arrival     // 'object'
typeof flight.manifest    // 'undefined'

typeof flight.toString    // 'function'
typeof flight.constructor // 'function'
// typeof consideres the whole prototype chain

// hasOwnProperty checks own object
flight.hasOwnProperty('number') // true
flight.hasOwnProperty('constructor') // false

Delete

another_stooge.nickname // 'Moe'
// Remove nickname from another_stooge, revealing
// the nickname of the prototype.

delete another_stooge.nickname;
another_stooge.nickname // 'Curly'
  • Delete operator may used to remove a property from an object
  • It will remove a property from the object if it has one
  • Will not touch objects in the prototype linkage
  • Removing a property from an object may reveal prototype property

Functions

Function Objects

  • Best thing about JavaScript is the implementation of functions
  • Functions enclose a set of statements
  • Fundamental modular unit of JavaScript
  • Used for code reuse, information hiding and composition
  • Functions in JavaScript are objects
  • Objects are a collection of name/value pairs having a hidden link to a prototype object

Function Objects #2

  • Object produced from object literal are linked to Object.prototype
  • Function objects are linked to Function.prototype which itself is linked to Object.prototype
  • Since functions are objects they can be used like any other value
  • Can be stored in variables, objects and arrays
  • Functions can be passed as function argument, and functions may return functions
  • Functions can be invoked

Function Literal

// Create a variable called add and store a function
// in it that adds two numbers.
var add = function (a, b) {
    return a + b;
};
  • Function literal has 4 parts
  • function keyword
  • function name 
    • anonymous if not given
  • function parameters wrapped in parantheses
  • function body
    • set of statements wrapped in curly braces

Closure

  • function literal can appear everywhere where an expression is valid
  • functions can be defind inside functions
  • Inner function has access to parameters and variables of outer function
  • function object created by a function literal contains a link to the outer context (closure)
  • Powerful language property

Method Invocation

  • Suspends the execution of the current function, passing control and parameters to the new function
  • In addition to declared parameters every function receives two additional parameters: this and arguments
  • Value of this parameters determined by invocation pattern
  • Invocation operator is a pair of parantheses that follows any expression that produces a function value
  • Parantheses can contain zero or more expressions that produces a parameter value
  • No runtime error when number of arguments and number of parameters do not match 
    • If there are too few arguments, missing values will be undefined
    • If there are too much arguments, they will be ignored

Method Invocation Pattern

// Create myObject. It has a value and an increment
// method. The increment method takes an optional
// parameter. If the argument is not a number, then 1
// is used as the default.
var myObject = {
    value: 0,
    increment: function (inc) {
    this.value += typeof inc === 'number' ? inc : 1;
    }
};

myObject.increment( );
document.writeln(myObject.value); // 1
myObject.increment(2);
document.writeln(myObject.value); // 3
  • When a function is stored as a property of an object, we call it a method
  • When a method is invoked, this argument is bound to that object
  • this parameter can be used to access properties of the object

Function Invocation Pattern

var sum = add(3, 4); 

// Augment myObject with a double method.
myObject.double = function() {
    var that = this; // Workaround.
    var helper = function() {
        that.value = add(that.value, that.value);
    };
    helper(); // Invoke helper as a function.
};

// Invoke double as a method.
myObject.double();
document.writeln(myObject.getValue( )); // 6
  • When a function is not a property of an object, then it is invoked as a function
  • this parameter is bound to the global object! (design mistake)
  • Easy workaround

Constructor Invocation Pattern

  • JavaScript is a prototypal inheritance language
  • Objects can inherit properties directly from other objects
  • No classes!
  • Differnt to most of the current languages
  • Therefore prototypal nature is hidden with strange object-making syntax
  • If function is invoked with the new prefix, then a new object will be created with a hidden link to the value of the function's prototype member

Constructor Invocation Pattern #2

// Create a constructor function called Quo.
// It makes an object with a status property.
var Quo = function (string) {
    this.status = string;
};

// Give all instances of Quo a public method
// called get_status.
Quo.prototype.get_status = function ( ) {
    return this.status;
};

// Make an instance of Quo.
var myQuo = new Quo("confused");
document.writeln(myQuo.get_status( )); // confused
  • Functions that are intended to be used with the new prefix are called constructors
  • Variable names should be capitalized names

The Apply Invocation Pattern

// Make an array of 2 numbers and add them.
var array = [3, 4];
var sum = add.apply(null, array); // sum is 7

// Make an object with a status member.
var statusObject = {
status: 'A-OK'
};

// statusObject does not inherit from Quo.prototype,
// but we can invoke the get_status method on
// statusObject even though statusObject does not have
// a get_status method.
var status = Quo.prototype.get_status.apply(statusObject);
// status is 'A-OK'
  • Apply method lets us construct an array of arguments to use to invoke a function
  • Also allows to choose the value of the this argument
  • First argument is the this value
  • Second argument is an array of parameters

Arguments Parameter

var sum = function ( ) {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i += 1) {
        sum += arguments[i];
    }
    return sum;
};

document.writeln(sum(4, 8, 15, 16, 23, 42)); // 108
  • Bonus parameter that is available to functions when they are invoked
  • Gives access to all function parameters including excess arguments
  • Makes it possible to write functions that take an unspecified number of parameters

Return

  • When a function is invoked it begins execution with the first statement and ends on }
  • Return statements can be used to return earlier
  • Function always return a value, if not specified it will be unspecified
  • If the function was invoked with the new prefix and the return value is not an object it will return the value of this

Exceptions

var add = function (a, b) {
    if (typeof a !== 'number' || typeof b !== 'number') {
        throw {
            name: 'TypeError',
            message: 'add needs numbers'
        }; 
    }
    return a + b;
}
  • Throw statement interrupts execution of the function
  • Exception object should contain a name and message property

Exceptions #2

// Make a try_it function that calls the new add function incorrectly.
var try_it = function () { 
    try {
        add("seven");
    } catch (e) {
        document.writeln(e.name + ': ' + e.message);
    }
}

try_it();
  • Exception object is delivered to the catch clause of a try statement
  • Try statement has a single catch block that will catch all exceptions
  • Inspect name property to determine type of exception

Augmenting Types

Function.prototype.method = function (name, func) {
    this.prototype[name] = func;
    return this;
};
  • JavaScript allows the basic types of the language to be augmented
  • When adding a method to Object.prototype it is available to all objects
  • Same works for functions, arrays, strings, numbers, regular expressions
  • Example: make a function available to all functions

Recursion

var hanoi = function (disc, src, aux, dst) {
    if (disc > 0) {
        hanoi(disc - 1, src, dst, aux);
        document.writeln('Move disc ' + disc +
            ' from ' + src + ' to ' + dst);
        hanoi(disc - 1, aux, src, dst);
    } 
};

hanoi(3, 'Src', 'Aux', 'Dst');
  • Recursive function calls itself
  • Towers of Hanoi
  • Tail recursion optimization
    • If a function returns the result of invoking itself, recursion is replaced by a loop
    • Speed up 

Scope

var foo = function () { 
    var a = 3, b = 5;
    var bar = function () { 
        var b = 7, c = 11;
        // At this point, a is 3, b is 7, and c is 11
        a += b + c;
        // At this point, a is 21, b is 7, and c is 11
    };

    // At this point, a is 3, b is 5, and c is not defined bar();
    // At this point, a is 21, b is 5
};
  • Scope controls visibility and lifetimes of variables and parameters
  • Important for developers
    • Reduces naming collisions
    • Provides automatic memory management

Scope #2

  • Most languages with C syntax have block scope
    • All variables in a block are not visible from outside of the block
    • Variables may be released when the execution of the block is finished
  • JavaScript does not have block scope
  • Function scope
    • Variables defined in a function are not visible outside of the function
    • Declare all variables at the top of a function

Closure

var myObject = function () { 
    var value = 0;
    return {
        increment: function (inc) {
            value += typeof inc === 'number' ? inc : 1;
        },
        getValue: function () { 
            return value;
        } 
    };
}();
  • Inner functions get access to parameters and variables of the functions they are defined within (expect this and arguments)

Callbacks

// sync - client is blocked
request = prepare_the_request();
response = send_request_synchronously(request); 
display(response);

// async
request = prepare_the_request(); 
send_request_asynchronously(request, function (response) {
    display(response);
});

Cascade

getElement('myBoxDiv').
    move(350, 150).
    width(100).
    height(100).
    color('red').
    border('10px outset').
    padding('4px').
    appendText("Please stand by").
    on('mousedown', function (m) {
        this.startDrag(m, this.getNinth(m));
    }).
    on('mousemove', 'drag').
    on('mouseup', 'stopDrag'). 
    later(2000, function () {
        this.color('yellow').
        setHTML("What hath God wraught?").
        slide(400, 40, 200, 200);
    }).
    tip('This box is resizeable');
  • Some methods do not have return value
  • If we return this instead of undefined, cascade is enabled

Inheritance

Intro

  • Promotes code reuse
  • Introduces a type system
  • In classical languages
    • Objects are instances of classes
    • Class can inherit from another class
  • JavaScript prototypal style
    • Objects inherit directly from other objects
  • Many code reuse patterns

Pseudoclassical

var Mammal = function (name) {
    this.name = name;
};

Mammal.prototype.get_name = function () { 
    return this.name;
};

Mammal.prototype.says = function () { 
    return this.saying || '';
};

var myMammal = new Mammal('Herb the Mammal');
var name = myMammal.get_name(); // 'Herb the Mammal'
  • JavaScript hides prototypal nature 
  • Instead of objects inheriting directly from objects and unnecessary level of indirection is used
    • Objects are produced by constructors

Pseudoclassical #2

var Cat = function (name) {
        this.name = name;
        this.saying = 'meow';
};

// Replace Cat.prototype with a new instance of Mammal
Cat.prototype = new Mammal();

// Augment the new prototype with
// purr and get_name methods.
Cat.prototype.purr = function (n) {
    var i, s = '';
    for (i = 0; i < n; i += 1) {
        if (s) {
            s += '-'; 
        }
        s += 'r'; 
    }
    return s; 
};

Cat.prototype.get_name = function () { 
    return this.says() + ' ' + this.name + ' ' + this.says();
};

var myCat = new Cat('Henrietta');
var says = myCat.says(); // 'meow'
var purr = myCat.purr(5); // 'r-r-r-r-r' 
var name = myCat.get_name(); // 'meow Henrietta meow'

Pseudoclassical #3

  • All properties are public!
  • Constructor has to be called with new keyword
  • Provides comfort to programmers who are unfamiliar with JavaScript

Object Specifiers

var myObject = maker(f, l, m, c, s);

var myObject = maker({
    first: f,
    last: l,
    state: s,
    city: c
});
  • Constructor with large number of parameters
  • Can be difficult to remeber the order of the arguments
  • Rewrite the constructor to accept a single object
  • Arguments can be listed in any order

Prototypal

var myMammal = {
    name : 'Herb the Mammal', get_name : function () {
        return this.name;
    },
    says : function () {
        return this.saying || '';
    } 
};


var myCat = Object.create(myMammal);
myCat.name = 'Henrietta';
myCat.saying = 'meow';
myCat.purr = function (n) {
    var i, s = '';
    for (i = 0; i < n; i += 1) {
    if (s) {
    s += '-';
    }
    s += 'r'; 
    }
    return s; 
};

myCat.get_name = function () {
    return this.says() + ' ' + this.name + ' ' + this.says();
};

Prototypal #2

  • Prototypal inheritance is conceptually simpler than classical inheritance
  • New object can inherit the properties of an old object
  • Make a useful object
  • Construct similar objects via differential inheritance
  • Customizing a new object, specify the difference from the object on which it is based on

Functional

var mammal = function (spec) {
    var that = {};
    that.get_name = function () { 
        return spec.name;
    };
    
    that.says = function () { 
        return spec.saying || '';
    };
    return that;
};

var myMammal = mammal({name: 'Herb'});
  • With this inheritance patterns until now, we do not get privacy
  • All properties visible, no private variables, no private methods

Arrays

Intro

  • Linear allocation of memory
  • Integers are used to compute offsets
  • JavaScript does not have such an array
  • JavaScript provides an object that has some array-like characteristics
  • Converts array subscripts into strings that are used to make properties
  • Slower than real array
  • But more convenient to use

Array Literals

var empty = [];

var numbers = [
'zero', 'one', 'two', 'three', 'four',
'five', 'six', 'seven', 'eight', 'nine'
];

empty[1] // undefined
numbers[1] // 'one'

empty.length // 0
numbers.length // 10
  • Provide convenient notation for creating new array values
  • Pair of square brackets surrounding zero or more values separated by commas 
  • Array literal can appear everywhere where an expression may appear
  • First value gets the property name '0'
  • Second value gets the property name '1'

Array Literals #2

var numbers_object = {
    '0': 'zero', '1': 'one', '2': 'two',
    '3': 'three', '4': 'four', '5': 'five',
    '6': 'six', '7': 'seven', '8': 'eight',
    '9': 'nine'
};
  • numbers array and numbers_object object produce similar results
  • 10 properties, containing same values
  • numbers inherits from Array.prototype
  • number_object inherits from Object.prototype
  • numbers inherits a larger set of useful methods
  • numbers gets the length property, numbers_object does not

Array Literals #2

var misc = [
    'string', 98.6, true, false, null, undefined,
    ['nested', 'array'], {object: true}, NaN,
    Infinity
];

misc.length // 10
  • In most languages all array elements must be the same type
  • In JavaScript an array may contain mixture of values

Length Property

var myArray = [];
myArray.length // 0
myArray[1000000] = true;
myArray.length // 1000001
  • Not upper bound for array size
  • If element is stored at a subscript greater than the current length, the length is increased
  • No array bound errors
  • Length property is the largest integer property name +1
  • Not necessarily the number of properties in the array
  • Length can be explicitly set
    • making it larger does not allocate more space
    • making it smaller deletes all elements with subscripts greater than the length

Length Property

numbers.length = 3;
// numbers is ['zero', 'one', 'two']

numbers[numbers.length] = 'shi';
// numbers is ['zero', 'one', 'two', 'shi']

numbers.push('go');
// numbers is ['zero', 'one', 'two', 'shi', 'go']
  • Use length to add new element at the end
  • Or use the push method

Delete 

// numbers is ['zero', 'one', 'two', 'shi', 'go']
delete numbers[2];
// numbers is ['zero', 'one', undefined, 'shi', 'go']

numbers.splice(2, 1);
// numbers is ['zero', 'one', 'shi', 'go']
  • Since JavaScript arrays are objects, delete operator can be used to remove elements from an array
  • Leaves a hole in the array, since elements to the left keep the names
  • Use splice method
    • First argument sets position
    • Second argument determines num of elements to delete
  • Splice takes time for big arrays

Enumeration

var i;
for (i = 0; i < myArray.length; i += 1) {
    document.writeln(myArray[i]);
}
  • Since JavaScript arrays are objects, for in statement may be used to iterate over all of the properties of an array
  • For in makes no guarantee about the order of the properties
  • Also problems with unexpected properties from prototype chain
  • Conventional for statement avoids these problems

Arrays vs. Objects

  • Common mistake in JavaScript is to use an object when an array is required or vice versa
  • Rule: When the property names are small sequentiel integers, use an array, otherwise use an object
  • JavaScript is confused about difference between arrays and objects
  • typeof operator reports 'object' for arrays
  • No good mechanism to distinguish between array and objects

Methods

Array.method('reduce', function (f, value) {
    var i;
    for (i = 0; i < this.length; i += 1) {
        value = f(this[i], value);
    }
    return value;
});
  • JavaScript provides a set of methods for acting on arrays
  • Functions stored in Array.prototype
  • Array.prototype and Obejct.prototype may be augmented
  • Reduce method takes a function and a starting value
  • For each element of the array, it calls the function with an element and the value, and computes a new value
  • E.g. pass in function that adds integers, result will be the sum

Method #2

Array.method('reduce', function (f, value) {
    var i;
    for (i = 0; i < this.length; i += 1) {
        value = f(this[i], value);
    }
    return value;
});


var data = [4, 8, 15, 16, 23, 42];

var add = function (a, b) {
    return a + b;
};

var sum = data.reduce(add, 0); // sum is 108

Dimensions

Array.dim = function (dimension, initial) {
    var a = [], i;
    for (i = 0; i < dimension; i += 1) {
        a[i] = initial;
    }
    return a;
};
// Make an array containing 10 zeros.
var myArray = Array.dim(10, 0);
  • JavaScript arrays are not initialized
  • If you ask for a new array with [], it will be empty
  • If you access a missing element, undefined will be returned
  • Some algorithms assume default value (0)

Dimensions #2

var matrix = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8]
];

matrix[2][1] // 7

Array.matrix = function (m, n, initial) {
    var a, i, j, mat = [];
    for (i = 0; i < m; i += 1) {
        a = [];
        for (j = 0; j < n; j += 1) {
            a[j] = initial;
        }
        mat[i] = a;
    }
    return mat;
};
  • Array of arrays
  • Write own init method

 

 

References

 

JavaScript: The Good Parts

Douglas Crockford

 

 

 

 

 

Thank you for your attention!

 

Made with Slides.com