JavaScript from Beginner to Expert: Learn JS - JavaScript from A to Z | Arkadiusz Włodarczyk | Skillshare

JavaScript from Beginner to Expert: Learn JS - JavaScript from A to Z

Arkadiusz Włodarczyk, Professional teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
83 Lessons (12h 21m)
    • 1. What is Javascript?

      3:17
    • 2. What you will know after this course?

      5:51
    • 3. Downloading and installing editor

      5:52
    • 4. Creating project

      6:05
    • 5. Useful shortcuts for Web Developers

      12:12
    • 6. Embedding script on site

      13:41
    • 7. Basics of JavaScript

      8:26
    • 8. Comments

      4:19
    • 9. Variables

      17:20
    • 10. Arithmetic operators

      13:05
    • 11. Relational Operators

      5:58
    • 12. Logical Operators

      7:26
    • 13. Bitwise Operators

      17:17
    • 14. Conditional Statement

      10:58
    • 15. Shortened conditional statement

      4:45
    • 16. Switch

      5:25
    • 17. Functions

      17:31
    • 18. Scope of variables

      8:51
    • 19. Anonymous functions

      12:43
    • 20. Objects

      13:36
    • 21. Object constructor function

      10:56
    • 22. Prototype

      5:38
    • 23. Arrays

      14:03
    • 24. Useful array methods

      17:02
    • 25. While and do while

      16:02
    • 26. For loop

      3:29
    • 27. Break and continue

      6:15
    • 28. For in

      7:45
    • 29. arguments object

      5:48
    • 30. DOM

      18:34
    • 31. querySelector

      6:05
    • 32. Changing dynamically styles using js

      4:10
    • 33. adding or removing elements

      10:30
    • 34. Loop inside another loop

      9:55
    • 35. Events basics

      9:08
    • 36. this keyword

      6:09
    • 37. onload event

      4:00
    • 38. addEventListener

      16:27
    • 39. Event object

      18:03
    • 40. Propagation of events

      5:35
    • 41. preventDefault

      6:05
    • 42. Onscroll Event

      7:59
    • 43. MouseEvent

      12:29
    • 44. Time events

      16:33
    • 45. Time events - upgraded version

      14:29
    • 46. Validating forms

      19:21
    • 47. Stopping submit button

      3:38
    • 48. Checkbox

      6:38
    • 49. Radio form

      6:25
    • 50. Select in form

      7:28
    • 51. String manipulation

      15:12
    • 52. Divding string in code

      5:06
    • 53. RegEx

      22:14
    • 54. exec method

      4:56
    • 55. check password

      9:28
    • 56. date

      19:30
    • 57. clock using date object

      14:31
    • 58. What are cookies?

      15:12
    • 59. Creating a cookie function

      4:55
    • 60. Removing a cookie function

      1:37
    • 61. Cookie - retrieve function

      5:57
    • 62. Escaping

      1:48
    • 63. Popup windows

      5:59
    • 64. Math methods - rounding values

      7:16
    • 65. Generating random numbers

      4:02
    • 66. Random quotes

      3:41
    • 67. Window Location

      3:08
    • 68. Preloading images

      9:30
    • 69. Preloading images

      9:30
    • 70. Slideshows

      11:11
    • 71. Animation in JavaScript

      4:36
    • 72. Animation using setInterval

      4:32
    • 73. Gallery with thumbnails'

      14:11
    • 74. Tooltips

      16:21
    • 75. Firebug

      3:28
    • 76. Console Debugging

      4:06
    • 77. Sharing code websites

      4:34
    • 78. Strict mode

      2:06
    • 79. Code Performance

      3:50
    • 80. Keeping one js file

      2:30
    • 81. Compressing js files

      3:50
    • 82. Most common mistakes

      7:26
    • 83. Keeping eyes healthy

      3:05

About This Class

Save your precious time by buying this JavaScript course. You will learn how to program in JavaScript in a fast and easy way!

The total length of the JavaScript course is over 12 hours! You will learn theory and you will also gain lots of practice. During the course, I will explain to you how to write real-life applications, like galleries with thumbnails, image sliders, etc.

I will do everything so that you understand JavaScript. After this course, you will always understand the code you are writing. You will understand all concepts and create your own applications!

After my course, you can become a front-end developer. JavaScript is a very demanded language by employers.

The course is designed for people who don't have any knowledge about programming or want to truly understand JavaScript. It doesn't matter if you have never written any programs or you have no idea about programming... After my course, all this will change. You will bust the myth that programming is a difficult thing only for the few!

JavaScript will bring life to your website.

By life, I mean inter-active, animated elements like:

  • tooltips
  • image sliders
  • forms with pre-validation
  • slided panels
  • galleries with thumbnails
  • menus
  • and many more

Learn JavaScript in order to improve the user experience on your website, which will result in more visitors and sales, because happy visitors = a better reputation for your website.

JavaScript gives your website additional functionalities that can be executed on the user's computer without re-connecting to the server. This allows you to do things that you cannot do with only HTML. Because of this, the user interface becomes more friendly and more inter-active

Javascript is a programming language used for creating dynamic action on your website. If you want to remove/change/add content to your website dynamically, you must know JavaScript.

After this course, you will know JavaScript perfectly. This is the most organised course about JavaScript from Beginner to Expert on the whole Internet. I will take you step by step from theory to practical examples, like image sliders and animation.

Understanding JavaScript syntax well will allow you to also understand jQuery framework better. jQuery framework is a large library of useful JavaScript functions that allows you to write less code while at the same time accomplishing much more.

What's more, JavaScript is required to understand AJAX which allows you to load content on your website without reloading the whole website.

As a front-end developer you have to know HTML, CSS and JavaScript perfectly.

In addition to this, I'm adding two BONUS sections about Debugging and Best practices for developing clean, easy to maintain and well-performing code in JavaScript.

JavaScript is necessary for becoming a front-end developer. Imagine a situation where you have a clock on your website. You would need to request a new value from the server every second in order to update this clock. With JavaScript, everything runs on the user's end without re-connecting to the server. Just imagine what a mess it would be if the clock needed to reset every second. Your webpage would have to constantly reload to update the content, destroying the user experience. With JavaScript you can update the content without reloading the webpage. What's more is that there are advanced libraries for JavaScript, like AJAX, that allow you to connect to the database and retrieve information without reloading the website. To sum up JavaScript 'runs' on the web-browser of the visitor of your website.

Become JavaScript Expert today!

Transcripts

