Journey To The Front End WorldPart : 3

BY IRFAN MAULANA

The Machine : Dynamic World in JavaScript

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?")

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 .

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

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;

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.

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.

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.

DOM Tree

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:

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:

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.

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

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:

ConditionalThe most common one is the if statement. Essentially, you're saying, "If this condition is true, do the following...". For example:

Loop - for

Loop - while

FunctionsFunction can be re-use your logic that repeatedly calling.

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.

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

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

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

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

Contact Meo Facebook : /mazipanneho Twitter : @mazipano Linkedin : /in/irfanmaulanamazipano Slideshare : /IrfanMaulana21o Github : mazipano Email : mazipanneh@gmail.como Blog : mazipanneh , mazipan.github.io

Thank You