learn wpu

Jscheatsheet

Further source: https://developer.mozilla.org/id/docs/web/javascript/a_re-introduction_to_javascript

Data type

• Number: (15 digits)

  1. Figures without decimal: 10, 123456, 3000
  2. Decimal numbers: 3.14, 0.5, 100.00
  3. Exponents: 123E5 // 12300000, 123E-5 // 0.00123
  4. Negative numbers: -0.134, -2, -100.00
  5. Octal number (base 8)
  6. Hexadecimal numbers (base 16)
  7. Special numbers: -infinity, nan

• Operator

  1. Unary (requires 1 operand) a. typeof number, string, boolean
  2. Binary (requires 2 operand) a. Arithmetic: +, -, _, /, % (modulus) Precedence Operator: Kurung, Kali, Divide, Add, Less. b. Assignment: =, +=, -=, _ =, /=, %= c. Comparison (comparison): ==,! =, ===,! ==,>,> =, <, <= D. Logic: &&, ||,! e. String: Cumatination +
  3. Ternary (requires 3 operand) a. conditional (condition)? right: wrong (x % 2 == 0)? "Even": "Odd"

• String Escape Character

  • 0 = NULL
  • '='
  • "="
  • =
  • n = new line
  • t = tab
  • B Backspace
  • uxxxx = unicode

Variable

• Declaration: Register variables into the appropriate scope.

• Initialization: Providing memory for variables.

• Assignment: Determine specific values ​​into variables.

  Variable Requirements:

  • without spaces.
  • Camelcase.
  • not starting with numbers.
  • Do not use keywords & reserved word.
  • Variable Scope: Local & Global.

• Var, Let & Const

Refactoring: a process of changing the code to be better without changing its functionality.

 Alasan:

-   Readability
-   DRY, dont repeat yourself
-   Testability
-   Performance
-   Maintainability

• Popup Box Function:

  • Alert
  • Prompt
  • Confirm

Control flow

• Repetition (loop)

  1. while a. while (condition) {action}; b. the initial value of while (termination condition) {action; Increment/Decrement; }

  2. for (initial value; termination conditions; increment/ decrement) {action; }

  3. For of (String, Array, Arguments, Typedarray, Map, Set, User-Defined iterables) Const Name = 'Rama'; for (const n of name) {console.log (n); }

  4. for in (enumerable / property from object) const mhs = {name: 'rama', age: 29, email: '[email protected]',}; for (m in mhs) {console.log (mhs [m]); }

  5. do while

• Selection (selection)

  1. if else if (condition) {action 1; } else {action 2; }
  2. else if if (condition 1) {action 1; } else if (condition 2) {action 2; } else if (condition n) {action n; } else {default action; }
  3. switch switch (expression) {case "value 1": action 1; [Break;] Case "Value 2": Action 2; [break;] Case "value n": action n; [break;] Default: default action [break;]}

Function

• Built-in function

  1. Alert ();
  2. Confirm ();
  3. Prompt ();
  4. split ();
  5. slice ();
  6. etc.

• User-Defined Function Keyword NameFunction (Parameter/Argument *Optional) {Function Body; return value; *optional} console.log (namefunction (argument));

  1. Function Declaration
  • Function Identifier (Parameterlist Opt) {Function Body}
  • More flexible
  • Easy to understand beginners Example: function number of numbers (a, b) {total letter; Total = A + B; Total return; }
  2. Function Expression
  • Must be defined before being called
  • More powerful (closure, argument for other functions, iife) Declaration Identifier = function (parameterlist pest) {function body} Example: Let number of numbers = function (a, b) {let total; Total = A + B; Total return; }

Scope

• Global / Window Scope Let a = 1; console.log (a);
• Function Scope Function Test () {Let B = 2; } test (); Console.log (B);
• Block Scope Function Test () {let C = 3; console.log (c); } test ();

Recursion: A function that calls himself.

Implementation:

• Replacing looping
• Fibonacci series
• Search & searches of data lists list & tree Examples: factorial function (n) {if (n === 0) Return 1; Return n * factorial (n -1); }

Data structure

• Array: Collection of elements (Value / Variable) which each element has an index. Array Function:

  • Facilitate the management / value / data management
  • Memory Management Example: Let Hari = ["Monday", "Tuesday", "Wednesday", 1];

