JavaScript Tutorial for Beginners [JS Crash Course 2024]

congratulations on deciding to learn JavaScript, this intensive

course

is actually a very small part of the mini software development bootcamp that I teach, where you learn every part of the software development lifecycle to become a software engineer or understand the full concept and then go and pursue a career in cloud engineering or devops engineering etc. but in this video we will dive into JavaScript and really understand not only the syntax and the basics but also the important and very interesting concepts behind of JavaScript. We'll start by looking at the big picture first. so we can understand exactly where JavaScript fits in when we think about website programming and then we'll jump into the demo and program with JavaScript, so let's get started right away.

Imagine the following scenario: You wake up in the morning, drink your coffee, open your laptop, and open Facebook in your browser, so let's pause there. What happened when you typed Facebook into your browser and saw a new feed with all the new things that happened while you were asleep. What happened there in the background technologically. So Facebook is an application. that some developers located primarily in California are developing and these guys and gals are writing a bunch of code and all that code that makes up Facebook lives in California, so what happens when you open Facebook on your laptop is that part of that code that You live in California you travel to your laptop to your location and you end up temporarily living on your laptop, so sometimes when you refresh and you see a blank page or it loads and you get upset because you can't see your feed in 3 seconds, there It is when all the data comes or travels from somewhere to your laptop, so it may need some time, so how does it travel?

There are Internet cables everywhere in the world. Actual physical cables that allow electricity to travel from one place in the world to another. That's how it all is. connected everywhere and that's why in some remote places in Africa or Asia or just in remote villages anywhere in the world where there is no Internet and you wonder how it is possible that there is no Internet, that's super crazy, but actually It's pretty simple because no one built it. those internet cables close to those areas and regions for economic reasons and so on, if you think about it, it would be super inefficient if every time someone in Europe opened Facebook and all the data needed to travel to these places from California, then Facebook has created locations evenly distributed around the world that store some code and data that doesn't change much so it can get to you much faster, so let's go back to that part of the code that just traveled to you, which is HTML, CSS and JavaScript .

What are these when you see a website that just looks ugly, so we just text, no fun colors, no style, it's bare HTML. It's necessary, but no one wants to see plain, ugly text without any styling, so what makes pretty, colorful text? funny thing is CSS, it's like a flash in a skeleton. Now you have a flash that looks good but doesn't do anything, it doesn't move, it doesn't talk, it doesn't respond, you can interact with it and it's the same thing. Likewise, with HTML plus CSS pages, typical use cases are business card websites where you can read text displayed in a nice style but you can't leave a comment, you can send a message, you can do anything with it. website, so that all that action comes exclusively from JavaScript. so you want to upload a photo on Facebook that is JavaScript you want to send a message through a messenger that is JavaScript you want to like your friend's photo or leave a comment all JavaScript so that everything you interact with in the UI , which means user interface, whether it is through JavaScript and the combination of these three HTML, CSS and JavaScript is called interface, it is the Facebook code that everyone sees, so it is in the front and as I said, all these three files come out on your laptop when you open Facebook so you can view them and even edit them so you can go and change the style of Facebook this way and this will not affect anyone else in the world as everyone has their own copy of these files on your laptops, but there is another part of the code that does not reach you. the calling code is in the back and no one can see it, so now you might be wondering if I can do something on the front end like upload images.

Send a message to someone leaving a comment like what is the backend and what works well when you upload an image. on Facebook you surely want your friends to see that too or when you send a message to someone you want to keep a history of these messages, that means you want all this data to persist or in other words the data to be saved over time now if JavaScript only exits. on your laptop it wouldn't make sense to have that photo only locally on your computer, that's where beon comes in, so what happens is JavaScript takes that image that you uploaded, puts it in an envelope and delivers it to the internet saying "hello".

Can you deliver this to the backend at this specific location so that we can now follow this delivery to the backend and see what happens there or what the backend does when it gets that image now? Beck code can be written in Java, Python, PHP. or even JavaScript, so there are different technologies that you can use to write all that part of the backend code, so let's say in our example it's Java, so what does Java do? Check and examine the photo you see, if it is a valid delivery, there is no threat. There is no danger.

I know the sender. I trust it, so I'll open the envelope, see that everything is okay, and hand it over to the database to save in latitude. So the database is like a warehouse, it's a big space where you can store all the images I like. The comments that different users are producing are all there, so to have a more specific understanding, let's see what the location where the signal code and the database leaves in quotes actually looks like, as I mentioned before, Facebook has all these buildings distributed throughout the world. physically constructed buildings with servers inside them and I don't know what you imagine when you think of servers, but whatever it is, it's probably not very close to reality, so let me show you an example of server construction from a typical large company like Facebook, so it's a location where machines that are interconnected with each other work 24/7 to ensure that Facebook or this application is available to everyone in the world all the time and that's where Beck, the code and the database actually go, that's where all the magic happens, so when the envelope is delivered to your server, that's where it ends up, so the address it's sent to is one of those machines among these hundreds or thousands of machines that will validate your image and then save it in a database, so everything happens there, so now consider that your friend logs into Facebook on her computer in the same way and the Code travels to your laptop along with new data, such as images, messages from friends, etc., all coming from these servers, so how does Facebook know what data it has? you should see in your news feed now in the database store.

Facebook creates isolated spaces for each user with their personal data images, etc. and obviously on Facebook you want to have some privacy, meaning you only want your friends to see your posts, so Facebook creates connections in the database between users who are friends and that's how Facebook decides what information to send to a user when they log in to the application along with new data such as images and messages from friends, including the image you just uploaded, all coming from these servers, to summarize a web application is always made up of three components. You have a front-end code.

The backend and the database. The front-end is what you see and interact with in your browser in the application's user interface. The backend is the code that waits for new messages from the Front End. about the changes you make, such as new uploads of new messages, likes and handles them, and the database is where all these changes are stored for future use, such as when you return the next day to use the app or when your friend ends the application, most applications are written by teams of developers and not just a single developer, and there are many developers who are full stack, meaning they know all three can work with the front-end, the backend, and the database;

However, each of these three areas on its own is its own field, so some developers actually choose to specialize in a single area and become, for example, frontend developers, so at large companies like Facebook you would have teams with specialized frontend developers, backend developers, and database developers, and things like backend frontend databases and virtual servers that you really learn. all this in our mini software engineering boot camp, so if you are a complete beginner in this field and have no knowledge and feel overwhelmed by all these concepts and components and don't know where to start, then this mini boot camp it will help you. will be exactly for you, so be sure to check out the link to the

course

in the video description.

