سوالات مصاحبه JavaScript

جاوا اسکریپت یک زبان برنامه نویسی وب است که معمولا در سمت مشتری (Client-Side) جهت اعتبار سنجی مورد استفاده قرار می گیرد. این زبان مبتی بر شی، کراس پلتفرم (Cross-Platform) و بسیار سبک است. کدهای جاوا اسکریپت در صفحات HTML درج شده و توسط مرورگرهای وب قابل درک است.

- سبک وزن - زبان برنامه نویسی تفسیر شده - برای برنامه هایی که شبکه محور هستند خوب است - مکمل جاوا - مکمل HTML - متن باز - کراس پلت فرم

جاوا یک زبان برنامه نویسی کامل است. در مقابل جاوا اسکریپت یک برنامه کدگذاری شده است که می توان آن را به صفحات HTML معرفی کرد. این دو زبان اصلا به هم وابسته نیستند و برای اهداف متفاوتی طراحی شده اند. جاوا یک برنامه نویسی شی گرا (OOPS) یا ساخت یافته مانند ++C یا C است، در حالی که جاوا اسکریپت یک زبان برنامه نویسی سمت کلاینت است.

Named: این نوع توابع حاوی نام در زمان تعریف هستند. Anonymous: این نوع توابع هیچ نامی ندارند. آنها به صورت پویا در زمان اجرا اعلام می شوند.

Named function example:
function display()  
{  
  document.writeln("Named Function");  
}  
display();  

Anonymous function example:
var display=function()  
{  
  document.writeln("Anonymous Function");  
}  
display(); 

متد ()charAt برای یافتن مقدار کاراکتر موجود در ایندکس مشخص شده استفاده می شود. عدد ایندکس از 0 شروع می شود و به n-1 می رسد که n طول رشته است. مقدار ایندکس نمی تواند منفی، بزرگتر یا مساوی طول رشته باشد. مثلا:

var str="Javatpoint";
document.writeln(str.charAt(4));

NetScape زبان جاوا اسکریپت را ارائه کرد. مایکروسافت نام را تغییر داد و آن را JScript نامید تا از مشکلات مربوط به علامت تجاری(Trademark) جلوگیری کند. به عبارت دیگر، می توانید بگویید JScript همان جاوا اسکریپت است، اما مایکروسافت آن را ارائه می دهد.

<script type="text/javascript">  
   document.write("JavaScript Hello World!");  
</script>  

فرض کنید که نام فایل message.js است، تگ اسکریپت زیر را داخل تگ head قرار دهید.

<script type="text/javascript" src="message.js"></script>  

بله، جاوا اسکریپت یک زبان حساس به حروف کوچک و بزرگ است. مثلا در مثال زیر var اشتباه نوشته شده است و این اشتباه باعث میشود متن مورد نظر نمایش داده نشود.

Var msg = "JavaScript is a case-sensitive language"; //Here, var should be used to declare a variable  
function display()   
{  
   document.writeln(msg); // It will not display the result.  
}   
display();

دو نوع کامنت در جاوا اسکریپت وجود دارد: - کامنت تک خطی: با // در ابتدای متن ایجاد می شود (دوتا Forward Slash). - کامنت چند خطی: به صورت /* نوشتن کامنت در این قسمت */ ایجاد میشود.

عملگر == فقط برابری را بررسی می کند در حالی که === برابری و نوع داده را بررسی می کند، یعنی مقادیر مقایسه شده باید از یک نوع باشند.

از ویژگی innerHTML برای نوشتن کد HTML با استفاده از جاوا اسکریپت به صورت پویا استفاده می شود. بیایید یک مثال ساده را ببینیم:

<div id="demo"></div> 

<script>
  document.getElementById("demo").innerHTML ="<h2>This is heading using JavaScript</h2>";
</script>

ویژگی innerText برای نوشتن متن ساده با استفاده از جاوا اسکریپت به صورت پویا استفاده می شود. بیایید یک مثال ساده را ببینیم:

document.getElementById('demo').innerText="This is text using JavaScript";  

اگر مقدار متغیر یک عدد نباشد، تابع ()isNan مقدار true را برمی گرداند. مثلا:

function number(num) {  
  if (isNaN(num)) {  
    return "Not a Number";  
  }  
  return "Number";  
}  
console.log(number('Hello'));  
// expected output: "Not a Number"  
  
console.log(number('1000'));  
// expected output: "Number"  

1310 زیرا اگر مقدار عددی قبل و بعد از + وجود داشته باشد مانند عملگر حسابی رفتار می کند.

