JavaScript From Scratch ( Part 1 - Beginner Level)

1. What Is JavaScript?: Hello, friends. I am Kumar und, and you are watching another one of our training courses. In this course, one of our teachers will teach you. Teachers can be different. We will choose the best teacher for the courses. So please share your thoughts with us. I won't take more of your time. This is you, and this is misses Saman Mazdi Shariff hbati. Thanks, mers. Hi, everybody. My name is Sama Ne Mashi Sheriff Ovadi and I will be your teacher in this course. Before everything, we need to know why should learn Java Script. Java Script is one of the most popular learn programming language in the world. And also, Java Script is the programming language of the web. If you want to design a website or a web template, you need to know about Java Script, and of course, it's easy to learn. In addition, to designing websites and web templates, you can use JavaScript to write applications for mobile phones, for windows, to design games using JavaScript, and many other applications. But one of the important usage of JavaScript is for web development. What is JavaScript? If you want to be a web developer, as front and developer, you need to know at least three programming languages of the P that are HTML makes the skeleton of a web page, CSS, that is the skin of your web page or webemplate, and Java script, that is the brain of your web template. Using Java script, you can define a reaction for every action of users. So if you want to be a front and developer or full stack developer, you need to know first, HGMNCss, to design your template and how it should look like to the end user. And then use JavaScript to respond the user's action. If you don't know GMNCss and you want to learn Java script, it may be a little bit hard for you to understand some topics in JavaScript. So if you already know about HTML and Css, even a little bit, you can learn Java script alongside with them as well. But if you don't know, I insist first learn them. What can we do using Jova Script. On the web, you can change CML content, styles, attribute values, show or hide your elements, and many other things that you can do using JavaScript. Even you can connect to the server and receive data from server and show to the users or get user data and send them to the server. If you're interested in Jovacript language, and you want to learn how to program using JavaScript language, join me in this course. 2. Day 1: Install JavaScript Editor: Hello, everyone, and welcome back. As we talk about Jova script in this course, you need an editor to write your programs in Jovacript language. There are many editors, even the free ones that you can use to write programs in Jova script. For example, we have Notepad plus fors, we have VSCode, and also many other editors as well. In this course, we will use VSCode to write our Jova script programs. If you already know about HTML and CSS, you definitely know about VSCode editor. Before everything, we need to first install VS code on our system. Let's see how to install VS code on your system, you need to first download it. To download this, search VS code in the browser or visual SDO code, as you see here in the result. Click on this link, and you see this page. Depending on your operating system, choose the right one, as I'm using windows. I choose the windows. Install it. The process of installing VSCode is really simple. Just click on the next pattern and you'll have your editor in installed, and at the end, you can see the environment of the VSCode to start working in VSCode for programming using Joa script language. To create a folder for your projects FI. For example, here, on MDS, I create a folder name JovaScy. And inside this, I create a folder name basic. And here in VSCode, you can select menu fi, then open folder. Then select the folder that you created for your projects, double click on this select folder or you can easily do this on your my computer. Here, write helix on your folder, Open D code. If you want to have this option, when you write helix on a folder in your computer, when you want to install the Vd, remember to check this option. Open VSCode. As you see, I have this in VSCode. And all my projects file can be placed inside this. Everything you create in the folder of your project, for example, let me create a text file. You see, I have this text file here as well. And if I click on this and pre slit button, I can remove this file from my project file, or even you can select new file from here or new folder from here, if you want to organize your files into different folders. We can use these icons here as well. Our project folder is redna. What else do we need? On the lift part here in extensions? Click. You need an extension so you can see every changes that you make in your TML files instantly on the browser. This is live server, as you see here. If you don't have these extensions install, on your is code, you can easily search here as live server and install this because I've already installed this extension on my viscode. I have the uninstalled button instead of the installed button. So we can easily click on install button and install this extension on your scope. What is the benefit of this extension if you have an install on your rescope? For example, if I click on this and create a new file, for example, main at HTM, for GML file and add some contain to my HTML document, for example, something like this, you can write click on this and open with live server, or in the satus bar here, click on, go live. Let me press this. You see, my SGML document is now opened in the browser. After this, after opening your HTML document in the browser, every changes that you make here, for example, something like this and save it instantly, the changes will appear in the browser, and you don't have to refresh this document in the browser. So til now to start programming. In Jova script language, we need an editor like VSCode, an extension like live server, and an inchML document that we can write our Jova script codes inside it and test it on the browser. Join me in the next part to start programming using Jo script. 3. Day 1: First JavaScript Program: Hello, everyone, and welcome back. In this do, we are going to create our first Jova script program. As we are working ova script on the Web, I create HTML document right now with the name main dot T in my project folder. To add Java script into your HTML document, you have different ways. First, you can write your JavaScript code, write in the head part of your HTML document using script element. Script element. Inside the script element between the opening and closing tag, you write your Java script codes. Another option here is writing JavaScript code. At the end of the body element. So here I add the script and press tape. And again, inside this, I can write my Java script code. What is the difference between writing scapes in the head part of your HTML document or at the end of the body of your HTML document? Placing scripts at the bottom of the body element improves the display speed especially when you have lots of scripts that you want to add to your HTML document. Because if you put them on the head part of your HTML document, displaying the content of your CML document will be postponed until all the scripts run for your HTML document. This is the cause of slow displaying in some web templates. Another point is that you can have any number of scripts inside your HTML document, and also you can put them both in the head part of your TML document or at the body element, or just one of them. Another way of using JavaScript inside your CML document is that define the JavaScript codes in a separate file, like the thing that we have for CSS files. The external CSS files. How, for example, here, I create a new folder called assets, and Inside the assets, create a new folder, for example, JS, for my JavaScript f. Inside this, I create a new file named main dot JS. The extension for Jovakt files is JS, and everything that you write Inside JS five must be Java script code. Instead of writing code inside the script element, I can make a link to my external Java script file. How using the script element here with SRC attribute? For SRC attribute, you should define the f path or the URL of your Javascript five. It can be absolute or it can be relative. Absolute URS, start with HTTP, and the relative URL doesn't start with HTTP. And the files must be placed inside your project folder. For example here, my JS file, my Jova script file is inside the assets, JS, so I write dot to go back to the root of my project file and assets and JS, and then main dot JS. This is the file path of my JavaScript file. And like this, I add this JavaScript file to my HTML document. Pay attention to here. If you want to go to the root of your project folder, you use one dot for one prier here. But if you want to go up just a folder, you can use two dots here. So one dot for root, two dots, for upper folder. As many as two dots, you add here, it means goes up and up and up to the parents to the parent of the parent and go up. But for here, I just need to go to the root of my projects folder. Okay. Now let's add some code in our javascript. Five. Here I use this Csole dot log if you want to show something. In the Csle of the browser, you can use Consul dog function in ovcript. For example, something like this. The message that you can show in the Console, it should be inside double quotation here like this, and you should separate the Jovi script statements using semi columns, like this. Let me save this and also my tale file and see in the browser. As you see, there is no change in the browser. So where we counsel dog message will be shown. I write, click here and inspect, then in the developer to, you have this I can as you see consul. If you click on this, you can see the message that is from console dot log. You can also write this statement here between the script element in the head part and in the body part. Let me paste this. Here and change the message and also here and change the message. And let's save and see the browser. And as you see, we can see the Csle of the browser window. For each browser, you can access to Cosle window using right ck and inspect and your Stame document. Then select the Cosle paint. The main usage of Cosle dot log is for debugging purposes. For example, if you have a bug in your JOS script code and you want to find what is wrong with your code, we can use counsel dot log and see the result in the Csole of the browser window. Anyway, this was our first program in Jocre. We will talk more about JoScre, statements and how to write a program using JoScrip in the next parts, 4. Day 1: Display information in JavaScript: Hello, everyone, and welcome back. In this do, we are going to talk about how to display data in JavaScript. We have different ways to display our information using JavaScript code. You can see different ways of displaying information in this table. In SGML, document dot, window alert or Alert, cose dot log. We talk about Cosle dot log in the previous video. Now let's talk about the other ways. I have my semel document here that I created in the previous do. First, I want to commend the script element in the head and in the body. I select this and press control slash on my keyboard to commend this. Also for this, Inside my Java script point, I want to show information using a different way. In addition to Cosle dot L, we have window dot alert. The function alert of the window object in JavaScript is used to display data in an alert box. The parameter that you pass to the alert function here should be placed inside a double quotation, or it can be an statement as well. For example, something like this and save and see in the browser. When my tail document loads in the browser, I got this message in the alert box. The thing that you see here is Allert box, and the way of displaying this box, in different browser is different. This is, and you see the Allert box, something like this. The alert box has a button with k. If you press, this message box or Allert box will be closed. And also you can see my message hello from Allert here. And if I press, it's closed. You can skip the window dot here. Window jo is a keyboard and point to the window object. Every function or variable that is defined in the window object, we can access them without using window keyboard. Here I can write alert instead of window dot alert and write my message inside the parentheses for this alert function. The message should be inside double quotation and something like this. Do not forget the semicolon at the end and see in the browser. The first message will be shown in the browser. And when I click, Okay, the second one will be shown to me. So You can use alert to show different messages in different condition to the user. And when you click on the ok, the message is gone, and the document will be shown to the user again. The next way to show a message. In Java script is using document dot. So document dot method write. You can write one or more statement expression inside this method. For example, let me write something like this. Before I run, I want to comment these lines to comment these lines. I select all of them and press control on my keyboard and slash key at the same time. You see all of them are commented. The comment in Jova scripts will not be run in the browser. So if you want to not run an statement in the browser, you can easily comment it. Or if you want to add an explaion for some part of your Jova script code, you can use comments. Now let's see ones in the browser. As you see, the message is showing here. Be careful. This method should only be used for testing. If you use this method, after HTML document is loaded, it will bled all existing HTML elements. Let me show this using an example, but I will explain this example more later. In my SML document, after H one element, I will add a button. Something like this. And in the opening tag, I add type button and add unclick event. I will talk about the events in JavaScript later. So do not worry about this and inside this. I can write a Javascript code. Something like this. Look carefully here. I have double quotation around this, so I can write my Java sip code inside this event. But if I want to write a message inside documented write, I need to use double quotation. But if you use double quotation here, it's an error. Why? Because I try to close my previous double quotation that is here and open a new one. It is an error. In this situation, I can use single quotation here and a message. Something like this. Now let's see I see in the browser. This is the button that I had here, and this is the message that I wrote inside my Minda JS file. If I click on this, now you can see that, all the existing HML is gone. So if you use document that's right after loading your HTML document, it will remove all the other HTML tags. The next way to show information using Jo script in your HML document is. If you want to use inner HTML, you need an element with the ID attribute. So for example, here, I add a P element with the ID test, for example, and I didn't add any content for this p element here, but instead inside my JavaScript file, I will write a content for this paragraph inside my HTML document. To do this, I need to access my element using JavaScript code. JavaScript has a method, so you can access the elements with their IDs. I use document that get element by ID. As you see, we have other git elements as well. Here, for example, by class name, by name and the other one. Here I need to get element by ID. Inside this, I should define the ID of my element in double quotation. What was the ID? I define it as test. Then I use inner SGM and property here, and equal sign, and I writing message inside this using double quotation. Now, let's say I see in the browser. As you see, this is the P with ID test. Let me inspect on this. As you see, this is the P element with the ID test, because I wrote in my Javascript part, to test the inner est element for this element, the content of this element is changed, carefully. Here, there is nothing inside this paragraph element as the content. Or if I write everything, for example, something like this, when the Joa script code runs, the content of this paragraph is changed. You can use this site to display different messages in different conditions to your users. Do not be worried about how or when you can use the different ways of displaying in Joscript, you will learn through this course, all of them. Thanks for watching, join me in the next part. 5. Day 2: JavaScript Variables - Part 1: Hello, everyone, and welcome back. In Dido, we are going to talk about variables in Jovisk. If you already know a programming language, you are familiar with variables. We use variables a lot in a program using any programming language. Why we use variables? Because we will need to store data values for later. In fact, variables are containers to store data values for different purposes. For example, you can see here the variable X, message, and variable point here. And these containers hold a value for each variable. In Jova script, we can define variables in different ways. Automatically means variable is declared when first used. For example, we see here. We also have keywords to define variables in Joacri. V, lead, and const. The syntax or the way you can use these keywords to define or declare a variable are the same, but they have some differences. When you use them to declare a variable. Declaring variables means creating variables. We use lead or a to create our variables. You can see the syntax for defining variables in Jo slip here using a keyboard. If you want to assign a value to a variable that you define, you should use equal sign. We call this sign assignment operator in Jo scrip. You can see the syn text to assign a value to a variable here. After you declare the variable, when you declare the variable. To define a variable. You need variable names, or we can call it as identifier. The variable names must be unique, and we have some rules to define variable names. When you define a variable in JoA script, it is sensitive to lower or uppercase letters. You can use letter digits, underscored and dollar sign in your variable names. But you can't start a variable name using digits, and also you can't use reserved keyboards in Jos k to define a variable name. For example, you can't use var to define a variable name or let or ct. These keyboards cannot be used to define a variable name. These keyboards cannot be used as variable names. As I said, we have different ways to define your declar variables in Jovi, using automatically defined variables that is not recommended. It is better to always define your variables before you use them. But if you want to use a, let or constant define your variables, they have some differences. But this is a route that you can choose, which one is better for you. If the value should not be changed, use cons to define your variables. We said variables, but the value should not be changed. If the type should not be changed, use cost. Wherever you can use cost, you can use let to define your variables. If you want to support all their browsers, you can use to define your variables. Now let's define variables and use them. I have a simple achievement document here. It has just one SML element and a P element to show results, for example, and script to reference my Jova script that is main Gs. Inside. Main that GS I have nothing for now. That's not some variables inside my Jova script and show them in the browser. As I say, we have different way to define variables in Joa script. The first one is automatically defined variables. Use set a name, for example, X, and is equal sign and define a value for this variable. And do not forget the sem column at the end of the light. This is called automatically defined variables. These defining variables may not be supported in older browsers. If you want to be sure that your Jovkit file will run in the older browsers as well, you need to define the variables using variable keyboards. Let me add comment here. If you want to add comment in ova skip code in a single line, you can use two slashes. But if you want to add a comment that is more than one single line. Instead of two slashes, you can use start for the beginning and start slash for the end of the lines of the comments. These comments will not run in the browser. You may comment the line of your code or add explanation to some part of your code using comments. Anyway, this is my variable, and I want to show the value of this variable in the console console that log. If you remember in the previous video, I said, you can use a message in the log function to show in the browsers console. You can also show your variables using log function. Just use the variable name here. I define my variable as X, and I use this. Let's say when in the browser. Because I said the value of the variable x should be shown in the cosle. I need to inspect here, right Klick and slip inspect and choose the coso to show the value of the variable x for me. If you don't see the console here, just click on this plus sine, mortal and choose console from here. As you see, I have 100 here, the value of the variable x. If I need, you can add more explanation using L. For example, something like this. And if you want to show in the like, something like this, do not forget the plus line here and say, now you can see the value of variable x is 100. Join me in the next part. 6. Day 2: JavaScript Variables - Part 2: Hello, everyone, and we'll come back. In the previous video, we start talking about variables in JavaScript, and we create a variable named X with the value 100 and show the value of the variable x in the browsers cose. Using Cosle. Now let's define the variables using variables keyboards. For example, I use the keyboard here. Then I should set a name for my variable. Do not forget the rules for naming variables. For example, here I choose Y as my variable name. And semicol. If you want to assign a value to the variable, you can do this when you declare the variable. For example, something like this, I define the variable z with the value 200. Here, I just define the variable. Y. But I didn't set a value for this. We can set a value for our variables later when we need them. For example, here, I can set a value for the y variable using assignment operator that is equal sign. For example, I set something like this, and also you can show the variable values using console dot log as well. Let me copy this from here. Paste here. I changed the name as y here. If you want to know this value belongs to which variable, add a message using double quotation here and a plus sign here, and also here for z, and let me add after this for y. Let's say one C in the browser. First, we have the value 100 for x, then the value undefined for y variable y, because here we just defined the variable y, but we didn't assign any value to this variable. When the value of a variable is not defined in Joa script, we have undefined as the value. As you see here, define. Then I have the value 200 for the variable z. After I assign a value for the variable y. Now the value for the variable y is 5.5. Anyway, we can also define a variable using lead keyboard. I use lead here and I so define a name for my variable, for example, we have the same rule for defining variable using lead and v. Here, I can assign a value for my variable. Or I can just define it and later assign a value to the variable. Let me just define this. For example, let B a ten, and now here I assign a value to my variable A, for example, something like this, and I also copy these lines to show the variable values in cons. F here and for here, we can see that, the first value for variable A is undefined. Because I didn't assign any value to it. For B is ten because I assigned a value to it, and after assigning a value to the variable A, the value for this variable is 20. Okay, Before we continue, let me format my document here using right lik and choose format document. It's better. I also want to add comment for each part here. Okay. Now let's know more about and led. For example, let me define another variable using VR keyboard, for example, X as test. If I want to assign a text value to a variable, I should assign the value in double quotation as you see here. Or I can use single quotation as well. The value for a variable can be a number, can be a string, and can be other types as well. We will talk about the data types or the values that can be assigned to variables later in this part. But for now, you just need to know if you want to assign a text as a value to a variable, you should define the value inside double quotation or inside a single quotation. I use semicolon at the end of this line. My point here is that I already have my variable x here, but I again define this variable here. Let me add this slide. Here and see what happened in the browser when I did this. The variable x at the first has the value 100. But when I define it again and sad the value tests, the value for the variable x is changed. Now let me do this with the let keeper. For example, here, I B a 50, and I want to show this in the browser. As you see, I have some red line here and here. But let me see this in the browser. As you see in a set of everything in the console, I have an error. I have a syntax error. And it says, the identifier B has already been defined in another line. Here I have let B, and here I have let B. So when you define the variable. Using the let keyword, you can't re declare your variable name in the same block. I will talk about a block of codes later. But just say no, if you define your variables using keyboard, you can redeclare it everywhere in your Java script file or in JavaScript code. But if you define your variable using led keyboard, you can't redeclare it in the same block. But you still can change the value of these variables. Wherever you want in your Java script code, and because I have error I just comment. These two lines using control slash on my keyboard. So to comment, just press Control and slash at the same time. And I comment here as well. Another thing about declaring variable is that you can define many variables at the same time and also you can assign a value for all of them when you define them. For example, I use both R and lead keyword, for example, I define my first variable as x one and set the value ten. For the next variable, I should separate the declaration with, and I can define different variables. After I finish defining variables, I use sem coolor. You can define your variables in one statement like these, or you can use lead to define the variables in one statement as well. Something like this. Also, you can define and assign the variables in one statement, if they have all the same value at the beginning. For example, I define the z one and assigning a value for z one. I define another variable z two equal s and equal s again, for example, z three, and equal sign here. Now I assign a value to this, for example, zero. Declaring variable like this is okay in JSC. If all your variables, when you want to declare them, have the same value, you can define and assign a value to them like this. Let me copy this and see the z values here. Save and seen the browser. As you see, all the z variables, z one, z two, and Z have the same value as zero. In summary, we can define the variables in jo script in different ways. First, as an example here, just assign a value to a variable name without using any keyboard or use v keyward here or use lead keyboard to define the variable name. One of the differences between and lid to declare variables is that if you define a variable using keyboard, you can redeclare this variable later in your code. But if you use lid, you can't do that. Of course, if you want your Java slip code, it'll be supported in the older browser, you need to use to define your variables. And one more point here is that if you define your variables like this, In your Java script code, it means you are using a to define your variables. In the other words, you do not need to define the variables. We also have another type of variables in Jova script that is cost. I will talk about constt variables in the next part. Thanks for watching. 7. Day 2: const in JavaScript: Hello, everyone, and welcome back. In the previous do, we talked about variables in ovo script and we left variables for this part. What is con variable? Cs variables defined using cons keyboard in jove. But when you define a cons variable, we cannot redeclare these variables and you have to assign a value to these variables when you declare that. Later in your code, you cannot reassign a new value to set a new value for these variables. It seems these kind of variables are constants, but they are not actually. These kind of variables just define a constant reference to a value to a variable. We use cons to define variables for different types, for example, to define arrays, to define objects, to define function and to define regular expressions in Java script. We can use const variables. Let's see how we can use cons in our Java script code. To define a cost variable, we use cost. After this, we should define a name for our variable. For example, let me set it as Pi, the number P, because this is a cost variable unit to assign a value to this variable. If I show this variable using console that like, let me copy this from here and paste here, just rename the message. And the variable name, you can show the value of cons in the console like a f, the variable P 3.14. Also, you can use const variables inside the other part of your code. But as I said, you can't reassign the const variables. For example, I can't reassign my const variable here to another value. Let's say one C. As you see, I have an error here. That is, assignment to a constant variable or even you cannot redeclare the const variables. For example, As you see I have an error here. Let me comment this line because it is an error. Save and see this in the browser. As you see, I have an error again here. Dntifier P has already been declared. So I cannot redeclare my cost variables. Another point about cost variable is that if you want to use a cost variable, you need to define it before using it. In summary, The difference between v, d and cons is that we can redeclare the variables that you define using v. And also we can reassign the value to them wherever we want. For led variable, we cannot redeclare them, but we can still reassign them wherever we want. But for cons variables, we cannot redeclare them or reassign them. We will have some more application of lead variables and cons variables later in this course. Join me in the next part. 8. Day 2: Data Types: Hello, everyone, and welcome back. In this sido, we are going to talk about data types in JavaS script. If you remember, we already talked about defining variables in JavaScript, and now We want to know which types of data we can store in each variable. Using datatype, we can define what should be stored in each variable. Data type is an important concept in programming. If you don't define the type of the data or type of the variable, the computer will not understand how it should work on each variable. So when Java scripts want to work on a variable, it should know the type of this variable. Have different datatypes in Java script. We can see a list of these datatypes here. We have a string, we have number, as you already know about it, Boden, big d or big integer, undefined null symbol and object. The object type can have different type as well. For example, the object itself, the arrays, and I will talk about the object and more complicated data types in the future parts. For now, let's see the other data types here. If you remember, we talked about how to define variables using t and const keyboards in the previous videos. Now I want to define different types of variables here. To do that, I want to define another Java script file here ne file. I call it data ties. Now I want to define my data type variables here. To define a type number in Jo script, you just need to define a variable using valid or cause and set a number value to assign a number value. For example, here I want to define a number variable variable X as t. This is a number valuable. As I don't mention any floating point for this number, this is an integer number. This is number in JavaScript. We can also have floating number as well. For example, something like this. 10.5 is floating number. Or sometimes we may call it as double number. If you want to define a string type in Java script, you just need to define it as something like this. For example, let me define the variable. First name as John. If you want to assign a value a string to a variable name, you should put the value inside a double quotation or inside a single quotation in Java script. So this is a string. Let me define another one, for example. Last me, something like this. This is a string as well. Let me fix this first name as well. I have mistake here. Another type in Java script is Bulen. Using Bulen you can define variables that can accept two values, true or false. Yes or no. But when you want to write code for ban variables, we can use just true or fats. For example, Let me define flag as true. This is a ban variable. Also you can have faults for Bleion variable as value two. Let me define another variable, for example. Let me define his number as false. This is a bleion variable as the We need bully and variables in different situations. For example, if you want to take a condition in our code. If something is true, if something is false, do a bunch of code. So we need these variables as well. So Tila, we define different variable datotype as number that can be, for example, an integer number or Loting point number, a string like for example, John, or something like this, and Wulian true or false for value. We have also more complicated variable data types as well, for example, object that I would discuss about this in the next part. But for now, let me show these variables in the console. Here, I add console dot log x, copy this line, sit here and change the variable inside the console dot log. Of course for these parts. First name here. Last name here. And this is number. I save this. If I want to use this have script file, I need to add a relation to my HTML document. Here, I click on my main DTM file, press Control C, then Control V, and I change the name of this as data type D. And I will let me close this and I will change this to data Type, and of course for here. And this relation should be data type dot JS. Let me save and see this in the browser using Open bit Life Server. This is my Java script file. If I want to see what I have in the console, I should right click here and inspect and here, this is Csole. And as you see, I have my data type values here. This is for life server. As you know, we are using life server to see our sim document. This is the Clef server. If I refresh this, I don't have that any A. Here in Cs dot log for now, you can see the variable values. One more thing about numbers in Java script is that Numbers in job script is always saved as floating point number or decimal numbers. So as I said here, double number, we can call it as decimal numbers and let me add floating point number. It's more obvious. So numbers even we don't define the floating point for them, or we define the poluting point for them. This point I mean here. They are saved as palating point numbers or decimal numbers. So if you want to work with a number as integer numbers without fallouting point, you should convert them and be sure that they are not considered as decimal numbers. One more point about datatypes, JOA script is that you can always change the type of a variable as you use them. What do this mean? Consider here, I define X with the value ten. The X variable here is a number variable. What if I here, set the value, for example, 14.34 x. And let me copy this line. Using control C here and control V. Let's see if there is any problem for this or not. In the browser, I have 14.34 X. First, this is ten, then is 14.3. And now let me assi string value to the X variable. For example, hello for x. Again, control C on this line and pacing here, save and C in the browser, C, first x is ten, then 14.3, then hello. In Joac there is no limit to change the type of a variable. As a result, the type of the variable can be changed during the run time. Let me add another example, for example, for first me here. This is a string. And if I change it, a string, let me copy this and here, let me set as true for this variable, and copy this and paste it here. Now in the browser, I have this versus John. Then the value for the variable first name is true. If you want to know, which value in a cosle lo belongs to which variable? You can add the name of your variable here inside double quotation in each cosle dot. For example, here X and double quotation, and then plus. The plus here means you add two strings together. They are not numbers necessarily. So using plus jova skin, you can add two numbers together or two strings together. And if one of them is of another type, for example, if you have string, Here, this is a string. This part is a string. But the second part of this plus statement is a number. When you use plus between a string and a number, it means connect to strings. The value of x will be placed here, and the result in the console is something like this x as ten. We can do the same for the rest of the console as well. Let me do that. I did the same for the rest of consult parts here, and this is what I have in the brother. Now you can see the variable name next to each value. We did the same for main Dates file as well. As you see here, this is my main Ds file for the previsto, and this is data types that I did the same for consult part. So I short, if you add any value to a string value or to string variable, it would be considered as string for this one. And for changing the value type, the data type, for each variable during the time during the run time, in Java script is called them as dynamic type. So pass in teacher number, then is a floating point number. Then it is a string. And here, first is a string, then is a Bogian variable. These were simple datatypes in Java sip. Let me talk about more complicated data types in the next part. Thanks for watching. 9. Day 3: Arrays- Part 1: Hello, everyone, and welcome back. In the previous do we start talking about data types in Jo screens. To continue, I'm going to talk about arrays in this part. If you want to store more than one value. In a variable in one variable, you can use array data type. To define arrays in Jovy skit, you should use square brackets, as you see here. The values for array should be separated with commas. The values that you want to define for array should be placed inside the square brackets. Each item, each value in one array is known by its index. Indexes in arrays are zero based. It means they start from zero. The first item in array is the item zero. The next item is item one, and so on. Let's see how we can define arrays in jobs. To define arrays in my data type digs file, I add a section using comment here. I will say here as arrays. Here, I want to define array. Array is like the other variables. When you want to define an array, you need to use the keywords to define a variable. We have led and ct. You can use each of these keywords to define an array, but it's better to use ct. For example, first, let me use to define my array. I said, for example, ages and We have different ways to define array here to set the values for this array. If you want to define an array here, we can use set the values inside the square bracket here, for example, 12 and something less. This is my array. I have five numbers in my in my ages array. As you see, each item is separated by comma from the other one, the commas. So the values for an array should be separated by. And also, you can show the array values inside the console dot log, as Let me copy this slide and paste it here and change as ages. Now let's see in the browser. As you see, this is my array values. I have different value of the same type in my array. So if you want to store the same type data, same type values. In one variable, you can use array. What if I show my array in council that using C dog, just the name of the array ages. That is ages here. Let me say and see in the browser. As you see, this is my array. So if you want to show your array in the countle like this, you should not connected with a plus and string inside console dot. As I said in the previous do, everything that you add to a string, using plus sign would be considered as string. And so here, the items inside the array are showing like this. But for the next console dot that I just use my array name ages, the items are showing like this. I I open this by clicking on this icon, you see, Each item is shown separately, the item zero, the first item, second, third and fourth. And also the length of my array will be shown here. And the other properties for array will be shown here. We will talk about some of these in the future as well but if you want to see your arrays in console dot log, like this, you should not add anything to console dot log parameters, like this. Look carefully here. As you see, the first item inside my array is the number zero. The index zero is for the first for the first value in my array. As I said, the indexes in an array are zero based. The first item has the index zero. And the second item has index one, and so. And the length here is showing the number, the count of the items that are inside this array. Here is five. It means I have five values in my array, and the indexes are 0-4. So the index number for an array will be from 02, the length of the array minus one. Here is 55 minus one is four. The indexes are from zero to or you can also access each item inside your array using indexes. As I say, each item has an index in an array. For example, here, if I just duplicate this line using old shift and down array key. Inside this, I add square bracket and set the index of the item that I want, for example, two. Let me save and see in the browser. As you see, the index two here, it means the third value in my array is 25, so I have 25 in here. If I just duplicate this line and instead of two, I said minus one, L and C, as you see, I have undefined. We don't have the minus one index for mi array, so it's undefined. The value for this item is not defined. When you have something like this in your Java script for a variable, it means the value for that item for the value for that variable is not defined. Or your Java script code cannot recognize that variable. If I said, for example, index six. Let's see what we have. Again, I have undefined. Why? Because I just have zero to five for the index number. I can't access the index minus one, or I can't access the index six. This was one first to define an array. We have other way to define the array as, for example, let me say cars, new. Array, Inside the parentheses, you can define the values for your array. For example, something like this. The value for this array have the same type. They are all strings, and here they are all numbers. Let me show this array in the Csle to using the cosle do cars and this is my array in the cosole. As you see, I have three items here and the len is three, and the indexes are 0-2. Sometimes you may want to define an empty array. You define your array, but you want to set the values for each item later in your code. We can use something like this. New y. Let me fix the name for this two. I have an empty array, a new array. I didn't define any value for my array, but later in my code, I can define items for my empty ray. For example, zero, something like this. Let me have counsel that like to F here, and after initializing a value for item zero, let's say and see. As you see, I have nothing in my array here, but here, I have this in my arr. Let's continue in the next part. 10. Day 3: Arrays- Part 2: Hello, everyone, and welcome back. In the previous, we start talking about arrays in JavaScript. Now, let's define our array using C Isd using R. Here I want to define my array using cons in and see what happens. ***** is better to define your array. Let me just copy these lines because I want all of them and paste it here. Here instead of where I say cost and change my name as well. Something like this. If you remember, we talked about cost in the previous ts and I said, we can't reassign a variable that we define using cost. But if we use let or v to define variables, we can reassign them. Reassign means defining a new value for them. Assign a new value for them. Here, I define my empty array two as an empty array actually, and I want to show it in the console but like first. Then I want to change the first item with the index zero as 13.5 and show the array again. Let's see in the browser. As you see, this is my array? This is my empty array that I defined here using cost. Let me add another here. For example, counsel, but, something like this. And now it's better. You see, this is my array here, and this is the first item inside the array, and the length for this array is one. It means it has only one item inside the array. What if I want to change The whole array itself. Here I said empty two as something like this. This is extra. Let's see and see what we have in the browser. As you see, assignment two, constant variable. The array itself is a constant variable, and we can't reassign or redeclare it. But we can reassign each item inside the array that is defined by cons as keyboard. Here, I can use this statement to define the first item inside the constant array, but I can't reassign my array like this. If I just copy this line again and paste it here and instead of item zero set item. One, save and C. I don't have error for that line. If I click on this, you can see, I will show them line that I have error for that line. This is what I have but I don't have error for this line. In result, you can define your array the array itself using C's keyboard in Java script. If you define your array using this keyboard, you can't reassign it like this. This line will throw an error for you. Let me add comment here. We'll show you an error in the browser. But you can assign value for each item of your array. That is defined using const keyboard. Between developers, it's better to define your arrays using const keyward, not using. The array itself is const. But the item inside the array will not be cons and you see, can you assign the value for each As a practice, try to define an array using let keyboard and see what happened if you want to reassign it, redeclare it, or change the value for each item of that array. One more point about the arrays is that it's better to use arrays for the same type data. But you still can have different data types inside one array. For example, let me define my array using. Cs here, for example, something like this for my array. If I want to access the items inside this array, I also need indexes for this array. For example, let me first show this array in the browser. Cosle something like this, and as you see, I have my array here like this. The first item is rows, the second item is tips, and the third item is 123, and the length for this array is three. You can use arrays in JavaScript to store the same type data in variable. But you still can use array to store different types of data in one variable. Joa script has no limitation about this, but other programming languages may have. If you want to as to the lint of the array in Joe script, you can use length property. Here, I say, Csle, but like flowers that lint. And if I say and see the browser, you see the number three here. Why? Because the flower array has lent T. This is three, and here I have three. If you want to access to the last element to the last item inside the array, we can use the length property or the index ay. But how, for example, I want to show the last element inside the flowers ay. Using this statement, flowers, which item inside the square bracket, I should define the index of the item that I want to use. But for the last element, I should say flowers that length minus one. Y minus one, because the indexes in the array are zero based. They start from zero, to the length minus one. So for the last item, I should access to the item n minus one. Save when seeing the browser. As you see, I have 123 as the last item here, and here in this array, the last item is 123 the index two. There are see much more topics about arrays in JOS grip, but let me reach them through the entire course. For now, you just need to know how to define array and how to access each item inside your array. Thanks for watching. 11. Day 3: Objects - Part 1: Hello, everyone, and welcome back. In this do, we are going to talk about objects in JavaScript. Object is a data type in Java script that we can use it to define real world things like people, animals, cars, and many other things. If we want to define object inside Java script, we can use different ways to define our objects. Using re debrass, using new keywor or using object constructor. To define properties in object, we use name, calm value, PE or key value PE. And different properties in one object, are separated by comma. You can't have the same property with the same name in one object. In short, Using objects in Java script, we can store different property of a real word thing in one variable. For example, for people, you have name, you have address, you have age, and many other properties, for example, gender, education, and many other things. And if you want to use variables for each of these property, it's a hard work to do. But instead, we can use objects to store different properties for one object, for an object in Jocret. So we can use one variable, and for that variable, define different properties and store each value for that property. Let me show the objects to you in action. Here, in my JS folder, as you see, I create a new five objects, and I also copy this M document and rename it using F two objects, and also here. And here. Set the reference to my Java script file objects here as well. My object file is empty for that. I want to define object inside this file. Suppose you have a register for. Create an account f. You want to get username, password, first name, last name, and other information from your users to register to create a new account for him or her. For example, let me define. Em, something like this, and for example. First name, last name as something like this, H as 20 and gender as male, for example. So we have different information for a person in our document or in our program. So here, instead of defining different variables for different property of my user, I can use objects in jo scrapes. The define object, you can use curly braces. Here I use cons, instead of a to define my object. So it's better to use cons to define your object. You also can use lead or to define the object. But it's better and it's common between developers to use cons for this purpose. After this, as we define a name for our variable, we should define a name for our objects to, for example, user, and the assignment sign that is equal and curly braces. Inside the curly braces, we should define the properties and the values for each property. Define them like this. For example, e mail is my property name and column. After the column, you should define the value for your property. If the property is a string, set the value inside a double quotation or single quotation. If the value is bien, use true or false as value. If the value is number, you don't need true or false or single or double quotation to set the value, just write the number here. I copy these email ledges here and paste it here. So I have a pair of name and value for my object user. And after this, I need coma. If I want to add more properties to this object, I use comma to separate the property names and values. So first name, John, last name, the value for the last name, age 20 is a number here and gender. Let me change gender as true or false male woman here and define the value here like this. And I add a clement true as male and false as I copy this clement or this line as. After defining my object, after the C braces here, I should use semicol This is my first object here. Using objects in Java script, you have a better organized code for your programs. Look at here, the definition for different variables for a person, for a user, and look at here that we group on the properties related our users in one variable. Here, if I want to show the information about one user in the Cosle dot log, I should use Consul Dt Log for each of these variables. But here for object, I should just use Consul do Log and just the name of my object. Save and see in the browser, you should see this file in the browser. And this is what I have for my object here. As you see, the different properties for my object, age, e mail, first name, gender, and last name. You can see the property name and the value for each property, like this in the Csole of the browser. You also can access to each property of an object separately, like the things that we have for each item inside the arrays. Here, I said Csole that log, for example, if I want to access the age of my object, I should use dot or pre. And as you see, I have all the properties for my object here, age, email, first nm, gender and last thing. If I want to show the age of this user of this object in the browser, I use a property. C and C. As you see, I have 20 here. And if you look at the value for age, you have 20 for a. Here to and you can also change the value of each property separately. Now, for example, if I change the value of the first name to something like this. Again, show my user the cos of that log, you can see that here, the first you can see that here, the first name is John. But after changing the John to the David, I have David for the first name here. But remember, because we define the user, Using cost keyboard, we can't reassign the whole user object using this assigned property. If I just copy this part and paste it here, I'm reassigning my cost variable actually, and here I will get an error. But you still can change each property of your object separately like we have here or access to each property of your object separately. So I comment these lines because I would get an error if I have these lines active. Let me format my document here like this. It will have a better look now. Remember that, you can't use assigned property here. Here, you can use only column to assign a property and a value for an object. Let's continue in the next part. 12. Day 3: Objects - Part 2: Hello, everyone, and we'll come back. In the previocy though, we start topic about objects in Java screen. Now let's continue about this topic. We can also create an empty object and after creating your object, set the property and value for each property that you want. How as we have here using dot. You can define a property and set a value for it. Also, you can use Dot and property and show the value for that property of your object. For example, I can define my object like this as well. User two, for example, it's an object. But I will not define any property for my user two. Int after this, I say, user two dot first name as for example, something like this, and user two dot as call as false S, my object is an empty object here. I didn't define any property for this object. But after defining that I can define the properties for this object two, the properties that I need for this object. Here I will show this object in the coole log as well, user two. Remember, The user two is different from user here. This is one object, and this is another object here. Let me say I see in the browser. As you see. I have these two properties for my user two object. So you can create an empty object like this, like the thing that we have for arrays. We can define an empty array. Then assign items for each index that we want in your array. And here for object, we have the same to create an empty object and then define the property and value for the object. But remember, if you use this way to define the properties for the object in your ask code, the property name and the value for the object should be separated by colon here, and each property and value should be separated by. But if you use this way to define your object, to define an empty object in your code, you should use assignment statements or something like this to define the property and value for your object. Using that after the object name and set a property, and then the assignment side, and then the value of the type that you want for the property and then the semi col. This is different from here, how you define the property and value for each object. We can also define the object using new keyboard. How I define my object using const and for example as my object, and set new object, and something like this. This is an empty object two. And if I want to define property for this object, I should use this. For example, if I want color for my car, I can use something like this, name for my car, something like this. Also I can show my car in the console that as We, something like this, and I have this in the browser. This is my car object. Another way to assign a value for each property of your object is like this, using the object name here, for example, car. Inside the square bracket, I use double quotation, for example, color. The name of the property that I want to sit or change the value for that. Here I sit, for example, blue. And let me copy this line and show this car object again in the browser. As you see, the color for the car is blue now. So you can access the property of your object using dot and the name of the property or using the name of the property inside double quotation inside square brackets or a square braces. You can also have more complicated objects in your code. For example, nested objects, an object inside another object. For example, let me do this for user two here. I said user two address, something like this. Let's say for example, country and the value for the country and street, for example, something like this. You can also have other property and value for this object as well at semiclumn here, do not forget this. Save and see in the browser for user two. C. This is my user two object here. The user two is object itself. Inside the user two, I have another object, as you see here. This is the another object for user. Both of them are object. This is object, and this is object. We can also have arrays inside your object as well. As I said, we can have more complicated objects inside your objects. Also you can have arrays of objects. For example, a list of users, a list of cars. If you want to store a list of users, a list of cars, show them or store them or save them. You can use array of objects. We will reach to the objects later in this series, but let's keep it short for now and join me in the next part. 13. Day 4: Functions - Part 1: Hello, everyone, and we'll come back. In this do, we are going to talk about functions in Jo grip. Functions or methods are a piece or a block of code to do a particular task. Using function, you can write codes to do a special task and call that function wherever and whenever in your code that you. So a function will be executed when something calls it, or we may say something invokes it. For example, suppose we want to add two numbers together. You can use a function, for example, sum or add and pass these two numbers to that function, and I return, we will get the sum or addition of these two numbers. For example, suppose, I want to add number five and number ten. I pass these two numbers to my function that is called sum. In return, I will get 15 as a result. What are the benefits of using functions in Java script or in any other programming languages? We have the same thing in almost all programming languages. Using functions prevent to rewrite codes. For example, you have a piece of code, you have a block of code that you may repeat it more than once in your program. In this case, we can put this block of code inside a function, and instead of rewriting and repeating that code in the places that you want to use it, just call or use that function. If you define a function, you can call that function with different arguments. I will tell you about the arguments soon. But just to know the argument is something that you pass to the function. For example, if I want to add two numbers together, and these two numbers are five and ten. The arguments for my function is five and ten. Functions of reus. You write one piece of code, one block of code, one, and you can use it more than once. Using function, you save your time and you have less errors in your program. Because if you want to fix the errors in that block of code, you just need to fix the errors in that function, not in all parts of your code that you repeat that part of code. Let's see how we can define functions in Joa script. The syntax to define or create a function in Joa script is like this. We have the function keyboard, then the name of the function. This name can be anything that you want. For example, if the function will add two numbers together, you can use ad as the name for a function, you can use some for the name of the function. But it's better to name your function as the thing or as the job that they will do for you. For example, if the function wants to add two numbers together, it's better to use, for example, sum or a or if they function, the subtract two numbers from each other, you can use subtract as the name for function. Or if you want to convert something, convert a variable or an object to a string. We can use two string as the name for function. After this name, it's parentheses. Inside the parentheses, you define the parameters for the function. A function can have zero or more parameters. As you see, the parameters are not necessary for each function. It depends the task that the function will do for U So you can have one parameter. You can have two parameters. You can have also ten parameters or more, or you can have no parameters at all. After this, you have curly braces, and inside the curly braces is the function code. The thing that function must therefore, will be written here. When you define your function, you can call it or you can invoke it wherever you want. For example, here you can see how the function will be called, how the function will be invoked. When you want to call the function, you should pass the parameters that the function need. As you see here, for example, I pass number 12 and number 20, and other parameters if my function has, I should pass these parameters to. The themes that I'm passing to my function here are called arguments. So the function arguments are the values that will be received by the function when we call the function. Or or when the com or when the function is invoked. When you call a function or invoke a function, the code that you define inside a function block will be executed, will be wrong. For example, will something happen in your CML document. For example, if user click on a button, or us interthing inside an input element. You can call a function. Or you can call a function inside your Java script code, wherever you need that function. Or sometimes functions can be invoked by themselves. It means automatically, they will be called or we call them as self invoked. If you want to know more about functions and how you can define the functions in action in Java script, join me in the next part. 14. Day 4: Functions - Part 2: Hello, everyone, and we'll come back to continue our topic about functions in ova script, I create a five name functions at S for my Jovacript code and functions at HTM that is the basic structure of ML code and in relation to my ova file. Inside this, I want to define a function. As I said, to define a function in Java script, you should use function keyword. Function. And after this, you need to set a name for your function. The name for the function should be the same as the thing that your function will do. Suppose I want to add two numbers together. For example, I can call this function as some or ad. Then parentheses. If your function has some parameters, you can define the parameters inside the parentheses. You should set a name for each parameter here. But if your function doesn't need any parameters as input, you don't have to define the parameters here. But as I said, I want to add two numbers together here. When I say two numbers together, it means my function should have two parameters. For example, X and Y. We can say different names for your parameters here, for example, first number and second number. After these parentheses, I use Carly brackets, Carly braces. Inside the cary braces, I should define the code that this function must do. L et me add comment for this function, add x and y together. Here, I should add these two numbers, these two parameters together. You can add these two parameters together and set the result in a different variable or just show the result in cos that. Let me define for example, a variable result. The result is equals x plus y We will talk about the operations in JavaScript later. But just to know, the plus sign here will add these two parameters together. Let me show the result and the case as we result here. Also, you can add more comments to your cost result, for example, something like this, sum of x plus y plus double quotation is result. I forget one plus here, as you see, this is my function. It's up to you how you want to show the result in consult block. Let me format this document as well. Kick, format document, or you can press shift out and F on your keyboard at the same time. This is my function till now. Let me say and see the functions that is shown in the browser. As you see, I have nothing, not in console here, not in my HTML document. Why? Because I didn't call the function yet. I didn't invoke that function yet. So if you want this function runs, you should call it somewhere in your javascript code. For example, let me say here, So ten and 15. Now S see in the browser. As you see, the result is 25. I think. This is better to be. If I call this function again with something else, for example, 23, and another number like this, the result will be this. This is for the first call of the function, and this is for the second call of the function. What's if I write my function here, and I didn't pass any value today's function. As you know, my function has two parameters here, and I should pass two values as input as argument here so this function can work. But what if I didn't pass anything or I just passed one argument to this function. Let's say and see for this calling the function, as you see, because I didn't define any parameters for this function. The first parameter is undefined, and the second one is undefined. And the result of adding two undefined together is note. What if I just call it one parameter, for example, 120. Let's say I see. As you see, again, I just have one parameter, and the second one is undefined. The result would be nothing. If you define parameters for your function, you need to pass the value for that parameters as the unless the result of the function will not be the thing that you expect. So here, the result would be no. And here as well. And another thing here is that, as you see, I didn't repeat the code that I write here for this life. I just called the function that I defined here, and in instead of writing two lines of code for each of this line, I have just one line here. And I may use this some function in other places in other parts of my Jo script code as V. But if I want to change this function, these two lines of code, I just need to change just here, not anywhere in my code. But if I don't use function like this, and repeat these two lines everywhere in my jaw script. You see if you need to change, you need to fix all those lines as well. So you have a hard work to do. As a result till now, you can reuse your functions many times in your Java script code, and and you can manage your code better. If you need any changes, you need to just fix one place in instead of different places. Function can have a value to return. Instead of displaying the result here, we can return a value in your functions. But let me talk about this in the next part. 15. Day 4: Return values in functions: Hello, everyone, and we'll come back, as we're talking about functions in Jo script, I said that we can return a result from your function instead of displaying or doing anything else inside your function. For example here, instead of displaying the result of the sum of two numbers, I want to return the results of these two numbers back to my code where the function is cat and use that value in that part. So to return a value, or return from your function. It means you exit from your functions and go back to the d that the function is called, you can use return statement. Here, I commend this line. Instead of displaying the result in the console, I use return statement, and I said result. The result is x plus y, or you can just return from your function without sending anything back to the place that the function is cut, just using the return statement. When the function is called, if it reaches the return statement, it will exceed the function and go back to the where it is called. Here, let me comment this line. If I see my document in the browser, You see, I have nothing in the cocle that. Why? Because I didn't display the result of function, some even in the council. But let me say C L and sum, for example, eight and nine. I call my function. So and pass two value, eight and nine, because I have two parameters here. And I will show the result of this function inside console dot log. Let's save and see. Now you have 17 here as the result. I instead of this return result, let me comment this, I just have returned. Let's see what will happen in this line. As I have undefined. Why it is undefined? Because this function doesn't return anything as a result. So anything is undefined in job script. As a result, if you need the result of the function task, anywhere in your code, so the result should be returned to that part. I need to result of addition two numbers together. I need to return this result. I comment this line again, and I comment comment this line. And as you see, I have the result here. But not for these lines because I don't have console for these parts. I I want the result for this line as well, I have to set the result for them in some variable or like that one, for example, some one, let me set it as console. If I say and see this in the browser, you see, I have the 25 for this some function calling here, and 17 for this li. The parameters that you can pass to a function can be more complicated, not just a simple type, for example, not just a number, not just a string. It can also be an array, an object, two arrays, two objects, and many other things that we can have in Javas, you can pass to the functions here or even the function itself. For example, let me copy the definition for user from here in object DS fi and past it here. Somewhere in my ova script code. I want to write a function to display first name and last name together for this object. I define my function somewhere in my Java script, for example, function. I call it as full name, and I will get first name as the first parameter and last name as the second parameter. Inside this, I will show the first name and last name at the same time and caso that. So I have first name plus one space and then last name. And here, I have to call this as, for example, full name, user first name and user last name. Let's save a syn the browser. John, D here. But in passing like this to this function, I want to pass the object to this function. I don't want to pass the strings to the function. I comment this function here. I will write another function function, for example, let me call it as just full name again. I said user as the parameter here, and I will Show to the Csole, let me copy this line. I sit here, and I will show user dot first and user dot last thing. Here, instead of calling this function like this, I will say full name, user. As you see, I'm passing an object to this function. And now the result is the S. Can also return this value and use it wherever you want, for example, to show a label on a text in your SML document. So the parameters can be more complicated, that can be more complicated than just a simple value. They can be arrays, objects, and other complicated types as Let's talk more about functions in the next part. 16. Day 4: Default value in function parameters: Hello, everyone, and welcome back to continue about functions. In Java script, I want to talk about default values in functions. I create functions, default values at GM here and a S f here and relate them together. This is my SGML document. And this is my Java script five. I have a function some that has two parameters here and we add these two numbers together and show the result in the console. I can return the result as well using the written statement like this. But if you remember, I can cat this function with two parameters, for example tenon five and see the result in the browser. As you see, I have this result in the Csolee that But what if I don't pass any parameters to this function, or I just pass one value to this function, for example, 50. What will happen. The result is no. I don't have anything as a result. In some cases, if you want to prevent having the result something like this, we can use default values for the parameters in the function. How you can define? Default values for a function. Here, when you define the parameters for the function, we can use the assignment sign, for example, here I use dequal sign, and set a default value. Set a value for this parameter if it doesn't have any sample. 04x, and here, you can also have default value. You don't have default value for all parameters, but you can set for all of them as well and zero, four here and now, let's see the result in the browser. As you see. Instead of nine here, I have zero if I don't pass. Any value for all of the parameters in some function, or if I pass just one parameter to this function. The default value for each parameter is zero. Here, I didn't pass any number, so I have zero for the x and zero for the y, and the result is zero. And here I just passed a value for the parameter x. I have 15 here, and I don't have any value for the parameter y, so I have zero here, and the result is 15. So in any cases that you need to have a value for your parameters and you want to be sure the value for that parameter is not defined by the user. The result of your function be something valid and not undefined, you can use default value for parameter. That's all for this part. Let's continue in the next part. 17. Day 4: Variable scope in JavaScript: Hello, everyone, and we'll come back. In this part. We are going to talk about variables and functions. As you know, we can define variables everywhere in our Java script code. Even we can define the variables inside the functions. By default, every parameters that you define for your function will be considered as function variables. And so you can use these variables inside your function code. The scope for these variables that you define inside your function is just the function itself, and you cannot access these variables outside of your function. For example, I have the result variable here and not anywhere in my code. If I want to show the result, value in the Cosle. I add something like this here and in the browser, I have something like this. Reference error. Result is not defined. I don't have any variable called result in my code. If I click here, it will take me to the line that I have error for that line. As you see, here is my error. But you see, I have the result here. Why I can't access to this variable outside of my function because the scope for this variable is just inside this function. So every variable that you define inside your function, or even the parameters that you define for your function cannot be access outside of that function. For example, I can't if I duplicate this line, and I want to access the parameter x that I define here, I have the same error here. X is not defined. Also you cannot access before your function. Not just after defining the function, you can't also access the parameters names and the variables that you define inside your function out of your function, whether it's before the function, where there is after the function. Here, if I save this, as you see, x is not defined. If I deine this, the line that I have error for that is here, the line number two in my javascript code, and as you see, this is the line number two. I come in these lines and save again, as you see, the error has gone now. On more thing. Let me define the variable x here and set a value for this x as 50, and save this and C in the browser, C, the value for x is here 50. I also have the variable x here as the parameter, and the value that is passing to this x variable to this x parameter here is here is ten and here is 50. Let's see the result. The result is the same as the thing that we have already. Y, when you define a variable outside of the function, For example, x here. If you again define that variable inside your function, whether it is as a parameter or as a variable inside your function code, you can't access the variable that is defined outside of that function. And because of this, the result that you want to have in the browser may not be the thing that you expect. As another point here is that when you want to call a function or invoke the function, do not forget to use this parenthesis. If you don't use this parentheses, is not calling the function. We not return any result for. For example, if I define a variable or something like this, call my function and set it as sum, and I want to show the result of this call my function. In the browser. Let's see what will happen. As you see, I have the function in the Csole, but not the result of that function is a function here. So if you really need the result of a function in your Java script code, do not forget to use parentheses and pass the parameters for that function. We may use function a lot in our code in the future. It's better to understand the concept of function and why we use and define a function in our code. Join me in the next part. 18. Day 5: Array Methods - Part 1: Hello, everyone, and we'll come back. In the previous do, we talked about arrays and functions in Java scripts. We've called functions as methods in Java script two. If you are familiar with other programming languages, you may have something like this on those languages as. In this do, we are going to talk about some methods or functions that are defined for arrays in Java scripts. In Javascript, we can categorize these methods into four categories, basic, search, sort, and iterations. Here, we can see a list of these methods in javascripts, but These are not all of the methods for array in Jova script. We have much more methods. In this video, we just introduce some more important ones that you may use a lot in your programs. Let's see what are these methods. Here, I add another Jovacript five called RA methods JS, the JS is the extension for Jova script f. And I just copy one of my Schimel documents, for example, this Kids Control C, then Control V. Be sure that I'm renaming the right five presF two and and I said method. And I also changed the title here as we for here and here. And fix the relation to the Java script file that I got ray Mets. I close this. Here in my Java script file, I define an using cost. Let me name it this, for example, my array. You can define an empty array and set the values for each item inside your array later or you can set the values right when you define your array. If you remember, we said that. You can define different types of items inside your array. For example, numbers, bulion values, string values, and the other types as, Let me, for example, s like this. As you see, I have a combination of different types inside my ray. And let's show this array in the Csle that lock my array. Let's say, and to show this in the browser, I will right click on this file and choose open with Light server. As I'm showing my array. In the Csle, I should right click here and choose inspect here. And inside this, I have my ad. Don't worry about this error here. This is because of the five vacan and because I don't have five acon in my root folder, I got this error here. If you don't know about five con, you can just see the related course related do about the five icon in the CML CSS course. Let me refresh this page. Okay. And this is my array here. As you see, each item has different values of different types. None that let's use the different methods or different functions that are predefined for arrays in ol script. If you want to use the methods that are defined for arrays in Goal script, you need an array. So I define my array here. And to use those functions, you should write the name of your array. Here is my array and press dot key on your keyboard or the period key on your keyboard. And as you see, it brings me a list of different methods or functions for the array that is predefined in Jo script. Let me choose for example, shift. I press inter here because this is a function, and I want to call the function that is defined for this array, I should use parentheses. As you see here. Look at the description for this method. The description says, this method removes the first element from an array and returns it. If your array is empty, undefined is returned, and the array is not modified. But if your array is not empty, The first item inside the array will be returned, and all the other elements will be shift one index upper. It means that the item number one will be the number zero in your array. Let me add console that like here for my array, save and C. As you see, the first item here, that was 3.14 there is no more in my array here, because this is an array, we can see all the changes here as. But the first item was 3.40. And when I use shift for array, the first item is removed, and all the other items will be moved to the upper index. As you see, the string hello is now in the index zero, and so on. If you want to see what is actually as a result for shift function here, you can put this inside the cosle of dog. Here, I use Csle that lock around this shift function. As you see, because this method with return something, I can use it inside the cosle of do log or any other part of my code that I need for the first item inside my array. And as you see, the first item here is 3.40. If you duplicate this line, you can see that. Always the first item of the array will be returned, and the length of the array will be minus what? For example, if I duplicate this line using all shift and down k and my keyboard. And save. You see that. The first item was 3.14. And then the array is start from this index. This is the zero index. So the first item is hello here. And when I shift again, this as the first item will be returned, and my array at the end is something like this. Let me com this line for now. As I said, using shift method, you can remove the first element, the first item in an array and shift the other items to the top to the lower index. As you see here, the first item here is at the index 050, and when I use shift method here, the 50 is returned, and my array is something like this. The 100 number is at the index zero now. Let's continue in the next part. 19. Day 5: Array Methods - Part 2: He everyone and we'll come back. The other method for array is shift. Instead of shift, you can use unshift if you need. Using shift, we can add a new item at the beginning of your array at the zero index, and the other items inside your will be moved to the next. Let me use my array shift and inside the parentheses here, you should define the items that you want to add to your A. For example, something like this, and copy this line and paste it here to see my array after unshift. As you see, now my A is something like this. First, the first item in my array is removed using shift method. And then I have something like this. And here I add Another item using unshift method, and my array is something like this. Every unshift that you use for your array will add another item at the beginning of your array. So as I said, using unshift, you can add an element at an item at the beginning of your array. Here I use unshift for this array. This is my array, and add 50 at the beginning of my array, and at the result, I have these for my array, and unshift is a basic method for arrays in Java scri. What if you want to remove an item? From the end of your array or add an item at the end of your array instead of the beginning of your array. For these purpose, we have two methods. Using pop, we can remove the last item inside your array. And using push, you can add an item at the end of your array. Let me use my array dot pop. And as you see, the description for this meta theory that remove the last element from an array and returns it. So you can show or use the value that is returned using pop meta. If the array is empty, have nothing. You have an undefined value as the result. So I can show this value using console.l2. And for my array as well, and let's see. Now, as you see, the last item here is false. Using pop, I have false as a value here. And my ara is something like this because the last item is revolved. So using POP, you can access or remove the last item inside an array. And here you see the last item in my array is 15 with index eight. And when I use POP, I remove this element, and as the result, my array we have eight items. Using push, you can add another item at the end of your array. As you see here, new elements to add to the array. It opens the new elements, new items to the end of the array. And as the result, it retains a new length of array. For example, if the array length is three, and you use push to add another element to add another item to your array, The return value for this method is four. Let me add, for example, four and show my array using console dot. This is what I have after pushing an element into my array. If I add console dot for here, what we have, do not forget to close the carnes as well. I have five. The length of the array here is four, as you see here, the number four here, After I push another element to my array, the length of this array is five, and here is the resolved array. Let me a little bit make it bigger so you can see it better. If you want to zoom here, just use your mouth field while you move it to the up, it gets bigger. You can zoom in. And if you want to zoom out, just move your mouthf down. So as I said, using push method, that is a basic method for arrays in Java script, you can add an item or a an element at the end of the array. So here, this is my array. I have eight elements, eight items inside my array, and the indexes are 0-7. And when I use push by 50, I have the 50 as the last item inside my array. And now my array has nine elements, nine items. Let's continue in the next part. 20. Day 5: Array Methods - Part 3: Hello, everyone, and welcome back. If you want to copy your array into another variable, you can use a sliced method. But let's see how. The slice method will return an array that is a copy of your array. So I need to set the result of the slice method into another variable or show it on the console or wherever I need. So I define const my new array and set it as my array that a slice. Using the slice method, you can copy your array. The slice method can have a parameter. If you don't define the parameter, it means copy from the beginning of your array of the current array. And the beginning of the array is index zero, and you can also set the last item index for the slice method as well. Let me just use the slice method without any parameter here, as you see, and show my new array here. In a set up my array. Be careful. I'm showing my new array here not my array. Let's say and see. As you see, the new array is the same as my array. But let me duplicate this line using s, shifts and down array, and comment the upper one. Inside the slice I set, for example, number two, and see in the browser, as you see, the slice method here, copy from the index two of my array. Zero, one, and two and two start from here until the end of the array. Here, let me just duplicate this line again, come in this line, and at the end parameter for example, T here and see the browser now. As you see, I just have one item inside the new array. Start from number two, until number three minus one. And I I sat for example here. Four, we have two items now inside your array. Start from the index. Two, until the index four minus one, two and three will be at the result. If you want to just copy your array exactly into another array, we can use a slice method without any parameters. So using a slice method in array, we can slice out a piece of array into another array into a new array. As you see here. This is my array, the first thing that I have for my array. And when I use a slice for this array, like this, I have the result for new array. So the first array that is my array here will not change. Another method for array is epic. Using esplic method, you can remove any items from your array, or you can insert a new item inside your array. Not just at the beginning of your array, as we do use unhit method or at the end of your array using push method. Using a splice method, you can add or insert items, anywhere inside your array. Let's see how I say my array dot splice. As you see, I have different parameters here. The first item is the start number. It means start index, where in my array. For example, if I said, two, it means a start from the index two. The second parameter here is delete count. It means how many items should be removed. If I set a zero, it means any items should not removed. And the last parameters is the list of the items that I can add. And the last parameter is the list of the items that I want to add into my array. For example, let me set as true i and i and this line here as well. But this pass here and seen the browser, as you see, the new items that I defined for my array, they added from the index two, zero, one, two, this is true, then high and and the item that was at the index zero is now here. There at index five. I inserted three new items inside my array. And let me just copy this line. Comment this using control slash. And I I said, for example, two here. Set set a value for delete count parameter, and save. You see, I have something like this in my array now. From the index two, remove two items and add these three new items. This is true and this number is removed. And I instead, I have these three items inside my A. And if you just don't mention the new items like these, it means remove the items that you specify here, from which index, the index two. Come in this line first, Save and C, as you see, these two items are removed, from the index two, remove two items. So using a splice method, you can insert items in the array or remove the items from the array or do both of them at the same time. Here, I don't specify new items, so it just remove the items from my array. It starts from Index two and removes four items from my array. If I want to specify to add items insert items inside my array, I should add them after the delete count parameter after these four here. If I specify zero in est of four here, it means do not remove any items. Let's continue in the next part. 21. Day 5: Array Methods - Part 4: Hello, everyone, and we'll come back. If you want to check, if there is any item inside your ary, you can use the method index. For example, let me say my ara index. It will return the index of any item that you specify here. What item, for example, let me say hello. And as a result, it would return the index of the first occurrence of the element of the value that you specify here. If this method cannot find any item like this inside your array, the result will be minus one. I need to show the result somewhere, for example, console that log and see in the browser. The item hello is at the index S here, this is my array, and the hello is here. And if I just copy this line, and here I said high, for example, as I don't have high in my array. The result is minus one. It means there is no item such this inside this array. So using index of method in arrays, that is a kind of search methods, you can find the index of an item inside your array. For example, as you see here, the index of the item seven is five here. But the index of the item 750 is minus one because there is no such item inside this array. A index up we'll find the index of the first occurrence of this item if exists. We also have last index up. Unlike index that will find the first occurrence of an item inside an array. The last index up will find the last occurrence of an item inside an array. And if it didn't find any item like this, for example, last index of 750, it will return minus one as index as result. Another method for arrays is joint. Using joint, we can convert your array into a string. We have two methods to turn our array into strings. First, two string method, and the second is joint. But the difference between the two string, and the joint method is that using joint, you can set a character or the separator that you want to join the items inside your array. Let's see how. For example, I say console dot because the result of these two methods are string. I say my array dot my array dot to string. It converts my array to a string, and this is the result in the browser. The items are separated by comma. But let me duplicate this line and here instead of using two string, I use join. The save and C. You see, I have the same result for two string. Here. But let me duplicate this slide. If I specify a character, for example, something like this. Now, the items are joined together using these characters. Using two string metogy can convert your array to a string. And by default, the items inside your array, we join together using comma character. But if you use join to connect the items inside your arrays together, you can specify the character as well. And if you don't specify the character here, it means character. Here, I join the items inside the array, using the character and see, this is the result. If you remember, I said here, using index of, we can find the index of an item inside the array. If that item exists in your array. And if the item is not exist in your array, the result of this method is minus one. We have another method that you can use it to check if there is an item in the array or not. And the result For this method is not the index of the array, is just true or false. If the result is true, it means the item exists in the array. And if the result is false, it means that the item does not exist in the array. What is that method? It's include console dot like my array, includes includes what? You define the item that you want to search inside your array. For example, 25 and save and seen the browser. The result is true here. This is for include. You can see this is the result for this line. And if I duplicate this line, and for example, I said, look for 250 in my array, you have fonts here because I don't have such item inside my array. Using includes, you can chick if an item. So using includes. We can check if using includes method. We can check if a value exists in an array or not. If the value exists, the result is true for this method. And if the value does not exist, the result is false, as you see here. The array includes the item seven, so the result is true, but it doesn't include the value 750, so the result is false. Let's continue in the next part. 22. Day 5: Array Methods - forEach: A Hello, everyone, and we'll come back. In this, we are going to talk about the other methods for arrays in Java script. One of the most usable methods for arrays in Java script is for e. Using f e, you can call a function one for each item in the array. How? Let me define another array, for example here, const numbers. Something like this. I have an array of numbers. And here I want to write each of the items in the array in the console separately. How I can use four inch method here. So numbers that four H. Inside the four H as a parameter, you need a function. So In java script, parameter for function can be a function two. So I need to define a function for this method. But what is the condition to define this function for this method? As you see here, I need a value as parameter. I need an index, and I need the array. The array itself. Here, before or after this, I define a function. And call it as right, for example, I sat the parameter as value index and the arc. Inside this, I say, counsel, that value. The value is the value of each item in your array. Also here, you can sit for example right in the cussle. The item at the index, for example, zero is for example here 12. If you want to have something like this, we can rite your cssle that this cssle, that log at the index. What the index formeter here is the index of the item, and the value is the value of the item itself. I'm here in this part. In this part, I should call this function. But because this is a function as a parameter, I just write a name for this function. And let's say as in the browser. As you see, I have 12 item at index zero is 12. And let me comment this. So you can see it better. I have something like this for this numbers And if I call this for each function for exam technic copy, paste it here. Instead of numbers, I call my array, and I have something these in the sole. So using four e, you can do a test for each of the item inside your array like this. For example, if you want to add a number to each of the item inside your array. Let me do this like this. Let's result as value plus two and write in the castle that log the result. And let me comment this line. As you see, I have this in the browser now. And for these two items, because they are a string, if I add anything to the string value, the result will be the string two. So here, I add number two to each of the items inside my array. But what happened to the items inside the array itself. So let me add cosle that log. O numbers, for example, as you see, the items for the first numbers array are the same array as the initial array. But just in the four each method, each item is added to two. One more point here is that for for each, you don't need to actually define a different function here. You can write a function right in the parenteses here. Let me show you numbers for each. Be inside the for each, I need a function. I should use the function ker to define my function here. But because I'm defining the function. Inside this as a parameter. I don't have to define a name for this function, like the thing that we have here, for example, here, we have. But here, I don't need that name. Instead, I should define the parameters for this function. As you see, it is saying to me, I need value, index and the array itself. The first parameter is equal. So you need to at least define one parameter here. The name for the parameter can be anything. For example, value, if you'd like, you can set it as item or anything else. For example, let me say it as item here, and then curly braces because we need to define the code the body of the function. Here, for example, let me say console that like, show me the item. Here and semicolon here and here as t. Because this is the end of this parentheses for four each method. So here for four, you can define the function like this or like this, define the function separately and call it inside the four H method. Or define the function inside the for each method as the parameter. Now let's see and see in the browser. As you see, I have my items here like this. Let's continue in the next part. 23. Day 5: Array Methods - map: Hello, everyone, and welcome back. In this we do, we're going to talk about another method for arrays that is called map. Let me define map first and then see the difference between the map and for each. Here, I define numbers that map. And for map as a parameter, I need a function two, like the function that we have for for each. We can define a function separately. And add a name for your function, or you can define the function right here inside the parentheses for the map as the argument. Let me define it here. You should define the parameters that you need inside this function. It can have up to three parameters. The value that is the item itself, the index, that is the index of the item, and the array itself. For example, let me call the first parameter as value, that is the value of my item. And let me show the value in the log, that's save and see in the browser. As you see, F here, two here is the result of the for each meter. And from here to here is the result of the map method. Let me add comment in the logs as well, something like this. I add these two lines here to show in the consult result for each is here, and result for map method is here. But what is the difference between map and for each? In map, we can return value. Return anything that you want, for example, you do a task on each of the items inside your arrays, and you want to have the result. So here, let me return, for example, value multiply two. Let's say C in the browser. As you see, I have nothing here yet in the cosole. But the result of the map is an array itself. So here I can define a new array, for example, a new number, and set the value for this new number as the map for the numbers. And then let me I forgot the sem column here, show the new number array in the console save and S. As you see, the new number array is here. Each item of the numbers array is multiply two, and the result is here. Remember, the numbers array itself is not changed. Let me show the numbers ra two here. And see, this is the numbers array, and this is the new number array. The difference between map and for each is that sing for each, you can do a test for each of the items inside your array, but the for each method can't return anything as the result. But when you use map, the result of the map method is an array, and you can use that array anywhere else inside your JavaScript code if you need it. JavaScript has more methods for arrays. I recommend that you write the name of your array, for example numbers. And after the period, you can see a list of the methods that you already have for arrays, as you see here. This icon here is showing the method. And this icon means the property. If we talked about the length property in the previously. And for example, using the length, you can access to the length, the count of the numbers inside your array. And using the other methods, you can do a special thing for your array. For example, using sort, you can sort your array. And I insist that you click on each of these methods and see the documentation, for example, then you want to see the documentation just open the parentheses here and see what is it's saying about this method. Also, in VSC, if you hold the control key on your keyboard and Klick on the method name, we can see the documentation for these methods here as but don't change the things that you see here. For example, if I press control key and lick on this, I see the description for map method here. And also, you can see the four H method here as As we have many methods for arrays of a script, we may reach to the other methods for arrays during their scores, but I recommend you to practice them by yourself and see the result in the browser, if you change your array with each of these methods. Thanks for watching. Join me in the next part. 24. Day 6: Arithmetic Operators: Hello, everyone, and welcome back. In this video, we are going to talk operators in Java Script. Using operators, you can do mathematical or comparison operations inside your program inside your code by default. Are different types of operators in Java script that you can use them for different purposes. We can see the category of operators here in this slide. We have arithmetic assignment, comparison, and a string operator, and we also have logical beat wis ternary and type operators. This do, we are going to talk about arithmetic operators. Using arithmetic operators. You can perform arithmetic operations on numbers. These numbers can be literals. It means five, ten, 3.5, these are literal numbers, or they can be variables. If you define a variable of type number, you can use these arithmetic operators on it and do calculation on d. We can see a list of operators for arithmetic operations in Jova skips, here. Let's see how we can use these operators. Okay, to show the usage of arithmetic operators, I create a fine name operators that S for Joa script code and operators that HTM to show the result of the operator that fi in this document. And you should add a relation using script element inside rel code. Here I want to use athmetic operator. The most of the operators in Joa Script needs two operands. What is opera? Let me use the addition operator. For example, let me define a variable let sum equal five plus six, as you see, this is addition operator. You need two ers for addition operator here, one before the operator, and one after the operator. The prints here are five and six. In Java ski, when you use plus, it means addition. It adds two numbers together. If you want to see the result, you can use console dot L and show the sum in the browser, penit live server, inspect and in the Csle, we have 11 as the result here. For addition, we need two rads. These rads can be numbers or can be variables of type number. For example, let me define first number as five and second number as six, and then add these two numbers together and show the result in the cosle do block. And here, the operands are first number and second number before and after the operator. And this is the result in the browser. To subtract two numbers, you can use minus operator subtraction operator. Here, I say so first number minus or subtract from second number. And show the result in sole, and this is the result. So this is subtraction. Or you can also use numbers, the literal numbers like this for this operator. The subtraction operator needs two uprants. The next arithmetic operation is multiply. Let me define it as M and first number, star or multiply second number. This is multiplication, and show the result in Carso, and this is the result. And we need two ferns for multiplication as the first number and second number. You can have more complicated arithmetic operation here as well. For example, addition, subtraction, multiplication or division in one statement. These are just simple operations. The next operation is division, net di first number division by second number, and this is division and show the result on console, save and C. This is the result. And for division, we need two arts, as you see here. And the next operation is remainder. We use first number percent sign. This is modulus operator. Retains the division remainder. By second number and show the result Cosle as you see, the remainder of the division 5/6 is five. Here for the remainder operation, for the modulus operation, we need two pern as th. This is remainder. The next operator is exponentiation operator. Using this operator, we can raise the first pern to the power of the second upper. Let me define po as a variable here. Then first number, exponentiation, then the second number. This is exponentiate. And see the result in the browser. This in cons do. As you see, the result for five to the power of six is this. Instead of using exponentiation operator, we can use the power function in JavaScript. How let me define xp two as M dot power first number over second number. And see the result and the cost is ins that. As you see, these two values are the same. You can use this method, the power method that is inside the math object of Jovcript. And have the same result as the exponentiation operator. For the exponentiation operator, you need two operates. The next operator in Jo script is increment and decrement. How we use increment or decrement operators, first number two plus signs, and That's all. It increments the first number by one. It equals to something like this, first number equals first number plus one. It will have the result the same as this. If you see the first number in the console, you see, I have six here. For incrementing operator, you need just one operate. We also have decrement operator. Second number, for example here, two minus signs, and see the second number in console. I have five for second number now here. This is the same as second number equals second number minus f. In instead of using something like this, you can use this in your Javascript code. So as you see, for this decrementing operator. I mean minus minus, you need just one operate. This plus plus, and this minus minus can be before the operants two. For example, plus plus first number. This is the same as this. I come in this two, and also I have minus minus second number. This is the same as this. We call this as the operator is before the upper end here as prefix. And for this one, because the operator is after the upper end, we call it as post fix. And also here, this is post fix, and this is prefix. By default, the result for the postfix and prefix operators are the same. But there is a tiny difference between the using operator after Dobrin and using the operator before Dobrin. I mean postfix and prefix operator for incrementing and decrementing operators. Let me show this difference with an example. Let me define another variable here, for example, x as ten and let me define the variable y here as x plus plus here. Let me show Both of these variables in the console like this, x is x and duplicate this line and change here. After using x plus plus x is 11, but y is ten. You see, I said, y should be x plus plus. But y is ten. Let me show the result here for x as well, and you see the difference. Again, x first is ten. After plus plus is 11, but y is ten? Y y is ten because before the plus plus operator here, the value of the x will be assigned to the y. Let's use the prefix. Let z plus plus y, something like this, and show the result for z as well. The y here is ten, and the value for z is 11 after using plus plus four y. So here, first y will add to one, then the result of this will be assigned to the variable z. If I show the y variable here as well, see, both of the y and z are 11. So when you want to use these operators in your program, be careful of this. Post fixes, the value for the variable is used, then the operation will apply. But for prefixes, the increment or decrement first applied, then the value will be used as the result. Using arithmetic operation, you can do mathematic or arithmetic calculation in your javascript code wherever you need it. When you want to use, these operators, be careful about the tiny difference between the post fixes and prefixes. Let me tell you another point here. Suppose we have such athmetic expression in our program. What is the result for this expression? Let me show this in the browser? Is the result 250 or 120? Before we see in a browser, try to guess what happened. If you are familiar with other programming languages, you may guess it correctly. But let me see now, the result is 120. Why is not 250? Which operation is done first. In Java script, the operator has precedence over each other. And this describes the order in which operations are performed in an arithmetic expression. Let me format my document here. It's better. In this expression, the first operator that is done is multiplication, then the plus and then subtraction. In total, multiplication and division have higher precedence than addition and subtraction. But you can change the precedents of the operators in Java script using parentheses. Let me duplicate this line and come in. The upper one, and using parentheses here from here to here. Now let's see the result in the browser. As you see, the result is now 250. First thing that is inside the parentheses will be calculated, then what is outside the parentheses. Then many operators have the same precedence like addition and subtraction or multiplication and division, they are computed from the left to right. So here, first plus will be applied, then subtraction. Also here. If you want to know more about arithmetic operators in Java script, just write more arithmetic expression like this, more complicated than this, and see the result in the browser and see what happens when you use different operators of different precedents or the same precedents. Thanks for watching. Join me in the next part. 25. Day 6: Assignment Operators: Hello, everyone, and we'll come back in this do. We are going to talk about assignment operators in JavaScript. If you want to assign a value to a variable, you need to assignment operators. We have different assignment operators in JavaScript. We can see a list of assignment operators for arithmetic operations in Java script here. Let's use them in action. Okay. Here I create a SGM file named assignment operator is S and a related Joa script file assignment operator dot JS. And I add a reference to this script as well. Here I have nothing in my Jova script file. Let's use arithmetic assignment operators. Let me define number one as for example. Ten and number two as five for example. As you see here, This is assignment operator. We can use this assignment operator for every variable type, every data type in Ja step. Here, I'm assigning a number to variable. This number, this variable will be a number. We use equal assign to assign a value to a variable. In the previous video, we talked about addition, subtraction, multiplication, and other arithmetic operations in JavaScript. As you remember, if I want to add number one to number two and set the result of this addition to number two, I should write something like this number two, must be number one plus number two. And let me show the result for number two in the Cosle using cose that light number two and save and see this file in the browser. As you see, I have 15 here. And now let me format my document. Okay. When you have an operation, that the result must be assigned to one of the ers. We can use assignment operators. Here I'm adding number one to number two, and the result must be assigned to number two. Instead of using this, I can write something like this number two plus equals number one. This statement and this statement are equals together. I can copy this from here and add a comment to Here and comment this, and let's see the result in the browser again. As you see, I'm still having 15 as a result. So in this situation that you have an operant that must store, the result of an operation, we can use something like this. We have the same for subtraction, multiplication, division, remainder, and exponentiation. Let me show all of them here. I just duplicate this line using all if down k, and here I said minus or subtraction, and here multify my comment two, and let me come in the upper line. And now we have minus five here. Number two is five, minus number one is minus five. And the same for multiplication. Also I replace this and come in this. And I have 15 as a result. And for division as well, I duplicate this line, comment this Citi division and here in comment as well. So you know what I mean here. Number two, division equals number one is the same as number two equals number one division by number two, and see the result. I have 0.5. And for remainder, I use person sign here and person side here and come at this C. I have five as the remainder. For exponentiation, I duplicate again here, and I use two star here as a sign for exponentiation and two stars here to, and com d. Now I have this as a result in the browser. So as you see, if you have to set the result for an operation, to one of its rends, you can use something like this in assignment operators in your Java script code. It makes your code shorter and more readable. Thanks for watching. Join me in the next part. 26. Day 6: Comparison and Logical Operators - Part 1: Hello, everyone, and we'll come back. In this video, we are going to talk about comparison and logical operators in Jo script. Using comparison and logical operators, we can test for true or false of the variables. Comparison operators are used in logical statements to check the equality or the difference between variables or values. Can see a list of these operators here, we have equal to that is different with the assignment operator. Look carefully. We have two equal signs here, and it means equals two. And if we have three equal sign, it means equal value and equal type. When you compare two variables together using this operator, if they have the same value and the same type, they will be considered as equal. We have not equal and not equal value or not equal type, and other operators for comparison as logical laborators. We use logical operators to combine two or more logical expression together. As an example, you see here, if you consider x as five, and y as ten, we can check the value for the result of these logical expressions here. Let's use this operators in action and see what is the result. Okay to show how we can use comparison and gital operators, K the file name comparison operators dot and a related Jova script file comparison operator dot JS. And this is mychel document, the basic structure of an chem document. And here is my Jova script file. To show how we can use comparison operators, Let me define a variable, for example. Let's number one as ten, and if you want to check the equality of the variable or two values together, we can use the equal site. In Jo sk, we have two equal signs, one that is two equal signs, and one that is three equal sites. These two equality signs have one differences. These two equal sign, check the equality value between two variables or two values, and the type of the variables and values are not important. But this sign in addition to check the value, it will check the type of the variables two. We call this three equal sign here as strict comparison. Anyway, let me show something in so that, so that number one equals to number ten. The result is, and see this file in the browser with the life server. I have true as the result here because the value for number one is ten, and I'm checking the equality with ten as value. And let me use console that log here now for number one equals ten as a string. See the result. The result is still true. When you compare a string and a number in Java script, Java script tries to convert the string value to a number. For example, here it can convert this string to number ten. So these two statements are the same as each other. If the string is empty. Let me duplicate this line, this is an empty string. Let's see the result in the browser is false. When Java script want to convert an empty string to a number, it returns zero or empty string. Here, string ten is the same as ten. It converted to ten by Javascript. But Let me duplicate this line again. If I have something else inside my string. What happens to this hello here that is a string? Jos you want to convert this string to a number. Let's see the result in the browser. Let's save and see the result in the browser. As you see I have faults as the result for this comparison operation here. Y, when a string in Jo SC contains non numeric letters. It converted to none, and when you compare any number with this value, the result is always false. So if you have a number in your string, it converted to the equal number. If you have an empty string, it converted to zero. If you have non numerica string, even a combination of letters and numbers together, it converted to none, and in comparison operations, the result is always false. Let me copy this line using control C and paste it here. Instead of two equal signs, I use three equal signs, and see the result in the browser. As I see, I have falte now. Here, The string ten is not converted to the ten as number. Using this sign, we can compare the value and the type of two variables or up rands together. The number one here is a type of number. And this ten is a string. So you can't compare them together, and the result for comparing these two different types of variables in Java script is fos. The next operator is not equal operator. I paste this console like here, and here, I use this side. This is sin check for not equality. If two variables or two values are not the same, the result is false, and if they are the same, the result is true. If two variables or two values are not the same here. The result is true, unlike the equal sign. True, F equal sign is the one that two variables or two values are the same. But here, true is the. Two values or two value base are not the same. And if they are the same, the result is false. Let's see these in the browser. I have false in the browser void because ten is equal to string ten here. And if I compare my number one to something else, for example, five here and C, I have true now. In addition to this not equal sign, we have not equal Strick, that is check for not equal value or not equal type. So I two variables and values does not have a same value, the result is true, does not have the same type, the result is true. But if they are equal, the result is false. Let me copy this line, and here I use not equal strick that is this sign and it needs two equal signs. The result for this is true. The number one is a number, and this is string. So the result is true because the type of these two parens here are not the same. If I aticate this line and situs. Five, the result is still true, and if I duplicate this line and set its ten, the result is p because ten equals to ten. Let's continue in the next part. 27. Day 6: Comparison and Logical Operators - Part 2: Hell, everyone, and we'll come back. The next operator is greater than. Here, I said, number one, greater than for example, five, and see the result in the browser is true. Y? Be ten is greater than five. If I say greater than 20, the result is f because ten is not greater than 20. I copy these two lines here and I sit here. I instead of greater than, I use less than for here and less than for here. If the number one value is less than five, the result is true. If the number one value is less than 20, the result is true here. But otherwise, the result is false. See the result. Ten is not less than five, so the result is false. Ten is less than 20, so the result is true. We also have greater than or equal to and less than or equal to operators two. For example, let me paste this two and the greater than or equal to using this side and less than equal using this side. If the value for number one is greater than five or equals to five, the result is true. Unless the result is five. And F here, if the value for number one, is less than or equals to 20, the result is true, unless the result is false and see the result, both of them are true. And if I change for example, 15 here, for this one, the result is false. And if I said ten, I have true. But if I remove this equal from here and check for greater than ten. The result is odds. So for this, the result is false. And if I add equals to sine here, the result change to true. So as you see, the result for comparison operators is always true or false. We need these comparison operators in condition statements in Jo scripts. These are so simple. Just remember the signs and know what you need in your code. We also have logical operators in job skips. Using logical operators, you can combine two or more comparison expressions together. For example, let me add a comment in my log and say logical operators, for example. And here I want to combine two comparison operators using logical operators. I writes that log because I want to show the result in the log. I said number one greater than ten, and number one, less than 20. This is and logical operator. It means the result for this logical operator is true when the left expression and right expression, both of them are true. So if the number ten is greater than ten, and at the same time, it's less than 20, the result for this is true. Let's see in the brows there. I have falses. Why? Because one of these are not true. So for end operator, if one of the operates is not true, the result is always false. And if you want to have true as the result, both of the operants must be true. If I duplicate this line, and instead of n, I say or the difference between n here, and all here is that. For all, at least one of the parents must be true. The result is true. Let's say C. C, I have true for or here. For all, one of the ops must be true, so you have true at the result. And I both of them are false, the result is false. You can change the value of comparison operators from true to fonts or fonts, two, true using nut operator. Here, for example, let's say console, that Lg for nut operator, I use this sign, not and the upper end must be inside the aparentesis here. Number one equals to ten. Number one is ten, and it's comparing to ten using this equal sign. The result for this expression that is inside the aparentess here is true. But when I use nut before it, it means turn this true to false. L s and see. The result is false here. If I just duplicate this line and remove the nut sign from here, You can see that. The result is true. So using comparison operators, you can compare two values or two variables together and have true or false as a result. And using logical operators, you can combine two or more comparison operations together. Remember that here, I compare the variable number one with another value. You always can compare two variables together, two values together. Let me show here two for this. Let number two, for example, be 50 And in cons, that log, I can compare this to number one equals to number two. For example, for this, and also for Logical operators. Number two is less 45. For example. I see the result for these two. I have for both of them false and results for comparison. And logical operators depends on the value for the operants. But always the result will be true or false. Thanks for watching. Join me in the next part to use these comparison operators using conditional statement in oral script. 28. Day 6: Conditional Statement - If ... else: Hello, everyone, and welcome back. In Java script, if you want to make decision between different situations, between different conditions. In your program, you need conditional statements. In Java script, we have four conditional statements that you can see the list of them here. The first one is if if we want to specify a block of code to be performed, If the condition, for example, if the number is greater than ten, so this block of code should be executed. Using else, you can define a block of code to be executed. If the condition is false. Using else if you can specify a new condition if the first condition is false, so this condition would be checked and if it's true, The block of code will run and otherwise will not run. Using switch statement, you can specify many conditions and block of code to be executed. Let's see how we can use these statements. For if, here I create I S M file and relate to Il JS and I have a related Fl JS file as. Let me define a variable, for example, Lumber one as ten. If you want to check for a condition in JVI script, you can use if statement. We type I and inside the aparentses here, you should check for your condition. The condition here is actually a comparison expression that we talked about this in the previous video. For example, if I want to check for number one greater than ten, or let me say as greater than 20, and do an action, a block of code, if this variable value is greater than 20. The code, the block of your code should be placed inside curly ases. Here I said, for example, console, that number one is greater than 20. If the value for number one is greater than 20, I have this message in console. Otherwise, I have nothing. The s and C, As I see, I have nothing in Cs love like y because this condition is false. The result for this condition here is false. If I copy this statement here and paste it here and inset of the greater less than 20. Let me format my document this in all shift and if keys, at the same time, I have this message in Csle no. So this code cannot be wrong. Because number one is not greater than 20. So the condition here is false. So when the result for this condition here is false, this block of code cannot be wrong. But here, because the result for this condition is true, this statement can wrong. If you want to set a block of code to be run, if the result for condition is false, let me copy this from here. I need something like this for here. In this condition, number one greater than 20, this block of code cannot be rock. But if I want to run a block of code, if the condition is false, I can use s statement. After if you specify the else. And using cur braces. And inside this, I should specify the block of code that I want to run when the condition is false. I copy this and, for example, the message, something like this, and see the result in In the browser. I have this in the browser now. As you see, the s part of this I L statement is executed. Let me comment for here. Something like this for here and for here. The condition is true on this You can also check for more than one condition using I L statement. For example, let me say if number one greater than 20, this pock of code must. I number one is less than ten, this pock of code must R. We can add if L statement as much as unit, for example, let me copy this second and face it here. For example minus ten. And let me also format the document here. As you see it's better now. So if this condition is true, this pg cod right. But if this condition is not true else, It will check for another condition here. And if this condition is true here, this block of code will write. And if it's not true, it checks for another condition. We can add as much as LTF expression that you need. And at the end, you can have S expression, and you can't have it. It's optional, and it depends on the program that you're writing. Let me add consent that for each part. I add cost like this for each part and see the result in the browser. No condition is true because none of this condition is true. And I I change, for example, one of the condition like this, less than or equal to. I have this number one is less than ten. I can modify the message as well for here. In conditional statements, you can have more than one condition to compare together and run a block output based on the results of these conditions. We can do this using logical operators as we talked about them in the previous video. For example, here, I said, if number one, it's greater than one, and number one is less than 20. Show me console something like this and say and see the result in the browser. As you see, I have this message here because number one is ten, and this value is 1-20. Also I can use other operators here. For example, let me Copy this line and paste it here, and also format the document to see it's better. Instead of this, I want to use not like this. If number one is greater than one, and number one is less than 20, the result for this is true. But as I'm missing not here, the final result for this expression is false, and this code be not wrong. In a's part to show another message, something like this. As you see, I have this in the browser. Because I negate the condition here. I change the value for this condition from true to false, using not operator. You can have a combination of different conditional statements using logical operator in your Ils expressions. In addition to if else, we have a terminary or conditional operator in Java script two. For example, let me define number two, and set the value for number two like this using a conditional expression. For example, if number one is greater than ten, the value for number two should be five unless the value for number two should be minus one. Look carefully here. I have a condition. I have a comparison statement here. And using the question mark here, I can set the value for the number two if this condition this comparison statement is true. And using the colon sign here, I can set the value for this number two, if this comparison statement is. And let's show the result for number two in counsel, this this statement. And see what we have for number two, save and C. Number two is minus one. Y? Because the value for number one is not greater than ten. So because this condition is false. This part of this ternary operator will run and be considered as the value for number ten. You can also use ternary expression like this two, if you want to show, for example, a message based on the value for a comparison of ten, for example console that like here. And let me copy this two and pace it here and not greater than ten. And form this document to see a better look for this ternary operator, recommend you to use it like this. You can better read this statement. If number one is greater than ten, this message will be shown unless this message will be shown. Remember, you should not use sem column after this statement here, because this statement continued till here, and after this, you should set the semicln, and save, I have this message in the browser. If I change for example, this to greater and equal, I have this message. No. Can also have misted ternary operator in java script. For example, let me copy this and paste it here, and here after this column, you can have another ternary operator to, for example, number one equals to ten, so I have to add a message for this again. So I added message. For this part of comparison expression here, if the value for this is true, This message will be shown, and if it's not, this message will be shown in the browser. And let's save and see. As you see, I have this in the browser. We can add as much as ternary operator in Job script as you need. But do not forget. The semicolon must be at the last part of the ternary operators. Another point for ternary operator is that you can use a combination of comparison statement using logical operators here at whatever we say for IL, you can have for this here, but you can't have a block of code here. The ternary operators usually use to set a value for a variable using a condition like this that we have for here. Thanks for watching, see you in the next. 29. Day 6: Conditional Statement - switch - Part 1: Hello, everyone, and welcome back. In the previous do, you start talking about condition statement in Java Script. We talked about, L C, and also ternary condition operator. In this so, we are going to talk about sage statement. Mixing Sage statement, you can specify many conditions. Of code to be executed. Let's see how we can use switch. Okay, to show the usage of switch, I create file code switch and I related to a script file switch Js. And I also add the reference to the SC file here and For now, I have nothing in my Java script f. Here, suppose I want to show the name of the current months. So I need to get date in Java script. To get date in Java script, to get the current date in Java script, we have an object called date. So let me define the current date as date object to define the current date, as date object, I use new keyword and the name of the object date. I don't mention anything inside this parentheses. I just want to access the current date. I write like this. I want to access to the current math or define another variable called mat as current date. To get the current math number from date, we have a method in date object in Java script called get Mt. And I call this gate M. Let me show the month and current date in Lg using Csle, that current date, and for here Let's save and see. This is what I have in the browser for date and the current math. I want to show the name of the month instead of the number of the month. Be careful that here the month number for get month method in date object in script is start 0-11. For example, if I want to show the name of the month, In jo scap, I can use two weeks. Using condition of statement, of course, I can use if el or I can use switch. So I can write if month equals zero. It means the first month. So show me console, the name of the month and January. If month equals one. The name of the month would be February. And I will add other LI for other months as well. Okay, I add the other LSI statement for comparing months and show the correct month name. As you see here, I have lots of LCI here that is comparing months with a number. And based on the comparison, it wants to show the month name. At the end, I have just an for If the month number is right show something like this. Let's say and see the browser. As you see, I have the month name now here. When you want to do different actions based on different conditions. In Jo script, instead of if and S statement, you can use switch statement. But remember, the condition, the thing that you are comparing in the expression here must be the same for all of the if and LCF statement. For here, I'm comparing month with a number. Instead of using if and SF statement here, I can use such statement. So here, I will write Sch to write the Sch statement. Inside this parentheses, I need an expression. I need, for example here, M or it can be any other expression to But remember, when you use switch, the value of expression here will be evaluated before it gets to the switch blocks. Then I need curly braces. Inside the curly braces, you should define different cases that you want to do action for each of. According to the thing that we have for moth with E and LC, different cases for here is case 0211. So to define each case, I need the case keyboard and the value for the case. And then the coln after this, I should define the block of code that I want to be executed if this case is matched. So here, for example, I show No January. Remember, I use single quotation here to show the string? In Joa script, we can use double quotation or single quotation to show a string value. And if you want to go out from the sue statement. After this case is true, you need the brick keyboard. The brick keyboard breaks out of the switch block. So when this code runs and reach this break statement here, it gets out of the sucia statement and come here right after the switch block. Whatever it is. Anyway. To define the other cases, you need case keyboard as well. For example, here case. One show February and the b and brick. I also add for the other cases as well. Okay, I added the other cases for this s each here. As you see, case 345-67-8910 and 11. And for each of them, I have counsel that different actions because I want to show different mouth name here and a break statement. For switch, we also have a default case. Using default case, if none of the other cases is true, the default part will be executed. So here I can add default part like this with counsel that not default. We can add brick for this part here or not. But I recommend to use brick here as well. And that's all for Sage statement. Let's add a Csle that like here as well. Like this. Also for here like this save and C. If I use if else, I have June at result. If I use Sage, I have June at result. To, but look carefully here, using II statement. You have much work to do, but using switches. But when you use suici statement, for these situations, your code will be more readable and simple. So when you want to use. Siti statement, you need an expression with the value. The value could be number, could be string, could be true or false. Could be any type of data. And inside, the switch statement, you should define different cases that you want to do actions for each of data. And for each case, you should define a ballot of code that you want to be executed if that case is true. And if you want the such statement, stops after a case is true. You should use break statement or break keyboard after that case. And if you want to set a default situation, a default block of code that must be wrong if no cases match, we can use default part in switch statement. Let's continue in the next part. 30. Day 6: Conditional Statement - switch - Part 2: M, everyone, and we'll come back. What will happen if I remove the breaky statement here? Let me just comment this. Because the month name is John Fn. I commend the breaky statement here and also I commend the breaky statement here too. Let's see the result. As you see, I have June, July and August here. What happened? Because the month number is five, this block of code will be executed. And because I don't have any breaker statement here, it goes to the next block of code in Sg two. And this block off code will run two. And because I don't have any breaker statement here again, the next block of code will run two. But because I have a statement here, it goes out of the switch block, and this part will not rock. We may not have the same situation for other programming languages. Now suppose I want to show the name of the season using the month number in Java script. Here again, I have different way to show such thing, but I want to use S statement. I S and again, months for expression here. And inside this, I have different cases because the month number is 0-11. So I should specify the cases for these month numbers. And because for each season, we have three months. I should specify three case for each season. For example, let me show winter as case 11 that is December. I show Cs winter. I break a statement here because I don't want to grant the other block of code for case zero, again, I have winter and again, break, and for a case, one that is February, I have winter again. And let me format this scument is in old, Shift and if at the same time on my keyboard, And let me add break here too. As you see, I have the same block of code for different case in Sach here. In instead of defining the switch like this, I can group the cases together. So instead of writing these cases like this, I can write them like this case zero in case what? And I comment these two cases here. I don't need them anymore. I will add other cases for the other seasons too. Okay, I add the month number for other seasons as well. And one more thing is that do not have the same case in one such statement. For example, don't define case two for here and case two for here, for example. Let's see the result in the browser. And as you see, we have in summer season. One more point about such statement is that In these cases here, the expression will use strict comparison and each case is actually equals to this expression as the result. Mount equals zero. I use strict equal two to compare this expression with different values and show the result or do the block of code that is defined for each case. So if the type of this expression is different from the type that we define here for each case, these cases will not be applied, will not be matched. The mouth here is a number, so the cases here should be a number as well. But if we define these cases here as string, the case will not match. For example, let me set these five inside the string, like this, and see the result in the browser. As you see, I have nothing here. And if I define the default for this age, like this, and add break a statement as well, and for the document. And now I have this in the console in the browser because no case is mapped to this expression here. But if I remove the string quotation from here, and again, I have summer in the browser. So in short, switch to set different conditions and codes to execute. Switch, we'll select one code block to execute based on the expression that we defined for switch statement. If you want to execute a block of code, when there is no match, you can use default case in your switch statement. It can be in the end of the switch or everywhere of the switch statement. If you want to break out of the sage after a block of the code is wrong, you should use break keyboard to get out of the switch statement. Of course, you can group the same code block for different cases. And switch cases is strict comparison as I said, Value must be the same type to match. Values must be the same type. To the expression to match. If multiple cases matches the case, the first one is executed. If no matching cases are found, the default case is executed. If we default in the switch statement code after the switch, if we exist, we executed. We use a lot conditional statement in our programs, so practice them to learn. No. Thanks for watching and join me in the next part. 31. Day 7: For loop - Part 1: Hello, everyone, and welcome back. In this do, we are going to talk about loops in Jos grip. If you want to execute the same code, over and over again with a different value. For each time, you can use loops in Jo Script. Using loops, we can execute a block off code number of times. In the other hand, you can use loops to execute the same code more than one time with different values. Often we can use loops for arrays. When we want to work with arrays, we can use loops. In Java script, we have different kind of loops, and each of them has a special properties and a special syntax, and we can use them in different situations. We have four, four in, four, wide, and two d. And you can see a short description for each of them here. Using four loop, we can create a loop with three optional expression. We can see the syntax for four loop here. It has three expressions, that all of them are optional and a blocked code that must be executed when we reach to this loop. The expression one is executed one time before the execution of the code. So this expression runs just one time. The expression two is the condition to execute the code. The expression trip run every time after the code has been executed. When running the code reach to the end of the fall, that is before these close calibraces here, this expression may run. Normally, we use expression one to define the initial value for our loop, the expression two, to check the value of the initial parameter that we define for loop here and see if the block of the code can execute or not. And the expression tree is the increment or decrement the initial variable that is the loop variable. So it can run until the condition meets. Let's see how we can use for Jo script. Okay, I create a file name for thatM here and a related Jova script file for the JS, and I add reference to my JavaScript file here, and this is my JavaScript file. Suppose we want to show the numbers 1-10. We have different ways to do this, for example, you can write console that, number one, then number two, then number three, until the number Ten. What if I say to you, show the numbers 1-1 thousand 1-1 million. How you want to do for this. The other way is using loops. For example, here, four loops. Four inside the four parentheses here, as we saw, we need three expressions, but all of them are optional. So we can omit all of them. But let me first define all of them and then amd each and see what will happen and how we can fix the problem. The first expression is the initial variable. The variable that will control the four loop. For example, let me define. I, that is a start from zero. For initial variable, In addition, that you define the variable, you should set the initial value as well. Like this. The expression to is used to evaluate the condition of the initial variable. Is this okay to continue for or I should ex the four loop. For example, if I want to show the numbers 1-10, the condition could be less ten or equal to ten. And the last expression is the increments the value of the initial variable. So here, I should increment the variable that I define for my loop i plus plus. We already know about the plus plus sine that is equal to let me add comment here. Equals plus y. And then you need a block of code that must be run for your loop. Let me formate this document. Now it's better. Now if I want to show all these numbers in the console, I can write, console that show me the variable. I. Now let's see in the browser. As you see, I have number one, 210 here in the brows. Now let's change the definition for this problem. Let's show out odd numbers using four. We have different ways to do. So let me copy this for, look from here and paste it here. One way is that inset of incrementing. One I increment. The initial able by two. Here I can write. Let me delete all of this. Here I can write. I add and assigned to number two. This is addition assignment operator that we are already familiar. Let me come in the upper loop and from my document. And see the result in the browser now, as you see, I have all the odd numbers in console in the browser. Instead, if I start I instead of one from two, Save and C. I have on the even numbers for one, two, ten. So the increment for the initial variable must not be exactly one. We can jump more than one inside your loop. But Let me add another fo do here and do not define any expression. If you want to omit any expression in four do, you should specify the semicolon at least. You can't omit the semicolons here. Inside this, I want to write console that blog. This is a, something like this. See the browser now, and as you see, I have this in the browser. This loop is an endless loop. It will never end. So we have to define a condition to exit this loop. Unless as you see, the counter that is running this loop is here. If you want to omit the condition here, you need to exit the loop inside your loop somewhere. For example, you have sub code here, And after all of this, we should exit the loop. To exit the loop, you can use break statement. Now let's say I C. As you see, this message is just showing one time. But we don't use loops like this, so we have to check a condition to exit the loop. Don't want to set the initial variable and the increment for your variable. Inside the four expression, you need to define the initial variable before your for loop and increase or decrease this variable inside the block of your foop at the end of it or anywhere that you need it. Check for the end condition for the exit condition inside your loop as if you don't specify any of this expression here, you need to define them before or inside your four So for example, let me define the j here from zero, for example. And here I want to show the variable j. And after showing this variable, I want to increment this j plus plus. And here I will check if j is greater than or equal to ten g rick four loop. And I comment this brick statement here, save and C. As you see, I have from number zero to nine. Because the condition here says, if j is greater than or equal to ten, it should bricks. We can set the exit condition, the exit statement, anywhere in your fold that you need it. Instead of incrementing the initial variable, you can decrement the instead of incrementing the initial variable, we can decrease it inside the f or info expression. For example, let me define another loop here. And let me sit from ten, and until I is greater than zero minus minus. What should happen? Show these numbers in the castle. Format my document, save and C. As you see, I have from number ten to number one here using for loop. One point about what I've done here. As you see, I declared variable I here for this loop. And again, I declared a variable I here. Y Java script didn't give me an error for this. As I said, using lead when you define a variable, you can't redeclare it. And actually here, we did not redeclare our variable because anything that you define inside the for loop expression, anything that you define here, for example, this I here, Only will be known inside this for loop. I can't access this I outside of this. For example, let me copy this line and paste it here and see the browser. As you see, I have an error here. I is not defined. And where is the problem right here. Why? Because the I is defined inside the for loop expression, not before it or after it. But here I'm defining the j outside of this for loop, and I can access this j outside of the foo two. Again, if I want to use j as in this as the initial variable. For this up, I can use it. But this if I define this as j, this j is different from this. This is local to this for loop and this is global. This is because of the scope of the variables. Let me undo this. Let's continue in the next part. 32. Day 7: For loop - Part 2: Everyone and we'll come back. You can also have nested for loops in your javascrip coat or nested loops in your javascrip coat. For example, let me show you something like this. Four, let I from one until I is ten or equal to ten increment. By one. Inside this, I define another for and split j from one until j is less ten or equal to ten, and j increment by one. And show the console the multiplication of this I and J, and let's save and see the result in the browser. And before this, let me form this document. I forgot to come let me come in this line to not have an error. And as you see, I have the multiplication of I and J together. I have the multiplication table here. So using neeset loops, you can have something like this in your Java script code. Let me show this product that we are displaying using two nest force together better. Here, inside the first four, I can define a variable. I want to show the result like a table in console in the browser. Here, I define a variable, for example, row and make it an empty string. Here, inside the second four, instead of dispelling the result in the console, I add the result venue to the row. I use row addition assignment to what i multiplication j plus space inside the double quotation. After the second loop carefully, this is the end of this for loop here. So after this, I will show the result using console dot. Another track to use VSCode to show the console. In Joscp is that you just write log and choose the second log that is saying to the Csle. As you see here, and when I press inter here, it brings me consul dot log function. And I display row here. Let's say and see. As you see, I have my product label like this in the browser. What is actually happened here? First, the outer loop will start with the value, from what? When I is one, the second loop runs from one, two, ten. When the value for I is one, the second, the inner loop will runs from one, two, ten, one, when it's finished, the row will be displayed in the cos. When it finish, I will be added by one, and now I is two, then this four will run. Ten times using I two, and J will change every time that this flop build. Rots. And each time inside the outer room, this variable will be defined and it's empty. So here we can see that I don't have the value that is for the previous rob. In addition to brick that can exit from the loops. In ovscap, we also have continuum. What is the difference between the continuum and break statement in loops? Is that the brick exit from the loop, but the continue go to the beginning, but the continuum, we'll go back to the beginning of the loop. For example, if I here say if I equals to five continue in the sad of doing these four. Let's see what happened. When the I is five, Continue. I don't want to show the result of multiplication of five to any other numbers 1-10 in the console. As you see here, I have the row one, two, three, four, but I don't have the row five here. Also, if I add this line to here, copy this line and p here, and turn this to j. I want to continue from the beginning, when I reach to the J five, let's say C. As you see, I don't have the result for column five, row five here and column five. Instead of continue, if I say brick and also for here, I come this and I say rick C, I just have this in the browser. I don't have for number five, and after it, this multiplication table. What is actually happening here? When I is one, all the block of the coat here will run, and then I turns to two. So again, the whole of this coat block will run. Until five. When I reach to the five, this break, it means exit from this four. Each brick statement will back to the nerest loop, and also here. When J is five brick brick from which loop, this loop, because this is the nearest loop to this brick statement. Let me show you another example usage of for For example, if you want to calculate the factorial of a number, it means the product of an integer and all the integers below it. For example, let me add in comment here. If you have number three, and three factorial is equals to three. Multiply two, multiply one, that is equals to six. And let me define my number here. For example, four, or let me say it as three, and we can change it to four as zero. I can do factory using four loop. Four, let start from one until i less than or equal to a number. I plus plus, and because I need the result at the end, I should define another valuable to store the result. Set result as one. And here, result must be multiply assignment. At the end, I will shows that something like this number plus bacteria. Is result. Format my document. I want to com in this nest that looks from here. Let's see the result in the browser now for this as you see, three factorial is six. If I change this number, for example two, for example ten, I have ten bacterial as this. As you see, by changing the value for this number variable, the times that these four will runs will change. If I said, for example, minus five, you see, the result is why the result is one? Because this condition never meets. Never I is less than minus five, because the I starts from one. So your po may not be never executed. Thanks for watching. See you in the next 33. Day 7: While and do...while loop in JavaScript: Hello, everyone, and welcome back. In the previous video, we talked about loops and for loop in ova scrip. In this video, we are going to talk about y loops in ova scrip. Y loops can execute a block of code as long as the condition is true. For y loop, you need a condition. We can see the synthase for wide loop and duvide loop here. We need a condition. As long as this condition is true, this code that is between the curly braces in ruts. Also here, we need a condition here, and as long as this condition is true, this cote w t. But what is the difference between the wide and dubide loop? Let's see this difference in action. I have a let file here and related to while S. Inside this, I want to define wide loop. As I said, for i loop, we need a condition. We can write the condition like this or choose this one and press inter. As you see, we need a condition here for loop. I have to define the condition. For example, ten, less than 20. This condition is always true. And if you run like this, this is an endless wide, and you have to exit your wide blue using break statement somewhere inside your wide code. Let me make it better. I define a variable co counter, for example, as one with the start value with the initial value. And here, I said white counter is less than ten. Show the value of the counter in the lock. Counter. When I want to use wide loop. I need to make the condition here fs. As you see, the counter is one, and this condition is true. And as long as this condition is true, the loop will rot. So if I want to make this condition false, I need to make changes to the counter value. For example, for example, increase the counter value. Let's say. As you see, I have number one, two, nine in the console. Because I start the loop from one and count 210. But when the counter is ten, because ten is not less than ten, it will exit the loop from here. Let me define another loop using one. Let counter two as one, and I said two, I choose Dubil and press inter. For dbd I need a condition counter two is less than ten. I want to copy these two line of codes here and paste it here and see the result in the browser. Also I want to add a comment for here. Do wide, and also for here y. And see the result. I can't see the result for dvd, but let's see y. Here, I'm using counter two as in, and here I'm checking the condition for counter two y it reached to the tent. But inside the, I didn't increase the counter two value, and I didn't show the counter two value. So because this condition, we never get false These two wide is an endless loop. So I should fix here and here and see the browser. When an endless loop is inside your java script, the browser may not respond to your action, so you need to close the browser and open it again. Okay. Now the problem is faxed and I have 129 for up here, and one, 29 for du wide here. But what is the difference between wide and du wide here? I'm having the same result for both of them. Let me change the counter value as ten for wide, and here for counter two, a ten for due. Let's say I see the result. As you see, for i loop, I don't have anything in the console. But for dvd, I have ten. Why? Because the code that we defined for dvd runs at least one time. Why? Because the condition is checked after the du wide body, the dvd block of code. But for i, the condition is checked. First, and because the counter is not less than ten, this code will not run. Here, the counter two is ten, and these two lines of code will run and then check for the condition. And because the condition is false, this code will not run again. One more point about y loop is that if you omit expression one and expression three, for four loop, we can consider it as wide. For example, let me define. I as one and define four loop like this. I don't need the expression. Semi, but I define the condition here I less than ten, and I don't define the increment inside the four statement. But I show the I in the case and I have the increment I inside the loop. This four loop is the same as the i op. If I define the y loop like this. The j as one, y, j is less than ten. J and j plus six. This four loop, and this i are the same as each other. Thanks for watching. See you in the next. 34. Day 7: For..in and for..of loops: Hello, everyone, and we'll come back. In this do, we are going to talk about four in and four loops in JavaScript. Using four in, we can loop over the objects properties and arrays elements or arrays items. We can see the syntax four in here. The key here defines a property in the object or an item inside the array. Using four of, we can loops with the value of an inter object. Iterut object can be arrays or can be tricks. You can see the syntax for four of here. For every variable of an iterable object, it should do a block of code. Let's see. What is the difference between four in and four and how we can use them in ova script. To show four in and four of, I have a four in four of the GS file here and related SL file four in four of, and also a relation to each other. Here, to show the usage of four in. Lo, I want to define an object. Let me define my object, for example. User with some properties, for example, first name as something like this, that name, something like this, H 25, and favorite color, for example, as red. First, I want to use f I need to define a variable for key or every properties in my object? Where is this key in my object? What is the name of the object? User. Here, I can show the value of each property Cs do like using Csle do key. Let's see what we have. Saves in the browser. As you see, I have the name of the properties actually here, not the value that I define for each property. How can I access to the value for each property using four du just the comment this slide. Here I say user and inside the square bracket, I should define the property that is key here. I can use or access to all the properties in my object using four in loop. Like this and using this statement. See the browser. Now I have the value for each property here. If I want to show the property name and the value like this that I have here in the transit, I can I can write like this. I duplicate this light, coming, and here, I say key plus a colon in a string and in a space before and after it and saves in the browser. Now I have something like this in the browser. What if I have an array? Let me define an array of numbers like this, and I want to use four in to show every item inside my array. I use four. Let I in numbers and show the I in console. Again, what I have in the console is zero, two, three. That is the index of each item in the array. So if I want to access the value of each item in the array, I should define the log like this, duplicate this line, and I should say numbers. And inside the square bracket I use, that is the index of each item inside the array. This line and sin the browser. Now I have the items inside the array in the Csde. Now if I want to show the item and the index of each item in the console, I should write like this replicate this. I, something like this in the string and add to the numbers I and com this save and sin the browser. Now I have the index and the item inside index of the R. For object, I use key, the name of the key it depends on you. And you can see this name whatever you want. It's a variable name that you can use this variable inside this loop. For object using k, I can access to each property, and for arrays, I can access to each em inside the array. What about four of loop? Let me define four. I define I here. And set of name of my arrays. As I said, you can use four of four it objects, it variables that can be arrays or strings. Here, inside this, I lie the value of I in the console, and see the result in the browser. As you see using four I can access to the value of each item inside the a directly. I don't need to use the variable that I define inside four as the index of the items. Look here, the variable is the index of the items inside the ad. Y here, the I is the item itself. Let me rename this two item that is much more obvious to rename a variable inside scape code. In VS code, you can press F two and write the new name and press intern. And as you see, this I turn two items. Save and C. I have this in the browser. And let me define an train const message, for example, if I said hello as the value for this message, and then I use or C of message. The name of the car, it depends on you. We can set the name, whatever you want and show the value of care in the console. Now, what I have, t say and see, I have each character inside my string in the console in the browser. As you see, I have two L here. So it is displayed like this in the console of the browser. Using four for string variables, we can access to each character inside the string. Another point here is that as I said, for s, we have a four e and map method that can do the same thing that we do Here. If you don't remember that, please back to those videos. Thanks for watching. See you in the next.