JS introduction
1 like254 views
This document provides an introduction and overview of JavaScript, including: - JavaScript is a high-level programming language supported by modern browsers and used for both frontend and backend development. It is an interpreted and weakly typed language. - The basics of JavaScript syntax are presented, including defining variables, loops, printing to the console, and if/else statements. - Functions are explored as both built-in and user-defined elements that can be called. Examples of functions and callbacks are demonstrated. - Common data types like arrays, maps, and booleans that are useful in JavaScript are listed.
![Useful data types
• Some useful data types:
// list (array)
var l = [1, 2, “3”, “abc”, {“the”: “map”}];
// map
var m = {“key”: value};
// boolean
var b = true;](https://image.slidesharecdn.com/jsintroduction-161211033416/85/JS-introduction-17-320.jpg)
JS introduction
- 2. Outline • Introduction • Basic syntax • Functions • Useful Data structures/types 2
- 3. Introduction • High-level programming language • Supported by all modern browser/OS • Frontend (Browser, UI control, …) • Backend (Server, Application) • Interpreted programming language • Weakly typed 3
- 4. JavaScript is NOT Java 4
- 5. Basic syntax (1/2) • define variable(s) var a = 1; • Do basic calculation sum = a + b; • Loops for (a=0; a<10; a++) { // do something cool… } 5
- 6. Basic syntax (2/2) • Print something on console console.log(“hello world”); • Everything can stored in a variable var a = 3.1415926, s = “this is a string”; var sum = function (a, b) { return a + b; } • If/Else if (a === 1) { // do something….. } 6
- 7. Quick Demo 9 x 9 Table
- 8. Functions (1/3) • Builtin functions • Console functions • eval • Functions for some specific data structure • User defined functions
- 9. Functions (2/3) • Define a function: var foo = function (parameters) { // function content } • Call a function: foo();
- 10. Functions (3/3) • Function can be anonymous (and parameter): executeThisFunctionWithLog(function() { // do something });
- 12. Callback function (1/2) • For asynchronous design. • Call function(s) after something done. • Won’t block anything
- 13. Callback function (2/2) • For example, we don’t want to block anything while we are loading some data from API. var cb = function(result) { console.log(result); } fetchUrl(“https://api.cdnjs.com/libraries“, cb);
- 14. Quick Demo Do something after 1 second
- 15. Callback hell (1/2) • If we want to call multiple async functions…… fetchApi(“first.api.com”, function(result) { // do something first and fetch another API fetchApi(“second.api.com”, function(result) { // call another async function }); });
- 16. Callback hell (2/2) • To resolve callback hell we can use: • Async library • Promise • async/await syntax (ES7)
- 17. Useful data types • Some useful data types: // list (array) var l = [1, 2, “3”, “abc”, {“the”: “map”}]; // map var m = {“key”: value}; // boolean var b = true;