 Welcome to the first part of lecture 10 which is about a summary of everything we have covered so far And this lecture part this lecture module contains two parts first I'll really just summarize and give a short outlook where we're heading in the second half of the course and then I'll discuss potential exam content Now we'll first go a bit through the through the learning outcomes and discuss what we have covered what we haven't covered In terms of knowledge and comprehension, we have actually covered a bit of most of the things So you should be able to tell what the client side where server side web application is or what client server side execution means You should be able to Summarize HTTP requests and responses to some extent there will be more coming on this so so far You don't know this perfectly Similarly, you know the HTTP warps a little bit more is coming And the same applies here. So the different features different properties For example things like even potents and so on that's coming in more detail What is not coming in much more detail is this one here? So you should now know the key language concepts of HTML sees as a JavaScript Especially after you're done with assignment to so this of course still takes a bit of practice JavaScript will cover in a bit more depth in the server side lectures Accessibility we have discussed and you should be able to give some examples for code there as well So for example sees as media queries And given that you have worked a bit now with with HTML sees as a JavaScript You should be able to predict How a website looks like or behaves based on the source code And then we have got a bit into testing there is more of that coming as well What we haven't covered yet is rest. That's part of server side Execution and then the security topics which has two specific lectures But otherwise these knowledge and comprehension outcomes are already covered quite well Application analysis. There's lots of stuff to do left. So we have done the basics Develop basic lines that applications using HTML sees as JavaScript again After assignment to we should be able to understand these things or be able to do them Testing we actually haven't covered much in practice. This might come in assignment three. Otherwise We won't do practical stuff on client side testing. Let's see. I Should be able to analyze source code for errors Then there is a whole lot of stuff that will get into in the later lectures and assignments Now then the final one since there's an evaluation you'll Even though we have covered quite some of them there There will be more things that you'll learn here in addition. So for example Propose improvements to web application source code. You should be able to do a bit But of course, we will add the server side aspects to that That's true for almost all of them the last one I want to discuss because it hasn't been very explicit maybe but we have discussed how web applications play a Societal role because they are accessible to everyone and they should be accessible to everyone and they become more and more important So there is some kind of responsibility of doing web development properly We will add another dimension to this when we get to security, of course now We are pretty much according to schedule. We had a bit of hiccup because I was sick But that's what the buffer lectures are for so we're still doing well We've covered the foundations, which was the introduction lecture where we just did history of the web and then the networking basics and HTTP We have discussed all the front-end topics So everything that runs on the client HTML for structure. She is as for styling JavaScript for behavior and now we'll go into The back end so everything that runs on the server And we'll have two lectures on something that is called the rest which is a specific style of structuring web applications and Then we do some server side JavaScript. So executing JavaScript on the server, which is slightly different Test the debugging we had one lecture for client side testing We will have two more and we get to server side testing. So you'll get some more practice in this And then finally We'll have two whole lectures on web security the projects the assignments they are Pretty much aligning with the different lectures. So the first two assignments They were in the front-end part, of course So they cover all of these topics. The third one will be in the back end So you have to write a server side application. I might add some client side testing to that I have not decided yet But we'll see and then the fourth assignment is most likely back-end testing So it's testing specifically for the server side with probably some additional security. We'll see about that Okay, so that's the plan now I'll run you through the different lectures that we have done and what we what are the key concepts that are important So in the networking lecture, we covered a bit of the internet how the internet works in terms of protocols and techniques So what are host names? What are IP addresses? We discussed that there is the TCP IP protocol stack Which is the the protocols that are used for directing packages, basically and A bit the layers of this protocol stack. All of this is not super important It's just to give you a bit of background there. Otherwise, you'll learn more of that in the networking course And then you should be familiar with the client server model that there is a client that sends a request And the server answers and there might be lots of intermediate servers in between But this is how we often look at it The important thing here is that the client is the one that requests something the server answers So the server typically does not send the request to the client Then we went into HTTP Briefly, so we discussed that there are HTTP requests and responses What is in them and what are for example typical headers that they have typical meta data Then we went through different methods like get, post, put and so on the different verbs And you will hear much more of that So far, we haven't done much and we have covered a bit of cookies So the way for a server to keep track of the client by storing data on the client again You will probably understand this a bit more when we get to security because then we will discuss it again The HTTP part is definitely the most important part for this course So that's also where for example the exam questions are located Then we covered a part of html Covered a lot of different tags so the different tags you can have in in html code Attributes of tags for example the ID class and ID So those are things we covered Generally how html is structured that you have the doc type the html tag the head and the body and so on And that generally tags can be nested We looked a bit what's in the header that you for example have the title you can have meta information and so on And then a lot of what I discussed went into semantics that that really The importance of html is not how things are formatted because you can change that The important thing is what the tags mean So they have a meaning and that's relevant Then I went into block and inline elements and I repeated that a lot in css as well So the difference between how elements are displayed That's very important to properly understand how how html Layouting works and to them change it successfully in css All right, so that's that's a very important thing We discussed the validator that you that is good to to have valid html code because it can Prevent errors later on in your css or javascript And then we went into the topic of accessibility that you have certain means to Enrich your html code so that automated tools can read it and understand it for example by using semantic tags or using Attributes that supply extra information like the alt attribute in an image The next block was on the css cascading stylesheet. So it was all about How do you specify css internally inline externally? We looked at it at the rule sets at the terminology of css like what is a rule set? What is a declaration? Um We looked at how are the how's the cascade determined? So if you have multiple properties multiple declarations that that are conflicting, which one is the important one Um, then we looked at how to select the element you want to select so the different ways of doing that And you can do that quite complicated by using Combulators or attribute selectors or even pseudo classes pseudo elements. So this can get quite detailed We we discussed a bit that the importance of relative and absolute length so that you have Different size measures and they have certain advantages or disadvantages Then as you see here in the picture, we discussed the box model so that Explains how content in html is rendered that you have the content you have a certain padding Within the element you have a border around the element and then you have margin, which is the space Around surrounding the element So again, this is an important concept That you need to understand in order to properly lay out things We then discussed how to do positioning at css a bit of flow the floats positioning But then also finally flexbox, which is a newer and much easier way in many ways And last but not least we went into responsive web design Using media queries to have kind of conditional css code that is only active in certain conditions now the Last part of this kind of foundations of web programming on the client side was javascript And we started off discussing what the difference is between executing javascript on the client or on the server We discussed the dom so that the document object model the tree of tags And the api that you have to modify it And then we went into how to actually write javascript So how to specify it that you have the script tags or you just link an external file the different methods of Accessing the dom like Identifying elements Adding new elements or so on Uh, we went into the event driven paradigms. So how to trigger events user events how to Use them for triggering javascript. So if I click on a button that a function gets executed and so on So this is one of the main important Ways to run javascript in the browser with the client Then we went a little bit into the Internals of javascript so that the different types that exist how they are converted to each other How that works and then the things that often cause confusion like the comparison that you have the two different Operators like the double equals and the triple equals for example the different scopes That for example the if you have a variable declaration within an if block It's not just valid within that if block but also outside, which is different Compared to many other programming languages And finally also very important hoisting So the fact that javascript takes variables and pulls them all the way up to the block Then we discussed four callbacks so the way of asynchronously executing javascript code Or rather reacting to the results of asynchronous execution It's a very important thing And then related to that the execution of javascript explaining why we have this asynchronous behavior Because you essentially have external web apis that are not in the single thread. So you have Behavior that might sound strange sometimes Finally within ajax asynchronous javascript and xml So a technique to run requests while the The script is already loaded Which is a very useful thing to to get new Information new data from the server without reloading the website is a very important technique Okay, so that was javascript and then the last part the last topic lecture we did just last week was on client-side testing and debugging There was a bit of theory So what are what different testing levels do we have what kind of testing can we do? What kind of processes do we have and so on very briefly? Then we went into debugging showing The rudimentary approach to just do console logs, but then showing the debugger as well And if I won't include it in the assignments that I still encourage you a lot to get going with that For example in assignment 2 it will save you massive amounts of times guaranteed A bit of unit testing with mocha and chai these were just example libraries But unit testing frameworks all look very similar. So there is no surprise there We looked a bit into that and then I did a demo of Selenium and SQLi so tools for system acceptance testing that are really on the UI level that Click on stuff and they don't Go too much into the internals of programming language. So that's what we did It's already quite a lot, but in terms of the exam the Well, the lectures are all relevant the things I have discussed In terms of literature so far the only source that is relevant to the exam is this one here That's the link on accessibility Which I believe was in the html lecture So that's the only one that is exam relevant. There will be some more things in back-end and security So I think there are two more sources that I want you to read for the exam But otherwise there won't be much literature that you have to read. So that's not too bad So what happens now We have uh, essentially three blocks left to do The first one is and that's the biggest one by far is back-end. So we go to the server side and do stuff there Uh also connected to that is the the remainder of testing and debugging which is all on the server side So we'll we'll go away from the client And then as a last part we'll do web security, which is a mix of everything Because security usually happens at all levels. You can do something wrong at the client You can do something wrong on the server. You can do something wrong in your network. So Security is everywhere. So that's what's coming Um In terms of our client server model and what we have done so far is basically always send a request to the server So for example, we have opened an html file and said, please display this The server has answered said here is your html file And I usually that html file contains other stuff like css and javascript So we're actually sending other requests to get those things as well Uh Then we have all those files on our client And what happens is then that we run them in the browser and the browser knows html So it can display it it understands css and it has a javascript engine to execute this So that's basically what has happened. Uh, and then of course if we use ajax We also can from within the javascript maybe send another request or another 10 That's what we have done so far What we'll do now is we'll forget about the client So there are requests coming and we send responses back on the server But we don't care anymore about the client. We do everything on the server And we don't care about html and css anymore Because this is in the background. So we don't need to display anything We only care about javascript. So we only do programming And this does not run in the browser anymore and it runs in node js, which is just A javascript runtime environment. So this is very similar to For example, what you have done in python programming You have python scripts and you execute them with Python in that case So in our case, we have javascript files and we execute them with node js But the way you program the way you run this is much closer to Uh, traditional programming Compared to uh, what we did so far So that will be much more familiar to many of you That being said the javascript files will look slightly different. So it might be confusing in the beginning But hopefully that changes quickly And the other thing that's very different to uh, doing python At least for most of you is that one of the main things we do on the server is we want to react to responses So we write to requests. So we write code that reacts Whenever NHDP request comes in. So that's one of the one of the main roles of what we do Of course in practice, it can be that the majority of the javascript here has Nothing to do with the actual request But you still have to have some code that is able to handle incoming requests and Sense the responses back. So that's an important thing Okay, so that's uh, what's the plan essentially And I'm looking forward to that part