How to Display Output Using Javascript | Javascript Output Methods - video Dailymotion

Web Artificer

In this tutorial i will show you how to display output using javascript including all methods of output in javascript #console.log #document.write #alert #confirm  #javascriptoutputmethods #javascriptoutputmethod #javascriptinputandoutputmethods #javascriptoutputmethodsand #jsoutput #jsmethods #outputmethods

Transcript

00:00As-salamu alaykum

00:02In our last video, we saw how to set up our JavaScript environment

00:11Now, in our next video, we will see how to get any string or printout through JavaScript

00:24For that, JavaScript provides some functions

00:29We will see those functions and get any printout

00:35The first example is console.log

00:41Console.log is basically used by developers

00:47Developers use it because

00:49The good thing about JavaScript is

00:53It doesn't let us display the error on the front end

00:59For that, we can go to the inspect option

01:03We can see the errors and warnings

01:08And we can show them through console.log

01:12Let's see it again

01:16I am getting it done through console.log

01:23Let's close it

01:28Now, let's go to our document and inspect it

01:32In console.log

01:35If we refresh it, we can see I am console

01:40This is done for development

01:43But I want to get some printout on my web page

01:52For that, we will use an HTML tag

02:00For example, we will use the p tag

02:03And we will provide an ID with the name of demo

02:09Now, this p tag is empty

02:15We want to get some printout in this p tag

02:19We want to get some text or anything written in it

02:24For that, JavaScript provides a function

02:28document.getElementById

02:34We will use the provided ID

02:39We will get this ID

02:42We can get any document from it

02:47If we want to print out something, we can do that

02:52I have cached this ID here

02:57And I want to get some string value from innerHTML

03:03So, I want to get this text printed out

03:12When I refresh it, I will get this text printed out

03:18This is done with innerHTML

03:22Other than that, I have inner.text

03:26We will get this printed out

03:31This is also giving us the same result

03:34But if I tell the difference between these two

03:39Inner.text will only give me the text

03:45For example, if I want to print this out in h1 tag

03:54It will print it out like this

04:00But this was not my requirement

04:03My requirement was that this demo text should be in h1

04:10And this p tag should be in h1

04:15It means that the properties of h1 should be implemented on this text

04:20But it is not through inner.text

04:23Inner.text deals with just text

04:26For this, we use inner.innerHTML

04:32Inner.innerHTML will use the properties of h1 and implement it on this text

04:41When we go and see the result again

04:44It is showing that it is implementing the properties of h1

04:49And our p tag has been changed

04:52Our h1 tag has been written in p tag

04:56Other than this, we have another method

05:06document.write

05:12We will do document.write

05:16And we will give any string in it

05:19This is document method

05:24I have not yet got any id from it

05:29As it is simple

05:31Remove this

05:36And remove this id as well

05:44Now when we refresh

05:46It will give me a string in return

05:51And when we see that it will not provide any tag

06:02Because javascript has output a string directly

06:08Similarly, there is a document.write line

06:12For that, we will write a short form of l and n

06:17And when we refresh, we will get the same result

06:22Other than that, we have an option of alert

06:33You often see that when you press any button

06:39Or you want to show a pop-up box

06:46All these things are possible through the alert box

06:51I will give you a practical demonstration

06:56Now when I refresh, I will get an alert

07:05When I press ok, it will end

07:09After this alert, it is confirmed

07:13Sorry

07:15Confirm asks for an option

07:19It provides us two options of ok and cancel

07:24This is how it gives us two options of ok and cancel

07:39These were some methods

07:42Through which we can print out the document in javascript

07:49Using these methods

07:53See you in the next video

07:56Take care of yourself till then

07:58Goodbye

How to Display Output Using Javascript | Javascript Output Methods

Category

Transcript

Recommended