Hello friends, in today’s post, we are starting you about JavaScript (what is Output of Javascript) , what happens. How does the key work, so today you should tell about JavaScript.
Output of JavaScript
How can I display in JavaScript?
We can display data in different ways in JavaScript.
1. We use innerHTML in JavaScript to write the elements of HTML in JavaScript.
2. To see the output of html in javascript we use pre-defined property of javascript document.write() is used
3. In JavaScript, if we want to check whether JavaScript is running or not, you can also see it by using the alert box in the browser, for this window.alert() is used.
4. If we want to check the output on the console of the browser, then for that we use console.log()
Now we are telling you about all these from the details below.
How to use innerHTML?
To access an element in html, the document.getElementById(id) method is used in JavaScript, so that the object of that html element is obtained.
In JavaScript, the id attribute is used to assign the value of the id attribute to an element in the html so that the innerHTML property is defined in the content of the html.
We have explained this by example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fullstackgyan</title>
</head>
<body>
<h2>this is the first heading</h2>
<p>this is the first paragraph</p>
<p id="test"></p>
<script>
document.getElementById("test").innerHTML = 3 + 9;
</script>
</body>
</html>
In this example you can see that an id has been defined in html element <p> whose value of id is given to your test
get this value in javascript
document.getElementById(“test”), On giving, you can get the object of its id and if you want to display the value in html element in it, then you have to give .innerHTML like
document.getElementById("test").innerHTML = 3 + 9;This will display your 3+9 = 12 , 12 on the paragraph element of that html
Using document.write()
If we use this in any JavaScript to check the value of a variable or to see the output on the browser, what is being stored in that variable, we document.write() for testing purposes.
You are also given an example of this below.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fullstackgyan</title> </head> <body> <h2>this is the first heading</h2> <p>this is the first paragraph</p> <p>this is the second paragraph</p> <script> document.write(5 + 6); </script> </body> </html>
You can see in this example that some value has been given in document.write() which will show on the browser by performing that value operator.
Note:- Javascript is considered by all developers that it is written last because first html and css are loaded then your javascript is loaded.
If you use document.write() after the html document is loaded then all the existing html will be deleted
We also show you this through example.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fullstackgyan</title> </head> <body> <h2>this is the first heading</h2> <p>this is the first paragraph</p> <button type="button" onclick="document.write(3 + 9)">Click Show</button> </body> </html>
But in JavaScript, document.write() is used in most cases, it is used for testing.
Using window.alert()
All the developers keep using this method because through this we can see any value in the alert box that what is coming in it.
You can see this display data in the alert box, to use it window.alert() is used in JavaScript, in which we see the data we want to see in alert(), in this window is your option. You may or may not give it
Your example of this is given below
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fullstackgyan</title> </head> <body> <h2>this is the first heading</h2> <p>this is the first paragraph</p> <script> window.alert(5 + 6); </script> </body> </html>
You can skip the window keyword in this example.
In JavaScript, the window object has a global scope object, which means that it belongs to the variables, properties, and methods of the window object by-default.
Which means you have this window keyword optional
An example of this is also given to you below.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fullstackgyan</title> </head> <body> <h2>this is the first heading</h2> <p>this is the first paragraph</p> <script> alert(5 + 6); </script> </body> </html>
This example is your same, the above example has been given, only the window keyword has been removed in it, even then it will run
Using console.log()
This is your most popular method of JavaScript, it is used by all the developers to check the output which uses the code of JavaScript.
It is used for debugging or checking the output, its output is not shown to you on the browser, it is visible on the console tab bar when you inspect it on your browser.
To use its method, we use console.log() method.
Its example is given to you below
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fullstackgyan</title> </head> <body> <h2>this is the first heading</h2> <p>this is the first paragraph</p> <h2>Activate Debugging</h2> <p>F12 on your keyboard will activate debugging.</p> <p>Then select "Console" in the debugger menu.</p> <p>Then click Run again.</p> <script> console.log(3 + 9); </script> </body> </html>
In this example 3+9 is defined in console.log() then after performing this operation 12 you will show its output in the console tab bar of the browser
using javascript print
Javascript does not have any print object or print method, which means that you cannot access the output from JavaScript in devices.
There is only one solution for this, the only exception is that you can print the content of the current window on the browser, currently window.print is used to print the content or data.
Its example is being given below
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fullstackgyan</title> </head> <body> <h2>this is the first heading</h2> <p>this is the first paragraph</p> <h2>The window.print() Method</h2> <p>Click the button to print the current page.</p> <button onclick="window.print()">Print this page</button> </body> </html>
In this you can see that on click on the button tag that print has been called so that if anyone clicks on the button then it will open the window to print the browser data at present.
reference- https://javahindi.com/javascript-all-topics-in-hindi/
Request – If you found this post useful for you (what is Output of Javascript) , then do not limit it to yourself(basic infomation of javascript), do share it