journey to the front end world - part3 - the machine
TRANSCRIPT
![Page 1: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/1.jpg)
Journey To The Front End WorldPart : 3
BY IRFAN MAULANA
The Machine : Dynamic World in JavaScript
![Page 2: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/2.jpg)
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?")
![Page 3: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/3.jpg)
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 .
![Page 4: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/4.jpg)
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
![Page 5: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/5.jpg)
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;
![Page 6: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/6.jpg)
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.
![Page 7: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/7.jpg)
About ECMAScript (ES)European Computer Manufacturers AssociationECMAScript (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.
![Page 8: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/8.jpg)
About DOMThe 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.
![Page 9: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/9.jpg)
DOM Tree
![Page 10: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/10.jpg)
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:
![Page 11: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/11.jpg)
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:
![Page 12: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/12.jpg)
Declarationsvar
Declares a variable, optionally initializing it to a value.let
Declares a block scope local variable, optionally initializing it to a value.
constDeclares a read-only named constant.
![Page 13: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/13.jpg)
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
![Page 14: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/14.jpg)
OperatorsOperator Explanation Symbol(s) Example
add/concatenationUsed 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 operatorYou'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 equalReturns 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:
![Page 15: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/15.jpg)
ConditionalThe most common one is the if statement. Essentially, you're saying, "If this condition is true, do the following...". For example:
![Page 16: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/16.jpg)
Loop - for
![Page 17: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/17.jpg)
Loop - while
![Page 18: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/18.jpg)
FunctionsFunction can be re-use your logic that repeatedly calling.
![Page 19: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/19.jpg)
ScopeA 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.
![Page 20: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/20.jpg)
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
![Page 21: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/21.jpg)
Hands On• 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
![Page 22: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/22.jpg)
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
![Page 23: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/23.jpg)
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
![Page 24: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/24.jpg)
Contact Meo Facebook : /mazipanneho Twitter : @mazipano Linkedin : /in/irfanmaulanamazipano Slideshare : /IrfanMaulana21o Github : mazipano Email : [email protected] Blog : mazipanneh , mazipan.github.io
![Page 25: Journey To The Front End World - Part3 - The Machine](https://reader035.vdocuments.us/reader035/viewer/2022081604/587a24ad1a28abbd388b4db3/html5/thumbnails/25.jpg)
Thank You