طراحی وب سایت در اهواز -

عضویت

پشتیبانی

تماس با ما

تلفن تماس

  • امروز پنجشنبه 8 تیر 1396
  • آموزش جاوا اسکریپت

    ساختن لینک به نقاط مختلف یک صفحه

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

    ممکن است شما بخواهید صفحه را به چندین قسمت تقسیم کنید و در بالای صفحه فهرستی برای آن قرار دهید که بیننده با کلیک کردن بر روی عنوان هر قسمت به آن قسمت در صفحه برود.

    در این موارد شما می توانید از پیوندهای نامگذاری شده که در قسمتهای مشخصی از صفحه شما قرار دارند که شما می خواهید به آن نقاط لینک بسازید استفاده کنید. شما می توانید به هر نقطه از صفحه لینک بسازید اما فعلاً در مورد لینک به بالای صفحه توضیح می دهیم.

    برای این کار به بالای قسمت BODY در متن HTML خود بروید ( درست بعد از تگ BODY )

    اکنون این تگ را تایپ کنید:

    <a name="top"></a>

    شما می توانید هر نامی را بین دو دابل کوت بنویسید. نوشتن top کار ما را برای درک بهتر آسان می کند.

    حالا به جایی در قسمت BODY بروید که می خواهید از آنجا لینکی به بالای صفحه ایجاد کنید.

    این فرمان را تایپ کنید:

    <a href="#top">بازگشت به بالا</a>

    اکنون وقتی لینک بازگشت به بالا را کلیک کنید به بالای صفحه می روید.

     

    علامت # به مرورگر می فهماند که مقصد پیوندی نامگذاری شده در همین صفحه است. اگر شما یک پیوند با نام "UP" ساخته بودید اکنون باید از "up#" به جای "top#" استفاده می کردید.

    شما می توانید در هر کجای صفحه یک پیوند نامگذاری شده بسازید و به وسیله یک لینک از قسمتهای دیگر به آن قسمت بازگردید.

     

    با استفاده از این روش نه تنها می توانید لینکی بسازید که بازدید کننده با کلیک بر روی آن به قسمت دیگری از همان صفحه برود، بلکه می توانید از این روش در لینکهایی که در دیگر صفحات قرار دارند استفاده کنید و بازدید کننده را به قسمت مشخصی از یک صفحه دیگر بفرستید. تنها نکته ر اینجا این است که در صفحه مقصد باید لینکهای نامگذاری شده وجود داشته باشند و از این نامگذاری در لینکی که رد صفحه مبدأ قرار دارد استفاده شود.

    برای مثال اگر شما لینک زیر را در صفحه خود قرار دهید با کلیک بر روی آن می توانید بخش پایینی این صفحه را مشاهده کنید و باز دید خود را از پایین این صفحه شروع کنید. ( ما یک لینک نام گذاری شده با نام bottom# در پایین این صفحه قرار داده ایم ) :

    <a href="http://www.wbdes.com/HTML/link_to_same_page.php#bottom">ساختن لینک بازگشت به بالای صفحه</a>

    تنظیم خاصیت float برای عناصر HTML از طریق جاوا اسکرپت

    امروز با در خواست یکی از بازدید کنندگان در مورد خاصیت float و جاوا اسکرپت صحبت میکنیم. احتمالاً با خاصیت float در CSS آشنایی دارید. این خاصیت به ویژه وقتی مورد استفاده قرار میگیرد که طراح قصد داشته باشد بدون استفاده از جدولها چهارچوب صفحه را طراحی کند.

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

    برای اختصاص دادن یک ویژگی CSS به المنتهای HTML از شیء style استفاده می شود. اما این نکته را باید در نظر داشته باشیم که float از کلمات کلیدی رزرو شده در جاوا اسکرپت است. به همین دلیل نمیتوانیم از متد style.float برای این منظور استفاده کنیم.

    برای جلوگیری از تداخل بین float مورد استفاده در CSS و کلمه کلیدی float در جاوا اسکرپت به منظور اختصاص این ویژگی به المنتهای HTML از متد cssFloat استفاده میکنیم. برای درک بهتر میتوانید به مثال زیر در دو حالت قبل و بعد از اختصاص این ویژگی با به المنت توجه کنید:

    <div style="border:1px #666 dashed; width:50%; margin:10px auto">
    <div style="width:100px; height:100px; background: #fc0;">بلوک مورد نظر قبل از اختصاص ویژگی</div>
    <p>این متن قبل از اختصاص ویژگی به المنت در زیر بلوک نمایش داده میشود</p>
    </div>

    قبل از اختصاص ویژگی float:

    بلوک مورد نظر قبل از اختصاص ویژگی

    این متن قبل از اختصاص ویژگی به المنت در زیر بلوک نمایش داده میشود

    کد مربوط به اعمال ویژگی با استفاده از جاوا اسکرپت:

    <div style="border:1px #666 dashed; width:50%; margin:10px auto">

    <div id="my-block-2" style="width:100px; height:100px; background: #fc0;">
    بلوک مورد نظر قبل از اختصاص ویژگی</div>
    <p>این متن قبل از اختصاص ویژگی به المنت در زیر بلوک نمایش داده میشود</p> <br clear="all">
    </div>

    <script type="text/javascript">
    document.getElementById("my-block-2").style.cssFloat = "right"; </script>

    و در انتها این چیزی هست که در مرورگر نمایش داده خواهد شد:

    بلوک مورد نظر پس از اختصاص ویژگی

    این متن پس از اختصاص ویژگی به المنت در کنار بلوک نمایش داده میشود

    مقادیر زیر را میتوان برای متد cssFloat به کار برد:

    noen :
    این مقدار پیش فرض متد هست و تأثیر float را بر روی المنت خنثی میکند.
    right :
    این مقدار باعث می شود تا بلوک مورد نظر تا حد امکان در سمن راست المنت والد خود قرار گیرد.
    left :
    این مقدار باعث میشود تا بلوک مورد نظر تا حد امکان در فضای سمت چپ المنت والد خود قرار گیرد.

    در پایان این مقاله باید به این نکته اشاره کنم که مقادیر متد cssFloat از نوع رشته ای (String) هستند پس باید در کد جاوا اسکرپت در کوتیشن نوشته شوند.

    آموزش کار با تاریخچه مرورگر با استفاده از جاوا اسکرپت

    مرورگر ها به صورت پیش فرض آدرس و حتی خود صفحاتی را که کاربر مشاهده می کند ذخیره می کنند. این آدرسها به ترتیبی که کاربر آنها را مشاهده کرده است در تاریخچه (history) مرورگر ثبت می شوند و دکمه های Back و Forward پنجره مرورگر بر اساس این تاریخچه کار می کنند. با استفاده از جاوا اسکرپت می توانیم به این تاریخچه دسترسی داشته باشیم و با کمک آن مسیر کاربران را هدایت کنیم.

    ما برای کار با تاریخچه مرورگر در اینجا از دکمه های HTML استفاده می کنیم که با کمک رویداد onclick در هنگام کلیک کردن روی این دکمه ها دستورات مورد نظر ما اجرا خواهند شد. در اینجا می توانید کد HTML مربوط به ساخت این دکمه ها را مشاهده کنید (البته مقدار مربوط به شناسه onclick مربوط به دستورات جاوا اسکرپت است که بعداً وارد خواهد شد) :

    <input type="button" value="متن روی دکمه" onclick="">

     

    دستورات مختلفی برای کار با تاریخچه مرورگر وجود دارد که همه آنها از شیء history استفاده می کنند. در ادامه می توانید تعدادی از این دستورات را که با بیشتر مرورگرها کار می کنند مشاهده کنید


    history.back()

    از این فرمان می توانید جهت هدایت کاربران به صفحه ای که قبل از صفحه کنونی در پنجره مرورگر مشاهد کرده اند استفاده کنید. این دستور دقیقاً مانند دکمه Back در پنجره مرورگر عمل می کند و در صورتی که صفحه کنونی اولین صفحه ای باشد که از زمان باز شدن پنجره نمایش داده شده باشد این دستور کاربردی ندارد.

    در اینجا می توانید کئ مورد استفاده در مثال بالا را مشاهده کنید :

    <input type="button" value="برای بازگشت به صفحه قبل اینجا را کلیک کنید" onclick="history.back()">

    history.forward()

    در صورتی که بازدید کننده قبلاً از دکمه Back در مرورگر خود استفاده کرده باشد یا با استفاده از دستور
    ()history.back به صفحه قبلی باز گشته باشد می توانیم از دستور ()history.forward برای هدایت بازدید کننده به صفحه ای که پس از صفحه کنونی باز کرده است استفاده کنیم. این دستور کاربردی مشابه دکمه Forward در پنجره مرورگر دارد و کاربرد آن عکس کاربرد ()history.back است.

    دکمه زیر با استفاده از دستور ()history.forward شما را به صفحه ای که برای مثال مربوط به بازگشت به صفحه قبلی مشاهده کرده اید هدایت می کند :

     

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

    <input type="button" value="نمایش صفحه بعدی" onclick="history.forward()">

    history.go()

    با استفاده از دستورهای ()history.back و ()history.forward فقط امکان این وجود دارد که کاربران را یک صفحه به عقب یا جلو هدایت کنیم. اگر بخواهیم بازدید کننده را به چندین صفحه عقب یا جلو هدایت کنیم باید از دستور ()history.go استفاده کنیم.


    1- استفاده از مقداری مثبت برای ()history.go

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

    <input type="button" value="متن روی دکمه" onclick="history.go(3)">

    کد بالا دکمه ای را می سازد که کلیک کردن بر روی آن همان کاری را انجام می دهد که سه بار فشار دادن دکمه Forward در پنجره مرورگر انجام می دهد.

    در صورتی که دستور به صورت (1)history.go نوشته شود مانند دستور ()history.forward عمل می کند.


    2- استفاده از مقدار صفر برای ()history.go

    در صورتی که این دستور به صورت (0)history.go نوشته شود باعث باز بارگذاری مجدد همان صفحه خواهد شد. برای مثال به کد زیر و دکمه ساخته شده با آن توجه کنید :

    <input type="button" value="بارگذاری مجدد صفحه" onclick="history.go(0)">

    این هم دکمه ساخته شده :


    3- استفاده از مقادیر منفی برای ()history.go

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

    <input type="button" value="متن روی دکمه" onclick="history.go(-3)">

    این کد دکمه ای را می سازد که وقتی کاربر آنرا کلیک کند به سومین صفحه ای که قبل از صفحه کنونی در پنجره مرورگر بازدید کرده است هداین می شود. کاربرد این دکمه در اینجا مشابه سه بار فشار دادن دکمه Back در پنجره مرورگر است.


    history.length

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

    نمایش تعداد صفحات موجود در تاریخچه مرورگر

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

    <a href="javascript:alert(history.length)">
    نمایش تعداد صفحات موجود در تاریخچه مرورگر
    </a>

    درخواست اطلاعات از کاربر

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

    prompt('سؤال شما', ' ');

    این فرمان یک پنجره را قبل از باز شدن صفحه نمایش می دهد که سؤال شما در آن پرسیده می شود و بیننده می تواند جواب خود را در کادری که برای او در نظر گرفته شده بنویسد. دو سینگل کوت بعدی جواب پیش فرض شما برای سؤال است. اگر شما چیزی بین این دو سینگل کوت ننویسید، بیننده با یک لیست خالی، آماده برای نوشتن مواجه می شود. این پیغام قبل از بارگذاری صفحه نمایش داده می شود پس شما می توانید پاسخ بیننده را در صفحه نمایش دهید.

    حالا به سراغ اسکرپتی که این کار را انجام می دهد می رویم. توجه داشته باشید که دستورات prompt و if/else در بخش HEAD صفحه وارد می شوند ولی نام کاربر در بخش BODY صفحه مشاهده می شود.

    <html dir="rtl" >

    <head>
    <script language="javascript">
    <!--
    var yourname=prompt('لطفاً نام خود را وارد کنید', '');
    if ( (yourname=='') || (yourname==null) )
    {
    yourname="ناشناس";
    }
    //-->
    </script>
    </head>

    <body>
    <script language="javascript">
    <!--
    document.write("<center><h1>سلام " +yourname+ " ،به سایت ما خوش آمدید <\/h1><\/center>");
    //-->
    </script>
    </body>

    </html>

    اولین چیزی که اتفاق می افتد این است که متغیر yourname مقداری را که کاربر برای آن وارد می کند به خود می گیرد. پس مقدار متغیر yourname معادل استرینگی است که نام کاربر را می سازد.

    دستور if/else نام « ناشناس » را در صورتی که کاربر نامی را وارد نکند به عنوان مقدار متغیر yourname قرار می دهد. این دستور چک می کند که اگر نامی وارد نشود (null) و یا اگر فضای خالی وارد شود، مقدار « ناشناس » را به متغیر yourname می دهد.

    در بخش body متن دوباره از تگ script استفاده می کنیم تا کدهای جاوا اسکرپت از بقیه متن html متمایز شود. در این قسمت ما از یک فرمان جدید یعنی ;(" ")document.write استفاده کرده ایم. این همان چیزی است که به متغیر yourname اجازه نوشته شدن در صفحه html را می دهد. ما در این پیغام دو استرینگ را به علاوه متغیر yourname در صفحه می نویسیم. متغیر yourname در این فرمان بین دو دابل کوت قرار نمی گیرد چون یک مقدار است نه یک استرینگ، (البته مقدار متغیر yourname یک استرینگ است). به دلیل اینکه متغیر yourname یک استرینگ نیست ما از دو علامت بعلاوه در ابتدا و انتهای آن استفاده می کنیم. این سری نوشته ها مرورگر را وادار می کند ابتدا یک استرینگ سپس مقدار متغیر و سپس استرینگ دوم را بنویسد. چون ما در حال نوشتن یک کد جاوا اسکرپت هستیم برای اینکه بتوانیم متنی را در صفحه بنویسیم نمی توانیم مانند نوشتن متن در html عمل کنیم، و باید متن مورد نظر را بین دابل کوت و در قالب استرینگ در صفحه بنویسیم.

    شاید متوجه شده باشید تگهای پایانی h1 و center به گونه ای متفاوت با قبل نوشته شده اند ( <h1/\> ). این تفاوت بدین دلیل است که اسلش در جاوا اسکرپت به معنای تقسیم است و برای جلوگیری از اشتباه شدن آن با علامت تقسیم از یک بک اسلش قبل از آن استفاده می کنیم. در نتیجه استفاده از یک بک اسلش ( \ ) و بلافاصله بعد از آن یک اسلش ( / )

    دکمه ها و موارد استفاده آنها

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

    <FORM>
    <INPUT value="اینجا کلیک کنید">
    </FORM>

    این فرمان یک دکمه را در صفحه شما قرار می دهد، اما اگر روی آن کلیک کنید اتفاقی نمی افتد...

    در زیر کار هر قسمت از فرمان بالا را می بینیم:

    1. <FORM>
      این قسمت یک فرم را ایجاد می کند بنابر این ما می توانیم یک دکمه بسازیم.
    2. <INPUT>
      این تگ به ما اجازه می دهد نوعی ناحیه ورودی بسازیم.
    3. "type="button
      این فرمان ناحیه ورودی ما را به عنوان یک دکمه تعریف می کند.
    4. "اینجا کلیک کنید"=value
      این متنی است که افراد روی دکمه می بینند. شما می توانید هر چیزی را که می خواهید بینندگانتان روی دکمه ببینند اینجا بنویسید.
    5. "name="button1
      شما می توانید برای مراجعات بعدی یا احتمالاً استفاده در یک اسکرپت به دکمه خود یک نام بدهید.

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

    onClick="javascript command"

    فقط این فرمان را در تگ INPUT قرار دهید که دکمه را با آن ساختید، مانند زیر:

    <INPUT value="اینجا کلیک کنید" name="button1">

    برای مثال ما می توانیم مانند فرمان onMouseover در این دکمه نیز استفاده کنیم و متنی را در نوار وضعیت پنجره چاپ کنیم!

    <FORM>
    <INPUT value="اینجا کلیک کنید"
    onClick="window.status='متن خود را اینجا بنویسید'; return true">
    </FORM>

    حالا دکمه را فشار دهید و به متن نوار وضعیت نگاه کنید:

    شما می توانید با استفاده از دکمه ها به بینندگان خود اجازه دهید رنگ زمینه صفحه را برای خودشان تغییر دهند. فقط از فرمان زیر به جای فرمان window.status استفاده کنید:

    document.bgColor='رنگ مورد نظر به زبان انگلیسی نوشته شود'

    فرمان زیر را به عنوان تمرین فرمان onClick وارد کنید:

    <FORM>
    <INPUT value="Chenge Background Color" name="button3">
    </FORM>

    حالا شما دکمه ای مانند زیر دارید که با کلیک کردن بر روی آن زمینه صفحه به رنگ زرد در می آید!

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

    <FORM>
    <INPUT value="تغییر رنگ زمینه به سفید"
    name="button6" onClick="document.bgColor='white'"><br>
    <INPUT value="تغییر رنگ زمینه به زرد "
    name="button3" onClick="document.bgColor='yellow'"><br>
    <INPUT value="تغییر رنگ زمینه به قرمز "
    name="button4"><br>
    <INPUT value="تغییر رنگ زمینه به آبی"
    name="button5">
    </FORM>

    برای دکمه چهارم به جای نام رنگ از معادل هگزادسیمال رنگها استفاده شده است. برای یافتن معادل هگزادسیمال رنگها و توضیح درباره آنها می توانید به این صفحه مراجعه کنید.

    حالا شما سه دکمه دارید، آنها را امتحان کنید!

    در اسکرپت آخری که در این قسمت بررسی می کنیم، اجازه می دهیم تا یک دکمه به عنوان یک لینک عمل کند. به این منظور فقط فرمان زیر را برای فرمان onClick استفاده کنید:

    window.location='URL'

    برای مثال این هم اسکرپتی که شما را به صفحه آموزش جاوا اسکرپت ما می برد:

    <FORM>
    <INPUT value="آموزش جاوا اسکرپت"
    onClick="window.location='./'">
    </FORM>

    رویداد onMouseover

    وقت اون رسیده که نوشتن اولین اسکرپت خود را شروع کنید. این یکی راحته چون مجبور نیستیم درگیر اضافه کردن تگهای SCRIPT شویم. این اسکرپت کوچک به دلخواه شما وقتی نشانگر ماوستان روی یک لینک قرار می گیرد متنی را در نوار وضعیت مرورگرتان می نویسد. به مثال نگاه کنید:

    <a href ="JavaScript_2.htm"
    onMouseover="window.status='« آموزش جاوا اسکرپت »';return true">
    ماوس خود را روی این لینک قرار دهید!!!
    </a>

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

    ماوس خود را روی این لینک قرار دهید!!!

    بسیار خوب، این چیزی است که با فرمان onMouseover اتفاق می افتد:

    1. " "=onMouseover
      این شکل فرمان onMouseover است. مرورگر انتظار فرمان دیگری بین دو علامت دابل کوت ( " ) را دارد.
    2. آموزش جاوا اسکرپت »'=window.status
      این فرمان به مرورگر میگوید که جمله ای را در نوار وضعیت بنویسد. شما می توانید جمله بین دو علامت ( ' ) را با آنچه که می خواهید در نوار وضعیت به نمایش در آید جابجا کنید.
    3. return true
      عبارت را تأیید کرده و مرورگر آن را نمایش می دهد.

    دلیل استفاده از علامت سینگل کوت ( ' ) در فرمان window.status این است که window.status خود قسمتی از فرمان onMouseover است که از ( " ) استفاده کرده است. اگر دوباره از علامت دابل کوت ( " ) استفاده کرده بودیم ممکن بود مرورگر در مورد اینکه چه کاری باید انجام دهد گیج می شد. چون ممکن بود علامت دابل کوت دوم را به منزله پایان فرمان onMouseovr تلقی کند و فرمان جدیدی را با window.status شروع کند:   onMouseover=""window.statuse

    مشکلی که ممکن است در اینجا به وجود آید پاک نشدن متنی است که می خواستید در نوار وضعیت نمایش داده شود. دو راه برای از بین بردن این مشکل وجود دارد. یکی استفاده از فرمان onMouseout است، و دیگری فرا خواندن تابعی که متن را پس ار مدتی پاک می کند. راه دوم نیازمند استفاده از توابع و اسکرپت تگها است. در اینجا آسانترین راه را به شما نشان می دهم: استفاده از فرمان onMouseout :

    <a href ="JavaScript_2.htm"
    onMouseover="window.status='متن خود را اینجا قرار دهید'; return true"
    onMouseout="window.status=' '; return true">
    لینک خود را اینجا قرار دهید
    </a>

    این فرمان متن نوار وضعیت را وقتی که نشانگر ماوس روی آن نیست ناپدید می کند. مانند زیر:

    لینک خود را اینجا قرار دهید

    در حقیقت ما همان کار قبل را تکرار کردیم ولی به جای متن از فضای خالی در فرمان window.status استفاده کردیم.

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

    دستور شرطی switch در جاوا اسکرپت

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

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

    switch(x)

    {

    case مقدار اول:

    این کد در صورت برابری متغیر x با مقدار اول اجرا می شود

    break

    case مقدار دوم:

    این کد در صورت برابری متغیر x با مقدار دوم اجرا می شود

    break

    default:

    این کد در صورتی اجرا می شود که مقدار متغیر x با هیچکدام از مقادیر ذکر شده برابر نباشد

    }

    در این دستور مقدار متغیر معرفی شده در قسمت switch با مقادیر آورده شده در هر case مقایسه می شود. در صورت مساوی بودن مقادیر کد همان case اجرا می شود و با استفاده از دستور break آورده شده در هر قسمت برنامه پس از اجرای کد آن قسمت به خارج از دستور switch هدایت می شود. در غیر این صورت برنامه به سراغ case بعدی می رود و در صورتی که مقدار متغیر مورد نظر با هیچکدام از case ها برایر نبود کد قسمت default اجرا خواهد شد.

    قابل ذکر است که استفاده از default اختیاری است و شما بنا به نیاز خود می توانید از آن استفاده کرده یا آنرا حذف کنید.در دستور switch محدودیتی در تعدار case ها وجود ندارد و می توانید به هر تعدادی که نیاز داری از این مورد استفاده کنید.

    در این قسمت به ذکر یک نمونه برای ادستور switch می پردازیم :

    به کدی که در اینجا آورده شده است توجه کنید. پس از جرای این کد کادری باز می شود که از شما میخواهد عددی را وارد کنید. با وارد کردن عدد در این کادر و تأیید آن پیامی متناسب با روز معادل آن عدد در هفته ظاهر می شود. البته ما این کار را فقط برای اعداد 1 تا 3 انجام دادیم، شما در صورت تمایل می توانید آنرا تکمیل کنید :

    var x=prompt('لطفاً یک عدد بین 1 تا 7 وارد کنید :',' ');

     

    switch (x) {

    case '1':

    alert('شماره وارد شده مربوط به روز « شنبه » است');

    break

    case '2':

    alert('شماره وارد شده مربوط به روز « یکشنبه » است');

    break

    case '3':

    alert('شماره وارد شده مربوط به روز « دوشنبه » است');

    break

    case '4':

    alert('شماره وارد شده مربوط به روز « سه شنبه » است');

    break

    case '5':

    alert('شماره وارد شده مربوط به روز « چهارشنبه » است');

    break

    case '6':

    alert('شماره وارد شده مربوط به روز « پنجشنبه » است');

    break

    case '7':

    alert('شماره وارد شده مربوط به روز « جمعه » است');

    break

    default:

    alert('روز مربوط به شماره وارد شده در این برنامه وجود ندارد');

    }

    نوشتن متن با استفاده از جاوا اسکرپت

    در جاوا اسکرپت این امکان وجود دارد که متنی را نوشته و در صفحه نمایش بدهیم. متن مورد نظر را می توانیم قالب بندی کنیم و از تگهای HTML نیز در آن استافده کنیم. برای این کار از فرمان ()document.write استفاده می کنیم که یک فرمان جاوا اسکرپت مخصوص چاپ کردن خروجی در صفحه است. روش کار به صورت زیر است :

    نوشتن متنهای ساده

    <script language="JavaScript">
    document.write('متن مورد نظر خود را اینجا بنویسید');
    </script>

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

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

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


    نوشتن متنهای قالب بندی شده

    با استفاده از فرمان document.write امکان نوشتن متنهای قالب بندی شده با استفاده از تگهای HTML هم وجود دارد. برای اینکار فقط کافیست متن HTML مورد نظر خود را در تابع ()document.write قرار دهید. برای مثال به کد زیر توجه کنید :

    <script language="JavaScript">
    document.write('<h1>این متن با استفاده از جاوا اسکرپت نوشته شده است!</h1>');
    </script>

    برای مشاهده نتیجه این مثال لینک زیر را کلیک کنید :

    نوشتن متنهای قالب بندی شده با HTML توسط جاوا اسکرپت


    تابع ()document.write با مقدار چند سطری

    اگر بخواهیم متنی که با استفاده از جاوا اسکرپت متنی را بنویسیم که در صفحه در چند سطر نمایش داده شود به راحتی می توانیم با وارد کردم <br> در متن مورد نظر یا با سایر تگهای HTML این کار را انجام دهیم. اما اگر بخواهیم مقداری را که به تابع ()document.write می دهیم در چند سطر وارد کنیدم باید مقدار مورد نظر را در هر سطر از هم جدا کرده و با استفاده از عملوند رشته ای + آنها را در چند سطر به هم پیوند بزنیم.

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

    اگر کد خود را به صورت زیر بنویسید با خطا مواجه خواهید شد :

    <script language="JavaScript">
    document.write('First part of text
    Second part of text');
    </script>

    برای اینکه با خطا مواجه نشوید و کد شما کار حود را انجام دهد باید آنرا به صورت زیر بنویسید :

    <script language="JavaScript">
    document.write('First part of text'
    +
    'Second part of text');
    </script>

    معرفی دستور شرطی if...else و کاربردهای مختلف آن

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

    دستور شرطی if

    if (condition)
    {
    دستوری که در صورت درستی شرط اجرا می شود در اینجا قرار می گیرد
    }

    به یک مثال برای دستور if توجه کنید :

    var test = confirm('اگر این پیام را تأیید کنید دستور شرطی اجرا می شود');

    if (test == true) {
    alert('شما دکمه مورد نظر را کلیک کردید و این پیام به نمایش در آمد');
    }

    برای اینکه کد بالا را آزمایش کنید لینک زیر را کلی کنید و در پیامی که نمایش داده می شود دکمه OK را کلیک کنید. اگر دکمه Cancel را کلیک کنید شرط بالا برقرا نمی شود و بدون اجرا شدن دستور شرطی صفحه مثال باز می شود.

     


    دستور شرطی if...else

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

    if (condition) {
    دستوراتی که در صورت برقراری شرط اجرا می شوند.
    }
    else {
    دستوراتی که در صورت عدم برقراری شرط اجرا می شوند.
    }

    در کد بالا ابتدا شرط بررسی می شود و در صورت برقراری آن دستورات مربوطه اجرا می شوند ولی در صورتی که شرط برقرار نباشد دستورات مربوط به قسمت else اجرا می شود.

    var yourmark = prompt('یک شماره از 0 تا 20 وارد کنید :','');

    if (yourmark > 10) {
    alert('شماره ای که وارد کرده ای از 10 بزرگتر است');
    }
    else {
    alert('عبارتی که شما وارد کرده اید از 10 بزرگتر نیست!');
    }

    برای مشاهده نتیجه مثال بالا لینک زیر را کلیک کنید و در کادری که نمایش داده می شود یک عدد از 0 تا 20 وارد کنید و دکمه OK را کلیک کنید.

     


    استفاده از دستور if..else if...else (دستورات شرطی تو در تو)

    ممکن است در نظر داشته باشیم تا در صورت برقراری یک شرط یک دستور خاص اجرا شود و در صورتی که شرط برقرار نبود شرط دیگری بررسی شود و دستور مربوط به آن اجرا شود و در صورتی که هیچ یک از شرطهای قبل برقرار نبود دستور دیگری اجرا شود. در این مواقع می توانیم از دستور else if در دستور if...else قبلی استفاده کنید. به صورت زیر :

    if (condition 1) {
    دستوراتی که در صورت درستی شرط اول اجرا می شوند
    }
    else if (condition 2) {
    دستوراتی که در صورت درستی شرط دوم اجرا می شوند
    }
    else {
    دستوراتی که زمانی که هیچکدام از شرطها صحیح نباشد اجرا می شوند
    }

    در این روش محدودیتی از نظر تعداد شرطها وجود ندارد و می توانیم به تعداد نامحدود از دستور else if استفاده کنیم ولی در مواردی که تعداد این شرطها خیلی زیاد می شود بهتر است به جای این روش از دستور switch که بعداً توضیح داده خواهد شد استفاده کنیم.

    در اینجا مثال قبل را با کمی تغییر برای این روش استفاده می کنیم :

    var yourmark = prompt('یک شماره به دلخواه وارد کنید :','');

    if (yourmark > 0 && yourmark < 100 ) {
    alert('شماره وارد شده بین 0 تا 100 است');
    }
    else if (yourmark > 100) {
    alert('شماره وارد شده از 100 بزرگتر است');
    }
    else {
    alert('عبارت وارد شده یا 0 است یا به جای عدد از حروف استفاده کرده اید');
    }

    معرفی عملگرهای مورد استفاده در JavaScript

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


    عملگرهای محاسباتی

    از این نوع عملگرها برای انجام عملیات ریاضی نظیر جمع و ضرب استفاده می شود. می توانید این عملگرها را در اینجا مشاهده کنید ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :

    نام عملگر مثال نتیجه
    جمع + x + y 12
    تفریق - x - y 4
    ضرب * x * y 32
    تقسیم / x / y 2
    باقیمانده % 9 % y 1
    افزایش ++ x++ 9
    کاهش -- x-- 7

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


    عملگرهای جایگزینی

    این عملگرها ترکیبی از عملگرهای دیگر هستند و به همین دلیل آنها را عملگرهای ترکیبی هم می نامند. می توانید این عملگرها را در جدول زیر مشاهده کنید ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :

    نام عملگر مثال عبارت معادل
    انتساب = x = 8 x = 8
    انتساب جمع += x += y x = x + y
    انتساب تفریق -= x -= y x = x - y
    انتساب ضرب *= x *= y x = x * y
    انتساب تقسیم /= x /= y x = x / y
    انتساب باقیمانده %= x %= y x = x % y

    عملگرهای مقایسه ای

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

    در جدول زیر مقادیر x و y و z را مطابق زیر در نظر بگیرید و توجه داشته باشید که مقدار متغیرهای x و y عددی و مقدار متغیر z از نوع رشته ای است :

    x = 4;
    y = 8;
    z = "4";
    نام عملگر مثال نتیجه
    تساوی == x == z True
    همانی === x === z False
    نامساوی != x != y True
    بزرگتر از > x > y False
    کوچکتر از < x < y True
    بزرگتر یا مساوی >= x >= z True
    کوچکتر یا مساوی <= x <= y True

    تفاوت عملگر تساوی با عملگر همانی در این است که در عملگر تساوی نوع متغیر ها در نظر گرفته نمی شود و اگر مقدار متغیرها با هم برابر باشد حتی اگر از یک نوع هم نباشند نتیجه True خواهد بود. ولی در عملگر همانی باید متغیرها مقداری مساوی داشته باشند و از یک نوع هم باشند تا نتیجه True باشد.


    عملگرهای منطقی

    این عملگرها برای انجام عملیات منطقی بر روی دو عبارت به کار می روند ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :

    نام عملگر مثال نتیجه
    نقیض ! !(x==y) True
    !(y==3) False
    و && (x=4 && y=8) True
    (x>4 && y=8) False
    یا || (x>4 || y=8) True
    (x>4 || y>8) False

    عملگر رشته ای

    از این عملگر برای چسباندن دو رشته به هم استفاده می شود. مثلاً برای اتصال دو متغیر از نوع رشته از این عملگر استفاده می شود.

    نام عملگر مثال
    عملوند رشته ای +
    a = 'طراحی وب';
    b = 'با جاوا اسکرپت';
    c = a+b;

    در مثال بالا مقدار متغیر c این است : 'طراحی وببا جاوا اسکرپت'
    برای ایجا فاصله بین کلمه وب و کلمه با می توانیم یک فاصله خالی به یکی از متغیرهای a یا b اضافه کنیم یا با استفاده از عملوند رشته ای یک فضای خالی به متغیر c اضافه کنیم :

    a = ' طراحی وب';
    b ='با جاوا اسکرپت';
    c = a+b;
    ------------------------------
    a = 'طراحی وب';
    b ='با جاوا اسکرپت';
    c = a+' '+b;

    در نتیجه کد بالا مقدار متغیر c به این صورت خواهد بود : 'طراحی وب با جاوا اسکرپت'


    عملگر شرطی

    در جاوا اسکرپت نوعی عملگر وجود دارد که بسته به شرایط مقداری را به یک متغیر تخصیص می دهد به این عملگر عملگر شرطی می گویند. ساختار این عملگر به صورت زیر است :

    VAR_NAME=(شرط)?value1:value2

    این عملگر در صورتی که شرط برقرار باشد مقدار اول را به متغیر می دهد و در صورت برقرار نبودن شرط مقدار دوم را به متغیر تخصیص می دهد. به مثال زیر توجه کنید :

    age_group=(age>18)?'زیر سن بلوغ':'بزرگسال'

    در این مثال اگر متغیر age بزرگتر از 18 باشد مقدار 'بزرگسال' به متغیر age_group تخصیص داده می شود و در صورتی که متغیر age کوچکتر از 18 باشد مقدار 'زیر سن بلوغ' به عنوان مقدار متغیر age_group قرار می گیرد.

    صفحه 1 از 2

    Website Security Test