What is JavaScript
JavaScript (js) is a light-weight object-oriented programming language which is used by
several websites for scripting the webpages. It is an interpreted, full-fledged programming
language that enables dynamic interactivity on websites when applied to an HTML
document. It was introduced in the year 1995 for adding programs to the webpages in
the Netscape Navigator browser. Since then, it has been adopted by all other graphical
web browsers. With JavaScript, users can build modern web applications to interact
directly without reloading the page every time. The traditional website uses js to provide
several forms of interactivity and simplicity.
Features of JavaScript
There are following features of JavaScript:
1. All popular web browsers support JavaScript as they provide built-in execution
environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus,
it is a structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
4. JavaScript is an object-oriented programming language that uses prototypes
rather than using classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS,
etc.
8. It provides good control to the users over the web browsers.
History of JavaScript
In 1993, Mosaic, the first popular web browser, came into existence. In the year
1994, Netscape was founded by Marc Andreessen. He realized that the web needed
to become more dynamic. Thus, a 'glue language' was believed to be provided to
HTML to make web designing easy for designers and part-time programmers.
Consequently, in 1995, the company recruited Brendan Eich intending to implement
and embed Scheme programming language to the browser.
But, before Brendan could start, the company merged with Sun Microsystems for adding Java
into its Navigator so that it could compete with Microsoft over the web technologies and platforms.
JavaScript Example
Javascript example is easy to code. JavaScript provides 3 places to put the JavaScript code:
within body tag, within head tag and external JavaScript file.
The script tag specifies that we are using JavaScript.
The text/javascript is the content type that provides information to the browser about the data.
The [Link]() function is used to display dynamic content through JavaScript. We will learn
about document object in detail later.
Places to put JavaScript code
1. Between the body tag of html
2. Between the head tag of html
3. In .js file (external javaScript)
JavaScript Example : code between the body tag
In the above example, we have displayed the dynamic content using JavaScript. Let’s
see the simple example of JavaScript that displays alert dialog box.
<html>
<body>
<script type="text/javascript">
alert("Hello Javatpoint");
</script>
</body>
</html>
2) JavaScript Example : code between the head tag
Let’s see the same example of displaying alert dialog box of JavaScript that is contained
inside the head tag.
In this example, we are creating a function msg(). To create function in JavaScript, you
need to write function with function_name as given below.
To call function, you need to work on event. Here we are using onclick event to call msg()
function.
EXAMPLE
<html>
<head>
<script type="text/javascript">
1. function msg(){
alert("Hello Javatpoint");
}
</script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
External JavaScript file
We can create external JavaScript file and embed it in many html page.
It provides code re usability because single JavaScript file can be used in several html
pages.
An external JavaScript file must be saved by .js extension. It is recommended to embed
all JavaScript files into a single file. It increases the speed of the webpage.
Let's create an external JavaScript file that prints Hello Javatpoint in a alert dialog box.
EXAMPLE
<html>
<head>
<script type="text/javascript" src="[Link]"></script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
LOGIN PROJECT
<! DOCTYPE html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
font-family:Arial,Helvetica,sana-serif;
color:red;
}
.container{
width:100%;
height:100vh;
background-image: url([Link]);
background-position:center;
background-size:cover;
display:flex;
align-items:center;
}
.sub-container{
width:30%;
height:75vh;
margin-left:15%;
border-radius:15px;
background-color:yellow;
box-shadow:3px 3px 50px;
background-color:pink;
background-position:93%;
background-size:50%;
background-repeat:no-repeat;
}
.left-container{
width:100%;
}
.left{
width:40%;
margin-top:65px;
margin-left:70px;
}
.login{
font-size:18px;
}
.a heading{
margin-top:25px;
color:#29c5f6;
}
input{
display:block;
width:90%;
margin-bottom:25px;
padding:7px;
font-size:18px;
outline:none;
}
.f-password{
margin:25px;
cursor:pointer;
color:green;
}
.f-password:hover{
color:orange;
}
.s-button{
border:none;
width:95%;
padding:10px;
background-color:skyblue;
color;white;
margin-bottom:25px;
font-size:18px;
cursor:pointer;
}
.s-button:hover{
background-color:gray;
}
.t-button{
font-size:18px;
color:skyblue;
margin-left:5px;
cursor:pointer;
}
.t-button{
color:gray;
}
.right-container{
width:100px;
display:none;
}
.right{
width:40px;
margin-top:65px;
margin-left:70px;
}
.n-new{
font-size:18px;
}
</style>
</head>
<body>
<div class="container">
<div class="sub-container" id="signIn">
<div class="left">
<h1 class="a-heading">SING IN</H1>
<form class="login">
<input type="email" placeholder="Email">
<input type="password" placeholder="password">
<p class="f-password">forgot password?</p>
<button type="submit"class="s-button">SIGN IN</button>
<p class="n-new Member<i class="t-button" aria-
hidden="true"onclick="showSignup()"sign up now</i></p>
</form>
</div>
</div>
</div class="right-container" id="signup">
<div class="right">
</div>
</div>
</div>
</div>
<script>
var signin = [Link]('signIn');
function showSignu()
{
[Link]= "none";
[Link] = "block";
}
function hidesignup(){
[Link]="block";
[Link]="none";
}
</script>
</body>
</html>