 So, we come here to the last part in JavaScript and we can do a fair number of things now. And this is, we can react to things that happen in the HTML. So we can react to user events, the user clicking on a button or editing text somewhere or hovering over a link, timeouts happening, a certain delay and then we get a call back. We can look at how the site is being loaded again using JavaScript. But sometimes we need to get new information after we have loaded the page. For example, if we need user input, then we don't know what the user will enter, so we can't really load the right content before. For example, consider Google. If you go to Google and you start entering your search string, I would like to have, then Google suggests what you would like to have, depending on what other users have Google. And of course, Google does not know what you're going to type. They can do a lot with all their data they have, but they certainly cannot yet look into your brain. So they don't know what you will write, so they have to wait until you have entered things. And this is, of course, after the page has loaded. So this means Google has to load content after the HTML, JavaScript and everything else has already been served to you from the server. And the technology Google is likely using is called AJAX. And technology is actually a little bit the wrong word here, but it's more a principle that a technique that JavaScript uses. And it stands for asynchronous JavaScript and XML. Note that the XML is outdated, so this came up at a time when XML was the main exchange format for web requests, for example. Basically you do things asynchronously in JavaScript and you return something, a text, JSON, a picture, whatever. And what this technique does is it allows you to do HTTP requests and responses after the page has been served. And it allows you to update the page with new data without reloading the entire page. So you don't send new requests saying give me the HTML file with certain parameters, but you just request additional data. So you use this to update the page. You load only what is needed in the beginning, so you don't need to load everything that is possible. And you load different data depending on the user input. So for example, Google would load different suggestions depending on what you started to type. Another example for load only what is needed is if you look at the Facebook or Instagram apps, you will notice that if you scroll down at some point, it starts loading a short while. So you see this turning circle and then new pictures or new posts will show up. And this is simply that Facebook or Instagram only load a couple of items. And then depending on how far you scroll, they load more. So they don't have to load 100 pictures, for example, but maybe it's enough to start loading five and then load the rest later, only if the user actually scrolls far enough. So this is what Ajax does. And JavaScript by default has an object that is called XML HTTP request, which can be used to do these things. And as a summary, again, what happens is something in the browser happens. For example, the user enters a search string in Google. Google then creates an XML HTTP request object. It sends this request to the server the same way as it worked before. The server processes it, creates a response. And the response is then processed within JavaScript. And then JavaScript can, of course, be used to, for example, change the DOM and display something to the user. And notice we process the return data using JavaScript. So we do not reload the HTML page. That's the key thing here. The way this looks like in an example is as follows. We create our XML HTTP request object with a certain name. We tell it to open a connection. In this case, we choose to get method. And in this case, I simply request a text file. So a simple resource on my own computer. And then I send the request. And here, this is actually a callback function we assign. We say that whenever the ready state changes, so whenever basically something is happening here, then we execute this code. We call the callback function. And ready state four in the terminology of this XML HTTP request object means that we have received a response. The response has arrived. And in case the status is 200, so that's the HTTP response status, then we just log the text. So in this case, if it's successful, we print out something, whatever we have gotten back. If we either don't get a response or the status is something else, then nothing will ever happen. So this is our callback function. As I said, this will make sure whenever the request comes back, the code is being executed. Here is the HTTP method we will use. We can also do post, delete, and all the others. We have a URL. Here I only used a local file, but this could be HTTP and something else. And finally, we can define whether we want to do this asynchronously or we do want to have it blocking. So we want to do the request and wait until something comes back. And asynchronous is, of course, the default state because if you do blocking, it means your application, your website freezes and nothing happens until there is a response. So this is the way it works. And let's test this. So I simply copy this code here. You have seen it. I get my local file Ajax test.text. We can look into it to see what I'm actually dealing with here. Here it is. And it just says some text from the worldwide web. Nothing fancy here. If we reload this, you will see that there is some text from WWW. There's also an XML parser error because I'm probably having the wrong return value in my HTTP request. So this is nothing to worry about here. But if we would do this in real life, of course, you would have to look into it. Now this was done when I loaded. So it's maybe not that special. But of course, we want to show you that this can be done asynchronously. So I'll define a function. And whenever my function is being called, I will do my request. And of course, this can be simulated using a button again. And whenever the user clicks on the button, I run my code to Ajax. Let's reload. Now you see there's nothing here. As soon as I press, I get some text from the World Wide Web. And indeed, the website has not reloaded. For now, you'll have to believe me. We could of course look into the network. But if you look into the browser window or at the ready icon here, you see that it never changes to loading. So my HTML file is actually never being reloaded. This happens on the fly. And as I said, this could be used for calling a website. For example, we could do give me the Wikipedia article for URL. So this should also work. I can already tell you that it won't. And the reason is something that is called course or cross origin requests. We'll cover this a bit later. But essentially, this is a security feature that means if you send a request across a domain, so I send a request that is not coming from Wikipedia.org to Wikipedia.org, by default, this is being blocked. And again, for now, it's not relevant. But this is a security feature to basically avoid having websites talking to each other. So for example, I have Canvas open here, and I want to avoid that my website starts doing stuff with Canvas at the same time. We'll cover this in the security lectures. But this is the basic reason why I simply use the text file here to demonstrate that this indeed works. Now this is a bit complicated. For example, this ready state is cryptic, and you have to put every status code here. And so far, we haven't added any headers. But of course, if we do, for example, a post request, we might have to add certain headers. We might have to add a body and so on. And this makes this XML HTTP request object a bit cumbersome. It's not that good to use. So there are, of course, many, many libraries that do HTTP requests for you. And as an example, I'm introducing Axios here. So that's one rather popular JavaScript library that does HTTP requests. And you are free to use it in the course. So of course, always free to use XML HTTP request. But as I said, it's a little bit cumbersome to do this for more advanced requests. Axios uses some concepts that I'm not introducing here. In particular, promises and error functions. But I'll quickly show how they look like without explaining all the details. This is not really important. For a simple usage, you will understand what they do. Now let's do a simple request to something. I replace my code here with the Axios code. And the first thing is I actually have to include my script. So there is, it's a library. So I have to load this library from somewhere. And the way I do this is using the script tags and simply an external JavaScript file. And you notice here that this one is actually an absolute URL. So this JavaScript file is lying somewhere on the internet. And now I can use this. And if you look into the code, what happens is that I call Axios.get. So Axios is simply the library. .get defines the method. I could also do .post to do a post request and so on with a certain URL. So maybe I can do AjaxTest.txt again. And then we get a somewhat cryptic code. Let's have a look at it. OK. So you see that Axios.get, this should be clear so far. I do a get request to this URL. And then I have .then and .catch. And these are promises. They basically have two cases. Then is if it's successful, catch is if it's an error. So in this case, simply I do a get request. If it works, do whatever is in here. If it doesn't work, do whatever is in here. The error case is simple. We simply log error. Here I actually iterate through something. So I assume, for example, that my response is an array and I iterate through the array. In this case, I probably just print my response. So it becomes similarly easy. Here I print the error. Here I print the response. Then you have this stuff here. These are error functions. You can imagine them roughly being the same as writing function response and then curly braces. So it's basically put the parameter response into a function and then call the function. So it's in a way a short form for a function definition. It does have some impact on the scope, but this is not important here. Now if I run this, it hopefully works if I've done everything correct. And you'll see that I actually get my response object. In this case, I don't just get the text back, but I actually get an object with a number of things. For example, you see here's my data. This is the actual text from my text file. I get all the HTTP headers and I again get the request so I can look at what I sent to the server. So there are a number of additional things. I can look at the status code, the status text, and so on. But essentially here with this really small piece of code, I've done exactly the same that I previously did with my XML HTTP object if we go back. This does the same that I now did in essentially four lines of code. If we look a little bit at the code, I discussed that there is the HTTP method. Here it's a function call with that name. We have the URL. We have these promise objects that have basically a success and an error case. That's as much as I'll explain here. We also have error functions, which are basically a short form for a function definition. So instead of saying function error, we just say error equals greater than and then have our curly braces. So that's how you can think about error functions here. So this concludes the JavaScript module and since this is a proper programming language, there's a huge number of concepts I have not covered and I was not able to cover. And there are the ones that are fairly intuitive. So I did not cover loops, string operations, for example, getting a substring of a string, math operations, random date and things like that, lots of operators that exist like and or, and the reason is simply that this is very similar to what you should be used to if you know Python or if you know Java or all of that. It behaves fairly similar. It basically has a lot to do with looking up the right methods. For example, how do I get a substring of a string? I have not talked about type conversion. I've shown you implicit type conversion. So if I have a number variable and I assign a string, the type changes. But of course, you can also do this explicitly. You can say, please give me the string value of variable X. Similarly, I have not discussed float accuracy. Whenever you have floating point numbers, there is an issue with how accurate they are, rounding arrows and so on. And then there are a number of things that are quite advanced. For example, there's the concept of closures, which I have not covered. Arrow functions, promises you have seen, but I have not gone into detail what they mean. And I have not really discussed much about object creation and prototypes. So basically the way to do reusable entities in JavaScript. I have not discussed this. Several languages have a statement like this. For example, Java has it to refer to the own scope. It's a bit complicated in JavaScript. This is why I did not cover it here. This will also be in the second web course. Now I have discussed a course. The issue that I cannot access, cannot do an Ajax request to a different domain that this is typically blocked. There is a way of enabling this. I have not covered in much detail. And then there is a whole bunch of languages that built on top of JavaScript that, for example, introduce types properly. And these are so-called transpiled languages. So they compile into JavaScript. Again, this is something that I have not been able to cover. Overall, some of these concepts we will see later on. For example, I'll definitely cover course later on. I'm likely to cover something like TypeScript to show it to you. But there is also a whole bunch of stuff that you have to learn yourself if you need it. Additionally, the second web programming course here at RU covers some more advanced JavaScript so you'll get in touch with those concepts. Overall, if you're interested, check reference two. Otherwise, be prepared that you need to learn these things on the way. To summarize the overall module, whenever we parse an HTML document, we create the DOM, the document object model, which is basically an API for accessing, manipulating the HTML content. And this is a tree structure. Now, JavaScript originally is a client-side language. So it runs in the browser. It reacts to events that are typically triggered by the user, for example, mouse clicks. And it can read, modify the DOM. So you can change the way the website looks like and you can access information that has been entered by the user, for example, in form elements. Now, JavaScript is similar to a lot of programming languages, but it has a number of really unintuitive things, especially for beginners. And I've covered type conversion, comparison of variables, hoisting, scope, and the asynchronicity. But this is not always easy to understand. And finally, I've gone into AJAX, which is a way of making HTTP requests asynchronously after a page has been served so without reloading HTML. And this really makes websites applications truly interactive so that you don't constantly have to reload your HTML page. So thank you for your attention and this finalizes the JavaScript module.