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.

Text and strings

# 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?

• 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?
• Use image(getImage(imagelocation),x,y,w,h).
However, Khan Academy does not allow other images to be displayed apart for the images in its own library.
• 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?
• 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);
• Does spacing really matter?
• Yes. Because, in the screen after the code, it makes the text to appear too congested. Hence, Space is used
• 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);
• 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);
• Is coding legal on this website?
• 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).
• What's the difference between document.write() and text()? Is text used for ProcessingJS, while document is used for regular JavaScript?
• 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.
• Can strings be mixed with coordinates? For example,

text(200, 'Hi!' 200);
• No - the order of the arguments matter. In your case, 200 is a valid argument for the text to display, however the computer doesn't know what to do with 'Hi!' as a position.