Main content
Computer programming - JavaScript and the web
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
text("Hello World!", 100, 100);We could also store it in a variable, and then pass that variable into the
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
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?(150 votes)
Useimage(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.(142 votes)
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?(62 votes)
You use separatefillandtextinvocations.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);(46 votes)
Does spacing really matter?(12 votes)
Yes. Because, in the screen after the code, it makes the text to appear too congested. Hence, Space is used(8 votes)
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);(32 votes)
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);(49 votes)
- Is coding legal on this website?(19 votes)
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).(68 votes)
What's the difference betweendocument.write()andtext()? Is text used for ProcessingJS, while document is used for regular JavaScript?(20 votes)- 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.(4 votes)
- 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?(13 votes)
- Can strings be mixed with coordinates? For example,
text(200, 'Hi!' 200);(12 votes)
No - the order of the arguments matter. In your case,200is a valid argument for the text to display, however the computer doesn't know what to do with'Hi!'as a position.(15 votes)
- 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)
- No, you cannot turn it off, probably because it is built in to the editor. However, with normal Javascript, it doesn't autocomplete.(15 votes)
- 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?(8 votes)
- Oh noes is helping you from the errors, so if you don't have him, like when you do a loop, you will don't know why your code is not working.(5 votes)
