Introduction to JavaScript

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