Now that you know the basics of how websites are built and how the web works in general, let's start by learning the basics of programming with JavaScript, so let's see what JavaScript is and how it is used. All modern web applications, which are applications used through an Internet browser, are written using JavaScript because it has become the standard in web application development. The way these web applications are built is that it has a layer of HTML that CSS styles and makes it more beautiful to make this beautiful surface, also called user interface, smarter and smarter. We use JavaScript to write logic to create features.

Examples of such features are user registration, booking a ticket, online shopping, sharing photos, writing messages, etc. When you think about how websites are built, you can separate the design layer and the logic layer, and in large, complex applications used by millions of users, each part becomes large enough on its own, so it also There are website designers, also called UI designers and JavaScript developers. as separate works, maybe you have heard of programming languages ​​like Java python C etc., in one sentence these are all backend programming languages ​​and JavaScript is a frontend programming language, in fact JavaScript is currently the only language of programming that you can use to write frontend and code now.

To make all of this more tangible, let's look at what HTML CSS and JavaScript code actually looks like. HTML CSS and JavaScript are simple files that are written in a text editor and these files have texts and keywords that have specific meanings for the browser, in other words. The browser will know exactly what to do with these keywords, so the question is when you create a file with JavaScript keywords inside, how does the browser know that it is JavaScript and not some other text that it knows because you explicitly tell it so using the extension Which file type will the typical simple file use?

It has a text extension txt, for example, but when you create a file called, say, app.js, the browser knows to interpret the entire contents of the file as JavaScript code and it works exactly the same with HTML and CSS. Note that here browsers are also written by developers using some code, so this functionality for interpreting HTML, CSS and JavaScript was explicitly programmed and part of all modern browsers. It is important to mention here that learning HTML and CSS is quite easy as there are only a handful of concepts that you need to understand and learn.

They don't change much over time and are also less logical, so it's more necessary to learn the syntax by heart to use them. JavaScript, on the other hand, is very dynamic and much more powerful since you write almost all the logic with it, so JavaScript changes. a lot and continually improves to make writing all this logic easier and more structured, so obviously when you look at a simple web application, the logic for a simple payment, uploading an image or writing a message can be simple and easy, but think about the complex websites we use every day. which have hundreds of functionalities so it's a lot of JavaScript code that developers have to manage and work with and that can be a big challenge because over time many developers or teams of developers using JavaScript came up with different ways to improve it and make it easier and better and they did it in parallel, independently of each other or also based oneach other's ideas and as a result different flavors of JavaScript emerged in quotes or as we call them Frameworks, so framework is basically an improved version of pure JavaScript that offers its own additional concepts and syntax in addition to the concepts and syntax JavaScript frameworks that make it easy to write complex JavaScript code, and most of these frameworks help you do pretty much the same thing, but the difference between them is how they help you write the code, structure it, and manage it. and naturally when other developers tried all these different frameworks some of the best frameworks became widely accepted and some of the most popular ones are reactjs angularjs and vuejs so both pure

javascript

and

javascript

frameworks are continually being developed and improved in parallel, now to mention Here nodejs which is also a JavaScript framework, is different from all others because it is not meant for frontend code but for backand code, so it is an alternative to Java Python C etc.

This means that if you learn JavaScript, you will basically be able to program everything. web application from front-end to backend using only JavaScript, which could be an incentive to learn JavaScript. This means that to learn any of these Frameworks that I just mentioned, you must first understand the basic concepts and syntax of JavaScript because all these Frameworks are based on JavaScript and once you have learned the basics of JavaScript, you can go ahead and choose one. of these frameworks to learn and you will find it much easier to learn the concepts and syntax of that framework in addition to JavaScript. and in our software engineering course we learn JavaScript in depth and then we learn the vue.js framework specifically and how to build applications with he.

Also, in the course I point out exactly and compare the advantages of using a framework compared to basic JavaScript to build the front end. -finish applications, so in the following sections we will cover the basics and syntax of JavaScript so that you have a foundation for learning any JavaScript framework, so let's start by learning the basic components of JavaScript, which are data types and variables. and we'll look at the five main data types of javascript and then I'll show you what variables are and why we need them. Know that these two building blocks are the same for any programming language you learn, so if you were doing a Java

tutorial

the concepts would be the same, the difference is in the syntax and this is good because unlike learning natural languages, when you learn one programming language, it will be much easier to learn another, so with that being said, let's now dive into the easiest way to get started.

Writing JavaScript is done directly in the browser as all modern browsers can interpret JavaScript and come with so-called developer tools, so open Firefox or Chrome browser on your laptop if you don't have these browsers installed I suggest you use them. install because using browsers like Internet Explorer to run JavaScript is not a good idea so I would download Firefox or Chrome and in your browser you would right click somewhere on the surface and select inspect if your browser is in your native language then it would be called something like that. otherwise it should be translated as inspect and when you click you will see something like this and this space here is called developer tools and here you should see a console tab and when you click on it you will get this space where you can write JavaScript directly.

In the next section I'll show you the different places you can write and run JavaScript and which one you'll typically use as a developer, but in this part we'll use the browser console so we can demonstrate some simple examples. so the first type of data we are going to talk about is numbers, obviously when you write an application you need numbers. Some of the examples are: YouTube shows the number of subscribers for each channel or the number of likes for each video or how many. The videos that one has when searching for something in a web application like Google for example, you usually see total results etc., these are all use cases where you need numbers and these examples use integers, but for example when you have an online store where you need to show prices the prices obviously will not always be integers but decimal numbers with the definition of shipping, also the Amazon ratings are correct, they can be 4.5, for example, and in JavaScript there are own data types for integers and for decimal numbers, the data type of integers is called integer and these are numbers like 0 300 minus 45, so positive negative numbers are all integers and decimal numbers have a decimal data type and again they are positive or negative or zero, so 0.0 um 90 777 minus 50.5 are all decimals, the second data type is a string, the way I like to explain what a string is is basically everything you see on your keyboard, so obviously all letters no matter what language they are in but also all special characters like M percent plus minus and also the space character on your keyboard also has numbers and numbers are characters or strings too so how do you Does JavaScript know whether to refer to a number as an integer or a decimal like five, for example, or a character five?

He knows it using quotes. So you tell JavaScript that We are using strings using quotes, it could be single quotes or double quotes. So these simple characters or any combination of them are a string, so let's say a couple of examples, so three in quotes is a string a or with umls letters from non-English alphabets. combination of letters and numbers, special characters like in email or in password and also an empty space character is also a string so just to mention here the difference between character and string, character is basically just a letter or a special character number one and the string is one character or a combination of several characters, so these are all strings and these individual keys are characters.

