Javascript Crash course: Line By Line AI notes

1. Welcome to the course!: Hi there. Welcome to my Java Script cross course. And this class will cover the basics of JavaScript, including variables, functions, arrays, objects, and dam manipulation. This course is perfect for beginners or anyone looking to refresh their skills. No prior Javascript experience is needed, just a basic understanding of HTMO. As we go through each line of code, you will also get detailed explanations through I generated slides that break down everything you need to know about each line of code and the course. By the end of this course, you'll be able to build a simple interactive web application and showcase your new skills with confidence. Ready to dive in. Let's get started. See you in the first lesson. 2. Introduction and setup: T. Welcome to this introduction video, where I'm going to introduce you to JavaScript. We're going to learn how to declare variables, functions, work with objects, surveys, and at the end, we're going to have a simple example of dom manipulation. So after before going through all these topics, we need to set up the development environment. First, you have to download VS code, the code editor, called VSCode. You can go to your browser and navigate to this UDL. Code dosual study.com, slash download. And then you can download VS code based on your operating system. After downloading and installing vis code in your system, you can open it, and before writing any code, we need to install an extension that will help us on our development journey. So you can go here to the extensions section. And search for live server extension. All right. This is the extension that I'm looking for. I already have it installed, so you can install it. And once you do that, can I have this button right here that says go live. Don't click it right now. Before doing that and going live and running the server, using this extension, you need to create an index dot HTML file. You can click on this button right here and create a new index dot HTML file. Already have it there. And 3. Javascript: variables, functions, arrays, Objects and DOM manipulation: Now beside the index to HTML file, you need to create the basic HTML structure of a web page. After that, you can run the server. Let's get started with our code. The first thing we need to have in an HML page is the dog type element, write dog type, and then set it to HTML. Like so. I have type over there. Dog type HML. If you want to learn more about this element, you can check this slide right here. As I said, on the beginning, every single line of code has an information slide that contain information about that particular line of code. So after that line or after that HTML element, we're going to have the HTML element here, Write the opening tag. This is called open tag, and this is the closing tag of an element. And here inside the greater and less signs, you're going to have the name of that element. In this case is HTML. Again, you can learn more about this element on the slides right here. Now, inside this element, side the opening or between the opening and closing tags, going to have our page elements or our page structure. So in every page, we're going to have a head element inside the head, we can put information about the page like add title, title element, the title of the page. I'm going to say something like Javascript introduction, introduction. After the head, we're going to have the body element. Again, opening and closing tags. All right. Now we're going to introduce you to the fundamentals of Javascript. Now, to write JavaScript code, we need a HML element that is called script like cell. Inside the opening and closing tags of this script element, can to have our Java script code. The first thing we're going to learn is how to declare variables. We can declare constant variable is using the constant keyword like so. For example, let's declare a Pi variable and set its value to 3.14 or without any units, 3.14. This is a constant, which means it cannot change. Constant variable cannot change. Now, if you want to have a variable that can be changed, and what I mean by can be changed is that, for example, here, I can have Pi, and then reset its value to, for example, five. This is not allowed, and it won't work. Currently, nothing goes wrong here. We don't have any errors, but in reality, Javascript won't allow you to do this. In order to do that for a variable, you have to use the let keyword and declare the variable, for example, here, mess message variable. Massage can be changed, so we use the let keyword and going to set its initial value to, for example, hello JavaScript. Now, as I said, this variable can be changed. You can go here and change its value to for example, How there. Now this is it for variables. Next, we're going to have logging or logging information to the console. The console, if you don't know what the console is, it's our browser console. Currently, we didn't run the server, so I'm going to do that. So click on press the button here, Go Live, and it will start a server, live server on your local system. And once you're here, make sure to open the inspector, And then, this is the counsel. Now, side here, can I have a place where we can print information. Usually, this counsel is used for debugging purposes, you know, to tackle some errors or to find an information about the code we're running. So I'm going to just show you instead of talking. I'm going to console the variables that we have declared. Can console the Pi variable. So use the console object, and then inside this subject, we have a lot of helpful methods. And one of them is the log method. Here you can log any variable or any data you want. You can to log the Pi variable. And then I'm going to save this. Now, if I go to our browser side the console, you can see that we have the value of the Pi variable. Now let's go ahead and see the value of our message variable. As you can see here, we declared the initial value of the message variable is hello Javascript, but then we reassign it with another value, hello there. So again I see now it's final value. As you can see, it's hello there. So by changing the value of a lead variable, you're replacing actually the variable value. This is it for console logging. Now let's move on to lets see functions. Now, it's alar functions. We're going to use the function keyword. We're going to name this function greet. And this function is going to receive an argument. Arguments can be placed inside two parentheses of the function after the name function right there. These are two parentheses. And this is the argument name. So this get function is going to greet a person using its name. That's why we have an argument name there. Inside this function, use console log like so, and console log the name. All right. Now, if I save this, nothing will happen. Because we have to execute the function. To do that, we call the function, and we add two parentheses like S. Now, passing the name argument. For example, James, save again, you can see that we have James. Actually, this function so greet James in this case. I'm going to to remove the console log from there. And replace it by the return keyword, adding a literal string, which will help us to inject some javascript code. G to see that in just a minute. G to say hello. Come on then going to inject a avascr variables using the dollar sign and two curly braces like so, and still inside the literal string. Now inside here, we can pass any variables we want. In this case, I'm going to pass in the name argument, which is also a variable. Now, I'm going to save this because we removed the console log from here. Now we cannot see the result of the Crete function. So we need to put the crit function inside a console log. So write console log, and then execute the Crete function, cut it from there and execute it inside the two parentheses of the log function, like so. If I save this, you're going to see the result of calling the greet function, which is hello James. That's it for functions in JavaScript. Now let's move on to another topic. After functions. Let's work or let's learn to work with objects. Now, to declare an object, while objects can be assigned as values for variables. We can declare a variable, a constant variable using the constant Qard. For example, name this variable person. Now, we can assign the value of this constant variable to an object. Objects are a great way to organize information or data. So If you want to learn more about objects, you can check the slides right here. Before I save this, I'm going to comment it saying declaring an object. Right? I'm going to save this. Now inside this object, going to have properties. The first property is the first name property. These are custom properties, so you can name them whatever you like. Now, instead of setting the value of this property using an equal sign like so, we use collins to set a value to an object property. Now, after the col, we're going to have the value of the first name property, set to James. Then we can add as many properties as we like to this object, but we have to separate between properties using a comma, like so. Then we're going to have last name property, and we're going to set its last name to Wilson. Another comma right there and set the H property to 13, All right. And even objects can have properties set to a function. So properties are like variables, but, you know, the declaration of these properties differ from usual variables in Java script. So to declare a function or a method inside this object, First, you write the name of that function, for example, full name, just like any other property. But the value of this property is going to be a function declaration. We can declare a function using the function keyword, like so. Or actually, we can even use more advanced way to declare functions. Instead of using the function keyword, we can use the arrow function structure. So you just write two parentheses like so, opening and closing, and then add an arrow created by an equal sign in a greater sign and make sure there is no spaces between them. This is an arrow function. Then add two curly braces where the code of this function is going to be executed. Site this function, going to use the return keyword, going to return a literal string and going to inject this first name. This keyword refers to this person object. If you want to console log this keyword, you're going to have this entire object printed in the console. So, we're selecting this current object using this keyword dot first name, so we're accessing the property first name of the person object. So I'm going to have the first name, and then I'm going to access also the last name. So this dot last name, going to add curly brace there. All right. Now I'm going to save it. And now let's see these properties printed to the console. Going to access our object properties and methods, and I'm going to print them using the console log method. So Console log can select the person object and going to access the first name property. Now inside the browser, you can see right here says James. So the last output there refers to line number 35, which is our orient line where this console log exists. All right. We're going to have another console log, where we're going to execute our full name function. We can do that simply, just like we call a property. So go to full name property. But this time, going to add two parentheses, just like we execute a function and safe. And the last output, it says undefined defined. Now, why we got this. This is logical and should be like that because we're using the aro function syntax. And the o function doesn't have this keyword. So return to our basic function declaration using the function keyword. Remove the oral from there, and that's it. I'm going to save this. And that's it. So make sure to change that to the function declaration, like so. Now if we see the results, can I see James Wilson output it right there on the browser on the console. All right. Now, let's continue. After working with the objects, let's go ahead and work with arrays. So how declare an array? Again, we declare a variable first, and let's name it fruits in set it equal to an empty array. This is how we can declare an array with square brackets, opening and closing square brackets. So this is an empty array right now. To make it not empty or to add some data to this array. We can add the data to this array in the shape of items, separated items using a comma, right there. You can add strings, numbers, whatever you like. Here I'm going to add strings, names of fruits like apple, banana, and cherry. All right. Can I save this? And now, let's go ahead and access the array elements or items. Can I use console dot log to see the array item on the console. And I'm going to select the first item of this array. So add the name of the array, and then add square brackets, just like so, inside the square bracket, you have to enter the index of the element. In arrays, we start with zero as the index of the first element. So we start counting in programming in general, we start counting from zero, zero, one, two, 34. Apple have the index zero. So if I save this, we're going to see that we have Apple rented on the console. Right. If you want to get banana, you can pass in the index number one. And there you go. Banana. Now, let's continue. We can also console log the entire fruits array. So pass in fruits like so, I'm going to have array right there. With the three elements. Gas. These are the index index number zero, refer to the apple element number one to banana to cherry. You have here the length property, equal three. You can also print the length of an array using Well, using the property or cons aalong the property length, as simple as that. In there, you're going to have three. And this is the length of the fruits array. All right. Let's continue now, and going to work with some array methods. Let me add a comment tier let's say using array methods, using array methods. We're going to start with the first method. First, we're going to have to use the fruits array. And we're going to call, as you can see here, VSCode has given us hints or yeah hints about all the array methods that can be called or used on an array. Every array have the same set of methods. This time, I'm going to use the pop method. The pop method removes the last element. In this case, going to remove this element right here. So if I call the pop method, like so, All right. And to see the result, I'm going to use console log. Let me scroll up, and I'm going to console log the fruits array. So this pop method, it will overwrite the array. So we can console log the fruits array, and we can see that it only has two elements, apple and banana. So the last element has been removed. So, you know, be careful of using this method because it will override the initial value of the array. Now, the second method is a method that will help us to look through each element of the array. This method is called for each. Now, this function, it will accept a function callback as an argument. So you can pass in function declaration, you can declare function like so here, but without a name. Make sure not to use not to name it because it's just a callback function of a method. It will run when we execute the code. Here, you can use the function keyword, or I think it's time to use the Aerosyntax. Now, this method, it will get two arguments, the item of the array, so it will loop through its item here, I name it fruit. And every time it will, you know, the fruit argument is going to have the value of one of these elements, it's going to look through each one of them on order. So the second argument is the index of that element inside the array. Now, inside here, we can cons log the index of the element. That's a colon. By the way, you can use the plus sign to concatenate strings and numbers together. After the calling, we're going to have the fruit fruit name or the fruit array element. Now, I'm going to save this. In the browser, you can see that printed the elements of our array. Zero index refers to the apple element. We have here Index one banana. I hope that you saw how d f d function works. L et me just check if the browser is in its place. All right. All right, now let's continue. For learning for each here, going to learn how to create an array of objects. So that's very helpful to organize our data. I'm going to use the lead variable here, and I'm going to declare a constant or lead variable with the name students, can to set its value to an array just like this, and decide this array we're going to have an object. This object is going to have a property. The first name, the first student's name is Alice, can also have an age property set to 20. Now can add more objects. Let me just adjust this array to make it more visible. Going to separate between array items or elements using a comma. It's the same thing even with object elements. Add the comma there in the second object, the same properties name for this one is going to be Bob. Going to have a S 22. And the last object, going to have the same properties name for this one, it's going to be Charlie, and going to set the age 223. Right. This is an array of objects. Now, we can look through each object again using the for method, but on the students array. So write students F. I'm going to print each student name and H. So if you think that you're capable of doing this in your own, you can go ahead and try it. So F, going to add an arrow function as a back function. And this black function is going to get the student. And you can add the index or just, you know, don't need to add it right there. So we have the students. That's what we care about. And side here, going to use console log again. Sorry for that, Consol dot log. And I'm going to take the student argument. And don't forget that the student argument right here represents an object. So we're looping through each object on this array. And each object has properties, name and age. So I'm going to consel log the name property, as you can see, VS code given us the properties of this student object. Name. And then I'm going to concatenate it with a string that says is with the space here in space in front of it, and then add another information about the student, which is the age. And after the age, I'm going to say years old. Okay. Now in the browser, as you can see, it will print all the information about our but it didn't. I don't know why it says 823 is not defined. I made a type of there, sorry. So you need to add a column there. Well, I need to do that. Now you can see the result. We have three elements or three students inside this array, and we have printed three strings or three phrases about these students or introducing these students. All right. Now let's move on. And this time, we're going to learn how to use object methods with arrays. So after the four method. I'm going to declare another lead variable, name it names, and we're going to take the student array and use another method called map. The map method is just like the four H method, but with a simple difference, which is that the map function is going to return an array and is going to be assigned to the value of this variable. So let's go ahead and see that in action. I pass in a callback using the aro syntax. This one also is going to get the student or the array element and the index. I'm going to put the index there, but we're not going to use it. Inside this co back of the map function. We're going to return, and we are obligated to use the return statement right here. I'm going to return student dot name. This will create a Uwara with only the names of students. And you can see that just a second. I'm going to say this and outside the map function, I'm going to use Csle dot log and Csle log the names variable. Now, in the browser, you can clearly see the array with only Alice Bob, Charlie, which are the names of our students. So we have created an entire new array with only the student's name. This is how you can modify arrays, and actually, the map function is very important in Java Script, and you can do a lot of things with it. So now we reach the final part of this lesson, which is dom manipulation. So I'm going to add a comment here and say, Dm manipulation. Can I start by selecting elements from our HTML page. Let's go ahead and add some HTML elements inside our body. Outside the script there can add some elements like a title or our page. Uh, we can add the title using H one Element. I'm going to give it an ID argument or attribute, I'm going to set its ID to title. I'm going to say here, a law Java script. All right. After the H one element, going to have a button element with opening and closing tags. Don't forget that. We're going to have an ID in this ID, for example, change Title button. This button is going to be responsible for changing the title. Here, can I say change title. All right. Now we're giving them IDs because we want to select them using JavaScript and to select specific element inside our body. We need a unique identifier. That's why we're using the ID attribute. So can I have a DIF element. Again, you can learn more about these elements inside these slides. So can I add an ID for this dF content. That's it. Can have only three elements, H one, a button, a button, and a development. Now, under here, can I start manipulating our dome, can I select now the title element, a particular constant, and name it title element. And we're going to access the document of the page or the page document, and we're going to use a method called get element by ID. And going to get the title, which has the ID title. Well, going to pass in the ID title. All right. After the title, can I select our button element. Document, get element by ID, and the ID of our button is content. Finally, select actually, no. The button doesn't have the content ID, but it has the ID change title button. It's written same way. Can I copy it from here and paste it just to making sure not to get any errors. Now, after the button element, going to select the content element. I'm going to use document dot get element by ID, the ID of the content element is content. Now after selecting our element. Now, we want to change the text content of the title element. Actually, we need to change the title. Select the title element and access the text content of that element and change it to welcome to Java Script. Java Script. If I save this. Now, yeah, I forget to close the console. Can see here that it has changed to welcome to Java Script. If I remove this line and save again, to return back to its initial value, which is hello Javascript. Now, if I return back the line of code, it will change back to welcome to Java Script. Now, let's continue. We can even add an event listener to any element, but in this case, you're going to add an event listener to the button element. So I're going to select the button element and add event listener to it. This event listener method will accept the name of the event. This case is click. We're going to listen for the click event. Going to close that. And you're going to have a callback. Inside this callback, we're going to change the title element content. Again, sec title element text content property set it to title changed. Title changed with an exclamation mark. All right. Now, I can test this on the browser. If I click on change title, it will change to Title change. All right. I'm going to add more functionality to this click event. Going to select the content element that we have declared here. And I'm going to Change the inner HML property value. This inner HML will accept HML elements. It's not like the text content. So I'm going to show you in action. Going to add a literal string. Inside this, let me save it. Side here, going to have AML elements, the P element, which refer to paragraph element. And going to add the paragraph, and we're going to call the grite function that we have declared right here. Yeah, right there. We have the grite function, which accepts an name argument and return the greeting. All right. Go to pass in the name. For example, student, for example. Yeah. Let's put in your student. I will say, for example, or actually, it will exactly say hello student. We're going to save this. And if I go back here, click on change title, can see that the title have changed, and we have here hello student on the content development. All right. We can add more to this code. We can have a paragraph and another paragraph, if we want. Can I say some of your favorite fruits and we can pass in or we can use the fruits array. And we're going to use the join method. So the join method is going to join all the array elements, and it will accept the separator between these elements. So we can separate them using a coma. It will join them all as a string. It will return all of them as a string. So I'm going to save this. Before you are running or seeing the results, we're going to add the final paragraph. Again, if I'm not explaining things well enough, you can check the slides right there. So going to add Korean students. Students and going to go to the names array and join all the objects and separate them with a comma. All right. Now, inside our browser. We can click here, change title, and you can see the three paragraphs or three phrases. First says, Hello students. Here, some of your favorite fruits are apple and banana. We have only three because we have used the pop method, which overwrites the array value. Right? Now, we also have this phrase that says Korean students, Alice, Bob and Charlie. The names array that we have declared right here, using the map method.