BASIC PROGRAM USING JAVASCRIPIT FOR PRACTICE
How to Write JavaScript Program
What is DHTML?
The DHTML stands for “dynamic hypertext transfer markup language”. DHTML is not
a language. It is basically a collection of web technologies that are used together to create
robust interactive web applications. The web page’s behavior will change in response to the
user’s behaviors.
DHTML i
s a combination of three technologies such as HTML, CSS, and JavaScript.
HTML defines web sites content through semantic tags (heading, sections, articles,
paragraphs, lists)
CSS described the look and formatting of a document
Layout and position of elements on the page
Presentation styles (background, border, colors…)
Text and font styles (size, color, family)
JavaScript defines dynamic behavior
Programming logic for interaction with the user
Handle user events
HTML, CSS, and JavaScript are the three layers of the Web that helps to make
web pages interactive.
What can JavaScript do?
Can handle events such as button clicks
Can read/ write HTML elements and modify the DOM tree dynamically
It Can access/modify the browser cookies.
It can detect the user browser as well as the Operating System (OS) of the user.
We can also Implement the object-oriented language features using JavaScript
It is also used to make asynchronous server calls (i.e. AJAX calls)
Can implement complex graphics and animation via Canvas
It is also possible to implement back-end logic using Node.js
JavaScript Basic Syntax:
A JavaScript contains JavaScript statements that are placed between the <script>…
</script> HTML tags in a web page.
You can put the <script> tag containing JavaScript code anywhere within your web page but
it is considered as the best way to keep it within the <head> tags.
The <script> tag tells the browser to begin converting all the text between these tags as a
script. In simple words is specifies that we are using JavaScript. The simple syntax of
JavaScript will be as:
<script>
javascripit code
</script>
The Script takes 3 attributes:
1. language: this attribute indicates which scripting language we are using in the
program and its value will be javascript.
2. type: this attribute indicates the scripting language is getting used and its value should
be “text/javascript”.
3. src: it specifies the URL of an external JavaScript file. This attribute overrides any
existing JavaScript place between the <script>
EXAMPLE:
<html>
<body>
<script language="javascript" type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
NOTE : PRINT MESSAGE BY USING EXTERNAL CSS
[1].USE OF DIFFERENT VARIABLE USING JAVASCRIPIT
<html>
<body>
<h1>Demo: JavaScript Variables </h1>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<script>
var myvariable = 1; // numeric value
document.getElementById("p1").textContent = myvariable;
myvariable = 'one'; // string value
document.getElementById("p2").textContent = myvariable;
myvariable = 1.1; // decimal value
document.getElementById("p3").textContent = myvariable;
myvariable = true; // Boolean value
document.getElementById("p4").textContent = myvariable;
myvariable = null; // null value
document.getElementById("p5").textContent = myvariable;
</script>
</body>
</html>
[2].JavaScript String
<!DOCTYPE html>
<html>
<body>
<h1>Demo: JavaScript String</h1>
<p id="p1"></p>
<p id="p2"></p>
<script>
var str1 = "Hello World";
var str2 = 'Hello World';
document.getElementById("p1").textContent = str1;
document.getElementById("p2").textContent = str2;
</script>
</body>
</html>
[3].How to declare function in javascripit
<!DOCTYPE html>
<html
<head>
<meta charset="utf-8">
<title>JavaScript how to Add Parameters to a Function</title>
</head>
<body>
<script>
// Defining function
function Sum(num1, num2)
{
var total = num1 + num2;
document.write(total);
}
// Calling function
Sum(6, 20); // Prints: 26
document.write("<br>");
Sum(-5, 17); // Prints: 12
</script>
</body>
</html>
[4].JavaScript how to Add Parameters to a Function
<!DOCTYPE html>
<html
<head>
<meta charset="utf-8">
<title>JavaScript how to Add Parameters to a Function</title>
</head>
<body>
<script>
// Defining function
function Sum(num1, num2)
{
var total = num1 + num2;
document.write(total);
}
// Calling function
Sum(6, 20); // Prints: 26
document.write("<br>");
Sum(-5, 17); // Prints: 12
</script>
</body>
</html>
[5].
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title> JavaScript</title>
</head>
<body>
<p id="great"></p>
<p id="result"></p>
<script>
// Writing text string inside an element
document.getElementById("great").textContent/innerHtML = "Hello World!";
// Writing a variable value inside an element
var x = 10;
var y = 20;
var sum = x + y;
document.getElementById("result").textContent/innerHtML= sum;
</script>
</body>
</html>
JAVA SCRIPIT POPUP BOXES
ALERT
CONFIRM
PROMPT
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Alert</h2>
<button onclick="firstFunction()">Try it</button>
<script>
function firstFunction()
{
alert("Hello\nHow are you?");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function firstFunction()
{
var r = confirm("Confirm something!");
if (r == true) {
x = "OK was pressed";
}
else {
x = "Cancel was pressed";
}
document.getElementById("test").innerHTML = x;
}
</script>
</head>
<body>
<h2>JavaScript Confirm Box</h2>
<button onclick="firstFunction()">Try it</button>
<p id="test"></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function firstFunction()
{
var txt;
var person = prompt("Please enter your full name:", "GEHU");
if (person == null || person == "")
{
t = "User cancelled the prompt.";
} else {
txt = "Hello " + person + "! How are you today?"
}
document.getElementById("test").innerHTML = t;
}
</script>
</head>
<body>
<h2>JavaScript Prompt</h2>
<button onclick="firstFunction()">Try it</button>
<p id="test"></p>
</body>
</html>
