Introduction to JavaScript

JavaScript is a scripting language used to create and make web pages more interactive.

The Javascript language and the Java language are not alike or related languages, they are two completely different languages.

What can a JavaScript do?

  • Makes web page contents dynamically
  • Display information
  • Control Browsers
  • Add interactivity to web page
  • Validate forms data
  • Create Cookies

Originally JavaScript is created as a front end language, but nowadays it can also be used as a back end language.

JAVASCRIPT tag

Using global JavaScript tag, JavaScript can be directly embedded in the HTML page.

<script type="text/javascript">

--- code goes here ---

</javascript>

or shorter form

<javascript>

--- code goes here ---

</javascript>

JavaScript code can be in the either <head> section (after <style> tag) or <body> section.

Like CSS external files, JavaScript files can be enabled through HTML tag <script>.

<script type="text/javascript" src="filename.js"> </script>

Also, JavaScript files can be enabled from URLs of other site domains, via the <script> link.

<script type="text/javascript" src="https://code.jquery.com/filename.js"> </script>








Example JavaScript with Onclick Function

code:

<input type="button" value="CLICK HERE" onclick="showImage();"/>
<img id="image" src="earth.png" style="visibility:hidden"/>

<script type="text/javascript">
function showImage(){
document.getElementById('image').style.visibility="visible";
}
</script>

result:





JSFiddle









Example JavaScript with jQuery

There are various libraries in JavaScript that further enhance its functionality.
JavaScript libraries provide pre-written JavaScript code which makes common or complex tasks easy to do.
Jquery is the most widely deployed JavaScript library.

code:


<!DOCTYPE html>
<html>
 <head>
  <title>IT PRESENT</title>
 <style>
body {
background-color:lightgray;
}
.p {
color:red;
background-color:green;
}
.r {
background-color:blue;
font-size:45px;
}
 </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
         $("h1").addClass("p");    
         $("p").addClass("r");        
    });
});
</script>
 </head>
 <body>
   <h1>INDEX PAGE</h1>
   <p>text on html page</p>
   <button>CLICK HERE</button>
 </body>
</html>

result:



TITLE

text on html page





JSFiddle