JavaScript Program [was: Java Program]

The Absolute Beginner’s Guide does not follow what I was able to get working.

<h1>, <p>, etc. don’t appear in the book.

alert does, but does not work.

What I am doing wrong?

Thanks

<!DOCTYPE html>

<html> 
<body>
 
	<h1> Hello, World! </h1>
	<p> class = "subtitle" This is an example of a web page. </p>
	<p> The text between "body" and "/body" appears to be part a "body" function.
	</p>
	<p> This is an example of a web page. class =  "subtitle" is not needed.  
	</p>
	<p> "h1" denotes a title. "p" denotes text.  </p>
<script>
	function showDistance(speed, time) {
		alert(speed * time);
	}
	var speed = 10;
	<p> showDistance(10,5)</p>
	alert("Help");
</script>
	<p> showDistance(10,5) </p>
	showDistance(10,5);  
</body>

</html>
1 Like

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.

2 Likes

Thanks so much for the clarification.

Your answer to my problem is clear but I won’t be able to test my knowledge until I have a chance to play with my script. I won’t have time to do this until tomorrow.

The material on page 9 of the Kirupa book does not use <p> and <h1>. I don’t recall where I first encountered this notation. I suspect when I launched <!DOCTYPE html> for the first time.

In any event, <html>, <body>, <script>, <p> and <h1> are confusing.

Can you direct me to a website that clarifies a Java program from Java Script document, its notation and when to use one, the other or both?

Thanks so much for your help.

PJO

I can give you the basics here:

HTML: An XML-like markup language (not script or code) used to describe the content and layout of a web page. HTML uses tags like <body> and <p> to map out page content. The top of HTML files usually start with <!DOCTYPE html>. HTML pages are what the browser renders.

JavaScript: A programming language (script) which is used to perform different kinds operations within a web page. This is all the code The Absolute Beginner’s Guide is covering. HTML can include JavaScript code using the <script> tag. It can link to external JavaScript files (.js extension) or include script code inline, inside the HTML document. That file is still an HTML file (.html extension… usually, but a lot of different extensions can be used to display HTML).

Java: Another programming language that existed before JavaScript. There are some similarities, but you should be sure to not confuse the two. They are different languages and are not interchangeable. JavaScript will run directly in your browser (in an HTML page) when Java programs are compiled and run through a separate “virtual machine” called JVM, which is literally the Java Virtual Machine. It used to run in web pages as a plugin, like Flash, but you don’t see that much anymore. Be sure to not shorten JavaScript to simply “Java” because it will mean a different thing.

When it comes to learning this stuff, you generally want to start with HTML. This is the starting point for most JavaScript usage - the more fun JavaScript at least. You can run JavaScript from the command line too, but thats a little more boring. Once you have HTML down, then you can start integrating a little JavaScript and see how they interact.

I’m not really sure what would be some good resources for you. Anything I’d find would just be me googling them. I would suggest you do the same looking for some beginner HTML stuff that looks easy to follow along with.

2 Likes

Hey man ! As senocular said, it is best if you get HTML down first. look this tutorial at kirupas web site, once you learn these you’ll be able to do cool things with javascript. And don’t worry, HTML isn’t hard to learn.

Oh! I forgot about those. I think after my current run of tutorials around React and animation stuff is done with, my next job is to update all of those :stuck_out_tongue:

2 Likes