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

Introduction to JavaScript

Introduction to JavaScript

Arnelle Balane

November 21, 2020
Tweet

More Decks by Arnelle Balane

Other Decks in Programming

Transcript

  1. Arnelle Balane I write code @ Newlogic Google Developers Expert

    for Web Technologies @arnellebalane UncaughtException @uncaughtxcptn Please subscribe to our channel!
  2. "this is also a string" Values, types, and operators Strings

    'this is a string' `and this is also a string`
  3. Values, types, and operators Unary Operators ! - typeof get

    a value’s type negate logically negate a number
  4. Values, types, and operators Binary Operators / * + addition,

    division multiplication - subtraction string concatenation % modulo ** exponent
  5. Values, types, and operators Binary Operators 5 ** 2 5

    - 4 * 3 + 2 / 1 5 % 2 = 25 = 1 = -5
  6. Values, types, and operators Comparison Operators === == < strict

    equality/inequality equal, not equal != !== <= >= >
  7. logical “or”, either or both of the values Values, types,

    and operators Logical Operators || && logical “and”, both values should be true should be true
  8. Variables Declaring variables let var const let name = 'arnelle';

    const name = 'arnelle'; var name = 'arnelle';
  9. while loop Iteration let count = 0; while (count <

    10) { console.log('hi'); count = count + 1; }
  10. for loop Iteration for ( let count = 0; count

    < 10; count = count + 1 ) { console.log('hi'); }
  11. in operator Data structures let user = { username: 'arnelle',

    isAdmin: true }; 'username' in user; // true 'email' in user; // false
  12. Arrays Data structures let nums = [1, 2, 3]; nums[0];

    // 1 nums[1] = 4; nums.length; // 3 nums.includes(1); // true
  13. Array Methods Data structures push pop concat find filter map

    forEach reduce reverse shift slice some https://developer.mozilla.org/en-US/docs/Web/JavaScri pt/Reference/Global_Objects/Array
  14. var a = 1; function main() { var b =

    2; } console.log(a); console.log(b); Function scope Variable scope
  15. Function scope Variable scope function main() { if (true) {

    var a = 1; } console.log(a); } console.log(a);
  16. Block scope Variable scope function main() { if (true) {

    let a = 1; } console.log(a); } console.log(a);
  17. function createPerson(name) { let obj = {}; obj.name = name;

    obj.sayName = () => { console.log(obj.name); }; return obj; } let me = createPerson('arnelle');
  18. Instantiation Object-Oriented Programming function Person(name) { this.name = name; this.sayName

    = () => { console.log(this.name); }; } let me = new Person('arnelle');
  19. function Person(name) { this.name = name; } Person.prototype.sayName = function()

    { console.log(this.name); }; Object prototypes Object-Oriented Programming
  20. class Person { constructor(name) { this.name = name; } sayName()

    { console.log(this.name); } } class keyword Object-Oriented Programming
  21. <html> <body> <h1>Hello World</h1> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> <button>Click

    Here</button> </body> </html> html body h1 ul button Hello World Click Here ul ul ul One Two Three
  22. Querying elements Document Object Model let btn = document.querySelector('button'); What

    we can do: https://developer.mozilla.org/en-US/docs/Web/API/Element
  23. Events Document Object Model btn.onclick = () => { console.log('click!');

    }; All the events! https://developer.mozilla.org/en-US/docs/Web/Events
  24. Events Document Object Model btn.addEventListener('click', () => { console.log('click!'); });

    All the events! https://developer.mozilla.org/en-US/docs/Web/Events
  25. let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => {

    if (xhr.readyState === xhr.DONE) { console.log(xhr.responseText); } }; XHR AJAX
  26. let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => {

    if (xhr.readyState === xhr.DONE) { console.log(xhr.responseText); } }; xhr.open('GET', url); xhr.send(); XHR AJAX