CODEWITHSUNDEEP
javascripthtmltags
SemperCallide
SemperCallide

Reputation: 2070

Javascript working without script tag in HTML?

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.

Upvotes: 0

Views: 3642

Answers (3)

Lou
Lou

Reputation: 353

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.

Upvotes: 3

CodeMonkeyArtist
CodeMonkeyArtist

Reputation: 22

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!

Upvotes: 1

Quentin
Quentin

Reputation: 943108

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

Upvotes: 0

Related Questions