Javascript Bootcamp | Basics | Part 1–9
Mastering the Basics
Intro
What's up team! Congrats on taking your first steps in learning a new skill that could potentially change your world for the better. Learning JS and programming languages, in general, equips you with the ability to approach problems more systematically, thus more effectively. Learning a language changes your paradigm of thought for the better and could possibly give you the opportunity to completely shift career trajectories. Additionally, having this unique skillset allows you to rapidly build programs from scratch that could benefit you or friends instead of waiting and hoping for someone to make it for you. Let's get started!
01 Types of Languages
What is Javascript?
often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions [1].
Project Usecase
The purpose of this section is to remind you that each project is unique in the problems that they bring. Thus, each project should be paired with the most appropriate language to solve the challenges associated with the project itself. There are multiple languages the top 5 most prominent are arguable:
- Python (my first language)
- Javascript
- Java
- Swift
- C Programming
Each of these top 5 languages have their own unique frameworks (we’ll cover that later) and are better or worse at solving various problems. Understanding that there are various languages and frameworks per language will equip you with the know-how to build your application with the proper tools.
Extras
During your JS journey, you should consider frequenting this site below to help give you insight on frameworks, packages, and modules to use to help build your project more easily. No need to reinvent the wheel and a quick google search will go a long way too.
02 Setting up Your Environment
Installing VSCode
This will be your introduction to IDEs. This is a fancy acronym that basically allows you to visually see your code and project folder structure. It allows for easy building and most IDEs offer plugins which make the whole process that much smoother. Go to the site below and download the file according to your OS.
Once you get it running we will create a new project and that will direct us to a new empty project folder.
Caveat: There are many IDEs but this is one that I'm using so to make the process of learning programming less challenging I’d recommend using the same platform.
Here are some of the plugins that I’d like you to consider downloading:
- Pretty code
- Bracket colors
- JS Snippets
- Jquery snippets
- Html boilerplate
- Live server
Coding Environment Variations
I wanted to quickly emphasize this section by letting you know if you watch tutorials in the future pertaining to JS or other languages remember that each environment is different. Shoot there are 4 common ways I can think of setting up a basic HTML/CSS/JS environment. People may use the command line, raw files & folders, GIT downloads, or any combination of the three. So, DO NOT get tripped up by different environments, especially if you scroll through other JS tutorials to supplement this one. No need to panic.
Our Environment
We are going to set up the environment for our first program. This will be extremely simple.
First, we need to create a new file. The file can be named anything BUT we must end it with a .HTML. Best practices suggest you name the first file as the index. So, for example we are making an index.html file in the root folder of the project.
Now right click and run on the live server. It SHOULD open up a new tab on your web browser and all you will see is a blank screen.
First Application
Now that we have our environment set up we will use this “magic code” from the plugin we downloaded earlier.
in your new index.html file type HTML. It should suggest the HTML boilerplate when you hit enter. This will automatically populate the code. It should look a little something like this:
and after you hit enter should look like this:
Now we will use <h1></h1> tags to create a header.
<h1> Hello </h1>Don’t worry about the boilerplate code for HTML. The focus of this course is to understand JS not HTML. We will cover more HTML concepts in section two Moderate, but if you are curious to be sure to check out the additional resources below for more info on HTML language; what it is, and how it works. Its a really simple language.
Dev Tools
Each browser (minus explorer I think) has its own dev tools. I use chrome and its as simple as right-clicking and hitting inspect. See below:
Now in the dev tools, you have the elements tab which displays the DOM elements (usually HTML based), and if you click the console tag that's where all the js magic becomes visible. We will be in the console log often.
Exercise
Now that we have something displayed on our we are going to build our first web application
in our index.html file we will use something called script tags. Once again this an HTML concept. Don’t get tripped out by this. The focus is js not HTML but all you need to know for now is that the script tags allow the user to place js code in the file to be used on the site.
JS is a great tool for manipulating the DOM (HTML elements) like adding text, showing/hiding content, changing colors on clicks, etc. With that, you can visually see the js in action but often JS is working behind the scenes. Let’s see what I mean.
Add this code inside the body tags:
[VS Code]
Once you click save and navigate to the site tab, you will notice nothing has changed. We still see “hello” but nothing else. However, if we open up our console log with the dev tools we can see that “Hello World” was logged to the console!!!!
The console.log() method allows us to indiscreetly log words, numbers, data, and every other object you can think of(will learn about this next) to the console. This is immensely useful when you are working with errors and data in your application. We will explore both concepts in this section.
CONGRATULATIONS. I know… it seems anticlimactic but you made your first application.
As mentioned previously, each application has different environments. Now JS is predominantly known as a web language so most often you building a JS project will look something similar to this. Some HTML files, some CSS files, and of course some JS files. We will build some more basic applications in the following parts to help you better understand and visualize these core JS concepts. For now, happy coding and see you in the next article!
References
[1] “JavaScript,” Wikipedia, 27-Apr-2020. [Online]. Available: https://en.wikipedia.org/wiki/JavaScript. [Accessed: 27-Apr-2020].
Thanks for reading! If you enjoyed this article, make sure to applaud us down below! Would mean a lot to me and it helps other people see the story.
