{"id":736,"date":"2022-06-10T19:13:23","date_gmt":"2022-06-10T19:13:23","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=736"},"modified":"2023-04-08T20:29:50","modified_gmt":"2023-04-08T20:29:50","slug":"javascript-output","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/javascript-output\/","title":{"rendered":"JavaScript Output"},"content":{"rendered":"\n<h2 class=\"wp-block-heading has-text-align-center\">JavaScript Output<\/h2>\n\n\n\n<p>We are now slowly diving into the concepts of JavaScript. So, first of all, we are going to see a very basic JavaScript program, wherein, we are just printing something. We are going to see where can we get outputs from JavaScript. Well, there are multiple ways through which we can display data. Let&#8217;s discuss them now &#8211;<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"JavaScript Output | Lecture 4 | JavaScript for Beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/cgu2GxBycv4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>innerHTML \u2192 This is a property in JavaScript, which is used to set or get the HTML contained within some HTML element.<\/li>\n\n\n\n<li>write \u2192 This is a method, with help of which, we can write directly to the HTML document.<\/li>\n\n\n\n<li>alert \u2192 With help of the alert method, we are going to display an alert box with some messages, and an OK button as well.<\/li>\n\n\n\n<li>console.log \u2192 Using this, we are just writing to the console.<\/li>\n\n\n\n<li>innerText \u2192 It represents the rendered text content of a node and its descendants. (the examples will get you a clear idea)<\/li>\n\n\n\n<li>textContent \u2192 It represents the rendered text content of a node and its descendants. (however, this is different from the innerText. This will get clear with the example)<\/li>\n<\/ul>\n\n\n\n<p>We are going to see this innerText and textContent thing later in the course.<\/p>\n\n\n\n<p>Now, the question is how are we going to write JavaScript? Well, there are many ways. Firstly, we will create an HTML file. In <a href=\"https:\/\/gyanipandit.com\/programming\/HTML\/\">HTML<\/a>, there is a tag, which is the script. Between the &lt;script> and &lt;\/script>, we will be writing our JavaScript.<\/p>\n\n\n\n<p>Another way to write JavaScript is just to create a separate JavaScript file, with the extension .js<\/p>\n\n\n\n<p>Now, we have a separate file to write the JavaScript. We will be using both ways as per convenience.<\/p>\n\n\n\n<p>In the below example, we have just created an HTML file, and we also have the script element, which has the JavaScript code written, as you can see. Now, do not worry about some new things that you are seeing here(like document, or getElementById), since we have just started the journey, and we are going to go through these concepts as well. So, we will surely understand this later.<\/p>\n\n\n\n<p>Program &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"821\" height=\"290\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript.jpg\" alt=\"\" class=\"wp-image-737\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript.jpg 821w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-300x106.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-768x271.jpg 768w\" sizes=\"auto, (max-width: 821px) 100vw, 821px\" \/><\/figure>\n<\/div>\n\n\n<p>Just for a moment, forget that we have written any script element here. Just cut that script element from the code, and try opening the file in the browser. This would be just some normal web page.<\/p>\n\n\n\n<p>Now, after this, just bring back that script element, and again try opening the file in the browser. Now, you can notice some changes, like the alert box kind of pops up. Also, you can notice that the heading too got changed.<\/p>\n\n\n\n<p>Now, let&#8217;s have a look at the output. First of all, we are getting the alert box.<\/p>\n\n\n\n<p>This is what the alert box looks like &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"225\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-1.jpg\" alt=\"\" class=\"wp-image-738\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-1.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-1-300x66.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-1-768x169.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>With the help of the write method, remember that we are writing directly to the document. With the help of innerHTML, we are here setting some new content for the h1 element, which is being accessed with help of its id. Also, we are going to look at the console thing, where we have written something. But now, when we click on ok on the alert box, the web page looks something like this &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"193\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-2.jpg\" alt=\"\" class=\"wp-image-739\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-2.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-2-300x57.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-2-768x145.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>In here, the heading got actually changed, and some text got written directly to the web page. If you look at the code once again, it looks something like this &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"509\" height=\"421\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-3.jpg\" alt=\"\" class=\"wp-image-740\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-3.jpg 509w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-3-300x248.jpg 300w\" sizes=\"auto, (max-width: 509px) 100vw, 509px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see, in the code, some text is written directly. Also, the heading is changed now. Now, let&#8217;s have a look at the console, where we have written something. We need to open the developer tools, which can be simply opened by pressing F-12, right-clicking and clicking on inspecting, or some other appropriate shortcut. &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"312\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-4.jpg\" alt=\"\" class=\"wp-image-741\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-4.jpg 624w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outputs-from-JavaScript-4-300x150.jpg 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see, we got the text \u2013 Welcome to GyaniPandit!!, on the console. The console is some kind of place, which is going to be visited often throughout the course.<\/p>\n\n\n\n<p>A JavaScript program is just a sequence of instructions or you can say it is a collection of JavaScript statements that we want to get executed.<\/p>\n\n\n\n<p>The basic idea behind every <a href=\"https:\/\/gyanipandit.com\/programming\/javascript\/\">JavaScript program<\/a> that we are going to write is to do something with the web page, because, as said earlier, JavaScript adds life to your webpages(it is basically some client-side scripting), and that&#8217;s what we are going to do here.<\/p>\n\n\n\n<p>Later on, we are going to also understand how a JavaScript program executes. We need to understand some concepts first, and also get familiar with JavaScript first before we really look at how a JavaScript program executes, so, we are going to get into quite details of how a JavaScript program executes later.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript Output We are now slowly diving into the concepts of JavaScript. So, first of all, we are going to see a very basic JavaScript program, wherein, we are just printing something. We are going to see where can we get outputs from JavaScript. Well, there are multiple ways through which we can display data. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[217,15],"class_list":{"0":"post-736","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript-tutorial","7":"tag-javascript-output","8":"tag-javascript-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=736"}],"version-history":[{"count":3,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/736\/revisions"}],"predecessor-version":[{"id":5782,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/736\/revisions\/5782"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}