JavaScript Introduction, Definition and Examples

JavaScript is actually a very simple and fun language to learn. You can learn JavaScript easily, follow the training articles we create and quickly learn when you try these examples yourself. Learn is entirely up to you. If you want to learn quickly after the course contents, all you have to do is to repeat.


What is JavaScript ?

JavaScript is used to create websites that look good for developing technology at all times. This language is actually one of a kind to embellish your internet sites, both in terms of creating ease of use and in many websites. There are three basic languages ​​that web developers must learn. These are: HTML, CSS and JavaScript.


When you ask a question about what is JavaScript useful, this language is used to determine the behavior of websites. This language is used to create a dynamic and interactive web page. This language is a script language developed by NetScape.


JavaScript Introduction

All software languages ​​are also learned by experimenting in JavaScript. The only way you can learn all the examples you have seen in the articles or written content is to try these code pieces again and again in your code editor on your computer. To better understand the JavaScript language, we can start with the examples below.


Changing HTML Content with JavaScript

Yeah, you didn’t hear it wrong. You can replace HTML content with JavaScript in any way you want. How does that sound fun, though? Why don’t you find out why this language is so fun! To change the HTML content with JavaScript, let’s take a look at the line of code below.

<p id="demo">How does JavaScript change HTML content?</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = Hi. I'am JavaScript!"'>Click</button>

In the above code snippet, we first created a p tag and defined an id. We created a button that we define the basic code of JavaScript and often we will encounter with one of the code getElementById here we took. After that, we found that it was in-HTML and clicked on the button.


JavaScript Can Accept Single Quotation Mark

In the code snippet that we wrote above, you should note that we used two quotes. But JavaScript can accept double quotes as well as accept single quotes.

<p id="demo">How does JavaScript change HTML content?</p>
<button type="button" onclick='document.getElementById('demo').innerHTML = Hi. I'am JavaScript!"'>Click</button>

As you can see in the example above, while the HTML tag uses single quotes in the p tag, we can successfully perform single quotes in the sections on the bottom and in JavaScript tags, and our code will work with success because JavaScript can accept single quotes.


Turning the Lamp On and Off with JavaScript

In fact, don’t be fooled. The original name of the title can change everything in JavaScript. But can’t we switch on and off the lamp? Of course we can. First of all, we can change the pictures in JavaScript. Let’s look at a code snippet first.

<button onclick="document.getElementById('Image').src='bulb1.jpg'">Turn On</button>
<img id="Image" src="ampul.jpg" style="width:100px">
<button onclick="document.getElementById('Image').src='bulb.jpg'"Turn Off</button>

First of all, we have added a picture in the line and we have defined an id in this picture. I’ve added a normal light bulb that has not been burned off. Then, in the code snippet on the top side, I wanted to pull the part of the image that was on Image and make it bulb1.jpg with the src tag. In this way, when the Light on button is pressed, the src command with bulb.jpg will now show us bulb1.jpg. Then when we press the Close light button, the src tag will change again and this time it will show us the picture in bulb.jpg.


Changing CSS with JavaScript

I told you it was so much fun. How can we change everything, right? You can also change everything with JavaScript. For example, on some websites you see a button to enlarge the font size. When you print, the font will grow or shrink. That’s what we can do with JavaScript. But I’m going to show you the magnification when the button is pressed, not to enlarge it now.

<p id="demo2">Changing the size of the article with JavaScript</p>
<button type="button" onclick="document.getElementById('demo2').style.fontSize='40px'">Click</button>

In the code snippet above, id means that the style of the part of the demo2 will make the font size of 40 px. Of course, when the button is clicked. In fact, in other courses, we learned how these labels mean. Nobody can hold you.


JavaScript Item Hiding

Let me give you an example on the website or stop. At the top of some sites, how to open an ad and close the ad button. But this ad can be on every page or home page. Usually it is embedded in the text and slides down from top to bottom. You can not close this ad without pressing the button to stop there or he can do it in this way.

<p id="demo3">Hiding article with JavaScript</p>
<button type="button" onclick="document.getElementById('demo3').style.display='none'">Click</button>

The demo3 id above the p tag that will come out under the click the click button will be what will be the display none will be successful in completing the process of being a Casper to progress.


JavaScript Article Display

Yes how to click on the button as we can hide a post or something, click on the button again, we can bring back a text or a screen that can not be displayed on the screen. For this:

<p id="demo4" style="display:none">Hi. I'am JavaScript!</p>
<button type="button" onclick="document.getElementById('demo4').style.display='block'">Click</button>

We must use the above code snippet. Unlike the previous example, when we click on the button, this content will be displayed. In this way, with JavaScript, it is now possible to display an item that is not displayed on the screen by clicking the button.



The examples above are mainly examples of JavaScript Introduction. What exactly can be done with JavaScript is an explanation of the answer to the question. After that, you can have detailed information about which tags do we need to use and what features we can add to each of the stickers on the individual tags.


Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button