Please login or register. Welcome to the Studio, guest!


Quick Links:


newBookmarkLockedFalling

Aaron

Aaron Avatar
Bad Wolf

****
Dedicated Studio Member

859


November 2006
Directory
  • parseInt
  • charAt & indexOf
  • substring
  • split
  • match
  • replace
  • RegExp basics

Javascript parseInt

The Javascript parseInt method is used to change a string to a numeric value.

<script>
var n="8";
</script>


This is a string. It won't hold a numeric value. Example:

<script>
var n="8";
document.write(n+2);
</script>


That will write the value of "n" plus 2. But since "n" is a string, the value won't be 10. It will be 82. Think of it this way, strings are like sentences. Sentences can't be added, substracted, multiplied, or divided by any number.

<script>
var n=8;
document.write(n+2);
</script>


Now "n" has a numeric value. "n" plus 2 will equal 10.

<script>
var n="8";
document.write(parseInt(n)+2);
</script>


In this script, "n" has a string value (again). But using the parseInt method, we've changed "n" from a string value to a numeric value. So what will be displayed this time? 10. Not 82.

-----------------------------------------

charAt

<script>
var myVariable="yokijo";
var myVariable2=myVariable.charAt(0);
document.write(myVariable2);
</script>


What's this do? charAt is used to find the placement of a character in a string. Javascript starts counting at zero....so, what character in myVariable's string is at 0? y of course. This means that in our above script, y will be written on the page. Simple right?

indexOf

<script>
var myVariable="yokijo";
var myVariable2=myVariable.indexOf("i");
document.write(myVariable2);
</script>


indexOf is used to find the placement of a character in a string. It's the opposite of charAt. So, nothing much to go over. Where is i in myVariable's string? i is at 3. So, 3 would be written on the page.

-----------------------------------------

Javascript substring

substring is used to display a specified chain of characters in a string.

<script>
var myString='How are you?';
var newString=myString.substring(0,7);
document.write(newString);
</script>


To use substring you must first create a string. Then attach the substring() method to the string. Here we have saved the sting into a variable then attached substring(). Inside the parenthesis you will place 2 numbers. The first tells the browser where to start the string at. The second tells it where to end. So, we are starting from "H" and ending at a space. The script will display the message "How are" (without the space on the end). This is because the second number says to stop at that spot not stop up to it. So, the above script won't count up to the 7th character. It will stop right before it.

<script>
var myString='you are reading my tutorial';
var newString=myString.substring(16,27);
document.write(newString);
</script>


Remember, javascript starts counting at 0. So, here we're starting at the 17th character and ending at the 27th character (remember, it won't display the 27th character. It'll display the one before it). Alright, we're starting at "m" in "my" and ending at the charcter right after "l" in "tutorial". This means the message displayed will be "my tutorial". Get it? Let's go over another example just in case.

<script>
var myString='Who are you?';
var newString=myString.substring(4,11);
document.write(newString);
</script>


So, we're starting at the 5th charcter ("a") and ending at the 11th ("?"). So, what's right before the queston mark? "u" is. So that's where the string will end. The message displayed will be "are you".

-----------------------------------------

Javascript split

<script>
var myString='hello there';
var newString=myString.split('h');
</script>


split is used to remove a specified character or characters from a string. To use the split method you must first create the string. Then connect the split method to your string. As you can see, our string is located in the variable. We then addressed the variable's name myString to the split method like so: myString.split(). Inside the parenthesis is where we place the character(s) to be removed. Remember, the character(s) must have quotations around them or they won't be addressed as a string. So, what exactly have we done? We've created a variable with a string value and then used the split method to remove "h" from the string. But this is only the beginning. We have removed h but done nothing with it.

<script>
var myString='hello there';
var newString=myString.split('h');
document.write(newString);
</script>


So, now we have written a new string ("hello there" without the h). The new string would be ",ello there". Yes, it replaces the removed character with a comma. So...what's the point?

<script>
var myString='hello there';
var newString=myString.split('h')[1];
document.write(newString);
</script>


What's this gonna do? This will write everything after "h". Remember that javascript starts counting at 0. If we used 0, it would have written everything before "h". So, this will write "ello there" onto the page. Next example:

<script>
var myString='hello there';
var newString=myString.split('e');
document.write(newString);
</script>


Wait...there's more than one "e"...will this create an error? Not at all. split will remove all characters matching that of the one in the split. So, the above will display as "h,llo th,r,".

<script>
var myString='You are reading my tutorial';
var newString=myString.split('reading ')[1];
document.write(newString);
</script>