• Array manipulation

  • Number of Elements: Length
  • Combining: Join
  • Add & delete: at the end: push, pop at the beginning: Unshift, Shift
  • connect and cut:
    1. Splice Nameralarray.splice (Indexawal, Maudihausu, Elementbaru1, New Element2, ...);
    2. Slice Let Arraybaru = NameraRray.Slice (Indexawal, End);
  • Looping:
    1. not in the form of array: foreach nameraray.foreach (function (parameter) {action;})
    2. in the form of array: map nameraray.map (function (parameter) {action;})
  • Sort Array: Sort NameraRray.Sort ();
  • Looking for Array Elements:
    1. One Value: Find Let Arraybaru = NameraRray.Find (Function (Parameter) {Return;})
    2. Many values: Filter Let Arraybaru = NameraRray.Filter (Function (Parameter) {Return;})

• Object: A collection of elements (value/ variable) which each element has a property.

  • Literal Object: Not effective for a lot of objects. Let NameBject = {Property1: Value1, Property2: Value2, Method1: Function1
    }
  • Function Declaration Object Function NameBject (Param1, Param2) {Declaration Object = {}; Object.Prperty1 = PARAM1; Object.Prperty2 = Param2; return object; } Object New Declaration = NameBject (Value1, Value2);
  • Object Constructor Function Function NameBJECT (Param1, Param2) {this.Prperty1 = Param1; this. Programrty2 = Param2; } Object New Declaration = New NameBject (Value1, Value2); This is a global scope object.
  • Object.create () Function NAMEBJECT (PARAM1, PARAM2) {Declaration of Object = Object.create {}; Object.Prperty1 = PARAM1; Object.Prperty2 = Param2; return object; } Object New Declaration = NameBject (Value1, Value2);
  • Prototypal Inheritance Function NameBject (Param1, Param2) {this.Prperty1 = Param1; this. Programrty2 = Param2; } Nameobject.pototype.method1 = Function1; Nameobject.pototype.method2 = function2; Nameobject.pototype.method3 = Function3;
  • Prototype in Class Version Class Namaklas {Constructor (Param1, Param2) {this.Property1 = Param1; this. Programrty2 = Param2; } Method1; Method2; Method3; }

Context

1. Creation Phase in Global Scope Var name = undefined Name Function = fn (), which is its function itself.
   • Hoisting window = Global Object This = Window
2. Execution Phase Function makes Local Execution Context

Closures

• is a combination of function and lexical scope in the function.
• A function when it has access to Parent Scope, even though the parent scope has been completed. Example: Function NameFunction (Param1) {Return Namalocalfunction (Param2) {Function Body}} Declaration NAMEVARIABLE = NAMAFUNCTION (ARGUMENT1); NameVariable (Argument2);

Arrow Function

• Another form that is more concise than Function Expression. Example: Declaration Identifier = (Parameterlist Opt) => {Function Body} Example: Let number of numbers = (param1, param2) => {function body}; // Implicit Return
• This in the Arrow Function Arrow Function cannot be applied to this. Example: Declaration NameBject = Function (Param1) {this.Prperty1 = String; this.Property2 = () => {Function Body}; } Declaration NAMEVARIABLE = NEW NAMEBJECT ();

Higher Order function

Function that operates in other functions (in argument / return value). Javascript treats function as an object. Why: Abstraction, which is to simplify a program because the greater a program, the higher the complexity, the more confusing the programmer.

• Array.pototype.map ()
• Array.pototype.filter ()
• Array.pototype.reduce ()

Literal template

is a literal string that allows the expression in it. Can use: ''; ""; And ;

With backtick ( ) can make:

• Singleline String: string text
• Multiline String: string text 1 string text 2 string text 3
• Embedded Expression: string text ${expression} string text
• HTML Fragments
• Expression Interpolation
• Tagged Templates:
  • Escaping / sanitize html tags
  • Translation & Internationalization (I18N)
  • Styled Components

Destructuring Assignments

Expression on JS which makes us able to dismantle the value of Dr. Array / Property Dr. Object into a separate variable.

• Array const try = ['one', 'two', 'three']; const [a, b, c] = try;
• Object Const MHS = {Name: 'Ramadyan', Age: 25, Email: '[email protected]',}; const {name, age, email} = mhs;
• Function
  • On return value
  • On the arguments

Spread operator

Operators that break itlebles into single elements.

Rest parameter

