Over the past couple of months I have been building a great foundation for Web Development using Javascript, HTML, and CSS. The topics we covered ranged from the fundamentals all the way to communicating with the server. Let me walk you through the journey.
Javascript Fundamentals - Just like any programming language, Javascript uses variables. Remember, let can be reassigned but not redeclared, var cannot be reassigned or redeclared, and don't use var(you can but not recommended)!
The only other thing I will tell you about fundamentals is that there are 7 javascript data types: numbers, strings, booleans, symbols, objects, null, and undefined. Moving on.
Javascript Functions - Functions are the epicenter of Javascript - they only fly First Class.
There are many ways to create and define functions in Javascript. I find myself using arrow functions the most => but they can't be hoisted :(
Anonymous functions are great for callback functions.
Standard functions are great, but don't have the built in return function that arrow functions have (make sure you know when to use and when not to use).
Scoping - Scoping tells us which functions and variables can be accessed, and where they can be accessed. Global variables can be accessed by any function, while local variables are only accessible to functions and variables within its scope. It all connects via scope chain. It sounds confusing, but is easier to understand visually. Moving on.
Data Structures - The 2 main data structures to focus on in Javascript are Arrays and Objects.[ Arrays contain elements and can be accessed via index]. {Objects contain key:value relationships and are accessed via the key or value}. There are many ways to loop through each element of an object or array: forEach and for...of run through each element of an array, while for...in iterates through each key:value in an object. Don't forget about for loops!
Array Iteration - Make sure to know how to use .map and .filter: .map creates a new array that takes an original array and applies a callback function to it to change the elements. .filter creates a new array that only includes the elements that meet a certain criteria.
Three Pillars Of Javascript
The DOM - The DOM is the visual representation of our code. I find it easy to select elements to use in my Javascript file by creating a live server in google chrome, then clicking (command option i). From there I can see each element and use the console to test out my code.
Javascript Events - JS events are where the page comes to life. Any action you use when searching the web was built using a javascript event: a click, search, keypress, hover elements, the list goes on...
Without them, our website is just plain boring.
Communicating With The Server - This is the final layer between Frontend and Backend. We use fetch to connect our remote Database to our frontend. All the data storage is kept in a JSON file, where we can access it via a GET request.
And thats all folks. Stay tuned for more.
Top comments (0)