JS Heroes Workshop

Dzień 1 - Javascript wprowadzenie

by Kemal Erdem | @burnpiro

Dlaczego JS?

Łatwość nauki

Kompatybilność wsteczna

Dowolność paradygmatów

Web to nie tylko JS!

DOM - Document Object Model

CSSOM - CSS Object Model

Web APIs - cała reszta technologii

Interakcje użytkownika z twoją aplikacją

  

    

  
  Add Data

					

Event

interface Event {
  constructor(DOMString type, optional EventInit eventInitDict = {});

  void stopPropagation();
  void stopImmediatePropagation();
  void preventDefault();

  readonly attribute DOMString type;
  readonly attribute EventTarget? target;
  readonly attribute EventTarget? currentTarget;
  readonly attribute unsigned short eventPhase;
  readonly attribute boolean bubbles;
  readonly attribute boolean cancelable;
  readonly attribute boolean defaultPrevented;
  readonly attribute boolean composed;
}
					

Event Listener

Bubble Event

Jak Event faktycznie działa

Jak stworzyć Event Listener?

  void addEventListener(string type, function callback, options = {});
					

const button = document.getElementById('dataSubmitter');

button.addEventListener('click', e => {
  console.log('clicked');
});
button.addEventListener('click', e => {
  console.log('clicked second');
});
					

Jak wyciągać informacje od użytkownika?

        
          20 Secs
        
					

const button = document.getElementById('dataSubmitter');

button.addEventListener('click', e => {
  console.log(e.target.className);
  console.log(e.target.dataset.time);
});
					

Dobrze, ale co z formularzami?

        

          
          
          

          
            Wyślij formularz
          
        
					

document.myForm.addEventListener('submit', e => {
  e.preventDefault();
  e.stopPropagation();
  console.log(e.target.elements["firstName"]);
  console.log(e.target.elements["lastName"]);
  console.log(e.target.elements["address"]);
});
					

Web Storage

Opowieść o dwóch braciach

LocalStorage

LocalStorage - write

localStorage.setItem("importantData", JSON.stringify(examQuestions));
					

LocalStorage - write

localStorage.setItem("importantData", JSON.stringify(examQuestions));
					

LocalStorage - read

LocalStorage - read

const importantData = localStorage.getItem("importantData");
					

LocalStorage - read

return JSON.parse(importantData);
					

LocalStorage

SessionStorage

SessionStorage - write

sessionStorage.setItem("importantData", JSON.stringify(examQuestions));
					

SessionStorage

SessionStorage - read

const importantData = sessionStorage.getItem("importantData");
					

SessionStorage - read

return JSON.parse(importantData);
					

SessionStorage

SessionStorage - new session

const importantData = sessionStorage.getItem("importantData");
return JSON.parse(importantData); // Error!!!!!
					

Uncaught SyntaxError: Unexpected token u in JSON at position 0
					

Zmienne / "Stałe"

let myHeight = 50

myHeight = 150
					

const myHeight = 50

myHeight = 150 //Uncaught TypeError: Assignment to constant variable.
					

Niechciany "var"

Scope

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff(innerData = "Different Data") {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData);
    console.log(topScope);
  }

  function doSthElse() {
    // Second level scope
    console.log(innerData);
  }

  doStaff();
  doSthElse();
}

main();
console.log(myStaff); // ReferenceError: myStaff is not defined
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff(innerData = "Different Data") {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData);
    console.log(topScope);
  }

  function doSthElse() {
    // Second level scope
    console.log(innerData);
  }

  doStaff();
  doSthElse();
}

main();
console.log(myStaff); // ReferenceError: myStaff is not defined
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff(innerData = "Different Data") {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData);
    console.log(topScope);
  }

  function doSthElse() {
    // Second level scope
    console.log(innerData);
  }

  doStaff();
  doSthElse();
}

main();
console.log(myStaff); // ReferenceError: myStaff is not defined
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff(innerData = "Different Data") {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData);
    console.log(topScope);
  }

  function doSthElse() {
    // Second level scope
    console.log(innerData);
  }

  doStaff();
  doSthElse();
}

main();
console.log(myStaff); // ReferenceError: myStaff is not defined
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff(innerData = "Different Data") {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData);
    console.log(topScope);
  }

  function doSthElse() {
    // Second level scope
    console.log(innerData);
  }

  doStaff();
  doSthElse();
}

