How to include javascript in html5

javascript jquery css html

19,734

Solution 1

You really messed up your html code, try googling for the HTML(5) basics, first of you should learn the basic construction of it like following:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf8">
        <title>Welcome</title>
        <link type="text/css" href="styles/default.css">
    </head>
    <body>
        <!-- HTML Content -->

        <script type="text/javascript" src=".."></script>
        <script>
        // Javascript inside this file
        </script>
    </body>
</html>

The link- and script part is not necessary, but you mostly will need it so I put it in the right order in. Try putting script-Tags over the closing </body>-Tag, this will prevent that the page is loading endless for the Javascript file, before the page is actually loaded.

This way the external Javascript should work, also if you working localy, you should use a Webserver software like XAMPP. If you use XAMPP, after installing it, you have to start the Apache Service and then you work inside (if you didn't changed the path) the C:\xampp\htdocs folder. If you create a folder inside it called testing and place your index.php inside it, you just can type following in the browser http://localhost/testing and it will search for a index. html or php file and parse it.

If you just double click the file, you mostly will end up with security issues, which will prevent your code will work like you intended to do. You know that you double clicked a file if it starts like file:// and not http://.

But like I said, google for tutorials from the scratch. It takes time, but you can't do it without taking the time. Trust me, I do this for over 7 Years now and I am online nearly everyday and learning, learning, reading, testing, coding, learning, reading, testing and I STILL think that this is less than 5% of knowledge what I could learn.. never think you are at the end or near to it.. you never are, there are always things to learn and if you keep in thought that you are near the end, you will stop improving and never become good.

Solution 2

<script>
  $(document).ready(function(){
    $(".info").hover(function(){
        $("#info").fadeIn("slow");
    });

    $(".close").click(function(){
        $("#info").fadeOut("slow");
    });

});

</script>

19,734

RM GoodMan

Updated on September 15, 2022

Comments

RM GoodMan over 1 year

I can not connect an external JavaScript file to my html page. When I put the script in the page with the tag it all works but when I insert it in an external file is not working, what is wrong?

<!DOCTYPE!>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- JQuery da Google -->
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!---------------------->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- JS-->
<script src="js/function.js" type="text/javascript"></script>
</head>

<body>

<footer>
<img class="info" src="img/newsletter.png" width="32" height="32" alt="info" />
</footer>

<div id="info">
    <ul class="infomenu">
        <li class="newsletter">NEWSLETTER</li>
        <li>PRIVACY</li>
        <li>CONTACT</li>
        <li>FOLLOW US</li>
    </ul>

</div>
</body>
</html>

Javascript

    //Jquery Info
$(document).ready(function(){
    $(".info").hover(function(){
        $("#info").fadeIn("slow");
    });

    $(".close").click(function(){
        $("#info").fadeOut("slow");
    });

});

m4n0 almost 9 years

Correct your doctype first. Where is the <html> tag? :)
Quentin almost 9 years

Use a validator
Swaraj Giri almost 9 years

Are you running the html file directly in a browser or via localhost?
frosty

You seem new to all this so I'll ask a basic question - did you create a folder called "js" within the directory where your file is, which then includes the function.js file?

Cagatay Ulubay almost 9 years

Giving downvotes without an explain is like saying "Coffee is bad.". At this point the question is:"Why is coffee bad? Do you don't like the taste? Do you think the coffein is bad? Because it paints your teeth brown? But what about positiv effects of coffein and coffee in general?". Be constructive, don't use that button just to gain badges, that's lame, unproductive and doesn't provide quality! If you think I didn't answered, then: I did. Read again, understand it. If you can't manage the basics, your code won't work and that's part of it. I showed and explained the steps.
Tech Savant almost 9 years

Was probably the other answer who is just jealous/jaded that he got downvoted so lashing out. I see a lot of revenge voting on here. I'll shoot you an upvote to help out :)
Cagatay Ulubay almost 9 years

@NotoriousPet0 Could be, but he has not enough points to downvote. I also catched myself in thoughts about doing that, but I deleted every thoughts of that.. but other people could actually do this.. I would expect that from some people, because people are people, right? I mean if there is something wrong, CORRECT ME. I want to learn more and more, but I can't learn anything from a downvote. I don't know if there is really something wrong or just jealoussy or maybe he didn't like my english or I forgot a , (comma) anywhere and he is like "downvote!". Critic is good, but with an explain, pls!
Tech Savant almost 9 years

I agree, I just posted a huge bold note on my latest question asking people to please explain why they are downvoting. Its very frustrating when the first vote takes you to -1 and then everyone has a bad first impression of yoru question, I'm sure a lot of them just downvote because others did. It just snowballs. Downvote should require a comment ... maybe I'll post that on meta. At least a downvote only -2 and upvote +10 right? :)
Cagatay Ulubay almost 9 years

"Downvote should require a comment", this is a pretty good idea! Maybe at least the first 2-3 downvotes or the comment section will blow up with the same explain multible times. The snowball effect is real, a "-1" leads heavy to continue that way without actually reading and understanding the answer.
empiric almost 9 years

A little explanation would be helpful
Casper Round almost 9 years

It's kinda self explanatory... I would have thought he would at least have some knowledge about JS before jumping head first into it! <script></script> tags represent for JS/JQuery to go inside etc. Same as <?php ?>