Today, I will talk about JavaScript, the third element in the front-end development. So far, we have learned about HTML to structure the document, and then we learned about CSS to add some styling, and now comes the part of JavaScript. Well, why do we have JavaScript? Well, JavaScript is a programming language that originated in the browser, and the original purpose is to manipulate the document, the HTML document, so that you can do things like we see today in social media with highly interactive and dynamic websites. Manipulating the document means maybe I want to delete an element on the screen in real time, maybe I want to add another one, maybe I want to change some CSS of the page, maybe I want to do something when I click a button, maybe something when I submit a form, and so on and so on. So if you go to the browser and press F12 and go to the console tab, you actually have access to JavaScript, so every browser has the developer tools, and if you go to the console tab, you can actually start typing JavaScript statements, and it's a programming language. You can do simple things like math, for example, one plus two like this, and it gives you three. And then you can do subtraction, three minus two, multiplication, division, and so on. So that's the most basic thing. Now, in the context of the web, we usually use JavaScript to manipulate this document. For example, I don't like, for the sake of a silly example, I could remove this black background from this paragraph here, if you notice if I point to that using the DevTools. Obviously, there's a CSS property here, but I could programmatically using JavaScript, remove it. Okay, but before we do anything in the context of HTML, I've got to explain the concept of an object. I know it's a bit confusing when I did this in the previous bootcamp, but there are many different ways you can store information within the JavaScript language, and there can be laid out in different ways. One of the ways is called an object. So if you see curly braces like this, this is a syntax for object literal, and with this kind of thing, we can store things inside by a label. For example, if I were to store information about a person, a person has a name, has an age, and so on and so on. I could go inside the curly braces and say name, colon, and then within quotes, the person's name like that. And if I want to add more attributes or properties to this person object, I could put a comma there. For example, I could add age, 40. Okay, so the syntax is whenever you see curly braces, and then you can add what we call properties followed by a colon, and then quotes surrounding this because it's what we call a string or sequence of characters. And if you need more properties, separate with a comma, and then add age, colon, and then the value. In this case, it's a number value, so you don't have to have quotes. Now, I might notice this is very similar to how we defined CSS. If you remember, let me right click the speed source and see the style sheet here. If you remember CSS, we did property name, colon, something, and then semicolon. Pretty much just like that. Anyway, going back to that. So that's a way of storing information within JavaScript, okay? So now these objects, although here they only have attributes of a person, they could also have things that a person does, for example, a person can walk, a person can talk, and many other things like basic necessities, hygiene, and so on. So those are called, in the context of objects, they're called methods. But in general, anything that something does something, you can call it a function. So it's a set of instructions. So this person could have maybe a function or operation to talk, right? In this case, we would define what's called a function as its value. And the way to define it is like this, but you don't have to worry about that. But just understand that this person can have attributes, and they can have methods or functions. And this function is basically a list of statements that you can execute from the top to the bottom. But enough of that, I think we got enough context of what's going to happen to manipulate the document. So I'm going to go and do remember this is the repository we've been using for the project. I'm going to go there with my VS Code and open the folder. And under SRC, we have the files index.html for the main page, and we have some CSS files here. Okay, so what I'm going to do is I'm going to open the live preview. And you can see it to the side. Now I'm going to start off writing JavaScript within the same file as HTML, but later we will transfer to a separate file like we did for the CSS file. So let's go here to the end of the body right before the closing tag. And I'm going to add a tag called script. And between the open and closing script tag, I will write JavaScript code. Now the first thing I'm going to show you is how JavaScript can change CSS. Now before anything when you're working with JavaScript, it's like CSS in the sense that, hey, I need to know what you want to style. In the context of JavaScript is it needs to know what you want to manipulate. So first we got to select something to manipulate on the page. Let's, for example, I don't like that this first paragraph here has a background color black. Let's move that or change it to another value. Let's change it to blue or light blue or something like that. So how would we do that with JavaScript? First we need to find a way to select this. In the case of CSS, we need a selector. If you recall the way we selected that P was using a class here. We can use a class for this, but for the sake of just starting out, I want to add an ID to this, a unique identifier. So let's call it first paragraph for the sake of having a good name. So first I want to find that element with ID first dash paragraph. To do that, I have to call upon the document object. So if you call document like this, you have access to the document object. We have through which you can do many operations on the document and one of them is to dot get element by ID. Now what is the dot? Well dot is a way to access a property of an object or an instruction of that object. One of the functions or methods is get element by ID. And then you can execute this, this set of instructions calling as a function with parentheses. And then you have okay, a function is something that usually has inputs, that's some processing and some outputs. So in this case here, let me draw something. So we have think of it as a box, black box, that's the function, then we're going to give something as input, we're going to, it's a function is going to do some work. And then it's going to give you back some output, something back to you. In this context, the function is get element by ID. And it needs to know first as an input, what do you want to get? What's the ID of the element? So I have to provide it, okay, so I'm going to go here and give the exact same thing I typed for the ID here. So I'm going to say first dash paragraph, but there's a catch. If you want to specify something literally the sequence of characters, you have to add the quotes either double or single surrounding the characters. If you don't do that, the programming language JavaScript will think it's a reserved word or something special that has been defined. You notice that how I type document, get element by ID with no quotes, that's because it's a special thing. So that's why we need to the quotes here. So we are asking literally, I want you to use the characters F, followed by I, followed by R and so on. Okay, now this function here gets this sequence of characters as the input, okay. So that's the input right here. That's the input. Now the processing that it's going to do that we don't have to know exactly how it does it. It's a black box is it's going to go through the document and find the element that has the ID plus paragraph, it's going to turn out to be this one here, right. So it's going to hold a reference or a hook to that. Once it finds that it's going to give that back to you. And that's the output of this function. So this is going to be the output here, the element itself, the paragraph element, okay. So you can think of this whole thing here as the whole paragraph element that's given back to you, okay. So visually, you can think of this whole thing here as the E. If I copy and paste it, visually you can think of this as being replaced right there, okay. And then through that, we can change some properties of the element. In this case, to access all the CSS properties, we access the style attribute. We can say dot style. Now I noticed this dot is something that means whatever on the right belongs to something on the left. Something on the left here means the P element. Something on the right is the style object. And from that style object, there are many CSS properties, one of them is background color, oops. So you can access it through dot background color. Now notice when we do JavaScript, we don't use background dash color. We use what's called camel case, okay. So basically, you take the every other word except the first will have the first letter capitalized, okay. Now if you just say it like this, you can think of it as is it returning to you what's the current background color of the paragraph, which is black, right. So if you think about this whole thing here, think of it as returning the word black as a string because you need quotes. Now we need to change that. How do we change that? To change anything, you're going to use the equal sign. So what you're going to do is to the right hand side, you put an equal sign, and then you give the new value. For example, if I want, maybe I want a color light blue, let's see if it exists like that. So it does exist. So you can see right away it changed on the right hand side. But the person who just got here, I am doing some work on the source code we've been working on, and I face the link to the zoom chat, that's the repository source code. Anyway, going back to what we are doing, usually we add a space between the equal sign here just because it's better for us to read, but you don't need that. You might also see whenever you have a JavaScript statement like this, that people like to end with a semicolon, just like we did with CSS, although in JavaScript it's not required, I always do it for the sake of never having to deal with issues if it's not there. Because if you don't have a semicolon, that could be someday the previous line might conflict with the next line, and something unexpected might happen. So that's why I always add it. So anyway, so the equal sign is this context is attribution, assignment, setting a new value. It's not comparison, okay? So you might confuse, but if you want to compare something, if you learn later on, that's usually a double equal sign in programming languages in general, not just JavaScript. But when you have a single equal sign, it's assignment of a value. The thing on the right will go into the thing on the left, okay? So what's happening here from the point of view of how everything works is the browser loads the HTML file and parses that and gives you the page, and then it goes through the CSS, applies the styles, and then finally it will run this script here, which is basically from the top to the bottom. Right now I just have one thing, but it's going to run that and immediately change the color that was black for the background to light blue. Now you might have noticed it, but it's actually doing it very quick. So you don't notice when first it's black and it turns into light blue. But to demonstrate that, I can add a delay of running this code. You don't have to know this right now, but I'm going to add a set timeout here of, let me say, three seconds. So after three seconds load, it's going to change the background. So one, two, three, it should change there to light blue. So you see that's really happening. If I refresh and try it again, it loads HTML, loads CSS for a moment to black background, and the JavaScript code runs after three seconds and changes, manipulates the paragraph element to have background color light blue. Now I'm going to remove that. So that's how we do use JavaScript to manipulate the document. Now going back to that object thing, just for the sake of refreshing our minds, I'm going back. This is the page that we just saw, let me make sure to save it. This is the page we've been working on, except I open in an external browser. And I want to open the DevTools again with F12. Where's that thing that we were working on? Like you lost it. Anyway, like I said before, there are many different ways of storing information in JavaScript, and what we did so far, we can have numbers like this, one, two, three, and we can do operations on them, like one, two, three, plus one, right? Now if you want to have an actual sequence of characters, you have to have the quotes like single quote, hello, and that will be literally the characters H, E, L, L, and O. Now if you type hello without the quotes, it's going to produce an error, because it's saying hello is not defined, because it's thinking it's something special. And in this context, it would think of it as what we call a variable, which is something we use to store information. So there's no such variable called hello, okay? Now if you remember from math, we have, you know, equations like x plus two equals something, and x is a variable, and it can hold a value. The same ways can be done with programming languages. Let's say I have two plus three, but I want to hold those values somewhere so I can use them later, so I can define what are called variables. For example, a equals two. In this case, I'm defining a variable called a, whose value is two. The equal sign is meant for attribution or assignment. You're assigning the thing on the right-hand side to the thing on the left. So now whenever I need to access, I need two, I can say just a, and it gives me back two. So I can have another variable, let's call it b, and assign the value three. Now the space here just for the sake of readability, you don't have to have it. Now whenever I need the value three, I can use b instead of writing three. So now I can do operations using the variable names. So whenever I need the value a variable holds, I can say its name, like a is a variable given back two, b is a variable that gives back three. So if I do a plus b, that's what? a is two, b is three, therefore you can think of it as the a becoming two there and b becoming three, therefore the result is five, okay? Now of course we can hold other things in a variable, not just numbers, we can hold strings of characters. For example, I want to hold word one equals hello as a string, so remember I add the quotes. So whenever I need hello, I can say word one and it gives me back hello. Now if I say word two equals world, whenever I need the word world, I can say word two. And you can even try to add them up, what would happen if I type word one plus word two? It actually combines the two strings together into a single sequence of characters, hello followed by world. If you want a space, you can actually plus a space like this, so you can add things together. So the quotes space is basically a space character there. So it would take the value from word one, which is hello, and it would combine with the space, and it would combine with the value of word two. So that's variables. Now going back to the object thing so we can refresh, right? Object, think of curly brace, that's object. So I can have an object to represent a person. So the object can hold information or attributes of a person, like the name, and to do that, we always write key value pairs, separated by a colon. So the key here is the name, because I want to hold information for the person's name, and then equal sign the value for that. Let's say John Doe as a sequence of characters, under quotes. Let's also add another property. I can do that by separating existing property value pairs with a comma. So I can add a comma here and say age equals sign, let's say 40. So now that you learn about variables, I can actually hold this object in memory in a variable. Let's call this variable person equals like this. And for the sake of readability of the code, I always like to add a space between the equal sign and a space after the open curly brace, before the closing curly brace, after commas, after colons. So I just think it's easier to read this way, but it's not necessary to add all that spacing. Anyway, press enter. Now whenever I say person, I can get back that object that has attributes name and age. Now I might be asking, is it possible to access just the name John Doe, like one of the sequence of characters for the name? Yes, it's possible. So the way we do that is with a dot. So if I do person dot name, I can get access to John Doe. Remember you saw the dot before when we did document dot get element by ID? That's the same concept. So the thing on the right belongs to the thing on the left. It just happens that person is an object, therefore I can use this notation to access some data within the person object. In this case, access the data by the property name. So when I say person dot name, it's going to go here and say, okay, this is an object, therefore I must find the label, right, called name, which is this one, and give back whatever is on the right hand side of the colon, which is John Doe, this sequence of characters, this string, and that's what you get back. Now if you want to access age, how would you do it? Well, the name of the property is age, the variable that holds the object is person, therefore you say person dot age, and you get back 40. So that's what's going on when we do document dot get element by ID, we're actually accessing something from the document object. Now if you want to find out what's in document, maybe you could try just typing document enter and you can expand it here and there's a lot of stuff. So it's basically the document itself, and you could try saying document dot here and you can see all of these properties are in that object. Now some properties are not just attributes or things like a name of a person, age and so on, they can be things a person, the object can do like talk, walk, you know, do all the necessities, hygiene necessities, that kind of stuff, and for those there's a kind of special kind of properties, and in this case, when it's a, they're called functions or instructions, set of instructions, but in the context when they belong to an object, you're often here the term method, okay? So a method is just a function that belongs to an object, okay? So get element by ID, it belongs to document, but it's also a function of this document object. It's a method, okay? Now a function is a set of instructions. So it needs, it's been laid out somewhere, it's written, hey, this is a function, and if somebody tries to call on this function, that is execute the function, run through the instructions from the top to the bottom. If they want to do that, they have to add parentheses next to its name. That way I'm saying, hey, call the function get element by ID, okay? And if the function requires an input, like I told you before, it has input, processing and output. In this case, it needs to know what's the ID, so you have to pass the ID here, like first paragraph. And then finally, if you do like that, enter, it gives you something back, and that's something back is the element itself, the paragraph element. So as you can see, a return to me that, and I can even hover over this, and it highlights in the content for me. So that's what's happening. Okay. Now let's do something more back to VS code. Now that we got some more understanding of the JavaScript programming language. Let's say that I want to go here, do you see, I want to add a button here, after the paragraph, let's do that. So to add a button that you can click, that's the button element. So angle brackets button, and then add some label, like click here, backslash. Close it with the closing tag, and you see the button there I can click. Now this button, I want to do something when I click. In this case, I want to have the code that we did just now to be executed only when we click, not automatically. I don't want this to be changing right away when the document is loaded. I want to first click the button. And upon the clicking of the button, I want to change the background color of that paragraph. Now this is called an event, a click event. There are many kinds of events. Okay, there's a click event when your mouse pointer goes inside an area of an element outside. There could be a submission of a form and many other events. Now how do I handle an event? Well, let's go here. First, before I do that, I want to comment out this code so it's not executed. Now it's called a comment in general in programming languages. If you're using VS code, you can press control slash and it will comment out the code. So basically the computer ignores commented out code. Now to comment a code in JavaScript, one way is you add slash slash at the beginning of the line or before the code that is to be ignored. Okay, so either here or here doesn't really matter because there's nothing between the spaces that matter. Okay, so I would know that code for now. I'm going to go back to that later. Now let's go here to the button. So I want to add an attribute here to handle the click and that's called on click attribute. Now the value here has to be the name of a function that will have the instructions of what to do when the button is clicked. Now the name is arbitrary. You've got to figure out a name. Let's say change background, something like that. I use camel case naming convention. Okay, by the way, the function name, don't add any spaces. Okay, it has to be together. If you need to separate things, usually we use the camel case convention, but obviously you could do underscore, but that's not really what JavaScript people do, but that's what they do in other programming languages. Anyway, like that. And then because it's HTML, raw HTML got to add the parentheses because when you have functions and you want to execute a function, you need a parentheses. I always remember function parentheses to execute function parentheses. Okay, now with that defined here, we got to go to the JavaScript section and define that function. The way you create a function or define it is by saying function keyword space, the name of the function in this case, change background, which is the same name I gave to the on click value. Now, because of function, we need to define the inputs. And to do that, we add parentheses. Now, usually if we do have something we need to receive as an input, we would separate them with a comma like this, as many as we want, because I don't have anything. I can just leave it empty. No inputs necessary. And then finally, we have to define the body of the function between curly braces. Basically, those are the instructions there are to be executed when you call this function. And the instructions got executed from the top to the bottom. Okay, so you can have instruction one here, and then another one there, another one there, so on and so on. So the curve to run from the top from the beginning of the curly brace, do this, and then we'll do that, and then we'll do that and when it reached the end of the closing curly brace, it will stop the function is finished. Okay, so the instruction I want to add here is actually the code that we had before. So I'm going to take this and move inside the function body inside many between the open and closing curly brace. So to do that on VS code, I usually like to do alt, up, arrow or down arrow to move around, but you can also cut and paste with the selection. That's also okay. I'm going to uncomment this with by removing the slash slash. When I uncomment the code, it will be understood by a computer and recognized again. So notice how nothing is changing there like before, and that's because it's been placed. Nothing is happening. All that's happening here when the document loads is that a function is defined. When a function is defined is simply a set of instructions that are just there. They don't actually get executed right away. The only way to execute these instructions for the function is when you call it and to call it, you have to say its name. For example, after the definition change background and then the parentheses that way it's called. It means hey, I want you to go to the definition of change background and call upon all those statements that are defined there. And you can see it's now light blue again. But I don't want to do that right away. You actually want to do this when I click the button. And to do that, I have to add the own click attribute to the button here and then add the function with the parentheses. Now if I click, watch what happens. It changes the background color. Because when I click the button, the function associated here written in the young click is called and it goes here line 42 and executes that. Okay. Let's say I also wanted to change the color of the text. How would I do that? Well, very much the same way except the property is going to be just color. Let's try it. So first in JavaScript, you have to say, select or target the element find it. Okay, let's find document. Please help me find the element. So get element by ID. The ID is a string first paragraph. That's the input to the function. Now it acts as dot style object. Now finally dot color. And to assign a new value equal sign. Then what's the new value here? Let's say I want to make it. How would I look to got light blue. Let's try black. And usually I had a space. There just for the sake of readability. And I like to add a semicolon at the end of a statement to mark it as finished. Okay, let's try it out. Click here. Now the color text is black as well. Again, a button click call change background. Go here from the top first to change the background color to light blue. After that is done, find the paragraph again. Go over the style and the color. Assign a new value equal sign assignment attribution to black. Now let me show you how I can change the text content of an element. During the same way, first you find it document dot get element by ID parentheses function call. What's the element ID quotes first paragraph that this whole thing will give you back the P element. The P element has the style object dot style. And then finally, actually, sorry, that's not the style right that's the text content. So it's dot text content, not style. So it has an attribute called text content. And if you want to change it, you have to use equals sign. Let's say hello world with quotes. So if I click, the text also changes to hello world. Okay, now I might notice I'm always repeating myself here. Always finding the element from scratch. So this is a good candidate for a variable, meaning okay, I'm every time I asked the document to find it and the document is doing the fetch, you know, seeking that that element three times. Can't I just do it once and just hold a reference or hook to it. Yes, so let's make a variable. So if you remember, you need to give it a name. Let's say paragraph element. That's the name of my variable equals sign. What's the value on the right something when I hold to memory. And that's actually document get element by ID with the first paragraph. Like that. So I usually like to add a space before and after the equals sign. Now, because we're dealing we're not in the browser console, I'm actually in JavaScript code. Whenever you define a variable, it's always best to add a keyword here that is called const. And that's part of the language syntax, because variables can be defined in different ways. And if you define a variable to hold something, and you don't need to change that. That what's inside again, that's a constant variable. So I can use const. Now, if you need to change the value later, let's say I for some reason I want to change my mind. I want to not hold this. I want to hold something else. And I would reassign paragraph element to something else like document get element by ID, another paragraph or something. In that case, if you want to reassign the variable after the first time, you would have to use let. Okay. And you might also see var, which is the traditional way of defining a variable in JavaScript. Okay, but for the most part, these days, you want to start off just with const. And if you get an error complaining, just change it to let. Anyway, now that I define a variable, I can use it anywhere I want to access this paragraph element. So whenever I see the same expression repeated, I can just replace that by the way I use. I highlight this, I press I'm on Windows, so I'm pressing control D to select the next one and control D to select the third one so I can have multi selection and visual studio code. So I can type here paragraph element, which is the name of the variable. So that whenever I need to access this that was held by paragraph element variable, I just say its name. That's why we don't have quotes there because something special. It's not literally the sequence of characters P, A, R and so on. It's actually holding this thing. So whenever you see paragraph elements, it's actually going to be visually substituted with that. And the benefit of a variable here is when the code runs, it goes through the finding right to find the element line 42. And then the next time line 33, it's not finding it again, actually, it's not doing the same operation again. It's just using the reference that we already have to the element. So that way, instead of always from scratch, you find the element, find the element, find the element three times like we have before. We only have it once in line 42. Okay, and then whenever you change the code, it's always best to test it to make sure it's still working. So let's see if it's still working there. I'm going to click here, and I see it's still behaving as before. No problems there. I didn't break anything. Okay. Now, you notice I wrote JavaScript in the same files HTML, but that's not usually the best practice. Usually people write in a separate file like we do for CSS. So let's show just that. So I'm going to go here and create a new file under SRC. Let me call it, let's say index.js. Because I usually want to tie that to the index file only instead of doing something global. Okay, let me right click that, split down so I can see it at the bottom, and I'm going to go back to index HTML at the top. So what we want to do is cut the code for the script, oops, between the open and closed tag, and move it to the file index.h.js. Now, in order to kind of link like we did to CSS, you got to go to the script tag, the open tag, add the attribute SRC and index.js. Now, if I click there, it's still working. Okay, and you can remove all these extra space and new lines. You don't need that, but make sure to have the closing tag there. That way, what happened here is the script is defining an external file, which is called index.js. And this is the path to the file since I know it's the same directory as index.html can use relative path. And as you can see, it's still working. If I test it again. And if I go here index.js, just for the sake of sanity check, change this to red, and it clicks, it makes any red, so it's actually running from the other file. Let me revert that. Okay, so I think this is good for this session. And I'll see you in the next one.