If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Review: text and strings

Here's a review of what we covered in this tutorial on text:
Before this tutorial, we were using number values for most things: passing numbers into functions, storing numbers in variables, etc. As you've now seen, we can also use text values.  We call these text values strings in JavaScript; think of them as a string of letters.
To create a string, we surround text in quotation marks:
"Hello World!"
Then we have to actually do something with that string, like pass it to the t, e, x, t, left parenthesis, right parenthesis command:
text("Hello World!", 100, 100);
We could also store it in a variable, and then pass that variable into the t, e, x, t, left parenthesis, right parenthesis command:
var myGreeting = "Hello World!";
text(myGreeting, 100, 100);
Note that we can also use single quotation marks:
var myGreeting = 'Hello World!';
But we can't mix and match quotation marks—that's an error! Pick either single or double marks, and stick with them.
var myGreeting = 'Hello World!"; // oh noes!
Just like we can manipulate number values, we can also manipulate strings. We can, for example, add one string to another string:
var myGreeting = "Alo";
var myName = "Winston";
var sayHello = myGreeting + ", " + myName + "!"; // Alo, Winston!
When we combine strings in JS, we call it concatenating strings. We can also combine strings with number values:
var xPos = 10;
var yPos = 20;
var label = "The coordinates are " + xPos + ", " + yPos;
We also saw in this tutorial that we can use different commands to change the text size and text color when we display strings using the t, e, x, t, left parenthesis, right parenthesis command. You can read more about those commands in the text section of our documentation (click the "documentation" tab to access).

Want to join the conversation?

  • aqualine seed style avatar for user Soobin
    Is there a way to put a picture onto a program you're making? Can you copy and paste a picture,or is there a special command/function for it?
    (139 votes)
    Default Khan Academy avatar avatar for user
  • piceratops ultimate style avatar for user DaJester
    Is it possible to make every letter of a word in one string a different color? Or would you just fill every letter separately, using separate strings and fill commands?
    (54 votes)
    Default Khan Academy avatar avatar for user
    • old spice man green style avatar for user Bob Lyon
      You use separate fill and text invocations.
      var colors = [0xFFF00000, 0xFF00A000, 0xFF0000F0];

      /* Render text t with multiple colors at coordinates x,y. */
      var colorText = function(t, x, y) {
      var char = t.split("");
      for (var i = 0; i < char.length; i++) {
      fill(colors[i % colors.length]);
      text(char[i], x, y);
      x += textWidth(char[i]);
      }
      };

      colorText("The quick brown fox jumped over the lazy dog's back.", 50, 200);
      (3 votes)
  • starky ultimate style avatar for user Sunlight Studios
    Does spacing really matter?
    (9 votes)
    Default Khan Academy avatar avatar for user
  • mr pants teal style avatar for user muzzahmed01
    I have three questions:
    text("1.Is there a way to justify text in something like a paragraph?',0,100);
    text("2. I worked on the Ad design project and I tried typing a sentence but it was cut off and I had to type another function to continue it. Is there a way to fix that?',0,200);
    text(3. Whenever typing up a sentence and trying to add a comma in it, the program thinks that the rest of that sentence is the X value. Is there a way to fix this also?",0,300);
    text(Thanks to whoever helps me with this problem.",0,350);
    (30 votes)
    Default Khan Academy avatar avatar for user
    • aqualine ultimate style avatar for user Alex
      text("The answer to your first question is yes. There are five available variables in the text function: message, x position, y position, x box limit, and y box limit. Adjusting these last two variables is optional, but it limits the size of the text box you are creating. However, do not attempt to use either of these variables in the 'My favorite foods' challenge- it will tell you that they are not necessary in that line of code.", 0, 100);

      text("As for your second question, the two optional variables in the text function should help with that as well. Try moving the x box limit around.", 0, 200);

      text("This might go better if you have not ended the quotation marks yet. If there is a spare quotation mark in the middle of the phrase, it can assume you are done typing. If there are no quotation marks, try going back and adding the comma after you have ended the message.", 0, 300);

      text("I hope you find this helpful. Good luck in your future coding!", 0, 400);
      (47 votes)
  • blobby green style avatar for user giuseppefasciani
    Is coding legal on this website?
    (14 votes)
    Default Khan Academy avatar avatar for user
    • leafers ultimate style avatar for user Charlie
      I do not know of any reason that it would be illegal. I have been coding on here for more than 4 years and no one has arrested me. :)
      If you want to be sure, check with the KA staff and any local laws you may have(I seriously doubt that you will find anything).
      (60 votes)
  • winston default style avatar for user Diarasis Rodriguez
    What's the difference between document.write() and text()? Is text used for ProcessingJS, while document is used for regular JavaScript?
    (19 votes)
    Default Khan Academy avatar avatar for user
    • piceratops ultimate style avatar for user WinstonGuy
      Document.write() is used for JavaScript to write text in the HTML tag. Text() is also used in JavaScript, but less commonly. Both I believe are used for the exact purpose, except that document.write() uses the "document." meaning that it is also in the "document." category.
      (3 votes)
  • aqualine ultimate style avatar for user dd1
    Can strings be mixed with coordinates? For example,

    text(200, 'Hi!' 200);
    (10 votes)
    Default Khan Academy avatar avatar for user
  • aqualine ultimate style avatar for user Anuhar Cerna
    My mentor once told me that I should find a way to make a program that just says "Hello World!" Why is that so important for me to do?
    (12 votes)
    Default Khan Academy avatar avatar for user
  • leafers ultimate style avatar for user Kevin Looby
    Is there any way to disable the code autocompletion in the applet? It's become a nuisance when I want to include curly braces in strings, because they automatically complete to a multi-line structure that I then have to delete. It would just be nice to switch it off when I don't want it.
    (13 votes)
    Default Khan Academy avatar avatar for user
  • winston default style avatar for user olivercudrigh
    The oh nose! guy pops up way to much. When I am writing and I stop to think about what to do I says "you need a semicolen " or something else. Is there a way to turn him off?
    (7 votes)
    Default Khan Academy avatar avatar for user