javascript basics and best practices - cc fe & ux

Download JavaScript Basics and Best Practices - CC FE & UX

Post on 21-Apr-2017

599 views

Category:

Internet

1 download

Embed Size (px)

TRANSCRIPT

  • JavaScript Basics & Best Practices

    Competence Center Front-end & UX

    Dennis JaamannFront-end developer

  • Overview

    Part 1: Introduction

    What is JavaScript?

    How a JavaScript engine works

    Language features

    The future of JavaScript

  • Overview

    Part 2: The Basics

    Types, variables, constants and literals

    Expressions and operators

    Statements

    Functions

    Objects

    Prototypical inheritance

    Equality

  • Overview

    Part 3: Best Practices for enterprise apps

  • JavaScript Basics & Best Practices

    Part 1: Introduction

  • What is JavaScript? According to java devs

    Works in all browsers except IE

    A crappy version of Java

    No type safety

    Something to stay miles away from

    JavaScript sucks *ss (1)

    (1) = Actual wording of most Java developers, presenter cannot be held accountable for harshness thereof

  • What is JavaScript? Really

    Invented by Brendan Eich (1995)

    Former CTO / CEO of mozilla

    Cross-platform

    Object based

    Dynamic

    Scripting language

    Currently ECMA-262 (ECMAScript 5)

    Web APIs (DOM, ..)

  • How a JavaScript engine works

    Virtual machine Interpret and execute JavaScript Most common in browsers For example: Google V8 engine

  • Language features - The bad

    Easy to introduce globals = root of all evil

    Automatic line termination Semicolons automatically inserted by interpreter Can lead to quirky behavior No warning

    Object equality and Object comparison Error prone due to dynamically typed objects Type coercion happens automagically (= auto casting)

  • Language features - The good

    Everything is an Object Including functions

    Objects are loosely typed Every object can be assigned any value

    Objects are dynamic Can change type @ runtime Add members on the fly

    Object literals

  • The future of JavaScript

    ECMAScript 6 Classes Modules Promises http://kangax.github.io/compat-table/es6/

    WebComponents Extend HTML with your own components Already available through usage of Polymer

    http://kangax.github.io/compat-table/es6/http://kangax.github.io/compat-table/es6/

  • JavaScript Basics & Best Practices

    Part 2: The basics

  • Types, variables, constants and literals - Types

    5 primitive types in JavaScript

    Type Possible values

    Number 1337, 3.14

    String JavaScript sucks *ss according to java devs

    Boolean true, false

    null null

    undefined undefined

  • Types, variables, constants and literals - Types

    2 complex types in JavaScript

    Object Constructor Members Inheritance-like behavior through prototypes

    Function Every function is a new instance of the Function object Block of code designed to perform a specific task

  • Types, variables, constants and literals - Types

    null vs. undefined

    null: value that can be assigned to a variable to indicate an empty value

    undefined: value of a variable that has been declared but has not been assigned a value

    var someNullifiedVariable = null;console.log(someNullifiedVariable); // nullconsole.log(typeof someNullifiedVariable); // Object

    var someUndefinedVariable;console.log(someUndefinedVariable); // undefinedconsole.log(typeof someNullifiedVariable); // undefined

  • Types, variables, constants and literals - Variables

    Declaring a variable

    The good way Use var keyword Variable always declared on current scope

    The evil way No keyword Variable always declared on global scope Warning in strict mode

    var someNumber = 42; // The good waysomeOtherNumber = 42 // The evil way

  • Types, variables, constants and literals - Variables

    Variable scope

    Global scope Variable declared outside of any function Accessible to any other code in the document

    Function scope Variable declared inside of any function Accessible to function and all inner functions

    Block scope Variable declared within block is local to containing function

  • Types, variables, constants and literals - Variables

    if(true){ var someGlobalVar = 1337; //global scope, since block is outside of any function } function someFunction(){ var someLocalVar = 9000; // function scope function someInnerFunction(){ console.log(someLocalVar); //9000 someLocalVar = 90210; } someInnerFunction(); console.log(someLocalVar); //90210 }

    console.log(someGlobalVar); //1337 someFunction(); console.log(someLocalVar); //Uncaught ReferenceError

  • Types, variables, constants and literals - Constants

    Defining a constant

    const myTotallyAwesomeConstant = 3;console.log(myTotallyAwesomeConstant); // 3

    const myTotallyAwesomeConstant = 1337;console.log(myTotallyAwesomeConstant); // 3

  • Types, variables, constants and literals - Literals

    Defining literals Represent fixed values, not variables Literally providing values in code var myAwesomeArray = [1,2,"test",true]; var myAwesomeObject = {firstMember:1,secondMember:2}; var myAwesomeBoolean = true; var myAwesomeNumber = 1337; var myAwesomeString = "Ordina is too awesome"; console.log(myAwesomeArray.toString()); // 1,2,test,true console.log(myAwesomeObject); // Object {firstMember: 1, secondMember: 2} console.log(myAwesomeBoolean); // true console.log(myAwesomeNumber); // 1337 console.log(myAwesomeString); // Ordina is too awesome

  • Expressions and operators

    Expressions and operators very similar to Java Precedence also similar

    Assignment Comparison Arithmetic Bitwise Logical String

    +=-=*=/=%==>>>=&=^=|=

    ==!====!==>>=>>

    &&||!

    ++=

  • Statements

    Statements also very similar to Java

    Conditional Loops Exceptions

    if(){}else{}

    switch(){}

    while(){};

    do{}while();

    for(){};

    continue;

    break

    throw

    try{}catch(){};

  • Functions

    Fundamental building blocks in JavaScript

    Perform a set of statements Calculate a value Perform a task

    Define on the scope from where you want to call it

  • Functions - Arguments

    Primitive arguments always passed by value (copy)

    function myAwesomeFunction(somePrimitiveNumber){ console.log(somePrimitiveNumber); // 99 somePrimitiveNumber = 1337; console.log(somePrimitiveNumber); // 1337 } var someNumber = 99; console.log(someNumber)// 99 myAwesomeFunction(someNumber); console.log(someNumber); // 99

  • Functions - Arguments

    Complex arguments always passed by reference Arrays, Objects, Functions Changing value of any property => visible outside function scope

    function myAwesomeFunction(someComplexObject){ console.log(someComplexObject); // Object {member1:"gold",member2:"silver"} someComplexObject.member2 = "wood"; console.log(someComplexObject); // Object {member1:"gold",member2:"wood"} } var someComplexObject = {member1:"gold",member2:"silver"}; console.log(someComplexObject)// Object {member1:"gold",member2:"silver"} myAwesomeFunction(someComplexObject); console.log(someComplexObject); // Object {member1:"gold",member2:"wood"}

  • Functions - Arguments

    Complex arguments always passed by reference Arrays, Objects, Functions Changing argument value => NOT visible outside function scope

    function myAwesomeFunction(someComplexObject){ console.log(someComplexObject); // Object {member1:"gold",member2:"silver"} someComplexObject = {superMember:"Titanium"}; console.log(someComplexObject); // Object {superMember:"Titanium"} } var someComplexObject = {member1:"gold",member2:"silver"}; console.log(someComplexObject)// Object {member1:"gold",member2:"silver"} myAwesomeFunction(someComplexObject); console.log(someComplexObject); // Object {member1:"gold",member2:"silver"}

  • Functions - Multiple Arguments

    Array-like object to iterate through arguments Can pass any number of arguments (overloading-ish)

    function myAwesomerFunction(firstNumber){ var result = "" + firstNumber; for(var i = 1; i < arguments.length; i++) { result += "," + arguments[i]; } console.log(result); } var myFirstNumber = 99; myAwesomerFunction(myFirstNumber); // 99 myAwesomerFunction(myFirstNumber,100); // 99,100 myAwesomerFunction(myFirstNumber,100,101); // 99,100,101

  • Functions - Closures

    Powerful JavaScript feature

    Closure = nested function Inner function can access all variables and functions of outer function Inner function can access scope of outer function Outer function CANNOT access any variable or function of inner function

    Encapsulation of variables and functions of inner function

  • Functions - Closures

    A simple example

    var outerCarFunction = function(outerMake) { var getInnerMake = function() { return outerMake; //Inner function has access to outer function variables } return getInnerMake; //Expose inner method to outer scope }; var myCar = outerCarFunction("Beamer, Benz or Bentley"); console.log(myCar()); // Beamer, Benz or Bentley

  • Functions - Closures

    A more complex examplevar createCar = function(manufacturer,model) { return {

    setManufacturer: function(newManufacturer) { manufacturer = newManufacturer;

    }, getManufacturer:function(){ return manufacturer; },

    setModel: function(n

Recommended

View more >