- write → This is a method, with help of which, we can write directly to the HTML document.
- alert → With help of the alert method, we are going to display an alert box with some messages, and an OK button as well.
- console.log → Using this, we are just writing to the console.
- innerText → It represents the rendered text content of a node and its descendants. (the examples will get you a clear idea)
- textContent → 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)
We are going to see this innerText and textContent thing later in the course.
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.
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.
Now, let’s have a look at the output. First of all, we are getting the alert box.
This is what the alert box looks like –
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 –
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 –
As you can see, in the code, some text is written directly. Also, the heading is changed now. Now, let’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. –
As you can see, we got the text – Welcome to GyaniPandit!!, on the console. The console is some kind of place, which is going to be visited often throughout the course.