PDA

View Full Version : The .length thing in Javascript



pcbrainbuster
02-25-2007, 11:33 PM
Well hello:),

I have seen a few properties in my time for javascript which i do not completely understand how to use, in this case it would be .length.

On the web I have seen this property being used to disply animated text which goes up by one (an example can be found at http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_typewriter)

Well so can anyone explain how to properly use .length - and it's uses.

Thanks :)

Blake
02-26-2007, 12:39 AM
It gives you the number of elements in an array, or the number of characters in a string.

If x is a string or array, x.length will give you its length.

pcbrainbuster
02-26-2007, 07:28 AM
Yup, the basics -

I have been through them before and I have seen some great animations with use of that, any idea on how to do them or any intermediate examples:)

By the way GREAT MILITARY SITE !!!! ROCK ON !!!

Twey
02-26-2007, 02:16 PM
It's quite rare to see a green-on-black design carried out in such a way that it doesn't look like it's been designed by some script kiddy who's spent way too long watching Matrix reruns. :) Congratulations.

pcbrainbuster
02-26-2007, 04:16 PM
Uhhh, the thing is the reason that the page doesn't look like it was created by a script kiddy is because it wasn't, it was created by a script adulty :)

So getting back to .length :)

Twey
02-26-2007, 05:13 PM
Well, the length property has been explained. There's not really much more to it.
the reason that the page doesn't look like it was created by a script kiddy is because it wasn't, it was created by a script adultyIt's still rather difficult to produce a green-on-black page that looks decent. Try it some time.

pcbrainbuster
02-26-2007, 05:38 PM
No no no no, you got it all wrong I was just joking about the green black thing :)

But about the length thing is that i have seen certain animation that use the .length property but i simply do not understand what the .length part does as it's job...:)

Twey
02-26-2007, 05:41 PM
maxlength=message.length+1Set maxlength to be equal to the length of the message plus one.

pcbrainbuster
02-26-2007, 05:52 PM
Yah that's it !!! :)
But may I have a VERY VERY simple animation script wriiten by you to study ?
But not to advanced I will simply work on yours until I understand it and make my own from there:)

jscheuer1
02-26-2007, 05:59 PM
The length property is so simple, it can be hard to understand it at first, especially if you are looking for some deep meaning. It has no deep or even complex meaning. Here is a string:


"I'm a string"

It has 12 characters (including spaces and punctuation). It's length is 12. Try this:


<script type="text/javascript">
alert ("I'm a string".length)
</script>

Length can apply to other things besides strings. For the most part it is only used with strings and arrays. Here is an array:


["I'm", "an", "array"]

It has three items. Its length is three:


<script type="text/javascript">
alert (["I'm", "an", "array"].length)
</script>

The length property is used in javascript to determine how long things are so other operations can be carried out - say once for each unit of length, or on/for each item that represents a unit of length. It's that simple.

pcbrainbuster
02-26-2007, 06:02 PM
Hmmm I see,
Well thanks alot for your post it helped alot !!!:)

Well I read that once on a site but did not give a sufficient example!

Thanks alot, but now from here how would i use this to create a text animation (please supply a easy to understand script):)

Thanks!

Blake
02-26-2007, 06:36 PM
This is about as simple as it gets:



<html>
<head>
<title>example</title>

<script type="text/javascript">

var msg="Hello World!";
var L = 0;

function printMsg()
{
if (L <= msg.length)
{
document.getElementById("msg").innerHTML = msg.substring(0, L);
L++;
setTimeout("printMsg()", 500);
}
}

</script>

</head>
<body onload="printMsg()">
<div id="msg"></div>
</body>
</html>


EDIT:

And here's a slightly more complicated version that won't "pause" on spaces.




<html>
<head>
<title>example</title>

<script type="text/javascript">

var msg="Hello World!";
var L = 0;

