ing the variable to hold a reference to an object so just to kind of copy a quick example from a previous lesson let me comment all this out and paste in this so here we have our regular expression example where we're going to try and match a pattern XYZ and we're going to use the strings match method passing in the regular expression literal that we created in line 5 but this time there is no match there is no string XYZ in my value variable so what is result set to well let's see what we get in this case we get result is set to null well what is the type of results type of result this is going to require a little bit of explanation okay that's the quirk with null it will actually return object not the primitive type null and that's a known bug in javascript that will likely never be fixed because too much code on the internet depends on the fact that type of null equals object is you know it's basically baked in and grandfathered at this point but by all rights if javascript had been designed correctly from the start that would be null but hopefully you get the idea there alright but the interesting thing about getting a null result when we expected an object back is that we can do something like this and I'll just copy and paste this instead of typing it all in we can check result and say are you you know and we'll do the strict equality evaluation is result null and if it is then we can say well no match was found xyz was not found in our value alright and so this can be extremely helpful whenever we're building our applications alright so just to kind of recap null the primitive data type null is not zero it's not undefined it's not an empty string it simply means that you have a variable where an object reference was expected but it's not set to any object reference it's different than undefined right because undefined says I'm expecting to have a value but one was never set and it was expecting maybe a number string or Boolean no no no we're expecting an object reference but we don't have an object reference at this time set to our variable okay so hopefully that makes sense and let's continue on see there thanks it's been quite a few lessons now since we talked about the built in native functions that return that return objects we saw at that time that there was a date constructor function and that date constructor function will return an object that allows us to work with dates and so I just wanted to take a brief look at what it can do and how you can actually work with date type information using the date object so let's start off with a very simple case here I'm going to say hey let today equals new date and that will by default give us right now this date and time alright so what I can actually do is actually initialize that date object with a specific date using one of several different formats so I may want to like create a date that represents my birthday so I'm going to create a new date and I'm going to pass in and this is interesting right because if I look at IntelliSense it has an up and down arrow I can actually use the arrows on my keyboard and it will show me the various versions of constructors that are available with which to initialize the state object so we can start off with something really simple and just kind of a full day like December 7 1969 and we'll give it a time even at 7 0 1 3 just guessing at the actual minute and second of my birth I don't really know exactly I know it was early in the morning that's all so that's one way to initialize the date but there's a couple of other ways and let's just do like let bob equals new date and there's a file system date type that looks something like 1969 dash 12 for the month dash 0 7 and then t for time and then 0 7 because it's on a 24 hour schedule colon 0 1 colon 23 and that's roughly about the same these two will create the same basic time alright there's also we could just kind of simplify things a little bit here using a different format just just give it the year month base 0 and day I think base 0 as well though I haven't really I'm not really entirely sure about that and then Bob equals new date it's kind of the same thing 11 6 and then 7 1 7 comma 1 comma 23 so I think these are about the same I may be off by one I forget if it's 0 base or 1 base but you can look that up fairly easily I'm not going to use these but I just want to show you that they exist okay but we have here now today's date and my original date my birth date and so what we can do is something interesting like get the time that's elapsed between those two dates by just saying bar elapsed time equals n equals today minus Bob console.log elapsed time and what will get back to me is the number of milliseconds alright between those two between those two dates so this is the number of milliseconds and I can divide it out calculate the years, the months the days, the hours, minutes and seconds if I wanted to alright so that's one thing that I can do is determine the elapsed milliseconds between two dates you can also get parts of a given date so I can go console.log bob.getDate and it returns 7 what does that represent? that represents the day of the week so in this case Monday would equal 1 and Sunday would equal 7 which seems a little backwards to me but hey that's what you get when you create a language and you set an all equal object to another kind of quirks like that moving on console.log bob.getTime and this will be represented the time of day in our date object so that was the number of milliseconds and so that's a little bit less useful but you can do other things and let me just paste in a bunch of these all in one shot you can get the month, the day hours, minutes, seconds and milliseconds and then there are also some additional date functions for things like conversion to UTC or universal timecode and local dates and times so converting back and forth between UTC and local date time and that's pretty much what you can do with the date object and so let's continue on in the next video. Thanks previously when learning about built-in natives I explained how the string primitive is mapped to the string built-in native object and by boxing the string primitive into its equivalent string native object, built-in string native object JavaScript therefore will supply us with a rich set of functions. Now in this lesson I want to demonstrate just a handful of these very useful string methods that are supplied to us by the string built-in native object and explain why they're useful and I'm just going to pick the ones that I think are useful at least they've been useful to me in the past because there's a bunch more and I would just recommend that you use Bing or your favorite search engine to search for JavaScript methods of string and you might find the Mozilla developer site and it will give you a full listing of all the methods that you can get on that string object. Alright so first of all we're going to need a few strings to work with just for fun and so I'm going to create some different ones here to our quotes so the first quote is knowledge is power but enthusiasm pulls the switch and second is a famous quote from a good friend of ours do or do not there is no try and then finally a listing of random numbers that mean absolutely nothing and then you know one of the things that I didn't really mention at the time is that you realize that and I'll just put this here you can even call these these methods on string literals like for example console.log bob loves you dot isn't that crazy that you can just do dot on a string literal and call to uppercase you certainly can so let's see this message in all of its glory because I do in fact whoa let's call strings I do in fact love you alright let's move on alright so let's let's use a couple of interesting interesting methods of string so we're going to use the split method I'm just going to call setMySplit equal to the third this third one define on line three with those variable with those values those numbers that are separated by commas and the split method will allow you to say hey every time you see a comma split that up and take the element in between the commas and add that to an element of a new array and so let's go console.log MySplit and here we have an array with each value as a separate member of or separate element of that array pretty cool so you'll do this a lot whenever you're working with data and it comes to you in some sort of something like format you can split it out alright next up we can slice a string so let's go letMySlice equal first.slice and then we give it the starting index and the ending index just to kind of pull out one little piece of the string and put it into its own variable so then we can do a console.log MySlice so this first sentence we would count you know to the position 13 and then to position 18 and hopefully we'll grab out that word and we do we grab our power same basic idea with the next one which is substring it's just a tiny bit different so let MySubster equals first.substring and here we'll start with that same index but we'll say just instead of giving you the end position just go over five positions so this is the start and then this is the length that we want to pull from that from that first string and so then we'll console.log MySubster and we get the same value there okay similar ideas between slice and substring moving on we want to return true or false if our string ends with a given string to compare it with so MyEndsWith equals we'll use that second string that I created here try or do or do not there is no try and we'll say hey does that string ends with true or false the word try period and then we'll go console .log MyEndsWith true right and hey well then we can do sort of the same thing let my startsWith equals second .startsWith and so this is just a way for me to say hey is this the string I was expecting does it have the values in it that I want so I can say does it end with this does it begin with this true or false alright so that's true as well and then we can even say hey is you know some place in the string does it include the substring or the string there so is the word there used in that second string console.log my include whoops there is no there alright how about capital T in there that's true alright so it is case sensitive alright so let's come in all these out interesting now let's say let my repeat equals ha exclamation mark space .repeat and the number of times I want that repeated is three and then let's do a console.log my repeat and I get ha ha ha so the repeat method well repeat whatever the string is the number of times you tell it to and then we save that off to do its own variable and I think the last one we're going to look at is a way to kind of clean up a string so let my trim equals bunch of spaces here and then in between I'm going to say this is bloated right and I want to clean it up a little bit so I'm going to go console.log and the first time through I'm just going to say trim.length this will give me the total number of characters in that string but then the second time I'm going to do what's called chaining method chaining so my trim. I'm going to use the trim method that should clean off all the empty spaces at the very beginning and the very end of my string and then I'm going to grab the length property so you can see .trim .length I'm able to since trim will return a string then I can call the next method or property on the string because I'm working again with the string type so I'm chaining those calls together to get the result essentially the before and after so before I call trim we're looking at 16 total characters here but when I call the trim and I get the length there's only 7 characters that means the word bloated should only be 7 characters long it is alright so those are some helpful string methods on the built in native string function constructor function and we'll do the same thing for array in the next video we'll see there thanks since we gave strings methods the proper treatment I want to do the same for arrays so we'll do that here and let me create a couple of arrays here I've got an array called names and an array called others got an array called lost and an array called Fibonacci so the obvious difference is that here I'm working with strings here I'm working with numbers so we're looking at methods that can be applied to arrays so the first thing we can do is combine two arrays together so we can use the concat method so here I'm going to take the lost numbers and I'm going to concat them to the Fibonacci numbers giving me a combined set of array values node array-methods the name of the file I created and I get a long set, a complete set where you can kind of see the division between the two sets now they're all in one array okay seems like it might be helpful at some point otherwise we'd have to loop through and push or pop I mean push elements of one array into the other array that might be a little bit a little bit of a cumbersome process you can also do something interesting like console.log and we can take combined or the combine we don't need that we can use Fibonacci and what we'll do is call join and I can say hey join all the elements of the array together and separate them with this string so I'm just going to use like a tilde here for no other reason than the fact that we just haven't used a tilde yet and I think now we've used every character on the keyboard at least once alright so let's save that and then run it and you can see that I just merely printed out the Fibonacci numbers with a tilde join them together into a single string but they're separated by a tilde now okay so what we're going to do about or demonstrated push and pop I don't want to go back into those but there are essentially ways to add elements to the array or remove the last element from the array there's some other ways to do that too for example here we've got a console.log we'll take the loss numbers and we'll call the shift method and what the shift method will do is we take one item off the front side of the array and it'll return it back to us to print out but then if we go and look at the array we'll see that it actually removed it so it's essentially a pop but instead of working off the back end it works on the front end okay so let's see that in action and we get that exact behavior that I described we can do something called an unshift which is to add items to the front so it's essentially just like a push except we're going to add items to the front one or more items so here we go with the lost unshift and then we're going to say hey let's add we can add one we can add two we can add a bunch of items and so now when we console.log loss numbers oops we'll see whoops what did I messed up I call it list instead of lost there we go and so now I've added the values 1, 2, 3 and 4 as new elements of my array and then it continues on with 8, 15, 16, 23 and 42 okay let's come in all these out moving on let's let's find an element first of all here console.log let's take the names and reverse their order so first of all we'll start with the original order and then we'll tell it to reverse and we'll print that out so originally David, Eddie, Alex, Michael but then we get Michael, Alex, Eddie, David furthermore what we can do is go console.log names.sort names.sort names.sort it's a sort method I gotta use the methodification operator so now when I run it we get the alphabetical order Alex, David, Eddie, Michael alright next up let's let's see how you can identify where a given element is in an array by looking up its value using an index of method so here we're gonna go console.log and we'll go others.index of and I'm gonna look up the element name mark alright and so let's see where it's at it should be the third element of the array so I'm gonna go back up here to others 0, 1, 2, 3 it's at the third element so then I can go grab it um how about we look at and find the last index of and let's take those combined numbers remember those all those numbers we basically put them together let's go the last index of the value 1 so here first of all let's do this just so we can easily see what the current value of combined is and then we'll say hey we're gonna search for the last time the value 1 appears in my list which array the element is it at whoops what did I do this time I think it's just combined right still not right because I commented it out now let's try it there we go alright so you can see that our combined variable holds 4, 8, 15, 16, 20, 3, 4, 1, 1, 2, 3 so now I want to see what element is the last and it says it's at the seventh element so 0, 1, 2, 3, 4, 5, 6, 7, 0 based so the last index of 1 would be at 7 so it's useful if I'm looking through a large set of data and I want to find the last instance of a given value I can use last index of instead of index of which will give me the first index okay alright moving on previously we looked at the map function of an array I don't want to belabor that because we've already seen it but we can do other interesting things too like we can create a filtered list so using arrow functions so var filter equals and we'll go with combine dot filter and now I'm going to give it an arrow function so for every number I'll just say it's x I can give it any input parameter name so here's the body of my little arrow function if x is less than or equal to 15 then I want to return x alright and effectively what will happen is it'll return only those numbers that match this expression so that when I do console.log filtered I should only see numbers that are less than or equal to 15 and so I get a filtered version of that combine array pretty cool and a good example of why you'd want to use arrow functions similarly you can do something using a what's called an iterable it's a method called for each so this will go through each element of an array and inside of that I can then create an arrow function similar to things we've done in the past where I'm actually just going to for each element of the array go ahead and console.log this string and interpolate in the name that's passed in pretty cool and then we can also do some checks so for example I can say hey can you tell me if every one of the values inside of my array match a certain condition so here I would go console.log and I'm going to take that filtered list that I just created here so this should contain all of the values that are less than 15 from my combine and here I'm just going to say hey let's go filtered is every one of those values and here's where I'm going to create an arrow function so let's call this num are every one of those numbers less than 10 sure false false why is that well I happen to know that there's at least a 15 in there maybe if we increase the number to something like 16 are all the numbers less than 16 will they better be because they wouldn't match this criteria right true okay so that's the every method of an array similarly we can look at some so tell me if at least one element of the array matches a condition so here again console.log start with that just create an arrow function so whoops start off with use the Fibonacci numbers so some true or false well let's start off here with an arrow function number are all the nums greater than 50 true or false are they all greater than 100 or are there any of them there's at least one item greater than 100 that's what we're testing for here false there's no items in that Fibonacci sequence that we have here in our array that are greater than 100 alright so hopefully first of all you can see that there are some very useful helper methods on the array built in native secondly more examples of arrow functions that are used inside of some of these methods hopefully that's useful let's keep going see in the next video thanks you have to try really hard to force JavaScript compiler to throw an exception with the code that you write unless you simply just typed in the code incorrectly now I suppose some might consider the fact that JavaScript tries so hard to work with whatever crazy code you offer it as a positive thing but personally I wish that JavaScript compiler would throw errors more often I mean you should never be able to do something as absurd as what I'm about to do here when we paste in a little code I mean this makes absolutely no sense here we're going to attempt to multiply 7 times undefined divided by Panama okay what's the answer to that well it looks at it and says well you know I'm not really sure that that's going to come out to be a number so I'm just going to return not a number and we can check for that not a number and you know I guess we can account for that in our logic of our application but kind of wish it would just throw an exception but I guess that's not the way that JavaScript is made to work I suppose it tries to do whatever it can because it I guess figures that perhaps people come from many different programming backgrounds or that since it's a dynamic language maybe it should be able to accommodate any of these crazy situations but when JavaScript does encounter finally something that it cannot work with we call that an error we call that sometimes an exception an exceptional situation an exception something it just can't work with and the JavaScript runtime will simply quit at that point throw up its hands and say I can't do anything with this line of code and if I can't do anything with this line of code that means I can't do anything with any other lines of code I quit so it's when it does actually reach an exception it completely bails out on any additional code that you might have written alright so when this happens and you can identify where in code these issues are likely occur you can and should build some safeguards to ensure that they never happen again like in this case we might write several lines of code prior to attempting line number one we might do things like to ensure that if for example these values were contained in variables we might try to make sure the variable was not undefined we would try to make sure that the variable had a data type of number and not string or something else right so that we could do that calculation and expect a real number to be assigned to the variable a if we were working with objects we might want to make sure that the property actually existed on the object that was passed into our function and so we would look and say do you have a property with this name does it have a value okay we can work with that and so there are some safeguards that you can kind of build around your code to bolster it to make it to make it more resilient to the possibility that its inputs were bad and that it ultimately might throw or raise an exception so other times these things might be completely out of your control you still need to write your code in a defensive manner so for example you might want to request data maybe jason data from a web server that hosts a web api and depending on what you're requesting and depending on whether the web server is functioning correctly in that moment you may or may not receive the data that you're expecting so this might cause your code to throw an exception well here's another case where you should be able to kind of code defensively account for the possibility that an exception could occur because calling into another resource across the world is a highly risky proposition and it could result in an exception in an error I use those terms kind of interchangeably in my mind they're the same thing but whenever a problem arises an exception is raised by javascript in some way the information about that exception is boxed into one of these built in natives that we learned about several videos ago that were created in the exception capital E exception function and it will give you an opportunity to inspect that exception or that error object and look at for example the error message and be able to handle it gracefully and we'll talk about that in this lesson you can safeguard your code the code that you suspect or that you know would be prone to throwing exceptions and you can do that by wrapping it in a construct script called try catch so here let me comment this out and then I'm going to create some examples let's create one where I know I can create an exception so here I'm going to create a function called before try catch so here we're just going to create one and not attempt to catch any issues that might be that might be created now here I'm going to just say let this variable obj equal to undefined and I'm going to act like obj is an object so I'm going to just act like it should have a property on it so I'm going to do console.log obj.b all right and I know that this obj does not have a property b that should trigger an exception in JavaScript it's one of the few cases where we can actually force it to happen so if that happens correctly as I suppose then you should never be able to execute this line so if the previous line of code throws an exception you'll never see this all right and just want to point this out here I'm going to have to escape this in my literal string this single quote in the contraction you'll because JavaScript and in this case Visual Studio Code doesn't recognize it as an apostrophe it recognizes it as the closing single quote for my literal string so to escape that character and treat it like I need to treat it as an apostrophe I'll use a backslash right in front of it so now that little combination of characters will treat it as an escaped apostrophe instead of the closing single quote all right but anyway just an aside there line seven should never get executed because I am expecting line number six to essentially throw an exception so here's what we'll do we'll just call before try catch and we'll execute that and you can see that cannot read property B of undefined perfect all right now let's introduce a different function called after try catch to kind of show you how this works I'm going to comment out the call to before try catch here let's just grab all this and copy it all but I'm going to first of all create a try and I'm going to go ahead and just hit enter on my keyboard I'm going to use the arrow keys to like create a try catch statement all right see that and inside of the try I'm going to attempt to perform these three lines of code now I don't have high hopes for 17 ever ever running however I suspect that what I can do is do something like this if we were to reach an exception in line number 16 which we will so in this case what I can do is say I caught an exception that was thrown by the JavaScript compiler and I can even inspect that error object and I know that it has a message property so we'll do something like that but the key here is that this will not break my application my application can continue to execute so I can go console.log my application is still running so even if we encounter an exception like I suspect we will in line number 16 we can catch the exception handle it do something and then move on so let's start with this then we can move on see there's other things we can do here whoops what am I doing wrong here oh I need to actually now call my after try catch so now let's try to run it alright I caught an exception cannot be property be of undefined but my application is still running so it did not completely just shut down my application perfect now what I can do is actually add another statement called finally and this will run regardless of whether my try makes it successfully all the way through or whether the catch has been invoked so I can just do console.log this will happen no matter what alright and usually use a finally statement to clean up any resources that you no longer need I'm not sure how useful that is in JavaScript personally but you might find a use for it alright and so you can see that we have hit the catch but then it also executed the finally statement before continuing on with the remainder of the application so there's a pretty effective software development strategy of throwing custom exceptions from your functions with the intent that those exceptions are caught by the caller so it's a form of communication if it succeeds then it should succeed quietly but if it fails your function would then throw an exception that would be handled by the caller and it can decide what to do next so I'm going to comment everything we've done so far out and we're going to create one more example here so let's do that and I'll comment all this out too and let's go here so this time let's go function reform calculation and this calculation will take and look at an object that will pass in and we're going to say hey if that object obj. has own property b wait if it doesn't have its own property so I could do equals false like that or I can do a shorthand version of this by just using the exclamation mark right before the expression see that that exclamation mark it kind of makes it the negative so if has own property returns false then the entire expression will be true this is if it not has own property equal true essentially then what we can do is actually throw a new error so here we'll just describe or give it the message we want to tell what the problem is object missing property alright otherwise if that turns out to be a truth that the object does have its own property then we can continue with the calculation and I might just return the value 6 or something like that whatever the calculation using obj. property b so here we go now we're going to call into that function perform higher level function operation and here let's do let obj let that value equals 0 and then let's do a try around value equals perform calculation and I'm passing in an object that's undefined right because I didn't set it to anything in line 41 so I know it's going to throw an exception here I'm going to catch it I know it's going to come back to me as a boxed built in native error and print that out and what I can do then is kind of to show how this would work is if you know value is equal to 0 I know that the perform calculation didn't work so I can run my contingency perhaps I can do some retry logic you know whatever I need to do to make my application handle this exception gracefully and then continue with whatever logic makes sense after that so let's see if this works I think I got this right let's call perform higher level operation and I'm not sure what to expect to see here but I don't want to see any exceptions pop up other than the one that I'm printing out and throwing here so alright I think in this case I'm going to need to do this let's see if that works alright try that again alright that worked perfectly okay so in this case created an object passed it in doesn't have property B so we throw an error remember this is a strategy for us to do some checking and then look to make sure that if an exception happens we can handle it if not we grab the value back but if the value is zero then perhaps we need to we hit an exception maybe there's some other flag we can use to see whether we're getting the value we thought perhaps in the catch we can do some work maybe in the finally statement it makes more sense to put it there but at any rate we can gracefully recover from the exception being thrown because that's kind of just our strategy that hey this function does not have what it needs so you're calling into it but you didn't give us what we needed so you're going to have to write some logic to figure out what to do next alright that's all I'm trying to say there so this is a good start to help you understand that you do have options when you think about how to safeguard your application against potential exceptions that could occur and shut down your code completely ideally you could think of all the ways that your code could possibly fail and attempt to mitigate those potential issues up front but after you've done a reasonable amount of work to perform gated checks like I demonstrated here in line number 33 34 and 35 then you can ultimately wrap your code in a try catch statement try catch finally whatever works for you and furthermore you can throw customers from one function to another as a means of communicating failure and allowing the caller to implement some contingency like we looked at in line number 50 there maybe even some retry logic to ensure that ultimately the application is performing correctly and it can recover from any exceptional situations alright that's all we really wanted to say alright so we're doing great almost done we'll see in the next video thanks up to now I have avoided talking about JavaScript in the specific context of a web browser I actually re-recorded this entire course from scratch earlier this month because I started talking about JavaScript in a web browser from like the very first video and it became obvious as I that I spent so much time fiddling with the HTML explaining the DOM and ultimately I was struggling to get just to talk about JavaScript by itself and so that's why I took a different tact and re-recorded this so this time around as you know I started with pure un adulterated JavaScript and now here at the very end of this course I'm talking about JavaScript and how it's used in a web browser which there are some peculiarities that I wanted to talk about and I hope the approach makes sense I hope that this approach work for you and even if this isn't how you wanted to learn JavaScript I hope you can understand and see the rationale behind it alright enough of the pretense as we start dipping our toe into JavaScript in the web browser I want to talk about the amazing work of a web browser and how it will actually turn a request by just typing in an address into the point where we're actually viewing a page on screen I want to talk about how it begins to understand the HTML that it has downloaded as well as other files like CSS and JavaScript files and I want to talk about all the things that it has to consider before ultimately rendering a web page out to the end user to see it's really quite amazing so let's start at the very beginning I want to talk about all the process of requesting and resolving to an IP address and all that let's just speak in very broad terms there's a request made from the web browser to a server and ultimately an HTML file will be downloaded or I should say a collection of HTML is downloaded to the web browser and then there are references to other resources like CSS files and JavaScript files and things that begin to be downloaded as well kind of all this happens really at the same time along with everything else I'm going to talk about here and this isn't really intended to be deeply technical I'm really just going to paraphrase the general order of events because I'm not really privy to what goes on inside of a web browser I haven't really looked at the source code but any rate while it's downloading all the resources it has its HTML now it's grabbing its CSS now it's grabbing its JavaScript and it's working asynchronously in the meantime with what it does have in hand in memory as it's continuing to grab these resources down well while that's going on the browser is beginning to construct this object based representation of the HTML elements in the HTML page and it constructs them into a series of objects that are called nodes so it'll create a node for a given paragraph a node for the ID of that paragraph a node for the class attribute of that paragraph a node for the text that belongs to that paragraph you can see where I'm going with this everything gets its own little instance of an object and ultimately it's building this object graph that represents all of these these elements their attributes and their values the text values and so each element node could contain other element nodes as well so a paragraph could conceivably have some div tags or probably more likely vice-versa a div tag has a paragraph a div tag has a header has an unordered list which has list items and so on so there's just that nature of HTML and the the object model that's being constructed in memory has to consider all those kinds of relationships as well as the attributes and the text values of each of those attributes so at any rate the final result of all that work is this rich object model that represents the document that can also be accessed programmatically we'll talk about that in just a little bit but at some point the browser considers then all the styles that it has downloaded whether embedded in the HTML page itself or through one or more CSS files that have been downloaded as well and it also has to consider any of the default styles for elements so these are ones that are baked right into the web browser it starts to decide which styles will overwrite the other styles which values will overwrite the other values and so now it has to then start to apply those styles to the various nodes inside of this large object graph of node objects and once it's kind of settled on which styles to apply to each of the individual nodes it then has to calculate how much space each of those will take up on the web page so that it can essentially at some point visually render those on to the web page for the end user to view the next thing that it's going to do is it's going to start to parse through the JavaScript that it's been downloading from various files and it'll determine what needs to happen and when it needs to happen so some code can be executed immediately some code is attached to the various events of the various nodes in this object graph of nodes that represent the web document and we're going to see this in a little bit it'll impact how we write our code and where we write it in the HTML document so when we're talking about this collection of nodes from a programmatic standpoint as well as the entire API of the methods and properties that we can access programmatically to change things about the nodes that represent our document to modify them to add new nodes to remove nodes things of that nature as well as the web browser as a whole and all of the functionality that it provides to us like the ability to create things like the history the console window and any of the other debugging windows that might be available take all of that into consideration and that is at essence something called the document object model or the DOM and so we'll talk about the DOM in the remainder of this video in the next couple of videos but eventually after taking all those things into consideration then it finally will render the page visually to the end user but its work is not done at that point now it's listening for the user's interaction with the various nodes inside of the document and when the user interacts it might click or hover or mouse up mouse down it might use a keyboard you know the user can interact with the various elements on the page in various ways and if the software developer or the web developer has attached event handlers functions that should be called in response to those interactions those events then it will the web browser has to say oh yeah we have these two functions that we're going to call because the user clicked on this button go ahead and execute those those two functions now so when we create those associations HTML actually gives us a couple of ways to do those create those associations but we're going to look at some programmatic only ways to create those associations talk about that in the next video but at any rate as developers we can also interact with other APIs that are exposed to us for example most web browsers expose the console window so that we can write to that write little error messages out like we've been doing up to this point so we're primarily interested in the document object model as javascript developers again it contains an object graph that represents every element the attributes of those elements the text that might be associated with those elements and the relationship between two elements you know one might contain the other or they might be siblings and so on each of these objects are referred to as nodes as I said earlier and I just want to make the point really quick that when we're talking about nodes inside of the document object model that shouldn't be confused with node js the environment that we've been using up to this point to execute our this little javascript examples they're completely different they have no relationship to each other alright so at the highest level you have the document node and the document node will contain one or more element nodes and each of those could contain other element nodes but each element node will probably have some attribute nodes associated with it and maybe a text node associated with it okay so the DOM also includes a rich API so lots of functions that we can call in order to access the various nodes their attributes the text and so on alright so we can find a specific node or a collection of node that match our criteria and then once we have a programmatic handle to a given node or multiple nodes then the API also gives us some functions that we can use to modify the values of those nodes everything from changing the text of a node to changing the attributes of the node like changing the class that is associated with that given node we can remove nodes we can add nodes all that programatically the API also allows us as I mentioned a little bit ago to associate events that are raised by the web browser usually because the end user triggered the event with a mouse over a click whatever the case might be as developers we can associate our functions with those events and then finally the API provides some helper functions to perform various various things one that comes to mind is network operations like being able to call out to another web server to grab data or to grab some other code that can be executed but finally there are several ways that we're going to talk about in this video to basically write your JavaScript in a web page or associate your JavaScript with a web page and if you have professional aspirations then you should be aware that not all of these techniques are smiled upon in fact most of them are frowned upon there's one that's not so you might see some examples and here we'll just add this to our to our existing page here that I just created randomly in DOMintro.html and I'm going to create a button and in that button I'm going to say click me and then here I'm going to add an on click equal I believe we've done this already right but I'm just going to write some JavaScript right here now using this technique I'm able to pop up box an alert box in the browser to just kind of execute one little simple line of code so let me see how I'm going to do this let's right click on this and let's reveal it and explore and from here I can double click in it should open up my default web browser I click click me and I get a message box an alert that pops up with the little message the site says hi okay and I can also do something a little bit different this might be a little bit more akin to what we've been doing console.log and I could do hi in the console all right and let's just refresh that page so I'll hit refresh I'm going to hit F12 on the keyboard this will allow me to see the console tab and specifically I want to look at the logs when I click the click me button hi in the console okay so hopefully that all makes sense now using this technique you're only going to be able to write one line of code at a time maybe two you might have to write some you know but there's no doubt that just keep writing a bunch of statements here inside of this on click event right in line in the button is not a great idea so your other decision is or a choice is to actually add a script tag like so now for reasons that I'll explain a little later typically you don't see script tags added there you would probably want to put them at the bottom of the document and the reason is pretty simple that the that the web browser is going to look at the code line by line and if it encounters a script tag up here and we reference elements in the body those elements may not have been loaded yet into the document object model if we put the script at the very end we can ensure that everything above this has been loaded already so we can reference the various elements in our html the various nodes in our document object model to save in a more programmer friendly way ok so here's what we can do instead I can actually create a function let's call this just a click handler and you know I could even just add a message and here I can just do something like console.log hi and then maybe dot dot dot and then maybe message like that so now in the on click I can kind of wire this up and say hey call click handler and I'll just say from the button click event alright so we'll save all that and with any luck you can see where we make the call to the function we've created and then passing in a message which we'll should display in the console log let's open up our web browser again let's refresh this page f5 click the click me button and we get hide dot dot dot from the button click event alright so you might be wondering well wait a second you are calling a function before it is defined in your javascript isn't that a problem no and this is something I wanted to talk about before in the supplies whenever we are executing all of our examples in node function declarations are hoisted to the very kind of top of the execution environment so the javascript compiler will go through and look for all the function declarations it will put them at the top it knows where they're at now and then it will continue to execute any additional code so this is in essence added then to the top of the execution chain so by the time we get to the click event handler for this button javascript is already very aware that this function exists alright so small point there but these techniques of using this on click equal and the script tag in this manner these are generally frowned upon professionally you probably want to do what's called separate your concerns so your javascript may be more appropriate to keep it in its own file and to kind of remove all of these references like this that we have there so I'm going to say don't write javascript in your html page alright and some people might argue with and say it's perfectly fine and you know it just depends on how much javascript there is and what your professional aspirations are and the other programmers and what they're doing in your group but generally speaking what you want to do is kind of just add your code to another file in this case I'm going to create another file I'm going to call this domintro.js and then what we're going to do is actually wire up the event handler to to the button click event but we're going to wire it up in our code so what we're going to do to start off with is to create an iffy so remember how we to do that we're going to create function we're going to wrap it in a parenthesis and then we're going to say execute immediately alright and then here what we'll do is we'll define our function of the click handler and then I'm also going to let's go here to our domintro.html I'm going to give this guy an id and I'm going to say your id is my button alright in fact I hope you don't mind that I'm going to delete all of this out of here alright I'm going to delete all of this out of here it's gone now and I'm going to go into the domintro.js and the first thing I need to do is get a reference to my button alright or my button so what we'll do is let my button equal document dot get element by id and then give it the id I want my button button alright next thing I want to do is go my button add event listener I'm going to say which event I want to listen to in this case I want to listen to the click event and when that happens I want to call click handler and I guess I could pass in a message if I wanted to at this point so hi from my iffy right now I need to go back to the domintro.html here I'm going to add a script tag like so script type equals text forward slash javascript source equals and then we'll give it the name domintro.js and so say that and now hopefully load this guy up refresh and you can see I did something incorrect let's go back here let's get rid of all of this business right there alright now we don't want to call that method just yet we just want to wire it up to the button and say whenever the click we want to listen for the click event when that happens then we want you to execute click handler alright now that we have that in place let's go ahead and refresh click me and there we go now we get pointer event not exactly what I was looking for if it's really important to us to pass in the message which I actually forgot about sorry what I'll do is just kind of wrap this call inside of a function expression so go function like so and inside there we'll make the call like that and then hi from iffy alright that should work hopefully so let's save it let's try that again there we go that's the that is what I wanted to happen okay so had a lot to say in this video about the DOM and about how to attach your JavaScript into a web page and still access the various elements of the document object model or this document object by using helper methods like get element by ID passing in the ID and now getting a programmatic reference which we can then use to add or even remove event handlers to in this case I'm just adding a function expression to make a call into another function that I created earlier alright hopefully all that makes sense and we can continue on in the next lesson and kind of expand on this alright we'll see in there thanks in this video we're going to talk about working with the DOM specifically how to access DOM nodes how to change attributes of those nodes how to add nodes dynamically and more so in the past I've created like three or four lines of code and then we would look at look at what those lines did and I wanted to change my tactic for this particular example to show you something a little bit more interesting a little more compelling so I've already created a DOM nodes HTML DOM nodes and DOM nodes JS and you can see here that I basically created just a little playground it does nothing of practical value it's completely contrived but it will show you how we can manipulate various DOM nodes and their attributes and you might find some of the the practical side of this how did I accomplish that useful as you pick apart this program and we'll walk through here in just a moment but again this does nothing useful it has a click me button a series of div tags each with a color and the name of the color itself and then a number beneath that and I'm just going to click the click me two or three times alright you can see that several things are happening all at once first of all we are changing every time the click me button is clicked we are changing the selected color div you can see the selections change because there is this thick bottom border applied to that particular div furthermore that color is applied to this number and that number seems to be growing each time we click the click me button so here we are going to click it we go to pumpkin what happens when we get to the end of our list of colors and I click the click me button one more time we start back over at the beginning of the list and so I can just continue to click this the number is growing I'm using relative m's, rems in CSS using it the number of times I've clicked it that's the number of rems that I'm applying to this font and so you can see that things are changing they are very dynamic and I just wanted to kind of it's a large enough application to be interesting small enough that I think you can pick it apart and kind of understand what's going on and that's really the intent here so let's take a look at the source code itself and we'll start with the HTML there's really not much interesting here I'm pulling a font from the Google fonts and then I'm also applying a style sheet the style sheet itself not a lot interesting in it and I don't want to take too much time it's just making everything look a little bit nicer than our previous examples here we're looking at the result container and that seems to be where we have the basically the white area with everything else inside of it this button this row of divs and the number and so you can see that each of these have IDs applied to them the click me is my button the color did will contain a series of child divs and I'll talk about more about that more just a moment and then the result is where we add the current number of clicks that continues to grow and grow here we have our script reference to domnodes.js that's where all the magic happens first of all you can see that I've created an iffy here and I can roll it up using the little plus and minus right next to that line of code in line one you can see that I've created a couple of functions one called increment counter one called update UI and then one called handle click you can see that I've initialized a variable called counter to the value of zero here I'm getting a reference in line 74 to the button and then I'm wiring it up like we learned about in the previous video to every time that the click event is raised for my button I want to add an event listener here we have a function expression that will execute both the increment counter the method that we looked at at the very top and then the update UI method that we looked at it was right below it this is where a lot of the magic happens so we'll look at that in more detail in just a moment then here you can see in line number 80 I execute update UI in order as the page loads because again as a immediately invoked function expression I want this to happen as soon as this file is loaded into our HTML by the web browser so let's go here to the top and we can see increment counter is very simple it just takes whatever the current value counter is and increments it by one now update UI is where a lot of the magic happens first of all we start off with an array of color objects each color object has a name this is the name that you saw printed kind of in the top middle part of each of the div tags as well as the color value itself and I just grab these from a website that has colors I think you see the colors I'll give you the site in domnodes.css alright the first thing we want to do is grab the result this is where we're going a reference to that element and we use the ID resultive to get an access to it so that we can programmatically work with it this is the div that will contain the current number of clicks not only will we increment the display the incremented click number but then we will also change its size and its color attributes as well next up what we want to do is then set the intertext attribute or property of the result object so this resultive we're going to set a property called intertext that's how we're able to put one two three four inside of that tag here at the very bottom of our white section of our web page and then so you can see this is one way that we are getting a reference to a dom node or a dom element and then changing the attribute we're changing the text whatever it was we're overriding it with the current value of counter then what we do is additionally access the style of that div so here we're going to the style object of the result element and then the style object has a series and I can hit the period of the keyboard to look at the intelligence all of these are attributes or properties of the style object for our div tag we can change all of these attributes if we want most of them are visual in nature and here I just want to change the size of the font taking the current value of the counter and appending em to make it larger each time that em being a unit of measure in CSS all right so that's how we're making the changing the number of times that the button has been clicked in that div tag and then also changing its size every time we click it okay so next up what we want to do is determine what the current color is in our array of colors so here's what we do we take the current value of counter and we use the modulo or modulus operator which will give us the remainder so if this has been clicked six times and there are six elements inside of our of our um array of colors that we define as a const here at the top then the modulo would be zero there would be zero remainder so we would access the first element of that array and that would be this alizarin it's that coral color alright and so we would use that so that's how I'm using and being able to kind of select each of the items I take the current counter so if it was two and there were six then that would give me a remainder of what a four so it would be the um we grab the fourth element from uh our colors array and grab the value property the value property of that particular object and set that as the result style objects color attribute alright moving on now what we want to do is clear out all the existing uh child color div so I basically tear down and recreate this list of colors by basically removing everything first of all from the previous uh call to update UI and then I begin to re implement it if the as I'm looping through each of the color objects to create a new div if it's the currently selected one then I want to apply not only uh the bottom border but then also use that color uh here I guess I already did that part but anyway um this is why I'm setting the inner HTML to an empty string of the color diff because I'm emptying out everything inside of the current div but now I'm going to loop through each of the colors and here I'm basically dynamically creating new div tags uh so I create a new div tag and then I create a text node with the name of the color for you know whether it's the first object the second object the third object I'm grabbing that name and creating a text node I append that text node as a child to the div tag that I just created I style it up and then at the very bottom here you're going to see I actually append that child uh append that node that I've been styling up to the larger outermost color div so I do that six times uh and if it is the currently selected item then I'm going to change the styling of that particular node by adding a class the selected class and that's what's going to add that bottom border in fact here if I wonder if I can just go to here and find selected so there we go it is uh just adding a bottom border of five pixels with no padding alright and so um that's pretty much it now you'll see that throughout I'm accessing the style object or attribute of the given div tag setting its width its height and other properties like float padding left padding top and I could have just created a CSS style and then added it using the same technique that I've used here but I chose just to demonstrate that we can get at all those those style attributes in addition to the style object there are other things that we're able to do to it like append a child to it so we want to we have a div tag and we want to append something to it we have a div tag and we want to append it as a child to that div tag which is already a child to a div tag child to the body right so hopefully this will help you to see how this whole process works and then we can basically get at any DOM node we can modify it we can add new child nodes to it um creating them essentially out of thin air and we can even do more like move nodes around if we really wanted to and so on obviously this example didn't call for that but essentially once we get a handle to an element then we can do anything we want with it um that we can conceive of so there are so many options that it didn't really make sense to kind of go through them in a laundry list basically this is a matter of imagining what it is you want to accomplish getting a reference to the element that you need to start with determining do I need to create a new element and append it on or do I need to remove elements that are currently child of the existing node um which attributes of that no do I want to change and so on until you kind of construct I mean it took me several minutes to build this example and it started really simply it started by can I just increment uh the current number of clicks alright I got that working now let's move on to the next thing can I create a bunch of colors and have them applied to the number can I create a bunch of dibs and apply those colors to the div and so you just keep working at it little by little until you've you know tackled essentially the whole application and that's how I built this alright so hopefully that was helpful as kind of a larger example that we're able to to dissect and understand better how to accomplish something that that we conceive of by working with nodes inside of the DOM alright so let's continue on I guess we're pretty much done so let's wrap it up in the next video see there thanks I just wanted to briefly congratulate you on finishing this course that's quite an accomplishment and that's awesome and I have to say that I definitely respect anybody who puts the time in to learn a new technology or new skills so you're awesome I congratulate you and I wish you the absolute best I sincerely hope that this course was helpful to you in some way and that you came away with some confidence in JavaScript and that you have a solid foundation now to build on and I'd strongly encourage you to keep pushing forward in fact modern development with JavaScript will require that you learn some of the most popular tools and libraries that are currently in vogue by the JavaScript software development community as well as the build and deployment process for JavaScript applications so I hesitate to recommend specific libraries and frameworks for you to look at because especially on the client because things are changing so rapidly in that space but I think you'd be safe at least if you're watching this within a couple of years after I've recorded to get started with something like view.js vue.js or react.js by Facebook if you're going into a corporate software development environment like at a big company then you may want to look at angular or angular I think the current version as I record this is version five I'm sure they're going to every six months they're trying to release a new version of that you're probably going to need to learn a little bit about packages in JavaScript and using npm or yarn another tool by Facebook you probably want to learn a little bit about webpack and parcel but again honestly I kind of feel silly recommending anything because a couple years from now it's likely that the JavaScript development community will have moved on past some of these sorts of things so you know at least enough now where you can follow along in those kinds of discussions and begin to stay abreast of JavaScript's frequent and fickle library preferences de jour now on the server side I highly recommend that you learn more about Node.js and if you want to use Node to create websites and web APIs then you may want to learn another framework called Express.js which sits on top of Node makes it easy for you to build entire websites just on the server side okay so quickly just want to give another plug to my own website here let me type it in for you developer university at devu.com devu.com I'm learning new things every day and when I do learn them I try to share them on my website so definitely want to come and check it out check it out every so often finally a quick thanks to Microsoft Virtual Academy you guys are awesome quick thanks to you the viewer for watching this and staying with it through the entire course and I as we close here just want to say that I sincerely and truly wish you the best hope you can leverage this course and do something really awesome and if you do let me know about it so good luck


