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

Introduction to JavaScript

Introduction to JavaScript

32c638e7a3a466d182705fb4370cbb2e?s=128

Arnelle Balane

November 21, 2020
Tweet

More Decks by Arnelle Balane

Other Decks in Programming

Transcript

  1. Introduction to JavaScript Software Developer, Newlogic Arnelle Balane @arnellebalane

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

    for Web Technologies @arnellebalane UncaughtException @uncaughtxcptn Please subscribe to our channel!
  3. Exercises github.com/arnellebalane/javascript-workshop

  4. Why JavaScript?

  5. StackOverflow Developer Survey 2020 Most Popular Technologies

  6. Easy to get started Why JavaScript? It’s everywhere! Browsers Server-side

    Desktop
  7. The JavaScript Language Part One

  8. Values, types, and operators

  9. Values, types, and operators Booleans true false

  10. Values, types, and operators Numbers 1 2 3 4.5 5.6

    1.2 2.3 3.4 4.5 NaN
  11. "this is also a string" Values, types, and operators Strings

    'this is a string' `and this is also a string`
  12. Values, types, and operators Empty Values null undefined

  13. Values, types, and operators Unary Operators ! - typeof get

    a value’s type negate logically negate a number
  14. Values, types, and operators Unary Operators !true -100 typeof 'hello'

    = false = 'string'
  15. Values, types, and operators Binary Operators / * + addition,

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

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

    equality/inequality equal, not equal != !== <= >= >
  18. Values, types, and operators Comparison Operators 1 == '1' =

    true = true 1 == 1 1 === '1' = false
  19. logical “or”, either or both of the values Values, types,

    and operators Logical Operators || && logical “and”, both values should be true should be true
  20. Values, types, and operators Falsy Values false null undefined ''

    0 NaN
  21. Variables

  22. Variables Declaring variables let var const let name = 'arnelle';

    const name = 'arnelle'; var name = 'arnelle';
  23. Variables Valid names first_name name lastName balance$ address1 PhoneNumber

  24. Variables Invalid names first-name 2ndItem const

  25. Exercises 01-data-types-variables

  26. Conditional execution

  27. if-else statement Conditional execution if (condition) { } else if

    (condition) { } else { }
  28. if-else statement Conditional execution const age = 12; if (age

    >= 18) { // A } else { // B }
  29. Iteration

  30. while loop Iteration while (condition) { }

  31. while loop Iteration while (true) { console.log('hi'); }

  32. while loop Iteration let count = 0; while (count <

    10) { console.log('hi'); count = count + 1; }
  33. for loop Iteration for (initialize; condition; update) { }

  34. for loop Iteration for ( let count = 0; count

    < 10; count = count + 1 ) { console.log('hi'); }
  35. Exercises 02-conditionals-and-iteration

  36. Functions

  37. Declaring a function Functions function add(num1, num2) { return num1

    + num2; }
  38. Calling a function Functions function add(num1, num2) { return num1

    + num2; } add(1, 2); // 3
  39. Function expressions let add = function(num1, num2) { return num1

    + num2; }; Functions
  40. Arrow functions let add = (num1, num2) => num1 +

    num2; Functions
  41. Immediately Invoked Function Expression (IIFE) Functions (function() { let num

    = 12; console.log(num); })();
  42. Immediately Invoked Function Expression (IIFE) Functions (() => { let

    num = 12; console.log(num); })();
  43. Exercises 03-functions

  44. Data structures

  45. Objects Data structures { property1: value1, property2: value2 }

  46. Objects Data structures let user = { username: 'arnelle', isAdmin:

    true };
  47. Objects Data structures let user = { username: 'arnelle', isAdmin:

    true }; user.username; // 'arnelle'
  48. in operator Data structures let user = { username: 'arnelle',

    isAdmin: true }; 'username' in user; // true 'email' in user; // false
  49. delete operator Data structures let user = { username: 'arnelle',

    isAdmin: true }; delete user.username;
  50. Arrays Data structures [1, 2, 3, 4, 5] [1, 'a',

    true, undefined]
  51. Arrays Data structures let nums = [1, 2, 3]; nums[0];

    // 1 nums[1] = 4; nums.length; // 3 nums.includes(1); // true
  52. 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
  53. Exercises 04-arrays-and-objects

  54. Variable scope

  55. var a = 1; console.log(a); Global scope Variable scope

  56. var a = 1; function main() { var b =

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

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

    let a = 1; } console.log(a); } console.log(a);
  59. Object-Oriented Programming with JavaScript Part Two

  60. function createPerson(name) { let obj = {}; obj.name = name;

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

    this.sayName = () => { console.log(this.name); }; }
  62. Instantiation Object-Oriented Programming function Person(name) { this.name = name; this.sayName

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

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

    { console.log(this.name); } } class keyword Object-Oriented Programming
  65. Exercises 05-classes

  66. JavaScript in the Browser Part Three

  67. Loading JavaScript file JavaScript in the browser <script src="file.js"></script>

  68. Document Object Model

  69. <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
  70. Querying elements Document Object Model let btn = document.querySelector('button'); What

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

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

    All the events! https://developer.mozilla.org/en-US/docs/Web/Events
  73. AJAX ( Asynchronous JavaScript and XML )

  74. let xhr = new XMLHttpRequest(); XHR AJAX https://developer.mozilla.org/en-US/docs/We b/API/XMLHttpRequest

  75. let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => {

    }; XHR AJAX
  76. let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => {

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

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

  79. What’s next? The End

  80. Eloquent JavaScript eloquentjavascript.net

  81. MDN Web Docs developer.mozilla.org

  82. Thank you! UncaughtException @uncaughtxcptn Arnelle Balane @arnellebalane Introduction to JavaScript