1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

آموزش جاوا اسکرپت

شروع موضوع توسط af3hin ‏16/9/11 در انجمن JS

  1. Sert oğul

    تاریخ عضویت:
    ‏12/11/10
    ارسال ها:
    17,634
    تشکر شده:
    6,358
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    حرفه:
    IOG
    جاوا اسکرپت یک زبان اسکرپت نویسی تحت وب است که برای افزایش پویایی صفحات HTML استفاده می شود. از این زبان می توان برای ارزیابی اعتبار فرمهای HTML قبل از ارسال به سرور، شناسایی مرورگر کاربران، ایجاد انواع منو ها و بسیاری کارهای دیگر استفاده کرد.

    نکته : باید توجه داشت که جاوا اسکرپت یک زبان طرف کاربر (Client Side) است توسط کامپیوتر شخصی کاربر تفسیر می شود. کدهای مربوط به جاوا اسکرپت توسط کاربر نهایی قابل مشاهده هستند پس توصیه می شود از آن برای مقاصد مهم نظیر اتصال به دیتابیس استفاده نشود.
    می توان کدهای جاوا اسکرپت را به صورت تعبیه شده در صفحات HTML استفاده کرد و یا کدهای جاوا اسکرپت را در یک فایل جداگانه با پسوند js. ذخیره کرد ولی در هر صورت یان فایلها هم باید توسط یک صفحه HTML فراخوانی شده و نتیجه آنها در صفحات HTML نمایان خواهد شد.
    بهتر است قبل از شروع به یادگیری جاوا اسکرپت با HTML و CSS آشنایی داشته باشد تا بتوانید به خوبی از قابلیتهای جاوا اسکرپت استفاده کنید.

    برای آزمایش کردن اسکرپتهایی که می نویسید باید از مرورگری استفاده کنید که از جاوا اسکرپت پشتیبانی می کند. قابل ذکر است که تقریباً همه مرورگرهای جدید از جاوا اسکرپت پشتیبانی می کنند از جمله این مرورگرها می توان به اینترنت اکسپلورر (IE) که در ویندوز به صورت پیش فرض نصب می شود، فایر فوکس (Firefox) و اپرا (Opera) اشاره کرد. به خاطر داشته باشید که نسخه های قبل از نسخه 4.0 اینترنت اکسپلورر و Netscape از جاوا اسکرپت پشتیبانی نمی کنند.

     
  2. Sert oğul

    تاریخ عضویت:
    ‏12/11/10
    ارسال ها:
    17,634
    تشکر شده:
    6,358
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    حرفه:
    IOG
    پاسخ : آموزش جاوا اسکرپت

    [TABLE]
    [TR]
    [TD]نحوه استفاده از کدهای جاوا اسکرپت در صفحه
    [/TD]
    [/TR]
    [TR]
    [TD="colspan: 3"] به طور کلی به سه طریق می توانیم از جاوا اسکرپت در یک صفحه استفاده کنیم:

    1. وارد کردن اسکرپت در بخش <head> صفحه
    2. وارد کردن جاوا اسکرپت در بخش <body> صفحه
    3. استفاده از فایل اسکرپت خارجی
    به یاد داشته باشید که می توانید از همه روشهای بالا به طور همزمان برای وارد کردن جاوا اسکرپت در صفحه استفاده کنید.
    در دو روش اول کدهای جاوا اسکرپت به طور مستقیم وارد صفحه HTML می شوند. برای وارد کردن جاوا اسکرپت در این دو روش از تگ script استفاده می شود. تمامی کدهای جاوا اسکرپتی که می خواهید به طور مستقیم وارد صفحه کنید باید در تگ script قرار داشته باشند وگرنه مرورگر به جای به کار بردن آنها را به صورت متن در صفحه نمایش می دهد. معمولاً کدهای جاوا اسکرپت با ساختار زیر وارد صفحه می شوند :
    <script language="javascript" type="text/javascript">
    دستورات جاوا اسکرپتی که قصد استفاده از آنها را دارید در این قسمت وارد می شوند
    </script>
    در تگ بالا برای مشخص کردن نوع موتور اسکرپتی که مرورگر باید برای تفسیر کردن کد استفاده کند از دو شناسه language و type استفاده می کنیم.

    [/TD]
    [/TR]
    [/TABLE]
     
  3. Sert oğul

    تاریخ عضویت:
    ‏12/11/10
    ارسال ها:
    17,634
    تشکر شده:
    6,358
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    حرفه:
    IOG
    پاسخ : آموزش جاوا اسکرپت

    [h=3]وارد کردن اسکرپت در بخش <head>[/h] در هنگام باز شدن یک صفحه وب عناصر موجود در بخش <head> قبل از سایر اجزای صفحه لود می شوند. معمولاً هنگامی کدهای جاوا اسکرپت در بخش <head> متن استفاده می شود که بخواهیم مطمئن شویم به هنگام نیاز کدهای ما لود شده اند.
    در اینجا یک مثال از استفاده از جاوا اسکرپت در <head> را مشاهده می کنید:
    <html dir="rtl">

    <head>
    <script language="javascript" type="text/javascript">
    function message() {
    document.write('<div align="center">کدهای جاوا اسکرپت موجود در &lt;head&gt; صفحه قبل از سایر اجزای صفحه لود می شوند <br> این متن به وسیله همین نوع اسکرپت به وجود آمده است</div>');
    }
    </script>
    </head>

    <body>
    <p align="center"><a href="javascript:message();">روی این متن کلیک کنید</a></p>
    </body>

    </html>

     
  4. Sert oğul

    تاریخ عضویت:
    ‏12/11/10
    ارسال ها:
    17,634
    تشکر شده:
    6,358
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    حرفه:
    IOG
    پاسخ : آموزش جاوا اسکرپت

    [h=3]وارد کردن جاوا اسکرپت در قسمت بدنه متن HTML[/h] این امکان وجود دارد که کدهای جاوا اسکرپت را در قسمت <body> صفحه وارد کنیم. در این صورت لود شدن آنها تا هنگامی که آن بخش از صفحه لود شود به عقب می افتد و اگر صفحه به صورت کامل باز نشود ممکن است اسکرپت ما کار نکند. مثال زیر یک نمونه از وارد کردن جاوا اسکرپت در <body> صفحه HTML را نشان می دهد:
    <html dir="rtl">
    <head>
    <title>جاوا اسکرپت در بدنه صفحه</title>
    </head>
    <body>
    <script language="javascript" type="text/javascript">
    document.write('<br><h1 align="center">این متن توسط جاوا اسکرپت نوشته شده است.</h1>');
    </script>
    </body>
    </html>

     
  5. Sert oğul

    تاریخ عضویت:
    ‏12/11/10
    ارسال ها:
    17,634
    تشکر شده:
    6,358
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    حرفه:
    IOG
    پاسخ : آموزش جاوا اسکرپت

    [h=3]فرا خوانی اسکرپت خارجی به صفحه[/h] گاهی اوقات ممکن است بخواهید از یک سری از کدهای جاوا اسکرپت برای چندین صفحه استفاده کنید و نمی خواهید همه آنها را به صورت جداگانه در هر صفحه بنویسید. در این مواقع می توانید کدهای مورد نظر خود را در یک فایل متنی وارد کنید و آنرا با پسوند js. ذخیره کنید. در هر صفحه ای که بخواهید از این فایل استفاده کنید کافی است آنرا در آن صفحه فرا خوانی کنید. ( به یاد داشته باشید که در این فایلهای خارجی نباید از تگهای <script> که مخصوص HTML هستند استفاده کنید )
    برای فرا خوانی این فایلها به صفحه از همان تگ script که در موارد قبل استفاده می کردیم کمک می گیریم با این تفاوت که در اینجا به آن یک شناسه src که آدرس اسکرپت ما به عنوان مقدار آن قرار گرفته است اضافه می کنیم.
    برای مثال کد جاوا اسکرپت زیر را در نظر بگیرید :
    var text = '<br><h1 align="center" dir="rtl" >این متن با استفاده از جاوا اسکرپت نوشته شده است.</h1>';

    document.write(text);
    ما این کد را در فایلی با نام external.js در همان پوشه ای که صفحه ما قرار دارد ذخیره کرده ایم. حالا با وارد کردن کد زیر در صفحه می توانیم فایل بالا را فراخوانی کنیم:
    <script language="javascript" type="text/javascript" src="external.js"></script>
     
  6. Sert oğul

    تاریخ عضویت:
    ‏12/11/10
    ارسال ها:
    17,634
    تشکر شده:
    6,358
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    حرفه:
    IOG
    پاسخ : آموزش جاوا اسکرپت

    [TABLE]
    [TR]
    [TD]معرفی عملگرهای مورد استفاده در JavaScript
    [/TD]
    [/TR]
    [TR]
    [TD="colspan: 3"] در جاوا اسکرپت برای جمع، تفریق، مقایسه و بسیاری از عملیات دیگر از عملگرها استفاده می کنیم. عملگرها به چند دسته تقسیم می شوند : عملگرهای محاسباتی، مقایسه ای، جایگزینی، منطقی، رشته ای، و شرطی. در ادامه به ارائه توضیحاتی برای هر نوع از این عملگرها خواهیم پرداخت.
    [HR][/HR] [h=3]عملگرهای محاسباتی [/h] از این نوع عملگرها برای انجام عملیات ریاضی نظیر جمع و ضرب استفاده می شود. می توانید این عملگرها را در اینجا مشاهده کنید ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :
    [TABLE="class: oprators"]
    [TR]
    نام عملگر مثال نتیجه [/TR]
    [TR]
    [TD]جمع[/TD]
    [TD]+[/TD]
    [TD]x + y[/TD]
    [TD]12[/TD]
    [/TR]
    [TR]
    [TD]تفریق[/TD]
    [TD]-[/TD]
    [TD]x - y [/TD]
    [TD]4[/TD]
    [/TR]
    [TR]
    [TD]ضرب[/TD]
    [TD]*[/TD]
    [TD]x * y[/TD]
    [TD]32[/TD]
    [/TR]
    [TR]
    [TD]تقسیم[/TD]
    [TD]/[/TD]
    [TD]x / y [/TD]
    [TD]2[/TD]
    [/TR]
    [TR]
    [TD]باقیمانده[/TD]
    [TD]%[/TD]
    [TD]9 % y [/TD]
    [TD]1[/TD]
    [/TR]
    [TR]
    [TD]افزایش[/TD]
    [TD]++[/TD]
    [TD]x++[/TD]
    [TD]9[/TD]
    [/TR]
    [TR]
    [TD]کاهش[/TD]
    [TD]--[/TD]
    [TD]x--[/TD]
    [TD]7[/TD]
    [/TR]
    [/TABLE]
    از عملگرهای افزایش و کاهش به ترتیب برای افزودن 1 به مقدار قبلی و کم کردن 1 از مقدار قبلی استفاده می شود.
    [HR][/HR] [h=3]عملگرهای جایگزینی[/h] این عملگرها ترکیبی از عملگرهای دیگر هستند و به همین دلیل آنها را عملگرهای ترکیبی هم می نامند. می توانید این عملگرها را در جدول زیر مشاهده کنید ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :
    [TABLE="class: oprators"]
    [TR]
    نام عملگر مثال عبارت معادل [/TR]
    [TR]
    [TD]انتساب[/TD]
    [TD]=[/TD]
    [TD]x = 8 [/TD]
    [TD]x = 8 [/TD]
    [/TR]
    [TR]
    [TD]انتساب جمع[/TD]
    [TD]+=[/TD]
    [TD]x += y[/TD]
    [TD]x = x + y [/TD]
    [/TR]
    [TR]
    [TD]انتساب تفریق[/TD]
    [TD]-=[/TD]
    [TD]x -= y [/TD]
    [TD]x = x - y [/TD]
    [/TR]
    [TR]
    [TD]انتساب ضرب[/TD]
    [TD]*=[/TD]
    [TD]x *= y[/TD]
    [TD]x = x * y [/TD]
    [/TR]
    [TR]
    [TD]انتساب تقسیم[/TD]
    [TD]/=[/TD]
    [TD]x /= y [/TD]
    [TD]x = x / y [/TD]
    [/TR]
    [TR]
    [TD]انتساب باقیمانده[/TD]
    [TD]%=[/TD]
    [TD]x %= y [/TD]
    [TD]x = x % y [/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] [h=3]عملگرهای مقایسه ای[/h] از این عملگرها برای مقایسه دو مقدار استفاده می شود که شامل عملگرهای زیر هستند.
    در جدول زیر مقادیر x و y و z را مطابق زیر در نظر بگیرید و توجه داشته باشید که مقدار متغیرهای x و y عددی و مقدار متغیر z از نوع رشته ای است :
    x = 4;
    y = 8;
    z = "4";

    [TABLE="class: oprators"]
    [TR]
    نام عملگر مثال نتیجه [/TR]
    [TR]
    [TD]تساوی[/TD]
    [TD]==[/TD]
    [TD]x == z [/TD]
    [TD]True[/TD]
    [/TR]
    [TR]
    [TD]همانی[/TD]
    [TD]===[/TD]
    [TD]x === z [/TD]
    [TD]False[/TD]
    [/TR]
    [TR]
    [TD]نامساوی[/TD]
    [TD]!=[/TD]
    [TD]x != y [/TD]
    [TD]True[/TD]
    [/TR]
    [TR]
    [TD]بزرگتر از [/TD]
    [TD]>[/TD]
    [TD]x > y [/TD]
    [TD]False[/TD]
    [/TR]
    [TR]
    [TD]کوچکتر از[/TD]
    [TD]<[/TD]
    [TD]x < y [/TD]
    [TD]True[/TD]
    [/TR]
    [TR]
    [TD]بزرگتر یا مساوی [/TD]
    [TD]>=[/TD]
    [TD]x >= z [/TD]
    [TD]True[/TD]
    [/TR]
    [TR]
    [TD]کوچکتر یا مساوی [/TD]
    [TD]<=[/TD]
    [TD]x <= y [/TD]
    [TD]True[/TD]
    [/TR]
    [/TABLE]
    تفاوت عملگر تساوی با عملگر همانی در این است که در عملگر تساوی نوع متغیر ها در نظر گرفته نمی شود و اگر مقدار متغیرها با هم برابر باشد حتی اگر از یک نوع هم نباشند نتیجه True خواهد بود. ولی در عملگر همانی باید متغیرها مقداری مساوی داشته باشند و از یک نوع هم باشند تا نتیجه True باشد.
    [HR][/HR] [h=3]عملگرهای منطقی[/h] این عملگرها برای انجام عملیات منطقی بر روی دو عبارت به کار می روند ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :
    [TABLE="class: oprators"]
    [TR]
    نام عملگر مثال نتیجه [/TR]
    [TR]
    [TD]نقیض[/TD]
    [TD]![/TD]
    [TD]!(x==y)[/TD]
    [TD]True[/TD]
    [/TR]
    [TR]
    [TD]!(y==3)[/TD]
    [TD]False[/TD]
    [/TR]
    [TR]
    [TD]و[/TD]
    [TD]&&[/TD]
    [TD](x=4 && y=8)[/TD]
    [TD]True[/TD]
    [/TR]
    [TR]
    [TD](x>4 && y=8)[/TD]
    [TD]False[/TD]
    [/TR]
    [TR]
    [TD]یا[/TD]
    [TD]||[/TD]
    [TD](x>4 || y=8)[/TD]
    [TD]True[/TD]
    [/TR]
    [TR]
    [TD](x>4 || y>8)[/TD]
    [TD]False[/TD]
    [/TR]
    [/TABLE]
    [HR][/HR] [h=3]عملگر رشته ای[/h] از این عملگر برای چسباندن دو رشته به هم استفاده می شود. مثلاً برای اتصال دو متغیر از نوع رشته از این عملگر استفاده می شود.
    [TABLE="class: oprators"]
    [TR]
    نام عملگر مثال [/TR]
    [TR]
    [TD]عملوند رشته ای[/TD]
    [TD]+[/TD]
    [TD]
    a = 'طراحی وب';
    b = 'با جاوا اسکرپت';
    c = a+b;
    [/TD]
    [/TR]
    [/TABLE]
    در مثال بالا مقدار متغیر c این است : 'طراحی وببا جاوا اسکرپت'
    برای ایجا فاصله بین کلمه وب و کلمه با می توانیم یک فاصله خالی به یکی از متغیرهای a یا b اضافه کنیم یا با استفاده از عملوند رشته ای یک فضای خالی به متغیر c اضافه کنیم :

    a = ' طراحی وب';


    ------------------------------
    a = 'طراحی وب';

    b ='با جاوا اسکرپت'; c = a+b; b ='با جاوا اسکرپت'; c = a+' '+b;
    در نتیجه کد بالا مقدار متغیر c به این صورت خواهد بود : 'طراحی وب با جاوا اسکرپت'
    [HR][/HR] [h=3]عملگر شرطی [/h] در جاوا اسکرپت نوعی عملگر وجود دارد که بسته به شرایط مقداری را به یک متغیر تخصیص می دهد به این عملگر عملگر شرطی می گویند. ساختار این عملگر به صورت زیر است :
    VAR_NAME=(شرط)?value1:value2
    این عملگر در صورتی که شرط برقرار باشد مقدار اول را به متغیر می دهد و در صورت برقرار نبودن شرط مقدار دوم را به متغیر تخصیص می دهد. به مثال زیر توجه کنید :
    age_group=(age>18)?'زیر سن بلوغ':'بزرگسال'
    در این مثال اگر متغیر age بزرگتر از 18 باشد مقدار 'بزرگسال' به متغیر age_group تخصیص داده می شود و در صورتی که متغیر age کوچکتر از 18 باشد مقدار 'زیر سن بلوغ' به عنوان مقدار متغیر age_group قرار می گیرد.

    [/TD]
    [/TR]
    [/TABLE]
     
  7. Sert oğul

    تاریخ عضویت:
    ‏12/11/10
    ارسال ها:
    17,634
    تشکر شده:
    6,358
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    حرفه:
    IOG
    پاسخ : آموزش جاوا اسکرپت

    [TABLE]
    [TR]
    [TD]نمایش پیام هشدار در صفحه با استفاده از جاوا اسکرپت
    [/TD]
    [/TR]
    [TR]
    [TD="colspan: 3"] آیا مایلید یکی از آن کادر هایی که ناگهان ظاهر می شوند و معلوم نیست از کجا آمده اند را به صفحه خود اضافه کنید؟ بسیار خوب بیایید با کادر هشدار شروع کنیم که به بیننده چیزهایی را که شما می خواهید می گوید.
    این فرمان هشدار است:
    alert('متنی که می خواهید به بازدید کننده نشان داده شود')
    حالا برای استفاده از آن ما باید آنرا در یک فرمان دیگر قرار دهیم. بیایید آنرا در یک فرمان آشنا مثل فرمان onMouseover استفاده کنیم. اسکرپت مقابل باعث ظاهر شدن یک کادر هشدار وقتی که ما نشانگر ماوس خود را روی لینک به وجود آمده قرار می دهیم می شود. مثلاً در لینکی که نمی خواهیم بیننده کلیک کند:
    <a href="alert.php" onmouseover="alert('Insert your message here')">
    ماوس خود را روی این لینک قرار دهید
    </a>
    آنرا امتحان کنید.

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

    • onmouseover :
      این رویداد مسئولیت اجرای کد جاوا اسکرپت موجود در خود را وقتی که ماوس روی آن قرار می گیرد بر عهده دارد. [HR][/HR] (' ')alert :
      این تابع متنی را که به عنوان مقدار آن قرار گیرد در یک کادر محاوره ای با یک دکمه OK نمایش می دهد.
    بسیار خوب، یک روش دیگر هم وجود دارد که بیشتر باعث گیج شده بیننده می شود. آن هم کادر هشدار به محض باز شدن پنجره است. شما با این روش می توانید مطالبی را که می خواهید به بیننده خود بگویید قبل از باز شدن صفحه به او نشان دهید.
    برای ساختن این نوع کادر هشدار فرمان هشدار را بین <head> و <head/> قرار دهید. برای این کار باید از تگهای <script> که در اول فصل با آن آشنا شدیم استفاده کنیم تا کدهای جاوا اسکرپت بین بقیه کدها تشخیص داده شوند:
    <head>
    <script language="javascript">
    <!-- hide from old browsers
    alert('به این صفحه خوش آمدید ');
    //-->
    </script>
    </head>
    فرمان بالا یک کادر محاوره ای را وقتی که بیننده صفحه شما را باز می کند نشان می دهد. وقتی که OK را کلیک کنید بارگذاری صفحه ادامه پیدا می کند.
    آیا می خواهید چند گام جلو تر برویم؟ چندین فرمان هشدار را در تگ SCRIPT قرار دهیم تا چندین کادر هشدار پشت سر هم به محض باز شدن صفحه نمایش داده شوند و البته برای هر پیام باید دکمه OK را کلیک کنیم تا به پیام بعدی برویم.

    این هم کدی که مسئول این پیامها است:
    <head>
    <title>javascript example 2</title>
    <script language="javascript">
    <!--
    alert('خود اضافه کنید favorite لطفاً سایت ما را به منوی');
    alert('را انتخاب کنید add to favorite گزینه favorite از منوی');
    alert('می توانید این کا را با کلیدهای میانبر هم انجام دهید');
    alert('را فشار دهید d فقط کلید کنترل را نگهدارید و کلید');
    //-->
    </script>
    </head>
    شما می توانید برای ظاهر شدن کادر هشدار از دکمه ها هم استفاده کنید. فقط کد را در جایی که می خواهید دکمه نشان داده شود قرار دهید. در این حالت شما نیازی به تگهای <script> هم ندارید. این هم یک نمونه از این نوع پیام هشدار:
    این هم کد این اسکرپت:
    <input type="button" value="اگر این صفحه را مطالعه کرده اید اینجا را کلیک کنید"
    onclick="alert('از اینکه به سایت ما مراجعه کردید متشکریم باز هم سری به ما بزنید')">
    ما در این دکمه از رویداد onclick استفاده کردیم. کار این رویداد هم مانند onmouseover است با این تفاوت که کد مربوطه را در هنگام کلیک کردن روی آن اجرا می کند.

    [/TD]
    [/TR]
    [/TABLE]
     
  8. Sert oğul

    تاریخ عضویت:
    ‏12/11/10
    ارسال ها:
    17,634
    تشکر شده:
    6,358
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    حرفه:
    IOG
    پاسخ : آموزش جاوا اسکرپت

    [TABLE]
    [TR]
    [TD]نوشتن متن با استفاده از جاوا اسکرپت
    [/TD]
    [/TR]
    [TR]
    [TD="colspan: 3"]در جاوا اسکرپت این امکان وجود دارد که متنی را نوشته و در صفحه نمایش بدهیم. متن مورد نظر را می توانیم قالب بندی کنیم و از تگهای HTML نیز در آن استافده کنیم. برای این کار از فرمان ()document.write استفاده می کنیم که یک فرمان جاوا اسکرپت مخصوص چاپ کردن خروجی در صفحه است. روش کار به صورت زیر است :
    [h=3]نوشتن متنهای ساده[/h] <script language="JavaScript" type="text/javascript">
    document.write('متن مورد نظر خود را اینجا بنویسید');
    </script>
    البته نقطه ویرگولی که در آخر فرمان نوشته شده تنها در صورتی الزامی است که بیش از یک فرمان در اسکرپت خود داشته باشیم.
    برای نوشتن متن به این صورت کافی است تا فرمان بالا را در جایی از صفحه HTML که می خواهید متن به نمایش در آید بنویسید. در مثال زیر متنی با استفاده از جاوا اسکرپت در صفحه نمایش داده می شود،

    [HR][/HR] [h=3]نوشتن متنهای قالب بندی شده[/h] با استفاده از فرمان document.write امکان نوشتن متنهای قالب بندی شده با استفاده از تگهای HTML هم وجود دارد. برای اینکار فقط کافیست متن HTML مورد نظر خود را در تابع ()document.write قرار دهید. برای مثال به کد زیر توجه کنید :
    <script language="JavaScript" type="text/javascript">
    document.write('<h1>این متن با استفاده از جاوا اسکرپت نوشته شده است!</h1>');
    </script>
    [HR][/HR] [h=3]تابع ()document.write با مقدار چند سطری[/h] اگر بخواهیم متنی که با استفاده از جاوا اسکرپت متنی را بنویسیم که در صفحه در چند سطر نمایش داده شود به راحتی می توانیم با وارد کردم <br> در متن مورد نظر یا با سایر تگهای HTML این کار را انجام دهیم. اما اگر بخواهیم مقداری را که به تابع ()document.write می دهیم در چند سطر وارد کنیدم باید مقدار مورد نظر را در هر سطر از هم جدا کرده و با استفاده از عملوند رشته ای + آنها را در چند سطر به هم پیوند بزنیم.
    نکته : نباید بدون استفاده از عملگر های مربوطه مقدار تابع بالا را در بیش از یک سطر بنویسید. در صورتی که متن مورد نظر خود را به این گونه در چند سطر بنویسید تابع کار نمی کند و احتمالاً با پیغام خطا مواجه می شوید.
    اگر کد خود را به صورت زیر بنویسید با خطا مواجه خواهید شد :
    <script language="JavaScript" type="text/javascript">
    document.write('First part of text
    Second part of text');
    </script>
    برای اینکه با خطا مواجه نشوید و کد شما کار حود را انجام دهد باید آنرا به صورت زیر بنویسید :
    <script language="JavaScript" type="text/javascript">
    document.write('First part of text'
    +
    'Second part of text');
    </script>
    [/TD]
    [/TR]
    [/TABLE]
     
  9. Sert oğul

    تاریخ عضویت:
    ‏12/11/10
    ارسال ها:
    17,634
    تشکر شده:
    6,358
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    حرفه:
    IOG
    پاسخ : آموزش جاوا اسکرپت

    [TABLE="align: center"]
    [TR]
    [TD="class: header, colspan: 3"][/TD]
    [/TR]
    [TR="class: page"]
    [/TR]
    [/TABLE]
    [TABLE]
    [TR]
    [TD]معرفی دستور شرطی if...else و کاربردهای مختلف آن
    [/TD]
    [/TR]
    [TR]
    [TD="colspan: 3"]از دستورات شرطی برای انجام دستوراتی به شرط برقراری یک رابطه دیگر استفاده می شود. در طراحی صفحات وب بسیار پیش می آید که می خواهیم در شرایط خاصی صفحه یک رفتار مشخص داشته باشد و در موارد دیگر رفتار صفحه تفاوت داشته باشد. در این مواقع می توانیم از دستور شرطی if استفاده کنیم. با این دستور مشخص می کنیم اگر شرط خاصی برقرار بود یک عمل خاص انجام شود. ساختار این دستور به شکل زیر است :

    [h=3]دستور شرطی if[/h] if (condition)
    {
    دستوری که در صورت درستی شرط اجرا می شود در اینجا قرار می گیرد
    }
    به یک مثال برای دستور if توجه کنید :
    var test = confirm('اگر این پیام را تأیید کنید دستور شرطی اجرا می شود');

    if (test == true) {
    alert('شما دکمه مورد نظر را کلیک کردید و این پیام به نمایش در آمد');
    }
    برای اینکه کد بالا را آزمایش کنید لینک زیر را کلی کنید و در پیامی که نمایش داده می شود دکمه OK را کلیک کنید. اگر دکمه Cancel را کلیک کنید شرط بالا برقرا نمی شود و بدون اجرا شدن دستور شرطی صفحه مثال باز می شود.
    [HR][/HR] [h=3]دستور شرطی if...else[/h] برخی مواقع ممکن است بخواهیم دستور شرطی یک شرط را چک کند تا در صورت برقرار بودن آن شرط یک فرمان خاص را اجرا کند و در صورتی که شرط برقار نبود یک فرمان دیگر را به اجرا در آورد. در این موارد می توانیم از دستور if به همراه else استفاده کنیم. ساختار این دستور به شکل زیر است :
    if (condition) {
    دستوراتی که در صورت برقراری شرط اجرا می شوند.
    }
    else {
    دستوراتی که در صورت عدم برقراری شرط اجرا می شوند.
    }
    در کد بالا ابتدا شرط بررسی می شود و در صورت برقراری آن دستورات مربوطه اجرا می شوند ولی در صورتی که شرط برقرار نباشد دستورات مربوط به قسمت else اجرا می شود.
    var yourmark = prompt('یک شماره از 0 تا 20 وارد کنید :','');

    if (yourmark > 10) {
    alert('شماره ای که وارد کرده ای از 10 بزرگتر است');
    }
    else {
    alert('عبارتی که شما وارد کرده اید از 10 بزرگتر نیست!');
    }
    برای مشاهده نتیجه مثال بالا لینک زیر را کلیک کنید و در کادری که نمایش داده می شود یک عدد از 0 تا 20 وارد کنید و دکمه OK را کلیک کنید.
    [HR][/HR] [h=3]استفاده از دستور if..else if...else (دستورات شرطی تو در تو)[/h] ممکن است در نظر داشته باشیم تا در صورت برقراری یک شرط یک دستور خاص اجرا شود و در صورتی که شرط برقرار نبود شرط دیگری بررسی شود و دستور مربوط به آن اجرا شود و در صورتی که هیچ یک از شرطهای قبل برقرار نبود دستور دیگری اجرا شود. در این مواقع می توانیم از دستور 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 است یا به جای عدد از حروف استفاده کرده اید');
    }
    [/TD]
    [/TR]
    [/TABLE]
     
  10. Sert oğul

    تاریخ عضویت:
    ‏12/11/10
    ارسال ها:
    17,634
    تشکر شده:
    6,358
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    حرفه:
    IOG
    پاسخ : آموزش جاوا اسکرپت

    [TABLE]
    [TR]
    [TD]دستور شرطی switch در جاوا اسکرپت
    [/TD]
    [/TR]
    [TR]
    [TD="colspan: 3"]با استفاده از دستور 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('روز مربوط به شماره وارد شده در این برنامه وجود ندارد');
    }
    [/TD]
    [/TR]
    [/TABLE]