Who's to say you can't use the split method on a chain of characters? This will write whatever is after "reading " which would be "my tutorial".

<script>
var myString='my text here';
var newString=myString.split('my ')[1].split(' here')[0];
document.write(newString);
</script>


Wait...two splits? Yep, The first says to write everything after "my " which would be "text here". But, we then added another split that says to write everything before " here" which would be "my text". Together they say to write everything after "my " but before " here" which would be "text".

-----------------------------------------

Javascript match

The match mehod is used to identify strings. It allows you to search for a specific character, word, phrase, sentence, etc.

<script>
var myString="This is my string";
if(myString.match("This")){
alert("Match");
}
</script>


We've attached the match method to myString so that it does a search that string. Why does it have quotations? Because anything is quotations is a string. Withou them, This would be identified as a variable. So, the above will search myString for the word "This". It's a case-sensitive search. If it finds "This" anywhere in the string it will trigger our if-statement. The if-statement has nothing to do with the match method itself, it's just an example.

<script>
var myString="This is my string 123";
if(myString.match("This is my string")){
alert("Match");
}
</script>


Now we are doing a search for "This is my string" in the myString variable. Since that string does exist within our variable, the match mehod has found it and the if-statement has returned true (meaning it will execute). One more:

<script>
var myString="This is my string 123";
if(myString.match("132")){
alert("Match");
}
</script>


This will look for "132" in the string. This means it won't search for "1" or "2" or "3". It will look in the string and see if "132" is anywhere within it. Since it isn't, our if-statement is false and will not execute.

-----------------------------------------

Javascript replace

The replace method is used to replace one thing in a string with another.

<script>
var myString="This is my tutorial";
var rep=myString.replace('tutorial','website');
</script>


The variable "rep" is where we've stored our new string. In the replace() method, the text in the first set of quotations is what you want to replace. The text in the second set is what you want to replace it with. So, the above is replacing "tutorial" with "website". Making the value of "rep", "This is my website".

You can also use RegExp in the replace method.

<script>
var myString="This is my tutorial tutorial";
var rep=myString.replace(/Tutorial/gi,'website');
</script>


The above will replace both "tutorial" texts in "myString" with website. Meaning rep's value is "This is my website website".

You can use variale as well.

<script>
var myString="This is my tutorial tutorial";
var text1="is my";
var rep=myString.replace(text1,'is not my');
</script>


The above will replace "is my" in myString with "is not my". Making rep's value "This is not my tutorial".

-----------------------------------------

Javascript RegExp basics

Regular Expressions/RegExp is used to see if a string looks a certain way.

What you should already know: The basics of javascript and advanced string handeling (substring, charAt, indexOf, split, replace, match, etc.). <-- if these haven't been covered yet, they will be in my later tutorials.

You begin and end a RegExp statement with these symbols "//". Inside them you will put what you want to match /RegExp here/. Take a look at the below script:

<script>
var myString="This is my string";
var rg=myString.match(/my/);
</script>


That is going to check if "my" is anywhere in the string. This is a case-sensitive search. I'll use the length method here to help explain.

<script>
var myString="This is my string";
var rg=myString.match(/my/).length;
document.write(rg);
</script>


That would write 1. This is because it matched "my" once.

<script>
var myString="This is my my string";
var rg=myString.match(/my/).length;
document.write(rg);
</script>


That would also write 1. This is because the search /my/ is not global. Meaning it stops searching after it's found one. If you want it to return all the my's in the string you would add a g to the end of the last forward slash. Example:

<script>
var myString="This is my my string";
var rg=myString.match(/my/g).length;
document.write(rg);
</script>


Now our RegExp is /my/g. The "g" stands for "global" It searches and returns all the matches it finds. This means that the above script would write 2.

<script>
var myString="This is my string";
var rg=myString.match(/My/i).length;
document.write(rg);
</script>


Remember what I said about the standard /RegExp/ being a case-sensitive search? Well, adding "i" to the end of the last forward slash will execute a none case-sensitive search. Meaning the above script would still return 1.

<script>
var myString="This is my My string";
var rg=myString.match(/my/gi).length;
document.write(rg);
</script>


You can use these two attributes together. The search will now be both global and none case-sensitive. So, it will return all the my's it finds and without regards to the casing.


blu

blu Avatar
My Person Text...

**
Official Member

25


January 2007
Awesome tutorial, man 8-). I now finally know what the i, g, and the slashes are doing. Great work.:: rate 5 ::

-Pikablu-

newBookmarkLockedFalling