What can Javascript do? - a preview to the super powers!

Abhay Talreja
A free video tutorial from Abhay Talreja
Developer, Team Lead, Software Consultant, Loves Technology
4.3 instructor rating • 4 courses • 87,012 students

Lecture description

In This lecture we will see what can be achieved using Javascript with some basic examples. You can see the examples in action using the below links.

https://jsbin.com/fejeyij/edit?html,output

Learn more from the full course

Javascript - From Beginner to Pro-Build real world JS apps

Master JavaScript with the most complete JavaScript course on market! 1st step to learn JS - React, Angular or Vue JS

12:32:48 of on-demand video • Updated December 2019

  • You will go all the way from JavaScript beginner to advanced JavaScript developer.
  • You will gain a deep and true understanding of how JavaScript works behind the scenes.
  • You will be able to debug your code and understand other developer's code.
  • You will understand and use complex features like the 'this' keyword, function constructors, prototype, inheritance, first-class functions, closures, and more.
  • You will learn how to organize and structure your code using modules and functions. Because coding is not just writing code, it's also thinking about your code!
  • Take the w3 Schools, Upwork or Freelancer Javascript certification
English hey guys so welcome back so now what we're going to do is as i explained that we will go and hit JSBIN dot-com and where we start writing our first set of code and in this lecture we will not dig into what everything is how things work but before then getting started I just wanted to give you a preview on what we can do with javascript when you have it embedded on to your webpages what happens now even if you don't understand any of the code that we're going to write in this lecture don't you worry in the next coming lectures we'll have a proper theory and practical examples so that we can go over it in this example i will show you a couple of things that will make make sure that you can use javascript in your web pages and add some dynamic content to it and probably have certain behaviors that you always wanted to now it is very easy to do it so let's get started the first thing I'm going to show you is just empty JS Bin to the moment you do a file new you will see something like this again it may vary because in some cases it doesn't display the meta information on the head tag but that's about it i believe and whenever you do a new file you should see something like this and this is video output will be so let's quickly change the title to what can javascript do ok so that we know that this goes up here and also let's try to write something in the body let's say I want to write an h1 tag and give the same header out here which is what can java script do so that we can see something in the output then save it and now you can see what can javascript to got added here similarly if I need to add a paragraph let's say I can add a paragraph and i can say and JavaScript can change HTML content so let's say I already have an HTML content on the screen with the use of JavaScript i can change it ok now how does that work i'll quickly explain so before even getting ahead you always know that when you create an HTML file the way you can identify an element on the HTML document is by giving an ID so what we will do is we will quickly write an ID field out here lets the ID is equal to let say 'demo' so now i have a field which is called ID demo now what i can do is let's create a button so i will create a button using again in HTML button tag and i will close it using the button tag and let me just add some content let's say 'click me to make changes' ok so that's my button now whenever I click this the content has to get updated in the HTML now how can I Drive that it is very easy so the first thing I need to do is whenever a button gets click it is an event and whenever an event happens you can handle it in JavaScript now how can you handle a button event in JavaScript well it is very easy just the way in English we say hey did you click that button similarly in JavaScript we have something called an on-click attribute that we can give on the HTML so let's say I given on click out here now in this on click i can call in any JavaScript I want to usually a passing of function but we're not yet done with function so i'll probably leave it for you on a later chapter but what we will do right now is write plain javascript to access this p tag, so the P tag that you see you we will try to access this tag using javascript and update its content using some other content that we already will given the JavaScript now how do you do that so whenever you see an HTML document it is called a document which means it is a file just like your PDF for your txt file this is also an HTML document so the way you can access a documents contained is using the document keyword so you get the document because that's always available to you now when you get the document ofcourse there's a typo here it should document and now that remember the idea that we gave in so you can access any element in that document based on that ID so what we will try to do is based on that ID try to get the p tag, so now the way we can do it is get element by ID now if you note that i'm trying to use a camel case formatin writing the method name which is g is lower case E is upper case B is uppercase and I, so many people with who already has some technical background me understand and relate to it but if you do not understand don't worry i will cover this in the coming lecture now you do a get element ID which is a method call and the way you make a method call in javascript is having the bracket and then if you need to pass in something in this case i want to call the ID which is demo I will pass them as a parameter so i will say hey let my name is a Abhay so if you want to address me and call me you will say hey Abhay look here similarly in JavaScript you'll say document dot get element by ID and then i'll say demo which will give me an id saying that the demo element is needed now once i get the demo element the way i can access the content of a particular element in JavaScript there's something called as an innerHTML so just like you have a p tag it has some kind of an HTML and it may not necessarily be that you have text inside a p tag you may have an indentation let's say you have a span inside or probably and you have a DIV then you have a P tag then you have span you can have any anything let's say I have as a span for example inside the p tag i can give it a span as well now i have a child content to this can vary from div to div or probably element to element so the way you can access the content of a particular element is using innerHTML and that is a property inner HTML and again i will explain what the property is in the coming lectures so don't worry but in HTML just has an inner HTML property just like in mathematics if you have x is equal to 10 so consider in an HTML to be a variable X that you can set that contains of the HTML can be updated so let's go and say this is equal to let's say i will give it a different kind of quotes because i don't want to mix the text and say HTML updated ok now i have this I can go and run with js try to click this and see what happens and the HTML got udated fantastic right so it was very simple on seeing how HTML can be updated, so the next example what we will see is just the way we had an attribute called ID on a p tag, similarly except for the id of course javascript can change the attributes of HTML tags so let's say for instance I have an image tag and if I need to change the image based on certain action i can very well do it in JavaScript let me show you a very good example so let me just quickly go down given HR tag so that i know that this is a separate examples of you're dealing with now in this HR tag let me create a small button let's say button let's say turn lights on ok i will close the button and let me create another button which is turn lights off what this will do is I'll have an image in the center let's say image source is equal to something now i have already uploaded the image so whenever you have an image you just need to give a URL to that image so if the URL is local to your file space or probably you're dealing with your web app or web server you can give that or if not if you have it uploaded onto a third-party application like in my case i uploaded to in your this is my off-state this is my own state so lets say by default i have the off-state on select copy this image actually let's copy the image address it's on imgur you can use it and i will also share the image URL so you can use it and access it anytime you want to let's go back and it is source is equal to this off image and vollaaa! the image starts showing up let's close this image tag so that we don't have to worry about it now one the image tag is safe i need to write an on-click to turn on the lights and then turn off the light now how do i do that we've always done something called an on-click in the previous example so the first thing we can do is get hold of the image and to get hold of the image i need to pass in an ID field so let's say ID is equal to my image now when i get to my image i can go in yard say on click is equals to again i can do a document dot get element by ID and then i can pass in the ID off my image once i get to my image just the way i updated the innerhtml as the attribute i can update another attribute called src in this scenario the source becomes the lights off so i will take the lightest on so which means i think the URL go your copy the image address and probably put it in your so whenever the button its click it will turn the lights on now and whenever the button is clicked out here which means turning off the light I need to change it back to the turn off lights which means the original limit so it's just copy and paste it here and replace the image content for the off now let's try to see it in action let's make sure we run into JS if you don't have auto-run JS checked in you have to run it every time now let me try to click this and see if it works and vollaaa! it works so there's light everywhere so now we have the lights done on and turn off so you can change the source content and it looks fantastic too, that was easy isn't it, so let's try to write another example where i'll show you that JavaScript can actually show and hide content onto your HTML as well and probably this you have seen on all your websites that you access that you click on a button and suddenly something appears to you so I'll show you how that came down in JavaScript again if you don't get it don't worry we will cover everything in detail in the coming lectures so let's see this new example let's write an HR tag so that we have another line drawn saying this is at third example on seeing what HTML and JavaScript do together now once we have the HR let's try to right the first thing which is let's try to write a p tag let's say ID is equals to magic because you're going to some magic out here and now in this p tag i can decide some content so this is something that will show up by magic ok spelled it wrong because I was too excited to say it so let's p tag let's end it now i have the p tag nothing fancy let's create two buttons and again use the same HTML so let's create a button let's say on click is equal to something i'm not writing it so far and let's close the button and in here I can say hide the div or hide the text magically again I was so interested in saying it I probably type it wrong so I have this and let me just to show the text now i have both of them and on click of both i can go and take this bee tag and probably change your property on it so that it gets hidden or shown based on the action I perform so let's just go and say document dot get element by ID now I get my magic tag which is Magic so that i know what i'm getting i close this now comes the real thing where you can access this style of a particular HTML so with java script you can actually update the style or how things look they appear they do not appear on your HTML screen so let's say in this case i can access it using that style attribute that is there on every HTML element so I get the style and I say display is equal to in this scenario i can give any display so now i need to hide it so it's a display as none now similarly let me let me just go and see if it works let's click it nothing happened well the reason is this has to be in the quotes let's say this, run this and it goes away but it doesn't show up yet because we haven't coded anything for that so let's just copy this entire on click and paste it out here so that we can show something now to show a tag or show an attribute in HTML the way you can do it is you can use the display property again and instead of none you can give a 'block' so if you understand yes and how things work you know that to display any particular day if you can use either none which means it hide it to display it on the screen you either do a block or probably an inner block depending on how you want to display it so lets just do a display run it with JS hide it show it hide it show it so this was you know very 3 simple examples of course this can be elaborated to a big full-fledged website where you can add a lot of dynamic contain make it user-friendly etc using javascript that was easy isn't it now there's more in store where we will learn the basics of this language going from the syntax where we will try to understand what the syntax is how you write your first variable how you'd write JavaScript where you right javascript how you see that output when you want to see a JavaScript all that will be covered in the coming lectures i hope this gives you a good taste of JavaScript and i'll see you in the next class