Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
adding javascript to html
- Thread starter mbpowner
- Start date
- Sort by reaction score
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.
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.
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.
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.
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.
Oh, I tried the src thing in the head tags , so it's supposed to be in body, correct?
[doublepost=1477160565][/doublepost]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+"!")
Last edited by a moderator:
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?
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.
[doublepost=1477167668][/doublepost]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
[doublepost=1477168047][/doublepost]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.
As you can see, there's an unexpected end. Which made me trace back the { } .. and function is opened, but not closed.
[doublepost=1477167668][/doublepost]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
[doublepost=1477168047][/doublepost]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.
Attachments
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
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.
Glad you got it sorted out. Have fun learning html/css/js/etc.
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?
It's time for a new book
It's also teaching you html 3.2 it seems, the focus is really on html5 and css3. 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.It's time for a new book
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?
[doublepost=1477244697][/doublepost]the book is "javascript for dummies", not "html for dummies"
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
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.
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
[doublepost=1477346003][/doublepost]i appreciate yur help though, thank you
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.
<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.
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.
Try starting here:
http://eloquentjavascript.net/Eloquent_JavaScript.pdf
Then go here:
https://addyosmani.com/resources/essentialjsdesignpatterns/book/
Good luck!
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.
Last edited: