Introduction to Javascript
Javascript is a programming language to create interactive webpages.
Interactive web pages are used to interact with the users.
Javascript runs in the web browser.
Javascript is used on the client-side.
Javascript is dynamically typed, meaning variables don't have a fixed
type.
Javascript is interpreted (executed line-by-line) programming language.
JavaScript is interpreted by the browser, meaning that the code is
executed directly without needing a separate compilation step.
Javascript is used to handle client-side validations. For example, user
details are entered properly or not like first name, middle name, last
name, Date of Birth, Phone number, email ID etc…
JavaScript is used to handle events, like when a user clicks a button,
submits a form etc..
JavaScript is both procedure oriented programming and object oriented
programming.
Hello World program
File name: [Link]
<!DOCTYPE html>
<html>
<head>
<title> Javascript example1 </title>
<script>
alert("Hello World!");
</script>
</head>
Note: The alert() method displays an alert box over the current window with
the specified message.
Output:
Click on Ok button
In the above “Hello world” program <script> tag is written under head tag,
we can also write <script> tag under body tag as follows:
<!DOCTYPE html>
<html>
<head>
<title> Javascript example1 </title>
</head>
<body>
<script>
alert("Hello World!");
</script>
</body>
</html>
Output:
In the above program, we used “alert()” method to print “hello world”
message and we can also use “[Link]()” method also to print the
message:
Note: [Link]() is used to print the content to the HTML document.
To Understand “document”, we have to see DOM (Document Object Model)
The HTML DOM (Document Object Model)
HTML DOM is a programming interface that represents the structure of a web
page.
Imagine your webpage as a tree
The document is the root.
HTML tags like <html>, <head>, and <body> are branches.
Attributes, text, and other elements are the leaves.
In the above program, we used “alert()” method to print “hello world”
message and we can also use “[Link]()” method also to print the
message:
<!DOCTYPE html>
<html>
<head>
<title> Javascript example1 </title>
</head>
<body>
<script>
[Link]("Hello World!")
</script>
</body>
</html>
Output:
Variables in Javascript
A variable holds the value.
Syntax of variable:
var <variable-name> = <value>
var a = 10
Note: for any type of variable, the above syntax is same.
Note: At the end of statement, semicolon is optional
Example1: Write a javascript program to display one integer value
Design
Program: [Link]
<!DOCTYPE html>
<html>
<head>
<title> Displaying one integer values </title>
</head>
<body>
<p style="font-family: arial black; font-size:40px;" id="display"></p>
<script>
var a=10
[Link]("display").innerHTML = "a="+a
</script>
</body>
</html>
Output:
Example2: Write a javascript program to display two integer values
Design:
Program:[Link]
<!DOCTYPE html>
<html>
<head>
<title> Displaying two integer values </title>
</head>
<body>
<p style="font-family: arial black; font-size:40px;" id="display"></p>
<script>
var a=10
var b=20
[Link]("display").innerHTML = "a="+a+"<br>b="+b
</script>
</body>
</html>
Output:
Example3: Write a javascript program to display two float values
Design:
Program: [Link]
<!DOCTYPE html>
<html>
<head>
<title> Displaying two float values </title>
</head>
<body>
<p style="font-family: arial black; font-size:40px;" id="display"></p>
<script>
var a=11.5
var b=12.5;
[Link]("display").innerHTML = "a="+a+"<br>b="+b
</script>
</body>
</html>
Output:
Example4: Write a javascript program to display two strings
Design:
Program: [Link]
<!DOCTYPE html>
<html>
<head>
<title> Displaying two strings </title>
</head>
<body>
<p style="font-family: arial black; font-size:40px;" id="display"></p>
<script>
var a="Javascript"
var b="Programming"
[Link]("display").innerHTML = "a="+a+"<br>b="+b
</script>
</body>
</html>
Output:
Example5: Write a javascript program to display Student ID, Student Name,
Student Phone Number, and Student Email ID
Design
Program: [Link]
<!DOCTYPE html>
<html>
<head>
<title> Displaying student details </title>
</head>
<body>
<p style="font-family: arial black; font-size:40px;" id="display"></p>
<script>
var studentid=101
var studentname="Ravi"
var studentphone=9988776655
var studentemail="ravi123@[Link]"
[Link]("display").innerHTML = "Student
ID:"+studentid+"<br>Student Name:"+studentname+"<br>Student
Phone:"+studentphone+"<br>Student Email ID:"+studentemail
</script>
</body>
</html>
Output
Example6: Write a javascript program to display Employee Details like Emp
ID, Emp Name, and Emp Salary
Design:
Program: [Link]
<!DOCTYPE html>
<html>
<head>
<title> Displaying Employee Details </title>
</head>
<body>
<p style="font-family: arial black; font-size:40px;" id="display"></p>
<script>
var empid=1
var empname="Rani"
var empsalary=10000
[Link]("display").innerHTML = "Emp
ID:"+empid+"<br>Emp Name:"+empname+"<br>Emp Salary:"+empsalary
</script>
</body>
</html>
Output:
Example7: Write a javascript program to add two integers and display its
result
Design:
Program: [Link]
<!DOCTYPE html>
<html>
<head>
<title> Addition of two numbers </title>
</head>
<body>
<p id="addition" style="font-family: arial black; font-size:20px"></p>
<script>
var a=10
var b=20
var c=a+b
[Link]("addition").innerHTML="Addition of two
numbers:"+c
</script>
</body>
</html>
Output:
Example8: Write javascript program to add three float numbers
Design
Program: [Link]
<!DOCTYPE html>
<html>
<head>
<title> Addition of three float numbers </title>
</head>
<body>
<p id="display" style="font-family:verdana; font-size:40px;"></p>
<script>
var a=10.25
var b=11.50
var c=12.75
var d=a+b+c
[Link]("display").innerHTML="Addition of three float
numbers:"+d
</script>
</body>
</html>
Output:
Example9: Write javascript program to accept a string from the user and
display it.
Design
Program: [Link]
<!DOCTYPE html>
<html>
<head>
<title> Accepting string </title>
</head>
<body>
<label> Enter any one string </label>
<input id="textbox1" type="text"><br><br>
<input type="submit" value="Display" onclick="show()">
<p id="stringdisplay" style="font-family: arial black; font-size: 15px;"></p>
<script>
function show()
{
var a=[Link]("textbox1").value
[Link]("stringdisplay").innerHTML = "Entered String is: "+a
}
</script>
</body>
</html>
Note: var a=[Link]("textbox1").value This line can also
be written as: var a=[Link]
Output:
The above javascript program can be written with <button> tag also as
follows:
<!DOCTYPE html>
<html>
<head>
<title> Accepting string </title>
</head>
<body>
<label> Enter any one string </label>
<input id="textbox1" type="text"><br><br>
<button onclick="show()">Display</button>
<p id="stringdisplay" style="font-family: arial black; font-size: 15px;"></p>
<script>
function show()
{
var a=[Link]
[Link]("stringdisplay").innerHTML = "Entered String is: "+a
}
</script>
</body>
</html>
Output