Another data type in programming languages ​​is boolean. Now, to understand this, let's say you enter a wrong password while logging in to your app. You usually get a message saying you provided it. an incorrect password or you accidentally enter a wrong credit card number when purchasing tickets or an invalid email address when registering, so in the background the developers write JavaScript code that validates whether the information you provided is incorrect, correct o correct and to express that error o Boolean values ​​of correct state are used, so the word true expresses the correct state and false expresses the incorrect state, so again, just like with numbers, you can write a simple string false with quotes and JavaScript knows that you mean a string without quotes, it will be a false boolean expression, this is how JavaScript can differentiate between those two, plus true and false can also be used for simple situations, yes no, like if the apartment on Airbnb is available to book on this date.

Yes, that will be true or false in boolean terms or whether the user is logged in depending Depending on whether they are logged in or not, you will see a different web page which is a boolean expression. Are you a premium user? True false also expression bullying. Etc. another data type is an array that expresses lists. Consider applications that display lists of the same type of data, such as a list. of friends on Facebook or apartment list on Airbnb or comment list for your Instagram image lists have their own data types in all programming languages ​​in JavaScript their data type is an array, for example, the list of names from friends will look like this it will be an array which is an array which includes multiple names and now the array syntax which includes square brackets this is how JavaScript knows or can interpret that this is an array or it could also have a list of qualifications for Amazon products for example so let this be an array with numbers as you see the array contains other types of data so here we have a list of strings and here we have numbers and in JavaScript you can mix different types of data inside an array here we have integer and decimal numbers in an array, you can also write an array like this where you have a string in integer and boolean expression and the latest data type in JavaScript is an object now in Amazon review, for example, not only will you see a list of ratings, you will also see the author's name next to the rating and text they wrote.

Additionally, you need all this information grouped into one element in the array, express that using the data type of the object so that a single qualifying object looks like this and not the curly braces syntax, as we saw, the array was expressed using square brackets and the object is written using curly braces, so the syntax is important for JavaScript to understand what type of data it is writing. Another example is an apartment object on Airbnb that will include all the attributes it has such as location, price, ratings, description, availability, images, etc. So an object for that information will look like this just with more information inside and here you will see that the browser's syntax highlighting also helps to see that the boolean strings and numbers are colored differently, which means that JavaScript understands the difference among them, you see, the object has key-value pairs so it knows which value represents what, so all of these author and user names have 12 ratings out of five.

These are key-value pairs where the key basically describes what the value and the name of that key represent. It is totally up to you, you decide which one it will be and you can also use any data type as a value inside an object so here we have a boolean integer string and an array as a value and you can also use another object as a value inside. of an object and finally if you go back to ratings you will have multiple rating objects so there will be a list of rating objects so the final list of these rating objects will look like this so it will be an array with square brackets and you will have a bunch of objects that are separated by commas, this is probably the most complex structure you will deal with most of the time, so it shouldn't get much more complex than this.

Now we saw all these data type example values, but how are they used for writing? a logic call in JavaScript, the simplest use case is some basic addition, subtraction, etc. for numbers, you can use Simple Primary School Arithmetic to calculate basic things and here I will take the opportunity to break this common misconception that you have to be super good. in math to learn programming, which is 100% wrong. I was a software engineer for many years and worked on many different projects and I have hardly used anything more advanced than simple arithmetic like plus minus, multiply and divide when writing web applications, so in JavaScript you can do all this, you can subtract, multiply, divide and you can also combine them like you would with a calculator and of course you can do the same with desktop decimals.

Some real-life use cases for this basic arithmetic are, for example, when you add multiple items to your shopping card on Amazon, you see the sum and you also see the price breakdown, which is the prices of the items plus the costs shipping or when you have product ratings based on all individual ratings, it shows the average rating or on Uber, for example. you see the distance from the pickup locations to the destination in kilometers or miles and in minutes all these are simple calculations that are possible in JavaScript now obviously all these operators are intended for numbers but there is a case where we can use the plus operator for string data types, so what will happen if I write string 12 + string 12 to get 1212?

So what happened here is that JavaScript knows that these two are strings and not numbers and instead of adding them, it handles them as strings by pasting them together. each other and in programming that's called string concatenation and no you don't have to remember that word just so you know there are strange names for simple things in programming the same way you can paste a string to any other type of data to be able do blah to 12 and the number will also be converted to a string so to speak, or you can do the same with boolean values ​​because JavaScript interprets this as you want to create another string from these two values ​​and these examples probably won't help. a lot.

It makes sense, but in the next section of this video I'll show you some more real-life examples of why this concept is actually very important. Now let's understand one of the most important building blocks of variables in any programming language and see what variables are to understand the concept. of variables think about the following scenario: you change your username on Facebook, so obviously your usernameThe changed username is displayed on your profile, but also all the comments you wrote before the name change should now appear under your new username and also on all your friends lists. The new username will appear fine, which means that if you had a Facebook code where your username is written in all those different places, then you have your username in the profile section, you have your username in the comment, a comment 2, etc. and on all your friends lists, right? written directly as is or let's consider another example, think of an online store, each product has a price and is displayed in a list on the product details page and maybe also in combination with other products, so if the store now offering a discount and the price changes Obviously the price needs to be updated in each location where it is displayed, so again in the code it will look like this.

Obviously this is not valid JavaScript code, but just to give you an idea, somewhere in a Javascript file you have the product list where the price of the product is written directly as is and it will have the same section of the details page of the product and the combination now, when the product username changes in those two scenarios, all of these variables need to be overwritten, which means it will have to go. and change the price here and here and here and the same with the username change it everywhere it is used now, that would be absolutely inconvenient considering apps are so dynamic and things change a lot, that's where variables come in , instead of typing the actual value. value in 10 different places, you write the value once and then reference it 10 times from 10 different places and that reference to the actual value is called a variable and it gives the variables a name that makes sense for that value, e.g. product a price equals 50 so now you create a reference for value 50 which is called Product a price or username equals app user a so you take the actual value which is a string and create a reference to it, but in addition to that, you must also inform JavaScript explicitly. that this random name that you just came up with is a variable and you do it using the VAR keyword like this and remember that keywords are words that have a special meaning for JavaScript and that's why if you noticed that the color or the highlight of the word changed once I added VAR in front so now JavaScript knows that this is a variable keyword and this is the name of that reference or variable or the same with product a price variable and in the code it will now look like this, like this that you will first create that reference somewhere like this and then in all the locations or all the places in the JavaScript code where you need that value, that actual numeric value, you use the reference instead of the actual value to have your text and the reference to the number in all those different locations and here look at the plus operator that I showed you earlier.

