آموزش طراحی سایت

این وبلاگ ، شامل آموزش کامل جاوا اسکریپت می باشد که توسط گروه غرب نت تهیه شده است.

آموزش طراحی سایت

این وبلاگ ، شامل آموزش کامل جاوا اسکریپت می باشد که توسط گروه غرب نت تهیه شده است.

شی مرورگر navigator در جاوا اسکریپت

شی مرورگر ( navigator ) در جاوا اسکریپت :

شی Navigator ، حاوی اطلاعاتی راجع به نوع مرورگر مورد استفاده کاربر است . این اطلاعات درباره مرورگری است ، که کاربر در آن لحظه در حال مشاهده صفحه با آن می باشد . این شی حاوی اطلاعاتی همچون نام مرورگر مورد استفاده ، نسخه ( ورژن ) ، زبان مورد استفاده مرورگر و ... می باشد . این اطلاعات در موارد مختلفی می تواند مورد استفاده قرار بگیرد ، که در ادامه به معرفی آنها خواهیم پرداخت .
این شی توسط واژه کلیدی navigator در سطح برنامه های اسکریپتی شناخته شده و حالت کلی استفاده آن به صورت زیر است :

Syntax

navigator.نام خاصیت

در ادامه به معرفی و تشریح خواص و رویدادهای مهم و پر کاربرد این شی در Java Script می پردازم .

تشخیص نوع مرورگر با استفاده از شی navigator :

یکی از مهمترین کاربردهای شی navigator در جاوا اسکریپت ، تشخیص نوع مرورگر مورد استفاده کاربر در هنگام مشاهده صفحه و نسخه ( ورژن ) آن است . این مسئله در چند مورد کاربرد دارد ، که به یکی از آنها اشاره می کنم .
مرورگر های وب و همچنین زبان های برنامه نویسی وب از جمله زبان اسکریپتی Java Script در طول زمان تغییرات زیادی داشته اند و ممکن است برخی از مرورگرها و یا یک ورژن خاص آنها از برخی از دستورات Java Script به درستی پشتیبانی نکنند . بنابراین یک طراح وب حرفه ای باید این مسئله را مد نظر داشته و برای آن تدابیر لازم را اتخاد کند . برای مثال ممکن است یک اسکریپت در مرورگر 6 IE به صورت صحیح اجرا شود ، ولی در مرورگر 5 IE به صورت صحیح اجرا نشود و یا مثلا مرورگر FireFox از یکسری دستورات خاص پشتیبانی نکند ، در حالی که همان کد در IE به صورت صحیح اجرا شود . موارد اختلاف کارایی زیادی بین مرورگرها وجود دارد و باید همواره این نکته را به خاطر داشته باشید .
در این صورت باید طراح در زمان نوشتن اسکریپت هایی که امکان بروز خطا ، عدم پشتیبانی و یا پشتیبانی نادرست در آنها وجود دارد ، دستورات متناسب با هر نوع مرورگر خاص را در اسکریپت تعیین کرده و با استفاده از دستورات شرطی و یا دستور Switch ، پس از تشخیص نوع مرورگر و ورژن آن ، دستورات مرتبط با آن نوع مرورگر خاص اجرا شود . در این حالت ، سازگاری برنامه با انواع دستورات اسکریپتی تضمین می شود .
خاصیت appName و appVersion شی Navigator ، به ترتیب نام و ورژن مرورگر مورد استفاده را مشخص می کنند . در بخش زیر خواص مهم شی Navigator را نشان داده ایم .

خواص مهم شی navigator :

در لیست زیر خواص مهم و پر کاربرد شی Navigator قرار دارد . برای دریافت اطلاعات بیشتر و مثال های عملی بر روی نام آنها کلیک کنید :

نام خاصیت

شرح

appCodeName

این خاصیت نام تعیین شده ویژه ( اسم رمز ) مربوط به نسخه مرورگر مورد استفاده را بر می گرداند . مثال : مثلا نام ویژه نسخه Mozilla ، IE7 است .

appName

این خاصیت نام کامل مرورگر مورد استفاده را بر می گرداند .

appVersion

