Journey To The Front End World - Part3 - The Machine
Download as PPTX, PDF•3 likes•845 views
This document is a summary of part 3 of a journey to the front end world. It provides an introduction to JavaScript, including what it is, its uses, data types, operators, conditional statements, loops, functions, and scope. It also discusses ECMAScript, the DOM tree, developer tools, and code conventions. Hands-on examples are provided to add CRUD interactions with local storage. References for further learning are included, and contact information is provided for the author.
![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.](https://image.slidesharecdn.com/twrisym9t8ogbi4lrxir-signature-ce05936615787748e8aaa789257ef5e502149dca94a54bb9588d3c3acb9eb128-poli-170105024224/85/Journey-To-The-Front-End-World-Part3-The-Machine-7-320.jpg)
Journey To The Front End World - Part3 - The Machine
- 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 : [email protected] o Blog : mazipanneh , mazipan.github.io
- 25. ThankYou