Welcome back to Sportacus, Eddix. G and Jaco, it's about the tenth time we've done this, but we're trying to be cool. Georgie's got a Google and we're doing, doing cool squats. What's your favorite cool squat, Georgie? What's your favorite, what's your favorite cool squat? What's your favorite, yeah, dragon. Dragon? Why, why do you think the dragon's so cool? Anyway, what we're going to do is we're going to calm ourselves down and then we're going to show you some cool little moves and simple little tools you can use to have a little bit, you can see how fun it is, how much fun we're having with the training, so fun we can't even talk and that's what we're going to cover in this YouTube video. When you've been working on your hips and your ankle mobility, you're then able to start to do some pretty cool single leg squat variations. Things like dragon pistols, pistol squats, sissy squats, shrimp squats, if I missed anything. Cossacks. Cossack squats. So she showed us, so pistols, we're talking about pistols and we're talking about cossacks. We're looking at something like this and then a cossack when your hips are nice and open you ever sit down things like this. And we've got dragon pistols, that one. Coming into here and back up, totally felt impossible when I first ever tried to do that. Sissies or shrimps? Balance comes an issue in these, coming down, keeping the hips on there. And back up and shrimps. A bit of bounce around. Something like these. You do a double-handed one normally. Oh, right. Two hands. This is hard. Making me do these without warming up. Yes, there we go. So whether you're doing any of those, we've got a number of different tools that you can use and they apply to each and every one of them. So we can do things like partial reps, we can do things like raising the heel, we can do things like e-centrics, we can use counterbalance weights. We're going to show you some examples and some options that you can use for each of these and one of the probably the jobs is going to be best to you is like which tool is most efficient for the thing that you're working on. These just allow them to be more accessible depending on where your flexibility, where the strength and mobility is at. And the tools we're going to show you are some of the best ones we find for each of those different movements. So first up we've got a pistol squat. So George is just using a little bit of a heel raise. One of the big things with a pistol squat is we have so much weight out in front of us with this straight leg that we tend to end up toppling backwards. Having that heel raised up ever so slightly just helps us distribute our weight a little bit more evenly, gives you a little bit more feeling of having that ankle dorsiflexion but makes that counterbalance aspect of having the leg out in front a little bit easier to cope with. So having a heel raise for the pistol squat is a great option. Next up dragons where we can go through raising yourselves up. So whether you think of this I wouldn't necessarily think of this as like a partial range but it sort of almost is in a way because one of the biggest challenges on a dragon squat or dragon pistol is being able to have this leg up off the floor. So by raising you up you're able to go through the full motion but it's not the same type of full range that you're going to need compared to when you're on the floor and all you do is gradually work the plates down just like with the heel raise you gradually reduce that heel raise. Jack is going to show us a sissy squat and we're going to use the negative phase to build strength through the range so he's going to start standing tall, have his arms out in front and squeezes glutes. Hips need to be an extension throughout the movement so we're trying not to let that happen and instead squeezing the bone keeping hips open. So on his toes he's now going to let the knees come down towards the floor he's going to fight that tension as much as possible maybe even add bits where he pauses hold it for even longer even came up a little bit tiny bit more why he's holding that evil lady once he gets the floor he's not going to drop he's going to go so softly onto the ground so he's building strength all the way into that base position fighting as long as he can soft touchdown to come out he can sit back and take himself into a low squat and stand back up obviously use your hands if you need to that's a great way to just build that strength through the range for your sissy squat so the other one that we're going to go through is our shrimp and for the shrimp we're going to use a target base so having an elevated platform means it's just going to go through the partial range holding that foot sending the knee to the target behind squeezing the glutes and standing up to the top so hips are an extension at the top obviously having this arm out in front is going to help distribute his weight into the right position that makes him feel easier to move and over time what he's going to do is lower the plates down until he can perform this movement on the floor and we've got one more which is our cossack so for the cossack squat we can use a external load and you can use this as a bit of a weight by a sight in front we can also add the heel raise which is going to help with the range of motion and door deflection at the ankle holding the weight out in front is going to stop jacko from falling backwards i'm like chasing him around now so from there arms are straight and that's something to notice otherwise it becomes a weighted cossack whereas um if the arms are in front it's more of a weight bias it's helping to pull him out in front yeah that's four kilo so it's not you'd be surprised you think all weighted this is actually making it way easier yeah because it's just a little bit of weight it's providing me with a little bit of counterbalance you know equally over time we can start to get rid of that um heel raise and feel like okay starting to get comfortable in here then actually maybe we can get rid of the counterbalance weight all together the idea being you can use a combination of some of these tools don't try and use them all at once try to use the thing that's most applicable for you and then gradually we're trying to wean our way off the need to use that tool as you're building up particularly the um ability around our ankles and around our hips to allow us to do these cool movements we find them fun and it's just a different way to challenge the lower body keep training still interesting for the lower body and have a little bit of fun so a few different tools you can use to do some what georgey says is cool squats um and if you're interested in improving your mobility a little bit more so you can start to have fun with your training the more range you've got the better your body feels but equally you're able to do have some more fun and do some more cool things with your body then check out the new mobility program we've we've got a whole series of workouts and exercises and a progressive way for you over a series of weeks to build up your movement your mobility and your strength so you can start to have more fun with your training the details are in the description below georgey use one of those accents you've got for the class dismissed