این خاصیت پلتفرم و ورژن مرورگر مورد استفاده را بر می گرداند .

browserLanguage

این خاصیت زبان مرورگر مورد استفاده را بر می گرداند .

cookieEnabled

این خاصیت یک مقدار Boolen را بر می گرداند ، که مشخص می کند آیا مرورگر مورد استفاده از قابلیت cookie پشتیانی می کند ، یا خیر .

cpuClass

این خاصیت کلاس CPU مورد استفاده در کامپیوتر کاربر استفاده کننده از مرورگر را بر می گرداند .

onLine

این خاصیت یک مقدار Boolen را بر می گرداند ، که مشخص می کند آیا مرورگر در حالت OnLine است یا خیر .

platform

این خاصیت پلتفرم سیستم عامل کامپیوتر کاربر استفاده کننده از مرورگر را بر می گرداند .

SystemLanguage

این خاصیت زبان سیستم عامل کامپیوتر کاربر استفاده کننده از مرورگر را بر می گرداند .

 

شی Navigator - خاصیت appName

این خاصیت ، نام کامل مرورگر مورد استفاده را بر می گرداند . همانطور که در قسمت معرفی شی Navigator اشاره کردم ، مهمترین کاربرد این خاصیت تشخیص نوع مرورگر است . تشخیص نوع مرورگر می تواند کاربردهای زیادی داشته باشد ، که به برخی از آنها اشاره خواهم کرد .
مرورگر های وب و همچنین زبان های برنامه نویسی وب از جمله زبان اسکریپتی Java Script در طول زمان تغییرات زیادی داشته اند و ممکن است برخی از مرورگرها و یا یک ورژن خاص آنها از برخی از دستورات Java Script به درستی پشتیبانی نکنند . بنابراین یک طراح وب حرفه ای باید این مسئله را مد نظر داشته و برای آن تدابیر لازم را اتخاد کند . برای مثال ممکن است یک اسکریپت در مرورگر 6 IE به صورت صحیح اجرا شود ، ولی در مرورگر 5 IE به صورت صحیح اجرا نشود و یا مثلا مرورگر FireFox از یکسری دستورات خاص پشتیبانی نکند ، در حالی که همان کد در IE به صورت صحیح اجرا شود . موارد اختلاف کارایی زیادی بین مرورگرها وجود دارد و باید همواره این نکته را به خاطر داشته باشید .
در این صورت باید طراح در زمان نوشتن اسکریپت هایی که امکان بروز خطا ، عدم پشتیبانی و یا پشتیبانی نادرست در آنها وجود دارد ، دستورات متناسب با هر نوع مرورگر خاص را در اسکریپت تعیین کرده و با استفاده از دستورات شرطی و یا دستور Switch ، پس از تشخیص نوع مرورگر و ورژن آن ، دستورات مرتبط با آن نوع مرورگر خاص اجرا شود . در این حالت ، سازگاری برنامه با انواع دستورات اسکریپتی تضمین می شود .
از دیگر کاربردهای تشخیص نوع مرورگر می توان به نصب کردن برنامه های کاربردی ( Plug In ) مثل Flash Palyer یا Real Player بر روی مرورگر اشاره کرد . ممکن است یک سایت دانلود این برنامه ها ، نسخه های متفاوتی از یک نرم افزار را برای نصب بر روی مرورگر های مختلف تولید کرده باشد ، که برای هر مرورگر باید نسخه متناسب را نصب کرد . در این صورت سایت مذکور می تواند با تشخیص نوع مرورگر شما ، نسخه مخصوص به آن مرورگر را برای نصب در اختیار شما قرار بدهد ، تا در این صورت مشکل عدم کارایی نرم افزار پیش نیاید و کاربردهای دیگر .

شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax

navigator.appName

نکته : خروجی این خاصیت یک مقدار رشته ای ( String ) است .

مثال 1 : در مثال زیر با استفاده از خاصیت appName ، نام کامل مرورگر مورد استفاده کاربر را نشان داده ایم . نام نمایش داده شده در خروجی بستگی به مرورگری دارد که شما هم اکنون ، در حال مشاهده صفحه با آن هستید ( به دلیل اینکه خروجی های مثال ها به صورت اکتیو توسط مرورگر تولید می شود و از قبل طراحی شده نیست ) :

