JavaScript for the Complete Beginner | Part 1 — Why JavaScript?
Introduction
If you’ve ever been interested in learning JavaScript but didn’t know where to start or have read some lessons that didn’t make sense then welcome — his guide is for you. Here, I’ll start from the very beginning and go step-by-step until you’re the hacker you always wanted to be. I’m kidding. Please note: though I’m going to try to be as clear and simple as possible in my explanations, that doesn’t absolve you as a reader of your responsibility to memorize the vocabulary and concepts. I may repeat myself — I may not. Lastily, I’m going to focus on simplicity, which has may have a small deteremental effect on accuracy. For brevity’s sake, I’ll often talk about the general purpose and functionality of things and avoid pointing out the exception to every rule. That’s for you to find.
Understanding Why JavaScript is a Good Language to Learn ❓
There are many programming languages that you can and should take a good look at sometime. They each have their pros, cons, and general uses. Python is often used when analyzing data. Swift is used to create things for Apple devices. What makes JavaScript useful is that it has become the standard for website development and is supported by all major browsers. So, to understand the largest benefit of JavaScript, we first must understand just a little bit about how the web works.
The Internet 🕸
The internet is made of a computer networks across the world connected together in some form. When click on a webpage we sent out a request similar to ordering a Lego set online. A request is sent out and received by a server, which finds the exact set (or webpage) we asked for, and then sends the requested set (packets of data, in this case) back to us. Then out web browser — Firefox, Chrome, Safari, Edge or Internet Explorer, most likely — interprets the instructions (also packets of data) and builds the webpage in our browser on our end. This is the big takeaway — the data is on our side of the server.
Test It Out
Let’s mess with a webpage. click here and look up your own web browser to see how you can inspect the packets of data you’ve downloaded. After you’ve opened up the inspector, go ahead and delete a some of the elements. Things should start disappearing on screen. No, you’re not a hacker. 😐 Now refresh. All you did was delete packets of data downloaded in your own browser; whatever server hosts the website has the original version of the webpage, and when you refreshed you asked the website for a shiny new copy. This isn’t to say you don’t interact with websites and their servers; whenever you click “Add To Cart” or something similar you are sending data back to the server which is often saved or stored. But it’s important to understand that a web browser is more then merely a lens through which we interact with their webpage on their server.
Okay, Why Should I Know This?
Your web browser is an app which must be able to communicate with the webpages you view. And three core pieces of this communication are HTML, CSS, and JavaScript. In other words, until all the web browsers and programmers of the world unite under the banner of a different language (yeah right) and burn all their previous work and projects to the ground (…maybe), javaScript is here to stay. Though it’s been around for quite a while, JavaScript is still evolving and growing along side the web. JavaScript is a great language to learn because it’s ubiquitous and has a lot of people gunning for its success. Programming languages live and die on the support they receive and the demand companies have for them, and JavaScript has both in spades.
Should I Learn HTML and CSS if I want to develop web apps?
Yes.
What’s The Difference?
HTML is a markup language. It looks something like this:
<html>
<body>
<h1 id="title">This is a header tag.</h1>
<p>This is a paragraph tag.</p>
<button>You guessed it, this is a button.</button>
</body>
</html>It creates the structure of a webpage — the example above creates a header, a paragraph, and a button with too much text in it.
CSS is a styling language. It’s job is to dress our drab HTML with whatever formatting we desire. Blue text on a red background? It can do it, regardless of whether or not you should. Zebra text? Don’t mind if I do. CSS looks something like this:
#title {
color: 'red';
font-size: larger;
padding: 10px 5px;
}This example, if applied to our HTML earlier, would search for the element with an id named “title,” make the font red and larger, and add some padding around it.
To compare them to grammar, HTML is the noun. It’s the structure or bones of our webpage. CSS is the adjective. It describes what our webpage will looks like. And JavaScript is the verb, it describes what our website can do.
I recommend learning more about HTML and CSS before continuing. You don’t need to be a master before getting into Javascript, but they’re both fairly simple and will give you a good foundation on which to build. I’ll leave you to learn those on your own, however. In part 2 we’ll start digging into JavaScript.
