Class 18: Being Trilingual
In this class we take a step back and refresh on the three languages we’ve quickly learned: HTML, CSS, and JS. How do they link together? What is the purpose of the things we’ve done?
JavaScript: a.k.a. the glue
Out of HTML, CSS, and JavaScript, JavaScript is the hardest language to learn and master. With HTML and CSS you are dealing with pretty simple sets of rules, like HTML tags and CSS styles. JavaScript is a very complex and intricate langauge, because it is used for many different things: computation (think: calculators), animation, interactives, and lots more. Out of the three, JavaScript resembles other programming languages you may have heard of the most, like C++ or Python.
In other words, learning JavaScript really well equips you to handle almost any other programming langauge. And remember, knowing a programming language just means knowing what it’s capable of and how to Google things.
In this class, we’ll learn just the JavaScript concepts we need to make simple interactives. In this sense, JavaScript is the language that marries HTML and CSS together to make beautiful and changing things. Then, next week we’ll introduce final projects and learn a lot more about JavaScript, ya know, for fun.
The trilingual toolkit
Below I will break down things we’ve covered that connect the three languages together, what they’re used for, and how to use them. Keep in mind: you need to link files to HTML to get stylesheets and JavaScript connected in the first place.
Connecting files
The following two rules connect HTML to CSS and JS files respectively.
<link rel="stylesheet" type="text/css" href="...">
Connects HTML and CSS files together
Put this line in the head section of your HTML file to bring in CSS styles you create in a CSS file.
index.html<head>
...
<link rel="stylesheet" type="text/css" href="style.css">
</head>
style.cssbody {
font-family: Helvetica, sans-serif;
}
It’s important to make sure the file name you put inside the href attribute matches the name of your CSS file.
<script src="..."></script>
Connects HTML and JS files together
Put this line at the end of the body section of your HTML file. It is important to include this at the very end of your body section, before the closing </body> tag, because otherwise your JavaScript file won’t be able to see all the HTML.
index.html<body>
...
<script src="main.js"></script>
</body>
main.jsconsole.log("Hi"); // prints out "Hi" to the JavaScript console
Connecting HTML elements
The following three attributes connect HTML elements to CSS and JavaScript.
The class attribute
Connects HTML and CSS
Note: this step assumes you’ve already linked your stylesheet
The
class attribute allows you to style an HTML tag based on CSS rules.
HTML<body>
...
<div class="bar"></div>
...
</body>
CSS.bar {
height: 15px;
background: blue;
margin-top: 5px;
margin-bottom: 5px;
}
The id attribute / document.getElementById
Connects HTML and JS
Note: this step assumes you’ve already linked your JavaScript file
By the time you do web development for a few weeks,
document.getElementById will be muscle memory. This is a JavaScript function that connects the world of HTML to JavaScript. Specifically, it gives you a
reference to an
HTML element in JavaScript that you can then manipulate with code. Let’s break that down.
What does a reference mean? In programming speak, a reference just means a way to connect with that element. If it’s unclear, an HTML element just refers to a tag — the two words are, for the most part, interchangeable. Think of a reference like a business card. The HTML element puts out a card with an id attribute. This is like a phone number JavaScript can hook into to be able to interact with the HTML element.
HTML<div id="apple"></div>
JSlet apple = document.getElementById("apple");
apple.style.color = "red";
The onclick attribute and functions
Connects HTML and JS
Note: this step assumes you’ve already linked your JavaScript file
Adding the onclick attribute to an element allows you to connect functionality to it that’s defined in a JavaScript file. Make sure you create a function in JavaScript, and then in the
onclick attribute of an HTML element. Don’t forget parentheses!
HTML<button onclick="showHi()">Show hi</button>
<p id="text"></p>
JSlet text = document.getElementById("text");
function showHi() {
text.textContent = "Hi!";
}