Example

<script type ="text/javascript">
  document.write ( "Full name of your browser is "   +   navigator.appName ) ;
</script>

کد

مثال 2 : کاربرد تشخیص نوع مرورگر :
در مثال زیر با استفاده از یک اسکریپت ، ابتدا نوع مرورگر را تشخیص داده و بر حسب مقدار آن ، در یک دستور Switch ، کد قابل اجرا بر 3 مرورگر Firefox , Oprer و IE را تعیین کرده ایم . در این اسکریپت ابتدا برنامه نوع مرورگر مورد استفاده کاربر را توسط خاصیت appName شی Navigator تشخیص داده و بر حسب آن دستور مناسب را اجرا خواهد کرد . نتیجه خروجی بستگی به مرورگری دارد که شما هم اکنون ، در حال مشاهده صفحه با آن هستید .
راهنمایی : خاصیت systemLanguge یکی از خواص شی Navoigator است ، که در ادامه آن را به طور کامل تر توضیح می دهم . این خاصیت زبان سیستم عامل کامپیوتر اجرا کننده مرورگر را بر می گرداند . اما این خاصیت فقط توسط مرورگر Intenet Explorer پشتیبانی شده و مرورگرهای Opera و FireFox از آن پشتیبانی نمی کنند . در اسکریپت زیر ، هدف این است که فقط زمانی که کاربر با مرورگر IE صفحه را مشاهده می کند ، زبان سیستم عامل را ببیند و در صورتی که از مرورگر های Firefox یا Opera استفاده می کند ، پیام عدم پشتیبانی مرورگر از آن دستور را اعلام کند .
راهنمایی 2 : نام مرورگر Firefox توسط خاصیت appName واژه Netscape است .

Example

<script type ="text/javascript">
switch ( navigator.appName )
  {
    case " Microsoft Internet Explorer " :
      document.write ( navigator.systemLanguage ) ;
      break;
    case " Netscape " :
      document.write ( " Your Browser Dosen't Support navigator.systemLanguage Property ! ") ;
      break ;
    case " Opera " :
      document.write ( " Your Browser Dosen't Support navigator.systemLanguage Property ! " ) ;
  }
</script>

کد

 

شی Navigator - خاصیت های appCodeName و appVersion

این خاصیت نام ویژه ( نام کد ) مرورگر مورد استفاده را بر می گرداند .
نام کد ، نامی خاص است که از سوی شرکت سازنده برای نام گذاری و مشخص کردن یک ورژن از مرورگر تعیین می شود . این نام بیشتر یک اصطلاح عامیانه است و کاربرد خاصی ندارد . مثلا نام ویژه مرورگرهای Mozilla , Internet Explorer است . شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax

navigator.appCodeName

نکته : خروجی این خاصیت یک مقدار رشته ای ( String ) است .

