जावास्क्रिप्ट एक बहुत प्रसिद्ध प्रोग्रामिंग भाषा है जिसे मूल रूप से लगभग बीस साल पहले वेब पेजों को आकर्षक बनाने के मकसद से शुरू किया गया था. यह वेब डेवलपर स्किल का एक अनिवार्य हिस्सा है. अगर सरल शब्दों में कहा जाये तो वेब डेवलपर बनने के लिए तीन मुख्य भाषाओं की आवश्यकता होती है जैसे की एचटीएमएल, सीएसएस और जावास्क्रिप्ट.
जावास्क्रिप्ट को सीखना बहुत आसान माना जाता है लेकिन इसका मास्टर बनना थोड़ा कठिन होता है. क्योंकि इसका उपयोग विभिन्न प्रकार के उद्देश्यों के लिए किया जाता है जो केवल वेबसाइट की कार्यक्षमता बढ़ाने से लेकर कूल गेम और वेब-आधारित सॉफ्टवेयर चलाने तक का काम करता है.
इसका अधिकतर उपयोग Game और Mobile Application Development के लिये किया जाता है. JavaScript का फायदा यह है कि ये सभी Web Browsers को समर्थन करती है.
JavaScript के जरिये हम Dynamic Web Page Create कर सकते है इसके माध्यम हम Dynamically Web Page के Content को Update कर सकते है.
JavaScript के जरिये हम Web Page को Interactive Look दे सकते है.
JavaScript का Execution बहुत तेज होता है क्यूंकि यह Client Side पर Execute करता है.
JavaScript के जरिये हम उपयोगकर्ता को Web Page पर Logical या Mathematical Operations Perform करने की Facility Provide करा सकते है.
JavaScript का ज्यादातर उपयोग Form Validation मे किया जाता है क्यूंकि JavaScript का Interaction Server से बहुत कम होता है.
जावास्क्रिप्ट एक हल्की प्रोग्रामिंग भाषा है और इसका उपयोग वेब पेजों को इंटरैक्टिव बनाने के लिए किया जाता है. यह HTML में डायनामिक टेक्स्ट सम्मिलित कर सकता है. जावास्क्रिप्ट को ब्राउज़र की भाषा के रूप में भी जाना जाता है. जावास्क्रिप्ट एक गतिशील कंप्यूटर प्रोग्रामिंग भाषा है. यह हल्के और सबसे अधिक वेब पृष्ठों के एक भाग के रूप में उपयोग किया जाता है जिसके कार्यान्वयन से क्लाइंट-साइड स्क्रिप्ट को उपयोगकर्ता के साथ बातचीत करने और गतिशील पृष्ठ बनाने की अनुमति मिलती है. यह ऑब्जेक्ट-ओरिएंटेड क्षमताओं के साथ एक व्याख्या की गई प्रोग्रामिंग भाषा है.
जावास्क्रिप्ट को पहले लाइवस्क्रिप्ट के रूप में जाना जाता था. क्लाइंट-साइड जावास्क्रिप्ट भाषा का सबसे सामान्य रूप है. ब्राउज़र द्वारा व्याख्या की जाने वाली कोड के लिए स्क्रिप्ट को HTML डॉक्यूमेंट द्वारा शामिल या संदर्भित किया जाना चाहिए.
इसका मतलब है कि एक वेब पेज को स्थिर HTML की आवश्यकता नहीं होती है लेकिन इसमें ऐसे प्रोग्राम शामिल हो सकते हैं जो उपयोगकर्ता के साथ बातचीत करते हैं ब्राउज़र को नियंत्रित करते हैं और HTML सामग्री को गतिशील रूप से नियंत्रित करते हैं. जावास्क्रिप्ट क्लाइंट-साइड सिस्टम ट्रेडिशनल सीजीआई सर्वर-साइड स्क्रिप्ट पर कई फायदे प्रदान करता है. उदाहरण के लिए यदि उपयोगकर्ता किसी प्रपत्र फ़ील्ड में मान्य ई-मेल पता दर्ज किया है, तो आप जावास्क्रिप्ट का उपयोग कर सकते हैं.
इसका अधिकतर उपयोग Game और Mobile Application Development के लिये किया जाता है. JavaScript का फायदा यह है कि ये सभी Web Browsers को समर्थन करती है.
<!DOCTYPE html>
<html>
<head>
<title>Javascript First Example</title>
</head>
<body>
<h2>Javascript First Example</h2>
<p id="demo">You are now learning Tutorialsroot</p>
<button type="button" onclick='document.getElementById("demo").innerHTML
= "Hello Tutorialsroot!"'>Click Me!</button>
</body>
</html>
JavaScript मे बहुत से keyword का उपयोग किया गया है जिनकी सूची आप नीचे Table मे देख सकते है.
Keywords | ||
---|---|---|
var | function | if |
else | do | while |
for | switch | break |
continue | return | try |
catch | finally | debugger |
case | class | this |
default | false | true |
in | instanceOf | typeOf |
new | null | throw |
void | width | delete |
JavaScript Variables मे बहुत से Data Types को Catch कर सकते है जैसे Numbers, Strings, Objects आदि. कई ऐसी Programming Language है जिसमे जिस Type का Value आप Variable मे Store कराना चाहते है उसी Data Type का Variable भी Declare होना चाहिए.
उदाहरण के लिए C Programming Language मे यदि आप Variable मे कोई Number Store कराना चाहते है तो आपको Variable का Data Type Int Declare करना होगा आप एक Number को Store कराने के लिए Char Data Type का Variable उपयोग नहीं कर सकते.
लेकिन JavaScript मे ऐसा नहीं है JavaScript मे आप Same Variable मे हर तरह के Data Type की Value को Store करा सकते है.
JavaScript मे दो प्रकार के Data Types होते है.
Primitive Data Type
Non-primitive (reference) Data Type
Javascript मे पांच के प्रकार Primitive Data Type होते है जैसे String, Number, Boolean or Null or Undefined. एक String "New", "hello" आदि जैसे Character Sequence को Represent करने के लिए प्रयोग किया जाता है संख्या उदाहरण के लिए कोई भी Value हो सकती है - 10,20,30,40 आदि.
Boolean Data Type का उपयोग किसी भी वास्तविक या गलत Representation के लिए किया जा सकता है. Undefined Data Type मे कोई भी अनिर्धारित Value हो सकती है. और Null एक Value को Represents करता है.
Data Type | Description |
---|---|
String | String Characters के Sequence को Represents करता है जैसे "New", "hello". |
Number | Number Numeric Values को Represents करता है जैसे 200. |
Boolean | Boolean Values को Represents करता है की यह Values False हे या True. |
Undefined | यह Undefined Values को Represents करता है. |
Null | Null Values को Represents करता है और यह Check करता है की कोई भी Value नही है. |
<!DOCTYPE html>
<html>
<head>
<title>Primitive Data Type Example</title>
</head>
<body>
<h2>Primitive Data Type Example</h2>
<p id="demo"></p>
<script type="text/javascript">
document.getElementById("demo").innerHTML =
typeof "john" + "<br>" +
typeof 3.14 + "<br>" +
typeof true + "<br>" +
typeof false;
</script>
</body>
</html>
Non-primitive Data Type Object, Array और RegExp भी हो सकते है. Object एक Instance को Represents करता है है जिसके माध्यम से हम Numbers का उपयोग कर सकते है.
Array समान प्रकार की Values को Represents करने के लिए उपयोग किया जाता है. जबकि RegExp एक Regular Expression को Represents करता है.
Data Type | Description |
---|---|
Object | Object एक Instance को Represents करता है जिसके माध्यम से हम Numbers का उपयोग कर सकते है. |
RegExp | RegExp एक Regular Expression को Represents करता है. |
Array | Array समान Values के Group को Represents करता है. |
<!DOCTYPE html>
<html>
<head>
<title>Non-primitive Data Type Example</title>
</head>
<body>
<h2>Non-primitive Data Type Example</h2>
<p id="demo"></p>
<script type="text/javascript">
var myVar = 100;
myVar = true;
myVar = null;
myVar = undefined;
myVar = "Steve";
alert(myVar);
</script>
</body>
</html>
जावास्क्रिप्ट में वेरिएबल केवल स्टोरेज लोकेशन का एक नाम होता है. जावास्क्रिप्ट में दो प्रकार के वेरिएबल होते हैं लोकल वेरिएबल और ग्लोबल वेरिएबल. आप जो Value Variable मे डालते है तो उस Value के आधार पर JavaScript Variable का Data Type Automatically निर्णय कर लेती है. JavaScript मे Variables Create करना बहुत आसान माना जाता है. इससे पहले की आप Variables Create करे आइये JavaScript मे Variables Create करने के कुछ Rules के बारे मे जान लेते है.
JavaScript मे Variables को बहुत आसानी से Create किया जा सकता है. वेरिएबल्स Create करने के लिए आप Var keyword का उपयोग किया जाता है. JavaScript मे Variables Create करने का Structure आप नीचे देख सकते है.
var varName = value;
Variable का नाम किसी Letter, Underscore या $ sign से शुरू होना चाहिए.
Variables के नाम मे Numbers (1,2,3,4,5,6,7,8,9) भी उपयोग किया जा सकता है.
JavaScript मे Variables Case Sensitive होते है.
जावास्क्रिप्ट में दो प्रकार के वेरिएबल होते हैं लोकल वेरिएबल और ग्लोबल वेरिएबल. इन दोनों वेरिएबल के बारे में आप नीचे विस्तार से देख सकते है
जब आप जावास्क्रिप्ट का उपयोग करते हैं, तो Local Variable होते हैं जो फ़ंक्शन के भीतर परिभाषित होते हैं. उनके पास Local Scope होता है जिसका अर्थ है कि उनका उपयोग केवल उन कार्यों के भीतर किया जा सकता है जो उन्हें परिभाषित करते हैं.
<!DOCTYPE html>
<html>
<head>
<title>Local variable Example</title>
</head>
<body>
<h2>Local variable Example</h2>
<script>
var myVar = "local"; // Declare a local variable
document.write(myVar);
</script>
</body>
</html>
JavaScript Global Variable फ़ंक्शन के बाहर Declared किया जाता है या विंडो ऑब्जेक्ट के साथ Declared किया जाता है. इसे किसी भी फंक्शन से एक्सेस किया जा सकता है.
<!DOCTYPE html>
<html>
<head>
<title>Global variable Example</title>
</head>
<body>
<h2>Global variable Example</h2>
<script>
var data=400;//gloabal variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
}
a();//calling JavaScript function
b();
</script>
</body>
</html>
एक ऑपरेटर एक निश्चित मूल्य या ऑपरेंड में हेरफेर करने में सक्षम होता है. ऑपरेटर्स का उपयोग ऑपरेंड पर विशिष्ट गणितीय और तार्किक गणना करने के लिए किया जाता है. अगर सरल शब्दों में कहा जाये तो एक ऑपरेटर ऑपरेंड का संचालन करता है. जावास्क्रिप्ट संचालकों में वैल्यू की तुलना के लिए उपयोग किया जाता है अंकगणित संचालन आदि करते हैं
Operators को जिन Variables पर लागु किया जाता है या जिन Variables के साथ उपयोग करते है उन सभी Variables को Operands कहा जाता है जैसे कि -
c = a+b;
इस Statement मे a और b Operands है. C भी एक Operand है क्योंकि (=) Operator इस पर Apply हो रहा है.
जावास्क्रिप्ट द्वारा समर्थित विभिन्न ऑपरेटर होते हैं. JavaScript मे Operators को कई भागो मे बाँटा गया है -
Arithmetic Operators
Comparison (Relational) Operators
Bitwise Operators
Logical Operators
Assignment Operators
Arithmetic Operators एक Value या Variable के रूप मे Single Value को वापस कर देते है.
Operator | Description | Example |
---|---|---|
+ | Addition | 2 + 4 |
- | Subtraction | 6 - 2 |
* | Multiplication | 5 * 3 |
/ | Division | 15 / 3 |
% | Modulus | 43 % 10 |
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Arithmetic Operators</title>
</head>
<body>
<script type="text/javascript">
<!--
var a = 43;
var b = 20;
var c = "Test";
var linebreak = "<br />";
document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);
document.write("a - b = ");
result = a - b;
document.write(result);
document.write(linebreak);
document.write("a / b = ");
result = a / b;
document.write(result);
document.write(linebreak);
document.write("a % b = ");
result = a % b;
document.write(result);
document.write(linebreak);
document.write("a + b + c = ");
result = a + b + c;
document.write(result);
document.write(linebreak);
a = ++a;
document.write("++a = ");
result = ++a;
document.write(result);
document.write(linebreak);
b = --b;
document.write("--b = ");
result = --b;
document.write(result);
document.write(linebreak);
//-->
</script>
</body>
</html>
जावास्क्रिप्ट Comparison Operators दो ऑपरेंड की तुलना करता है.
Operator | Description | Example | Result |
---|---|---|---|
== | Equal To | x == y | false |
!= | Not Equal To | x != y | true |
< | Less Than | x < y | true |
> | Greater Than | x > y | false |
<= | Less Than or Equal To | x <= y | true |
>= | Greater Than or Equal To | x >= y | false |
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Comparison Operators</title>
</head>
<body>
<script type="text/javascript">
<!--
var a = 20;
var b = 30;
var linebreak = "<br />";
document.write("(a == b) => ");
result = (a == b);
document.write(result);
document.write(linebreak);
document.write("(a < b) => ");
result = (a < b);
document.write(result);
document.write(linebreak);
document.write("(a > b) => ");
result = (a > b);
document.write(result);
document.write(linebreak);
document.write("(a != b) => ");
result = (a != b);
document.write(result);
document.write(linebreak);
document.write("(a >= b) => ");
result = (a >= b);
document.write(result);
document.write(linebreak);
document.write("(a <= b) => ");
result = (a <= b);
document.write(result);
document.write(linebreak);
//-->
</script>
</body>
</html>
बिटवाइज़ ऑपरेटर ऑपरेंड पर बिटवाइज़ ऑपरेशन करते हैं. बिटवाइज़ ऑपरेटर भी Control Statements मे उपयोग किये जाते है.
Operator | Description | Example |
---|---|---|
& | Bitwise AND | (10==20 & 20==33) = false |
| | Bitwise OR | (10==20 | 20==33) = false |
^ | Bitwise XOR | (10==20 ^ 20==33) = false |
~ | Bitwise NOT | (~10) = -10 |
<< | Bitwise Left Shift | (10<<2) = 40 |
>> | Bitwise Right Shift | (10>>2) = 2 |
>>> | Bitwise Right Shift with Zero | (10>>>2) = 2 |
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Bitwise Operators</title>
</head>
<body>
<script type="text/javascript">
<!--
var a = 3; // Bit presentation 11
var b = 3; // Bit presentation 12
var linebreak = "<br />";
document.write("(a & b) => ");
result = (a & b);
document.write(result);
document.write(linebreak);
document.write("(a | b) => ");
result = (a | b);
document.write(result);
document.write(linebreak);
document.write("(a ^ b) => ");
result = (a ^ b);
document.write(result);
document.write(linebreak);
document.write("(~b) => ");
result = (~b);
document.write(result);
document.write(linebreak);
document.write("(a << b) => ");
result = (a << b);
document.write(result);
document.write(linebreak);
document.write("(a >> b) => ");
result = (a >> b);
document.write(result);
document.write(linebreak);
//-->
</script>
</body>
</html>
Logical Operators का उपयोग दो या अधिक Conditions को Combine करने के लिये किया जाता है.
Operator | Example | Description |
---|---|---|
Logical AND ( && ) | a && b | is true if both a and b are true. |
Logical OR ( || ) | a || b | is true if either a or b is true. |
Logical NOT ( ! ) | !a | is true if a is not true. |
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Logical Operators</title>
</head>
<body>
<script type="text/javascript">
<!--
var a = true;
var b = false;
var linebreak = "<br />";
document.write("(a && b) => ");
result = (a && b);
document.write(result);
document.write(linebreak);
document.write("(a || b) => ");
result = (a || b);
document.write(result);
document.write(linebreak);
document.write("!(a && b) => ");
result = (!(a && b));
document.write(result);
document.write(linebreak);
//-->
</script>
</body>
</html>
Assignment Operators का उपयोग Left Operand Value को Right Operand Value के बराबर करने के लिये किया जाता है.
Operator | Description | Example |
---|---|---|
= | Assign | 10+10 = 20 |
+= | Add and assign | var a=10; a+=20; Now a = 30 |
-= | Subtract and assign | var a=20; a-=10; Now a = 10 |
*= | Multiply and assign | var a=10; a*=20; Now a = 200 |
/= | Divide and assign | var a=10; a/=2; Now a = 5 |
%= | Modulus and assign | var a=10; a%=2; Now a = 0 |
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Assignment Operators</title>
</head>
<body>
<script type="text/javascript">
<!--
var a = 43;
var b = 20;
var linebreak = "<br />";
document.write("Value of a => (a = b) => ");
result = (a = b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a += b) => ");
result = (a += b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a -= b) => ");
result = (a -= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a *= b) => ");
result = (a *= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a /= b) => ");
result = (a /= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a %= b) => ");
result = (a %= b);
document.write(result);
document.write(linebreak);
//-->
</script>
</body>
</html>
Javascript मे Loop बहुत उपयोगी होता है. Loop का प्रयोग हम Code को उसी Line मे बार बार Execute करने के लिए करते है और तब तक Code को Execute करते हैं जब तक कोई एक Condition True हो.
मान ले कि यदि आप अपने Web Page मे Hii MSG को 10 बार Type करना चाहते है तो आप उसको उसी Line को 10 बार Type कर सकते है. लेकिन अगर आप Loop का उपयोग करते है तो आप केवल 2, 3 Line मे पूर्ण हो सकते हैं .
Loop Four प्रकार के होते है.
The For Loop
The While Loop
The Do while Loop
The For in Loop
JavaScript Program मे कोई ऐसा Statement है या Block of Statements है जिसे आप Multiple Times Execute कराना चाहते है तो इस Situation मे आप For Loop का उपयोग कर सकते है. For Loop मे तीन Expressions उपयोग किये जाते है Initialization Expression, Condition Expression और Update Expression.
<script>
for(initialize ; test ; increment/decrement)
{
statement(s);
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript For Loop Example</title>
</head>
<body>
<script type="text/javascript">
for (i=1; i<=10; i++)
{
document.write(i + "<br/>")
}
</script>
</body>
</html>
While Loop मे सबसे पहले Condition Check की जाती है अगर Condition True हो तभी While Loop के Inside Statements को Execute किया जाता है. While Loop के Inside Statements को Execute करने के बाद दोबारा से Condition को Check की जाती है अगर इस बार भी Condition True होती है तो फिर से While Loop के Inside Statements को Execute किया जाता है और यह Process तब तक चलता रहता है जब तक की Condition False ना हो जाये. Condition के False होते ही Loop को Terminate कर दिया जाता है.
अगर Condition पहली बार में ही False हो जाये तब While Loop के Inside Statements को बिना Execute किये ही While Loop को Terminate कर दिया जाता है.
<script>
while (condition)
{
code to be executed
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript While Loop Example</title>
</head>
<body>
<script type="text/javascript">
var i=10;
while (i<=20)
{
document.write(i + "<br/>");
i++;
}
</script>
</body>
</html>
JavaScript Program मे कई ऐसे Statement या Block of Statements होते है जिसे आप Multiple Times Execute कराना चाहते है तो इस Situation मे आप do..while Loop का उपयोग कर सकते है.
Do while Loop एक Block of Code को बार बार तब तक Execute करता रहता है जब तक की Do while Loop मे दी गई Condition True रहती है Condition के False होते ही Loop को Terminate कर दिया जाता है.
<script>
do
{
block of code to be executed
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Do While Loop Example</title>
</head>
<body>
<script type="text/javascript">
document.write("<b>Using do...while loops </b><br />");
var i = 2;
document.write("Even numbers less than 20<br />");
do
{
document.write(i + "<br />");
i = i + 2;
}
while(i<20)
</script>
</body>
</html>
For in Loop का उपयोग Array और Object के साथ काम करने के लिये किया जाता है.
Syntax
<script>
for(index in arrayName)
{
// Code Block
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Do For in Loop Example</title>
</head>
<body>
<script type="text/javascript">
function demo(){
var phone = new Array(5);
phone[0] = "Apple";
phone[1] = "Samsung";
phone[2] = "Sony";
phone[3] = "Xolo";
phone[4] = "Nokia";
phone[5] = "Apple6";
phone[6] = "Apple7";
phone[7] = "Apple8";
for (var i in phone)
{
document.write("phone[" + i + "] = " + phone[i] + "<br/>");
}
}
</script>
<p>Click the button below</p>
<button onclick="demo()">loop: For in</button>
</body>
</html>
एक फ़ंक्शन स्टेटमेंट का एक सेट होता है जो इनपुट्स लेता है और कुछ विशिष्ट गणना करता है और आउटपुट पैदा करता है. यह मूल रूप से एक फ़ंक्शन स्टेटमेंट का एक सेट होता है जो कुछ कार्यों को करता है या कुछ गणना करता है और फिर उपयोगकर्ता को परिणाम देता है.
एक Function किसी भी Program की Value को प्राप्त कर सकता है और Return कर सकता है और इस तरह आप हर बार एक ही Code लिखने और एक Modular Structured Program बनाने की प्रक्रिया को नज़र अंदाज़ कर सकते है.
Javascript Function की सहायता से आप अपने Program को कई कार्यों मे प्राप्त कर सकते है और Function की सहायता से आप अपने Program को बहुत आसानी से Managed कर सकते है. Javascript मे Function Define करना बहुत आसान होता है Javascript मे Function को Define करने के लिए आप Function Keyword का उपयोग करते है.
<script>
function functionName([arg1, arg2, ...argN]){
//code to be executed
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Function Example</title>
</head>
<body>
<script type="text/javascript">
function getname()
{
name=prompt("Enter Your Name");
alert("Welcome Mr/Mrs " + name);
}
</script>
<form>
<input type="button" value="Click" onclick="getname()"/>
</form>
</body>
</html>
Function Arguments मे हम Arguments को पास करके Function को Call कर सकते है.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Function Arguments Example</title>
</head>
<body>
<script type="text/javascript">
function getname(number){
alert(number*number*number);
}
</script>
<form>
<input type="button" value="Click" onclick="getname(4)"/>
</form>
</body>
</html>
जब हम Function को Call करते है तो Function हमको एक Value वापस करता है जिसको हम अपने Program मे उपयोग करते है.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Function with Return Value Example</title>
</head>
<body>
<script type="text/javascript">
function concatenate(first, last)
{
var full;
full = first + last;
return full;
}
function secondFunction()
{
var result;
result = concatenate('Amreen', 'Begum');
document.write (result );
}
</script>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="secondFunction()" value="Call Function">
</form>
</body>
</html>
Javascript Object उन Properties का एक Collection है जहां हर Properties का एक Name और एक Value होती है जो Hash, Map या अन्य Languages मे Dictionary के समान होता है. एक String का Name कोई भी String हो सकता है जिसमे खाली String भी शामिल होते है. Value कोई भी अन्य Value हो सकती है जैसे String, Boolean, Number, Null, लेकिन यह Undefined नही हो सकती.
Object का उपयोग शुरू करने के बाद भी Object की Properties को Define किया जा सकता है. लेकिन सबसे पहले आइए देखें कि हम Javascript मे Object को कैसे बनाते है.
एक नया Object को बनाने का सबसे आसान तरीका Object Literal Notation के साथ होता है जो कि Curly Braces: {} की एक जोड़ी से Bracketed किया जाता है.
JavaScript Objects को बनाने के तीन तरीके प्रदान करता है.
Object Literal
Creating Instance of Object Directly
Using an Object Constructor
Object Literal Notation मूल रूप से key का एक Array है. Value Pairs एक Colon के साथ Keys और Values को अलग करते है और प्रत्येक Key के बाद एक Comma key:value को जोड़ते है और यह केवल एक नियमित Array की तरह अंतिम के अलावा होता है.
<!DOCTYPE html>
<html>
<head>
<title>Javascript Object Literal Example</title>
</head>
<body>
<script type="text/javascript">
emp={id:202,name:"Amreen Begum",salary:60000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>
किसी Object का एक नया Instance को बनाने के लिए हम New Keyword का उपयोग करते है. यह Keyword एक Object का एक नया Instance को बनाता है जिससे हम फिर एक Variable को Assign कर सकते है.
<!DOCTYPE html>
<html>
<head>
<title>Creating Instance of Object Directly Example</title>
</head>
<body>
<script type="text/javascript">
var emp=new Object();
emp.id=301;
emp.name="Nausheen Khan";
emp.salary=70000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>
यहा पर आपको Argument के साथ Function को बनाने की आवश्यकता होती है प्रत्येक Argument Value को इस Object का उपयोग करके वर्तमान Object में Assigned किया जा सकता है. और यह Keyword मौजूदा Object को दर्शाता है.
<!DOCTYPE html>
<html>
<head>
<title>Using an Object Constructor Example</title>
</head>
<body>
<script type="text/javascript">
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(203,"Amreen Begum",10000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>
</body>
</html>
JavaScript मे Strings का उपयोग Text को Store और हेरफेर करने के लिए किया जाता है. Strings Text और Value से बने होते है और इसमे Contain Letters और Numbers, Symbols भी हो होते है और यहां तक कि Emoji भी हो सकते है.
जावास्क्रिप्ट स्वचालित रूप से स्ट्रिंग प्राइमेटिव्स और स्ट्रिंग ऑब्जेक्ट्स के बीच कनवर्ट करता है, आप स्ट्रिंग स्ट्रिंग पर किसी भी स्ट्रिंग पद्धति के सहायक तरीकों को कॉल कर सकते हैं.
var stringName = "text";
Javascript मे String दो प्रकार के होते है.
String Literal
String Object
String Literal को Double Quotes का प्रयोग करके बनाया गया है.
<!DOCTYPE html>
<html>
<head>
<title>String Literal Example</title>
</head>
<body>
<script type="text/javascript">
var str="This is string literal";
document.write(str);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>String Object Example</title>
</head>
<body>
<script type="text/javascript">
var stringname=new String("Hii javascript string object");
document.write(stringname);
</script>
</body>
</html>
JavaScript मे Array एक Special Variable होता है. Javascript Arrays मे आप एक या एक से ज्यादा Value को एक ही समय मे Add कर सकते है.
JavaScript मे Array को एक Unit या लगातार Memory Location मे Elements के Group को Represent करने के लिए उपयोग किया जाता है. प्रत्येक Elements जो आप Array मे Enter करते हो वह Zero से Start होने वाले Unique Number के साथ Array मे Stored किया जाता है.
JavaScript मे Arrays का उपयोग एक Single Variable मे एक से अधिक Value को Store करने के लिये किया जाता है. Array एक ही प्रकार के Elements को एक Fixed Size मे Sequential के रूप मे Store करता है.
उदाहरण के लिए यदि आप कुछ समय मे किसी User की Location को Track करना चाहते है तो आप एक Array मे X और y Value को Included कर सकते है Array x और y के Examples की तुलना मे अधिक है Indexed के माध्यम से आप Data या Elements को Array मे Stored कर सकते है या और आप Elements को Array से प्राप्त कर सकते है.
var fruits = new Array( "mango", "orange", "banana" );
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Array Example</title>
</head>
<body>
<h2>JavaScript Arrays Example</h2>
<p id="demo"></p>
<script type="text/javascript">
var fruits = ["Mango", "Banana", "Orange"];
document.getElementById("demo").innerHTML = fruits;
</script>
</body>
</html>
Arrays मे अपने built-in Variables और Functions होते है जिनको Properties और Methods के रूप मे जाना जाता है.
Property | Description |
---|---|
Constructor | Array Function के लिए एक Context देता है जो Object से बनाया जाता है. |
Index | Index मे Property String को Zero Based पर Represent करता है. |
Input | Input Property केवल Matches के द्वारा बनाया गया Array है. |
Length | Length Property आपके Array की Length Hold करती है. |
Prototype | Prototype आपको किसी Object के Attribute और Properties को Add करने की अनुमति देता है. |
Javascript Array Constructor Property Array Function का Reference देता है जिसने Instances Prototype बनाया है.
array.constructor
<!DOCTYPE html>
<html>
<head>
<title>Array constructor Property</title>
</head>
<body>
<script type="text/javascript">
var arr = new Array( 10, 20, 30 );
document.write("arr.constructor is:" + arr.constructor);
</script>
</body>
</html>
JavaScript आपको Array Object के साथ Length Property Provide करती है. ये Property आपके Array की Length Hold करती है. Javascript मे Array Length Property को 32-bit Integer Unsigned देता है जो Array मे Element की संख्या को Define करता है.
array.length
<!DOCTYPE html>
<html>
<head>
<title>Array Length Property</title>
</head>
<body>
<script type="text/javascript">
var arr = new Array( 10, 20, 30 );
document.write("arr.length is : " + arr.length);
</script>
</body>
</html>
Prototype Property आपको किसी भी Object मे Property को जोड़ने की अनुमति देता है (Number, Boolean, String and Date).
object.prototype.name = value
<!DOCTYPE html>
<html>
<head>
<title>Array Prototype Property</title>
<script type="text/javascript">
function book(title, author){
this.title = title;
this.author = author;
}
</script>
</head>
<body>
<script type="text/javascript">
var myBook = new book("java", "Ammu");
book.prototype.price = null;
myBook.price = 100;
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>
Cookies के द्वारा उपयोगकर्ता की Information Store की जाती है. सामान्य रूप से जब उपयोगकर्ता किसी Website को Visit करता है तो Web Server के Pass उसकी कोई Information नहीं होती है. लेकिन Cookies के द्वारा किसी भी उपयोगकर्ता की Information Store करना संभव है.
Cookie एक Normal Text File होती है. जब भी कोई उपयोगकर्ता किसी Website को Visit करता है तो उसकी Information Cookies Text File के रूप मे Store कर ली जाती है. यह Information उपयोगकर्ता के Computer मे ही Store की जाती है. भविष्य मे जब भी उपयोगकर्ता वापस उस Website के लिए Request करता है तो उपयोगकर्ता की Request के साथ उस उपयोगकर्ता की Cookie भी Webserver को भेजी जाती है.
इस प्रकार Web Server को उस उपयोगकर्ता की Information प्राप्त हो जाती है. इस Information के आधार पर Webserver को उस उपयोगकर्ता की Preferences के बारे में पता रहता है. साथ ही इस Information के आधार पर Web Server Web Pages मे जरुरी Change भी कर सकता है.
JavaScript उपयोगकर्ता को Cookies बनाने और पढ़ना और परिवर्तन करने और डिलीट करने की क्षमता प्रदान करती है. हालांकि इस काम के लिए JavaScript मे डॉक्यूमेंट में कुकी प्रॉपर्टी उपलब्ध होती है.
JavaScript मे Cookies Create करने का सामान्य Syntax आप नीचे देख सकते है.
document.cookie = "name=value; expiry-date; path";
Name Value - आप जब भी Cookie मे कोई Information Store करते है तो ऐसा आप Name और Value के Pair मे करते है. उदाहरण के लिए यदि आप उपयोगकर्ता की ID Store करना चाहते है तो इसके लिए आप Id=101 को Define करेंगे.
Expiry Date - जावास्क्रिप्ट के द्वारा आप Cookies की Expiry Data को भी Set कर सकते है. एक कुकी को हटाने के लिए आपको बस कुकी की Value को खाली करने की आवश्यकता होती है और समय सीमा समाप्त होने की तिथि निर्धारित करने के लिए..
Path - कुकी को सेट करने वाली निर्देशिका या वेब पेज का Path है. यदि आप किसी भी निर्देशिका या पृष्ठ से कुकी को पुनः प्राप्त करना चाहते हैं तो यह रिक्त हो सकता है.
Document.cookie को Object के लिये एक String Value को नियुक्त करके सबसे आसान Cookie बना सकते है.
<!DOCTYPE html>
<html>
<head>
<title>Storing Cookies Example</title>
<script type="text/javascript">
<!--
function WriteCookie()
{
if( document.myform.customer.value == "" ){
alert("Enter some value!");
return;
}
cookievalue= escape(document.myform.customer.value) + ";";
document.cookie="name=" + cookievalue;
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie();"/>
</form>
</body>
</html>
कुकी पढ़ना केवल एक लिखने के रूप में सरल है क्योंकि डॉक्यूमेंट की वैल्यू है. कुकी ऑब्जेक्ट कुकी होती है. इसलिए जब भी आप कुकी एक्सेस करना चाहते हैं तो आप इस स्ट्रिंग का उपयोग कर सकते हैं। Document.cookie string नाम की एक सूची रखेगा = semicolons द्वारा अलग किए गए मूल्य जोड़े जहां नाम कुकी का नाम है और वैल्यू इसकी स्ट्रिंग वैल्यू है.
<!DOCTYPE html>
<html>
<head>
<title>Reading Cookies Example</title>
<script type="text/javascript">
<!--
function ReadCookie()
{
var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++){
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write ("Key is : " + name + " and Value is : "+value);
}
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
<input type="button" value="Get Cookie" onclick="ReadCookie()"/>
</form>
</body>
</html>
आप कभी कभी जब एक कुकी को डिलीट करना चाहेंगे ताकि बाद में कुकी वापस पढ़ने के प्रयास से कुछ भी न हो. ऐसा करने के लिए, आपको बस एक समय में समाप्ति की तारीख निर्धारित करनी होगी.
<!DOCTYPE html>
<html>
<head>
<title>Deleting Cookies Example</title>
<script type="text/javascript">
<!--
function WriteCookie()
{
var now = new Date();
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie="name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>
डेट ऑब्जेक्ट जावास्क्रिप्ट भाषा में निर्मित डेटाटाइप है. डेट ऑब्जेक्ट नई डेट () के साथ बनाए गए हैं जैसा कि नीचे दिखाया गया है. एक बार जब कोई डेट ऑब्जेक्ट बनाया जाता है तो कई तरीके आपको उस पर काम करने की अनुमति देते हैं. अधिकांश विधियाँ बस आपको स्थानीय समय या UTC सार्वभौमिक, या GMT समय का उपयोग करके, वर्ष, महीना, दिन, घंटा, मिनट, दूसरा और वस्तु के मिलीसेकंड फ़ील्ड को प्राप्त करने और सेट करने की अनुमति देती हैं.
ऐसी कई स्थिति हो सकती है जिनमे आप Date Object को उपयोग कर सकते है. जैसे की यदि आप उपयोगकर्ता की पूरी Activity के बारे मे Information Store करना चाहते है तो ऐसा Date Object के माध्यम से कर सकते है. उपयोगकर्ता का Login Time, Logout Time, यदि उपयोगकर्ता ने कोई Update किया है तो उस समय को भी आप Date Object के माध्यम से Store कर सकते है.
Date Object का निर्माण करना होता है इसे आप सीधे उपयोग नहीं कर सकते है. इसलिए एक Date Object New Keyword द्वारा Create किया जाता है. Date Object को आप चार तरह से Create कर सकते है. पहले तरीके मे आप एक Normal Date Object Create करते है और उसमें कोई भी Value Pass नही करते है.
new Date( )
new Date(milliseconds)
new Date(datestring)
new Date(year,month,date[,hour,minute,second,millisecond ])
JavaScript Date Object के साथ आपको दो Properties प्रदान करती है.
Property | Description |
---|---|
Constructor | Construct Property उस Function को वापस करता है जिसके द्वारा Date Object Create किया जाता है |
Prototype | Prototype Property के द्वारा आप Object मे Custom Properties और Methods को Add कर सकते है. |
JavaScript Date Object के द्वारा Local Time के अनुसार दी गई Date और Month का Day प्राप्त करने के लिए उपयोग करते है.
<!DOCTYPE html>
<html>
<head>
<title>Date Object Example</title>
</head>
<body>
<script type = "text/javascript">
<!--
var dt = Date();
document.write("Date and Time : " + dt );
//-->
</script>
</body>
</html>
इसमे Local Time के अनुसार दी गई Date के Milliseconds को प्राप्त करने के लिये उपयोग करते है.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript getTime() Example</title>
</head>
<body>
<script type = "text/javascript">
<!--
var dt = new Date( "january 15, 2010 23:15:20" );
document.write("getTime() : " + dt.getTime() );
//-->
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock Example</title>
</head>
<body>
Current Time: <span id="txt"></span>
<script type = "text/javascript">
window.onload=function(){getTime();}
function getTime(){
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
setTimeout(function(){getTime()},1000);
}
//setInterval("getTime()",1000);//another way
function checkTime(i){
if (i<10){
i="0" + i;
}
return i;
}
</script>
</body>
</html>
उपयोगकर्ता द्वारा प्रस्तुत फ़ॉर्म को मान्य करना महत्वपूर्ण होता है क्योंकि इसमें अनुचित वैल्यू हो सकती हैं. इसलिए Validation को उपयोगकर्ता को प्रमाणित करना होता है. Database मे हमेंशा Valid values होनी चाहिए इससे Processing मे कोई Difficulties नही आती है. यदि उपयोगकर्ता के द्वारा Input की गई Values उपयुक्त नहीं है तो उपयुक्त को एक Message Display किया जाता है और Valid Values Input करने के लिए कहा जाता है. यह Process Validation कहलाती है.
उपयोगकर्ता के लिए वेबपृष्ठों में प्रपत्रों का उपयोग उनके आवश्यक विवरण दर्ज करने के लिए किया जाता है जो आगे इसे प्रसंस्करण के लिए सर्वर पर भेजते हैं. एक फॉर्म को वेब फॉर्म या HTML फॉर्म के रूप में भी जाना जाता है. ई-कॉमर्स वेबसाइटों, ऑनलाइन बैंकिंग, ऑनलाइन सर्वेक्षण में कुछ नाम रखने के लिए फॉर्म के उपयोग प्रचलित हैं
Form Validation आमतौर पर दो Function पर Work करता है.
Basic Form Validation
JavaScript Validation with image
किसी Form मे कुछ Fields ऐसे होते है जिनको Fill करना Necessary होता है जैसे की Name, Email आदि. यदि आप ये चाहते है की उपयोगकर्ता उस Necessary Field को Empty ना छोड़े तो इसके लिए आप उस Field पर Validation Perform कर सकते है. जब उपयोगकर्ता Form Submit करे तो आप Check कर सकते है की उस Necessary Field मे Value है या नही.
Value नही होने पर आप कोई Message Show कर सकते है. इसके लिए आप DOM का उपयोग कर सकते है क्योंकि Field मे कोई Value है या नहीं ये Dynamically Form Submit करते समय Check किया जायेगा. आप कोई Function Create कर सकते है जो की Submit Button के Click होने पर Call होगा और इसमे आप Document Object के द्वारा उस Field की Value को Check कर सकते है. इसे आपको उन्हीं Fields पर Apply करना चाहिए जिनमे Values डालना Necessary हो.
<!DOCTYPE html>
<html>
<head>
<title>Basic Form Validation Example</title>
</head>
<script type="text/javascript">
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}
else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
</body>
<form name="myform" method="post" action="http://www.tutorialsroot.com"
onsubmit="return validateform()" >
Name: <input type="text" name="name">
Password: <input type="password" name="password">
<input type="submit" value="Submit">
</form>
</body>
</html>
इसमे उपयोगकर्ता को बता दिया जाता है की उसकी Fill की गई जानकारी सही है या गलत.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript validation with Image</title>
</head>
<script type="text/javascript">
function validate(){
var name=document.f1.name.value;
var passwordlength=document.f1.password.value.length;
var status=false;
if(name==""){
document.getElementById("namelocation").innerHTML=
" <img src='http://tutorialsroot.com/css/images/syntex.jpg'/>
Please enter your name";
status=false;
}
else
{
document.getElementById("namelocation").innerHTML="
<img src='http://tutorialsroot.com/css/images/syntex.jpg'/>";
status=true;
}
if(passwordlength<6){
document.getElementById("passwordlocation").innerHTML=
" <img src='http://tutorialsroot.com/css/images/syntex.jpg'/>
Password must be greater than 6";
status=false;
}
else
{
document.getElementById("passwordlocation").innerHTML="
<img src='http://tutorialsroot.com/css/images/syntex.jpg'/>";
}
return status;
}
</script>
</body>
<form name="f1" action="#" onsubmit="return validate()">
<table>
<tr>
<td>Enter Name:</td><td><input type="text" name="name"/>
<span id="nameloc"></span></td>
</tr>
<tr>
<td>Enter Password:</td><td><input type="password"
name="password"/>
<span id="passwordloc"></span></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit"/></td>
</tr>
</table>
</form>
</body>
</html>
Animation Drawing, Layout, Photo और Designing करने की Sequence की एक प्रक्रिया है जो Multimedia और Gaming Products मे Integrate है. और Drive का भ्रम पैदा करने के लिए Animation मे अभी भी Images का Exploitation और Management शामिल होता है. एक व्यक्ति जो Animation को Design करता है उसे Animator कहा जाता है.
JavaScript Animation कुछ ऐसे Manufactures को भी संभाल सकता है जिनको CSS Control नही कर सकती है. CSS मे Animation Web पर एक महत्वपूर्ण भूमिका निभाते है जो कि विशेष रूप से CSS के Basic User Interaction से Related Simple Animation के लिए एक दम सही है.
एक Complex Animation को बनाने के लिए हम Javascript का प्रयोग करते है.
एक आसान Animation को बनाने के लिये हम DOM Object Properties और JavaScript Functions का उपयोग करते है.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Animation Examples</title>
<script type="text/javascript">
var imgObj = null;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init;
</script>
</head>
<body>
<h3>JavaScript Animation Examples</h3>
<form>
<img id="myImage" src="javascript.gif" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>
हम JavaScript Function से setTimeout() का उपयोग करके स्वचालित रूप से Automated Animation को Set कर सकते है.
<!DOCTYPE html>
<html>
<head>
<title>Automated Animation Examples</title>
<script type="text/javascript">
var imgObj = null;
var animate ;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop(){
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload =init;
</script>
</head>
<body>
<h3>Automated Animation Examples</h3>
<form>
<img id="myImage" src="javascript.gif" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>
Client Side मे Image Map को बनाने के लिए Javascript का उपयोग करते है. Javascript मे Hotspot Link प्रदान करने के लिए Shape, Rectangle, Circle, Polygon का उपयोग कर सकते है. यदि आप एक Rectangle Image का Map बनाना चाहते है तो आप दो अलग अलग Rules की आवश्यकता होगी.
Javascript मे Image Maps को Define करने के लिये MAP Element का उपयोग करते है. हर Image Maps का एक Unique Name होता है क्योंकि MAP Element मे Name Attribute की आवश्यकता होती है.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Image Map Example</title>
<script type="text/javascript">
<!--
function showTutorial(name){
document.myform.stage.value = name
}
//-->
</script>
</head>
<body>
<form name="myform">
<input type="text" name="stage" size="20" />
</form>
<!-- Create Mappings -->
<img src="usemap.gif" alt="HTML Map" border="0" usemap="#tutorials"/>
<map name="tutorials">
<area shape="poly"
coords="74,0,113,29,98,72,52,72,38,27"
href="/bootstrap/index.htm" alt="Bootstrap Tutorial"
target="_self"
onMouseOver="showTutorial('Bootstrap')"
onMouseOut="showTutorial('')"/>
<area shape="rect"
coords="22,83,126,125"
href="/html/index.htm" alt="HTML Tutorial"
target="_self"
onMouseOver="showTutorial('html')"
onMouseOut="showTutorial('')"/>
<area shape="circle"
coords="73,168,32"
href="/php/index.htm" alt="PHP Tutorial"
target="_self"
onMouseOver="showTutorial('php')"
onMouseOut="showTutorial('')"/>
</map>
</body>
</html>
सभी Browsers के बीच के अंतर को समझना बहुत जरुरी होता है क्योकि प्रत्येक उपयोगकर्ता के मुताबिक आप इसे Maintenance कर सके. और हमारे लिये ये भी जानना बहुत जरुरी होता है की हमारा Web Page किस Browsers पर चल रहा है.
हमारा Web Page किस Browsers पर चल रहा है इसको जानने के लिये हम built-in Navigator Object का उपयोग करते है.
Navigator Properties बहुत सी होती है जिनका उपयोग आप अपने Web Page मे कर सकते है.
appCodeName
language
appVersion
platform[]
mimTypes[]
userAgent[]
plugins[]
userAgent[]
Navigator Methods मे बहुत से Specific Methods होते है जिनका उपयोग आप अपने Web Page मे कर सकते है.
javaEnabled()
taintEnabled()
plugings.refresh
preference(name,value)
Browser के नाम को जानने के लिए हम आसान JavaScript का उपयोग करते है और उसके अनुसार User को एक HTML Page पर Served किया जा सकता है.
<!DOCTYPE html>
<html>
<head>
<title>Browser Detection Example</title>
</head>
<body>
<script type="text/javascript">
<!--
var userAgent = navigator.userAgent;
var opera = (userAgent.indexOf('Opera') != -1);
var ie = (userAgent.indexOf('MSIE') != -1);
var gecko = (userAgent.indexOf('Gecko') != -1);
var netscape = (userAgent.indexOf('Mozilla') != -1);
var version = navigator.appVersion;
if (opera){
document.write("Opera based browser");
}
else if (gecko){
document.write("Mozilla based browser");
}
else if (ie){
document.write("IE based browser");
}
else if (netscape){
document.write("Netscape based browser");
}
else{
document.write("Unknown browser");
}
document.write("<br /> Browser version info : " + version );
//-->
</script>
</body>
</html>
JavaScript Navigator Object मे Child Object शामिल होते है जिनको Plug-ins कहा जाता है. और ये Object मूल रूप से एक Array मे होती है जिसमे हर Browser मे प्रत्येक Plug-ins को Installed किया जाता है.
<!DOCTYPE html>
<html>
<head>
<title>Javascript Multimedia Example</title>
<style>
table,th,td{border:1px solid red;}
</style>
</head>
<body>
<table>
<tr>
<th>Plug-in Name</th>
<th>Filename</th>
<th>Description</th>
</tr>
<script language="JavaScript" type="text/javascript">
for (i=0; i<navigator.plugins.length; i++)
{
document.write("<tr><td>");
document.write(navigator.plugins[i].name);
document.write("</td><td>");
document.write(navigator.plugins[i].filename);
document.write("</td><td>");
document.write(navigator.plugins[i].description);
document.write("</td></tr>");
}
</script>
</table>
</body>
</html>