JavaScript Essential Training

  1. JavaScript: A Brief Introduction

    • JavaScript: First contact: JSX: a syntax extension of javascript created for the React JavaScript framework. Here are all the things that are going to pop up during the course: Objects, Methods, Functions, Template literals, Arrays.
    • Navigating the JS landscape: Here are some different JS versions: Vanilla JavaScript, ES2015-2020, ECMAScript, TypeScript, ES6, CoffeScript, JSX, React, Node.js, Angular, Vue.js, Babel, WebPack, Gulp. The core is Vanilla Javascript; the browser specification is ECMAScript; ES6-2015-2017-2020 refers to the use of features in ECMAScript, but is not necessarily supported by browsers, in order to turn it back to code that the browser can use use Babel.js; Typescript is a different type of javascript that includes a few more features than the original; React, Rue, and Angular are JavaScript frameworks; npm, WebPack and Gulp are build tools, and infrastructure that automates and optimizes the human-readable code for browsers; Node.js is similar to npm, WebPack, and Gulp, but it is server-wide rather than browser-wide.
    • Tools for working with JavaScript: You would need a modern browser, a text editor, a live server enviroment, and a browser console.
    • Linting and formatting: You can install Prettier to help with formatting your code. ESLint helps find any JS code errors, and fixes them.
    • Get to know the browser console: The browser console is the best way to test javascript code on a web browser.
    • JavaScript language basics: The comments for javascript are single line:
      // comment

      and multiline:
      /* Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. */

      Tabs and spaces will be used to indent the lines of code to form a sort of hierarchy. and
    • Learning JavaScript backward: Instead of starting how you normally would learn JS, we will start with objects and methods, then Data types and DOM, then finally methods, functions and events. To really learn this language, you would need to find ways to make sense of the language.

  2. Up and Running with JS

    • JavaScript in an HTML document: You can write JavaScript in the HTML document using the <script> tag.
    • JavaScript as an external file: Javascript as an external file will need to be put into the HTML file with this bit of code: <script src="script.js"></script>.
    • Modern JavaScript loading: Having the JS at the end of your code is beneficial because if it directly interacts with an elemnt that hasn't been rendered yet then it would cause some problems with the code. But not all of your JS should be at the bottom, because if it is needed up at the top of your page also, then it would need to be up there. The async attribute renders HTML and downloads JavaScript at the exact same time, then it stops rendering when the javascript is fully loaded and executes it. The defer downloads JS like the async, but it doesn't execute the JS until the HTML is done rendering.
    • JavaScript Modules: A javascript module is a section of code that has been moved to a seperate file and imported into the original. Though now you have to put both files into the same HTML document, and put type="module", to help prevent any mishaps.

  3. Objects

    • Objects: A practical introduction: Objects in JavaScript are very similar to objects in real life except that they aren't made of physical elements but code. These objects can have their own properties just like real life ones, as in color, shape, size, and etc.
    • JavaScript objects: The code version: To make an object, use a constant and give it a name. Then put an (=) sign, then ({}) with properties inside of it to define the object. Some properties can have their own properties inside of them with the curly brackets. You can also call to a function or method iside of the object.
    • Object containers: An object container holds any data inside of it that defines it and it can hold other objects as well.
    • Object properties: A property is the keyword plus a value in quotation marks and is what is used to describe an object. Has to be seperated by a comma. and for property names,always use camelCase.
    • Accessing objects: In the console, you would type the objects name and it will pull up the object.
    • Accessing object properties: There are two ways to access the properties in an object: dot-notation, and bracket-notation. Dot-notation, you would put a dot and then the name of the property after the name of the object. Bracket-notation, you would put square brackets instead of a dot in between the object name and the property.
    • Object methods: Methods are functions that are inside of an object. They perform actions on properties inside of those objects.
    • Classes: Object blueprints: You can add classes to JavaScript but they are relatively new. Instead of a lowercase name as an object, a class has a uppercase word (not all uppercase). To create a class, use this to declare the class class Name {}, then create the expression const Name = class {}.
    • Object constructors: An object constructor has almsot the exact same code as a class but it is limited to making objects while the class can do a bit more.
    • Global objects: The browser has a bunch of already made objects that you can find at this site MDN webdocs.

  4. Sidebar: String Output

    • Mix text and variables with template literals: To make a template literal, put some HTML inside of a constant in the JS file, and set the document body equal to the constant, and it will put that code in. To put in some values for the snippet of HTML, put a dollar sign ($), and then in curly brackets ({}) put the data you want to pop up.
    • Traditional string output: The traditional string output was putting a constant with a string, then in that string some HTML tags and then breaking the string by putting quotation marks around the code we want to show up as text and then the rest is not surrounded by quotation marks, and has plus symbols (+) to connect the string.

  5. DOM

    • DOM: The Document Object Model: A DOM is a HTML object formed from when the browser first looks at the page. It forms the hierarchal structure from all of the elements in the web page.
    • Access elements with querySelector methods: The querySelector() locates the element or class that you want to find and highlights it in the browser, but it only finds the first one f that type of class or element. The querySelectorAll() higlights all of the elements or classes of that type.
    • Access elements using older methods: Element.getElementsByClassName(), Document.getElementById, are both older element selectors but they still work just fine. They are also very self-explanatory.
    • Modifying element classes: To either delete or add a class to an HTML document use the Element.className to add a class. There is also Element.classList that will provide a list of classes to use. It also comes with methods that can also manipulate classes as well.
    • Attributes: Element.attributes shows all the attributes of an element, and it comes with different versions of itself, as in setAttributes, and removeAttributes.
    • Inline style: If there are any Inline CSS styles in your document, then you can type ElementCSSInlineStyle.style, and it will pop up all of the styles along with the styles that you have already put down. You can even change the styles too.
    • Add DOM elements: Using Document.createElement, you can create an element inside of an HTML document, then use the ParentNode.append() to put the text you want to add after the original, and it won't be replaced. If you instead want the new code to be before the original code, then you can use ParentNode.prepend().

  6. Sidebar: Variables and Data Types

    • Variables: Containers for everything: When we name any item, we automatically create a container for it. JS does the same thing, where it names a variable, and puts an object inside of that variable.
    • Var: This is the basic variable container and it is defined by the var statement, which is the name then a equals symbol (=) with a value.
    • Scope: What it basically means is that if, for example, you change the value of a var to a color, then after some code change it in a function, any other text with that var after it will become that new color even if the function was only supposed to affect one item, but that is only if you call to the item before the code that wasn't supposed to change.
    • Let: The let var is locally-scoped to change a variable, yet it only affects the function if it was in a function. The best strategy on using a let is to only use it if you are going to change the variable or anything like that.
    • Const: A constant works the same as a let except you cannot reassign it's value no matter what.
    • Data types: Here are some data types used: String, Numbers, Boolean, Null, Undefined, Object, Array.
    • Assignment vs. comparision: Assignment is assigning a value to a variable, comparision is comparing an item with another item by using an if-else statement.
    • Math operators: You can have the computer do math for you by typing in a equation of some sorts, and assigning number values.

  7. Arrays

    • Arrays explained: Arrays are used to store, retrieve, and process data.
    • Arrays in code: Arrays start their list with 0 then 1, 2, 3, 4, and so on. You can change the contents of an array using: variable-name[#] = "value". You can use the same code to add a new item.
    • Array methods: One of the many methods for arrays is the join method, and it outputs a string. There is also the Push method which pushes new items onto the end of the array. The Unshift method puts things at the front of an array. Shift takes the first item out and scoots everything to the side. There are a ton more methods in the MDN WebDocs Webdocs.

  8. Functions and Methods

    • The real-world function: A function is a list of steps put in code. In real life, when we do smething that requires steps, we sometimes skip certain steps and make mistakes, but most of the time it works out. Computers require accurate steps and if they mess up on something, will just stop what they are doing, or continue on until they absolutely can't go on because they are missing something.
    • Functions and methods: Here is a couple of examples of functions:
      // Function declaration:
function doSomeMath(a, b) {
    let c = a + b;
    return c;
};

// Function expression:
const doMoreMath = function (a = 3, b = 2) {
    let c = a * b;
    return c;
};

// Immediately Invoked Function Expression (IIFE)
(function () {
    let a = 4;
    let b = 6;
    let c = doSomeMath(a, b);
    console.log(`The sum of a and b is: ${c}`);
})();

    • A standard function: A standard function has a function name, curly brackets {} holding the function body.
    • The arrow function: An arrow function looks the same as the normal function, but it has an arrow (=>) behind the parenthesis and in front of the curly brackets.
    • Arrow functions and "this": The this keyword is usually used to point to the object it currently is inside of.
    • Pass data to a function with parameters: You would need an argument and then parameters inside of the function. Now you just put any bit of data in the argument and the function will run and return its answer.
    • Return values from a function: Here is a function Intl.NumberFormat that can return number values that are automatically changed to the style they need to be in.
    • Callbacks: A callback function is a function that calls back to a function from above it in the code.
    • Conditional if...else statement: An if...else statement tests if a certian condition is true (or false), and if so, then it runs whatever is inside of the curly brackets ({}). If the value is false (or true) then the else statement will run.
    • Logical operators: You can also have the conditional and (&&) statements: which test for both conditions, and or (||) statements: which test for one of them, or both.
    • Conditional switch statement: A switch statement has different cases that it uses to compare and returns whatever the descrition is.
    • Looping through content: The for-loop is the most basic type of loop. There is also the for...of loop, foreach loop, for...in loop.
    • Using the map() array method: The map() method is a method for complex arrays. It brings in a normal array, then does whatever function it has in it, then sputs out a new array.

  9. Events

    • DOM events explained: Events are the things that happen to activate something, like clicking your mouse, or typing on your keyboard.
    • Typical DOM events: Here is the MDN WebDocs with a ton of browser events.
    • Event listeners: An event listener is a method that "listens" for an event and if it detects one, then whatever is inside of that method is activated.
    • Advanced event listeners and "this": You can add a "this" to code inside of a function that is targeting an object to have the function target only that object. You have to use an actual function and not an arrow function, because it will not work.
    • Pass arguments through event listeners: Would have to put the event listener inside of an arrow function, then put parenthesis behind the event listener and now we can put parameters inside. (kind of a cheat).

  10. Troubleshooting and Validating JS

    • Troubleshooting JavaScript in the browser: To make sure that your code is working and that there are no mistakes, or if there are mistakes then so that you can fix them, use the browser console. To get there, just right-click > select Inspect > then go to Console. To access your folders to make sure that they are in the right spots, to further check your code, or for any other reason, navigate how you would to get to console, but instead of console go to sources.
    • Making sense of a React component: Most people who use React save their data to an object.