Hi PJO,
The code in the book is meant to stay within the <script></script> tags. Much of the book focuses on just the JavaScript, though there is some more talk about the integration with HTML later on.
JavaScript, unlike something like the server-side langauge PHP, is executed on the client, usually interacting with an already complete DOM (HTML elements) structure. While PHP can run code in the middle of HTML tags producing content within them as the page is being built, JS tends to take the route of waiting for the page to already exist and be loaded before doing anything with it. It also doesn’t integrate itself directly into HTML or vise versa so much (with some exceptions), so mostly you have JS just in script tags, and other HTML everywhere else (generally not also in the script tags). So instead of something like:
<p>showDistance(10,5)</p>
You would simply call showDistance within the script tag itself without any other HTML that might get in the way or cause script parsing errors (JS doesn’t like trying to read HTML tags mixed in with the code):
<script>
function showDistance(speed, time) {
alert(speed * time);
}
showDistance(10,5);
</script>
Because showDistance calls the alert function, it will automatically throw up a dialog with the result of 10 (as speed) * 5 (as time). There’s no HTML here. Its all script, and it runs as soon as the HTML parser reaches the script tag, executing the code before it moves on to reading other HTML tags below it.
This particular example specifically targets a dialog for the result. If you want to put the result in a <p>, for example, you need to be able run JS that finds that p in the document, and once found, set its text.
For this to work, we need to do a couple of things. The first is changing the showDistance so its not using alert anymore. Instead we can have it just produce a value and return it. Then we can take that value and give it to the p to display in the HTML.
<script>
function showDistance(speed, time) {
return speed * time;
}
// ...
</script>
Then we need to be able to find an already-existing p element, and set its textContent property, the property that represents what’s inside that element. Now, as I’ve said before, script tags get run as soon as they’re parsed in HTML, so for a script run in that tag, for it to target a p tag, that tag needs to be above the script tag (events help you get around this which I’m sure you’ll learn about later). We also need to know how to reach that p tag. And for that we can use an id attribute - a unique identifier for that tag that lets us find it by its value.
<p id="distance"></p>
<script>
function showDistance(speed, time) {
return speed * time;
}
// ...
</script>
And to find it, we use document.getElementById which is a function that does pretty much what it sounds like, finds and returns an element using its id attribute. Once we have that element, we assign its textContent property and we’re good to go.
<p id="distance"></p>
<script>
function showDistance(speed, time) {
return speed * time;
}
var p = document.getElementById("distance");
p.textContent = showDistance(10,5);
</script>
The book mostly assumes you stick to code inside script tags, seeing results through alerts and not interacting with other HTML too much. Once you get into some later chapters, you’ll see more of that.
