| Lesson 17&18: Querys and Strings Today we are combining discussions about strings with a specific discussion about one use of them in regards to the query string portion of a url. Strings are groups of characters "strung" together. When setting a variable to a string value, you enclose the string of characters in quotes, unlike numbers which are not enclosed in quotes. The true definition of a string is under argument even among those who create programming languages (see arguments over primitive vs reference types on netscape discussion boards), but for JavaScript purposes, think of a string as a group of characters referenced via a variable, with array-like features which allow you to reference individual or groups of characters within the string as a whole. (more simply, think of a string as a sentence which allows you to grab a letter or word individually) Example- var myString='A group of numbers & letters'; You can reference individual characters in the string by their order in the string starting from zero, so the letter g in myString would be the 2 character (A=0, var myChar=myString.charAt(2) You can reference portions of the string by creating a substring with the first desired character's position and the last desired characters's position+1, so the word "numbers" in myString would be- mySubstring=myString.substring(11,18); Conversly, you can find the reference index of the first or last instance of a characther, so the index of "p" in myString would be- myString.indexOf('p')==6 and the last occurance of t would be- myString.lastIndexOf('t')==24 You can also use slice() and substr() in similar ways with various rules for the starting and stopping positions. And finally, use the length property to find the number of characters in the string- myString.length==27 Perhaps the most powerful method of extracting data from strings programmatically is the split() method. This takes a string and "splits" it into substrings using the specified character as the splitting point, and places the new substrings in an array. In the example myString, we could split the string at the spaces to return an array of all the words in the sentence- mySplitString=myString.split(' '); Which would return an array like this: mySplitString[0]=='A' mySplitString[1]=='group' mySplitString[2]=='of' mySplitString[3]=='numbers' mySplitString[4]=='&' mySplitString[5]=='letters' If instead you split it at the letter "n"- mySplitString=myString.split('n') you would get- mySplitString[0]=='A group of ' mySplitString[1]=='umbers & letters' One special string we can use these methods on to create interactive pages is the query string of the location or url of the page. The query string you'll remember from previous discussions is the portion of the url that starts at the question mark (?) and continues till the end or a hash mark (#) Example- http://webwizardsways.com/index.html?something=here&for=programming#purposes query string- ?something=here&for=programming By splitting out these values from the query string of the url, we can load a single page with unique data each time it is loaded. Example- queryString=location.search Returns- queryString=='?something=here&for=programming' We split off the question mark with- noQuestionMark=queryString.split('?') Returns- noQuestionMark[0]='' noQuestionMark[1]='something=here&for=programming' We split the pairs apart at the ampersand (&)- valuePairs=noQuestionMark[1].split('&') Returns- valuePairs[0]=='something=here' valuePairs[1]=='for=programming' Finally, we split these pairs apart giving us useable data- firstPair=valuePairs[0].split('=') secondPair=valuePairs[1].split('=') Returns- firstPair[0]=='something' firstPair[1]=='here' secondPair[0]=='for' secondPair[1]=='programming' Now we have useable data, passed from another page, broken down into it's basic portions, ready to be used or passed to another page. Here is a basic script that will create a new object named "queryInfo" containing the name/value pairs of all data transmitted via form url encoding and writes them out in a table (you can output or use the data in any fashion): You can use this script to check the functionality of your forms, or modify it for any use! http://webwizardsways.com/experiment/query.html (put a question mark and info on it to test) Bonus String Example- Simple Scroller Here is a basic scroller that shows how you can grab single characters out of strings: |