bideowego / question_javascript_objects_and_webpages

JS Office Hour Question Answer

Asker: ArryPotta

Question

Hey, so I'm looking to get into frontend development, and I've been going through a bunch of courses... I am confident with my HTML, CSS, and basically half of Javascript. I always seem to get totally lost when they move into object oriented design. It's very frustrating because every learning resource I find seems to make this giant leap at this specific aspect of JS learning and starts speaking to you like you should already know half the things they're firing off at you. Did anyone else experience this while learning? How did you get past it? ... How do I use objects in webpages?!

Answer

1. Divide and Conquer Split up what you want to learn into accessible pieces of knowledge you can study in a clear order.
   1. JavaScript Objects
   2. JavaScript Classes
   3. JavaScript Constructors
   4. JavaScript Events and the DOM
   5. JavaScript Templates
   6. JavaScript AJAX XHR
2. JavaScript Objects Even easier JavaScript classes, there's JavaScript objects.
   • http://www.vikingcodeschool.com/dashboard#/falling-in-love-with-javascript/basic-syntax-objects
3. JavaScript Classes OOP is not complex in its simplest form.
   • http://www.vikingcodeschool.com/dashboard#/falling-in-love-with-javascript/es6-clasess
4. JavaScript Constructors What is going on under the hood of JavaScript constructors?
   • http://www.vikingcodeschool.com/dashboard#/falling-in-love-with-javascript/constructing-objects
5. JavaScript Events and the DOM Tying OOP into HTML events and CSS manipulation is powerful, but it's an added layer of complexity. At the simplest level, you want an object to represent an element or component on your webpage. When the user interacts with that element, it will likely call a function on the object. The most common library used for this purpose is jQuery. A more robust and modern solution would be React.
   • http://www.vikingcodeschool.com/dashboard#/falling-in-love-with-javascript/events
   • http://www.vikingcodeschool.com/posts/learn-full-stack-javascript-in-12-weeks-with-viking-immersive
   • https://api.jquery.com/category/events/
   • https://api.jquery.com/category/manipulation/
6. JavaScript Templates Another way objects are used in webpages is simple display. You have a webpage that represents and object. The various elements in that page display properties of that object.
   • http://www.vikingcodeschool.com/dashboard#/professional-development-with-javascript/templates
   • https://expressjs.com/en/guide/using-template-engines.html
   • http://handlebarsjs.com/
7. JavaScript AJAX XHR Yet another way objects are used in webpages is to wrap around requests made to an API.
   • http://www.vikingcodeschool.com/dashboard#/react-basics/the-fetch-api
   • https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
   • http://api.jquery.com/jquery.ajax/