CODEWITHSUNDEEP
javascripthtml
kri8or
kri8or

Reputation: 63

integrating javascript file, with html - simple example

I'm trying to integrate a simple html, js, and css file:

like this example on this link: jsfiddle.net/MHDhT

I can link no problem to the css file like this (in the head tag):

<link rel="stylesheet" href="style.css" />

but then I dont know how to link to the js file, and Im not sure If just having the js content I can see on that link is enough ??

can someone help me ?

Upvotes: 1

Views: 1866

Answers (3)

Praveen
Praveen

Reputation: 56501

In JSFiddle you no need to specify these html, head, external css or js tags. But in your .html it is must. The script tag is used for linking a javascript file.

<html>
        <head>
        <link rel="stylesheet" href="/folderpath/style.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="/folderpath/filename.js"></script>
        </head>
        <body></body>
</html>

Upvotes: 1

0x1gene
0x1gene

Reputation: 3458

Your js shoul be place on the end of your page for loading performance. (Like that the browser can start to render the web-page before the js has finished to load). But only if your Js is not mandatory for your Dom to load (it should be the case)

you can link them in two differents ways:

<script type="text/javascript">
   //Here is your code
</script>

OR

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

EDIT

Be sure to include jquery:

<head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

If your code require the dom to be ready to be executed your should use 

$(document).ready(function() {
  //This is executed when dom is ready
});

The final result shoul look like this: (I put all In 1 file to be easier for you)

<html>
    <head>
        <style type"text/css">
              .menu { 
              background: #3B6997;
              font-weight: bold;
              padding: 10px;
              width: 300px;
              display:none;
              }
              .menu a {
              color: white;
              }
              .hov {
              width: 300px;   
              }

    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.hov').hover(function() {
                $('.menu').slideDown();
            }, function() {
                $('.menu').slideUp();
            });
        });
    </script>
</head>
<body>
    <div class="hov">
        <a href="#">Activate Menu vv</a>

        <ul class="menu">
            <li>
                <a href="#">Item</a>
            </li>
        </ul>
    </div>
</body>
</html>

If you want to put yout js in separate file, let's say 'app.js', put this in this file:

$(document).ready(function() {
    $('.hov').hover(function() {
        $('.menu').slideDown();
    }, function() {
        $('.menu').slideUp();
    });
});

You link it by putting this on your head section :

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

Upvotes: 2

xShirase
xShirase

Reputation: 12389

To insert a JavaScript into an HTML page, use the <script> tag in the .html file

<script>
   //Your js code here 
</script>

To include a separate file (.js), use :

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

Upvotes: 0

Related Questions