Jump to content
airesofwar

Need help learning JS

Recommended Posts

Here is the code I am going to use as a example. I think I will just try to explain what I understand or think I understand and you guys correct me and fill me in on what I am missing.

<html><head><script type="text/javascript">function selText()  {  document.getElementById("txt1").select()  }</script></head><body><textarea id="txt1">Hello world....</textarea><input type="button" value="Select text" onclick="selText()"></body></html>

I am assuming the head code acts as kind of like a CSS rule. selText is the name of the function or event to trigger later on in the body. I am guessing I can use anything I want for this as long as it matches the body code.I still don't have a clue on how to correctly use the ()What goes in the ()?When do I add something in the ()?How do I correctly write something in the()?document.getElementById is a global property to call on the HTML ID. .select() I am guessing this is another global property to activate the select functions. Again we have the ()! onclick="selText() I understand this is just calling for the function. But again what is up with the ()?Now what would be the best way to use this code if I was going to need to call for it multiple times on the same page. Something has to change somewhere or I would be selecting all of them. I know I could just write out a whole new head script for it but I would think their is a easier way to just declare it through variables. What if I wanted to use this to highlight plan text on the site outside of a textarea. I tried using it like this but it did not work.<div id="txt1"> SOME TEXT</div>

Edited by AiresOFwar

Share this post


Link to post
Share on other sites

comments provided within the body of the quote. see italicized.

Here is the code I am going to use as a example. I think I will just try to explain what I understand or think I understand and you guys correct me and fill me in on what I am missing.
<html><head><script type="text/javascript">function selText()  {  document.getElementById("txt1").select()  }</script></head><body><textarea id="txt1">Hello world....</textarea><input type="button" value="Select text" onclick="selText()"></body></html>

I am assuming the head code acts as kind of like a CSS rule. selText is the name of the function or event to trigger later on in the body. I am guessing I can use anything I want for this as long as it matches the body code.selText is the name of a function that can be called using HTML DOM elements and their event handlers or in response to most user driven actions on pageI still don't have a clue on how to correctly use the ()It's part of the syntax for declaring a function, and is only 'used' if you need to pass arguments to the functionWhat goes in the ()?arguments declared for use in the functionWhen do I add something in the ()?depends on the function and how you want it to work. Certain methods of native objects and native functions require arguments How do I correctly write something in the()?just like declaring a variable, i.e.

selText(ele){  alert(ele);};

document.getElementById is a global property to call on the HTML ID. getElementById is a method of the document object, which is global .select() I am guessing this is another global property to activate the select functions. Again we have the ()!I've never seen .select() method with document.getElementById onclick="selText() I understand this is just calling for the function. But again what is up with the ()?that's how you distinguish something as being a function, or else it might as well just be textNow what would be the best way to use this code if I was going to need to call for it multiple times on the same page. Something has to change somewhere or I would be selecting all of them. I know I could just write out a whole new head script for it but I would think their is a easier way to just declare it through variables. In order to call this from multiple elements on the page, just add the selText function call to whichever elements you want, on whatever event handler you like, like onmouseover for example.

<script type="text/javascript">function selText(ele){  var text = document.getElementById(ele.id).innerHTML; //looks for the passed element's ID in the DOM nad get's the innerHTML  alert(text); //and then alerts it};</script><p id="p1" onmouseover="selText(this)">This is a paragraph with some text</p><p id="p2" onmouseover="selText(this)">This is the second paragraph with some text</p><p id="p3" onmouseover="selText(this)">This is the third paragraph with some text</p>

What if I wanted to use this to highlight plan text on the site outside of a textarea. I tried using it like this but it did not work.<div id="txt1"> SOME TEXT</div>

Edited by thescientist

Share this post


Link to post
Share on other sites

have you read any of the JS tutorials?

Share this post


Link to post
Share on other sites

The parens () are for the arguments (aka parameters) to a function. If a function has no arguments you don't need anything in the parens, but you do need to have the parens to call the function.

function testFunc() {   alert("a message");}function testFunc2(msg) {   alert(msg);}

Take these two for example. The first does not have any arguments. Calling it looks like this:testFunc();It will simply show an alert that says "a message"The second one accepts an argument. That argument is passed when you call the function, so it might look like this:testFunc2("This is the argument");This one will show an alert with whatever value is passed as the argument, in this case the string "This is the argument"You can change that string to whatever you wanted. You can also pass in variables:var str = "this is a string";testFunc2(str);and it will show an alert with the value of the variable.getElementById is a method of the document object which simply gets a reference to an element on the page using the id attribute.select() is a method of an DOMElement object (which is what is created when you get a reference to an element) which selects the text of inputs and textareas. This is only a method of input, textarea, and ?select? elements not anything else like divs (as you discovered).EDIT:I'll follow scientist and suggest that you read the JS tutorials. They cover most (if not all) of what you asked about.

Edited by ShadowMage

Share this post


Link to post
Share on other sites

One of the reasons we link to the W3Schools site so often (aside from their excellent information) is that they are the folks who pay for this board. :)

Edited by Deirdre's Dad

Share this post


Link to post
Share on other sites
have you read any of the JS tutorials?
Yes I am reading them but cant say I am understanding them. I passed the practice in HTML, CSS, and XML 20 over 20 no problem. Although I don't think those test really cover anything but the basics. But HTML and CSS is really simple, XML I understand but rarely use other then conditional tags. JS is what I am working on now and yet cant seem to get the basics down to start learning it. Edited by AiresOFwar

Share this post


Link to post
Share on other sites
Message
Thanks that did clear up some of the confusion and I think I can put it to good use.I have been reading the site but I keep getting to a point to where I don't understand it so I go back over what I read. Maybe I just need to read all the way through it?

Share this post


Link to post
Share on other sites
goto <snip> thats where i learnt all my coding
Well I learned a great deal from this site with ease, so I don't plan to trade sides once hardships come my way. Also I don't think W3 Schools would like you telling people to go somewhere else in their forums.

Share this post


Link to post
Share on other sites

The best thing to do is create a very small program that does a very simple thing. If it doesn't work, post the script here and someone can help.By simple, I mean outputting 5 + 5, writing your name, counting to ten, etc.

Share this post


Link to post
Share on other sites
The best thing to do is create a very small program that does a very simple thing. If it doesn't work, post the script here and someone can help.By simple, I mean outputting 5 + 5, writing your name, counting to ten, etc.
Fair enough how about this!
<head><script type="text/javascript">a="Why does"b=" JavaScript"c=" have to be"d=" such a pain!"e="a+b"f="c+d"g="e+f"function txt1(){alert(g);}</script></head><body><p onmouseover="tex1()">MESSAGE</p></body>

What is wrong with that and why does it only display g+f when hovering?

Share this post


Link to post
Share on other sites

a="Because if you try to pass variables"b=" as a text string, the result"c=" will show variables as a text string!"d=" It also helps if called function name matches actual function name"e= a+b;f= c+d;g= e+f;function tex1(){alert(g);}

Edited by dsonesuk

Share this post


Link to post
Share on other sites
a="Because if you try to pass variables"b=" as a text string, the result"c=" will show variables as a text string!"d=" It also helps if called function name matches actual function name"e= a+b;f= c+d;g= e+f;function tex1(){alert(g);}
Oh thanks!The function was a typo.But I see what I did wrong in the variables. Edited by AiresOFwar

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...