11210 زیرا بعد از یک رشته ("1")، همه + به عنوان عملگر الحاق رشته در نظر گرفته می شوند.

- Undefined Value: متغییری که اعلان شده ولی مقداری به آن تخصیص داده نشده است. - Null Value: متغییری که صریحا به آن مقدار Null تخصیص داده شده است.

int val;//Here, val has an undefined value

String str=null;//Here, str has a null value

BOM مخفف Browser Object Model است که به جاوا اسکریپت اجازه تعامل با مرورگر را می دهد. BOM سلسله مراتبی از اشیاء مرورگر است که برای دستکاری متدها و ویژگی های مرتبط با خود مرورگر وب استفاده می شود. اشیایی که BOM را تشکیل می دهند شامل پنجره (Window)، ناوبر (Navigator)، صفحه نمایش (Screen)، تاریخچه (History)، مکان (Location) و سند(Document) هستند.

DOM که مخفف Document Object Model است یک API است که ساختار منطقی اسناد HTML را نشان می دهد و می توان از آن برای دسترسی و تغییر محتوای HTML استفاده کرد. در تصویر زیر نمونه ای از یک DOM را برای تگ <table> ملاحظه میکنید.

شی window به طور خودکار توسط مرورگر ایجاد می شود که یک پنجره از یک مرورگر را نشان می دهد. این یک شی متعلق به جاوا اسکریپت نیست بلکه یک شی مرورگر است. شی window برای نمایش کادر محاوره ای بازشو(Popup) استفاده می شود و دارای متدهای زیر میباشد: - ()alert: کادر هشدار حاوی پیام را با دکمه ok نمایش می دهد. - ()confirm: کادر محاوره ای تایید حاوی پیام با دکمه ok و cancel را نمایش می دهد. - ()prompt: یک کادر محاوره ای برای دریافت ورودی از کاربر نمایش می دهد. - ()open: پنجره جدید را باز می کند. - ()close: پنجره جاری را می بندد. - ()setTimeout: کاری را بعد از زمان مشخص انجام می دهد، مانند فراخوانی تابع، ارزیابی عبارات. در کد زیر مثالی را میبینید که با کلیک بر روی یک باتن پنجره ای حاوی یک پیام نشان میدهد:

<script type="text/javascript">  
  function show(){  
   alert("Hello World!");  
  }  
</script>  
<input type="button" value="click" onclick="show()"/>  

از شی history یک مرورگر می توان برای جابجایی به صفحات قبلی یا بعدی یا صفحه دیگری استفاده کرد. سه متد برای شی history وجود دارد: - ()history.back: صفحه قبلی را بارگیری می کند. - ()history.forward: صفحه بعدی را بارگیری می کند. - history.go(number) : ممکن است عدد برای جابه جایی به صفحه بعدی مثبت و برای قبلی منفی باشد. صفحه با شماره داده شده را بارگیری می کند.

3 راه برای ایجاد یک شی در جاوا اسکریپت وجود دارد. - با استفاده از Object literal - با ایجاد یک نمونه از Object - توسط Object Constructor

1. Object literal
<script>  
   emp={id:102,name:"Shyam Kumar",salary:40000}  
   document.write(emp.id+" "+emp.name+" "+emp.salary);  
</script>  

2.  Create an instance
<script>  
   var emp=new Object();  
   emp.id=101;  
   emp.name="Ravi Malik";  
   emp.salary=50000;  
   document.write(emp.id+" "+emp.name+" "+emp.salary);  
</script>  

3. Object constructor
<script>  
   function emp(id,name,salary){  
      this.id=id;  
      this.name=name;  
      this.salary=salary;  
   }  
   e=new emp(103,"Vimal Jaiswal",30000);  
  
   document.write(e.id+" "+e.name+" "+e.salary);  
</script>  

3 راه برای ایجاد آرایه در جاوا اسکریپت وجود دارد. - با object literal - با ایجاد یک نمونه از آرایه - با استفاده از سازنده(Constructor) آرایه بیایید یک کد ساده برای ایجاد یک آرایه با استفاده از سه روش بالا ببینیم.

1. By array literal
<script>  
   var emp=["Sonoo","Vimal","Ratan"];  
   for (i=0;i<emp.length;i++){  
   document.write(emp[i] + "<br/>");  
   }  
</script>  

2. By creating instance of Array directly (using new keyword)
<script>  
   var i;  
   var emp = new Array();  
   emp[0] = "Arun";  
   emp[1] = "Varun";  
  emp[2] = "John";  
  
   for (i=0;i<emp.length;i++){  
   document.write(emp[i] + "<br>");  
  }  
</script>  

3.By using an Array constructor (using new keyword)
<script>  
   var emp=new Array("Jai","Vijay","Smith");  
   for (i=0;i<emp.length;i++){  
   document.write(emp[i] + "<br>");  
   }  
</script>

در جاوا اسکریپت، از متد ()event.preventDefault برای جلوگیری از رفتار پیش‌فرض یک عنصر استفاده می‌شود. به عنوان مثال اگر از آن در یک عنصر form استفاده کنید، از submit آن جلوگیری می کند. اگر در یک عنصر anchor استفاده شود، از انتقال به فرم دیگر جلوگیری می کند. اگر در یک contextmenu استفاده شود، از نمایش آن جلوگیری می کند. از طرف دیگر، متد ()event.stopPropagation برای متوقف کردن انتشار یک رویداد به عناصر بالاتر مورد استفاده قرار میگیرد. به مثال زیر دقت کنید. در این مثال از دو تگ div استفاده شده که با کلیک بر div1 دو هشدار (alert) نمایش داده خواهد شد. چک باکسی وجود دارد که در صورتی که تیک خورده باشد دستور ()event.stopPropagation اجرا خواهد شد و در نتیجه از انتشار رویداد(event) کلیک div1 به رویداد کلیک div2 جلوگیری کرده و هشدار (alert) دوم نمایش داده نمیشود.

<!DOCTYPE html>
<html>
<body>

<p>Click DIV 1:</p>
<div onclick="func2()">DIV 2
  <div onclick="func1(event)">DIV 1</div>
</div>

Stop propagation:
<input type="checkbox" id="check">

<script>
function func1(event) {
  alert("DIV 1");
  if (document.getElementById("check").checked) {
    event.stopPropagation();
  }
}

function func2() {
  alert("DIV 2");
}
</script>

</body>
</html>

مکان نما را می توان برای انتظار در جاوا اسکریپت با استفاده از ویژگی "cursor" ست کرد. اگر مثال زیر را اجرا کنید میبینید که وقتی با موس روی عبارت "Wait here please!" میرویم، مکان نما به حالت انتظار میرود.

<!DOCTYPE html>
<html>
<body>

<p id="demo">Wait here please!</p>

<button type="button" onclick="myFunction()">Change cursor</button>
 
<script>
function myFunction() {
  document.getElementById("demo").style.cursor = "wait";
}
</script>

</body>
</html>

یک آرایه سه بعدی

var newArray = [[[]]];  

Negative Infinity عددی در جاوا اسکریپت است که می توان آن را با تقسیم عدد منفی بر صفر بدست آورد. مثلا:

var num=-5;  
function show()  
{  
  document.writeln(num/0);  
}  
show();  
//expected output: -Infinity  

ViewState و Session State دو راه حل برای مشکلات در برنامه های تحت وب هستند. مشکل شامل دسترسی کاربر کامپیوتر به اطلاعات یک صفحه وب در یک دوره زمانی خاص است. تفاوت های آنها را میتوان در موارد زیر خلاصه کرد: - ViewState در سمت مشتری استفاده می شود در حالی که Session در سمت سرور استفاده می شود. قرار گرفتن ViewState در سمت مشتری باعث می شود که مقادیر آن منقضی نشود. برعکس Session به علت ذخیره شدن در سمت سرور قابل انقضاست. - ViewState فقط می‌تواند یک رشته یا داده‌های سریالی را در خود نگه دارد در حالی که Session می‌تواند انواع مختلفی از داده‌ها را در خود جای دهد. این باعث می شود که میزان داده ذخیره شده در ViewState در مقایسه با Session بسیار کمتر شود. - ViewState تنها مقادیر صفحه فعلی را حفظ می کند. در حالی که Session State نه تنها بر روی صفحه فعلی بلکه بر کل برنامه و کل مدت زمان استفاده از مرورگر تأثیر می گذارد. به عبارت دیگر Session می‌تواند داده‌ها را به یک صفحه یا پنجره جدید منتقل کند یا به آن دسترسی داشته باشد. - Session داده های خود را در حافظه سرور ذخیره می کند در حالی که ViewState داده های خود را در فیلدهای مخفی مرورگر به عنوان داده های رمزگذاری شده پنهان می کند. - ViewState در مقایسه با Session پهنای باند بیشتری مصرف می کند اما فضای حافظه کمتری را مصرف می کند زیرا تمام داده ها در لحظه بسته شدن صفحه از بین می روند. اما Session به علت ذخیره انواع مختلف داده در حافظه سرور می تواند بر بار حافظه سرور تأثیر منفی بگذارد. - ViewState و Session هم می توانند در محیط سرور اجرا شوند و هم قابل دسترسی باشند.

- Alert Box - Confirm Box - Prompt Box در کد زیر مثال هایی برای هر کدام از انواع باکس ها مشاهده می کنید:

*Example of alert()
<script type="text/javascript">  
   function msg(){  
       alert("Hello Alert Box");  
   }  
</script>  

<input type="button" value="click" onclick="msg()"/>  
----------------------------------------------------------------------------------
*Example of confirm() 
<script type="text/javascript">  
   function msg(){  
      var v= confirm("Are u sure?");  
      if(v==true){  
         alert("ok");  
      }  
      else{  
         alert("cancel");  
      }  
}  
</script>  
  
<input type="button" value="delete record" onclick="msg()"/>  
---------------------------------------------------------------------------------
*Example of prompt()
<script type="text/javascript">  
   function msg(){  
      var v= prompt("Who are you?");  
      alert("I am "+v);    
   }  
</script>  
  
<input type="button" value="click" onclick="msg()"/>  

می توان از دستور navigator.appVersion برای شناسایی سیستم عامل در دستگاه مشتری استفاده کرد.

<form name="myform" action="index.php">  
Search: <input type='text' name='query' />  
<a href="javascript: submitform()">Search</a>  
</form>  
<script type="text/javascript">  
   function submitform()  
   {  
        document.myform.submit();  
   }  
</script>

<script type="text/javascript">  
   document.body.bgColor="pink";  
</script>  

با کمک بلوک try/catch، می توانیم استثناها را در جاوا اسکریپت مدیریت کنیم. جاوا اسکریپت از کلمات کلیدی try، catch، finally و throw برای مدیریت خطا پشتیبانی می کند.

<script>  
  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="abc.jsp" onsubmit="return validateform()" >  
    Name: <input type="text" name="name"><br/>  
    Password: <input type="password" name="password"><br/>  
    <input type="submit" value="register">  
  </form>  
</body>  

کلمه کلیدی this یک متغیر مرجع است که به شی فعلی اشاره دارد. مثلا:

var address=    
{    
  company:"Mosahebeyar",    
  city:"Tehran",    
  state:"UP",    
  fullAddress:function()    
  {    
    return this.company+" "+this.city+" "+this.state;    
  }    
};
    
var fetch=address.fullAddress();    
document.writeln(fetch);   

جاوا اسکریپت هیچ پیام خطایی را در مرورگر نشان نمی دهد. با این حال، این اشتباهات می تواند بر خروجی تاثیر بگذارد. دیباگ کدهای جاوا اسکریپت آسان نیست اما خوشبختانه، همه مرورگرهای مدرن دارای یک دیباگر جاوا اسکریپت هستند. دیباگرهای داخلی(Built-in) باعث می شوند که خطاها به کاربر گزارش شود. با دیباگر می توانید Break-point (مکان هایی که اجرای کد را می توان متوقف کرد) تنظیم کنید و متغیرها را در حین اجرای کد بررسی کنید. Debugging را در مرورگر خود با کلید F12 فعال کرده و در منوی Debugger، تب Console را انتخاب کنید.

کلمه کلیدی debugger در جاوا اسکریپت برای تعیین Break-point از طریق خود کد مورد استفاده قرار می گیرد. debugger اجرای برنامه را در موقعیتی که اضافه شده متوقف می کند. مثال زیر را ببینید:

function display()  
{  
  x = 10;    
  y = 15;    
  z = x + y;    
  debugger;    
  document.write(z);    
  document.write(a);     
}     
display();  

شی Math در جاوا اسکریپت چندین ثابت(Constant) و متد برای انجام عملیات ریاضی ارائه می کند. برخلاف آبجکت date، سازنده(Constructor) ندارد. مثلا:

function display()  
{  
    document.writeln(Math.random());  
}  
display();  

شیء Date در جاوا اسکریپت می تواند برای به دست آوردن سال، ماه و روز استفاده شود.همچنین شما میتوانید با کمک شیء Date یک تایمر در صفحه وب نمایش دهید.

function display()  
{  
  var date=new Date();    
  var day=date.getDate();    
  var month=date.getMonth()+1;    
  var year=date.getFullYear();    
  document.write("<br>Date is: "+day+"/"+month+"/"+year);    
}  
display();  

Netscape شرکت نرم افزاری است که جاوا اسکریپت را توسعه داده است.

متغیرهای سراسری در طول کد در دسترس هستند و هیچ محدوده دسترسی ندارد. کلمه کلیدی var برای اعلان یک متغیر یا شی محلی(Local) استفاده می شود. اگر کلمه کلیدی var حذف شود، یک متغیر سراسری اعلان می شود. مشکلاتی که در استفاده از متغیرهای سراسری با آن مواجه هستیم، تضاد نام متغیرها در محدوده محلی و سراسری است. همچنین، اشکال زدایی و تست کدهایی که به متغیرهای سراسری متکی هستند دشوار است.

globalVariable = “Test”;//Declare a global

Prompt Box در واقع یک Popup است که متشکل از یک Label و Textbox است و کاربر از طریق آن یک متن یا شماره را وارد کرده و به برنامه ارسال می کند.

تایمرها برای اجرای یک قطعه کد در زمان تعیین شده یا تکرار کد در یک بازه زمانی معین استفاده می شوند. این کار با استفاده از توابع setTimeout، setInterval و clearInterval انجام می شود. - تابع setTimeout (function، delay) برای شروع تایمر استفاده می شود که یک تابع خاص را پس از تاخیر ذکر شده فراخوانی می کند. - تابع setInterval(function, interval) به طور مکرر تابع داده شده را در فواصل تعیین شده اجرا می کند و فقط در صورت لغو متوقف می شود. - تابع clearInterval(id) به تایمر دستور توقف می دهد. تایمرها در یک Thread کار می‌کنند، و بنابراین رویدادها ممکن است در صف قرار بگیرند و منتظر اجرا شوند.

document.form[0].submit();

بله. جاوا اسکریپت یک زبان Loosely Typed است، به این معنی که هر زمان که یک اپراتور یا عبارتی انتظار یک نوع داده خاص را داشته باشد، جاوا اسکریپت به طور خودکار داده ها را به آن نوع تبدیل می کند.

let result;

result = '3' + 2; 
console.log(result) // "32"

result = '3' + true; 
console.log(result); // "3true"

result = 3 + true;
console.log(result); // 4

result = 3 + '1';
console.log(result); // 4

document.getElementById("myText"). style. fontSize = "20";
document. getElementById ("myText"). className = "anyclass";

شما نمی توانید در جاوا اسکریپت، در سمت مشتری (مرورگرها)، فایل ها را بخوانید یا بنویسید. این کار را می توان در سمت سرور با استفاده از ماژول fs در Node.js انجام داد. اجازه دهید به مثال هایی از خواندن و نوشتن فایل ها با استفاده از ماژول fs در Node.js نگاه کنیم:

var fs = require("fs");
fs.writeFile('input.txt', 'Simply Easy Learning!', function(err) {
   if (err) {
      return console.error(err);
   }
   console.log("Data written successfully!");

   fs.readFile('input.txt', function (err, data) {
      if (err) {
         return console.error(err);
      }
      console.log("Asynchronous read: " + data.toString());
   });
});
---------------------------------------------------------
Output:
Data written successfully!
Asynchronous read: Simply Easy Learning!

کوکی ها داده هایی هستند که در قالب فایل های متنی کوچک در کامپیوتر شما ذخیره می شوند و برای به خاطر سپردن اطلاعات کاربر اختراع شدند. هنگامی که کاربر از یک صفحه وب بازدید می کند، نام او می تواند در یک کوکی ذخیره شود. دفعه بعد که کاربر از صفحه بازدید می کند، کوکی نام او را به خاطر می آورد. کوکی ها صورت زیر ذخیره می شوند: name = value هنگامی که یک مرورگر یک صفحه وب را از یک سرور درخواست می کند، کوکی های متعلق به صفحه به درخواست اضافه می شوند. به این ترتیب سرور داده های مربوط به اطلاعات کاربران را دریافت می کند و در قسمت مناسب (مانند صفحه لاگین) به اون نشان می دهند.

// Create a Cookie
document.cookie = "username=John Doe";

//Read a Cookie
let x = document.cookie;

متد ()pop آخرین عنصر را از آرایه داده شده خارج می کند و آن را برمی گرداند. عملکرد آن مشابه متد ()shift است، اما با این تفاوت که که متد Shift عنصر ابتدایی آرایه را خارج می کند.

var people= ["َMahsa", "Hadi", "Rana"];
people.pop();
//Now people becomes Mahsa,Hadi

- Primitive : داده های عددی و بولی - Reference types : انواع پیچیده تری مانند رشته ها (Strings) و تاریخ ها