This is an example of string clustering, which means that the string is attached to another value and this is where this concept is very useful, when you run or run this line. What happens is that JavaScript in the background replaces this reference with the actual value, so when I run this I see a product with a price of 50 and this is a real example where the plus operator with strings is actually very important and you will use it a lot because we will use variables a lot so that this variable concept is keep more. Let's consider two additional use cases.

First, consider multi-language apps. In most apps, you can select a preferred language and see all navigation buttons. Etc. in your language. Now if the app supports 10 languages, obviously. developers do not create 10 different websites but the same text is translated into 10 different languages ​​and referenced using variables and depending on the language the user selects the correct reference is used and the second use case which is very Important, it is user input, so when you register in a web application, you have to enter your first name, last name, email, password, all these are user inputs, so what you enter in the application as a developer when you prepare that code for future use, you don't know what these values ​​are.

This is because users can enter anything, but what they know is the name of the variables that will reference these values ​​and this way they can use the actual values ​​without even knowing what they are. Now the question is when do we create JavaScript files and write. a lot of JavaScript logic inside. How do we execute this logic in the browser? How do we give that JavaScript code to the browser to execute? There are three ways to run your JavaScript code. The easiest way to start writing JavaScript is directly in the browser. This is a place where you can write JavaScript directly and the browser will interpret and execute your JavaScript code right here so you don't have to configure anything and this is the easiest way to get started, especially if you want to try some simple commands, so let's do it . write some JavaScript code in there so you can create variables here or you can do some calculations and you can do it in number one and number two, etc., so you can do a lot of things here; however if I refresh the page of course all the code will disappear and also you can only run one command at a time and usually when you are developing you want to save that code and run it all at once and not have it disappear every time that you update the browser, so for that you need to write JavaScript in a file and then give that file to the browser to execute the internal code and the file that the browser accepts to execute the JavaScript code is HTML.

I'm going to create a basic HTML schema so that our browser can execute the JavaScript code, so how do I? write the HTML file with JavaScript code in an editor so if you are on Windows you can have a notepad, a simple text editor or ionm has a text editor and I can create a new document if I open it I can type just normal text here so I'm going to write some simple html text and HTML as we saw in the beginning is a separate programming language to basically write the structure of a website and I teach full HTML and CSS in the development miniot field software, but here our focus is on JavaScript, so we're going to use the most basic HTML possible to be able to run JavaScript on the website, so you might be wondering if I'm writing HTML in the same editor where I would write normal text, how do I do that? do you know the browser? is an HTML file, well, when you save the file instead of a text document, I'm going to choose HTML, so the HTML extension and I'm going to call this file index, which is a standard or common name for the main HTML file, so when you save This you also see the icon that has the Chrome logo or maybe some other browser logo which means it is a browser executable and since this is just HTML to add JavaScript code I will add a tag called Script there it is where JavaScript goes and and this is a part where we would write all the JavaScript code, so for example, here I can create a variable called some name and so on.

Now I said you can write all the HTML and JavaScript here but the problem with using the simple editor. is that they don't help you write code, so here you see that they don't highlight keywords, they don't tell you that you made a syntax error or any other advice, for example, in the browser, when we write a VAR name, some name of yours . get the keyword highlighting of the data type variable name, for example if it has a number it has different highlighting etc. so you don't have any of that in the simple editor and it looks pretty pretty too ugly, so there are special elements. editors for different programming languages ​​that help you with highlighting and other functions to write the code and there are special editors for writing HTML and JavaScript code, specifically the one we will use in this course is webstorm by jetbrains, which is actually embedded development.

M environment or IDE and not a simple code editor, what exactly does that mean? Well when you install webstorm you basically have everything you need for website development so several features are included beyond just writing factory code or in other words get an IDE with full batteries included and we'll look at some of its cool features throughout the course, so if I type webstorm download we can check out their download page for your specific operating system and if I click on developer tools, you'll actually see them. they have a list of multiple ideas and they have dedicated ideas for different programming languages ​​and webstorm is specifically for JavaScript so it gives us these amazing features specifically for JavaScript development and the best thing is that they have special offers for students, universities, companies popups for all your ideas including webstorm, so let's go ahead and download the webstorm IDE for free to develop our JavaScript application.

I'm using Mac OS so I'm going to download this and once downloaded just double click on this setup file let's drag webstorm into the applications and there you have it we have webstorm available locally let's double click again and it will open the IDE webstorm, this is the welcome page and let's go ahead and create a new product project, let's call this application JavaScript and create and in the webstor configuration I'm actually going to zoom in so you can see the code better, so I I'll set it to 150 and that's it, this is what we're starting with, so now let's create a new file in our JavaScript application project if you go here. and right click with the mouse, you will see these options and we can create a new generic file or if we know that we are going to write a JavaScript or HTML file, we can specifically choose that type of file and this way webstorm.

It knows that you want to write HTML or JavaScript code and it actually helps you create the boilerplate code or the initial code for that file specifically, so let's see what happens if I choose HTML file from the options and we call this file index.html like we make. I did it before and we know that we have an HTML extension on the file name and if I press Enter there, Webstorm actually knows that this is a basic HTML structure, all these tags are necessary for a proper HTML page, so it automatically generated them for that you don't You don't have to write it from scratch, this is very convenient and we are going to give a tiple to our web page index.html, let's call it JS application just like we did here and that's it, now you can ignore all this code here that is generated automatically. type of structure, a main structure for a properly formatted HTML, so everything that is needed is here, what we want to focus on is writing our JavaScript code, so if we check our index HTML file that we write before, we will have this script text with some JavaScript code inside, so I'm going to copy that block, we already have the body tags and the script tags usually go inside the header Tex, so between the header Tex opening and closing header or between the body Tex, in our case let's add them in the header and as soon as you paste the script block, webstorm IDE already highlights some of the problems with our syntax, so because we use this simple text editing editor, we have some wrong characters that the browser cannot interpret.

We need to fix them and we know we have these red underlines here which are for error and then we have these orange underlines which are for warning so this needs to be fixed because otherwise our JavaScript won't work so we're just going to replace them with standard quotes basically and that's it and as you can see with the syntax highlighted, the assignment of value to the variable is working now and the error is gone. Now you will notice that we have another underline here which is a warning, this means that the code is going to work fine without any problems, but we could make some improvements to this code, it says to use VAR instead of let or const, so what?

What was it about in the past, when JavaScript was in the early stages, the VAR keyword was used to declare variables? Later, as the JavaScript programming language evolved and improved and the engineers who were developing the JavaScript programming language made those improvements, these two alternatives were added to define the variables, the let and const keywords and the reason for that. improvement or the main benefit of this is to avoid basically accidentally. overwriting variable values ​​because JavaScript is very flexible, which is great, but it also means that you can make a lot of accidental mistakes and one of them is defining the same variable multiple times and accidentally overwriting the previous variable because you didn't know it already had that variable in your code and that's why we have these two alternatives, so thedisadvantage is basically for use cases where you define a variable, basically a value that you want to reference in multiple places, but that value should never change, for example if we are developing an e-commerce application for Nike.