Represents the argument in the function with unlimited jumalh into an array.

Synchronous vs Asynchronous

• Single-Thread vs Multi-Thread Environment Execution Task
• Blocking vs Non-blocking Ngoding Techniques (Input-Output Related)
• Synchronous vs Asynchronous Ngoding Engineering (http request related)
• Concurrent vs parallel environment execution task task (infra, hardware & virtualization related)

Callback

The function sent as a parameter in another function.

Example: Function NameFunction (NAMACALLBACK) {Declaration of Name Valis = Value; Callback (names); } NameFunction ((namevar) => {console.log (execution);});

Promise

Object that represents the success / failure of an async event in the future. Promise (Fulfilled / Rejected / Pending). Using Callback => Action (Resolve => Then / Reject => Catch / Pending => Finally).

Example: Declaration of Name Var1 = Value; const namevar2 = new promise ((resolve, reject) => {if (nameVAR1) {resolve (value);} else {reject (value);}}); namesvar2 .that ((response) => console.log (execution)) .catch ((response) => console.log (execution));

Ajax & Fetch

Fetch is a method of API JS to take resources from the network & return the complete promise (fullfilled) when there is a response that is available. Notation: Fetch (Resources, Init);

• Resources: URL / Request Object (Representation of Source Requests).
• Init: additional configuration in an object request (example: get, post, method, header, cache, etc.)
• Response: The results of Dr. Fetch in the form of Promise (Property & Method).

Async & Await

• A function that works asynchronous (through Event Loop),
• which produces (implicit) promise as a return value,
• But the way of writing the code using synchronous writing (standard).

A Async Function can have an Await keyword in it to temporarily stop the execution of its function while waiting for the promise to finish (resolve).

DOM (Document Object Model): Representation of the HTML element in the document becomes an object. Stored into Dom Tree.

DOM Benefits:

• As an object -based programming interface that represents web documents.

• DOM makes all components of web pages accessible & manipulated.

• Components: HTML elements, attributes, text, etc.

• Dom Tree

  1. Nodelist: A collection that contains any node.
  2. Htmlcollection: a collection that contains html elements and is live.

• Hierarchy:

  • Root Node (Document): The node that is the source of all other nodes in the dom.
  • Parent Node: The node that is one level above another node. Ex: Body is Parent Dr. H1, P, DIV & A.
  • Child node: The node that is one level below another node. Ex: H1 is Child Dr. Body.

• Node type type/ node:

  1. Element
  2. attribute
  3. text
  4. CDATA Section
  5. Entity reference
  6. Entity
  7. Processing Instruction
  8. Comment
  9. Document
  10. Document Type
  11. document fragment
  12. Notation

• Dom Selection

  • Like using elements in HTML:
    1. GetlementByid () = produces elements.
    2. getelementsbytagname () = produces HTMLCollection.
    3. getelementsbyclassname () = produces HTMLCollection.
  • Like wearing a selector on CSS:
    1. Querysector () = produces elements.
    2. Querysectorall () = produces nodelists.

• Dom Manipulation

  • Element Manipulation
    1. element.innerhtml = change the contents of the selected element.
    2. element.style. = Changing the style of the selected element.
    3. element.getattribute () = know the contents of the attribute.
    4. element.setttribute () = add attributes.
    5. element.removeattribute () = delete attributes.
    6. element.classlist:
       • ADD () = adding class.
       • Remove () = delete class.
       • Toggle () = adding class if not there, delete if there is.
       • Item () = checking class with index.
       • Contains () = check the class in question.
       • Replace () = Changing the class.
  • Node manipulation
    1. document.createelement ()
    2. document.createtextnode ()
    3. node.ppendchild ()
    4. node.insertbefore ()
    5. parentnode.removechild ()
    6. parentnode.replacechild ()

• Dom event

  • Event Handler = can only run the last command.
    1. Inline html attribute
    2. Element Method on
  • Addventlistener () = can be run many times.

• Dom Traversal

  • Parentnode = result node.
  • Parentelement = the result of the element.
  • Nextsibling = result node.
  • NextelementSibling = the result of the element.
  • ADCEFIBLING = Node results.
  • PreviouselementSibling = the result of the element.

• Default Prevent

  • To prevent default action, use Method: event.preventdefault ();

• Bubbling event

  • When the event is run, it will run the event in Parent before going to Child. Using event.stoppropagate ();