Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Javascript - Mental Models

Introduction to Javascript - Mental Models

During this workshop, we focus on Mental Models and thinking about code in ECMAScript. An Introduction to Types, Values and Javascript on the Browser

Andrew Miracle

January 25, 2020
Tweet

More Decks by Andrew Miracle

Other Decks in Programming

Transcript

  1. INTRODUCTION
    TO JAVASCRIPT
    Andrew Miracle

    View full-size slide

  2. $ whoami
    Code validator on indorse.io and Founder of
    Tecmie, a Software Consulting Company.
    Currently an EIT @MESTAFrica
    Twitter: @koolamusic
    Website: www.andrewmiracle.com
    I AM ANDREW MIRACLE

    View full-size slide

  3. Javascript 101

    View full-size slide

  4. You would have begun from a beginner javascript
    coder, to a developer who can write a functional
    web application in javascript & NodeJS.
    We may include some aspect of Frontend as this
    program should be fullstack.
    THE GOAL OF THIS WORKSHOP

    View full-size slide

  5. Read this
    Javascript 101

    View full-size slide

  6. The Mental Model
    Javascript 101
    What are the values of a and b after it runs?
    Work it out in your head before reading further.
    The goal of this exercise is to help you reflect on your mental model.
    Writing code is all a mental model, why ?

    View full-size slide

  7. Javascript 101

    View full-size slide

  8. Values
    Javascript 101
    Primitive Values
    Objects and Functions

    View full-size slide

  9. Primitive Values
    Javascript 101
    Undefined (undefined), used for unintentionally missing values.
    Null (null), used for intentionally missing values.
    Booleans (true and false), used for logical operations.
    Numbers (-100, 3.14, and others), used for math calculations.
    Strings ("hello", "abracadabra", and others), used for text.
    Symbols (uncommon), used to hide implementation details.
    BigInts (uncommon and new), used for math on big numbers.

    View full-size slide

  10. Objects
    Javascript 101
    Objects ({} and others), used to group related data and code.
    Functions (x => x * 2 and others), used to refer to code.

    View full-size slide

  11. Expressions
    Javascript 101
    There are some questions that JavaScript would be delighted to answer.
    These questions have a special name — they are called expressions.
    If we “ask” the expression 2 + 2, JavaScript will “answer” with the value 4.
    console.log(2 + 2); // 4
    JavaScript answers expressions in the only way it knows how — with values.
    Expressions always result in a single value.

    View full-size slide

  12. Javascript on the
    Browser
    Javascript 101
    Let's have some fun

    View full-size slide

  13. Javascript 101

    View full-size slide

  14. Javascript 101
    alert("Hello IOT")

    View full-size slide

  15. What you will learn
    Javascript 101
    During this workshop over the months,
    We will take up a number of libraries, design patterns and
    core language features in the Javascript/ECMAScript Ecosystem

    View full-size slide

  16. Frontend
    https://reactjs.org/
    ANGULAR
    https://angular.org
    VUEJS
    https://vuejs.com/

    View full-size slide

  17. API
    EXPRESS SAILS
    LOOPBACK

    View full-size slide

  18. LET'S TALK!
    @HANDLE
    @koolamusic
    WEBSITE
    andrewmiracle.com
    MAILING ADDRESS
    [email protected]

    View full-size slide