Website Behavior
What is JavaScript?
JavaScript is one of three languages (HTML, CSS, & JavaScript) used in creating websites. JavaScript is sometimes abbreviated as JS. If you’ve ever visited a website and interacted with fluctuating layouts, some visual response to your button click, or image carousels, then you are already familiar with JavaScript! Congrats! Now, check out this awesome example by the W3 to see JavaScript in action.
Like CSS, JavaScript is stored in an external document in the same folder in which your other website files are stored. Do you recall why linking to an external document is best practice for websites? The HTML document features the website content. The CSS document manages the website appearance (the website’s makeup: lipstick, cologne, etc..). And of course, the JavaScript file focuses on bringing fun, interactivity to your website.
What does JS look like?
Great question. Before you read any further, know that it’s okay to take small, tiny steps in learning about web development technologies. Similar to a 5-course meal, you cannot expect to consume all of the food all at once. A great approach to web development is to acknowledge that something is confusing, but then to also tackle it again, read the article again, look at the code again. It will come.
So, back to the example. Prior to even looking at a JavaScript excerpt, you need to tell your HTML document to reference the JS file. Basically, “Hey HTML document, I want JavaScript over for dinner tonight, here’s their phone number.” In this instance, the phone number is the <script src> tag, informing your HTML document to include the particular JS file when the website is rendered. Here’s the code you might place in your HTML document (always before the closing </body> tag!)
<script src="js/main.js"></script>
In this example, the reason we put “js/main.js” is because the JavaScript document (main.js) is located within the js folder. The JS folder is just something I made up. It is good practice to place files in folders, such as CSS/appearance.css and JS/main.js. A good way to remember why we do this is to think of how you’d organize pictures on your computer. Hopefully you don’t just dump them all into a Pictures folder. You’d put pictures from the Santa Barbara trip in the Pictures/Santa Barbara folder or Christmas in the Pictures/Christmas 2016 folder.
Now, in the JavaScript file, a very simple bit of code would look like this:
var myHeader = document.querySelector('h1');
myHeader.textContent = 'Hello, World!';
What does this code even do? Let’s tie it all together. So on your website (in your HTML document), you’ve got a H1 heading that says “A Heading Waiting to Be Changed by JavaScript”. Very clever. Well, once your JS runs, the JS code we just typed out above will dynamically change the H1 tag in your HTML document and print out the new H1, which is ‘Hello, World!’. Why would this be useful? In the big picture, recount your last login to Gmail. Did it greet you by name? Websites use JavaScript to dynamically personalize your experience on the Internet.
Why JavaScript?
It’s true that websites could probably do without JS (JavaScript), using just HTML + CSS. But, the Internet would be quite a boring experience. JS is pretty compact and very flexible. What does that mean exactly? Well, using the core JS language, over time, developers have created many libraries that use JS functions. For example, you may have heard of jQuery. jQuery is a very fun JS library, more on that later.
Now, if that last paragraph seemed scary, everything is going to be alright. It’s important that you read the words that I have written. I know they might not make 100% sense right now, but once you learn some basics, you’ll have this “Aha!” moment and know precisely what’s going on in this paragraph.
Should I Learn JavaScript?
While you do not have to become a Jedi Master at JavaScript, you should definitely become familiar with some JavaScript terms & basic skills. JavaScript is the last of the three main languages to building a website that, once learned, you will really start making great things.
Once you learn JavaScript, you’ll unlock a vast amount of power and creativity in your web developer toolkit. And I believe in you!
Additional Resources
If you’ve stumbled upon this page and don’t know HTML or CSS, read the Intro to HTML and Intro to CSS to get started prior to learning JavaScript. You can certainly learn things out of order, but I suggest you get your bearings with the other two languages first. The Mozilla Developer Network provides a free tutorial, as of February 2016, that explains more best practices and tricks.
Adam Lawicki 