 part of the JavaScript lecture where we discuss more on variables and types in JavaScript and earlier we said that JavaScript is untyped but as I already mentioned back then this is not quite true it's instead weakly typed it actually knows six different data types so you have the four primitive data types which are numbers strings boolean and the undefined type and then you have only two complex types one of which is function and the other one is object which includes all sorts of things also for example arrays and JavaScript has a function to check the type and that's the type of function so if we quickly look at that I again load my basic JavaScript example which has a lot of different things by now and I just write a script we're defined different variables so let's do a number one a floating point a string nothing else and finally we have boolean and if I simply log the types you can see that this works as I just explained let's print all types y z now we have f and finally we have d so let's open this function just to show you what I've done here so of course you don't see much but in the console you see the different types and if I open my vs code window next to it you'll see that x is five y is five dot five both of these are of type number so it doesn't matter whether it's a floating point or an integer number set is a string f I haven't given any value that means it's undefined and d is a boolean so those are the four primitive types and then if I would create an object let's say we change d to an object and we get a bit later to how that looks like but this is for example an object then the output would change to type of these object now I mentioned it already a little bit but functions are variables in JavaScript as well and you should know that from Python so you can define a function here fun a that does whatever you can call it with regular brackets also the way you are used to do that but then you can assign a function to another variable so here we assign function a to b and then we can call b the same way as we called fun a before and will actually implicitly call this function and this is a call by reference so b actually becomes a reference to function a again this is something I can demonstrate so let's write a simple function that logs something log string a world and I call the function like this and then I can also assign it to a variable and note that I don't have the brackets here just the name of the function and then I can call x in the same way so now our output should be hell world twice and you see that this is actually true here's the small two so it's being locked two times in a row so this works the same way and this is when we later get to the more advanced concept this is used quite heavily in callbacks that you actually provide pointers references to a function to another function so that's that function can call you back but more to that later now in JavaScript objects I've just made a small example already this would be an example of an object in JavaScript you basically define a variable with the keyword var again and then the special thing here are the curly braces so you have curly braces to to indicate that this is an object and then you add attributes simply by writing the attribute name and a value if you want to and comma separate so you can have many of those so essentially those are variables inside the object attributes and the access to that then works either by doing object dot name or with square brackets and the attribute name in parentheses in quotation marks so the first notation is pretty common in most programming languages also in python I believe and this is both read and write access so you can also put values in there there are in ES5 and lower in JavaScript there are no classes but there's a so-called prototype system in newer versions of JavaScript I think from ES6 they introduced classes which is essentially an abstraction on top of the prototype system but we won't cover this in this course this will be covered in the second web course where we go into more depth with JavaScript now as you see up here in the example object creation is really really simple I simply to yeah I simply write this and I have a new object and this is where the object the JavaScript object notation comes from or Jason which we'll cover on the next slides but I'll start by showing you an example here again I create an object I again call it x and curly braces as you see and now I can just add different variables in here I can say y is 5 v is something test is true so you see that here there's not the the var keyword but basically it's implicit because I create a new object here it creates automatically the variables within this object and now I can access these values by simply saying x dot and then one of the three for example test this should print out true and the same way I can change things so if I change the value to false you'll notice that the output will first be true then be false here you go another thing which I have not quite mentioned yet is that the type can change so even though here test is of type boolean I can simply assign for example a string to it and then the type changes automatically so if I instead of the value do type of x dot test you'll see that first the type of the variable is a boolean because true is the value and then changes to string so this is another thing another characteristic of this weekly type javascript that types are implicit I don't have to define them myself but they can also change throughout the lifetime so this was very quickly how to do objects now the json notation a javascript object notation is basically a very common data exchange format it's also very common nowadays for configuration files and so on to just list the configuration in json and basically it's the same as a javascript object so if the object is the first line here you remember I have object I have different attributes with values then the json is a string first of all so you have quotation mark the end beginning and end and then all the attribute names and all the values are also enclosed in quotation marks so this is a json string but you see that the difference is of course very large here it's basically the same format and this is exactly where the name comes from it's basically how javascript defines objects so this is very common and the great thing is that you don't really need to do this yourself but you basically have a lot of methods that do that so if you have an object you just call json.stringify you pass the object and you get back the json string and the other way around if you have a json string for example you have done an HTTP request and the answer is coming in json then you can just do json.parse put in the string and you get an object back and this is of course one of the reasons why json is so popular because it's incredibly easy to read and write json in javascript maybe more as a side note but json.stringify so converting an object to a json string removes functions let's demonstrate json quickly as well I have my object here and I can just print my object and I can also say json x is json.stringify x so I put in my object I get a json string back and let's see what happens well the first part you see that it tells me the browser tells me that this is an object the object has a variable y v and test with the different values in the second case it just shows me a string and this is exactly the json string so quoted attributes the whole thing is a single string and I don't get this hint from the browser that this is an object because it's not an object anymore so this is json we'll get across this later again when we talk about the back end because as I said it's extremely common to exchange data with json as the last thing in this small module here we do javascript arrays arrays are similar as in most languages using square brackets so this example here is simply again var it's a variable of type array that has three values three strings in this example and they can be accessed by the index again as in most other programming languages I said that this variable is of type array that's of course wrong as I mentioned before the type of an array is object so even though this is an array if I do type of cars it will tell me object one important thing is what does not exist in javascript is associative arrays so you cannot access elements in the array by by passing a string into the square brackets so many programming language support that I put a string in here to identify a certain element javascript does not so you have to use the index if you put an array into json it basically looks the same way you have variable name colon as with all other attributes and then you just have the square brackets so it's the same as if you would simply initialize it as a javascript variable and of course you can have objects in arrays using the curly braces you can have arrays in arrays and so on let's quickly test this five string true so you see I put different types in here also no problem and let's log one of them my array at position zero let's do a string coordination and just add another element for example the second one to show you that the two different types are not an issue and the other thing I wanted to demonstrate is that array is of type object so you see that I can have different types in my array I can access them using the index starting from zero and you see that arrays of type object the other thing that might be interesting is dynamically adding and removing elements which is quite complicated in some programming languages in java it's really straightforward so I can do my array dot push and simply add a new variable for example new string and then I can of course print out this using my array three so it's the fourth element which has index three and you'll see that the new string has been added similarly you can remove the last element from an array doing pop which simply removes the last element and returns it so in this case I'm adding the new string I'm printing it and then I'm removing it again so I'll get it in this return well as you see here one important thing is here I simply access the elements using the index that's a bit dangerous usually you should always do a check first so you should make sure that your array actually has the right size and you can do that using the my array dot length parameter so length gives you how many are there right now and this we can show here that our push and pull works so first it should give me three because there are three elements in here then I add a new one it should give me four I remove it again it should give me three so you see that this is happening here so you should always make sure that whatever you can access actually exists because of course I can do something like my array 10 but this element does not exist so I get undefined back okay so those are arrays and this concludes this small module on JavaScript and overall we have now learned in the first eight parts of this whole JavaScript module how to include JavaScript in HTML the different ways how to call and trigger JS code so using HTML events using the parsing of the HTML document so whenever the script becomes loaded by the browser our JavaScript is executed I have discussed how to access the DOM how to get elements for example a diff how to change elements remove them add new ones and then we went into the basics of JavaScript what what kind of variables exist what types exist functions objects arrays now recently and jason and in the next couple of parts we'll now dive into more the behavior of Java how it works of JavaScript what does not work as you would expect and so on