adding javascript to html

Discussion in 'Web Design and Development' started by mbpowner, Oct 22, 2016.

  1. mbpowner macrumors regular

    Joined:
    Aug 19, 2016
    #1
    so within my html file i tried this:
    <script language="javascript">
    </script>
    and put all my javascript within this code, however the javascript doesn't work?
    any suggestions?
     
  2. Floris macrumors 68020

    Floris

    Joined:
    Sep 7, 2007
    Location:
    Netherlands
    #2
    In html5 you can just use <script> and </script> and it's compliant.
    And it depends on the javascript to make it work. if it's native, and doesn't require the document to complete loading, then inside <head> it's fine. Otherwise put it before </body>

    If it is not native, and say it's jQuery code, then make sure you include the jQuery.js.

    Or, the js code itself is broken. Check the console for the output and debug.
     
  3. shimy1984 macrumors member

    Joined:
    Sep 26, 2013
    #3
    Its typically not a good idea to have inline javascript. Create a new file and place your javascript there.

    You can include this this new file on your HTML page like this: <script src="myjavascriptfile.js"></script>

    9 times out of 10, you should always have your javascript included last on your page (right before the closing </body> tag, as Floris stated). This is for optimal performance.

    Since you're a beginner, I recommend you dive into jQuery since it'll handle much of the cross browser issues you'll encounter and its very easy to pick up.
     
  4. Floris macrumors 68020

    Floris

    Joined:
    Sep 7, 2007
    Location:
    Netherlands
    #4
    Inline is great for development and debugging though :) case-stepping through console etc.
    But I completely agree.

    If you can inline it, sure, but it is the last exception rule in my book.

    Resources are linked to directly.
    Called by their classes first, ID as exception.
    And inline behind that if you really have to.

    <tag class="" id="" style=""> .. that's the order I try to stick to.

    If you can, push your resources like images, css/js etc on your cdn, and at the very least cache them.

    You can for example remote call jQuery from their cdn, so it's easy one line inclusion. Load jQuery before you load your code.
     
  5. mbpowner, Oct 22, 2016
    Last edited by a moderator: Oct 22, 2016

    mbpowner thread starter macrumors regular

    Joined:
    Aug 19, 2016
    #5
    Oh, I tried the src thing in the head tags , so it's supposed to be in body, correct?
    --- Post Merged, Oct 22, 2016 ---
    no thatdoesn't work.

    Ok, this is me learning from a dummy book:
    javascriptProverbGenerator.html
    <HTML>
    <HEAD>
    <TITLE> Javascript proverb generator </TITLE>

    </HEAD>

    <BODY onLoad="document.proverbForm.userNoun.select()">
    <SCRIPT src="javascriptProverbGeneratorscript.js">
    </SCRIPT>

    <CENTER><H1> The Javascript Proverb generator </H1> </CENTER>
    To generate a proverb, enter a noun and an adjective then push the "Click here for a proverb" button you see below.

    <p> If you make a mistake or just want to start over click the "clear" button.

    <p>
    <FORM NAME="proverbForm">
    noun:
    <INPUT NAME="userNoun" size="25">


    <p>
    adjective:
    <INPUT NAME="userAdjective" size="25">

    <p>
    <BR>
    <p>
    <INPUT TYPE="button" NAME="proverbButton" VALUE="Click here for a Proverb" onClick="displayProverb(document.proverbForm.userNoun.value, document.proverbForm.userAdjective.value)">
    <INPUT TYPE="reset" VALUE="Clear the form">
    </FORM>



    </BODY>
    </HTML>

    javascriptProverbGeneratorscript.js
    function displayProverbNoun(noun, adjective)
    {
    if(!noun)
    {
    noun="iron"
    }
    if(!adjective)
    {
    adjective="hot"
    }

    window.alert("Strike while the "+noun+" is "+adjective+"!")
     
  6. Floris macrumors 68020

    Floris

    Joined:
    Sep 7, 2007
    Location:
    Netherlands
    #6
    w3schools.com and focus on html5/css3 and javascript.
    Learning from a book that's obsolete is not ideal.
     
  7. mbpowner thread starter macrumors regular

    Joined:
    Aug 19, 2016
    #7
    This is for university so its fine

    Please can you answer my question regarding why my javascript doesn't work? Have i linked it to html right?
     
  8. Floris macrumors 68020

    Floris

    Joined:
    Sep 7, 2007
    Location:
    Netherlands
    #8
    One mistake I see when I run the script as you provided it is the following error.

    As you can see, there's an unexpected end. Which made me trace back the { } .. and function is opened, but not closed.
    --- Post Merged, Oct 22, 2016 ---
    The other thing I noticed, is when you submit the form, that the naming of the function seems to be wrong.
    Your html code refers to displayProferb, but the function in the .js file is called displayProferbNoun.

    Which, upon correcting makes the script work for me.

    I hope this helped. To get to the same dev tools as I have on my screenshots; it's Chrome with right click > inspect
    --- Post Merged, Oct 22, 2016 ---
    The other reason it might not have worked is because your .html file has a long name, but your html code refers in the <form> to <FORM NAME="proverbForm"> expecting just proverbForm.html

    Make sure they match.

    here's the .zip of the .html and .js as it works for me in my browser.
     

    Attached Files:

  9. mbpowner thread starter macrumors regular

    Joined:
    Aug 19, 2016
    #9
    omg thanks! i changed it to displayProverb and it worked ! not sure why i put a noun there at the end , LOL

    I spend ages figuring that out !! ironically, your silliest mistakes can be the hardest to spot:rolleyes:
     
  10. Floris macrumors 68020

    Floris

    Joined:
    Sep 7, 2007
    Location:
    Netherlands
    #10
    By the way, in html tags with closing tags, the closing tags are required. the <p> for example needs to be closed with </p> ~ I know the browser are forgiving, but, every issue addressed is one excluded.

    Glad you got it sorted out. Have fun learning html/css/js/etc.
     
  11. mbpowner thread starter macrumors regular

    Joined:
    Aug 19, 2016
    #11
    That's what I was thinking. But the book doesn't seem to care, so I assumed it doesn't matter, though I assume it's always good practice to include closing tags to avoid confusion?
     
  12. Floris macrumors 68020

    Floris

    Joined:
    Sep 7, 2007
    Location:
    Netherlands
    #12
    It's time for a new book :D It's also teaching you html 3.2 it seems, the focus is really on html5 and css3.
     
  13. mbpowner thread starter macrumors regular

    Joined:
    Aug 19, 2016
    #13
    what made you arrive at that conclusion it's html 3.2? at university we learn 4.0.1. i'm a total novice at university.

    i think the book is years old tbh, for my own knowledge can you recommend any really new books so i can be ahead rather than behind?
    --- Post Merged, Oct 23, 2016 ---
    the book is "javascript for dummies", not "html for dummies"
     
  14. 960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #14
    When posting simple code, it is much easier for us to understand and correct if you use an online tool like:
    jsfiddle or jsbin and then just post the link
     
  15. Floris macrumors 68020

    Floris

    Joined:
    Sep 7, 2007
    Location:
    Netherlands
    #15
    There was no doctype where this was declared, and it quite outdated to type it all in caps and that order. Sorry if my guess was off by a version. My point that it doesnt matter indeed is only because browsers are very forgiving. Was trying to help. Javascript when more complex will not work if you search for a p id when it fails in the nesting just because there are 50 opened and one closing tag. Making debugging a more irritating job to do.
     
  16. mbpowner thread starter macrumors regular

    Joined:
    Aug 19, 2016
    #16
    oh of course, btw is html case sensitive?

    i understand that perfectly, classes and id's may get confused if tags aren't closed. it's just because this was simple code so it didn't matter too much that's all
    --- Post Merged, Oct 24, 2016 ---
    i appreciate yur help though, thank you
     
  17. Floris macrumors 68020

    Floris

    Joined:
    Sep 7, 2007
    Location:
    Netherlands
    #17
    Nope.

    <p> and <P> are the same.

    For some reason printed books decided to display tags as <CAPS> and content as lowercase, while online most tutorials stick to lowercase. It has no effect on performance.

    Right click any web site > source code > and it will demo to you about nesting, indentation, using caps, consitancy things, stylesheet usage, style guides, etc.
     
  18. Flood123 macrumors 6502a

    Flood123

    Joined:
    Mar 28, 2009
    Location:
    Living Stateside
    #18
  19. mbpowner thread starter macrumors regular

    Joined:
    Aug 19, 2016
    #19
    maybe after developing some programming skills, but i'm just a beginner, so i need examples rather than bits and pieces everywhere, so i know exactly what things are useful for.
     
  20. 960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #20
  21. Flood123, Nov 1, 2016
    Last edited: Nov 1, 2016

    Flood123 macrumors 6502a

    Flood123

    Joined:
    Mar 28, 2009
    Location:
    Living Stateside
    #21
    When I was a beginner I started with MDN, the book "Javascript the good parts", and frequent visits to stack overflow. I thought the introductory and tutorials sections on MDN were pretty solid for beginners, but to each their own I suppose. Good luck with your Journey. It's a great skill to have and it's a lot of fun.

    EDIT:
    I know the question wasn't asked, but I thought I would throw this out there for good measure.

    I might add (and a lot of others will completely disagree with me) while it is good to know jQuery, I would absolutely focus on vanilla JS. Unless you are working on legacy code that heavily depends on jQuery, I personally wouldn't use it on new projects. Unless of course there are browser limitations such as older browsers in televisions and companies (such as government sites) that are still support really old browsers. A lot of the time jQuery is just introducing an unneeded dependency and technical debt to new projects. Check out this site if you get a minute. http://youmightnotneedjquery.com.
     

Share This Page