Basic understanding of JavaScript as a programming language. This is the first slide of a series of JavaScript lessons.

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