Javascript intro for MAH

Introduction to JS
Aleksander Fabijan

Agenda
1. Introduction to AA
2. Background of JS
3. The Basics
a. Statements
b. Variables
c. Data Types (Strings, Objects, Arrays)
d. Functions

1.
History of JS
The background behind the language of the web.

Brief History of JS
▷ 1995: At Netscape, Brendan Eich created "JavaScript".
▷ 1996: Microsoft releases "JScript", a port for IE3.
▷ 1997: JavaScript was standardized in the "ECMAScript" spec.
▷ 2005: "AJAX" was coined and the web 2.0 age begins.
▷ 2006: jQuery 1.0 was released.
▷ 2010: Node.JS was released.
▷ 2015: ECMAScript 6 was released.
▷ 2016: Microsoft releases HoloJS.
▷ 2017: You started this class.

2.
The Basics
Statements, variables, functions etc.

Tools
Text editor (Atom, Visual Studio Code, etc.)
Chrome Developer Tools

Statements
Each instruction in JS is a "statement", like:
console.log('Hello World!');
Try it out: https://jsbin.com/

Variables
Declare, then
initialize in 2
statements:
var x;
x = 5;
console.log(x);
Or declare and
initialize in one
statement:
var y = 2;
console.log(y);
Re-assign the value
later:
y = 4;
console.log(y);

Strings
A string holds an ordered list of character:
var alphabet = "abcdefghijklmnopqrstuvwxyz";
The length property reports the size of the string:
console.log(alphabet.length); // 26
Each character has an index. The first character is always at index 0.
The last character is always at index length-1:
console.log(alphabet[0]); // 'a'
console.log(alphabet[1]); // 'b'
console.log(alphabet[2]); // 'c'
console.log(alphabet[alphabet.length]); // undefined
console.log(alphabet[alphabet.length-1]); // 'z'
console.log(alphabet[alphabet.length-2]); // 'y'

Objects
var obj = {
name: "Carrot",
"for": "Max",
details: {
color: "orange",
size: 12
}
}

Array
var a = new Array();
a[0] = "dog";
a[1] = "cat";
a.push("parrot");
a.length; // 3
OR
var a = ["dog", "cat", "parrot"];
a.length; // 3

Fun fact
array.length isn't necessarily the number of items in the
array.
Example:
var a = ["dog", "cat", "parrot"];
a[100] = "koala";
a.length; // 101 ---OMG!!!

Fun fact 2
var x = "Volvo" + “16”;
var x = "Volvo" + 16;
var x = "Volvo" + 1+6;
What Happens?

Functions
Functions are re-usable collections of statements.
First declare the function:
function returnMyName() {
console.log('Hi Aleksander!');
}
Then call it (as many times as you want):
returnMyName();
Interactive:
https://repl.it/classroom/invite/CSUTVb0
http://bit.ly/2iKJyBP

Useful resources
https://jsbin.com (write and execute JS online)
https://jsfiddle.net/ (JS, CSS and HTML playground)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_r
e-introduction_to_JavaScript (a re-intro to JS)

Thanks!
You can find me at:
aleksander.fabijan@mah.se

Javascript intro for MAH

More Related Content

Viewers also liked

Similar to Javascript intro for MAH

More from Aleksander Fabijan

Recently uploaded

Javascript intro for MAH