1 00:00:00,000 --> 00:00:04,950 [MUSIC] 2 00:00:04,950 --> 00:00:06,380 Hey, welcome back. 3 00:00:06,380 --> 00:00:07,640 You've learned that in order for 4 00:00:07,640 --> 00:00:11,590 a JavaScript program to do anything, it must be given information to work with. 5 00:00:12,680 --> 00:00:15,410 In the previous section, you use variables to store and 6 00:00:15,410 --> 00:00:18,880 keep track of information that your program could use and manipulate. 7 00:00:18,880 --> 00:00:21,820 That information put into a variable is called a value. 8 00:00:21,820 --> 00:00:24,990 But, what exactly are you storing with values? 9 00:00:24,990 --> 00:00:29,530 Values come in many different types falling into categories called data types. 10 00:00:29,530 --> 00:00:32,210 All programming languages have built-in data types and 11 00:00:32,210 --> 00:00:34,220 treat each in a different way. 12 00:00:34,220 --> 00:00:37,220 Now, at this point you've used two JavaScript data types, 13 00:00:37,220 --> 00:00:39,360 strings and numbers. 14 00:00:39,360 --> 00:00:43,821 Numbers or numeric data types are used for making calculations like adding, 15 00:00:43,821 --> 00:00:44,721 subtracting. 16 00:00:44,721 --> 00:00:48,340 Computing total costs, keeping track of a game score, and so on. 17 00:00:48,340 --> 00:00:53,205 For example, a newsfeed application like Reddit might use numbers to calculate and 18 00:00:53,205 --> 00:00:55,958 keep track of how many upvotes a post receives. 19 00:00:55,958 --> 00:01:00,120 Strings are used for words, sentences, and other texts in your program. 20 00:01:00,120 --> 00:01:02,440 You write a string as a series of letters, digits, and 21 00:01:02,440 --> 00:01:05,590 other characters inside single or double quotation marks. 22 00:01:05,590 --> 00:01:07,600 The characters are strung together. 23 00:01:07,600 --> 00:01:10,852 You've already seen strings in action when you use console.log and alert. 24 00:01:10,852 --> 00:01:12,180 You pass each a string. 25 00:01:13,510 --> 00:01:16,060 You'll use strings all the time when programming. 26 00:01:16,060 --> 00:01:18,910 And as you'll learn, there are several different ways you can create and 27 00:01:18,910 --> 00:01:19,800 work with strings. 28 00:01:20,900 --> 00:01:24,350 To code along with me, launch the new workspace with this video and 29 00:01:24,350 --> 00:01:29,320 open the file strings.js, located inside the js folder. 30 00:01:29,320 --> 00:01:33,490 I've also updated the script tag in index.html to point to this file. 31 00:01:35,810 --> 00:01:40,160 So each time you want to add a message to a web page, pop up an alert or 32 00:01:40,160 --> 00:01:44,380 collect information from a web form, you're going to deal with strings. 33 00:01:44,380 --> 00:01:48,770 For example, when you wrote this statement earlier, the message in quotes Hello, 34 00:01:48,770 --> 00:01:50,800 world, it's called the string. 35 00:01:50,800 --> 00:01:53,640 Again, a string is a series of letters, numbers, 36 00:01:53,640 --> 00:01:56,590 and other characters inside quotation marks. 37 00:01:56,590 --> 00:01:59,240 All of these are examples of strings. 38 00:01:59,240 --> 00:02:03,880 A string can also contain HTML tags, like the h1 tags in the bottom string. 39 00:02:03,880 --> 00:02:07,770 The quotation marks around a string instruct the JavaScript engine 40 00:02:07,770 --> 00:02:11,590 that it should treat the contents inside as a regular set of characters. 41 00:02:13,060 --> 00:02:17,360 JavaScript lets you use either double or single quotes to create a string. 42 00:02:17,360 --> 00:02:19,262 You just need to be consistent. 43 00:02:19,262 --> 00:02:23,145 For example, if you begin a string with a double quote, 44 00:02:23,145 --> 00:02:27,160 you need to end the string with a double quote. 45 00:02:27,160 --> 00:02:30,660 Likewise, if you begin a string with a single quote, 46 00:02:30,660 --> 00:02:33,770 you need to end it with a single quote. 47 00:02:33,770 --> 00:02:39,060 Otherwise, JavaScript is going to produce a syntax error, in both cases. 48 00:02:39,060 --> 00:02:44,849 For example, the console lets me know that there's an invalid or unexpected token. 49 00:02:52,733 --> 00:02:56,850 Now, things get a little tricky when you wanna put a quote mark inside a string. 50 00:02:58,220 --> 00:03:04,160 For example, if you wanted to put I'm a programmer in a string, 51 00:03:04,160 --> 00:03:09,470 you need to be careful with these single quotation mark in I'm. 52 00:03:09,470 --> 00:03:14,480 If you create a string using single quotes, you'll encounter a syntax error. 53 00:03:14,480 --> 00:03:19,041 Notice how the console lets me know that an unexpected identifier is 54 00:03:19,041 --> 00:03:20,827 causing the syntax error. 55 00:03:20,827 --> 00:03:26,077 The single quote starts the string, but the next single ' in I'm ends the string, 56 00:03:26,077 --> 00:03:30,420 at least according to the browser's JavaScript engine. 57 00:03:30,420 --> 00:03:34,760 So the rest of the characters are treated as if they're outside the string and, 58 00:03:34,760 --> 00:03:36,980 therefore, produce an error. 59 00:03:36,980 --> 00:03:41,844 Now, one solution is to use double quotes to create a string that has one or 60 00:03:41,844 --> 00:03:43,891 more single quotes inside it. 61 00:03:46,836 --> 00:03:50,947 Since the first quotation mark is a double quote, the JavaScript 62 00:03:50,947 --> 00:03:55,819 engine will not end the string until it finds the next double quotation mark. 63 00:04:01,428 --> 00:04:04,418 Likewise, you can use single quotes to create a string, 64 00:04:04,418 --> 00:04:07,590 whenever you need double quotes inside a string. 65 00:04:07,590 --> 00:04:11,752 For example, if you wanna put an htmlSnippet inside a string and 66 00:04:11,752 --> 00:04:13,833 the tag requires an attribute, 67 00:04:13,833 --> 00:04:18,702 which you normally write using double quotes, you'd write it like this. 68 00:04:35,525 --> 00:04:38,480 There's yet another way to put a quote into a string. 69 00:04:38,480 --> 00:04:41,470 You can use what's called an escape character. 70 00:04:41,470 --> 00:04:46,104 I'll change the message string back to single quotes. 71 00:04:46,104 --> 00:04:50,210 And if you include a backslash before the quotation mark inside the string, 72 00:04:50,210 --> 00:04:54,400 the JavaScript engine treats the quote mark like any other character. 73 00:04:54,400 --> 00:04:58,250 It's literally just a quote mark character at this point. 74 00:04:58,250 --> 00:05:00,799 Notice how it doesn't appear in the console output. 75 00:05:02,833 --> 00:05:06,970 You can use the backslash before either single or double quote marks. 76 00:05:08,380 --> 00:05:13,099 Finally, keep in mind that the JavaScript engine will also produce 77 00:05:13,099 --> 00:05:17,667 an error if you try to write a string on two or more lines, like so. 78 00:05:20,891 --> 00:05:23,962 On the first line I'll write Hello, students. 79 00:05:26,808 --> 00:05:30,672 On the next line, Welcome to JavaScript basics. 80 00:05:35,132 --> 00:05:39,145 And on a third line I hope you learn a lot. 81 00:05:44,954 --> 00:05:51,560 Logging the value of the variable multiline produces a syntax error. 82 00:05:51,560 --> 00:05:54,680 It says Invalid or unexpected token. 83 00:05:54,680 --> 00:05:59,600 Well, the JavaScript engine evaluates each line here separately. 84 00:05:59,600 --> 00:06:04,760 So according to the JavaScript engine, the first quote starts a string, but 85 00:06:04,760 --> 00:06:06,880 it doesn't have a closing a quote mark. 86 00:06:06,880 --> 00:06:09,830 The second line is not wrapped in quotes at all. 87 00:06:09,830 --> 00:06:14,020 And the third line is missing the first quotation mark. 88 00:06:14,020 --> 00:06:16,290 So if you wanna write a string on multiple lines, 89 00:06:16,290 --> 00:06:19,950 you need to escape any new line characters with a backslash. 90 00:06:21,370 --> 00:06:25,130 Adding a backslash at the end of each line tells the JavaScript engine that 91 00:06:25,130 --> 00:06:27,540 the string should continue to the next line. 92 00:06:27,540 --> 00:06:28,990 That way you avoid any errors. 93 00:06:32,830 --> 00:06:35,780 In a later video, you'll learn a more elegant way to create and 94 00:06:35,780 --> 00:06:38,970 work with strings with a feature called template literals. 95 00:06:38,970 --> 00:06:42,720 Up next, you'll learn ways to transform and manipulate strings.