JavaScript Text Tutorial

1). Open a simple text editor program on your computer, such as Microsoft's Notepad, by double-clicking on the program. For this example, we will create a simple HTML document and write "You Did It!" using JavaScript. Type in the following code into your text editor (or copy and paste the code below):

<html>
<head><title>You Did It!</title></head>
<body>
<script type="text/JavaScript">
document.write('You Did It!');
</script>
</body>
</html>

Save the document by clicking "File" and "Save As." Create a name for the file and type in the following extension: ".html." Use double quotations around the entire file name, so it looks like this: "example.html." Next, open the saved HTML file by double-clicking it with your mouse. This should open a blank window in Internet Explorer with the words "You Did It!" at the top.
2). Change the text color by modifying the original JavaScript code. To define a text color using the original script, open the Notepad editor. Delete the following line in the code: document.write('You Did It!');

Replace it with this line: document.write("<FONT COLOR='RED'>You Did It!</FONT>");

Save the file again and open it in Internet Explorer by double-clicking the file. The text should now be red. You can change the color by replacing 'RED' with any color you want in the code.
3). Alter the text size by modifying the JavaScript code again. Open the file in Notepad and delete the following line: document.write("<FONT COLOR='RED'>You Did It!</FONT>");

Replace the line with the following code: document.write("<span style=\"color:red; font-size: 5em;\">(You Did It!)<\/span>");

Save the file and close it. Double-click on the HTML file to view it in Internet Explorer. The text should be very large now. You can modify the text by changing the "5em" number to any number you choose. Lowering the number will decrease text size, and increasing the number enlarges the text size.
4). Define the text style by opening the notepad file and delete the following line: document.write("<span style=\"color: red; font-size: 5em;\">(You Did It!)<\/span>");

Replace the line by typing the following code:

document.write("<span style=\"color: red; font-size: 5em; font-family: Arial;\">(You Did It!)<\/span>");

Save the file and close the program. Double-click on the HTML file to open Internet Explorer. The text should now be red, large and have the Arial font style. You can modify the style by changing "Arial" to any font style you want. Now you can edit text using the JavaScript language in your own website or blog.