Home arrow JavaScript arrow Page 7 - Stringing Things Along

Bigger, Bolder, Better - JavaScript

Think JavaScript's only good for image swaps and tickertapes?Think again - the language comes with a powerful String() objectdesigned to help you quickly and efficiently perform string manipulationtasks in the client. This article explains how, with illustrations andcode samples.

TABLE OF CONTENTS:
  1. Stringing Things Along
  2. Elementary School
  3. When Size Does Matter
  4. Slice And Dice
  5. Building Character
  6. Search And Destroy
  7. Bigger, Bolder, Better
By: Harish Kamath, (c) Melonfire
Rating: starstarstarstarstar / 10
January 22, 2003

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
Finally, if you're looking to perform a little cosmetic surgery on your strings, a good place to start is the toLowerCase() method, which comes in handy if you need to convert a string into entirely lower-case characters (there's also a toUpperCase() method, in case you change your mind)

<script language="JavaScript">
// set string
var str = "Jack Frost";
// returns "jack frost"
alert(str.toLowerCase());
// returns "JACK FROST"
alert(str.toUpperCase());
</script>


If you use HTML (I assume you do, otherwise you wouldn't have gotten this far), you'll be happy to hear that JavaScript provides a number of string formatting options equivalent to HTML's formatting tags. These options as exposed as methods of the String object. Here's an example which demonstrates:

<script language="Javascript">
// create a String object
var myStr = new String()
myStr = "Look, Ma, no hands";
// write it as is
document.write(myStr);
document.write("<br>");
// make it bolder...
document.write(myStr.bold());
document.write("<br>");
// ...bigger..
document.write(myStr.big());
document.write("<br>");
// ...more violent
document.write(myStr.strike());
document.write("<br>");
</script>


These methods allow developers to alter text formatting at runtime within the client, rather than with server-side code - this is good for a number of reasons, including the fact that user interface and presentation logic now lie in the domain of the client rather than the server.

Wanna use all those functions together? Sure!

<script language="Javascript">
// create a String object
var myStr = new String()
myStr = "Look, Ma, no hands";
// all at once
document.write(myStr.bold().big().strike());
</script>


JavaScript also comes with a bunch of other methods that allow you to alter the formatting of a string - play with them on your own time and see what they can do:

blink() - create a blinking string;

fixed() - create a string with a fixed-width font;

fontcolor() - set the font colour;

fontsize() - set the font size;

sub() - subscript the string;

sup() - superscript the string;

And that's about it. I hope you enjoyed this article, and that it offered you some insight into the string processing power at your disposal in JavaScript. Now, get out there and practice!

Note: All examples in this article have been tested on Internet Explorer 5.5 for Windows 98. Examples are illustrative only, and are not meant for a production environment. Melonfire provides no warranties or support for the source code described in this article. YMMV!

 
 
>>> More JavaScript Articles          >>> More By Harish Kamath, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: