JavaScript Tutorial / Introduction
JavaScript Introduction Tutorial
In this tutorial you learn about JavaScript, this is the first introduction tutorial of JavaScript. Here you will learn some basic about JavaScript such as What is JavaScript, what do you need before learning JavaScript and some easier examples of JavaScript.
What is JavaScript?
JavaScript is a dynamic computer programming or a scripting language that allow the implementation of features on web pages, Where the HTML and CSS languages are gives structure and style to web pages, JavaScript gives web pages interactive elements and make the fantastic web pages.
What do you need before learning JavaScript?
Before learning JavaScript, you need to know important computer programming languages that are –
- HTML (Hyper Text Markup Language)
- CSS (Cascading Style Sheets)
You know that HTML (Hypertext Markup Language) elements are the building blocks of web pages, and CSS define styles HTML elements of your websites including design and layout of web pages.
Some Basic Examples of JavaScript
Now you see first stage basic and important examples of JavaScript, here basic and small coding of JavaScript that you understand how to write the JavaScript code.
Example of JavaScript to “Change the Color of Background”
When tap and click the background color is changed.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Javascript Examples</title> <style type="text/css"> div{color: yellow; height: 300px;} img{padding-top: 20px;} h5{text-align: center; font-size: 20px; padding-top: 20px;} </style> </head> <body> <div onclick="changecolor(this)" style="background-color: blue;"> <h5>Tap to Change Color</h5> <center><img src="studymuch.com.png" height="100px"> </center> </div> <script> function changecolor(element){ var currentColor = element.style. backgroundColor; if(currentColor=="blue") {element.style.backgroundColor = "darkgreen";} else{element.style.backgroundColor = "blue";} } </script> </body> </html> |
Output of above programming example;
In above programming example, the HTML code is used to create the create background, add image and text then CSS is used to design it. But finally, JavaScript is used to add a function that change the background color, you saw in output when we tap the background color was changed.
JavaScript Example to Hide and Shoe the Contents;
This is one another example of JavaScript, to change HTML style.
This example contains a feature that can hide and show the HTML elements through Hide and Show button.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Show & Hide buttom</title> <style type="text/css"> img{height: 100px; padding-top: 20px;} div{text-align: center; color: white;} </style> </head> <body> <div id="demo" style="height: 200px; background: blue;">www.studymuch.in <center><img src="studymuch.com.png"> </center></div> <button type="button" onclick="show()">Show </button> <button type="button" onclick="hide()"> Hide </button> <script> function show(){ document.getElementById("demo") .style.display = "block"; } function hide(){ document.getElementById("demo") .style.display = "none"; } </script> </body> </html> |
Output of above programming example;
You can see above programming example and its output, when we clicked the “Show” button the HTML contents is visible and when we click “Hide” button, HTML contents is Hidden, this is the actual function of JavaScript.
Example of JavaScript “Alert Box”
Here one more example of JavaScript, that show Alert Dialog Box.
<!DOCTYPE html> <html lang="en" <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dialog Box</title> <style type="text/css"> button{font-size: 50px; color: green; background-color:lightblue; border: 2px solid blue; border-bottom: 20px; border-radius: 10px; font-family: 'Courier New', Courier, monospace; font-weight: bold; box-shadow: 5px.3px,8px 2px red; margin: 50px; } </style> </head> <body> <center><button id="btn">Show Dialog Box </button></center> <script type="text/javascript"> document.getElementById("btn") .onclick = function(){ alert("Alert! This is a Content of studymych.in!") } </script> </body> </html> |
Output of above programming example;
In the above programming example, HTML is used to create the Dialog Box Button, then CSS is used to design the button, and finally JavaScript is used to add a simple function. You can see when we clicked the button a popup dialog box is open, that is also called the Alert Box.
So, in this tutorial you know some basic about the JavaScript, I hope you can understand better, in next tutorial you know how to write the JavaScript code with example.
Read Also –
- Learn How to Writing JavaScript Code.
- Learn all Tutorial of HTML Basic to Advance with programming Example.
- Learn how to make Stylish Table with HTML and CSS.
- Learn how to create Contact Us Page with HTML and CSS.
- Learn CSS Animation basic to advance in one tutorial.
- Learn all Tutorial of CSS with Programming Examples.
3 Comments
Surbhi · June 26, 2022 at 3:37 pm
Good Knowledge experience of JavaScript.
Well done!
Thanks for this!
creek gate io · May 8, 2023 at 9:16 pm
Your article made me suddenly realize that I am writing a thesis on gate.io. After reading your article, I have a different way of thinking, thank you. However, I still have some doubts, can you help me? Thanks.
gate.io · May 11, 2023 at 12:21 am
At the beginning, I was still puzzled. Since I read your article, I have been very impressed. It has provided a lot of innovative ideas for my thesis related to gate.io. Thank u. But I still have some doubts, can you help me? Thanks.