Introduction of Java Script
JavaScript ek programming language hai jo mainly websites ko interactive banana ke liye
use hoti hai. Easy language me kaha jaye to ;
HTML se website ka structure banta hai (jaise ghar ka skeleton).
Css se uska design aur look banta hai ( jaise panit,decoration).
JavaScript se usme jaan aati hai, matlab website chalti hai, react karti hai, button
click karne pe kuch hota hai, form submit hota hai, etc.
Example
agar tum ek button banao HTML me aur usko css se design karo to wo sirf sundar
button hoga.
Lekin agar tum Javascript use kro to button pe click karne par massege dikh sakte
hai.
<button onclick="alert('Hello!')">Click Me </button>
Simple words me:
JavaScript = Website ka brain .
Ye decide karta hai ki user ke action per kya hoga.
Output from JavaScript
JavaScript is a Programming language.
JavaScript is a Client Side Scripting Language.
What is Scripting ?
scripting language means story writer language of product development ex- web app ,
desktop app , android app etc.
There are two types of scripting
1. Client Side ( Executes in browser [ JavaScript ] )
2. Server Side ( Executes in Server [ PHP ] )
SCRIPTING TYPE OF JAVASCRIPT
1. Internal Scripting or
<head> or <body>
<script> write your JavaScript code..</script>
<head> or <body>
2. External Scripting
<head> or<body>
<script src="[Link]"></script>
</head>or</body>
What is Data ?
Any information is called a data ex : - number , text , word , audio , video or any file.
How to get any output (result) in JavaScript
[Link]()
if you want to display your result in a dialog box (Popup box) so you have to use
[Link]() method .
[Link]()
if you want to display your result in your webpage without using any html tag so you have
to use [Link]() method .
[Link]()
if you want to display your result in the console window of your browser so you have to
use [Link]() method .
innerHTML
if you want to display your result with the help of html tag in your webpage so you have to
use innerHTML method .
LET`S CREATE A BASIC PROGRAM
1. write a program to print STP Computer Education a dialog box.
<body>
<script>
[Link]("STP Computer Education");
</script>
</body>
Note:-
Letter ex- a , b , c = every alphabet is known as character in the respect of programming.
Words ex- stp , css , apple = every words are known as string in the respect of
programming.
Let`s know some usefull symbol name
( ) Parenthesis
[ ] square brackets or box brackets
{ } braces or curly brackets
< > angle brackets
‘ ’ single quote
“ ” double quote
: colon
; semi colon
/ forward slash
\ backward slash
& and
- hyphens
_ underscore
= assign
== equal to
* astric
What is Programming?
The steps that you take to archive any result will be programming.
House
Institute
interpreter processer
end code browser translate in load in ram code ko Output
bynery code samajhta he
You write your statement in English language and your machine understands bynery code
(low level language )
Aap code ko English me Likhte ho wah code pehle browser me jata hai fir interpreter
dwara code ko bynery code me translate kiya jata he .
Then bynery code me translate hone ke baad wo code jake aapke ram me load hota he.
after that aapka preprocesser us code ko samajhne ki koshis karta he .Pre processer aapki
statement ko line by line samajhta hai. statement ko end karne ke liye aap (;) terminater ka
use karenge
jab aap terminator ka use karte hai to processer ko pata chalta hai ki aapka statement end
ho gaya hai.
jab prosesser aapki sabhi statement ko read kar leta hai to wo apne according output de
deta hai .
Java Keywords
keywords aapke interpretor ko aapki instruction ya aapke method ka meaning samjhane
ka kam karta hai.
abstract Argument Await* Boolean
break byte case catch
char Class* const Continue
Double Else Enum* eval
Export* Extends* false Final
What is function?
jese jab ham window open karte hi code execute ho jata he par me chahti hu ki code
window khulte hi execute na ho jab me chahu tab ye tab me is code ko run kar saku. uske
liye aap is code ko fuction me daal doge.
function ek block he jo aapki instruction ko lock karne ka kam karta hai.
<html>
<head>
<meta lan="en-US">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
function stp ()
{
[Link] ("amit Kumar");
}
</script>
<button onclick="stp()">click <button>
</body>
</html>
apne man mutabik instruction ko kab work karwana ho tab aap function ka use karte ho
JavaScript Functions
functions ka use ham apne statement ya instructions ko close karne ke liye
karte hai. close means usko gherne ke liye ya usko block karne ke liye karte
hai. taki jab ham webpage ko run kare to function me likhi hui instruction
execute na ho.
[Function is a group of statement that together perform a task And it works
when you call it ]
function ko kese pehchana jaye -kisi ki word ke aage ()perenthises open
hokar close hota hai to wo function hota hai.
There are two types of functions:
Built in function (Predefine Function)
their work is already sure and these can be called just. You can't make
predefined function only you can
[Link] ("amit Kumar");
"alert" is a predefine function jo aapko java pehle se deta hai.
kisi function ko call karne ke liye pehle us function ka naam likhte hai or () open
close karte hai
window is a keyword ,
window ka use isliye karte hai window aapki location ko darshane ka kam kar v
ta hai. jese alert function hai ye browser me execute ho but window me alert
hota hai.
Agar aap [Link] , [Link] ya [Link] ka use bina script tag
ke karna chahte ho to aapko mouse event ka use karna hoga,
html>
<head>
<meta lan="en-US">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
function mycolor ()
{
[Link]="yellow";
}
function mywebsite ()
{
open("[Link]
}
</script>
<button onclick="mycolor()">click <button>
<button onclick="mywebsite()">click <button>
</body>
</html>
Mouse Events
Onclick – means jab ham mouse se click kare
Onchange – jab me kisi button pe mouse se click karke fir use chhodkar bahar
kahi click karu to kya ho.
onmouseover - matlab jab me button ke upper mouse le jau to kya ho
onmouseout - jab mouse button ke upper se hatau tab kya ho.
These are the basic mouse event.
mouse event ka use karenge predefine function ko call karne ke liye.
<html>
<head>
<meta lan="en-US">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button onclick="[Link]('STP computer Education')">click me</button>
</body>
</html>
ham kisi bhi double code ke andar dobara double code nahi laga sakte isliye ham "stp
computer eduxation ko "ko double code me na likh kar single code me likhenge
Onblur : jab aap input box ya kisi field se bahar click karte ho tab ye event
trigger hota hai. Matlab focus hat te hi onblur chalta hai.
<input type="text" onblur="alert('Swati' +'Ahirwar')">
onfocus :- jab aap kisi input ya kisi field par click karke cursor dalte ho. tab ye
event trigger hota hai. Matlab focus aate hi onfocus chalta hai.
<input type="text" id="input2" onfocus="alert()">
Onblur & onfocus Code :
<html>
<head>
<meta lan="en-US">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Onblur</title>
<body >
<script>
function upper()
{
var x=[Link]("input1");
[Link]=[Link]();
}
function lower()
{
var x=[Link]("input2");
[Link]=[Link]();
}
</script>
<input type="text" id="input1" onblur="upper()">
<input type="text" id="input2" onfocus="lower()">
</body>
</html>
Onload :- jab aap webpage pe kisi object ko late ho or aap dekhna chahte ho ki
wo object webpage me load hua he ya nahi. agar object ya image anything
webpage me properly load ho jata hai tab yeh event trigger hota hai.
<script>
function image_load()
{
alert("image upload succesfully");
}
</script>
<img src="[Link]" onload="image_load()" >
</body>
Onerror :- it is totally opposite of onload event. jese jab object properly load
hota tha to onload event kam karta hai. wese hi agar object ya image properly
load nahi hota tab onerror event chalta hai.
<script>
function image_unload()
{
alert("image has been not loaded properlly");
}
</script>
<img src="[Link]" onerror="image_unload()">
</body>
Onload & onerror event code :
<html>
<head>
<meta lan="en-US">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Onblur</title>
<body >
<script>
function image_load()
{
alert("image upload succesfully");
}
function image_unload()
{
alert("image has been not loaded properlly");
}
</script>
<img src="[Link]" onload="image_load()" onerror="image_unload()">
</body>
</html>
abhi hamne 3 function sikhe
alert()
Write()
Log()
Close() – This function use for close the window (ye sirf iska intro tha )
<button onclick="[Link]()">Click here</button>
<!-- jis word ko execute nahi karane chate usko comment define kar denge -->
open() - jab kisi button pe click karke new window kholni ho .
<button onclick="[Link]('[Link]')">click me</button>
print() - print function ka use hota hai kisi bhi document ko print karna.
<body>
<h1>STP Computer Education</h1>
<button onclick="[Link]()">click me</button>
</body>
Find Cube
[Link]
[Link] se ham input se koi deta utha sakte hai.
<body>
<script>
function cube() {
var number=document getElementById("number").value;
[Link]("cube of" +number + "=" +Number*number*number);
</script>
Enter No:<input type="text" id="number" name="number"/>
<button type="button" onclick="cube()">Find Cube</button>
Code:
<html>
<head>
</head>
<body>
<script>
function cube() {
var a=[Link]("value").value
[Link]("cube of " +a +" = " +a*a*a);
}
</script>
<input type="text" id="value">
<button type="button" onclick="cube()">Cube</button>
</body>
</html>
User Define Function
user define function ko ham khud banate hai
<html>
<head>
</head>
<body>
<h1>What is your name?</h1>
<button> Click here to know your name</button>
<script>
function stp()
[Link]("STP Computer Education");
<script>
</body>
</html>
job hi function ham banate hai or usme jo statements likhte hai use function
definition kehte hai.
jo function ham khud banate hai wahi user define function hota hai.
Function Defination
jab aap function ko banate ho jese function ka name dena {} open or close karna
is it called function definition.
Variables
Variable ek container(box) ki tarah hota hai. jisme hame koi bhi data (jese number,
text, True/false Ect.) store karke baad me use kar sakte hai. jese kisi khas data ko
yaad rakhne ke liye ham variables ka use karte hai
JavaScript me variable hame data ko naam dekar rakhne aur bar-bar use karne ki
suvidha deta hai.
Variable Declare karne ke tarike :
var a;
var a=12;
let a=12;
const a = 12;
Var -
purana trika hai (ES5 se pehle)
Function-scoped hota hai ( block-scoped nahi)
Function scoped means aap ise kisi function ke andar use kar sakte ho.
Let –
new tarika hai (ES6 se aaya)
block – scope hota hai. ({} ke andar manya hota hai.
jab hame variable ka maan change ho tab use karte hai.
Const
constant variable
block-scoped hota hai.
value ek bar assign hone ke baad badly nahi ja sakti.
<script>
var name="Swati";
var age=21;
let subject="[Link]";
const college="SHIM";
[Link]("Name:" + name + "<br>");
[Link]("Age:" + age + "<br>" );
[Link]("Subject:" + subject + "<br>");
[Link]("College Name:" + college );
</script>
Data Types
Jo data aap use karte ho wo data kis type ka hai.
Ham jante hai ki variable ka use data ki store karne ke liye hota hai. Aur data ke
alag alag types hote hai.
There are 6 types of Data
1. String – koi bhi naam ya character jiski koi Equation value nahi hai.
wo string hai. Ise double code ("") ke andar evaluate kiya jata hai.
2. Number – koi bhi number 1 2 3 chahe wo number positive ho ya negative.
3. Undefine – koi value jise define na kiya gaya ho.
Example : Var a; (isme variable ki value ko define nahi kiya gaya ki a ki value
kya hogi.)
4. Boolean – Is data type ka use true ya false value ko store karne ke liye kiya jata
hai.
5. Array – array ek special type ka variable hai. abhi hamne dekha ki variable me
ham keval ek hi value ko store kar rahe the. (jese var x=45;)
jaha ham variable me multiple value ko store karwa sakte ho.
Matlab array data type ka use variable me ek sath kai value ko use karne me
karte hai
Example : Var a=[ "rajesh","Mahesh","Suresh"];
iska symbol [ ] hai
6. Object – Heading ya terms ke sath values store karate hai.
array me ham same category ki value use karte the aur object me aap different
category ki value use kar sakte hai.