The name of the Nike store or brand should never change. Imagine someone overwrites the Nike brand name or store name with something else, so this value shouldn't change dynamically within. the program or within the application, so we had thousands of lines of code here, there shouldn't be a line that overrides the flag value if that happens accidentally. Again due to developer error and the fact that we are using const in front of will tell JavaScript that the program cannot overwrite the value of this variable and for all other use cases where we want to allow the program to change the value of the variable, we can use let instead of the VAR.

The example would again be if we had some prices for different items and then on some days we have a campaign so the price can change dynamically when discounts are applied for example or if we have a customer name and they change their username or Whatever, that value could change too, so we use let for all the other variables. instead of VAR is a good practice and as you can see webstorm is helping us, especially as beginner developers, to learn those syntax issues as well as good programming practices, so now we have a fully functional HTML file with code JavaScript inside that works and is written correctly.

Now the question is how do we run the index HTML file in the browser? So how do we take this file and its contents and make it work in the browser? Now there are a couple of easy ways to do it and I'm going to show them. shows you all the options so you can compare them. The first very easy option is to drag and drop this file into the browser, so just open a new tab in the browser and we need to locate this file in the file explorer and we can do that by navigating directly to this file using this location that you see here, so this is my home directory called Nana and inside I have these webstorm projects which by the way are automatically created by webstorm and inside I have the Js application and index.html or you.

You can save all that too, just right click on the file, open it in the finder and that's it, so now go back to the browser. One way to run this index.html in the browser is to simply take this file and drop it inside the browser and there. Wow, we don't see anything here, it's just a blank page because we don't display anything, we're just creating a variable without even using it, but if we open inspection or browser dev tools, we can see that this is exactly our index.html with our script inside so that's one way, a second one also very simple is just double click on index.html and this will open a new browser tab like this again, the same page with the same content and note that we have this title here, it shows this JS application that we defined here, so that is the title of the web page.

Now there are two more ways to run our index.html file specifically using Web store and they are actually much more convenient because I can open this file directly from here using one of the browser icons, so Webstorm actually detects the browsers you have available and it will show you the icons so you can open this HTML file in one of your browsers, so if I click inside again, this opens a new browser tab automatically, this is our title, it even has this webstorm logo here, as you can see, the value inside the browser URL is different because it comes directly from the webstore and inspect again, voila, this is our code and probably the last convenient way to open your index.html file a browser is using this view built-in preview of the Web Storms browser, so let's click on this and see what happens and as you see, it shows us the browser built directly into the Web Storms IDE and that brings me to it.

Coming back to the name IDE which stands for integrated development environment, basically this is an environment where all the tools and things that you need for application development are directly integrated into this environment and the convenient part of this is obviously that you don't need to switch between the IDE and the browser, you have everything in one place, you have your folder and file structure here, you have the code editor here and you have the browser and the nice thing about this is that right now we don't have any text displayed in the website, but let's actually show something so we can see how it works.

This is our amazing JavaScript application and as soon as I save and by the The shortcut to save is the commands in Mech or the controls in Windows as soon as I save notice here the text is displayed immediately and again it adds something here and all those changes are displayed directly here, this saves a lot of time when Actually, we are actively developing and making thousands of changes so you don't have to update and reload all the time to make it available immediately. In our case, we will stick with the browser because we want to use it. development tools because we are going to generate some things here for our

tutorial

specifically;

However, if I were developing myself and writing the HTML code, then I would opt for this preview feature, so let's close this and we'll have the app open in the browser. and you noticed that also in the browser, without refreshing or reloading the page, the changes are applied automatically, so let's go back and delete this and save again, go back and the changes are applied so that we have the same automatic sync or automatic reload on saving. when we open this index.html using one of these browser icons here, which again, as you know, the prompt is different than when we directly drag and drop the file into the browser here, we would have to explicitly refresh to apply the changes.

Now this can look like this. a small thing when you are just starting out, however, when you have a little more experience and are actively developing, this can save you a lot of time and a lot of nerves. Great now if you also want to show things in the browser console we can add a line here console do log which basically outputs everything we pass to the browser so we can pass the variable reference or a sequence directly like this again, as soon as I save this it will it will automatically reload in the browser and there you have it, we have the value of the variable and we have everything that I wrote directly in console.log, so console.log basically prints things directly in this console tab here, now imagine that in We actually write our HTML web page structure here inside the body.

Tex, which can actually be a very large HTML file and also we write a lot of JavaScript functions inside those script texts which will be quite inconvenient because now we have many lines of code inside a file, so we have HTML here. JavaScript here and maybe thousands of lines of code, making it difficult for us to have an overview of all the things that this file contains and we are mixing two different things inside one file, so in programming, as your code grows, it's always a good idea. practice to keep your code clean have multiple files where each file contains a limited number of lines of code so you can easily navigate through your application code or if you have new team members, new developers joining your team project, they can easily navigate through the application code so it is always a good practice to have the code clean and especially to separate the HTML, CSS and JavaScript functionalities, which means that instead of having our JavaScript code directly inside, we want have it in a separate Javascript file and link it here and it's great.

It's simple actually, so the first thing we want to do is create our own dedicated JavaScript file instead of having JavaScript directly in the HTML file, so come back here, right click the mouse again and this time we'll create a new file Javascript and We will call this .js and again we will notice the JS extension in the file name, this way the browser will know that this is a Javascript file, press enter and you will also see these different icons that Webstorm shows for different types of files, so even if we didn't have the extensions for the files just by looking at the icons you will know that this is a Javascript file, this is HTML and obviously other file types will also have their own icons so now let's just take all this JavaScript code. that's defined inside the text of the script, we'll trim it or you can just use the shortcut and we'll paste it directly here and you'll notice that in the JavaScript file we don't need any text, we can just type.

JavaScript line by line like this and you'll notice again that Webstorm detects that it's a Javascript file actually provides some additional functionality even to our code and one of them shows the data type of the variable. So based on the value it automatically detects that this is a string variable and basically shows it as an extra hint to help us in programming, however we are not done yet because now we have those empty scripts but there is no link or connection between our HTML and JavaScript file, we need to tell this HTML. file to get the script from somewhere, so we need the source of the new JavaScript code and the way we define it is that we leave this section empty so that nothing happens between the script tags and instead inside the opening script tag, we define a source SRC so that This is basically a pointer to a JavaScript file that contains the script that we want to load as part of the HTML page and as you can see again, it is very convenient for Webstorm to suggest to us automatically all the files we have in our current project and tell us what you want. to reference epto JS and if we do that, I just click on it, it basically automatically sets it as the source name right here and that gives us the link that we want and again it's very convenient, especially for

