Difficulties connecting Javascript with HTML

Asked

Viewed 1,307 times

2

A few months ago I took a course to insert myself in the job market as "Front End", I learned what was necessary, but now to put into practice Javascript is complicated, because in theory I know a lot with Javascript, but when it comes to connecting these things with DOM is difficult.

Do you have any tips or ways to study?

Thank you for your attention.

  • 2

    You mean how to include javascript in HTML? The place where scripts should be included in the HTML page?

  • What you really need to do ?

  • Your question is not clear, try to elaborate it better.

1 answer

2


To include Javascript in an HTML page use the tag <script type="text/javascript"> seu script </script>. Anything within these tags will be interpreted as Javascript language. HTML5 suffices <script></script>.

If you include inside the tags <head></head>, the script will be executed before the page is displayed (i.e., if you do not load the script, the page does not open, but when it opens, it already opens with Javascrit working 100%), and if you include it within the <body></body> will be executed during the exhibition.

You can also include Javascript through an external file, linking it between tags <head>:

<script src="_javascript/meu_script.js"></script>

An example of using Javascript to manipulate a DOM element (the script opens a div according to the choice of a button radio):

   var esconderradio = function(var1, var2) {
    
        if (var1) {
            document.getElementById(var2).style.display = "";
        }
        else {
            document.getElementById(var2).style.display = "none";
        }
    };
   <label class="radio" for="Csaldsim">
        Sim
        <input type="radio" id="Csaldsim" name="radio" onclick="esconderradio(true, 'salvenc')"></label>
    <label class="radio" for="Csaldnao"  onclick="esconderradio(false, 'salvenc')">
        Não
        <input type="radio" name="radio" id="Csaldnao" onclick="onclick="esconderradio('Csaldim', 'salvenc')"></label>

<br>

    <div  class=" col-md-3 panel panel-default" id="salvenc" style="display:none;">
        <label class="btn" for="Csalvenc">
            <input type="number" class="form-control" name="Tsalvenc" id="Csalvenc"></label>
    </div>

To study Javascript I suggest the codeacademy.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.