This slide will introduce you into basic knowledge in Javascript

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 forWeb 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 WorldWide Web.
Other implementations of ECMAScript
include JScript and ActionScript.

8. About DOM
The Document Object Model (DOM) is anAPI 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. 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

21. 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 :
//YourTask : Add CRUD interaction with LocalStorage API
here the cheatsheet code :
https://github.com/mazipan/journey-to-the-frontend-
world/tree/master/part-3

22. 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

23. 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

24. 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

25. ThankYou