JOURNEY TO THE FRONT END WORLD - PART3 - THE MACHINE

This will introduce you to JavaScript Basic

Transcript

1. Journey To The Front End World Part : 3 BY IRFAN MAULANA The Machine : Dynamic World in JavaScript
2. Who am I ? • Name : Irfan Maulana • Job : Software Development Engineer at Blibli.com • Front End Developer for last 4 year console.info(“Who am I?")
3. Pre-Warning ! • This slide contain basic knowledge in front end side, if you feel you are too big, please don’t read this slide. • This slide may contain subjective perception from the author, if you have different thinking please don’t let me know .
4. Getting to know JS • JavaScript (JS) is a lightweight, interpreted, programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as node.js and Apache CouchDB. JS is a prototype-based, multi-paradigm, dynamic scripting language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles
5. Getting to know JS • JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects;
6. Getting to know JS • JavaScript is the beginning of its works to make the interaction between user and the website becomes more quickly without having to wait for processing in the web server. • Before JavaScript, any interaction from the user must be processed by the web server. • Imagine when we fill out the registration form for the registration of a website, and then to click the submit button, wait about 10 seconds for a website to process the form field, and found a page stating that there is a column form is still not filled.
7. About ECMAScript (ES) European Computer Manufacturers Association ECMAScript (or ES)[1] is a trademarked[2] scripting- language specification standardized by Ecma International in ECMA- 262 and ISO/IEC 16262. It was based on JavaScript, which now tracks ECMAScript. It is commonly used for client-side scripting on the World Wide Web. Other implementations of ECMAScript include JScript and ActionScript.
8. About DOM The Document Object Model (DOM) is an API for HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as JavaScript. See more at Mozilla Developer Network - DOM.
9. DOM Tree
10. Browser Tool • Use google chrome development tools console to start Javasript exercise • First, right click anywhere on the screen and hit Inspect Element, then click on the Console tab. You should see a thingy that looks like this:
11. Browser Tool • Use google chrome development tools console to start Javasript exercise • First, right click anywhere on the screen and hit Inspect Element, then click on the Console tab. You should see a thingy that looks like this:
12. Declarations var Declares a variable, optionally initializing it to a value. let Declares a block scope local variable, optionally initializing it to a value. const Declares a read-only named constant.
13. Data Types •Six data types that are primitives: •Boolean. true and false. •null. A special keyword denoting a null value. Because JavaScript is case-sensitive, null is not the same as Null, NULL, or any other variant. •undefined. A top-level property whose value is undefined. •Number. 42 or 3.14159. •String. "Howdy" •Symbol (new in ECMAScript 2015). A data type whose instances are unique and immutable. •and Object
14. Operators Operator Explanation Symbol(s) Example add/concatenation Used to add two numbers together, or glue two strings together. + 6 + 9; "Hello " + "world!"; subtract, multiply, divide These do what you'd expect them to do in basic math. -, *, / 9 - 3; 8 * 2; 9 / 3; assignment operator You've seen this already: it assigns a value to a variable. = var myVariable = 'Bob'; Identity operator Does a test to see if two values are equal to one another, and returns a true/false(Boolean) result. === var myVariable = 3; myVariable === 4; Negation, not equal Returns the logically opposite value of what it preceeds; it turns a true into a false, !, !== The basic expression is true, but the comparison returns false because we've negated it:
15. Conditional The most common one is the if statement. Essentially, you're saying, "If this condition is true, do the following...". For example:
16. Loop - for
17. Loop - while
18. Functions Function can be re-use your logic that repeatedly calling.
19. Scope A variable name has to be unique within the same scope -- there can't be two different a variables sitting right next to each other. But the same variable name a could appear in different scopes.
20. Closure Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope). In other words, these functions 'remember' the environment in which they were created
21. Closure -- practical
22. JS Code Convention • Google code convention https://google.github.io/styleguide/javascriptguide.xml • Airbnb https://github.com/airbnb/javascript • Idiomatic Style Manifesto https://github.com/rwaldron/idiomatic.js
23. Hands On • Lets do Exercise : • 1. Find “Ganjil – Genap “ number between 1-10; • 2. Create Factorial function with recursive. • 3. Print * ** *** **** ***** Using nested loop;
24. Hands On -- continues • We have our latest HTML and CSS code here : https://github.com/mazipan/journey-to-the-frontend- world/tree/master/part-2 • So, we will add more JS for interactions : // Your Task : Add CRUD interaction with LocalStorage API here the cheatsheet code : https://github.com/mazipan/journey-to-the-frontend- world/tree/master/part-3
25. Next Step • Async and Performance : https://github.com/getify/You-Dont-Know- JS/blob/master/async%20&%20performance/README.md#you- dont-know-js-async--performance • ES 6 Learn : https://github.com/getify/You-Dont-Know- JS/blob/master/es6%20&%20beyond/README.md#you-dont-know- js-es6--beyond
26. Reference • https://developer.mozilla.org/en-US/docs/Web/JavaScript • http://www.w3schools.com/js/ • https://github.com/getify/You-Dont-Know-JS • http://jsforcats.com/ • https://github.com/feross/standard/ • https://sivers.org/learn-js
27. Contact Me o Facebook : /mazipanneh o Twitter : @mazipan o Linkedin : /in/irfanmaulanamazipan o Slideshare : /IrfanMaulana21 o Github : mazipan o Email : mazipanneh@gmail.com o Blog : mazipanneh , mazipan.github.io
28. Thank You