Hello everyone welcome back to JSA TV and JSA podcast where we're covering the latest stories trends and innovations With leaders and global connectivity real estate and the networks within I'm here with one of those leaders I'm here with Don Turpstra a principal consultant with Flexidao. Welcome Don. Thank you. Thanks for having me Yeah, we're very excited to chat with you I think this is your first time on JSA TV So if you could just start off by telling us a little bit about the company and what you all do Yeah, absolutely. So I work at Flexidao. We're a software startup based out of Barcelona and Amsterdam So European based startup and what we do is we develop a software that helps companies track Where and how their electricity comes from and how it's produced on an hour-by-hour basis in order to accurately and more Easily report how their emissions occur based on their electricity consumption Excellent. Yeah. Well, that is definitely a topic that we've been talking about a lot this week at the ESG summit the importance of You know traceability is sustained is sustainability reporting Knowing where all of that electricity is is coming from going to and all of the the standards there So how can companies with that, you know your expertise in this area? How can they improve their sustainability reporting? Well, I think that that's a really good question because Companies have made a lot of progress over the last years and the amount of detail in for instance ESG reporting is getting better and better and better But I think one of the major next steps that companies can make is to report on a more granular basis a lot of companies Report now on an annual basis saying let's say for instance on an annual basis I'm using X amount of electricity and I'm using buying certificates to offset the emissions associated with that electricity But if the wind doesn't blow and the Sun doesn't shine How do you still consume green electricity? And that's where flex it out solution comes in to look at a much more Let's say granular way at the at the figures rather than an annual basis on an hour by hour basis to see where the Electricity really comes from yeah, and how you can negate how you can offset the emissions associated with that Yeah, excellent. Awesome. Well, that's a great practical insight for our audience So thank you for that and you're actually in a panel here at noon. You're a very busy guy at this conference today So could you give us a little bit of insight into what you'll be talking about there? How I believe you'll be getting into how flexi-dial is helping a hyperscalers Decrease the industry's carbon impact. Yeah at noon I have the I have the pleasure to be in a panel along with very borealis data center out of Iceland's eco data centers out of Sweden and Google and together we're discussing how the collaboration between hyperscalers such as Google between collocation data centers and Flexi-dial solution can help the whole value chain to decarbonize by giving transparency on data by having uniform measuring standard and reporting standards to give kind of the true insight in How companies are progressing on their journey to become more and more sustainable? Excellent. Well, definitely check it out if you're here on site at the ESG summit. That's at noon Here today right across the the hallway from us as we sit here All right. Well, perfect. It was great chatting with you Don and thank you for joining us on JSA TV Thank you for having me absolutely our pleasure and to all of our viewers back home Thank you for joining us on JSA TV. Happy networking