1. What is Javascript?: Hello, my friend. When you're learning something new, do you ask yourself many questions like why do we need events? Why do we need loops with our day? How do we use them and so on and so on? If yes, then you are in the right place because I will answer all your questions. Looking like that. I will explain you in discourse everything from the basics toe advance compliments off the JavaScript so we can become the expert. Discourse is divided into 23 sections and it consists off 85 lessons. It is over 12 hours off. Great content. You also gonna find here loads of quizzes and exercises. I will explain your syntax off the JavaScript and well trained the syntax. During practical examples, JavaScript is giving your website additional functionalities that can be executed on the user computer without reconnecting toe the server. This allows you to do things that you cannot do with on HTML. Because of it, the user interface becomes more friendly and more interactive by interactive elements. I mean things like two deeps animated insiders force with privilege, validation slided partners, galleries with companies and many men, and more and well you might be asking yourself what you will know after discourse. After this cozy will be ableto right coding. JavaScript on any level of difficulty creates creeps like Dynamic gallery with family slide shows at cetera de Bagger Kotick and keep your coat performing well and much, much more. You understand things like variables, all operators, conditional statements, functions, areas, objects, loops, document object model events, regular expressions, cookies and minimal. You have got more information about this below the video, okay? And what you should know before discourse, you should understand the basics off HTML and CSS. If you know that you can easily work these cars and you might be asking yourself, Hey, but why should you choose my course? Because you have my help regarding cover topics if needed. My courses are updated. I have thousands off satisfied customers, and these cars is led by me. And I am very experienced person, and I'm not gonna talk like they're about as you can see, and I want to make your time spend well in a good mood. You can download a lessons on your computer disk. I do not assume that you are a pilot, a Lightman other teachers. I'm adding source coat free, Preval essence and well, who am I? My name is our Kardashian Ladakh trick. I don't like to talk about myself, but well, as you can see, I have got an experience in this matter. I've been programming for over 10 years time and I have been developing a website for over 14 years and I am altered off 27 video courses in Poland. I have created also six video courses in English. I am teacher off thousands off satisfied customers. There are many comments about my courses and here is one of them. If you have any questions regarding cover topics, please just ask me. I really love helping other people create a discussion. I will be glad to help you. That's all. Thank you very much. 2. What you will know after this course?: Hello today I would tell you about his JavaScript and why it's worth to learn. JavaScript is a programming language for Web browsers. So, for example, for Firefox, Google, chrome, Internet spur and so on, you can create in Eat a coat, which is called a script that can be executed on the visitor off your website computer, which means that when you finish loading the website, so let's refresh it is you can still access elements on the website and you can change them , right? So, for example, when we have got here a gallery with calmness with these miniatures here, as you can see when I am using my mouth over one of the aim it the image here, the main image is being changed, and it's very useful because now you don't need to take so much space on your website, and you can show the product in the bigger version very easily. Right. As you can see, this is improving the user experience on your website and in addition to these, as you can see, we have got a tool tip here, right that is giving additional information about each off this image that is very very cool and it's improving, um, their user experience. So HTML is responsible for the content of the website. CSS is responsible for the layout and JavaScript. It is responsible for reacting to the user actions and doing things with HTML and CSS on the user side after finishing the download of your website because normally without JavaScript, you wouldn't be able to do anything on the user computer, right, because after connecting to the server your and down holding the website, the user is not connected to the server anymore. It's just look his computer. That's all you could. You could close the connection. You have got still access to this website, right? So javascript can be used for also many other things. Not only galleries with combines, you can create something with this called slided panels. You can create things like transitions between images, well, images that are changing each seconds. We just could slide show panel. You can use it, for example, on shop webpages, where you can show many products in one small place, right. You can create promotions and many other things which makes your user experience better, and JavaScript is necessary for becoming front and developer who is responsible for the things that are done on the user side. Right. Imagine a situation like that where you have a clock on your website. You would need toe every second request to the server from the server and you value in orderto update this clock. We've javascript. Everything is a rounding on the user side. We were reconnecting constantly to the server So the javascript can be used toe ab the content off your website and placed a dif. You can, for example, change the size right and can show something. You can create a tool tip next we that if you can, for example, change their source attribute of the image here you can do some kind of animation. All that things are done in Java keeps changing dynamic. Anything's layout on your website is something that is down in javascript. But once more there are advanced libraries for javascript like Ajax that advise you to connect to the database and retrieve in for without reloading the website, for example, when we go here, as you can see now, when I click here, I am not reloading my website. I'm just changing. Displace you and all that content is taken from the database from the peach being my school . If you don't know it yet, don't worry. Just remember that you can even use it for in with advanced libraries to create literary website that do not reload refresh, Don't do something like that, right? Refreshing. That takes loads of time. Right? So this is very, very awesome. And you can also use javascript toe pre value date. The input informs like, for example, with the password was strong enough for the email use, right and so on. Before sending these values to the server, you can show special box informing user what is wrong in the form we've other resetting resetting his values in four. It makes user experience on your website. Loads of better understanding, double skip syntax. Well, we allow you to also understand better something would just called Jake. We're a framework. And Jake wear for framework. Visibly beak, library off useful JavaScript, blue jeans functions. Thinks that allows you to write less coat doing much more. Okay, there are already many things done that you can just use, but in order to understand Jake Query, you have toe also I understand. JavaScript. So you so you know what's going on there Right after my cause? You will understand all JavaScript, advanced compliments. So you will be able to use any libraries. As you wish. So you know javascript perfect. This is the most organized cars about JavaScript, from beginner to expert on the whole Internet. I would take you step by step from the theory to practical examples like Amy sliders and animation. If you have any questions, feel free to ask and diesel in the lesson. Thank you very much. 3. Downloading and installing editor : Hello everybody. Today it's time to download an editor that we're gonna use to learn java script. As you can see, we can now use then the beans that you can download from this side here. As you can also see, it can be used to programming in Java to create websites using HTML5, PHP and much, much more. That's why this editor is pretty cool. I really like it. And it's also free. But you might be asking yourself, hey, you know Iraq, I know other programming languages and I've already programmed in other editors. Do I need to use NetBeans? And if I want to follow, you know, you don't, you can use an IDE, you want, you can use an integrated development environment, right? Because this is what IDE stands for. So you can use Visual Studio cope, you can use Aptana, you can use brackets, you can use Sublime Text. You can use Notepad Plus, Plus. Yeah, you can even write websites using the upgraded version of Notepad. That's up to you. The most important thing for you is when you are choosing the editor, is that it should suit you. Okay, so what is required in order to install NetBeans? Well, we need something what is called JDK. However, it's good idea to use the open version so you don't need to worry about some licenses and other things like that. Okay, so let's typed into Google, adopt Open JDK, and let's open this website here. And as you can see, you can download here version eight, version 113040, maybe even higher. But to be honest, it doesn't matter regarding JavaScript, what version you're gonna use. Okay, so let's download the latest release. When you click on the button here, you're going to download the version for Windows, okay, but Eve, you want for other platforms version. Then you click on other platforms and here you can choose a, you can see Mac, Linux, and so on. Are we going to focus on the windows? So let's click here and let's save it. Okay, it's time to install it. Let's click OK. Next. We'll read the license, of course, except next. And here is very important. We should choose it here to install it. Okay, so remember about choosing this option here, okay? Because otherwise there may be some problem in finding the JDK by other programs. So next, install. As you can see, the installation process is pretty fast in this case, let's click finish, and we can now download net. So let's click on Download button. And here we have got diversion 12. These can be higher. For example, ten to 1415. It's really see is the versions are coming pretty fast as they do not change March, especially regarding to JavaScript. So don't worry, there is a higher version you okay, let's think now download and here we can choose one of the installers. We go not choose the one that has windows here you want to, if you are using the nanoscale conducive, usually Marquee click on death, let's click on Windows. And here you need, you can choose one of the mirrors. So one of the HTTP links that has got that NetBeans that you can install now. And for example, let's choose the first one. As you can see, it's working so now it's being downloaded. I have already done all the data as you can see, so we can start installing NetBeans. So let's click on NetBeans. The installer is configuring the installer. And now here is a button that is called customer mice, which allows you to customize the installation. Ok. You can, for example, click on this and this because we don't need it, right? We can uncheck Java because we're not programming in Java in this course, we are programming in JavaScript. It's good to idea to left the PHP checked because PHP is connected to web development, so you might need it in future, right? Let's click OK. Next. And of course now it's time to read the license agreement and excited. And as you can see here with a Java environment that we installed previously, that was required to install NetBeans. Without the JDK, we just wouldn't be able to install NetBeans. That's why we had installed it. Okay. That's just the requirement. So don't worry about the versions of JDK. And here is the place where we're going to install our NetBeans, right? So let's click Next. It's good idea to check for updates. So we have got our NetBeans always up-to-date install and it's time to wait. Okay, the NetBeans has been installed properly. Let's click on Finish. And in order to open it, we need to type in the search engine in the bottom left corner, NetBeans, as you can see, I found it. And here we have got our NetBeans where we can create new projects, where we can write our JavaScript scripts. By the way, you will have to do that in future lectures. If you have any questions, as always, feel free to ask. Thanks for watching. 4. Creating project: Hello, my friend. Today you are going to create your first project in the Net Beans and in the same time you will know how to structure your projects so it's gonna be easier to maintain, Okay, so how to do it? In the left corner, as you can see, you have got something like file. You're clicking going in, then you go to the new project. Or you can use the shortcut Control plus Shift plus n. And as you can see, now, I have got these menu here that we can use. All the shortcuts are presented to the right side of the menu item. Okay, so let's keep New Project. And as you can see on the left side, we have good something like categories. And well, here you have got free folders, HTML5, PHP, unsampled samples. As you can see, I have some kind of sample projects created by other people. There must some demos, demonstration of some kind of libraries for JavaScript and other things like that. You can play with them. You can see how people create projects, bigger projects, how they use some kind of libraries. But we will focus on HTML5. Note PHP, because it's not a course about PHP, HTML5, but it's not curse about HTML5, you might think also that's true, but HTML was created for forbear, all browsers only for browsers. And JavaScript is also created only for browsers. In order to run the JavaScript code, you have to connect it with the HTML5. So you have to create an HTML5 application, okay? And in addition to these, HTML5 brought to life well many new tools which are called functions and that are also very useful. So we are going to create HTML5 application. You can choose the HTML5 application with existing sources. If you have existing sources, use desorption. If not, use the first here. And now we click next, as you can see here, now we have to type the project name. You can also choose another look, look location if you want to change it. But Well, in my situation, we're just naming, for example, JavaScript Angular project name. You can type you whatever you want. Okay? So I will click now only finish. And this is, you can see it created for us one HTML5, which has goods here, some kind of comment and title and meta tags bolder. And well, we have to now come on up here our JavaScript file, which will do in next lesson. But in this lesson, I will also create a structure for our JavaScript file. So how to do it? I will get here, me, click right click here, and then mu. And as you can see here, we have got many type of files that we can use. We can create folders. So for example, OKC folder. And here I can type the name of folder, and now we call it JavaScript js, right? These are shortcut. And well, why am I doing? I want to keep all the files in one folder that are connected to JavaScript files. Why? Because, well, maybe at the beginning you will have only 1-5. But the truth is that in the bigger projects you might have many JavaScript files. And while you might have also many HTML5, PHP 5S, some template phi, some configuration files, some CSS files and other things like that. And then it will be hard to spot them, right? It will be hard to maintain all this code. So it's good idea to keep JavaScript files in one special folder, and that's how we do it. The same like you do when you have CSS, right? You have got the special CSS folder where you keep your CSS file. So here we are going to keep JavaScript files. And in order to create a JavaScript file, you click here and right-click New, and then use the JavaScript file. When you do it, you can now just type the name of your JavaScript file. You don't need to add the extension ab.js, which is for JavaScript. So now we can type, for example, screed, whatever you want here, right? This is a filename, but well, it should start from the lower letter will, all should be low, low, lowercase. Okay, that's how you should, you should call your a script. Now let's just click finish and you have good. Now the Javascript file, as you can see, is empty. You can, you have got some kind of change this distance had analyses like that. This is called a comment. I will talk about it in the next lesson. Lessons. So this our first JavaScript file, and you have to now just connect to it from the HTML. And we'll do it also in the next lessons. But what I want to say also in this lesson, well, you know, you could create this, all these things manually. Look when you go here to the properties, as you can see, we can go to the project folder. I would copy it, and now I will paste it here. And as you can see when you go here to the public HTML, we have got here the CSS, JavaScript and indexes index file. We could create them by just creating textFile and saving jazzy as an HTML or as the Javascript file. This is just typical. Nothing else, nothing special files, right? You can create whatever you want plies and it will just run. You can now open this. Think pretty easy. In order to do it. It's just double-click it. And as you can see, it opened inside the web browser as you can see. And it's working because he's an HTML5 and JavaScript fear is gonna be connected by us in next lesson. And it's going to also run in our browser, right? You don't need to add a special server for it. It's just going to run inside your browser. And you don't need to use the net means you can use whatever you want. These the sample structure, this is how you create a project. And well, I invite you to the next lesson. Thank you very much. 5. Useful shortcuts for Web Developers: Hello, everybody Today are we show you the most useful shortcuts used by Web developers and programmers. Well, all these short cars are gonna save you lots off tones off time. So it's like must to know things. Okay, you have to know them in order to save loads of your time. Why developing websites or programming? You know the plant of situations where you have to move your course or so Iran and instead of it you can use the shortcut because you have good keyboard you're typing in Cuba, and then, you know it's hard to move your hands to the mouth. It's taking time and always maybe 12 seconds. But but imagine that you are going to spend lots of time writing the coat. It's gonna save you each day. For example. I know 10 minutes and when you multiply it that 10 minutes by the wall year, then you have got loads of time, right? Lots of time saved by knowing these shortcuts. So Okay, let's begin our adventure. How to save the fire instantly. You know, I have got even a habit right now like that when I do something, I will just counter plus safe use the short cut cut like that. And I just say instantly, you will not ease when you, for example, watch next videos that I been saving instantly after changing anything. Why? Because we're you know no, every editor. Ah has got something like, for example, saving automatic Kelly. When you lose your for example power and you can lose your work Eso it's good idea tohave habit to doing something like that. And in addition to these, you have to save the final to see what change right, for example, in the brother. So I'm just saving instantly after every change, that's just ahead. So it's very good. A good shot next to us. Got our country plus C and counter plots. V well, you can copy and paste things. For example. I want to take this thing and I want to click enter and counter plots V and well, as you can see, I just cooperated. So it's going to save your time when you want to copy something and change, for example, or something like that. Here and then again, huh? I want to just cup it on bomb here. As you can see, I called by a company that beat faster because I didn't want did something like that counter plus e. And then I didn't use my mouth. I used the end shortcut whether a king on the keyboard and then I could enter encounter plus V So again I didn t smiles. I did it a bit faster. And now look, I would do it even faster. I'll use the shift plus home country plus C and enter counter plus V right, And now faster Bom bom bom bom. As you can see, it is taking very small amount of time, right? Instead of doing something like Mm ah Mm. Right. You're saving laws of time by doing things like that. Okay, now is a cap. The card is used, for example, when you want toe cut something out. I don't want this titled here. I want to cut it, and I want it to be here. Right. Um, it's like a copy bodied scouting get from the place. We are complying, but well, you know, this is not a good idea to have the title here. Oh, my God. I made a mistake. So how to do it? Well, I have to again cut it. Now I can use the counter plot, z, and it's gonna undo the things that I did that's critical and useful. Sharks got also and you can read it the action. So, for example, well, I was wrong and again so I can go back to this situation again, right? Using these counter plas y next very cool contra plus f You confined things as you can see . For example, I want Tosi where I type something like that. Or where is Dave? Instantly I can find things right. So country plus f country plus a is gonna sell like all your fights of, for example, who I want to just counter plus a this thing control policies occupying it. And I want to create a new Faisal new html five shortcuts HTM. And I'm going to cooperate here. Right? Okay, let's practice. Ah, the shortcut that we have. Just So for example, I want to create an hour orderly, so I'm gonna create something like that. Well, I wanted at the end. So how to do it? I could Selig it like that, but I could We could also use the shortcut that is presented later like, for example, shaved plus And so how when I do something that she plus and I'm gonna select from the carats from the blinking thing till the end off line And now I'm just cutting it because I don't want it to be here Contra plus X and I won't need it The end of fire. So here and I'm just combining. And as you can see, it's now not in good place. So I'm using the top, right? You can also use you. Can you stop to invent something you can use? Sheep will stop If you did Did, for example, something like that all the time. It's not good, right? So bam bam! And I'm the rights built. So we just ah, used to new shortcuts, right? Like that, for example. Okay, so let's now for use the at least item. So I'm going out the stuff like least I 10 and stuff like that and you can see it's not working good. I'm using the counter plus Z. I want all of these things indent indented a bit more, so I'm gonna just select all these things and I'm using top. As you can see now they are indented a bit more and I want at least item a bit farther. So like that. And now I want what I want at the end. Least item like that. I want this to all these lines. Apply it to all these line how to do it pretty fast. I can select it and I can copper it as you can see. Like that, for example, so I can do something like bomb balm. The problem is that, as you can see, we have got the top here. So it's probably good idea that to take it down to something like that, So we don't need to every time. Ah, do the inventing stuff and deleting. So let's something that and then just go down. Bomb home bomb home, home, home, home, Home, Home. I'm using the key home. Right. So I'm going to the begging off the mm line like that. And well, I did a bit faster, right? Because of it. And now I wanted the answer. I'm just taking this on dress, typing that And so I'm at the end. Bomb, bomb, bomb bomb. Um, and we did it a bit faster, right? Instead, of doing so. Effect these just slow. Okay? And now we just want to Internet bom bom. And we've done our work pretty fast. Of course it's gonna be so, so injured Job escaped later, but that's how it works. You can, of course, sometimes want to copy the line and well, you can do it two ways. You can do stuff like home shiftless and counter plus e and enter and enter as you can see what a country plus fee as you can see. The problem is that sometimes you have got the Indians because, well, I just did a home and but I type two times home. Then I went to the end and place and then to the beginning, and because of it I compiled the end. And also But it's taking some time also, right? You can do it a bit faster by using control plus Chief and Roky down. It's getting now in combining all these things done Pretty awesome, right? So that's how we do it. You want to copy things down? Unlikely. You will not have this shortcut in every possible editor. OK, this is not available everywhere and next thing is Well, I want to, For example, do something in the next line. I'm drunk. I just click shift plus enter. As you can see now, I don't need to use the mouse to go to this place. I can just shift was enter and I am here and I can just type in the next line. I do not need Teoh, you know, do anything else later. There's a SoCal shortcut to jumping from the beginning and to the end to the end of fight control. Plus come and control Plus and you can off course also, for example, select things from the beginning to the end. So, for example, I I'm here, for example, right. And I want to delete this comment You how to do it. Well, I could do it by shift and doing something like that using the arrow keys. Or I could do something like shift plus control plus home. And now I am at the beginning of the fire on I could use the shift to de select one line with the Roki down and then did it pretty awesome. Isn't it on? Well, as you can see now, we just needed this thing could go control plus chief. Uh, and and as you can see now, Arkansas, like all these things to the end, I could just copay did another file, something that right When you go to the script, you you can also notice that there are things like cold snippets and you can do something like, for example, type a L and then use the tab lighter. And this can see now it instantly generated for us some cold. There are lots off stuff like that that's going to see is generating for us some cold. We talk about this cold later, and But if you want to find out more about snippets, you can go to tools options to the CO 10 places you can see Now, here you can fight things about HTML. You can find things about JavaScript, and you can well create on your also some snippets. And it's gonna also save you time. Not all the leader said snoopers, but as you can see, if one of them has something like that is gonna save you some time. Sometimes you want to, for example, also select Nope, only one let later letter by using the ship and Roky you want to select? For example, Full David, once I'm gonna use the counter plus shift and the arrow que left right, as you can see, then I'm selecting world one by one. So you can, for example, how I want justice content. Okay, Sign doing something like that. Bam, bam, bam, bam! Counter plastics. And I don't know if every day any more right, you can bomb and it's gone And his bag Because I use the kind of blood See right. You can use shortcuts to increase well to decrease the time needed for the web development . I really recommend you to well, practice all these things to, for example, print all these things. Ah, on your company on your printer so you can, you know, check them out, learn them. And after a while you will notice that you're saving lots of time because of them. I really recommend them. This was a bonus lesson and have a good day 6. Embedding script on site: Hello, my friends. Today I will show you how to embed Java. Skip scripts on your website and in the same time I will show you how to do it the way that we mega website load really, really faster. It can even save about 1 to 5 seconds. It depends on how big your website is unloading spit. So it's very important to do it properly. Okay, so how to do it? You can insert your coat in bat to the HTML internally or externally. I will show you now the internet way How to do it? You're gonna use the script, talk like that. And then between the opening and closing talk, you just type the script. So, for instance, every type alert and then I will just type that This is the most simple script. It doesn't matter. What is it? What is that function? What is this parent? Is is what is that Aled Things around here that semicolon other things like that. We will talk about all these things later. Just think about this is a script that's gonna alert the person on the website and say test . All right. Hello. And now when we're on this lookout. When we use this feel, we want to choose the browser. I'm treating Firefox and night Greek play. As you can see, we have got here now. Hello? The window. Think hello? OK, and doesn't concede. Then I can see the content off our webs. Okay, so that's how it works. We have good script that is doing something like that, and that's doing it internally, right? You can also put this creep lighter. So, for example, here and there are some differences between because off it. But first, let's think about even thinking about putting something internally These very rare situations. When you want to do something like that, you want to do things like that very rarely when you want to put something into the screening that exactly place and the only in that situation. Why? Because when you do something like that, that couch is not gonna be cost. This is the world cashed. Okay, It's not gonna go into the cash, which is a temporary memory off your browser. And because of it, this gold is gonna be loaded each time the user go to another side of your website, so it's gonna slow your website that All right, so it's good idea to have it in one place. So, for example, like here on, Well, we do it like that. So we want to the coat to be here. We don't want it to be like that. And we want to import it how to do it that well, we can do something like type something script, and then we can use the attributes as are seen from which stands for source. And here we tied the source. So, for example, like that. And now we just imported this fight here. And when we refresh it, as you can see, we can still see Hello here. Brady's right. So it's there external way of doing this thing in old HTML. We had to type your also something like type and say that it is that JavaScript script by but by default fold. Now the script is javascript from scenes the html five. Ok, you don't need to, um, think about things like that animal. But there is a swell still one small problem. What is it? Well, look at this. When I really love this website against hello And then when I click. OK, our website content is loaded When I put this here. As you can see, our content is already loaded And while I can see then Hello? Why? Something like that happens because, well, I would tell you know how exactly your weapon is loaded. Firstly, you as a user would connect to your website and then you would download your HTML files. So for example, index dot h dot html And then something What is called a part, sir, we just processing and interpreting everything inside. So, for example, talks when it meets something like script, it stops totally executing while parsing other things. So if the script is here, it will go toe html. Also, it is an html document. The head also, I have got here additional information of our of our website off these websites. Oh, a title. Okay, so I have two dead. The titled for our use. Their okay. Oh, he's using the car Sit like that. Vieux port. Also, this is for Web responsive Web design and oh, script. Okay, So before going here, I should go and execute everything inside it and then go to the ball. This section and now you might be like Hey, but these just one line it's not gonna slow. It doesn't matter in that situation if the website was like that. Okay. But now imagine that your website is really big. Okay? Really? Really Be There is, like 500 of coats and you don't have only one script. The dark joyous you have got here like 50 off them. What happens? Wow. Imagine now something like that that it would go to all these scripts and then after executing all the things inside, it would load the happened. What would happen? What? Your user would just not see almost anything, right? And after loading everything, then he would see the content of the website which is very bad, right bread for our users. He would just leave probably our website. We cannot allow something like that. That's why most people just pulled the scripts here. But there is a small problem because when it put scripts here, we do not download them instantly. Right? So when the content of the website is low that it's gonna be loaded down, right? It's not so bad most situations, but well, imagine that their manuscripts also so then they are. Don't know that a bit later. So that that's not good, right? And sometimes the scripts are doing something with the layout of your website. So they are changing something, the calorie stakes, other things like that. They're moving something to other place. And now imagine that the user with the script here would just see the content of your website. And this content is gonna change. And his eye eyes, right. He would just look at this website and it's gonna change when each of that genius kid fight is gonna be loaded. That's also bad. So Well, what to do, How to how to change it. Some people would put something scare some things here. Yeah, but because off html five, we have got something. What is called a new attribute with this, which is called, I think, which stands for S and cronies. I would type this world here as Syncronys, right? And well, it means that the script is gonna be loaded in the same time when or other things are gonna be loaded, right? It's not gonna wait for the script to be executed, which is by default how browsers are loading your site, and it's just that all right, you're just putting this thing and everything works fine. But because if you have more than one screen, so you have something like that. Skipped one skipped straight to script free. And for example, um, your user will download this one first it's gonna be executed first. It is not gonna be executed then, like days. Then days. Then these, then bomb, bomb, bomb, bomb. Right. Because of it, it's good idea to use the world like differ, which is the same as S N Koreans, but it's gonna make it run one by one. Okay, it's gonna wait for the scripts to execute in that order. So when I do it like that now, you can see when I reload these website, we can see that the content is loaded and we can see the Hello, Right. It's working like that Now, if I remove these world as you can see, we don't get content. We have got content after peaking. Okay, so this is the best solution. You can have to do something like that and I suggest you to have all fight well. All screams in external source, right at because, well, it's easier to maintain your code than right. You have got the Java scraping, another fired steam. Another fights of is easier to maintain. You know, where is your scripts? It's gonna be cashed. So it means that your website is going a lot faster on Dwell. Ah, you have to also remember that do not toe create too many javascript files because if you have many javascript five well, it's easier to maintain your project. But the website he will also load slower because if you have many JavaScript, if eyes and h the http protocol is allowing you to only download about to fight at once, it means that they are gonna be many requests to your server when the user is visiting your website on because of it. Well, that because the requests are the slowest things because you have, you know the user have toe connect to the server, where is the website and then go back. This is something put is taking the longest time. And when you have manage of us, keep files, for example eight. You have, like, four times, something like that, which is maybe sometimes when the Severus very far. One second just for, you know, not downloading, but just for connecting. So it's taking loads of time and because the video website is gonna load faster, so the best website will be just one javascript far. So it will be great if you had manage of, ask it fights and then to maintain your Cody's here and then at the end, when you want to put them at the Web Web server, you want to connect them. But, you know, connecting something like that every time when you change something, What we do takes much time so much time. Most people do not do it. But you can use something what is called grand jury s, which is a task manager that would do it automatic California. I have got the course about this thing also. But if you want well, you can do it. Also, some manual, right? Okay, so the best think too smart is to put the script here in the head because it will be the first test. But you have to remember to put this key these attributes otherwise and will not be the house and well, you can check. How is it supported because no, it's from html five. You can goto it cannot use dot com and type your Essen Cronje's. And here you can type your country and, as you can see when we go to, for example, Internet Explorer. Um, well, Internet experts six and seven is not supported eight and nine. As you can see, Firefox's all five foxes are not supported. But when you add all these numbers, it depends. Where will you leave? Right? It's probably like 23 people on 100 coming to your website that be not supported. But you need to remember that you are helping all other users to load your website faster. Right? Well, they will see your website and the way did you put it here, Right. But you will make enjoy your website more for users with than you with the new brothers. I think that user that Devil Brothers knows that I don't know the enjoy as a hot Ah, the Internet as the guys with the new brother. These you make them change it faster. Your website. We'll load anyway. Okay, that's going that lesson. Thank you very much. 7. Basics of JavaScript: Hello. Today I will show you the basics off JavaScript. In order to understand JavaScript, you need to know how everything is execute. Well, this thing here is a script. It is a program. When what is a program? Well, a program is a set off instructions that must be run by a computer. Okay, so and that's it. In our situation, we have got here some instructions, some white spaces, white spaces are enters and top ally, it's yours and spaces and other things like that. And to use that Coleman. So all these things must be interpreted by something. The's program is called the parcel that is interpreting these things and they must be executed. And all these instructions are executed by the browser. And, well, the browser executives occluded by the PC. But I overcome personal computers, right? So everything que is gonna be executed from it's very important from top to the bottom. So you interim every bird that you need toe read everything line by line, and you need to remember the devi um hey, chametz like it's your fold. Okay, because, well, everything here, the syntax. So the way you write, he's gonna be interpreted by the parcel. We need toe right? Exactly. In Hiss language, right? Otherwise, you will have problems. Okay, so let's try to explain how this got here is gonna be interpreted by parcel. Let's imagine that I'm a part sir. Okay, so I am at the top. I just loaded the script Dog Js and I'm gonna execute this fight. Okay, so wow, here is a backslash. Okay. What is next? Oh, here's an asterisk, son. Oh, so everything after this is not gonna be executed to me until I met Until I meet the next asterisk and the backslash, this thing is a cold. This thing is called common. And this thing is not gonna be executed. It is needed if you want to, as it say's Coleman something right? You want to add something today? Fire that is not gonna be executed. I'm talking about the late later more and they're like, have some way spaces I do not care about. This is and whoa! Here is something. Here is a key work. It's a que water. It's important word that means something to me in my language. I'm javascript parcel, and this world stands for variable here are die bit. So this is a place that can Very. And it's label its name is X and I food there by using this Hein five. So I put five into memory and this is an instruction. This instruction because I ended it with Sam ical every instruction, every you know, I think that you have to do I think that you will think that you tell your parcel to do It's called an instruction, right? And it must be ended with the Sani column. Ah, and then you have good next variable and then you give white space and then you say, Hey, I want toe alert people on our website that it is 11 right eggs, plus why five plus six is 11. So this is gonna be interpreted by me and then executed by the bras. Um, because everything is reading proper body. I could make me sticks right Like that. Well, look here instantly. I I have good message that it's wrong. Something here and that you can see now it's not working here. Know them. The more so you can't you ride anything going on, right? You have to ride in the language we just could JavaScript and we learned the syntax of Java skipping. Next lesson. I would talk about vory booze function, other things, much more. So don't worry. Right now, I'm just telling you how everything is executed. And look, now we have got here as Sammy column, and I would type you the Enter and Hugh Andrew and here and here and feel with this thing. Grand, as you can see, is running instantly like nothing has changed. If I was a person, I would have problems. How is it working right? But for the parson, doesn't matter. Even make white spaces. You could have everything in one line, so we can. You can even mean if I this JavaScript later and we no matter at all, you will have smaller, fine, right, but for you in order to a mating pretty easy to cook, Clear coughed usual make spaces in some places. So, for example, do not do something like that because it's harder to read later. It's better if it's like that. You can omit most time in Java street. Nothing, never programming language. The semi column. So the information that this was an instruction as you can see it's still working. But it's good idea to place this semi colon here because, well, it's easier to maintain your coat. It's like, you know what you are doing right? And it can sometimes verily make some programs some errors. So it's good idea toe. Exactly right. Programs like I do. You will see next lessons how I make the tape tabulator. So the Indians, right? You will see how how I typed for things like, for example, spaces because space here is important. But space here is not. That's some kind of conventions. And try to just write things like I do and you will have a nice clear called that everybody will just love. Okay? And this is very important because you as a programmer, we work with people later, right? And they will want to read your coat. And you know, even you if you read nice called after, for example, going back to your coat after like I know one month, even last, you would not understand everything there that's got programmers work. He just do something and then you forget most time and well, it's good idea to just write things properly. Nice beautiful. When they are like that. You just come back to your car and you instantly recognize you. Remind yourself what Waas all the things about, right? You just come to your cul De Luca did it and Wow. Okay, this world like that. Okay, so that's how things are executed. Remember? One line by lot by one from top to bottom. Most times there are some extra expect X exceptions that I would talk about in next lessons . But most time is like that. So remember that well, it did something like, for example, that you will have problems like not a number, because it's not one by one. So every time you make a music, something isn't working. It's only your fault, Remember, Because you have to write in the job Oscar language like where it was expected. Okay, the zone. Good lesson. Thank you very much. 8. Comments: Hello Today I will tell you what are comments and why are they so much need it? Look, comments are used because sometimes you do not want to execute some part of your coat. And as I said in the last lesson, when you do something like that, it's not gonna be executed. It's not gonna part right. It's not gonna be right when your parcels see something like that and he will then just wait for something like that. So this is a multi line comment you don't need Asterix between. This is just something that is added by editor. You can just type your things and all of them doesn't matter. But if they don't not matter, why do we even add them? Why? Because well, look, even here In the last lesson, I created also single line comment that was not interpreted, Why I edited because I wanted to tell you that you know that variable stands for variable. So what is the purpose of this common? Well, I wanted to explain something, So if you want to explain something, you should use the comment. If you want to make your coat easier to maintain, you want to use a comma. If you want to test something, you want to use comment. Look, you want to also use comments when you want to set listens for your, for example, JavaScript. Find as you can see, to change this license gather you don't need to go to somewhere, and you couldn't change it to add to average of us. Could fall your name at that, Sarah. So you can make it to inform about something. But you might be still wondering why it will be easier to maintain cold like that because, well, this month's move off this very small. Now imagine. Imagine the situation where you have got, like, you know, 500 lines of code and you wrote, You've just written them and you're proud of yourself. Everything is working fine, great. You understand everything. But then you just go away from this project and you go to another project, another project, and then imagine that you are going to back to this project after like six months. One year, two were Stein. And then when you go back, I guarantee you that you will have emptiness in her mind. You will not understand anything. Almost Well, you, of course. After some time, you will understand the code, but it will be after sometime, right? You have to teii time to understand it. And then things like X variable is used to blah, blah, blah, blah. Blah will be very helpful. These these function that something like that. This mom, that's something like that. Things like that are gonna be helpful to you and in the same time, remember that you're not writing on Lee. Always called for yourself. If you are going toe work with other people, comments are gonna help. Also, the people who are working with right with the comments they can adjust. Read some Redick comment and they will understand your coat, Foster. Right. So it's something Teoh. Remember? Remember that you shoot, create comments in order to major coat. Easier to maintain and make it clear to everyone. Note on Lee, others, but also for yourself. Because of it. In the future, when you go to back to your project, you're gonna be happy instead of seeing a disaster. You said off not being able to understand things there you were just instantly. I understand everything, and you're gonna just change the thing that you had to change. Okay, so that's only the lesson. Thank you very much. 9. Variables: Hello Today I will tell you what is variable how to use it and why to use it. Okay, that's very important. Topic one should be used something. What is good? Okay, let's start from how to create it. In order to do it, you type a word var and which stands for a variable. Right? So this thing informs our part, sir, that we gonna create some variable. It means that we gonna store something and our memories under the name that well, now show you name off variable. So this thing is just a place in our memory. So imagine it's something like, Ah, container something were something that you can put something that right You can put there any value you won't. You can story you can changing that Look at the name of variable Couldn't be like very able . It is able to very right So you can change this value all the time you want. You're creating a variable under the name like that and you can change it later whenever you want. And when you change it, you make it can change and all places at once changing it in the top. For example, of your program because everything is running from the top to bottom. Right? That's great. Okay, But maybe I could show you some better example. Off course I will show you, but let's start from now assigning something to this variable so I can assign instantly something. For example five. And I couldn't know send into with the alert name off variable. And when I refer, she's as you can see, I have got five years. I can change these value. I can change it to, for example, free Because I change it here. And because of things around line by one, it will be now free. Right? I could also do something like that. And also do we work? Okay, when I don't does something like that, as just can see, we have undefined. It means that nothing was put you right. Okay, But you are probably right now Why even bolder Using something like variables? Because, well, I could just no do something like that, but just type five and everything works fine everywhere, Right? Well, there is a very good reason. Let's imagine a situation like that in Europe would have got the tax. Yeah, and it's killed value added tax. You can shortly pipe something like that. Value added tax and you just added to the value off your problem. So, for example, we have got a variable that we re present price off shoes and I would type here I am 100 and I have good price off T. V. Okay. And I would type who? 959. And this price is the price. Without the tax and this is a net price, it's called net price. Okay, Net price. Net price means it is without the talks. And now I would like to count. How much does it goes with the add value at attacks? So I would do something variable girls price off shoes. And now I would multiply 100 by 1.23 I would do the same thing to the girls price off TV, right? And now I would type you 915 9 As you can see now, if the price changes right, I would need to changing both place because of it. I can use something like that now when I change it here, it would change also. Okay, but this is just one occurance of why even bother? Right? But what look develop value of the talks that we added here that went free person is something that well can be changed. Um, in many places at once, right? If we change now, the value of the tax because our country changed it, would you change it into places? But well, you could count it. We've many off these guys, right? With men off products at once. So you wouldn't to changing that replace something like that. So it's good idea to create something variable vat valued tax and type 20 free. And now you could know Do something like one plus. Ah, if you want to achieve 0.23 you need to multiply. Ah, 20 free. So the thought by one 100 right? So one plus one 100 multiplied by that. Oh, and this signed is used for multiplying in the JavaScript welling mom on a programming language. And now we can do something like that. Okay. And but we can show it also girls price of shoes. As you can see now it's 123. Yes, 100 well deployed by 1.23. It's 120 feet. It works fine. We can also show the price of TV. Everything works fine. So now when the valve is changed, you can just do it here. And it was instantly change the price, right? And, well, this one use it off the variable. But look, here's an operation which takes time, right? We have to multiply something than at something. And this could be just starting another variable, which you can call, for example, calculated, provide. And we could do something like that, right? And now something like that and everything is gonna work also fine. We cannot change only this value here. But the cool thing is that now that calculation is just done once and it start inside the memory, right, it doesn't need to be redone. Everything. Of course, it was done on the two times. Just know since it was expected. But imagine that it's done like 1000 times. Then it's great to just story, because why? To calculate everything to every time something like that, right? It would improve the speed of the script. So because of it now you can see why variables are needed right, And they are needed because you want toe reuse your value somewhere. Um, you want to make your program? Maybe also more self descriptive. You want to calculate something because it takes time and we use it. And well, there are some conventions off naming Varaiya boots, as you can see. Look, I named our variables like that small letter, then the next workers good capital letter Capital capital and these the conventions of how to name variables there, then easier to read. The code is easier to maintain. So remember to name your co your variables properly. They must be self descriptive. Okay, you should also know that the size off letters inside very booze martyrs It means that if I created two variables, for example, like that they are two different values. 20 free onda we big letters 20 right to different one If I do something like that. Uh right that as you can see, it's not 23 because we change these Valium above everything is remember executive from top to bottom. So let's tie bit the size off letters inside variable variable name matters. It's very important because it might lead to some problems right. You can leave me six because off. So what other mistakes you can make? You have to remember death. You cannot start name off variable with the digital. It means you can do something like that As you can see. You having something? We're warning you because when you type variable, you are expecting a name of variable Know the number I'm number is just something that can be count. And the next thing you should remember about is that you can't used as the name keywords. The key words are just something vory were variable all right. The things that our powers by by the partner and they mean something to it. They are key wards, so variable function function these doesn't reserved You can't use the river. Serve what you will see many reserve wars later. You would just know which one are which you shouldn't use the spaces So variable value added tax calculated blah blah. As you can see, it doesn't work. It is expecting something like coma. It's stuff like that. It will work because now we declared, which means we created 1234 variables at once. OK, but we've with spaces he just doesn't that parts It doesn't know what you are just doing, okay. Do not use paces in names. The next thing you should remember about is that you shouldn't use operators in the names so you can do something. Variable var value of the tax plus calculated something. It doesn't work, OK. It is also a good idea to know that there are man of variables types right now. We were just adding some numbers were multiplying them. But there are many types, so types off variables. And now we know what numbers they are Muslim called in teachers. And now we will know something like string, which is just it continues characters. What does it mean? Well, for example, I want to say variable name mining our car dish, right? In order to do it, I have to use the double coat or the single quote because we're parceling to know that it's a string. It's a correct its characters. Right, because when I just looked like that, he's like, Well, these not declared. This is some kind of a wry booking toe, you know? D for different things, like the name of variable on from things like values like characters. Because of it, we need to use single coats or double coat, and it doesn't matter. In JavaScript. Which one you use, just matter of preference will just stick to one you have got. Also something world is called bowling, and it's true falls. It's just saying, if something was true or not, you are going to use it with the conditional statements that we'll talk about late. There is something like a raise objects. This is a bit complicated topics. We also talk about it later, and you have got something like no, which means that something is empty. You can just ah, initialized. Which means a sign toe the variable, for example. Uh, no. Which means that there is nothing right now, something like that might be needed if you want to. You know, check if something was assigned later in the other code because you know your call may be very long and, well, it's hard to describe right now why to use it because it's a bit complicated in a bit more complicated programs. So just know that very something like a new you have got also something like, I'm defined. You have notice it at the beginning of our lesson. When you do something like variable A, it's undefined right now, right? Because we didn't assign anything to eat just undefined. So to sum up our lesson, the variable is something that is able to vory it means that we can store there. We can assign them values, and we can change them later. In order to create a variable, we need to type very far than the name of variable. Then we can assign their something here or maybe later. Change it on and variables are used because your program is then more the script. If because you can do some expressions, you can do some kind of calculation that it's gonna be still and is gonna speed of your program, you can reuse your coat later. Easier because you can, for example, change then the value of the tax something else pretty easy. And it will be changed everywhere in your program in something which is also recall using toe. Remember, when you're creating variables toe name Dane so they are self descriptive. Because of it, your code would be easier to maintain, not only for other people but also for you. You should remember to name variables like that. The world started with the small letter and then the capital Let letter for every every work, right? You should also remember that the size of letter inside variable named matters really reading Bolton. And there are things that you need to remember that you cannot call You're variables life and that Well, you can start many types inside off variable like, for example here. So we can also see our name, my name on my starling. And you can also add text to each other. That's something new doing something like name plus surname. So plus is used toe add two strings We can add, for example, space between it. That's something that it's could see Now we can see my name and sovereign so we can operate on variables. You think some kind off operators? Okay, that's willing. That lesson. Thank you very much. 10. Arithmetic operators: Hello. They were going to talk about operators, operators, simply Our characters used to operate on variables. OK, so as you can see, there are many characters they're gonna tow, help, view, operate with variables and the one that we'll talk to the are coat arithmetic. So therefore very simple one. And you probably know them. It's just that operated that allows you to add two numbers. And also this one is not also on the arithmetic operator. It allows you to match to connect two strings so to text. And there is something like subtraction multiplying. You tow us, use asteroids, dividing units to use divide, and you can use it with any variable and the number okay and, well, these are simple ones. So let's focus on something. What is harder? Let's focus on the moat operator, which is the reminder off the division. Well, let's create two variables for example, X and, for example, why? And now they are the same. When I do something like alert and I would do the X moat, which is this person, it's sign Moto Cane. Why you will not This is I have zero here. What does it mean? Well, this is working like a dividing operator right now you have probably not notice. Almost. But here we have one five divided by five is one. And there is nothing left. There is no remain. Reminder. When we use that model operator here five Modelo five is really also one. But there is no reminder. And here we have got as a result and reminder. Ok, so this time is just zero. But if we do something like six model why we have got one? Why? Because we have got one as a reminder. OK, so fear we would have to free for in the game zero and 12 free for 012 free for zero? Yeah, like that. So here for So you are just taking the reminder here into the real result. And yeah, you might be asking yourself now, why do I even need something like that? Really? In the programming language? Yes. It's really cool. Let's imagine that here is the number off. For example, the power grab on your website. You have good many paragraphs, right? So 12345 and attach etcetera. And then you would like to for example after each five. Fifth off the paragraph. Do something with it special. You want Teoh, for example? Make bigger. Imagine you want to move it when somebody the can over the the place Other things like that on Lee Onley You want to do it to the fifth guy? Right? Then you know that five model or 50 all others results are different, right? So for the federal, you would have won as a result two for the second row free for the Ted Row four for the fourth fight for the fifth row and it would go on. So it's so only result the good result the result that they want would be for five because five more 50 Right? So for 10 it would be zero for fitting blue zero and you could then apply the special treatment for these euro. If you wanted to do something for each federal, you would just do something like that, right? And then each Ted row would be then a za result zero because well, in next lessons even know something like that if a statement which is gonna check if something happened, right? So if ex Modelo, why is zero. Then you can do something specialty. So this is really cool, operator, and you can find many usage examples in real life. Okay, so the next operator is the singing value and you know it. But there is some kind of shortcut assigning value value operators. How do we use them? Where, For example? Normally, if you wanted to add to X two, for example, you will do something like X equals X plus to And why is that working like that? That added to free to look, it's working like that because you are now running executing the program from the top to bottom. Right. So here the eggs will be free and free plus two is five and then you assign that five to the X to the new weeks. Okay, You're just changing the value of your variable to the new one that is presented here. You need to remember that the coaches executed from the right to the left side also in situation like that, so two plus free is five on. Normally, you could also write something like that, right? But variables are very you. Then if you change something here, we need to also change here and you will forget about it, right? That's why you want to die of something like that and things like that are pretty common to use. And then it's good idea to that. Just write it a bit faster like that. So this is this line just equals These line is just the same as you can see. The result is five also. So it's it's like add to me toe itself to and then we can show the result below and all others are working the same. So here we have as a result, what one Right. So because I want to say abstract from free one and two Sorry. And we have one on divide, one would work also the same, right? So far, divided by toe is to six, divided by two is free. You can divide by bigger numbers under feeling that you can do whatever you want. You can type you on a number one right, So these just a short cut and even bigger shortcut to this thing is used for incrimination and discrimination. But what this incrimination is just something like increase the value by one. Here it is decreased the value by one. So implementation means increasing something dick lamentation decreasing. And for example, let's use it on our weeks. So if I do something like X plus blast, you will not is that we have seven and you can not. Is that Why do we need these when we could also write something like that? Right, Because something like that is used even more frequently than the then adding to free for five. You will notice that most time when you do something, you want to pass through the acumen through something body school era. You will soon know border a rise and you want to jump one by one. And this is just so frequent to use that it's cool to have something like that you would just passed through ever through each off. The thing that you want to go through, just one by one using this thing, right? Zo, imagine that, for example, here we have X, which is one, and it's for example, for the first paragraph on your website and then you and you do something like that. You're on the second for paragraph and then you are on the terror that and other things like that. And then you go Just go. Keep going. Keep going. Right. So this is even more more frequent to use. And that's why we have got even better shortcut for it. But you need to also remember that you can ride These blasts is also here. As you can see, the result is the same. We have got here too. When we do it like that or like that, we have got the same results. So why even eso I am men Shipman shelling it. Well, look at this like that when we write something like that, it this thing is called post incrimination. Okay, Uh, when I like that, it's post post deck lamentation. And when I do something like that, it is got prayer incrimination. And when I do something like that, it's gold prayer. Oh, sorry. Pray their criminal station. So is the difference on Lee in that world work here? No, it's hard. It's easy to remember that when something dispose, it means that is after, right, When something it is prayer. It means that it's before something. And when I use increment ation or documentation inside the output, so for example like that. Now it really matters because here it says that I want to now firstly show people other them with the value that waas here and then incriminated. As you can see, we have got here one, it waas increased by one. But after showing it to the people right to the outer, to the user of website. When I do something like that, you would notice that we have good one. But the truth is that the X was increased by one, but we showed it. Firstly, if I do it that way, it means that I want to first increase that value and then show the output, as you can see now here, good both times to. So it's pretty important to know these difference because sometimes you want to change something on your own. Your website directly with, for example, using this shortcut. And then if you use the wrong one, you might have some problems, right? You need to know that lighter. You are not going toe alert people to the function like that. But you gonna take, for example, part of your called on your website, and then you're gonna just updated to the JavaScript Co. For example, Key right, And because of it, then something like that might lead to problems. Or if you want to know how to use it, it will work Well, okay, so to sum up, operators are just characters that are used to operate a memory, boost their basic operators. There is something we'll discuss remaining off the vision. We just called Mort Operator, and it's pretty useful for choosing, for example, each fifth bar up from many paragraphs, right? So if I wanted to do it, I would just type something like more five, right? And then one more. Five. He's one. So it's not that 123455 is the one that I won't write because it equals zero and I can condition it. I can just check something like right that it's an expression that we can track and work with it. And we have got shortcuts like that that are gonna just speed up Meg York cold, clearer. You have got even better shortcuts for implementation and decriminalization. So these are the basic operators, and it's all indeed, lesson. Thank you very much. 11. Relational Operators: Hello Today we're going to talk about the relational operators which are most time called comparision operators. Well, what does relation when you have two people and they are in relation? Well, they are connected to each other somehow, so we can compare them to each other. And when you want toe relate to things to each other, you compare them, right? So relational operators are used to compare toe variables. And you might be asking why doing Indian needed when we take something like variable A equals five on, then we tied b equals free. Then we know that here is five and here is freed. And why do we even need to compare them? Well, you need to compare two variables because, for example, sometimes your ver a boost are assigned from the website content. You're not typing here exactly five, right? You're just taking the content of your website and we learn how to do it later and inserting in here, for example, when you are creating passwords and then the passport February, where the user has has two retired the password you want to compare if both these passwords are the same, right? So he by mistake. Do not type something wrong and then he would have probably cause his possible. We will not work at well, right. And that's why you need something like compa reason. Right? And we will use traditional operators. So the first traditional operator is to equal sign. And this is just comparing two things. If they are equal to each other right on. And you have toe. Really? Remember that you have got here two signs. Not one because one sign is used for a signing something right? You want to assign like here five to a when you take something like that, you are comparing these two things not sank. Okay? And this is very typical. Here are the most beginning. Programmers are doing so really remember that this is not the same as this, right? So how to use it? We will use it in the alert command. So we allard, for example, is five is a equal to be something that and as you can see as the result, we have got false because well, free is not equal to free, as I mean five years not equal toe free. And as you can see, the false is the bowling type, which is true or false. And so the result off the relational operators is a bowling bowling time. And you can use it later in the conditional statement where you will say something like, if something like that equals like that, then do something like that, for example in for that, the user that the passwords are no the same or something that, um so and this is the basic traditional operator. And you, as you can see, we have got here warning it says expected free science like that. Why the do we need to type free here and what's the difference? As you can see, the result is the same. But when you type stuff like that, it checks. If the two variables are either anti call, okay, it means that they have to have the also the same time. Variables must be the same type off to. So right now there's a number, and this is a number, and when we do stuff like that, we have got here, too. But sometimes you can have you a string on and then it's gonna be false. It is good idea. Toe have something like that because you might. But by doing it like that, make less errors. Okay, But if you know what you are doing and you know how things are working, you can pretty easy use just to sign. But it is good to do something that you have problems that, at least at the beginning OK, so that's the difference. You can also do stuff like and then exclamation mark and the equal sign. And this thing will just check if two things are not equal to each other, right? So when we have something like that East five not equal to free, they are different. Yes, they are different. So it's true. And if they are, um, the same, then we have got false. Of course, on, well, you have got also something like this. So if the two something is greater than something else lower than greater or equal to or lower than are equal to. So when we do something like a is greater than being no, it's not greater than being. It's false because they are the same when we do something like that. That's true because five is equal to be. It's all greater, but it's the same, right? So it's true and we can also do something like that. So when we do it like it like that, it's Tara. When you do it like that, it's false. When we do, it's like that. It's false also because seven is greater than me. Of course, you can use here and the other. You don't need to use variables on both sides to compare anything driving to remember. Okay, so doesn't Onley that lesson. Thank you very much. 12. Logical Operators: Hello Today we're going to talk about logical operators. Logical operators looks the same as the one that you probably know from the high school from the math lessons. If you know math pretty good, you will not have problems digesting it all. But don't worry, I will show you everything about logical operators. Logical operators are working on logical values. So they are working on zero, which is false, and one which is to. And for example, there is something like Nate negation operator, which is saying not. It means that if you have, for example, something like that, it will change the result to one. If you do something like that, their results to zero. It's just saying not false, which is still not to where this false right? And, ah, there is two more operators which are a bit harder, which is the conjunction and alternative Colin Junction. And you should call this thing and and these junction, which are sometimes it is called alternative. Okay, so how does it work when you have, for example, on your website and for with the password and the checkbooks for, for example, accepting terms and condition, you can sometimes won't a person to two tied both parts? World's the same. So you want to check it for password? Well, I'm puzzled. One equals password too. And in the same time you want to, For example, See if the checkbooks was so and he's checked and the number of checks or something that right You want to see if something is checks? Examples of is checked East terms project. So you want to make a conjunction with two expressions at once, Then you have to use the logical operator. And how does conjunction quirk when you have expression one and expression to you will get results like when you have zero and you know the results will be zero. When you have 10 the result will be zero. When you have 01 the result will be zero. But with of Juan and one, you will have a series on one, which means that conjunction is to Onley. If both expressions are two in the same time, which is pretty easy to understand because well, when you say I want to go to cinema and after it, I want to eat the ice cream, right? It means that I want to do both things at once, and that's why it's only through when both expressions are too. So in situation like that, this thing this both things would return through on Lee if the passwords were the same and in the same time terms were checked. That's why it's cool, because you can do something like that at once. Okay? And you have also something like like them these junction. But these junction walks a bit different. Well, these junction works like that. It means that when you have alternative way of doing something you're choosing. So when you have 00 you don't have an alternative. So the result zero when you have one and zero treating one from here, right when you have 01 interesting. These ones. So one when you have one and 100 treating these or day, so the result is one and the S s. So it's a good idea to write something like that. That disjunction is falls on when both expressions are false in the same time. So let's train the thing I would tell you now about conditional state and virtual ive. It's a conditional statement that you can used by typing something in parent is is between these two sides. Here you can type something like expressions, right? So when I do things like if a is greater than the then Oller to test And as you can see, when our program run, we have got here test. So this thing will only show if a is greater than be. It's not like that. It's not gonna show widow. And now we can check if in the same time, for example, B equals five. If yes, then show the test. As you can see, it's showing them our test. But when we change, for example, being the free you're not is that is a greater than being. Yeah, so we have heat one Truth is be equal to five. No. So you have here is here. So one and zero gives us work as a result zero. So it means that this hour is not gonna be shown if you used alternative that these Jonathan injunction you will not is that we have got now here shown test because one and zero gives us one. And you can change always the result by using negation. So when we designed like that and I used the exclamation mark Now would change the 120 right, because this thing is giving us one. And this thing is changing the result off 120 As you can see now, it's not showing us even though I'm refreshing this side. So that's how the operator wars. Of course, it's a good idea to use them on the more practical things, like something like that. But I'm showing it right now like that because, you know, we don't know how to get things from the side. We will learn all these things in future lessons. That's only the lesson. Thank you very much. 13. Bitwise Operators: Hello. They were going to talk about bid wise operators. Beatriz operators, as the name suggests, are working bit. But what are beats? Well, bit are an electric tensions that are coming to our PC, and they are interpreted as to state zero or one. So we they are jumping between zero and ones and they are jumping some funds because we have got very good processor and other things like that, and they are safe somewhere. Remember blob of them. There is much to the stop it, but well, this is just an information that is interpreted in tow. Anything that you can see in your computer can that things even here editor, another program. So we can work using the big wise operators on them, and you might think that it would be faster. Yes, it would be faster. But the problem is the JavaScript. If you are working with the pitch, wise operators is doing something like changing types off the variables that you're working with, and this is a bit slower. So in javascript you would like the most time avoid using big wise operator. They're cool in other languages, but here it's just very rarely used. So this lesson is rather an interesting fact for you. Okay, so if you're incarcerated, just skip these lesson. But a Wait a second. There is something you need to know. Look, here is an on person, one single one person bid wise, and it means that is very similar to the logical operator. A contraction that was looking like that. It works also very similar, but this one is working on bid. These one is working on logical values. And you know you have toe. Remember to know to use these one by a mystic, right? Because it would not be good for you. And you need to know where the big boys operators are used in the JavaScript. Well, they are mostly used when you want to come for something, but it's very rare situation because other languages are doing better. And very you want to do it by the job escape. And, well, when you want to do something with ports with the sockets, then you want to check for ah, something will discovered flax. We drugs, which are some kind of state. Steve, Something is, for example, opened no other things like that. So this is very, very right. So but it's cool to know how our computer is working. So if you have time, just watch this video. Okay? So how I wear, for example, numbers in real life that you are using which are a destiny which is in decimal system, are working when you die for something 126. The truth is that we are doing something like that one multiplied by 10 which is a decimal system, and to the power off, two to the power off to so in to the part of seconds of these mean that it's quite right. It's good square, so 10 squirt and this is what 100 multiplied by one is 100. So this is the truth about our system. And then just stuff like to multiplied by then plus six multiplied by 10 to the power off zero. And this is what when we do, like multiply everything. It's 100 multiplied by one. It's one then multiplied by two is too intense. So it's 120 plus zero. Multiple, uh, to the power of 10 to