natancabral / javascript-learn

Here we learn JavaScript, starting from scratch and go on to advanced concepts like OOP. We concentrate on the language itself here, with the minimum of environment-specific notes.

JavaScript ES6

Welcome

//----------------------------------------------------//
//       Author: Natan Cabral                         //
//  Description: No panic, this is simple javascript  //
//----------------------------------------------------//

// constant object
const welcome = {
  message: 'Welcome',
  person: 'my little',
  subject: 'friend',
}
// arrow function destruction 
let GoodMorning = ({message: ms, person: ps, subject: su}) => {
  return ` ${ms} ${ps} ${su} `
}
// destruction array, you can change
let hi = [...['Hello!'], GoodMorning(welcome)]
// log
console.log("%c" + hi.map(e=>e).join(''), "color:green; font-size: 25px"); 
// map not necessary ;)

---

Advanced

• Arrow Funcion
• Map | Video
• Unique Values
• Delete Array & Object
• Dynamic Object Key link
• Filter and Finder
• Reduce Basics
• Destruction Array & Object
• Reduce Object Example
• Getters and Setters link
• ${personal.name}
• this | global or local link

Basic

• Variable Naming Rules
• const, let, var
• Quotation Marks
• String Concatenation
• Numbers Basics
• Implicit Type Conversion
• Data Types
• Arrays
  • Concat
  • Some & Every
  • Fill
  • Filter
  • Find
  • Includes
  • Array.from()
  • Join Link
  • Map Link
  • Reduce Link
  • Pop Push Shoft Unshift Link
  • Delete
  • Sort & Reverse Link
• Functions
  • Declare, Invoke
  • Parameters, Arguments
  • Return
  • Currying
• Objects
• Conditional Statements - Basics
• Conditional Statements Continued

Equality

• Equality
• Logical Operators
• Switch Statement
• Null and Undefined
• Truthy and Falsy

While

• while Loops
• do while loops
• for loop
• Array Iterators
• forEach
• Math Object
• Date Object

DOM

• Get Element By ID
• Get Elements By Tag Name
• Get Element By Class Name
• Query Selector and Query Selector ALL
• Navigate the DOM - Children
• Navigate the DOM - parentElement
• getAttribute() setAttribute()
• classList and className
• createElement - createTextNode - appendChild
• insertBefore
• replaceChild
• prepend innerText
• remove removeChild
• innerHTML and textContent
• Change CSS with style property
• Click Event
• Function Reference
• Mouse Events
• Key Events
• Event Object

String

• Reduce Name