function printMsg()
{
if (L <= msg.length)
{
document.getElementById("msg").innerHTML = msg.substring(0, L);
do {L++;} while (L <= msg.length && msg.charAt(L - 1) == " ");
setTimeout("printMsg()", 500);
}
}

</script>

</head>
<body onload="printMsg()">
<div id="msg"></div>
</body>
</html>

pcbrainbuster
02-26-2007, 06:42 PM
Yes thanks alot dude :)
This is the same concept i use for my animation scripts so it is easy to understand, excpet one area the substring please explain how to use it:)

I understand it is for cutting pieces of text .

Blake
02-26-2007, 06:45 PM
Basically, substring(0, L) gives my the first L characters of a string. On each iteration, L increases by one, so a new character is added on to the contents of the div.

For example,

msg(0,1) = H
msg(0,2) = He
msg(0,3) = Hel
msg(0,4) = Hell
msg(0,5) = Hello
msg(0,6) = Hello
msg(0,7) = Hello W
msg(0,8) = Hello Wo
msg(0,9) = Hello Wor
msg(0,10) = Hello Worl
msg(0,11) = Hello World
msg(0,12) = Hello World!

pcbrainbuster
02-26-2007, 07:04 PM
Thanks :)
But is that really all that it means ??? Let me just clarify this, the first parameter is were you set the starting position of the string and the second is the last right?

Blake
02-26-2007, 07:08 PM
That's all there is to it.

Technically, though, the second parameter is the character after the last. (in other words, if I call msg.substring(1, 4), I will get characters 1, 2, and 3, but not 4.)

EDIT: And if you leave out the last parameter, it will give you the rest of the string starting from the first parameter. Thus
msg.substring(i) is the same as
msg.substring(i, msg.length)

pcbrainbuster
02-26-2007, 07:16 PM
Thanks alot :)
Well I guess another bless to another topic (basically i mean it was a successfull topic :))

Twey
02-26-2007, 07:29 PM
If you imagine a big block cursor like the ones used by CLI text editors, the number refers to the space that comes before it.

The letters are numbered from zero, so characters one and four are:
Hello!However, since substring() counts from before the characters, substring(1, 4) is:
Hello!

pcbrainbuster
02-26-2007, 07:54 PM
Yup, I have did my first test and it is successfull here is the final version of the script from me :) -

<html>
<body onload="starttext()">
<div align="center" id="text1"></div>
<script>
var text = "FRUIT"
var sub2 = 0
function starttext() {
if (sub2<=text.length) {
sub2++
document.getElementById('text1').innerHTML = text.substring(0, sub2)
setTimeout("starttext()",200)}
}
</script>
</body>
</html>

Try it :)

mburt
02-26-2007, 08:04 PM
Good job. But you might want to replace innerHTML with the dom (document object model) way:
http://slayeroffice.com/articles/innerHTML_alternatives/

mburt
02-26-2007, 08:07 PM
See here:

<html>
<head>
<script>
var text = "FRUIT"
var sub2 = 0
function starttext() {
if (sub2<=text.length) {
sub2++
var dtext = document.createTextNode(text.charAt(sub2-1))
document.getElementById('text1').appendChild(dtext)
setTimeout("starttext()",200)}
}
</script>
</head>
<body onload="starttext()">
<div align="center" id="text1"></div>
</body>
</html>

pcbrainbuster
02-26-2007, 08:15 PM
Well mburt whats wrong with innerHTML in general :confused:

The whole child parent node son daughter thing is a little confusing and i simply do not have the first clue about it :(

And lol can you also please go back to "why does my script repeat..." and read the last two messages that beg :)

mburt
02-26-2007, 08:25 PM
The whole child parent node son daughter thing
Bahaha... that made me chuckle. :)
From the link I gave:

What's wrong with innerHTML?
A few things:

* It's not a standard. It's a proprietary property that Microsoft introduced (along with the less popular outerHTML) that the other browser makers picked up.
* Since it's not a standard, it isn't terribly future proof. It's not supposed to work under the application/xhtml+xml MIME type that XHTML documents are supposed to be served under. (Firefox 1.5 changed this by allowing it for some reason)
* innerHTML is a string. The DOM is not a string, it's a hierarchal object structure. Shoving a string into an object is impure and similar to wrapping a spaghetti noodle around an orange and calling it lunch.
* It makes for some nearly illegible code in a lot of instances, with escaped quotes and plus signs all over the place appending data to the string, which in my opinion makes it difficult to maintain.

pcbrainbuster
02-26-2007, 08:29 PM
Well mburt,
Is it really really really important i change now ???:confused:
Seriously, I mean that is it garunteed to go in the future???

(and i am glad you liked the joke:))

mburt
02-26-2007, 08:41 PM
No, you aren't going to have to go the hospital or anything if you do, but I'm just saying. You should.

pcbrainbuster
02-26-2007, 09:08 PM
OK I see so what your saying is that the script is technically perefect?

Twey
02-26-2007, 09:20 PM
You really should. SlayerOffice doesn't mention this, but innerHTML has some rather peculiar effects on occasion, the explanation of which is rather technical. You should also learn to write correct HTML if you expect DOM code to work.
<!-- error: no DOCTYPE -->
<html>
<!-- error: <head> is required -->
<body onload="starttext()">
<div align="center" id="text1"></div>
<script> <!-- error: the type attribute is required -->
var text = "FRUIT"
var sub2 = 0
function starttext() {
if (sub2<=text.length) {
sub2++
// As well as the aforementioned innerHTML problems,
// this is invalid: a <div> is not a text element, so it
// can't contain text directly. The validator won't pick
// this up since it's in script, but that doesn't make it
// any less of a problem. You probably want a <p>.
document.getElementById('text1').innerHTML = text.substring(0, sub2)
// Don't pass strings to setTimeout(). It's as ugly and
// unnecessary as using eval().
setTimeout("starttext()",200)}
}
</script>
</body>
</html>I would write this code like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Unnamed Test Page</title>
<script type="text/javascript">
function startTyping(message, element) {
while(element.hasChildNodes())
element.removeChild(element.firstChild);
type(
message,
element.appendChild(document.createTextNode("")),
0
);
}

function type(message, node, i) {
node.nodeValue = message.substr(0, i);
if(i < message.length)
setTimeout(
function() {
type(message, node, i + 1);
},
200
);
else
node = null;
}

window.onload = function() {
startTyping(
"FRUIT",
document.getElementById("myText")
);
};
</script>
</head>
<body>
<p id="myText"></p>
</body>
</html>

pcbrainbuster
02-26-2007, 09:28 PM
Yeah, but the thing is the whole thing about dom and parent.....
Its just too confusing not that i have event tried to learn it but you know.

Well here are some things i was wondering about you - what scripts, languages do you know (eg java, javascript, C++, vbscript...)

And what is your age ? and were di you learn everything you know (please give lists of site)

pcbrainbuster
02-26-2007, 09:44 PM
Oh yeah :),

I just went to w3schools.com and straight away now understand what a parent is and some other things but i am still working on it !!!

Twey
02-26-2007, 09:51 PM
Well here are some things i was wondering about you - what scripts, languages do you know (eg java, javascript, C++, vbscript...)There was a thread on that recently, you can read my response there if you like.
and were di you learn everything you know (please give lists of site)Hah! I can't remember everything I've ever read.

pcbrainbuster
02-26-2007, 10:01 PM
LOL -

Well anyway i was doing some work on dom and got this script to NOT work please help me out a little :)

<html>
<body>
<div align="center" id="maindiv">Hello I want fruit for today, OK ?</div>
<button onclick="asd()">Remove The DIV</button>
<script>
var x=document.getElementById("maindiv");
function asd() {
x.parentNode.removeChild(x);
}
</body>
</html>

pcbrainbuster
02-26-2007, 10:44 PM
Nevermind there was a typo and its fixed now