JavaScript Basics and Trends

JavaScript Basics and Trends

• 1.
  JAVASCRIPT BASICS & TRENDS @KURSADGULSEVEN
• 2.
  JAVASCRIPT BASICS &TRENDS JAVASCRIPT ▸1995: Created in 10 days at Netscape (by Brendan Eich) ▸Server-side JavaScript (Netspace) ▸1997: Standardisation - ECMAScript ▸2009: ES5 (Upgrade to ES5.1 in 2011) — strict mode ▸2009: Node.js — server-side ▸2015: ES6 ▸ES7 in progress
• 3.
  JAVASCRIPT BASICS &TRENDS SYNTAX ▸Case-sensitive (camelCase preferred) ▸Declaration by “var” ▸var newVariable = 5; ▸Strict mode prevents undeclared variables ▸“use strict”; ▸Statements separated by semicolons
• 4.
  JAVASCRIPT BASICS &TRENDS TYPES-1 ▸Untyped ▸Dynamic typing ▸var a = ‘5’; // a is a string a = 5; // a is a number now ▸typeof operator ▸typeof a — “number”
• 5.
  JAVASCRIPT BASICS &TRENDS TYPES-2 ▸Built-in types: ▸null ▸undefined ▸boolean ▸number ▸string ▸object ▸symbol — added in ES6!
• 6.
  JAVASCRIPT BASICS &TRENDS OPERATORS-1 ▸+ ▸1. Addition ▸// adds numbers total = total + amount; ▸2. Concatenation ▸// concatenate strings fullName = firstName + ‘ ‘ + lastName; ▸var str = ‘5’; var num = +str; // converts string to number
• 7.
  JAVASCRIPT BASICS &TRENDS OPERATORS-2 ▸Logical operators ▸&& — logical AND ▸|| — logical OR ▸Alternative usages ▸var pageSize = pageSize || 10; ▸var myVar; myVar && myFunc(myVar); // Careful! 0 is falsy
• 8.
  JAVASCRIPT BASICS &TRENDS OPERATORS-3 ▸Comparison operators ▸== ▸No type checking ▸14 == ’14’ // true ▸Use ===
• 9.
  JAVASCRIPT BASICS &TRENDS TRUE/FALSE ▸Truthy values: ▸‘0’ // or any string [] // an empty array {} // an empty object 1 // any non-zero number ▸Falsy values: ▸0 // number '' // an empty string NaN // JavaScript's "not-a-number" variable null undefined // careful!
• 10.
  JAVASCRIPT BASICS &TRENDS ARRAYS ▸Type of arrays is “object” ▸var arr = []; console.log(typeof arr); // logs “object” ▸Push, join, splice, forEach ▸arr.push(1); arr.push(‘2’); // [1, “2”] ▸console.log(arr.join(‘;')); // logs “1;2” ▸splice(index, remove, items*) ▸arr.forEach(function (item) { … }); // slower than for loop ▸Split produces array from string ▸var items = ‘a,b,c'.split(','); // items == [“a”, “b”, “c”]
• 11.
  JAVASCRIPT BASICS &TRENDS OBJECTS ▸var obj = {}; ▸var obj = { prop1: 5, method1: function () { … } }; ▸Accessing ▸obj.prop1 OR obj[‘prop1’] ▸obj.method1(); OR obj[‘method1’]();
• 12.
  JAVASCRIPT BASICS &TRENDS SCOPE ▸var var1 = 'global'; var f1 = function() { var var2 = ‘local'; var3 = ‘also global’; // careful! }; ▸Always use “var” ▸var f = function() { console.log(a); // undefined (but declared) var a = 712; console.log(a); // 712 console.log(b); // Reference error! (because it is undeclared) }
• 13.
  JAVASCRIPT BASICS &TRENDS JAVASCRIPT TRENDS 2016 ▸ES6 & ES7 ▸TypeScript ▸Angular 2 ▸React Native & NativeScript
• 14.
  JAVASCRIPT BASICS &TRENDS WORKSHOP ▸Create a todo application: ▸document.getElementById document.createElement element.innerHTML element.firstChild element.appendChild element.removeChild element.addEventListener ▸No libraries!
• 15.
  QUESTIONS? JAVASCRIPT BASICS &TRENDS @KURSADGULSEVEN