beginners

, that the IDE itself provides all these extra explainers that tell you what the different tags are, etc., and like I said, there's actually nothing between those script tags, so we can leave it empty and this will load the same script as we had defined directly here now from a separate Javascript file, so in To test this, I'll make a change to the JavaScript code and we'll see if it actually reloads in the browser once we save it, so I'll say output to the console from the app.js file. and I'm going to save this, make sure you save both changes to both files because if you don't save the changes to webstorm, it won't load back into the browser, so now let's check again with our browser and without any updates. you see the output in the console of the .js file and if I go back to the elements which is the body of the HTML tags etc. we see that the script is linked to app.js and this is another element that is also loaded in the browser along with HTML File and that is also very interesting and important, so these are the HTML elements on the page.

However, if I go to the sources tab right here, you'll see our index.html file, this is the file that we wrote and these are some additional things that webstorm actually adds HTML to our index automatically to give us this autoload and then we have our .j s file also loaded next to it and if I check the sources of our previous index.html which had the script directly, you will see that we don't have any Javascript file it is just HTML now, let's learn about the following important concepts of conditionals and comparison operators, which are also common concepts in all programming languages ​​and if those terms sound scary to you, I will explain them with very simple examples and visualizations. make sure you understand them very easily, so let's first see what comparison operators are.

Consider as an example that Facebook introduces the feature to display the birthdays of its users. Basically, if today is your birthday, Facebook will show a birthday icon and send notifications to all your friends and For Facebook to check if today is your birthday, it basically has to compare today with your date of birth, so that the comparison or equals in JavaScript is expressed with three comparison signs like this, so one comparison sign is reserved for assigning variables, so double or triple equal signs are used to check the equality of two values, so let's see the difference between both, so let's say I have a variable H 30, so if I compare the value of variable H with 30 then I get true, if I do a triple comparison I also get true.

So, nowI get the same results if I compare the value to a string representation of 30, I also get true; however if I check it three times I get false and this is the difference between these two, double comparison checks the equality of the values ​​on two sides so it checks the value here checks the value here and compares them by value , triple equality Compares the value and also the data type of those values, so if I have a number here and a number here which are the same values, then it will be true if I have a numeric value here which is defined here and a value of string here of the same value.

I get false because the data types are not the same, so that's the difference and obviously if I put another value here, it will be false in any case. This or that doesn't really matter and that small difference can actually have a big impact, which is why this concept is important in JavaScript. The general rule is that in most cases you should use the triple equation to compare two values. Now let's consider another. example where you order something on Amazon and it says that shipping is free on a purchase of €20, so when you add things to your card program, check if your order total is more than €20 or less than 20 and then calculates the shipping cost based on that and let's say it charges you 5 if your total order is less than €20, so now we no longer have the same check, but it is higher or lower, so the way to check it is let's clarify this, so let's define the variables so that you have the total price, let's say you collected items that cost €19 and now the program checks if the total price is greater than €20, you get a bullan expression of false because This condition is incorrect in the same way, the program can also check in the opposite direction. so we can check if your total price is less than 20, but note that we don't check the value 20.

So what happens if the total price is exactly 20? Basically, here we need to check if the total price is less than 20 or 20 € in In both cases, you will be charged for shipping, so to do that, you can combine those two expressions and say like this, or it should be less than 20 or should be exactly 20 and as you see each of these comparisons will return a Boolean expression of false or true only one of these results is possible, what this means is that in the program you check if this condition is true, then you want to offer free shipping; otherwise you want to charge €5 for shipping and the The way it will be written within the program using JavaScript syntax is if the tour price is greater than 20, here will be a code that let's say that calculates or sets the price of shipping, so here we set it to zero, there is no shipping cost, otherwise it is expressed. otherwise the shipping cost is equal to 5, this is how you use conditions in JavaScript to check the condition and based on that do this or if we change that condition we can also check if the total price is less or equal to 20 and then send. the cost will be set to five, otherwise the shipping cost will be zero, so to go back to some technical terms in JavaScript, this here is called if else statements, whatever is inside if is called a condition, for what this here that evaluates to true or false is a condition and this here that compares those two values ​​is called a comparison operator, so greater less equals Etc. all of these are comparison operators, but let's say you have a case in which it has three different shipping costs, for example, if the price is less than €1 they charge you 5 shipping costs if it is less than 20 they charge you only €3 and if it is more than 20 they don't charge you anything now you don't have yes only but you have three conditions it is also very easy to do it if so Basically, you check again if the total price is less than or equal to 10, they charge you 5 and here you are going to say something else if, which is another statement where you can write the conditional where we are going to check if the total price is less than or equal to 20, in that case they charge you €3 and comes our final remainder, which is zero, so now I have three conditions here, so the first condition here says that is less than or equal to 10, the first verifies another condition and the third.

An important thing to note here is that the last else or the else here does not have a condition explicitly, but it implies that both previous conditions were false, so they were both wrong and since it is implied, we do not have to check it explicitly here , so you can also go here and do that if the price is greater than 20 and this will work fine, however because it is implicit we don't need it, which is why we saw comparisons between two values ​​using equals greater than or less than the The final operator is not the same, for example consider a feature where a web application checks if the user is a premium member or not, obviously if he is not a premium user he will not see the cool features they have or will not be able to access . some of the premium content, so when you log in, the program will check if the user's membership is premium, so with equals or you can check the non-premium user's membership and to express that negative comparison, use this syntax, so Which is not equal in JavaScript is expressed with an exclamation point and a double. is the same and to show that in the IFL statement let's say that if the user's membership is non-premium, show the user non-premium contents or maybe even recommend a premium upgrade as a marketing measure and otherwise show premium contents and Finally you can combine all these conditions, for example if today is your birthday and you have shown it in your profile only then the program will show the notification, so both conditions must be true, so if today's date is the same as your date of birth and the birthday shown is true, here you can use a comparison with uh. boolean true or false, so both conditions must be true for the notification to be sent and in JavaScript the syntax to end is this.

Basically it is also a valid condition which you can also put inside the if condition so if all of this is true then show the notification. otherwise don't do it or another example, let's go back to the shipping cost. Let's say you don't pay shipping if the total price is over €20 or you have an Amazon Prime account, so the way to express it would be the total price over €20 or Amazon. Prime equals true so here only one of them has to be true for you to get free shipping or in JavaScript it is expressed with double slashes and again you can put it in the if statement and say whether this or this is true and then make free shipping. otherwise don't do it and you can also use negation in conditions for example you want to check if all this is false and the way to do that is by using exclamation point and brackets so basically this will check if all this condition It's false now.