مثال 1 : در مثال زیر با استفاده از خاصیت appCodeName ، نام کد مرورگر مورد استفاده کاربر را نشان داده ایم . نام نمایش داده شده در خروجی بستگی به مرورگری دارد که شما هم اکنون ، در حال مشاهده صفحه با آن هستید ( به دلیل اینکه خروجی های مثال ها به صورت اکتیو توسط مرورگر تولید می شود و از قبل طراحی شده نیست  :(

Example

<script type ="text/javascript">
  document.write ( "Code name of your browser is "   +   navigator.appCodeName ) ;
</script>

کد

 

خاصیت appVersion شی Navigator  ورژن مرورگر:

این خاصیت ، ورژن و پلتفرم کامل مرورگر مورد استفاده را بر می گرداند . پلتفرم شامل اطلاعاتی از جمله سیست عامل سازگار با مرورگر ، زبان مورد استفاده و ... می باشد .
همانند بخش قبل که در مورد خاصیت appName ( نام مرورگر ) ، اشاره کردم ، تعیین نوع و ورژن مرورگر می تواند کاربرهای مختلفی داشته باشد . در ادامه به 2 خاصیت این روش اشاره می کنم .
مرورگر های وب و همچنین زبان های برنامه نویسی وب از جمله زبان اسکریپتی Java Script در طول زمان تغییرات زیادی داشته اند و ممکن است برخی از مرورگرها و یا یک ورژن خاص آنها از برخی از دستورات Java Script به درستی پشتیبانی نکنند . بنابراین یک طراح وب حرفه ای باید این مسئله را مد نظر داشته و برای آن تدابیر لازم را اتخاد کند . برای مثال ممکن است یک اسکریپت در مرورگر 6 IE به صورت صحیح اجرا شود ، ولی در مرورگر 5 IE به صورت صحیح اجرا نشود و یا مثلا مرورگر FireFox از یکسری دستورات خاص پشتیبانی نکند ، در حالی که همان کد در IE به صورت صحیح اجرا شود . موارد اختلاف کارایی زیادی بین مرورگرها وجود دارد و باید همواره این نکته را به خاطر داشته باشید .
در این صورت باید طراح در زمان نوشتن اسکریپت هایی که امکان بروز خطا ، عدم پشتیبانی و یا پشتیبانی نادرست در آنها وجود دارد ، دستورات متناسب با هر نوع مرورگر خاص را در اسکریپت تعیین کرده و با استفاده از دستورات شرطی و یا دستور Switch ، پس از تشخیص نوع مرورگر و ورژن آن ، دستورات مرتبط با آن نوع مرورگر خاص اجرا شود . در این حالت ، سازگاری برنامه با انواع دستورات اسکریپتی تضمین می شود .
از دیگر کاربردهای تشخیص نوع و ورژن مرورگر می توان به نصب کردن برنامه های کاربردی ( Plug In ) مثل Flash Palyer یا Real Player بر روی مرورگر اشاره کرد . ممکن است یک سایت دانلود این برنامه ها ، نسخه های متفاوتی از یک نرم افزار را برای نصب بر روی مرورگر های مختلف تولید کرده باشد ، که برای هر مرورگر باید نسخه متناسب را نصب کرد . در این صورت سایت مذکور می تواند با تشخیص نوع مرورگر شما ، نسخه مخصوص به آن مرورگر را برای نصب در اختیار شما قرار بدهد ، تا در این صورت مشکل عدم کارایی نرم افزار پیش نیاید و کاربردهای دیگر .

شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax

navigator.appVersion

نکته : خروجی این خاصیت یک مقدار رشته ای ( String ) است .

مثال 1 : در مثال زیر با استفاده از خاصیت appVersion ، ورژن کامل مرورگر مورد استفاده کاربر را نشان داده ایم . ورژن نمایش داده شده در خروجی بستگی به مرورگری دارد که شما هم اکنون ، در حال مشاهده صفحه با آن هستید ( به دلیل اینکه خروجی های مثال ها به صورت اکتیو توسط مرورگر تولید می شود و از قبل طراحی شده نیست  :

Example

<script type ="text/javascript">
  document.write ( "Full Version of your browser is "   +   navigator.appVersion ) ;
</script>

کد

 

خاصیت cookieEnabled :

این خاصیت یک مقدار Boolen  نوع True یا False  را بر می گرداند ، که تعیین می کند آیا قابلیت ایجاد و خواندن کوکی ( cookie ) در مرورگر شما فعال است یا خیر .
کوکی ( cookie ) متغیری است که بر روی کامپیوتر کاربر ذخیره شده و هر بار که کاربر آن صفحه را باز کند ، مقدار آن توسط مرورگر خوانده شده و می تواند مورد استفاده قرار بگیرد . از کوکی ها معمولا برای ثبت و ذخیره کردن اطلاعاتی همچون نام کاربری و رمز ورود به سایت ها و سایر اطلاعات شخصی کاربران استفاده می شود . در بخش های بعدی به طور کامل تر به بحث درباره نحوه ایجاد و خواندن کوکی ها خواهیم پرداخت .
شکل کلی استفاده از این خاصیت به شرح زیر است :

Syntax

navigator.cookieEnabled

نکته : خروجی این خاصیت یک مقدار Boolen ( نوع True یا False ) است . اگر مقدار بازگشتی True باشد ، مرورگر قابلیت ایجاد و خواندن کوکی را داراست و در صورت برگشت مقدار False ، آن قابلیت را نداشته و یا قابلیت غیر فعال شده است .

مثال 1 : در مثال زیر با استفاده از خاصیت cookiedEnabled ، فعال بودن قابلیت ایجاد و خواندن کوکی در مرورگر شما را در خروجی نمایش داده ایم . این قابلیت در مرورگر شما فعال است یا خیر ؟!

Example

<script type ="text/javascript">
  if ( navigator.cookieEnabled == true )
    document.write ( " cookie is < b > Enabled < /b > in your browser " ) ;
  else if ( navigator.cookieEnabled == false )
    document.write ( " cookie is < b > Not Enabled < /b > in your browser " );
</script>

کد

 

کاربرد خاصیت cookieEnabled :

مهمترین کاربرد این خاصیت این است که شما می توانید ابتدا چک کنید که آیا مرورگر کاربر قابلیت ایجاد و خواندن کوکی را دارد یا خیر . سپس در صورت فعال بودن ، دستورات اسکریپتی مربوط به خواندن و ایجاد کوکی اجرا شود . در این صورت قابلیت اطمینان و کارایی برنامه بالاتر می رود .
در مثال زیر نحوه استفاده از این کاربرد را در عمل نشان داده ایم :

مثال 1 : در مثال زیر با استفاده از خاصیت cookiedEnabled ، ابتدا فعال ایجاد و خواندن کوکی را در مرورگر شما بررسی کرده ایم . سپس با توجه به خروجی ، در صورت فعال بودن این قابلیت یکسری دستور ایجاد کوکی اجرا خواهد شد و در صورت فعال نبودن آن پیام عدم پشتیبانی مرورگر شما از کوکی اعلام خواهد شد .

Example

<script type ="text/javascript">
  if ( navigator.cookieEnabled == true )
  {
     function setCookie(c_name,value,expiredays)
     {
      var exdate=new Date()exdate.setDate(exdate.getDate()+expiredays)
      document.cookie=c_name+ "=" +escape(value)+
      ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
    }
  }
  else if ( navigator.cookieEnabled == false )
    document.write ( " cookie is < b > Not Enabled < /b > in your browser " );
</script>


خاصیت browserLanguage  زبان مرورگر:

این خاصیت زبان پیش فرض و مورد استفاده مرورگر را بر می گرداند .
برای مثال مقدار این خاصیت در زبان انگلیسی ( آمریکا ( en-us و برای زبان فارسی fa است .
شکل کلی استفاده از این خاصیت به شرح زیر است :

Syntax

navigator.browserLanguage

نکته : خروجی این خاصیت یک مقدار رشته ای ( String ) است .

مثال 1 : در مثال زیر با استفاده از خاصیت browserLanguage ، زبان مورد استفاده مرورگر را به کاربر نمایش داده ایم . مقدار خروجی این مثال بستگی به زبان مورد استفاده مرور گر شما دارد :

Example

<script type ="text/javascript">
  document.write ( "Default language of your browser is "   +   navigator.browserLanguage ) ;
</script>

کد

مثال 2 : در مثال زیر با استفاده از خاصیت browserLanguage ، ابتدا زبان مورد استفاده مرورگر را تشخیص داده و بر حسب آن پیام مناسب با آن زبان را در خروجی نشان داده ایم . به این صورت که اگر زبان مورد استفاده مرور گر انگلیسی باشد ، پیام به زبان انگلیسی و در صورتی که زبان آن فارسی باشد ، پیام به زبان فارسی چاپ خواهد شد :

Example

<script type ="text/javascript">
  if ( navigator.browserLanguage == "en-us" )
    document.write ( " welcome to Gharbnet.ir " ) ;
  else if ( navigator.browserLanguage == " fa " )
    document.write ( "
به سایت Gharbnet.ir خوش آمدید . " );
</script>

کد

 

خاصیت systemLanguage  زبان سیستم عامل مرورگر:

این خاصیت زبان پیش فرض و مورد استفاده سیستم عامل اجرا کننده مرورگر را بر می گرداند .
برای مثال مقدار این خاصیت در زبان انگلیسی ( آمریکا ) en-us و برای زبان فارسی fa است .
شکل کلی استفاده از این خاصیت به شرح زیر است :

Syntax

navigator.systemLanguage

نکته : خروجی این خاصیت یک مقدار رشته ای ( String ) است .

مثال 1 : در مثال زیر با استفاده از خاصیت systemLanguage ، زبان مورد استفاده سیستم عامل مرورگر را به کاربر نمایش داده ایم . مقدار خروجی این مثال بستگی به زبان مورد استفاده سیستم عامل مرور گر شما دارد :

Example

<script type ="text/javascript">
  document.write ( "Default oprating system language of your browser is "   +   navigator.systemLanguage ) ;
</script>

کد

 

خاصیت onLineوضعیت مرورگر :

این خاصیت یک مقدار Boolen  نوع true یا false  را برمی گرداند ، که تعیین می کند که آیا سیستم عامل مرورگر به اینترنت متصل است و یا در حالت offline قرار دارد .
حالت offline : مرورگرهای جدید از جمله ورژن های 4 IE و بالاتر دارای قابلیتی به نام work offline هستند . بر حسب این قابلیت کاربر می تواند بدون اتصال به شبکه اینترنت ، صفحات وبی که بر روی هارد دیسک کامپیوتر خود ذخیره کرده و یا در history مرورگر قرار دارند ، را باز و مشاهده کرده و بین صفحات حرکت کند . در این حالت می گویند که سیستم در حالت offline قرار دارد .
در مرورگر IE شما می توانید از طریق منوی Standard و زیر منوی Tools ، گزینه work offline را انتخاب کنید تا مرورگر در حالت offline قرار بگیرد . در حالت offline چنانچه بخواهید صفحه جدیدی که ذخیره نشده را باز کنید ، مرورگر به شما پیام می دهد که باید به اینترنت متصل شوید .
شکل کلی استفاده از این خاصیت به شرح زیر است :

Syntax

navigator.onLine

نکته : خروجی این خاصیت یک مقدار Boolen ( نوع true یا false ) است . مفهوم خروجی این خاصیت یکی از 2 حالت زیر را می تواند داشته باشد :

خروجی های خاصیت onLine

خروجی

وضعیت مرورگر

شرح

true

online

مرورگر به اینترنت متصل است .

false

offline

مرورگر در حالت work offline قرار داشته و به اینترنت متصل نیست .

مثال 1 : در مثال زیر با استفاده از خاصیت onLine ، وضعیت کاری مرورگر را به کاربر نمایش داده ایم . مقدار خروجی این مثال بستگی به وضعیت ارتباطی مرورگر مورد استفاده شما دارد :

Example

<script type ="text/javascript">
  if ( navigator.onLine == true )
    document.write ( " You navigator is in online mode " )
  else
    document.write( " You navigator is in offline mode " )
</script>

کد

 

خاصیت cpuClass  نوع CPU کامپیوتر مرورگر:

این خاصیت کلاس CPU کامپیوتر اجرا کننده مرورگر را بر می گرداند .
شکل کلی استفاده از این خاصیت به شرح زیر است :

Syntax

navigator.cpuClass

نکته : خروجی این خاصیت یک مقدار رشته ای ( String ) است .
به طور کلی 2 کلاس برای CPU ها داریم ، که خروجی این خاصیت می تواند یکی از 2 مقدار زیر باشد :

خروجی های خاصیت cpuClass

خروجی

کلاس CPU

شرح

x86

X86

کلاس CPU کامپیوتر اجرا کننده مرورگر X86 است .

Alpha

Alpha

کلاس CPU کامپیوتر اجرا کننده مرورگر Alpha است .

مثال 1 : در مثال زیر با استفاده از خاصیت cpuClass ، کلاس کامپیوتر شما را نمایش داده ایم . کلاس CPU کامپیوتر شما چیشت ؟؟!

Example

<script type ="text/javascript">
document.write ( navigator.cpuClass )
</script>

کد

undefinedundefined

خروجی

 

نظرات 0 + ارسال نظر
امکان ثبت نظر جدید برای این مطلب وجود ندارد.