D4mations.com

4: How to Include JavaScript in Our HTML | JavaScript Tutorial | Learn JavaScript | For Beginners



How to Include JavaScript in Our HTML | JavaScript Tutorial | Learn JavaScript | For Beginners. In this JavaScript tutorial you will learn how to include JavaScript code inside a website, both directly in the HTML and as a separate JavaScript file.

➤ GET ACCESS TO MY LESSON MATERIAL HERE!

First of all, thank you for all the support you have given me!

I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!

I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.

I hope you will find it helpful 🙂

Material for this lesson: LINK

Original source

d4mer

, , , , , , ,

29 responses to “4: How to Include JavaScript in Our HTML | JavaScript Tutorial | Learn JavaScript | For Beginners”

  16. Hello mmtuts developer I spent whole day and half (36hours) after through over in your 20video of Javascript DOM by fighting with this issues of connecting my html form with my javascript codes but till now is not working…. right now the stuff i tried to fix then working on html form are button and paragraph  (results) but there are two inputs which are remain unworking please check for me my codes if you could help me to fix this issue

    My project link on codepen.io

    https://codepen.io/key-joshua/pen/XQGJdz

    Please communicate me through
    My Email: k.joshua855@gmail.com

    Or

    Share us with more explanation of how you fixed this challenge on your next lesson

    Proud to see you

    HTML # # # # # # # # # # # # # # #

    <code><!DOCTYPE html>
    <html>
     
    <body>
      <div class="header">

    <h1>Scale Balancing</h1>

    </div>
      <div class="input-groups">
      <div class="input-group">
        <label>Weights</label>
    <!–     <br> –>
        <input type="text" name="weight" id="weights" />
     
    <!–     <br><br> –>
        <label>Weights_Lists</label>
    <!–     <br> –>
        <input type="text" name="weights_list" id="weights_lists" />
    <!–     <br><br> –>
        <button id="balance" class="btns">Balance</button>
        <br><br><br><br>
        <p id="results" >Results….</p>
        </div>
         </div>
      <script src="js/script.js"></script>
     
      </body>
    </html></code>

    CSS # # # # # # # # # # # # # # # # #

    <code>
     *
    {
    margin: 0px;
    padding: 0px;
    }

     
    .header{
    width: 30%;
    margin: 50px auto 0px;
    color: white;
    background: #423107;
    text-align: center;
    border: 1px solid #B0C4DE;
    border-bottom: none;;
    border-radius: 10px 10px 0px 0px;
    padding: 20px;
    }

    form{

    width: 20.5%;
    margin: 0px auto;
    padding: 20px;
    border: 1px solid #B0C4DE;
    border-radius: 0px 0px 10px 10px;
    }

    .input-group{
    margin: 15px 0px 15px 0px;
    }

    .input-groups{
     
    width: 29.5%;
    margin: 0px auto;
    padding: 20px;
    border: 1px solid #B0C4DE;
    border-radius: 0px 0px 10px 10px;

    }

    .input-group label{
    color: #423107;
    display: block;
    text-align: left;
    margin: 3px;
    }

    .input-group input{
    height: 30px;
    width: 93%;
    padding: 5px 14px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid gray;
    }

    .btns{

    float: left;
    padding: 10px;
    font-size: 15px;
    color: white;
    background: #4c390c;
    /*border: none;*/
    border-radius: 5px;
    }
    </code>

    JAVASCRIPT # # # # # # # # # # # # #

    <code><script>
     const btn= document.getElementById("balance");

    const message = document.getElementById("results");

    const right = 2;
    //const right = document.getElementById("weights").value;

    const left = 5;
    //const left = document.getElementById("weights_lists").value;

    const weights_list =  [1,3,2,40,7];
    //let weights_list = document.getElementById('weights_list').value.split(',');

    function ScaleBalancing() {

     
    for (x = 0; x <weights_list.length; x++ )

    {

    if ( right == left )
    {
    message.innerHTML=" Already This Scale Balanced ";

    }

    else if ( right+weights_list[x]===left
    ||
    right===left+weights_list[x])
    {

    message.innerHTML=' You Will Use  ' +  '' + weights_list[x] +'  To Balance This Scale ';

    }

      for ( y=x+1; y<weights_list.length; y++)

    {

    if
    (

    right+weights_list[x]+weights_list[y] === left
            ||
    left  + weights_list[x] + weights_list[y] === right
            ||
    right  +weights_list [x] === left +weights_list [y]
            ||
    left  + weights_list[x] === right  + weights_list[y]

    )

    {

    message.innerHTML= ' You Use   ' +'' + weights_list[x] + ',' + weights_list[y]+'   To Balance This Scale ';

    }
       
    }
       
    }
      return'Scale Imbalanced !! There is no  Weights  into weights _list To Balance This Scale ';

     
    }

    btn.addEventListener('click', function(){
      console.log(ScaleBalancing());
    })
    </script></code>

  20. Hello beginner here, so this is the first video I am doing one of your tutorials on and the first with atom. I did everything in the video checking it over several times. When I try to get the "This is some content" on the webpage. It will go with HTML, but not JS and I get the message "Failed to load resource: net::ERR_FILE_NOT_FOUND" should I get some kind of package? Or if anyone could give me a point in the right direction

Leave a Reply