How to Use Text to Integrate JavaScript with HTML

As far as JavaScript is concerned, strings are just one of many data types web developers can use to integrate with HTML. The text or string data type is the presentation format that most humans think about when viewing information on the screen. Even though the underlying data is some other type, what a human sees is text.

Developers need to be aware of the difference between what the human sees and what JavaScript manipulates using application code. Even so, you find yourself working with strings regularly because strings lend themselves to certain tasks, such as searching for specific information and creating pretty displays.

Concatenating text in Javascript

Strings are made up of many different pieces of information in many cases. Concatenation is the act of combining string pieces to create a larger whole. In fact, it’s hard to create any application without using concatenation. Essentially, concatenation involves adding strings together by using the plus sign (+).

Consider two strings: ThisString and ThatString. ThisString contains “Hello ”, and ThatString contains “World”. When you see

var FinalString = ThisString + ThatString;

in an application, FinalString equals “Hello World”. Using the plus sign concatenates the two strings into a new string.

Change word and letter formats in JavaScript

JavaScript provides a wealth of string functions. Here are only four formatting functions that you use to control the appearance of strings. It’s amazing to think about all the ways in which you can use strings with JavaScript. Keeping this flexible nature in mind, here are four formatting functions to start off your library of JavaScript string functions:

  • toLocaleLowerCase(): Changes all the characters in a string to lowercase versions while respecting lowercase rules for the current locale.

  • toLocaleUpperCase(): Changes all the characters in a string to uppercase versions while respecting the uppercase rules for the current locale.

  • toLowerCase(): Changes all the characters in a string to lowercase equivalents without regard to locale.

  • toUpperCase(): Changes all the characters in a string to uppercase equivalents without regard to locale.

As with formatting numbers, the best way to see string formatting is to create an application to do it. As with the DisplayNumber.HTML page, this page begins with a global variable, ThisString, that contains “This is a Sample String”. The following code shows how to use the various functions.

<body>
  <h1>Formatting Strings</h1>
  <p>Original String:
    <script language="JavaScript">
      document.write(ThisString);
    </script>
  </p>
  <p>toLocaleLowerCase():
    <script language="JavaScript">
      document.write(ThisString.toLocaleLowerCase());
    </script>
  </p>
  <p>toLocaleUpperCase():
    <script language="JavaScript">
      document.write(ThisString.toLocaleUpperCase());
    </script>
  </p>
  <p>toLowerCase():
    <script language="JavaScript">
      document.write(ThisString.toLowerCase());
    </script>
  </p>
  <p>toUpperCase():
    <script language="JavaScript">
      document.write(ThisString.toUpperCase());
    </script>
  </p>
</body>

Unlike the number-formatting functions, you won’t find any way to customize the string output. What you see depends on your browser and your locale.\

image0.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.