What do you want to learn? Leverged jhuang@tampa.cgsinc.com Skip to main content Pluralsight uses cookies.Learn more about your privacy Code School: JavaScript Road Trip Part 1 by Jason Millhouse An introduction to the very basics of the JavaScript language. Start CourseBookmarkAdd to Channel Table of contents Description Transcript Exercise files Discussion Recommended The Cliffs of Value Booleans, the True Path Hi everyone and welcome to the JavaScript Road Trip. If you've ever surfed the internet before and who hasn't, chances are you've run thousands if not millions of lines of JavaScript code. Now although JavaScript is primarily designed for interactive web pages, in this tutorial we'll be focused primarily on the fundamental building blocks of the JavaScript language itself so that later you'll be able to engage with more advanced frameworks, like jQuery. Now in this first course on the road trip, we'll be looking at the fundamental building blocks of the JavaScript language, including how to manipulate values with operators as well as how to create and store those values inside variables and then how to find and create and run JavaScript source files within HTML code. And with that, all board, it's time to start your journey on the JavaScript Road Trip. From the labyrinth of loops To the variable valley We'll see the cliffs of value first JavaScript's right up your alley Built ins, bluff, files falls Or ray archipelago Declarations in a desert where you'll find out How far you'll go Learn the program, take a ride Buy a ticket, step inside All aboard are at the station to increase your education Bon voyage and skinny dip As long as functions you don't skip On this the JavaScript Roadtrip Hey road trippers, welcome to level one, the cliffs of value. Get ready to learn about numbers, operators and strings. There are two symbols that we'd like you to be familiar with as we move through this course. The first is the greater than symbol which represents the JavaScript prompt. Here we will place the code that will actually be entered into the console. The arrow that follows that is what gets returned from the code. The JavaScript language automatically recognizes numbers, so you can see that if we entered a 24 into the console, the console will return 24 right back to us. The same goes for decimal values. If we entered 3.14 we'd also see a 3.14 come right back. Let's try to do some math in JavaScript. There are common operations that the console will accept. First one is addition. Second one is subtraction. The third is multiplication. Next we have division and then we have a special operator that you see a lot in computer programming called the modulus. Modulus will return the remainder after division. You can see there that if we divide 43 by 10 even though it goes in four times, the remainder from that operation is three. Along with the basic operations, JavaScript recognizes the standard order of operations in mathematics. You may remember this by the familiar acronym parentheses, exponents, multiplication, division, addition and subtraction or PEMDAS. We can see here that if we entered an expression into the JavaScript console, the first thing that would be evaluated is the parentheses that contains five plus seven. That would become a 12 and then that 12 would be multiplied by three to get 36. Here's another longer expression. We can see that we'd hit the parentheses first, the three times four becoming a 12 and the rest of the expression coming down, followed by that we would tackle the 12 divided by two which becomes a six and then we would do straight addition and subtraction left to right to produce a nine. In this third expression we see some negative numbers. JavaScript recognizes those too and the first thing we would tackle here is the negative five times six inside the parentheses. That would give us a negative 30 and the rest of the expression would come down and then we would evaluate the seven times the negative two to arrive at negative 14 and then the negative 30 minus negative 14 produces a negative 16. In this last expression we can see a modulus operation. You can think of modulus as being contained within the M of PEMDAS along with multiplication because it exists in the same hierarchically level. Here in this operation what we would do first is the innermost parentheses, that three plus one. That would become a four and then we'd be left with an eight modulus four inside that last parentheses. The remainder after eight is divided by four is zero. And then we would add four and zero together and get four. There are some unique comparators in the JavaScript language that allow us to compare values. When you use a comparator, it will return something called a Boolean value which is either true or false. Here you can see the comparator greater than which you're probably familiar with. The question asks is six greater than four and JavaScript returns true. Along with greater then we have the less than and here the question asks is nine less than five? And that is false. To compare a quality of numbers in JavaScript we have to use a special syntax. We don't use a single equals sign, instead here we use a double equal sign to return a Boolean value. This question asks is three equal to four? Which of course is false. JavaScript has a special syntax to ask whether two values are not equal. We use an exclamation point in front of an equals sign to ask the not equal question and this particular question says is 12 not equal to four? Which gives us a value of true because those two numbers are not equal. We also have of course a greater than or equal to syntax. This question asks whether eight is greater than or equal to negative two. Notice that the greater than comes in front of the equal sign. This question returns a value of true because eight is greater than or equal to negative two. Along with greater or equal we have less than or equal. This question asks is 10 less than or equal to 10 and since it is equal, we get a truth value. Strings on Signs Next we have strings. Strings are JavaScript's way of handling and storing and processing flat text. In order to signal to JavaScript that we want to process some flat text, we need to use a pair of quotation marks surrounding some text as we enter the string into the console. Here you can see two different strings, Raindrops On Roses and Whiskers On Kittens. When we surround the text with quotation marks JavaScript recognizes it as a string and then returns the string right back to us. We can also use the plus operator uniquely with strings in a process called concatenation. Concatenation places strings together inside of one string and returns one master string at the end. Here you can see Raindrops On Roses concatenated with another string that says space And space concatenated with another string that says Whiskers On Kittens. As a result we get Raindrops On Roses and Whiskers On Kittens. Now it's time for a few of my favorite strings. Concatenation will also work with numbers and their expressions too. In this first example we can see that when we try to concatenate the meaning of life is with the value 42 we get a perfectly valid string at the end but it's not formatted exactly like we would want. Seems to be that we're missing a space. Since concatenation does not provide a space for you, all we need to do to fix this is place a space inside the very first string. We can also concatenate expressions into strings. However, expressions will get evaluated by the console. As you see here with 0.75 3/4 got evaluated. In order to fix that we actually need to place the expression inside of the string so that we get the flat text of 3/4 instead of 0.75. When working with strings you'll need some special characters to achieve some specific formatting. Here in this example you can see a \t which represents an advancement to the next tab stop. Here in the output you can see that the \ts have disappeared and in their place is an advancement to the next tab stop inside the string. What if we needed double quotation marks inside of our string? Well, the console looks at double quotation marks as beginning or ending a string, so we need a special way of escaping that double quotation mark and so, we use a backslash before quotation mark in that case as well. In our output result we can see that we have a set of double quotation marks inside the string. What if we want a backslash inside of a string? Well, since it's a special character we need to use a double backslash to produce just one backslash inside of the string. Following that we have a \n. That represents a new line. You can see in the output here that the string is split up across multiple lines because of the \n. This is by no means an exhaustive compilation of special characters for use in string formatting and you can research the rest on the internet. Sometimes we'd like to compare strings for alphabetical ordering or for matching strings. JavaScript allows us to compare strings with specific comparators. We can use the double equal sign to compare The Wright Brothers with The Wright Brothers which returns a truth value because those strings are exactly the same. We can see that if we used double equal on The Wright Brothers and Super Mario Brothers that we would get a false value because those strings are not at all the same. Now, here's a tricky one. If we see The Wright Brothers compared with the wright brothers in a not equal situation, this will return a truth value. The reason that is is because those strings are not exactly the same because JavaScript is case sensitive with regard to strings, so they are not equal. We can also access the length of strings using the .length property. You can see here that if we have a super long English word, antidisestablishmentarianism and we use the .length property that the JavaScript console would return a very nice value to us of 28. And again, when we used One Fish, Two Fish, Red Fish, Blue Fish, if we use the .length property on that, JavaScript will return a 39. Now what's really important here is that the .length property will calculate all of the spaces and all of the punctuation in determining your length. Variable Valley Variable Discovery From the labyrinth of loops To the variable valley We'll see the cliffs of value first JavaScript's right up your alley Built ins, bluff files, files Or ray archipelago Declarations in a desert where you'll find out How far you'll go Learn the program, take a ride Buy a ticket, step inside All aboard are at the station to increase your education Bon voyage and skinny dip As long as functions you don't skip On this the JavaScript Roadtrip Howdy road trippers. Hope you enjoyed level one and now you know how to make some data but we need to know where to store it so that's what we're going to do in the next level. Here comes level two, variable valley. JavaScript uses variables to store and manage data. You can see here a basic assignment syntax for a variable called trainWhistles. That var is the variable keyword. It's what tells the browser to set some space aside for the variable itself. The next thing you see is the trainWhistles name that's the name of the variable. The equals sign is the assignment operator. Notice that it's a single equal sign and lastly, the value three. That's the value that's going to be stored inside our variable trainWhistles. Now when we call the variable trainWhistles we automatically get a value of three returned to us. Now, there are some rules and regulations that we follow in JavaScript for naming variables. The first is that we can't have any spaces in the variable name. The compiler will return an error to you if you try to put spaces inside a variable name. The next thing is that we can't have any digits at the front of our variable names. We don't like that, the compiler doesn't like that. We can use underscores although they're often irritating. We can use dollar signs. I think not. We can even use dollar signs and underscores together. So, this is slightly stupid but it's technically legal. Now, here's a great variable name. Notice at the beginning is a lowercase letter and every subsequent word is capitalized. You may have heard this referred to as camel case and then this final variable name uses a digit at the very end. Fatality!! What if we wanted to change a variable's contents? Guess what? It is your lucky day. Currently our trainWhistles variables is set to three. But if we wanted to change our trainWhistles amount, we just reuse the assignment operator and set it equal to a new value. Notice that we don't use the var keyword because the console already knows that the variable trainWhistles is inside memory. Now our trainWhistles value is nine. We can also use the trainWhistles value itself to modify the contents of the trainWhistles variable. Here you can see that we're saying take the trainWhistles value, add three to it and store it back inside the trainWhistles variable. Now because the earlier value of trainWhistles was nine, we get nine plus three stored in trainWhistles which results in a 12. Another way to say that exact same expression is with the plus equals operator. That signals to the console to take the trainWhistles variable and add three to it and store it back inside the trainWhistles variable. Now we have 15 total trainWhistles. All of the operations can be used with variable assignments. Here we can see that the trainWhistles variable is being multiplied by two before being stored back inside the trainWhistles variable. Now we have 30 trainWhistles. And again, the times equals operator is the exact same as the previous expression and we get 60 trainWhistles. Whoa, 60 whistles, that's a lot. Variable names can also act as substitutes for the data they point to. That means that I can use variables inside of concatenations with strings to refer to the data that's actually inside the variable. Here you can see a concatenation of all of our trains have with the variable trainWhistles and then the string whistles. What happens in the output? All of our trains have three whistles. The variable name disappears and instead the data that the variable contains is placed inside the string. Additionally, we can place variables inside of expressions that are concatenated with strings. In this string, when trainWhistles is multiplied by three we get nine and in the final string we see that the Pollack 9000 has nine. But wait, this code kind of sucks a little bit because the Pollack 9000 needs its own whistles variable. Let's do that. All we have to do is declare a new variable, we'll call is the pollack9000 and then assign that expression that we were using in the string to this new variable and now we can see that the pollack9000 has nine trainWhistles. Now that the pollack9000 has its own variable, we can use that inside the string. There's a simple way to increase or decrease a variable's value by one in either direction. This is called incrementing and decrementing. Here on the left side you can see that we have trainWhistles++ which is a simple syntax for increasing a variable's value by one. Now, you can see the trainWhistles value is four. If we wanted to decrease the variable by one, we would have used a minus minus syntax which would have produced a value of two inside the trainWhistles variable. Variable Exploration We can store anything inside of JavaScript variables. Up until now we've been using numbers but we can also store strings inside of variables. Here we have a welcome variable as well as a safetyTip variable. We can use both of those variables that contain strings in concatenation with a new line character to produce a specifically formatted string in the output on the console. If our variable contains a string, we can use the .length property to access the length of that string instead of typing the entire string out. Here you can see our variable longString with a string that I wouldn't want to retype every time and if we use the .length property on longString, we can see it returns the value 49 as the length. We can also compare string lengths using the length property and a comparator. So, if we made two variables here, longWordOne and longWordTwo and they're both huge and we don't want to count each one or compare which one is longer, we can use the greater than operator to ask whether the length of the first string is greater than the length of the second string. When we use the .length property on two variables, we're comparing two numbers. And here we get a result of false because longWordOne is not longer than longWordTwo. Now, JavaScript's strings have a way of finding specific characters within that string. Each position inside a string has a numbered index that begins from zero. Here we have a variable called sentence and inside is a sentence, a very long string. You can see that at the index zero we have the capital letter A. You want to think of index numbers as being a certain distance away from the starting character and thus the first character in a string is zero away from itself. Then you can see at index eight that we have a lowercase S, at index 28 we have a space character, that's right, spaces are characters too and then in the very last index, index 42, we have an exclamation point. Now, if we took the length of this sentence variable using the .length property, JavaScript will return a 43. What, why? We just said that the last character was index 42. That's because string positions are zero based and so they will always be one less index than the total length of the string. Another cool helper method for strings is the charAt method. If you place an index inside the parentheses of the charAt method, JavaScript will return the character that's exactly at that index for you. So, you can see that the 11th index would contain the letter B. The 31st index would contain a space character and JavaScript will return a space to you surrounded by two quotation marks. And at the 42nd index we can see that we get the exclamation point. Variables are essentially the foundation of programming. They help us organize our data and we're able to create very powerful and complex and flexible messages using variables which can be modified. Let's say that we were designing a train system and we have a certain amount of operational trains out of a certain amount of total trains. Let's see how we can make a message to print to the user at the console about how many running trains there are today. If we wanted to make our message using these particular variables, we could do trainsOperational concatenated with out of, then the variable totalTrains and then the operatingStatus message. Together those would produce eight out of 12 trains are operational today. Now, say we had to run the train system message again the next day but there was a different amount of trains that were operational. Too easy. We can change the trainsOperational variable to a value of 10 and now when the message gets printed out to the user we get 10 out of 12 trains are operational today. Files Falls Script Tags From the labyrinth of loops To the variable valley We'll see the cliffs of value first JavaScript's right up your alley Built ins, bluff, files falls Or ray archipelago Declarations in a desert where you'll find out How far you'll go Learn the program, take a ride Buy a ticket, step inside All aboard are at the station to increase your education Bon voyage and skinny dip As long as functions you don't skip On this the JavaScript Roadtrip So, variables are pretty cool, right? How you enjoyed level two but who wants to code in a console all day long? Not me, not you, we need a way to build some JavaScript source files and run them inside our HTML code, so here comes level three, files falls. Don't jump. At the end of the last level, we started talking about a system of trains in which some were running and some were not running. Our goal for this level is to print out a list of trains that are running. So, let's say for the sake of consistency that our trains are numbered according to who's running first. And then thereafter the trains that are not running are numbered later. So, here in our images we see that we have trains one through eight that are running and trains nine through 12 which are not running today. We have a relatively easy way to print these messages out on our console. We could just concatenate a few strings together with some values and we could get statements like train number one is running, train number two is running, train number three is running and then we would do a whole bunch of that and realize that none of it gets printed out in our user's browser. We need a way to be able to convey the messages that we want to display to our customers in their browser. That's why we need a JavaScript file. A JavaScript file is for running our written JavaScript code in somebody else's browser. Here we have an index.html file. Inside you'll see some common HTML code with some common HTML elements. Once the user's browser loads this HTML code we want it to execute some JavaScript code. To do this, we'll use a script tag inside the HTML code and that script tag will tell the HTML file which JavaScript file contains the code that we want to run. You'll notice inside the script tag that we have an SRC keyword that's being assigned to the file trains.js. That is our JavaScript file for this particular system. Notice also that you need to turn off the script tag inside your HTML so that the HTML file knows when your script tag ends. So, now what is inside that trains.js file? Well, it's our JavaScript code of course. We want to build a file of JavaScript code that can be used every time a user opens our website. To create this file you can use any text-based editor like TextEdit or Notepad. Inside that file we're going to produce all the JavaScript code that we want our user's browser to execute when it reaches the script tag inside the HTML code. So, now we have an index.html file and we have a trains.js file and we want to give you a little bit of file structure here so that you can keep your website organized. Let's see where we can add our files in an appropriate location. So, here we have a root folder for our entire website, everything about our website is contained within our root/ folder and in inside that root/ folder meaning in the same directory we have an index.html file and our trains.js file. Since our script tag has a source that reads trains.js, our trains.js file needs to be in the exact same directory as our index.html file. Many websites, however, will keep all of their JavaScript files in one convenient location. We want you to be able to stay organized as you code, so here you can see our root/ folder that it contains the index.html file but also a scripts/ folder and inside that scripts/ folder is our trains.js. Now, how would we show that in our source link inside the index.html file? You can see here that we have the scripts file listed first, followed by a forward slash and then trains.js. What does that say to the index.html file? It says first go down to the scripts/ folder and there you will find trains.js. What happens if the files are really far apart, like nowhere near each other? Well, we can still find a way to stay organized as we code but we have to be a little bit more detailed inside of our source links and incorporate a little bit different syntax. So, here we got a root/ folder but now our index.html file is in its own folder called pages/ because it's one of the pages of our website and our scripts contains trains.js. So, how do we show this in our source link? Well, we need what's called a double dot notation. That signals to the browser to go up a folder first and then go down to the scripts file and then find the trains.js file there. Down to the Files Cool, now we know where our files are and we know how to make them, so let's see if we can put some JavaScript code in our trains.js file and get something to execute. Let's put a few console style expressions inside our trains.js file just to see if we get a good response from our compiler. Uh-oh, error. What's up? Well, compiler does not like how we have entered our statements into the file. We need something a little different so it can understand our file representation. We have to have a way to differentiate between the statements themselves. So, here's our console entry, right? If we were declaring a variable for trainsOperational we would just declare it and say that it equals eight and it'd be ready to go and everything would be great. But if we put multiple console statements to execute inside one file, the compiler looks at it like this which is just back-to-back garbage nonsense and it has no idea where your statement begins, where it ends or what to do, so we need a way to tell the compiler we're done making this particular statement. Enter the semicolon. The semicolon is very cool, we like it. So, here we have what a normal console entry would be for our trains operational variable and the only thing we would need to do to tell the compiler in a file that we are done making that statement is to throw a semicolon right on the end of that statement. It says hey, we're done with this particular expression, go ahead and do that before even looking at the next one. So, now if we had a wootForSemicolons file and we put all of our statements in there, each of them separated by a semicolon, we would get a fantastic blank. What, what's going on? Why didn't we get anything? We just put all that stuff in there with our semicolons, it executed the statements just fine but we got nothing and that's because everything that happened with those statements happened inside the compiler and the compiler never printed anything out for the user. We need a way to get the results of our computations in the compiler out to the user. So, in order to print from a file to the console, we'll use this cool method called the console.log method. It's going to output the result of your code operations from your file to the console. So, let's say in our train system we had 12 total trains as we know but we also have today eight operational trains. If we wanted to build a message for the user on the console that told them how many running trains we have today we could use the console.log method and place an expression that builds a string inside its parameters. This would log out or print the contents of the string to the browser's console and notice that there are no more quotation marks around that string. Now, we can place any expression that we want inside of a console.log method. We can even ask if the trainsOperational is equal to the totalTrains and since it's not, console.log will say false. So, now we kind of have a way to get our messages printed to the screen so that the user can see them and they won't stay just inside the compiler itself. We can use console.log inside of our trains.js file to print out every running train. So, let's do that. Here's every last one of the running trains. Wow and let's see what we get. Every single one prints in order and we see exactly how many trains are running and which ones are running. So, here we have our index.html file and we know that that references our trains.js JavaScript source file and if we open our index.html file we can see the generic JavaScript Express header that we stuck into our HTML file before but we don't see any of our running train printouts. Why is that? We put our semicolons in, right? Well, remember that our console.log method prints its messages only to the console, so all we would do here to see our results is go up to the menu and open our JavaScript console which we already know how to do and there on the left you can see our running train printouts exactly as we wanted them to be. You might ask what these notations are over here on the right-hand side of our log and that would be an excellent question. These are indicators that show which files caused the current line of output on the left along with the exact line within the file that caused the output. This is very useful when you have a lot of code in a source file or even multiple source files and you need to pinpoint how or why certain printouts appear. Now we have combined semicolons and the console.log method to produce each message for each train and you can see that the console obeys conveniently and produces every single message that we wanted. Course author Jason Millhouse Jason has been teaching since he was a kid and has racked up a bunch of Education degrees since then. A glutton for punishment, he's nearly finished with a Computer Science degree, too. He's built... Course info LevelBeginner Rating (17) My rating Duration0h 33m Released10 Sep 2013 Share course