• Monday , 25 May 2020

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

Code Canyon



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

3d Ocean

Related Posts

29 Comments

  1. Deadolan Plowart
    December 16, 2019 at 07:51

    Thx man. You really helped me out.

  2. VoteForLennox
    December 16, 2019 at 07:51

    When accessing your .js file from the folder with the <script src>
    Does the positioning rule still apply as before?

  3. Sebakungu Tuyisenge
    December 16, 2019 at 07:51

    This video deserve also subtitle

  4. somali kids
    December 16, 2019 at 07:51

    so i can't use sublime text 3 edit

  5. Carson
    December 16, 2019 at 07:51

    #1 go to for coding

  6. WAQUAR AHSAB
    December 16, 2019 at 07:51

    How to make a popup on a webpage using javascript?

  7. Philip Marquez
    December 16, 2019 at 07:51

    In second option, the content didn't show after all, but the first one works, help

  8. Ahmad Mateen Butt
    December 16, 2019 at 07:51

    Great video man this help me alot!

  9. MOHAMMED AL-ASHWAL
    December 16, 2019 at 07:51

    Amazing !!

  10. Swati Narayan
    December 16, 2019 at 07:51

    How do I run this in a browser? Did i miss a video?

  11. Michael Schlotthauer
    December 16, 2019 at 07:51

    You're adding JavaScript into the <body> tag for teaching purposes, I get that. I'm using the MEAN stack in vs code, each component has it's own TS file which accepts JavaScript. Should I be adding my JavaScript to my TS file?

  12. cALiBr0
    December 16, 2019 at 07:51

    why are small youtubers the best at teaching

  13. Osaid makhalfih
    December 16, 2019 at 07:51

    i never supported any youtuber before, but you are an exception your content is extraordinary, keep up pls.

  14. Siviwe Motsiri
    December 16, 2019 at 07:51

    Ii love you If I could I would give you a 100 bucks ❤️😭🚀

  15. T_trex 08
    December 16, 2019 at 07:51

    the shortcuts dont work for me

  16. LYRICSSS
    December 16, 2019 at 07:51

    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>

  17. JOYNED
    December 16, 2019 at 07:51

    what! where is the subtitle. Subtitle open please. 🙁

  18. FridayGamers
    December 16, 2019 at 07:51

    Me!: When Learning HTML And CSS And Java Script For The First Time!: —–> 0%
    Now!: +5%!.

  19. sir deeq
    December 16, 2019 at 07:51

    i cant run the code what should i do? any advise!!!!!!

  20. Frank L. Formica
    December 16, 2019 at 07:51

    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

  21. Bridgette Dunn
    December 16, 2019 at 07:51

    Hmm. I followed everything exactly, but i had to omit the first js, and only put src="main.js", otherwise it wouldn't work.

  22. Paul John
    December 16, 2019 at 07:51

    its working even if i placed the script on head

  23. Joshua
    December 16, 2019 at 07:51

    199 likes and 106K subs this video should get more views and likes

  24. SlopeiZ CS:GO
    December 16, 2019 at 07:51

    Why notdo like this?

    window.onload = startup;

    function startup () {
    document.body.innerHTML = "This is some content";
    }

    this way your script will wait for the page to load before it runs

  25. ABDURRASHEED SHAIKH
    December 16, 2019 at 07:51

    My favorite channel on YouTube…. Seriously😍😍😍😍😍😍😍😍👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻

  26. John Friesen
    December 16, 2019 at 07:51

    What if i wanted to just make apps for android, could javascript work?

  27. Andrew Hogge
    December 16, 2019 at 07:51

    When I refresh the page after i entered the main.js source i get an error that says "Not allowed to load local resource" any idea why?

  28. Peace Lover
    December 16, 2019 at 07:51

    Hello Sir, Tab sign isn't showing in my Atom version, I think it only shows for JavaScript but not for HTML? Can you please help me?
    Thank you

  29. Ella Blun
    December 16, 2019 at 07:51

    lol, I watched this because I couldn't figure out why he needed 8:20 minutes to tell this. but it was the atom plug in the beginning 🙂

Leave A Comment

You must be logged in to post a comment.