Is a Healthcare Career Right for You?

Take the Free Quiz

What is JavaScript? Tutorial for Beginners

What is JavaScript?

JavaScript (sometimes abbreviated as “JS”) was created in 1995, as a programming language for internet browsers. JavaScript was adopted very quickly, and has, by this point in 2016, become — by far — the world’s #1 programming language for browsers.

First Things First. What’s a Browser?

Internet browsers, often referred to simply as “browsers,” include programs like Google Chrome, Internet Explorer, Firefox, and Safari. If you’re reading this on the internet right now, you’re using a browser. It’s the program that’s showing you this web page. It most likely looks like a big window on your screen, maybe with a few tabs at the top showing you which web pages you have open at the moment.

Coding For The Browser

There are three main coding languages for browsers: HTML, CSS, and JavaScript.

HTML takes care of the structure of the web page. HTML code like <h1>this is a heading</h1> and <p>this is a paragraph</p> tell the browser to display things as headers, paragraphs, images, tables, sections, etc.

CSS takes care of the style of the web page. CSS code like body { background-color: black; } and h1 { color: blue; } tells the browser how each HTML element should look. With CSS, you can control things like color, size, position, opacity, etc.

JavaScript takes care of the behavior of the web page. JS code like <button onclick="this.innerHTML=Date()"> Click to Display Date </button> can create dynamic behavior for your webpage. In this example, we’ve created a button element with the HTML code <button>, and used a little bit of JavaScript — onclick="this.innerHTML=Date()" — to tell the browser what to do when the button is clicked. In this case, it will display the date inside of the button element. Try copy/pasting that code into an HTML file to try it for yourself!

While this is a very simple (and not very useful) application, JS can be used to create pretty much everything you see on the web, from online stores, to giant web apps used by millions of people, to cutesy little animations for your blog homepage.

Pre-Requisites for Learning JavaScript

If you haven’t had a basic introduction to HTML and CSS yet, you should probably check those out first. In order to be able to use JavaScript in the first place, you’ll need some basic coding skills, like creating code files with a text editor (which you can learn in our Atom tutorial), and structuring a basic webpage (which you can learn in our “What is HTML?” tutorial). You can technically start learning JS before you learn CSS if you really want to, but it is very helpful to learn a bit of CSS before you start tinkering with JS.

A Simple Example to Get You Started

JavaScript is a complex programming language, and there are thousands of books written on the subject. Next week, we’ll get started on learning a few of the basic concepts. For now, let’s just start with a very simple example to get you started.

Create a new HTML document (like you learned how to do in the Atom and HTML tutorials), and copy/paste the following code into it:


<!DOCTYPE html>
<html>
<body>
<button onclick="getUsername()">Enter Your Username</button>
<p id="displayUsername"></p>
<script>
function getUsername() {
var username = prompt("Please enter your username", "Awesome FVI Student");
if (username != null) {
document.getElementById("displayUsername").innerHTML =
"Congratulations, " + username + "! You just did the JavaScripts!";
}
}
</script>
</body>
</html>

 

For a fun challenge, see if you can figure out what you think this code will do, before you double-click on the HTML file to open it in the browser!

And don’t forget to join us next week, to create your first JavaScript files and start building a JavaScript video game!