Let's learn about one of the most important concepts in any programming language which is functions and understand with simple examples what they are and why we need them, so let's go back to our JS application project and let's work on this EP tojs. file, so I'm going to delete it and instead we're going to work with this simple shipping cost calculation logic, so this if else statement is our JavaScript logic that basically calculates, based on the total price, how much shipping cost shipping will have a customer. pay and we will send the shipping cost in the console, so we have this application running open in our browser, so everything we generate with console.log will appear here and in webstorm, in fact, there is a very convenient way. of writing console.log, if you are lazy like me and don't want to write everything, you can just enter and that will basically autocomplete console.log.

Now we want to record any shipping cost values ​​calculated by our logic. So I just set 19 as the total price. You can set the value you want and then we will generate the result. I'll save it and if we go back to the browser, you'll see the result here. However, I don't. I don't want to just see the number. I want to see what exactly a number refers to, so I want to have a complete sentence like the shipping cost to you is whatever the value of the shipping cost variable is, so basically we have a string here. string value and with that string value we also want to generate the value of a variable and there is a way to do it in JavaScript which is to simply combine these two with the plus sign, so it is not an arithmetic operation like with numbers, but in this case it basically takes any string value of this and then any value that this variable has and outputs it as a sentence or a string, so if I save this, go back there and you'll see the entire sentence; however, there is a more elegant way to do that.

It's much better: we remove these double quotes here and instead use what are called reverse ticks like this for everything, including the variable, and then to tell JavaScript that everything is text and that it is actually the name of the variable, It's not the chain. In itself we use this syntax, which is the dollar sign and braces, that's all, and you see in Webstorm that the syntax highlighting changed, so it's treated as a variable, so its value will be extracted and it's treated like the normal chain again. save, return and we have the same result. Well, all of this here is a fully functional logic that we wrote in JavaScript that takes the total prices and calculates the shipping cost based on that and then outputs it in the console.

Now imagine if we really had an eCommerce app, maybe we would have thousands or tens of thousands of users and they would all shop in their own shopping cart and add items, so we would need to calculate this for every purchase they make in our eCommerce app. e-commerce. So this logic can be repeated in our application code several times and imagine that we have 10 different places where this calculation needs to be performed and we would basically have to replicate this code in 10 different places throughout our application code, which seems very inefficient way to code correctly because we are repeating the same thing 10 times as I explained with variables where we use the same value multiple times except in this case it is even worse because we are repeating the entire block of code multiple times and that is where the functions come from so You can think of a function as a kind of variable reference, just like we save a certain value once in a variable and then reference that variable every time we needed to take that value in the same way we can save an entire variable. code block in a function and then when we need that code block or that logic we can reference it using the function name so I'm going to put this complete code block including the assignment to the price variable total, inside a function and the syntax for that is actually super easy, what we do is like with variables, we have the keyword VAR or let or const with functions, we have a keyword called function, then we have the name of the function, which is usually descriptive and describes whatever code logic the function references actually do.

In our case, let's call this calculate shipping cost because that's what the code block does correctly, calculate shipping cost. dispatch and keep in mind that at the end of the function name we have these opening and closing brackets and then we have curly braces and these curly braces will basically contain the block, the block of code that the function references, so if I take all of this and I paste it here and there, we just created or declared a function and we know this indentation right here, so with these curly braces we're going to We're telling JavaScript that this is the beginning of the function code block and this is the end, so whatever is between those curly braces is the block of code or logic that will be executed every time we reference this function name and just like here, we have this indentation here. we have the entire function body indented and webstorm actually handles the indentation, so we don't have to fix anything now.

You'll probably also notice this underlined here, this orange underline again. webstorm is helping us understand some improvements we could make to our code so this is not a bug this would actually work however there is room for improvement and let's say as a beginner you see these underlines you hover over them and you see this description as implicitly stated and you're thinking I don't know what that is. It means I don't know how to fix that warning. Another really cool thing that Webstorm has that I've used extensively in my programming projects is it kind of auto-suggests the solution, so what you can do is whenever you see this kind of underline. you can use this shortcut that you see here, which on MacBook is the option to enter with the mouse inside that block of code that needs to be fixed.

I'm going to do the enter option. You see that Webstorm actually gives you suggestions on how to fix it. I'm going to choose the first one and let's seewhat's going on there, so you'll see that the warning was about the variable shipping cost that is not declared and Webstorm automatically edits the Declaration in the code, so let's put it here and there. we have no warnings or errors and we just added an improvement to our code now since we didn't change any values ​​the result of this function should be the same now let's save this code and see what happens when we switch to the browser. what we see there, so I'm going to switch to the browser and you'll see that we have an empty output, so what happened here you'll see that we have an empty output, so this line of code obviously didn't run because we don't see the sentence in the console output, so what happened here?

We have exactly the same code as before, this time only in a function and that is a very important concept about functions that you need to understand as a programming beginner and that, just like with variables, we declare. the variable which means we save the value in the variable reference and then at some point we use that variable in the same way as we first declare the function or create the function and assign any code block logic to it and then we can use it. that function or code block inside that function to execute the logic, which means that the function declaration itself does not execute the code, it simply saves the code that you place inside the function block and also sees Webstorm highlighting the name of this function in gray and if I hover over it says unused function so we have declared the function but we are not using it and using a function is also called in programming calling a function and the way to call a function is the name of the function and the square brackets and you see the color of the The function name changed and it no longer says unused function, so now let's save this and see the result in the browser.

If I change back, you will see that the function code has been executed and we see the result right here and the best thing is now when We need this entire block of code to be executed, we simply need to call the function with the name and that's it, like this let's say there was some logic here and somewhere down here we need that logic to run again, we just call the function and now it will run the same. block of code for that function call and by the way, this is a syntax for comments, so whenever you start a line in JavaScript with forward slash twice, you also see that the color is gray.

