Chapter 1 · Foundations
Text
Step 1 of 22 · Concept
Text is a string
By the end of this lesson you can join text, put values into it, and turn it into numbers.
A text value is a string: characters between "..." or '...'. The quotes mark where it starts and ends; they
are not part of it.
const name = "Ada";
console.log(name.length);
.length gives the number of characters: "Ada".length is 3. Like a number, a string sits in its box (lesson 2),
and typeof name is "string" (lesson 3).
Step 2 of 22 · Concept
+ joins text, and turns numbers into text
| you write | you get | because |
|---|---|---|
"Ada" + " " + "Lovelace" | "Ada Lovelace" | + joins text |
"5" + 3 | "53" | with text on either side, + joins |
"5" * 2 | 10 | -, * and / turn text into a number |
+ adds only when both sides are numbers.
Step 3 of 22 · Quiz
Text or number?
What does this line print?
console.log("5" + 3, "5" * 2);
Step 4 of 22 · Demo
See it run
Run it and compare with your answer.
Step 5 of 22 · Concept
Special characters
Inside quotes, \ starts an escape: a code for a character that is hard to type there.
| you write | it prints |
|---|---|
\n | a new line |
\" | a " inside "..." |
\\ | one \ |
Before most other characters, a \ is dropped without a word: "a\ b" prints a b.
Step 6 of 22 · Try it
Try it: a quote inside
Run it: Node stops with SyntaxError: missing ) after argument list. The ' in It's ends the text early.
Write the text between double quotes, as this course does, so that it prints It's me.
Swap the outer ' for " at both ends. Inside "...", a ' is a plain character.
Step 7 of 22 · Concept
Template literals put values into text
A template literal is text between backquotes, `. Each ${...} in it is worked out, and its value goes
into the text. A name fits between the braces, and so does a sum: ${price * 3}.
const item = "tea";
const price = 2.5;
console.log(`${item}: ${price * 3}`);
Step 8 of 22 · Quiz
Predict the label
Type what this program prints.
const item = "tea";
const price = 2.5;
console.log(`${item}: ${price * 3}`);
Step 9 of 22 · Demo
See it run
Run it and compare with your answer.
Step 10 of 22 · Exercise
Your turn: a badge
Log one template literal that uses name and age, and works out next year's age. The program must print:
Ada is 36, next year 37
Mind the quotes: between "..." the program prints ${age} as it is. A template literal needs backquotes, `.
Three values go into the text: ${name}, ${age}, and ${age + 1} for next year.
console.log(`${name} is ${age}, ...`);
Step 11 of 22 · Concept
Number() turns text into a number
| you write | you get |
|---|---|
Number("15") + 1 | 16: the number 15, plus 1 |
Number("abc") | NaN, with no error |
String(15) + 1 | "151": the text "15", joined |
Number(text) turns text into a number, and String(x) turns a value into text.
Step 12 of 22 · Quiz
Which is the number?
What does this line print?
console.log(Number("15") + 1, "15" + 1);
Step 13 of 22 · Demo
See it run
Run it and compare with your answer.
Step 14 of 22 · Concept
toFixed(2) for money
19.99 * 3 prints 59.97, but 4.35 * 100 prints 434.99999999999994: decimals are close, not exact (lesson 3).
| you write | you get |
|---|---|
x.toFixed(2) | text with two decimals: (4.35 * 100).toFixed(2) is "435.00" |
Math.round(x) | the nearest whole number: Math.round(2.5) is 3 |
toFixed gives text. Use it last, when you print.
Step 15 of 22 · Quiz
Fill in the line
Type the missing line.
const total = 4.35 * 100;
console.log(total);
console.log(total.toFixed(2));
Step 16 of 22 · Demo
See it run
Run it and compare with your answer.
Step 17 of 22 · Exercise
Your turn: a price label
Log one template literal with the count, the price, and the total with two decimals. The program must print:
4 x 2.25 = 9.00
${count * price.toFixed(2)} prints 9: .toFixed(2) turns only price into text, and * makes a number again. Put brackets around the total.
The total is (count * price), and .toFixed(2) goes after its bracket, inside ${...}.
${(count * price).toFixed(2)}
Step 18 of 22 · Concept
Text has methods
A method is work a value can do, called with a . after it and brackets:
const name = "Ada";
console.log(name.toUpperCase());
name.toUpperCase() gives new text, "ADA". toFixed(2) is a method of numbers.
.length has no brackets: it is a property, a value the string has. A method has brackets, because it does work.
Step 19 of 22 · Demo
A method at work
Run it. The method gives ADA, Math.round(2.5) gives 3, and the \n starts a new line inside the text.
Step 20 of 22 · Check yourself
Check yourself: a ticket
No shape this time. You know it.
- Make
name("Ada") andage(12). - A ticket costs
age * 2. - Log one line: the name in capitals, the age, and the price with two decimals.
The program must print:
Ticket for ADA, age 12: 24.00
Work out the price into its own box first. Then one template literal, with a method call in two of its ${...}.
Step 21 of 22 · Challenge · optional
Challenge: columns
Optional.
Line up the prices: each one takes 8 characters, filled with spaces in front. The program must print:
2.50 tea
12.00 cake
3.75 juice
toFixed(2) gives text, and text has a method that fills it with spaces in front, up to a length.
text.padStart(8) gives the text with spaces in front, 8 characters in all: "7.50".padStart(8) is " 7.50".
${tea.toFixed(2).padStart(8)}
Step 22 of 22 · Recap
Recap
- A string is text in quotes;
.lengthcounts its characters. - With text on either side,
+joins:"5" + 3is"53".-,*and/turn text into a number. - A template literal puts values into text:
`${name} is ${age}`. Number(text)makes a number (NaNif it cannot);x.toFixed(2)makes text with two decimals.
Next: lesson 5 reads the errors you have met, and finds the mistakes that print no error.
Review
4 questions from this lesson, in a new order each time. Answer from memory: 3 of 4 right on the first try passes. On a day after you finish the lesson, a pass earns 15 XP.
The review needs JavaScript.
console.log("5" + 3, "5" * 2);
console.log('It's me');
const item = "tea";
const price = 2.5;
console.log(`${item}: ${price * 3}`);
const name = "Ada";
const age = 36;
// log one template literal here
console.log(Number("15") + 1, "15" + 1);
const total = 4.35 * 100;
console.log(total);
console.log(total.toFixed(2));
const count = 4;
const price = 2.25;
// log the label here
const name = "Ada";
console.log(name.toUpperCase(), Math.round(2.5), "a\nb");
// write your program here
const tea = 2.5;
const cake = 12;
const juice = 3.75;
console.log(`${tea.toFixed(2)} tea`);
console.log(`${cake.toFixed(2)} cake`);
console.log(`${juice.toFixed(2)} juice`);