Introduction to Javascript Language & Encoding
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 ---
</script>
or shorter form
<script>
--- code goes here ---
</script>
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>
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:
Next, what you need to know about the JavaScript language, you should read this:
