Category Archives: JavaScript Frameworks

জাভাস্ক্রিপ্ট টিউটোরিয়াল JavaScript Tutorial

জাভাস্ক্রিপ্ট টিউটোরিয়াল JavaScript Tutorial

  • জাভাস্ক্রিপ্ট হচ্ছে এইচটিএমএল ও ওয়েব এর একটি প্রোগ্রামিং ভাষা।
  • প্রোগ্রামিং ভাষা আপনি কম্পিউটারকে যেভাবে কাজ করাতে চান সেভাবে কাজ করায়।
  • জাভাস্ক্রিপ্ট শেখা সহজ।
  • এই টউটোরিয়ালটি আপনাকে প্রাথমিক থেকে উচ্চতর জাভাস্ক্রিপ্ট শেখাবে।

 

প্রতি অধ্যায় এ উদাহরণ

প্রতি অধ্যায় এ উদাহরণ সন্নিবেশিত করা হয়েছে।

যেমন:


<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

ফলাফল


My First JavaScript


 

উদাহরণ এর সাহায্যে শেখা

উদাহরণ 1000 শব্দ দ্বারা বর্ণনা করা থেকেও ভাল। শেখার জন্য অনেক ক্ষেত্রে উদাহরণ ব্যাখ্যা দেখে শেখার চেয়েও সহজতর।

নোট: আপনি যদি সকল উদাহরণ ব্যবহার করে দেখেন, তাহলে আপনি খুব অল্প সময়ে জাভাস্ক্রিপ্ট সম্পর্কে প্রচুর জানতে পারবেন।

 

জাভাস্ক্রিপ্ট কেন শিখবেন?

জাভাস্ক্রিপ্ট হচ্ছে তিনটি ল্যাংগুয়েজ এর মধ্যে একটি যা প্রত্যেক ওয়েব ডেভেলপারকে অবশ্যই শিখতে হয়:

  1. HTML ওয়েব পেজ উপাদানগুলো সন্নিবেশিত করতে
  2. CSS ওয়েব পেজ এর বিন্যাস/সাজসজ্জা নির্দিষ্ট করতে
  3. JavaScript ওয়েব পেজ এর আচরণ প্রোগ্রামিং এর সাহায্যে নিয়ন্ত্রণ করতে

এই টিউটোরিয়ালটি হচ্ছে জাভাস্ক্রিপ্ট সম্পর্কে, এবং জাভাস্ক্রিপ্ট কিভাবে এইচটিএমএল এবং সিএসএস এর সাথে কাজ করে সে সম্পর্কে।

 

শেখার গতি

  • এই টউটোরিয়ার এ শেখার গতি আপনার পছন্দের উপর নির্ভর করে।
  • সবকিছুই আপনার উপর।
  • আপনি যদি কোন কিছু পুরোপুরি বুঝতে না পারেন তাহলে আপনি বিরতি নিতে পারেন বা পু্ণরায় পড়তে পারেন।
  • সবসময়ই নিশ্চিত হয়ে নিন যে আপনি উদাহরণগুলো বুঝতে পেরেছেন।

জাভাস্ক্রিপ্ট অবজেক্ট (JavaScript Objects)

জাভাস্ক্রিপ্ট অবজেক্ট (JavaScript Objects)

-পায়েল চৌধুরী

 

বাস্তব জীবনের দৃষ্টান্তে অবজেক্টস, প্রপার্টিস এবং মেথডস

বাস্তবে একটি গাড়ী হল একটা অবজেক্ট.

গাড়ীর ওজন, রং এসব হল একটি গাড়ীর প্রপার্টিজ এবং এর চালু হবার এবং থামার মেথড আছে.

 

Object Properties Methods
 Car car.name = Fiat car.start()
car.model = 500 car.drive()
car.weight = 850 kg car.brake()
car.color = white car.stop()

 

সকল গাড়ির বৈশিষ্ট্য (Prperties) একই, কিন্ত এর মান গাড়ী থেকে গাড়ী থেকে পৃথক।
সকল গাড়ির পদ্ধতি (Methods) একই, কিন্তু মেথড সম্পন্ন হওয়ার সময় ভিন্ন হয়।

জাভাস্ক্রিপ্ট অবজেক্ট

আমরা জানি যে, জাভাস্ক্রিপ্ট ভেরিয়েবল তথ্য মানের ধারক (data values) হিসাবে কাজ করে।

নীচের কোডের ভেরিয়েবলটি গাড়ীর নামের (Fiat) একটি সাধারণ মান (simple value) হিসাবে দেয়া হয়েছে:


var car = "Fiat";


বস্তু (Objects) সমূহও ভেরিয়েবল। কিন্তু এরা অনেক মান ধারণ করতে পারে। নীচের কোডের ভেরিয়েবলটি গাড়ীর নামের অনেকগুলো মান (Fiat, 500, white হিসাবে দেয়া হয়েছে:


var car = {type:"Fiat", model:500, color:"white"};


 

মানসমূহ name:value এভাবে জোড়ায় (name কোলন value) লেখা হয়।
জাভাস্ক্রিপ্ট অবজেক্টস নামকৃত মানসমূহের (named values) ধারক হিসাবে কাজ করে।

অবজেক্ট প্র্রপার্টিজ

name:value জোড়াকে (জাভাস্ক্রিপ্ট অবজেক্টস এ) প্র্রপার্টিজ বলে।


var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};


Property Property Value
firstName John
lastName Doe
age 50
eyeColor blue

 

অবজেক্টস মেথডস

মেথডস হল ক্রিয়াসমূহ যা অবজেক্টস এর উপর সম্পন্ন করা হয়।
মেথডস সমূহ ফাংশন ডেফিনেশন হিসাবে প্র্রপার্টিজ এর মধ্যে সংরক্ষণ করা হয়।

Property Property Value
firstName John
lastName Doe
age 50
eyeColor blue
fullName function() {return this.firstName + " " + this.lastName;}

জাভাস্ক্রিপ্ট অবজেক্ট যে নামকৃত ভেলু সমূহের ধারক হিসাবে কাজ করে তাদের প্র্রপার্টিজ এবং মেথডস বলে।

অবজেক্ট নির্ধারণ

জাভাস্ক্রিপ্ট অবজেক্ট এর উদাহারণ:


var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};


স্পেস এবং লাইন ব্রেক গুরুত্বপূর্ণ নয়। একটি অবজেক্ট নির্ধারণ করতে একাধিক লাইন জুড়ে লিখতে হতে পারে:
উদাহারণ:


var person = {
     firstName:"John",
     lastName:"Doe",
     age:50,
     eyeColor:"blue"
 };

 

অবজেক্ট প্র্রপার্টিজ এর ব্যবহার( Accessing Object Properties)

আমরা দু’ভাবে অবজেক্ট প্র্রপার্টিজ ব্যবহার করতে পারি:


objectName.propertyName


অথবা


objectName[propertyName]


উদাহারণ ১:


person.lastName;


 

 

উদাহারণ ২:


person["lastName"];


 

 

অবজেক্ট মেথডস এর ব্যবহার (Accessing Object Methods)

নিম্নলিখিত অনুযায়ী আমরা Object Methods ব্যবহার করতে পারি:


objectName.methodName()


 

উদাহারণ 1


name = person.fullName();


 

যদি fullName প্র্রপার্টি, () ছাড়া ব্যবহার করা হয়, তবে এটা আমাদের ফাংশন ডেফিনেশন এ ফেরত নিয়ে যাবে:
উদাহারণ 2


name = person.fullName;


 

আপনি কি জাভাস্ক্রিপ্ট এ Strings, Numbers, and Booleans কে Objects হিসেবে নির্ধারণ করেন

জাভাস্ক্রিপ্ট এ Strings, Numbers, and Booleans কে Objects হিসাবে কখনো ডিক্লেয়ার করবেননা!
যখন জাভাস্ক্রিপ্ট এ কোন ভেরিয়েবলকে "new", কিওয়ার্ড দ্বারা ডিক্লেয়ার করা হয় তখন সে ভেরিয়েবলটি একটা অবজেক্ট তৈরী করে :


var x = new String();        // Declares x as a String object
var y = new Number();        // Declares y as a Number object
var z = new Boolean();       // Declares z as a Boolean object

String, Number, and Boolean অবজেক্টস পরিহার করুন। এগুলো আপনার কোডকে জটিল করবে এবং কাজের গতিকে ধীর করে দিবে।

আমাদের সাথে থাকুন, পরবর্তীতে অবজেক্টের উপর আরো টিউটোরিয়াল পাবেন।

জাভাস্ক্রিপ্ট স্ট্রিক্ট (JavaScript Use Strict)

জাভাস্ক্রিপ্ট স্ট্রিক্ট (JavaScript Use Strict)

মোহাম্মাদ আমিরুল ইসলাম (আরিফ)

ওয়েব ডিজাইনার অ্যান্ড ডেভেলপার

 

জাভাস্ক্রিপ্ট স্ট্রিক্ট (JavaScript Use Strict)

Use Strict "ইউজ স্ট্রিক্ট" হল এমন একটি জাভাস্ক্রিপ্ট কোড যা Strict mode "স্ট্রিক্ট মোডে" চালু হয়।

 

ইউজ স্ট্রিক্ট নির্দেশিকা (The "use strict" Directive)

ইউজ স্ট্রিক্ট নির্দেশিকা (The "use strict" Directive) জাভাস্ক্রিপ্ট 1.8.5 (ECMAScript version 5) এ নতুন ।

এটা কোন স্টেটমেন্ট নয় কিন্তু এটি একটি আক্ষরিক অভিব্যক্তি। এটি জাভাস্ক্রিপ্টটের নতুন ভার্সন । পুরাতন ভার্সন এ এটি ব্যাবহার করা যায় না।

Use Strict (ইউজ স্ট্রিক্ট) ব্যাবহার করার উদ্দেশ্য একটি নির্দিষ্ট কোড যা Strict mode (স্ট্রিক্ট মোড) এ চালু হবে ।

 

Strict mode "স্ট্রিক্ট মোডে" সাপোর্ট করে ব্রাউজারেরে এই ভার্সন গুলোতে

  • Internet Explorer from version 10
  • Firefox from version 4
  • Chrome from version 13
  • Safari from version 5.1
  • Opera from version 12

 

 

স্ট্রিক্ট মোডে ঘোষণা (Declaring Strict Mode):

Strict mode "স্ট্রিক্ট মোডে" ঘোষণা করা হয় Use Strict (ইউজ স্ট্রিক্ট) এর মাধ্যমে । এটি জাভাস্ক্রিপ্ট ফাইলের শুরুতে অথবা জাভাস্ক্রিপ্ট ফাংশন এর ভিতর ব্যাবহার করা হয়ে থাকে।

জাভাস্ক্রিপ্টের শুরুতে ঘোষণা করা হলো এর গ্লোবাল ব্যপ্তি থাকবে। (সকল কোড স্ট্রিক্ট মোড এ কার্যকর হবে)

ফাংশনের ভিতরে ঘোষণা করা হলো এর লোকাল ব্যপ্তি থাকবে। (শুধুমাত্র ফাংশনের ভিতরের কোডগুলো স্ট্রিক্ট মোড এ কার্যকর হবে)

জাভাস্ক্রিপ্ট ফাইলের শুরুতেঃ


<!DOCTYPE html>
<html>
<body>
<p>Global "use strict" declaration.</p>
<p>Activate debugging in your browser to see the error report.</p>
<script>
"use strict";
y= 3.14;       // This will cause an error.
myFunction();  // This will also cause an error.
function myFunction() {
      x = 3.14;
}
</script>
</body>
</html>

 

 

জাভাস্ক্রিপ্ট ফাংশন এর ভিতরঃ


 

<!DOCTYPE html>
<html>
<body>
<p>Local "use strict" declaration.</p>
<p>Activate debugging in your browser to see the error report.</p>
<script>
y= 3.14;        // This will not cause an error.
myFunction();   // This will cause an error.
function myFunction() {
     "use strict";
     x = 3.14;
}
</script>
</body>
</html>


"ইউজ স্ট্রিক্ট" সিনট্যাক্স (The "use strict"; Syntax)

সিনট্যাক্স যেন জাভাস্ক্রিপ্টটের পুরোনো সংস্করণের সাথে সামঞ্জস্যপূর্ণ হয় সেভাবে সাজান হয়েছে।

কম্পাইল করার ক্ষেত্রে একটি সাংখ্যিক আক্ষরিক (4 + + 5) অথবা একটি আক্ষরিক স্ট্রিং ("jamal kamal";) ব্যবহারে জাভাস্ক্রিপ্ট প্রোগ্রামে কোন পার্শ্ব প্রতিক্রিয়া নেই।এটি সাধারণত কম্পাইল হয় অবিদ্যমান ভেরিয়াবল এবং ডায়েস এর সাথে।

সুতরাং, "ইউজ স্ট্রিক্ট" শুধুমাত্র নতুন কম্পাইলার (সংগ্রহক) এ কাজ করে, যে কম্পইলাম এর মানে বুঝতে পারে ।

 

স্ট্রিক্ট মোড (Strict mode) কেন?

Strict mode “নিরাপদ” জাভাস্ক্রিপ্ট লিখতে সাহায্য করে ।

Strict mode পূর্ববর্তী  "bad syntax" পরিবর্তন করে  "real errors" গ্রহণ করে।

উদাহরণ হিসাবে, স্বাভাবিক জাভাস্ক্রিপ্ট, একটি মিসটাইপিং ভেরিয়াবল একটি গ্লোবাল ভেরিয়াবল সৃষ্টি করে।

Strict mode এর ক্ষেত্রে এগুলোকে "erorr" দেখাবে, এবং এখানে অসাবধানতাবশতঃ গ্লোবাল ভেরিয়াবল তৈরি হওয়া অসম্ভব।

সাধারন জাভাস্ক্রিপ্টটে একজন ডেভেলপার অ লিখনযোগ্য বৈশিষ্ট্য মান নির্ধারণের ক্ষেত্রে কোন ত্রুটি পাবেন না।

Strict mode যেকোন assignment to a non-writable property, a getter-only property, a non-existing property, a non-existing variable, or a non-existing object গুলোকে এরর "erorr" দেখাবে।

 

(Strict mode) স্ট্রিক্ট মোডে যা যা অনুমোদিত নয়

ঘোষণা না করে ভেরিয়েবল (প্রোপার্টি বা অবজেক্ট) ব্যবহার করা অনুমোদিত নয়।


"use strict";
x = 3.14;            // This will cause an error (if x has not been declared)

 

ভেরিয়াবল, ফাংশন অথবা এগ্রিমেন্ট মুছে ফেলা অনুমোদিত নয়।

 


"use strict";
x = 3.14;
delete x;                // This will cause an error

 

একাধিক বার প্রোপার্টি নির্ধারণ করা অনুমোদিত নয়।


"use strict";
var x = {p1:10, p1:20}; // This will cause an error


প্যারামিটার এর নাম নকল করা অনুমোদিত নয়।


"use strict";
function x(p1, p1) {};           // This will cause an error

 

অষ্টক গণনাপদ্ধতি এবং অব্যাহতি অক্ষর ব্যাবহার করা অনুমোদিত নয়।

 


"use strict";
var x = 010;           // This will cause an error
var y = \010;          // This will cause an error

 

রীড অনলি প্রপার্টি "read-only property" লেখা অনুমোদিত নয়।


"use strict";
var obj = {};
obj.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14;               // This will cause an error

 

 

গেট অনলি প্রপার্টি "get-only property" লেখা অনুমোদিত নয়।


"use strict";
var obj = {get x() {return 0} };
obj.x = 3.14;           // This will cause an error

 

আন ডিলিটএবল প্রপার্টি ডিলিট করা অনুমোদিত নয়।


"use strict";
delete Object.prototype;      // This will cause an error

স্ট্রিং "eval" ভেরিয়াবল হিসাবে ব্যাবহার করা যাবে না।


"use strict";
var eval = 3.14;             // This will cause an error

 

স্ট্রিং "arguments" ভেরিয়াবল হিসাবে ব্যাবহার করা যাবে না।


"use strict";
var arguments = 3.14;       // This will cause an error

"with statement" অনুমোদিত নয়।


"use strict";
with (Math){x = cos(2)};        // This will cause an error

 

ভবিষ্যতের জন্য সংরক্ষিত কীওয়ার্ড “keywords" গুলোঅনুমোদিত নয়।  সেগুলো হল :

  • implements
  • interface
  • package
  • private
  • protected
  • public
  • static
  • yield

 

জাভাস্ক্রিপ্ট ডেটা টাইপ (JavaScript Data Types)

জাভাস্ক্রিপ্ট ডেটা টাইপ (JavaScript Data Types)

লিখেছেনঃ মোহাম্মাদ আমিরুল ইসলাম (আরিফ)

ওয়েব ডিজাইনার অ্যান্ড ডেভেলপার

 

জাভাস্ক্রিপ্ট ডেটা টাইপের ধারনা

জাভাস্ক্রিপ্টে ডেটা টাইপ একটি গুরুত্বপূর্ণ বিষয়।

জাভাস্ক্রিপ্ট এর ডেটা টাইপ গুলো হলঃ (String, Number, Boolean, Array, Object.) স্ট্রিং, নাম্বার, বুলিয়ান, অ্যারে, অবজেক্ট । জাভাস্ক্রিপ্ট প্রোগ্রামিং করতে এই টাইপগুলো ব্যবহার করা হয়ে থাকে ।

যেমনঃ

var lastName = "Johnson";

উপরের জাভাস্ক্রিপ্টটি একটি স্ট্রিং টাইপ জাভাস্ক্রিপ্ট ।

 

var length = 16;

উপরের জাভাস্ক্রিপ্টটি একটি নাম্বার টাইপ জাভাস্ক্রিপ্ট ।

 

var cars = ["Saab", "Volvo", "BMW"];

উপরের জাভাস্ক্রিপ্টটি একটি অ্যারে টাইপ জাভাস্ক্রিপ্ট ।

 

var x = {firstName:"John", lastName:"Doe"};

উপরের জাভাস্ক্রিপ্টটি একটি অবজেক্ট টাইপ জাভাস্ক্রিপ্ট ।

 

 

জাভাস্ক্রিপ্ট স্ট্রিং (JavaScript String)

জাভাস্ক্রিপ্ট স্ট্রিংগুলো সাধারণত কয়কটি অক্ষররে সমষ্টি হয়ে থাকে । যেমনঃ “kamal”

স্ট্রিং গুলো  single quotes ‘’ অথবা double quotes “” এর ভিতর ব্যবহার হয়ে থাকে ।

যেমনঃ

var carName = " kamal";       [ এখানে double quotes “” ব্যবহার হয়েছে ]
var carName = ' kamal';        [ এখানে single quotes ‘’ ব্যবহার হয়েছে ]

 

আপনি স্ট্রিং এর ভিতরে quotes ব্যবহার করতে পারেন ।

 

যেমনঃ

var answer = "It's alright";                    [double quotes “” এর ভিতর single quote ‘’]
var answer = "He is called 'Johnny'";     [double quotes “” এর ভিতর single quotes ‘’]
var answer = 'He is called "Johnny"';    [single quotes ‘’ এর ভিতর double quotes “”]

 

 

কোড গুলো নিজে প্রয়োগ করুনঃ

DOCTYPE html>

<html>

<body>

 

<p id="demo"></p>

 

<script>

var carName1 = "Volvo XC60";

var carName2 = 'Volvo XC60';

var answer1 = "It's alright";

var answer2 = "He is called 'Johnny'";

var answer3 = 'He is called "Johnny"';

 

document.getElementById("demo").innerHTML =

carName1 + "
" +

carName2 + "
" +

answer1 + "
" +

answer2 + "
" +

answer3;

</script>

 

</body>

</html>

 

 

 

 

 

জাভাস্ক্রিপ্ট নাম্বার (JavaScript Numbers)

জাভাস্ক্রিপ্টটে শুধু মাত্র এক প্রকারের নাম্বার আছে । নাম্বারগুলো ডেসিম্যাল এবং ডেসিম্যাল ছাড়াও লেখা হতে পারে ।

যেমনঃ

var x1 = 34.00;    [ডেসিম্যাল দিয়ে লেখা]
var x2 = 34;        [ডেসিম্যাল ছাড়া লেখা]

 

অতিরিক্ত বড় অথবা অতিরিক্ত ছোট নাম্বার গুলো e দ্বারা লেখা হয় ।

যেমনঃ

var y = 123e5;                [ এখানে 123e5;=12300000 হবে]
var z = 123e-5;               [এখানে 123e-5;= 0.00123 হবে]

 

নির্দিষ্ট নাম্বার এর পরে e5 দিলে অই নাম্বার এর পরে পাঁচটি ০ যোগ হবে আর  e-5 দিলে অযুত এর আগে পয়েন্ট হবে ।

 

কোড গুলো নিজে প্রয়োগ করুনঃ

DOCTYPE html>

<html>

<body>

 

<p id="demo"></p>

 

<script>

var x1 = 34.00;

var x2 = 34;

var y = 123e5;

var z = 123e-5;

 

document.getElementById("demo").innerHTML = x1 + "
" + x2 + "
" + y + "
" + z

</script>

 

</body>

</html>

 

 

জাভাস্ক্রিপ্ট বুলিয়ান (JavaScript Booleans)

বুলিয়ান এর শুধু দুইটি মান আছে ।  সত্য ও মিথ্যা ।

যেমনঃ

var x = true;
var y = false;

 

জাভাস্ক্রিপ্ট অ্যারে (JavaScript Arrays)

জাভাস্ক্রিপ্ট অ্যারে গুলো তৃতীয় বন্ধনী দ্বারা লেখা হয়।  জাভাস্ক্রিপ্ট অ্যারে আইটেম গুলো কমা দ্বারা আলাদা করা হয় ।

কোড গুলো দেখতে এরকম হয়ঃ

var cars = ["Saab", "Volvo", "BMW"];

 

জাভাস্ক্রিপ্ট  অবজেক্ট [JavaScript Objects]

জাভাস্ক্রিপ্ট অবজেক্ট গুলো দ্বিতীয় বন্ধনী দ্বারা লেখা হয়।  জাভাস্ক্রিপ্ট অবজেক্ট আইটেম গুলো কমা দ্বারা আলাদা করা হয় ।

কোড গুলো দেখতে এরকম হয়ঃ

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

JavaScript Hoisting

জাভাস্ক্রিপ্ট হোস্টিং
ডাটা টাইপ ডিক্লেয়ারেশনের জন্য হোস্টিং জাভাস্ক্রিপ্টের একটি ডিফল্ট বেবস্থা।

জাভাস্ক্রিপ্টে ডিক্লেয়ারেশন হোস্ট পদ্ধতিতে হয়:
জাভাস্ক্রিপ্টে একটি ভেরিয়েবলকে ডিক্লেয়ার করার পূর্বে এটি বেবহার করা যায়।
অর্থাৎ ভেরিযবল টাইপ ডিক্লেয়ার করার আগেই তা বেবহার করা যায়।
নিচের উদাহরণ ১ এবং উদাহরণ ২ এর আউটপুট একই হবে:
উদাহরণ ১:
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x; // Display x in the element
var x; // Declare x
উদাহরণ ২:
var x; // Declare x
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x; // Display x in the element
উপরোক্ত উদাহরণগুলো বোঝার জন্য প্রথমে হোস্ট সম্পর্কে ভালো ধারণা থাকতে হবে।
হোস্টিং হলো জাভাস্ক্রিপ্টের একটি ডিফল্ট বেবস্থা যা কোনো একটি কারেন্ট ফাংশন বা স্ক্রিপ্টের সকল ডিক্লেয়ারেশন প্রথমেই ঠিক করে রাখে।

জাভাস্ক্রিপ্টে ইনিশিয়ালাইজ হোস্ট পদ্ধতিতে করা যায় না:
জাভাস্ক্রিপ্ট শুধুমাত্র ডিক্লেয়ারেশনকে হোস্ট করে ইনিশিয়ালাইজেশনকে হোস্ট করে না।
নিচের উদাহরণ ১ এবং উদাহরণ ২ এর আউটপুট এক হবে না:
উদাহরণ ১:
var x = 5; // Initialize x
var y = 7; // Initialize y
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
উদাহরণ ২:
var x = 5; // Initialize x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
var y = 7; // Initialize y

উদাহরণ ২ এ y প্রথমে ইনিশিয়ালাইজ করা হয়নি তাই y এখানে আনডিফাইনড দেখাবে।
উদাহরণ ২ কে নিচের উপায়ে লিখতে হবে:
var x = 5; // Initialize x
var y; // Declare y
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
y = 7; // Assign 7 to y

ভেরিয়েবলকে প্রথমে ডিক্লেয়ার করা:
জাভাস্ক্রিপ্টের অনেক ডেভলোপারদের কাছে হোস্টিং বিষয়টি সম্পূর্ণ পরিস্কার নয়, যদি কেউ হোস্টিং এর সঠিক বেবহার না জানে তাহলে প্রোগ্রামে অনেক বাগ থাকতে পারে, এই সমস্যা সমাধানের জন্য ভেরিয়েবলকে সবসময় শুরুতে ডিক্লেয়ার করা ভালো। তাছাড়াও জাভাস্ক্রিপ্ট যেহেতু একটি ইন্টারপ্রেটিং লেঙ্গুয়েজ তাই প্রোগ্রামিংএর জন্য এটি একটি সুন্দর চর্চ়াও।