Whatever you write here, this tells JavaScript that this is not code that needs to be executed, this is simply a comment, a personal note to you or your programming colleagues that is usually used to document the logic you write in the if function is not understandable just from the code, so let's clean this up and look at another one. very interesting features concept, now we know that the total price is a dynamic value, so every time customers buy, that value will be different, so we can't code it here, but it will always be different for each purchase of each client, so we need to use a different value every time we calculate the shipping cost, that means we have to remove it from here and when we do that it automatically sees this warning from webstorm telling us that this variable is not declared anywhere , there is nowhere in the code where we are setting a value for this variable, which means we are referencing a variable that doesn't exist and that we haven't created, so we need to do both, first we need to create a variable and then we must assign some value to it. so let's say at the beginning we have this variable total price, which is a simple declaration of the variable, we don't assign a value to it because the value will be set dynamically when a user enters our platform and starts shopping successfully, so let's say we have some logic here that basically tracks user behavior on a platform, let's say a shopping cart and the user is putting things in the shopping cart and the total price of what the user is buying now is, let's say, 1 € and the user continues purchasing. adding more items and the total price reaches €19 for example, and then at some point the customer is ready to place the order, he has everything he needs and now he basically wants to pay and order all the items , so when that happens we want to calculate the shipping cost and again imagine that this is all code in our application, we have tons of logic and at some point we call the calculate shipping cost function to calculate the cost based on the price total for the customer, what we want to do is we want to give that total price as input to our shipping cost calculation function, which in programming is also called passing a value to a function as a parameter as an input parameter and that is also very easy, basically we take the value or in this case the variable. which refers to the value and passes it between those brackets as an input parameter to the function and now you understand what are the brackets for a function when we don't have input parameters that we are passing to a function then the brackets are empty or we can pass one, two or 10 parameters inside those parentheses and then in the function definition we need to explicitly say that this function expects one parameter and one input, so as long as someone is the same engineer who declares the function or its teammates, other engineers who also want to use the same function who know, oh, this function expects a parameter which is the total price, so I need to pass that input because otherwise it obviously can't do its job because the value of the total price will not be set and to do this, Define that in the function definition like this only the name of the variable and this is another very important thing, these two names do not have to be the same, so let's call this , let's call this parameter total price or parameter, so this is a variable reference to this value that we are passing here and obviously that is what we need to use in our logic inside our function and something that is very useful to understand this concept is that when we call this function with the value 19 passed as the total price variable what happens in the background in the execution of the function is the following this variable is created inside the function with a value 19 that is exactly what happens in the background when we pass a parameter to a function then inside the function it is created as a variable with that value assigned and now we can use that variable inside the function block where we need that value and we don't need to do that because it happens in the background and this It is our complete logic, so now the total price is dynamic and calculated. somewhere else in our app code, whenever the user adds things to the shopping cart and when they click on checkout or ready to order or whatever, then we are calling this function and passing the total price as a parameter so that be calculated and we can even add another console record here with our shortcut and say for the total price of whatever the total price is.

I'm going to save this and go back to the browser and voila, our logic is fully functional. Now let's make a final improvement to our shipping cost calculation logic and say that once a year in our eCommerce company we change shipping costs, so last year it was five as a standard shipping cost and for version with a small discount we had three, but this year we want to increase those prices due to inflation or whatever, in this case the engineers or we need to change the code to update the shipping cost values ​​and we may also be using these two values ​​in other parts of the application for different logic, like here we are doing the shipping cost calculation.

Maybe we have a logic for discounts and these values ​​are used there too or in checkout logic or checkout function etc., if these values ​​change due to our company policy, we need to go to our application, find each JavaScript file and code block where it is hardcoded and we need to update them and again this is a perfect case for using variables. for values ​​that are referenced in several different places and may change at some point, in this case this is not a variable that changes in the program like the total price for example, it is not a dynamic value, it is a Val which changes less frequently and whenever that happens, we have to manually update it in the code and those are variables that we usually define with the const keyword, which means that here we are going to create two variables for the standard shipping cost and the discounted and we're going to Call that exactly that standard shipping cost, let's say we increase it to six 6 and we've discounted the shimy cost which is 4 and as I explained the difference between these two is that the variables that are defined as constants or constants, those values ​​cannot be changed programmatically. you can just go here and update the value, but the program itself can't change it, so JavaScript won't allow it, for example, somewhere in the code here, if I said, let's set it to seven, whatever you see this error which says trying to assign to a constant or read-only variable so this will not work which again prevents accidental rewriting of the variables and now we can reference the constants in our application logic and this is another very concept important in programming especially when we write functions that As you can see we start with a lot of hardcoded values ​​and then step by step we remove them and now almost everything in our logic is referenced as variables and we don't have a lot of hardcoded values ​​here and this is a of best practices in programming in general. so now let's test our app again and say here the user started shopping and decided maybe we are ready to pay so we calculated the shipping cost, they remembered that they forgot an item so they continued shopping and added it to cart Shopping.

Now they are ready to review and we calculate the shipping cost again, so in the first case we are at €10, which means they are paying the standard shipping cost as we have defined in our logic here with 19 see the shipping cost at a discount, so they will be charged. the record has a discounted shipping cost and when they see that they think you know what I would like to save that shipping cost completely so I'm going to add one more item to my shopping cart to qualify for zero cost free shipping , so here they add one more item that brings the total price to, say, 24, they will see the new calculated shipping cost, which should be zero and here they place the order, so let's save our logic and see the result and to differentiate between the results, let's add like a decoration line that basically generates something like this or a divider, just a visual divider for us in the console log, so save it, come back and that's it, the shipping cost is six times the total price of 10, then we have four discounted and here with 24 we have free shipping and one final note I want to make is that you're probably wondering about variable and function names.

What you see here is called chemel case, so you basically start with a lowercase character and then every other word you add in the name is capitalized like this and this is a standard naming convention for functions and variables in JavaScript. Know specifically that different programming languages ​​have their own different conventions, which means you can name them whatever you want. this or you can underline it like this, all of this will work because there are variable names, you can name them whatever you want, however, in JavaScript, this camel case name is a standard and with that, congratulations, you have completed the entire JavaScript

crash

course that you have learned. tons of very important concepts that are the main components of any programming language and you have a good basic knowledge of JavaScript;

However, this is just the beginning, there are much more exciting and interesting things waiting for you in the world of JavaScript and software in general. world of development if you want to continue and really immerse yourself in this world of programming and the best and most fun way to do it will be with our software engineering mini Boot Camp or what we also call an IT

beginners

course and I will be more than happy From Continue teaching you there in this beginner course, we will go deeper into web development, you will learn JavaScript frameworks for front-end development and backend development, you will learn how to create proper websites with databases. connection and tools to manage an application's dependencies learn about HTTP requests and protocols, as well as how to take the web application you just created and deploy it to a simple virtual server on a cloud platform learn about firewall configurations, the operating system commands and if any of them These concepts sound completely foreign to you and verydifficult, believe me, you will learn all this with the simplest explanations and examples that I use throughout the entire course to make this learning journey as simple and fun as possible for you, so that at the end of our mini camp of software engineering training, once you have learned all this you will have a solid knowledge equivalent to a junior software engineer, so be sure to check out our software engineering mini bootcamp in the video description or directly linked here on the video and wait See you there with that thanks for watching and see you in the next video.