 Okay, let's do some basic JavaScript. Now you know that you can put it in different places in the browser, and now we will actually go in and write some code. So the first thing we typically want to do is some kind of printouts in the console, and this is simply done by console.log in JavaScript. And you can view the console in different ways. It's, I think, F12 in Firefox. It's differently in Chrome and so on, but all the browsers have a browser console where you can see your output. And let's start by doing that. So I have prepared a simple file here that has a heading, a tag, a button, nothing else, and empty script tags. And here I will just say console.log script is being loaded. So now I get an output whenever my code gets to this part. And if we try this, basic JavaScript, you see that here it is. And if I go into the console, you see script is being loaded. So I've managed to do an output. It also complains about the character and coding, by the way. So it sometimes has some complaints about, for example, HTML and so on. Now I've used a shortcut on Mac, it's option command K, but you can also go into tools, developer web console. So yeah, if you do F12, you end up in a different of these tabs, but you can simply switch to console then. There's also a debugger, which we get into later. For example, remember maybe the style editor from the last lecture where we could change the styling CSS. So this is a console output, pretty simple. Then of course it would like to do functions. Whenever we do programming, we want to have functions so we can reuse code. And the way this works in JavaScript is that you simply say function, you define a name, and you define parameters. You don't have a return type that's implicit. So you can just say return whatever you want. Again, we get to variables a bit later, but there are no return types in JavaScript. The other thing you notice here is that we have the curly braces. So this is not as in Python here. The curly braces define that there is a new block. You also typically have indentation, but it's optional. So this is just for styling. It's not carrying any meaning as it does in Python. So all that counts are the curly braces. And also one more thing that is important is that semicolons are actually optional. So you can leave them away. It will work. They are strongly recommended because it can happen that you write buggy code, you write something wrong, and it just continues on the next line. So for example, you start the next line with dot something and then it might become actually that you access that the return type of this is an object and then it just continues executing and so on. So even if you don't yet understand why you should have them put them there, it's good practice. But if you see anyone in the internet, in examples, skipping them, this is generally fine and you will come across that. So let's write a function. I use my alert from previous slides. So function show alert, I have a message parameter that I call message and I simply do window.alert message. And now whenever I call this here, I can do show alert, hello from the script bottom. Now as soon as the script is completely loaded, it will show the alert. Here you go. And of course, this is not so nice. Typically, you don't want to bother the user that much. So we can, for example, put it again into our event. So instead of saying window.alert, what I did earlier, I can just call a function here. Show alert, hello. And now you might notice one thing and that is I used single quotation marks here. Down here, I have double quotation marks. In JavaScript, both is fine. So double or single quotation marks are fine for strings. Here I use the single ones because otherwise my HTML gets confused. If I use double here, it thinks that the attribute is over and it starts with more HTML code. So I use single quotation marks to distinguish them from here. And that's also the way it works in JavaScript itself. If you want to have quotation marks within, you can simply use the other type. So here I use double quotation marks. If I want to have single ones here, I can just say it's being loaded and JavaScript just ignores them or it doesn't ignore them, it actually prints them as you see here. So now I added my function. If I do click, I get my alert. So much for basic functions. Then of course, we can have variables. And I said earlier, JavaScript is weakly typed. For now, we say it's untyped. It's not quite true. We get into detail there later. But if you look at the definitions of variables, you see that all I use is var. I never say what kind of type it is. I don't say that this is a number or this is a string. So you just say var, give it a name and a value. So you have two numbers. You can of course have additions of different things. You can have floating point, string, boolean. That's what you can do. Let's do it just for completeness. Let's say we say variable. My message is hello from inside a variable. And then later on, I just do show alert, my message. And of course, this works exactly as you would expect. It writes my string into a variable and then it hands this the variable to the function which displays it. So this is fine. This is so far, so good for variables, functions and logging and we'll get back to that later. Now we do some DOM modifications. So what can we do with the document object model that we set is one of the main uses of JavaScript in the browser. One thing you can do is you can access existing elements or read elements. For example, if you do document, get element by ID, the browser will return to you the element that has the ID that you provided, a string. If it exists, of course. If you do get elements by tag name, you will get an array of all elements that have the name you specified. So if I put P in here, I would get all the paragraphs back. Same with class name. And then of course, you have some defined fields like body head, there's always only one body so there's no need to somehow filter. And as you see down there, in this case, I use first child, which simply returns the first element under another element. You can run most of these methods on any HTML element. So for example, I could get a specific element here, document, get element by ID, and then I use that element to search for all elements with a tag name. This is quite common because for example, here I would like to get a diff. And then within the diff, you want to get all the paragraphs, but you don't wanna have all the paragraphs in the document. So you can do this on any element, not for all methods. So the element by ID, for example, only works on document because ID should be unique. Let's try this. If you look into the code, I have a button here, which I'll change the functionality now. I'll add an input text field. Name, input type text. I give it an ID, name in, and that's it. Okay, let's, this is of course not very nice, but for brevity, we'll leave away the label here. You should use labels typically. And I say if I click, I would like to get the name. So I have a new function. Of course, I have to define this function. That's what I'll do here. Also let me remove the show alert. A double slash is a line comment. You can also have multi-line comments with slash star, and then you do star slash to stop it as it works in many programming languages. So I want to have my function get name. And when I call this, I would like to print this name that I put in here on the console. For that, I need to say get my field. And in this case, I can use the ID that I've assigned. So get element by ID, name in. Let's use the same naming here that it doesn't get confusing. And now I have the HTML element. That alone is not yet helpful, but I would like to have the text that was in there. And I do that using the value parameter or attribute of an element. So I can do name in dot value because as you might remember in HTML, if you have a text field, you assign the value of it what's in there basically. And what you also see here, the plus is a string concatenation. So I have one string and I add another string to it. So the output now will simply be this whole line. Let's try this whether I've forgotten anything. I have my text field, okay, I forgot the new line and I put in my name and I say click and then you see down there it actually outputs my name. So this is one example of how you access the document object model, how you access elements in your browser that are displayed. That's of course cool, but you would like to change them. And there are different ways to do that. So for example, you can say dot text content. That's the text between start and end tag. So for example, here, if we have a header, you can change the header to something else. You could change attributes. For example, the source attribute of a picture to whenever I click a button, I get a different picture. You can also change styling. For example, the color property of a header. And you can properly remove elements. So just say remove child and then you put a child element in there and it will be gone. Let's try some of those things. Usually I do the cat here. So let's do the cat. I have an image. Let's do it properly. It's a cat. And when I click on my button, I would like to change the picture. So again, new function. I have to get my picture. Document dot get element by ID. What was it? Image container. This hopefully gives me my element. And then I can say image dot source is, and I believe I have a different one. I have this hedgehog dog. So change this to dog hedge dot JPEG. Here's my cat. Okay, it's giant. When I click, it changes to the hedgehog dog. So now I've added some kind of dynamic behavior. Of course you can make this a bit more advanced. You can say, well, we only do this when you have put in a certain name. So only when it says test in my text field, then I would like to change the picture. So instead of outputting this, what I did earlier, I just return it. So now I've changed my get name function. And now I can just say var name is get name. And then I say, if my name is test, then I would like to change the picture. Otherwise I don't do anything. And now I skipped the indentation just to show you that it works. This here is actually not good practice, but for now it's good enough because you know this from Python. So this is equality that is a bit tricky in JavaScript. So let's summarize. What happens here is when I click the button, it calls change pic. Change pic checks whatever it calls the get name function. It returns the name that is, or the text that is in the input text field. And if this text happens to be test, then it changes the picture. So here's my cat again. Let's remove this. And now I have Grisha Liebel in here. If I click nothing should happen. And that's exactly what is the case. If I put test in, let's hope this works, then it changes. So now you've already done, we have already written some code that actually depends on what the user does. Depending on that does different things with the HTML document. Okay. And finally you can replace the entire HTML code, just write and you enter a string, which is just HTML text. And you can create elements. And I will probably not, or I can copy this example because it's quite substantial. The problem is this is a lot of work, right? So let's say we want to have a paragraph with an ID. You see that first I have to say create element. I have to create the ID attribute. I have to assign the value of that attribute. Then I have to add the attribute to my paragraph element. I have to add the actual text. So the text between the start and the end tags. I have to add the text to the paragraph. And finally I have to insert the paragraph into my HTML document. So here I do it under some kind of div. So this is really quite some code just for adding a paragraph. But just for completeness that this works. Now I have everything in one line. This should be fine, by the way. So let's try this. I do need an element with ID, my div. Otherwise nothing will be inserted. So let's say we have up here the div. Here I should get my new paragraph. And I call this whenever I click on my button as before. So now if I click here you see the cat moved. And that's because up here I have some new text. And if we inspect it, you will see that it indeed has ID, new paragraph and the correct text. So I needed all of these lines. Well, here's just one line because everything is here. But in my slides with proper line breaks you see that there are actually seven lines just to add a paragraph. Finally, one interesting thing maybe is to note that here I have of course my paragraph and you see it here in the inspect view. But if I say right click view page source you do not see it. And this has to do with the DOM and the source. What I look at here in the page source is the HTML that came from the server. So this is the unchanged version. While what you display and what is in the inspector is actually the DOM. So it's the document object model, the way it looks like right now. And I have inserted something so the DOM has changed. But of course the original file has not changed. So this is an important distinction. Okay, let's do the last part of this module of this small video, which is events. And of course I've shown you the on click but given that we talk about event driven we would like to have different events that trigger something. And you have seen this one. So whenever I click on something call a function these are HTML events. So on click is defined in HTML. And then of course a lot of them. So in four there's a whole reference on all of them but a bunch of them are here. For example, you have the on load which is triggered once something is loaded. So for example, when the picture is finished loading please execute some code. On click you have seen on change if something changes in the element for example, if you enter a new text in your text box then please trigger a function. On submit is for forms. So when a form is submitted call something and on context menu I'd like to skip because this is our right click madness. So whenever someone right clicks you can run a function that for example opens an alert and says this is not permitted or so on. This is the good old right click protection. And all of this is really why it's called event driven JavaScript. So we have the HTML events and those basically drive the code they trigger things in the code. This is why we call JavaScript event driven in the browser. We have done this so I don't need to do a lot but we can maybe do the on change. So just so that you see that it works. Let's go into our input text field and we say on change print text. So now I just want to print whatever is in the text field whenever I change it. And of course for this I again have to get my element and print it. Let's see whether this worked. Let's go into our console. If I do something here, it doesn't happen. Okay, it doesn't do anything until I press enter. So it realizes that it has changed once I press the enter button. There are probably I would have to consult the reference myself but there are probably ways to check that whenever you add a new letter do something. Okay, so this concludes this video on some basic JavaScript things. Next we will look a bit deeper at types and how the different things internally actually work.