Java Script

Introduction to Java-Script (JS)
What is JS ?
Java Script is a client side scripting language
based on java.
Java scripts is used to make web pages dynamic.
Java script was originally founded by “Netscape”
in 1995-96.
Java script can do almost everything like client-
side code, web server backend code (Node.js),
videogames, server-less functions in the cloud,
editing configuration files, posting comments,
searching and filtering data on web.
S v/s D
What is JS ?
<Script> Tag
How to add JS with HTML ?
Script Tag (one.html)
<html>
<head>
<title>
FIRST JS SCRIPT/ Writing on Web Page
</title>
</head>
<body>
<script>
document.write ("Hello Class CS-V ")
</script>
</body>
</html>
Script Tag (two.html)
<html>
<head>
<title>
SECOND/EXTERNAL JS SCRIPT
</title>
</head>
<body>
<script type="text/javascript" src="src.js">
</script>
</body>
</html>
Script Tag (src,js)
document.write("Hello Class_V using External
File ")
Use of Alert Box (Three.html)
html>
<head>
<title>
Alert Box Example
</title>
</head>
<body>
<script>
alert("Hello Ashish Sharma")
</script>
</body>
</html>
Variable in JS
<html>
<head>
<title>
JS Variable
</title>
</head>
<body>
<script>
var a=10;
document.write (a)
</script>
</body>
</html>
Use of Prompt
<html>
<title> Prompt Box in JS to get Input From User
</title>
<body>
<script>
var decide = prompt ("enter the age here ");
alert(decide)
</script>
</body>
</html>
Adding Number(s)
<html>
<title> Prompt Box in JS to get Inputs from user and to add
them </title>
<body>
<script>
var a = Number(prompt("enter the FIRST NUMBER a "));
var b = Number(prompt("enter the SECOND NUMBER b "));
alert(a+b);
</script>
</body>
</html>
Confirm Box
<html>
<title> Confirm Box </title>
<body>
<script>
var decide;
if (confirm("Do you want to save changes?") == true) {

decide = "Data saved successfully!";
alert(decide)
} else {
decide = "Save Cancelled!";
alert(decide)
}
</script>
</body>
</html>
document.getElementById
Javascript getElementById method is used to select an
HTML element by id value from the DOM (Document).
After selecting the element the method returns the
element as an object.
• Since id in a webpage is unique so it is a very useful

method to target a specific element quickly and to fetch
its value.
• If there is no element with the id value then the
method returns null.
• If there are multiple elements with the same id value
(even if it is invalid) then the method returns the first
element.
Syntax:-
document.getElementById(id);
Here the “id” is the element is passed as a

parameter to the method as a string.
e.g.
var a = document.getElementById('id1').value;
var b = document.getElementById('id2').value;
<HTML>
<TITLE> selecting element using getElementById() </TITLE>
<body>
<p id="box"> Here this is the P Box with id="box"</p>
<script>
var element = document.getElementById("box");
element.style.background = "lightblue";
</script>
</body>
</html>
Functions in JS
Writing Functions:-
KEYWORD function function_name()
{
lines of code to be executed
}
Calling Functions:-
functioname();
Functions
<html>
<head>
<title>MY FIRST Function with JS</title>
<script type="text/javascript">
function FIRST()
{
document.write("This is a output of first function ");
}
FIRST();
</script>
</head>
<body>
</body>
</html>
Calling Functions()
function sayHello(name)
{
alert('hello ' + name)
}
sayHello('steve')
Onclick() Event Attribute
Onclick()
Syntax:-
<element
onclick="functionToExecute()">Click</element
e.g.
<button
onclick="functionToExecute()">Click</button>
Functions++
<script>
function getcube()
{
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
<body>
<input type= "placeholder" value="" id ="number">
</body>
</head>
</html>
Functions++
<script>
function getcube()
{
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
<body>
<input type= "placeholder" value="" id ="number">
<input type= "Submit" onclick="getcube()">
</body>
</head>
</html>
Example
<html>
<title>Form Validation" </title>
<script>
function validateform(){
var Uname=document.form.Uname.value;
var Upassword=document.form.Upassword.value;
if (Uname==""){
alert("Name can't be blank");
return false;
}else if(Upassword.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="form" method="post" action="abc.jsp" onsubmit="return validateform()" >
Name: <input type="text" name="Uname"><br/>
Password: <input type="password" name="Upassword"><br/>
<input type="submit" value="register">
</form>
</body>
</html>
HTTP Methods (Get/Post)
E.g.
E.g.
JS Events
• onchange
An HTML element has been changed
• onclick
The user clicks an HTML element
• onmouseover
The user moves the mouse over an HTML element
• onmouseout
The user moves the mouse away from an HTML element
• onkeydown
The user pushes a keyboard key
• onload
The browser has finished loading the page
JS Array and operations
• var a = ["Stef", "Jason"]; //
Stef, Jason
• a.push("Brian"); // Stef,
Jason, Brian
• a.unshift("Kelly"); // Kelly,
Stef, Jason, Brian
• a.pop(); // Kelly, Stef, Jason
• a.shift(); // Stef, Jason
• a.sort(); // Jason, Stef
JS Array & Operations
JS Objects
Objects in java-script are a group of different
data types put together as “key-value” pairs. The
“key” part of the object is nothing but the object
properties and values are the real world values
to be considered.
JS Objects (using Literal)
stu={rollno:100,name:"Rajat Kumar",Class:4}
document.write(stu.rollno+" "+stu.name+"
"+stu.Class);
JS Objects (using instance)
var Car=new Object();
Car.id=101;
Car.model="E Class";
Car.price=5000000;
document.write(Car.id+" "+Car.model+"
"+Car.price);
JS Objects (using constructor)
function Vehicle(id,type,Price){
this.id=id;
this.type=type;
this.price=Price;
}
e=new Vehicle(100,"C Class",3000000);
document.write(e.id+" "+e.type+" "+e.price);
JS Objects
ECMAScript
JavaScript ES6 (also known as ECMAScript
2015 or ECMAScript 6) is the newer version of
JavaScript that was introduced in 2015
ECMAScript 2015 or ES6 is a significant update to the
JavaScript programming language. It is the first major
update to the language since ES5 which was
standardized in 2009. Therefore, ES2015 is often
called ES6.
ECMAScript is the standard that JavaScript
programming language uses. ECMAScript provides
the specification on how JavaScript programming
language should work.
JS var/let/const
JS var/let/const
JS Arrow Functions
Arrow functions allows a short syntax for writing
function expressions.
You don't need the function keyword,
the return keyword, and the curly brackets.
Instead of the function keyword, arrow function

uses an arrow (=>) made up of an equal sign and
a greater-than character e.g.
JS Arrow Functions
JS Arrow Functions
JS Arrow Functions

Java Script

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Java Script

Uploaded by

Copyright:

Available Formats

Introduction to Java-Script (JS)

if (confirm("Do you want to save changes?") == true) {

• Since id in a webpage is unique so it is a very useful

Here the “id” is the element is passed as a

Instead of the function keyword, arrow function

You might also like