Animations – JavaScript

Hello and welcome back,

In the previous post we have learned that there are two types of animations. Right now and in the next post we will touch the animations through JavaScript.

Before we start, please, never say that JavaScript and Java have something in common. There was some some marketing involved at some point, that’s all, absolutely nothing, different companies, different way of working. All you might get from mixing those 2 words is being labeled that you know less than you might actually do.

How is JavaScript added to an HTML page?

Phew, thanks for asking. Gladly we already know how this works without knowing it. Do you remember how in the lesson “How to link CSS to our HTML?” we have used the tag <link> to link our CSS. For JavaScript (JS), we will use <script>.

There are some small differences though. We will learn about them a bit later in this post.

So, for now, our HTML page should look like:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
<script type=”text/javascript” src=”javascriptFile.js”></script>
<title>The title of our tableau</title>
</head>
<body>
<div class=”green leaf” id=”first_leaf”>first leaf</div>
<div class=”red leaf” id=”second_leaf”>second leaf</div>
<div class=”green flower”>very very small flower</div>
</body>
</html>

Also make sure you create the empty file “javascriptFile.js” in the same folder just as you created the CSS file.

Tomorrow we will find out how JS functions.

Gabi

Leave a Reply

Your email address will not be published. Required fields are marked *