Journey To The Front End World - Part3 - The Machine
-
Upload
irfan-maulana -
Category
Technology
-
view
454 -
download
0
Transcript of Journey To The Front End World - Part3 - The Machine
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 : [email protected] Blog : mazipanneh , mazipan.github.io
Thank You