Javascript working without script tag in HTML?

Question

I'm learning Javascript for the first time, and using online tutorials from w3resource.com to help me understand the basics.

I see something happening in a tutorial that I don't understand, but I have no way to know whether the tutorial is misleading me or there's something I'm missing.

Basically, it's a small program to print out the date and time. I'm being shown the HTML and the JS so that I can see how it works. Based on what I've read about JS, the HTML requires a "script" tag so that it knows to incorporate the JS. However I don't see that tag being used in the tutorial. Does that mean the tutorial is misleading me as to what is proper protocol, or is there someway to embed JS in HTML without the "script" tag?

Here is what I am being shown:

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript current day and time</title>
</head>
<body>

</body>
</html>

Javascript:

var today = new Date();
var day = today.getDay();
var daylist = ["Sunday","Monday","Tuesday","Wednesday ","Thursday","Friday","Saturday"];
       console.log("Today is : " + daylist[day] + ".");
        var hour = today.getHours();
        var minute = today.getMinutes();
        var second = today.getSeconds();
        var prepand = (hour >= 12)? " PM ":" AM ";
        hour = (hour >= 12)? hour - 12: hour;

if (hour===0 && prepand===' PM ') 
{    
if (minute===0 && second===0)
{  
hour=12;
prepand=' Noon';
}  
else
{  
hour=12;
prepand=' PM';
}  
}  

if (hour===0 && prepand===' AM ') 
{    
if (minute===0 && second===0)
{  
hour=12;
prepand=' Midnight';
}  
else
{  
hour=12;
prepand=' AM';
}  
}  


console.log("Current Time : "+hour + prepand + " : " + minute + " : " + second);

This is the tutorial I am using: http://www.w3resource.com/javascript-exercises/javascript-basic-exercise-1.php

If anyone could explain to me how this JS is being embedded in the HTML without the tag I would appreciate it. I am going to be tested on this in person next week and I will be asked to write code from scratch, so I can't afford misunderstandings like this.

the site put both together and then loads it into an frame. there are script tags — x4rf41
– x4rf41, Commented Sep 20, 2015 at 15:27
but srsly, noone can expect you to know that stuff if you just started with web technology — x4rf41
– x4rf41, Commented Sep 20, 2015 at 15:29
That appears to just be a quirk of jsbin, in that it confusingly allows you to put in a dummy html page. All the output is to the console, it is not interacting with, or being embedded in a web page. I mean literally it is being shown to you in a web page - but you get my drift, not that web page — Robert Dupuy
– Robert Dupuy, Commented Sep 20, 2015 at 15:30

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

There's indeed a weird thing about this code. There's 3 ways to link JS and HTML :

Using the script tag :

<script> your script </script>
Write the JS in another file and link it to the HTML using :

<script type="text/javascript" src="yourFile.js"></script>
Incorporate it with events like :

<div onclick='alert('Hello')'>click here</div>

I just think that in the tutorial they are using something like JSBin to link the files or incorporate the JS part into the HTML as it would be on http://codepen.io/ for exemple.

I hope this will help you.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 20, 2015 at 15:33

Lou

3631 gold badge2 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CodeMonkeyArtist · Accepted Answer · 2015-09-20 15:33:27Z

You are absolutely correct. HTML requires some indication of what is script and what is HTML. Script can be inline in a tag like this:

<script type="text/javascript">
    var loc = window.location;        
</script>

or without the type tag

<script>
    var loc = window.location;        
</script>

Notice, that in most cases, you do not need to specify the language, as the default is typically JS.

Additionally, you can use an external file (again, type is generally optional, but doesn't hurt to have in there):

<script type="text/javascript" src="/js/myScript.js"></script>

In the tutorial that you referenced, they skipped over the step of showing you where to put the js. This is often done because they want to let you decide whether you use it inline or in a separate file. In addition, many of those tools like JS Bin and such just show you the different types of content (css, js, html) without showing you how they link together. They also often skip the style tags and script tags for any framework dependencies as they are trying to keep it simple for the reader.

That said, if keeping it simple makes a user's life harder, perhaps something went slightly wrong in the design of the tutorial and the demo environments...

Hope this helps!

Quentin · Accepted Answer · 2015-09-20 15:26:42Z

0

They are using JS Bin (which will insert the script element for you) to host the demo.

answered Sep 20, 2015 at 15:26

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

Javascript working without script tag in HTML?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related