main();
console.log(myStaff); // ReferenceError: myStaff is not defined
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff(innerData = "Different Data") {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData);
    console.log(topScope);
  }

  function doSthElse() {
    // Second level scope
    console.log(innerData);
  }

  doStaff();
  doSthElse();
}

main();
console.log(myStaff); // ReferenceError: myStaff is not defined
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff(innerData = "Different Data") {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData);
    console.log(topScope);
  }

  function doSthElse() {
    // Second level scope
    console.log(innerData);
  }

  doStaff();
  doSthElse();
}

main();
console.log(myStaff); // ReferenceError: myStaff is not defined
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff(innerData = "Different Data") {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData); // "Different Data"
    console.log(topScope); // `I'm Sitting on Top of the World`
  }

  function doSthElse() {
    // Second level scope
    console.log(innerData);
  }

  doStaff();
  doSthElse();
}

main();
console.log(myStaff); // ReferenceError: myStaff is not defined
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff(innerData = "Different Data") {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData);
    console.log(topScope);
  }

  function doSthElse() {
    // Second level scope
    console.log(innerData);
  }

  doStaff();
  doSthElse();
}

main();
console.log(myStaff); // ReferenceError: myStaff is not defined
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff(innerData = "Different Data") {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData);
    console.log(topScope);
  }

  function doSthElse() {
    // Second level scope
    console.log(innerData); // "Some internal data I want to keep for myself"
  }

  doStaff();
  doSthElse();
}

main();
console.log(myStaff); // ReferenceError: myStaff is not defined
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff(innerData = "Different Data") {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData);
    console.log(topScope);
  }

  function doSthElse() {
    // Second level scope
    console.log(innerData);
  }

  doStaff();
  doSthElse();
}

main();
console.log(myStaff); // ReferenceError: myStaff is not defined
					

Closure - pamiętaj swoje korzenie

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff() {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData);
    console.log(myStaff);
    console.log(topScope);
  }

  return {
    doStaff
  };
}

const myClousure = main();
let innerData = "outer scope";
let myStaff = "outer scope";
myClousure.doStaff();
console.log(myStaff); // "outer scope"
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff() {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData);
    console.log(myStaff);
    console.log(topScope);
  }

  return {
    doStaff
  };
}

const myClousure = main();
let innerData = "outer scope";
let myStaff = "outer scope";
myClousure.doStaff();
console.log(myStaff); // "outer scope"
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff() {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData);
    console.log(myStaff);
    console.log(topScope);
  }

  return {
    doStaff
  };
}

const myClousure = main();
let innerData = "outer scope";
let myStaff = "outer scope";
myClousure.doStaff();
console.log(myStaff); // "outer scope"
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff() {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData);
    console.log(myStaff);
    console.log(topScope);
  }

  return {
    doStaff
  };
}

const myClousure = main();
let innerData = "outer scope";
let myStaff = "outer scope";
myClousure.doStaff();
console.log(myStaff); // "outer scope"
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff() {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData);
    console.log(myStaff);
    console.log(topScope);
  }

  return {
    doStaff
  };
}

const myClousure = main();
let innerData = "outer scope";
let myStaff = "outer scope";
myClousure.doStaff();
console.log(myStaff); // "outer scope"
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff() {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData); // "Some internal data I want to keep for myself"
    console.log(myStaff); // "can't touch this"
    console.log(topScope); // "I'm Sitting on Top of the World"
  }

  return {
    doStaff
  };
}

const myClousure = main();
let innerData = "outer scope";
let myStaff = "outer scope";
myClousure.doStaff();
console.log(myStaff); // "outer scope"
					

let topScope = `I'm Sitting on Top of the World`;

function main() {
  // First level scope
  const innerData = "Some internal data I want to keep for myself";

  function doStaff() {
    // Second level scope

    let myStaff = `can't touch this`;

    console.log(innerData); // "Some internal data I want to keep for myself"
    console.log(myStaff); // "can't touch this"
    console.log(topScope); // "I'm Sitting on Top of the World"
  }

  return {
    doStaff
  };
}

const myClousure = main();
let innerData = "outer scope";
let myStaff = "outer scope";
myClousure.doStaff();
console.log(myStaff); // "outer scope"
					

Dziękuję

"Nie ma głupich pytań, są tylko te niezadane!"

Kemal Erdem | @burnpiro
https://erdem.pl
https://github.com/burnpiro