Javascript

there you will find Javascript basics, and how DOM mainpulation working in pig game , and you will find Javascript deeper contain examples about scoping and hoisting and closure and more of deepth structures , and Budget App is a big application by javascript how use all js basics and js deeper in one app and using controllers.

<h1>Javascript Basics</h1> <ul> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Basics/variables.js" >Variables</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Basics/operators.js" >Operators</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Basics/if-statment.js" >if/else statements</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Basics/boolean-and-switch.js" >boolean logic and switch</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Basics/functions.js" >Functions</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Basics/expressions-with-functions.js" >Statements and expressions</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Basics/arrays.js" >Arrays</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Basics/objects.js" >Objects</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Basics/objects-and-methods.js">Objects and methods</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Basics/loops.js">Loops</a></li> </ul> <br> <h1>Javascript Deeper</h1> <ul> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Deeper/hoisting.js">Hoisting</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Deeper/scoping.js">Scoping</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Deeper/this.js">this keyword</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Deeper/function-constructor.js">Function constructor</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Deeper/object.create.js">Object.create</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Deeper/different-between-primitives-objects-functions.js">Different between Primitives, Objects and Functions</a> </li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Deeper/passing-functions-as-arguments.js">Passing functions as arguments</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Deeper/functions-return-functions.js">Functions returning functions</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Deeper/IIFE-immediately-invoked-function-expression.js">IIFE (Immediately Invoked Function Expression)</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Deeper/closures.js">Closures</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/JS-Deeper/bind-call-apply.js">Bind, call and apply</a></li> </ul> <br> <h1>Javascript ES6</h1> <ul> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/ES6/let-and-const.js">let and const</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/ES6/destructuring.js">Destructuring</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/ES6/blocks-IIFEs.js">Blocks & IIFEs</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/ES6/strings.js">Strings</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/ES6/classes.js">Classes</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/ES6/classes-and-subclasses.js">Classes and Subclasses </a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/ES6/spread-operator.js">Spread Operator</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/ES6/arrays.js">Arrays</a> </li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/ES6/arrow-functions.js">Arrow Functions</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/ES6/arrow-functions-part-2.js">Arrow Functions part 2</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/ES6/rest-parameters.js">Rest Parameters</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/ES6/default-parameters.js">Default Parameters </a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/ES6/maps.js">Maps</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/ES6/proxies.js">Proxies</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/blob/master/ES6/promises.js">Promises</a></li> </ul> <br> <h1>Javascript Design Patterns</h1> <ul> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/creational">Creational</a> <ul> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/creational/constructor">Constructor</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/creational/factory">Factory</a> <ul> <li>Abstract Factory</li> </ul> </li> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/creational/singleton">Singleton</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/creational/builder">Builder</a></li> </ul> </li> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/behavioral">Behavioral</a> <ul> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/behavioral/command">Command</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/behavioral/observer">Observer</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/behavioral/iterator">Iterator</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/behavioral/mediator">Mediator</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/behavioral/state">State</a></li> </ul> </li> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/structural">Structural</a> <ul> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/structural/adapter">Adapter</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/structural/facade">Facade</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/structural/decorator">Decorator</a></li> <li><a href="https://github.com/moumen-soliman/Javascript/tree/master/Design%20Patterns/structural/flyweight">Flyweight</a></li> </ul> </li> </ul> <br> <h1><a href="https://github.com/moumen-soliman/Javascript/tree/master/Budget%20App">Budget App</a></h1> Controllers in Javascript and how handle the anonymous functions and function constructor and contain <ul> <li>Create HTML String with placeholder text</li> <li>Replace the placeholder text with some actual data</li> <li>Insert the HTML into the DOM</li> <li>DOM Mainpulation and how it work</li> <li>Get Field input data</li> <li>add the item to the budget controller</li> <li>add the item to the UI</li> <li>Calculate the budget</li> <li>Display the budget on the UI</li> </ul>