Today I will talk about JavaScript, the programming language that powers the web and I will do an example where it's like YouTube and we're going to have some thumbnails and we're going to click and as soon as we click the video that's playing will change to the one we clicked and I'm going to leverage jsfatal.net this environment here and if you haven't used it you can click run in the top left top right sorry top left and then in the bottom right you will see the result the code for HTML is in HTML panel and then for CSS and then for JavaScript and there's some status if you don't like the current layout click to change it I also have custom status to disable HTML tag auto closing and auto closing on brackets those are disabled for me okay so in a previous session I did HTML which is more about the structure of a document and then we did CSS which is making a 3D and now we're going to do JavaScript so JavaScript was created so that we can manipulate the document that is we can remove things can add things we can change the style and everything in real time as you're interacting with the browser and that gave way for all the apps you know today especially social media like Facebook Instagram TikTok and so on and all that interactivity many you can click things and something happens it basically it it makes you believe you're using an application in the desktop you know back in the days we would use more of desktop applications that were built on the desktop like Windows or Mac and now pretty much a lot of things are done using the browser so that's why all this stuff came along so it's trying to trying to mimic all the desktop app behavior so I'll start off with a video tag here and I'll give it a source and I'll close the video and the source I'm gonna give you give me one moment here I took it from github I just did a search for videos and this is on get from github let me see I'll paste in a zoom chat if you want to use that video so add that to the source now it's gonna appear like this it's kind of weird so want to add controls attribute and it's just too big so you want to add maybe a width let's try 200 maybe a little bigger about 400 make 300 how about that because we we got limited space here so anyway we got a video you can play nice now let me teach you how you can change this video to another one using javascript so javascript the point is we manipulate the document so what controls this video if it's playing one video and then it plays another video but that's the attribute src the source if I change this to something else let me take another video here so I copied another one and I pasted it here and I click run it changes to another video I pasted the zoom chat by the way the second link okay that's nice but I did it manually right how can I manipulate this using javascript so that's the point so that we can start doing okay I'm going to have some thumbnails in the bottom here I'm going to click them and in the click event I want something to happen that something's changing the source okay so if I click this this is another video now I'm going to revert back to the other so in javascript you always start off you want to okay you know like css where we would specify a selector saying hey I want all the elements that that are for example all the div elements to have the following styles we add all the following elements that have the class abc to have the following styles it's kind of the same thing in javascript you have to tell what do you want to manipulate right what do you want to target on the page the document is so many elements what do you want to change or what do you want to add but first we need to know what the element to operate on so in javascript you usually interface via the document object like this if you go to the javascript panel just type document this is what's called an object so an object is like in the real world it has attributes it has behavior like a car can drive but a car has the attribute of having some color right for the paint has some make ear and so on there's like kind of the similar in programming languages but suffice it to say the document object here you can ask if ask it for something and that's something okay I want to get an element by something for example get an element by its id attribute or get some elements by the class name or get an element by its name attribute or by the name of the element so on so today I'm just going to teach you by id to start off so if you take the video element here okay we want to manipulate the video so that I want to change the source here okay so I'm going to add an id attribute to this video to uniquely identify it let's call it the video dash player and then in the javascript tab here you're going to do dot so when you have objects in javascript you can think of the dot as something that is written on the right belongs to something on the left in this case is something that will belong to document in that case it's a what we call a function which is a set of instructions so if you type get element by id like this make sure every character is in the correct case I put get word in lowercase followed by e uppercase element followed by by with the b uppercase followed by i with the i uppercase it's important that the case matters okay and this naming convention is called camo case where the first letter of the first word is lowercase and all the subsequent words are added with just the first letter being capitalized it's just a naming convention that the javascript programming language community uses you're going to see that a lot so be careful when you're doing programming javascript or any other programming language you want to be careful and read every character to make sure there's no typo because one single type like I forget the e here and everything is going to break so make sure to read every character if you're having trouble you don't know what's going on start from the beginning read every character anyway this is what's called a function so behind the scene is going to do some stuff and is going to get you the element by id but when we have functions in javascript every time you want to execute the instructions you must add the parentheses here this means okay for the function get element by id that belongs to the document object I want to execute meaning there's some set of instructions that were written whoever wrote this function it's somewhere in the browser uh source code so when I call it those instructions will be executed and these structures are go through the document and I want to find the element whose id is what I give you now what we give the function is what we call an argument so here we have to say okay what what what's the id now the id is going to be a video dash player but I cannot just say video dash player here like this because it's going to think it's something else in the programming language as later on you're going to learn so I must add either single or double quotes surrounding video dash player so this means this is uh what we call a string it's a sequence of characters and if you want to literally mean v and i and d and e and o and so on you have to have the quotes notice how the word document get element by id don't have quotes that's because they have a special meaning they're not literally showing that word document they're not literally showing get element by id so that's why here we need the quotes because we literally mean this sequence of characters in any case when we execute this it's going to find this element and give to us think of it like a hook you know it's going to try to grab the element and you have a hook that's attached to it and you can do whatever or you can also consider it what we call a reference it's a reference to the video element and since you have the video element now you can actually manipulate it that is you can change the attributes you can change its content if there is tax content like paragraphs and so on in this case i'm interested in changing the source attribute and that's actually pretty easy to do all i have to do is say dot src remember the thing on the right usually belongs to the thing on the left you can think of it that way when we do this dot thing so the src attribute of whatever is on the left hand side whatever's on the left hand side you can think of it as one thing you know when i say document dot get element by id that returns a function returns something to you gives you back something you can think of it as one single thing here imagine there's like video element here okay imagine this thing was copied here visually visualize it like that anyway so if i do it just like this i can access actually the value that i typed for this source here but i don't want to access it i actually want to change it or attribute a new value so to do that we use the equal sign and then on the right hand side it's going to be the new value for this new value i'll simply copy the second video that i posted to the zoom chat that's for the calculator dot mp4 so i'll put it here but be careful we have to add what quote surrounding it because it's a string i keep repeating the same word so you can get it this is called a string sequence of characters because we want to literally say every single character here just put it there literally every single character doesn't mean anything else special in the language of javascript okay so as soon as click run here you see that the player changed to the new video i don't know if you notice it let me remove it and click run you see this is the video of golden gate bridge in san francisco and then i paste something in the javascript and i click run immediately changed to a new video here so what's going on is the browser will process the html document and it will show the video of golden gate bridge and then immediately after it will run the code of instructions from the javascript section here starting from the top all the way to the bottom now you don't see it because very fast but it's actually there's the golden gate bridge video and then immediately after the source attribute is changed to the calculator dot mp4 which is the visual studio code video i think yeah in the browser okay so that's what's happening here now you're going to see a lot of people will add space before and after the equal sign and that's optional but that's what we usually do because i think we think it looks nicer for the eye for us humans to see okay so you're going to see that a lot and as i said before you can use either single or double quote it doesn't matter in this context that's totally fine same outcome do do whatever you please i usually just do single quotes because it's easier just i don't have to press shift key every time i press the quote key in the keyboard okay uh how is everybody doing so far is it too much too fast let me know if you have any trouble okay you'll get stuck all right so thank you let's keep going here so i i taught you how you can change the attributes uh you could also change the style for example i didn't style anything here maybe i could go in css and do some style changes maybe i for some reason i want to add to the video player some border of five pixel solid red how about that let's see what happens so i got the red border right and that's css um i can also do this with javascript uh let me show you how let me remove the css here so in javascript here we first have to get the element we want to manipulate in this case is document or get an element by d video player that's one way of getting it now there's different ways right but that's the easiest way right now so we can do the same thing document hey document please dot get element by its id get element by d okay what's the id provide me the argument within the the parentheses okay it's a string and the id is video dash player now we got the element this returns something gives me back the reference to the video element so that i can manipulate it now i'm going to manipulate what uh the style so i can say dot style okay and then to the style there's many css properties so i can say dot background color now you notice here i don't put dash color actually i want to do border right sorry about that let's do border and then i want to reassign it so equal sign and the new value and our new value here's can be in quotes five pixels solid red semicolon now one thing i didn't talk about is the semicolon uh it's optional in javascript when you finish a statement in the programming language to put a semicolon say hey i finished this you know just like css every time you have a proper name colon value semicolon to finish it off you can also do that of javascript but it's optional now i always put it and the reason is i don't want to get uh into some weird bug that might happen later on because sometimes the previous line might affect the next line so that's why you want to always add the semicolon so to prevent any conflict if you if you're not aware of what's going on in the source code that's why some people like to always add but you don't have to it's optional okay so you're going to see that a lot in any case i i just leave it here so you can see we added it now let me remove the code just briefly so you can see if i click run there's no border right now if i put put back the code here click run now there's a red border surrounding it so like i said what happened was the html code was processed by the browser and then rendered and then the javascript called immediately after is loaded and execute statements from the top to the bottom first it does the change of the source so we see this visual studio code uh video and then after that it goes okay for the style of the video player we want the border to be 5px solid red okay now if you want to change any css property through javascript you have to go through this dot style attribute here okay so you can think of this it's an object you can think of everything is an object thing that that's the keyword you're going to hear a lot okay now object has attributes one of the attributes here being the border and you can do background color although i don't think you're going to see anything here i don't know if it's there you go you can see better briefly in the beginning right uh maybe you can style other properties that are more relevant anyway if i revert back to border uh as i said we usually add space after the equal sign in before uh just for styling like that okay so i thought to you how to manipulate the source or manipulate the css now for the css you've noticed when i put background color here that i didn't use background dash color that's because of javascript we always use the camel case naming convention like i said in the beginning if you have multiple words the first word is all lowercase and if you have uh following words they all follow with the first letter capitalized there's no dash to separate the words okay reverting back to border now i want to add the thumbnail so we can click and see what happens as we click the thing so let me just go to this website pick some dot photos i paste the zoom chat it's a easier website to generate uh images since i i didn't i don't have a thumbnail for the video i'd probably go to the video take a screenshot or something i don't have time for that so i'm just gonna take a random image and use so if you use this url here and put the width slash height it gives you a random image and what i want to do is take an image of 200 by 112 so i gonna go to a new tab and paste like that i paste it as in chat as well basically it's pick some dot photo slash 200 that's the width slash 112 that's the height press enter and it generates a random image so i can copy this link for the address bar go back to jasphito and let me add an image here to the bottom image source that in itself closely so it's like that i want to make maybe i want to add the width here let's see if it's 200 i want to have multiple images so we don't have much space here so i'm gonna decrease the size just for the sake of the space constraint here but you could have whatever you want now what's going on here the thing is doesn't let me something's weird going on in my editor let's see 100 i'll keep it really small like that and then i want to add two more let me take one more here i'll click the same link from the zoom so image source this is the other one the width is 100 basically i just clicked the zoom chat link again and i grabbed another image and i'll click it again to grab another image so we can have different ones and here's the other one with 100 nice let's let's make it better because css let's make a div here i'll add a class image list and then all of these images will be under that so add some indentation meaning add some space to the left and don't don't forget to close the div anyway what i just did here was create a div of the class image list so i put all the images inside like that and don't forget to close the div so that way i can group them together like that so it's nice since the div is displayed block it will occupy its online instead of staying next to the video thing okay that looks nice so far uh we didn't even have to do anything more but if you want to do pens here stuff feel free to do so i'll keep it simple like that so what people i want to do right now is suppose that when i click the second video i want this visual studio code video to appear now before i do that let me show you how you can ignore code in in this source code here if you put a slash slash in the beginning of the line everything after the slash on the same line would be ignored by the computer so if i put slash slash in the second line as well that would be ignored so in effect that will go back to its original form without the source being changed and without the border being changed okay so let me leave that coming it out for now now let's talk about events so i want to be able to click the second image and change this video to the visual studio code video now this is the golden gate bridge video that i am assuming that's the first one and the middle one would be the vscode video and then the third one would be another video that i'll give you later so right now when i click the image nothing happens so what we have to do is listen to events so in the document there will be many events like a click of a button in the mouse or you press the keyboard some key or you hover the mouse over some area like a box or the image or outside or something like that there are so many kind of events like form submission event and so on so we're interested in the click event for the image the second image so these is where you can do it go to the element you want to listen for the click in this case the second image add an attribute called on click or lowercase equal sign double quotes double quotes now inside that on click i have to define the name of a function remember function is a set of instructions so let's say i want to say change video that's the name of the function now i want when i click to call this function to call means execute the instructions so i need the parentheses here okay so now this has to be defined in the javascript panel so if i go to the javascript so i have to define that so we can say change video parentheses but then i have to proceed with the function keyword that's from the javascript language saying okay what follows the function keyword with between the space is a function name change video and the arguments are listed between the open and closed parentheses now i don't have any argument right now so i'm just going to leave it empty now the instructions are defined between the open curly brace and the closing curly brace and which usually we leave the open in this first line and then we close it in a new line and we type the statements between them in new lines you notice i put a space here it's optional to have a space after the parentheses but i always like to add so whenever we open a curly brace we typically add indentation meaning at least two spaces on the left hand side and then when we reach the closing one we go back to the vertical level we were before like here okay nice so when i click the image change video this function this set of instructions will be executed now it executes from the top to the bottom and that's the instructions between the curly braces now we have to add an instruction here to change the video right let's take this one that we had before and cut and paste inside and remove the slash slash so this instructions just changes the source to the video of visual studio code so if i click run and i click the image you see the video change to visual studio code video that's because one click it's calling the function change video hey please change video it so it goes to line two here executes that and since there's no more statements after that we reach the end right closing curly brace so it that's it and then we got to do a similar thing for all the others but before we do that how's everybody doing any questions so far okay all right so if i click the first one again it doesn't change back because we don't have any on click here so we would have to do the same thing add on click and then a function to change the video now we could use the same function but the problem is right now the instruction for the function is just to change the visual studio code video so if i click run and i click the first one that would change the visual studio code which is wrong so there are different ways we can approach this we can create what's called an array it's a list of things in javascript and keep all the stuff there another way is we could actually just define all the URLs for the video on every image and then read from that attribute as we change it so that's what i'm going to demonstrate now so what we do now is the following so let's take uh the dash cam one for example here's the search for the dash cam so i'm going to cut that and i'm going to go to the first image and i'm going to add an attribute and here after the quotes i'm going to call it data dash url and then this is like a custom attribute in html if you proceed the name of the attribute of data dash whatever you can create your own attributes that can be given to the element so the point of this is i want to store the url of the video in in this attribute for the corresponding thumbnail so i'm going to paste that video of the dash cam of the video of golden gate bridge so that way if i need to access when i click this image i will have access to the video url so that i can inject into the source of the video let me show you that so here when we change the video what we want to do is get access to the image because that's the one who triggered the the event right we click this image so we must have an argument here for the function and that's usually the event argument so if i type event here in the javascript definition of change video by the way this is also called parameter when you're defining the function we call it parameter when you're calling the function we call it argument being passed into the function so but usually it's interchanged with those two terms so i defined the parameter here so and then i have to also take care to go to the onclick for the first image and add event here as well otherwise it won't work okay so when i do that and i'm inside this function here i will have access to this event that's an object and this this event object has information about what happened was it a click event or any other event who did it who was the target of this event so many so much information there in this object right the object has so many attributes or information and if you want to access the thing that triggered this event you can say event dot target and this will point to the img element so from the event dot target i can get the data url now what there's different ways of doing that one way is with the get attribute function you can say dot get attribute parentheses and then you pass data dash url another way is using the data set you do dot data set dot url basically every data dash attribute is injected into this data set object and you can access the url here by saying dot url that's another way so with this i can take this and cut that and paste on the right hand side of the equal sign which means okay i want to go to evan the target event the target is img okay i want to get the data dash url attribute value that means is going to go here line four right and take this whole value here imagine it's being replaced here like that as a string imagine that visually that's what's happening all right let me revert back let's see if it's working there you go i click the first one yeah initially there's no video because i put source empty there if you notice so i click the first one it changes to golden gate bridge okay so event dot target is the image element and then i can do dot data set to access all of the data dash attributes there could be multiple and out of all those data dash i wanted the data dash url so you got to say dot url so using this we generalize for any video that you have here any thumbnail so if you want to make to make this work with the second thumbnail right now it doesn't do anything right right click first one it changes but second and third doesn't work all i have to do is go to the second image add the data dash url attribute there now my thing is getting crazy again let's go here i don't know what's going on there you go data dash url equals then paste the link for that video now that's the calculator dot mp4 there you go now if i click run in the top left and try to click the second one again let's see why didn't it work oh remember it's not working because of event right i must add event here to the young click that's why i told you before put an event there it's just the way it is if you don't put it it won't work anyway i put the event here try again now it's working now let's do the third one just do data dash url and then you can use the third video let me give it the third video i paste to the zoom chat and it's again event where is it i have to put on click change video parenthesis event close parenthesis quotes and now it's gonna work there you go the video is there people walking okay how's everybody so far all right you might have noticed that the video doesn't auto play right that would be nice if it played automatically when i click i don't want to click i don't want to go click manually click play so let's do that so every time i click the image after i change the video source i also want to make it play to make it play i just have to call a function right on the video element so again how do we find the video element document dot get element by id parenthesis pass the id in string right quotes video player then i have to change not change i have to call it on the video to play and to do that it's very easy you just say dot play and parenthesis because play is a function right function is something that does something it's going to ask the video to play and an option of semicolon there if i click the first one it auto plays second one it auto plays third one it auto plays okay so immediately after changing the source you call on the video to play hey please play call the function execute the instruction to play the video you might have noticed there's a lot of dots right you're going to see that a lot of JavaScript objects and objects have functions and properties usually there are different names for the same thing like when you have an object there's a function as a set of instructions but when you have a function that belongs to an object we can you can call that a method right you can have a something in isolation but if it's belongs to an object some something that describes the object you call it an attribute and i'm just i'm going to tell you about variables right now so you might have noticed that i did the same thing here i get element by d get element by d we don't have to do this repeatedly right if i already found the video element why do i have to go and try to find it again right that's like a waste of resource uh this is a silly example but if you are doing the real world something that you have to come repeatedly fine fine fine fine fine always have to find it from scratch over again might be inefficient so what we can do here is save this reference to what's called a variable so that we can reuse it as much as many times as we want so to do that variables need to have a name so let's say video player actually let's call it video element how about that give it a descriptive name and then equal sign you don't need a space for optional and i'm going to take this statement for it there now left hand side is the variable name right hand side is what you want to store it's very like a box where you can put something and if you need it for later you can take it out and use it now for javascript language specifically the syntax is you precede the variable name with a keyword it could be var const or let in this case i just want to assign it once i don't want to have to change this value later so i just put it like a constant variable it doesn't need to be reassigned later if you don't remember that just puts const there okay and then eventually you understand what it means but that's just the syntax that we have to do to create a variable now once i have the variable i can use its name whenever i need to access or change something about the video element so in this case it would be here right so i can replace this with just video element and it would refer to whatever value i stored in line two and then you do the same for line four you can just use video element there the benefit of this is i only find the video element once in line two right line two i find the video the element whose id is video player i store that in the variable called video element and then whenever i say video element i just use that reference that's already found it's not going to find it again so i don't waste my time always redoing the same thing okay so before it would do two fine operations now just one now you notice how the video element doesn't have quotes that's what i told you it has a special meaning in this case it's a variable so once something has a special meaning it goes without the quotes but if you want literally to say v i d e o whatever you have to put the quotes like if i wanted to assign the source to video element literally the characters v i d all the way to nt i would have to have to add the quotes otherwise if i don't have the quotes you would be referring to the video element variable that in turn points to the video element right so be careful about that anyway i'm going to revert this back to what it was before so so far so good you can click here there they're still working right after i change my code i must make sure to test it again to make sure my change didn't break anything so i saw that it's still working as before i click and it changes the source and then it plays the video okay um yeah so you can make the style better by yourself the css but this is like the bare bones and now the thing that i i said before this there are different approaches to this problem the way i did it is using attributes here but likely you know real world you would do in straight in javascript using what's called arrays arrays as a list of things and basically you'll be doing i'll just give you a preview a preview i'm not going to write anything but if you're curious we will be doing like this video URLs and make an array with a bracket square bracket and then every URL that i have here we would take that let me take and put it in this list of things separated by a comma don't forget the quotes comma and then the finally the third one and that way everything is defined in the javascript code and all that i have to do is figure out what image maps to what item in the list so that's the big challenge in this approach okay but that's what it would like with this array here and if you're curious about arrays i can open the dev tools here and give you just a brief exposure click the console tab trash can to clear everything paste that code for video or URLs i omitted the const just for the sake of using the dev tools if i do that and i can access the variable video URLs by saying its name and that refers to the array which is like a list of multiple things and if i want to access the first element usually the list have elements right arrays that's the terminology that we use an array is a sequence of items and those items are called elements usually so if i want to access the first one i would have to use the bracket notation square brackets and put the index of that element the position now the position starts from zero all the way to the last one in this case there's three so position zero one and two if position zero here gives you the first one which is the dash cam dot mp4 if i say video URLs brackets one that's the second element remember i start counting from zero which is calculator dot mp4 and finally video URLs sub two the third element will give you the pedestrians dot mp4 now if you try to do video URLs sub three which doesn't exist right we only have three and three minus one is two should be the last it gives you undefined because there's no such fourth element in this list of things so in this problem you have to assign like a value to each of these images and try to figure out and get the value from this video URLs so if i i can think of the top of my head i would probably give maybe instead of data URL here you could give good data index zero here to say that okay this image corresponds to the zero element in video URLs and then you could change this to data index two sorry not to one because it could start counting from zero and then this other one we can do data index sub two like that and here in the code you would change instead of accessing the URL you would access the index right data in dash index and then from this index it's either zero one or two you would have to grab the element here map to this element and you can do that if you do bracket notation here right video URLs brackets whatever that is because it's whatever here could be zero could be one or two so if you do it that way let's see if it's working off the bed yeah it's working off the bed you go there you go and second one i don't know why the third one's not doing it we would have to debug is it because i paste the same thing or no zero one two let's debug this i don't know why the third one is not working so to demonstrate debugging what i would do is like the very cheap way of debugging i would go here to the function and i would print out the values for each variable uh in this case for example i can console dot log event dot target dot data set dot index to verify if i'm really getting number two here and if i click run i think there's a let's see if it appears here when i click okay the first one is zero i can see the zero here i've seen the console this is called debugging with console logs basically when i say console dot log and the parenthesis i've passed anything that anything gets printed to the console here so what i printed is the index of the this data index here so i'm having trouble with the third one i don't know why it's not working so that's why i'm clicking the first one to see if it's actually zero and it's zero the second one should be one and expect the third one to be two but it's not doing anything when i click so that means this line is not even getting executed and that's because i remove the on click right if i notice here there's an on click i concluded that this line is not executed therefore this function is not getting called which means i must have done something wrong about the on click for this third one so i realized oh i didn't type the on click i removed it when i was doing the change of the data url to data index so i can do the on click again here and change video events in parenthesis click run and i'm going to test it again with the dev tools click the third one now i see the two there now the video is changed right so that's how you debug uh in java script a very big inner way in chip way it's very powerful way too i still do it up to this day but there's also other and more powerful ways using the debugger in the dev tools in any case yeah so we did the data attribute url version and then we moved the urls to javascript to an array which is a list of things right array has many elements and it can access the element by its index and the index is always counted from zero and then we changed the data index so that we can know that what each thumbnail corresponds to in this list of things and then we learned how to debug in the end because i had removed my own click and i didn't realize that we did a console log debugging let me put a comment here for debugging would remove after finding the problem we really don't keep the console logs we remove them after we find out the problem and fix them but i'll leave here just for reference yeah with that i conclude this lesson