Javascript intro for MAH
0 likes533 views
This document provides an introduction and overview of JavaScript. It begins with an agenda that outlines the topics to be covered, including the history of JS, basic concepts like statements, variables, data types, and functions. The document then covers the brief history of JS from its creation in 1995 to recent developments. It discusses some of the basic building blocks of JS like statements, variables, data types including strings, objects, and arrays. It also covers functions and provides examples of declaring and calling functions. Resources for learning more about JS are listed at the end.
![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'](https://image.slidesharecdn.com/javascriptintro-170117160234/85/Javascript-intro-for-MAH-11-320.jpg)
![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](https://image.slidesharecdn.com/javascriptintro-170117160234/85/Javascript-intro-for-MAH-13-320.jpg)
![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!!!](https://image.slidesharecdn.com/javascriptintro-170117160234/85/Javascript-intro-for-MAH-14-320.jpg)
Javascript intro for MAH
- 1. Introduction to JS Aleksander Fabijan
- 2. Agenda 1. Introduction to AA 2. Background of JS 3. The Basics a. Statements b. Variables c. Data Types (Strings, Objects, Arrays) d. Functions
- 4. 1. History of JS The background behind the language of the web.
- 5. 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.
- 6. 2. The Basics Statements, variables, functions etc.
- 7. Tools Text editor (Atom, Visual Studio Code, etc.) Chrome Developer Tools
- 8. Statements Each instruction in JS is a "statement", like: console.log('Hello World!'); Try it out: https://jsbin.com/
- 9. 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);
- 11. 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'
- 12. Objects var obj = { name: "Carrot", "for": "Max", details: { color: "orange", size: 12 } }
- 13. 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
- 14. 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!!!
- 15. Fun fact 2 var x = "Volvo" + “16”; var x = "Volvo" + 16; var x = "Volvo" + 1+6; What Happens?
- 16. 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
- 17. 3. Resources
- 18. 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)
- 19. Thanks! You can find me at: aleksander.fabijan@mah.se