سبد (0)

ایجاد پیام متحرک ۱

مقدمه

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

برای این که ببینید چه می خواهیم بسازیم مثال زیر را ببینید : 

کد مقدمه   

آنچه خواهیم ساخت مستطیل حاوی متن متحرک در مثال زیر است
خودتان امتحان کنید »

گام اول

در ایتدا  تگ های اصلی html را می نویسیم : 

کد 1.1

<html>

<head>
</head>

<body>
</body>

</html>

گام دوم 

ابتدا درون قسمت body  یک پاراگراف ایجاد می کنیم و id آن را برابر با para  قرار می دهیم . و همچنین  تگ <scrip>   را در آنجا ایجاد کرده و می بندیم . 

کد 2.1

<html>

<head>
</head>

<body>

<p id="para"></p>

<script>
</script>

</body>

</html>

گام سوم 

در این گام می خواهیم برای پاراگراف ایجاد شده استایل تعریف کنیم تا بتوانیم به آن پاراگراف رنگ و لعاب بدهیم و خصوصیات ظاهری آن را با css تعیین کنیم . 

پس یک تگ <style> را در قسمت head باز کرده و می بندیم  و کدهای زیر را بین آنها اضاف می کنیم : 

کد 3.1

<html>

<head>

<style>
1 #para{

2  position:absolute;
3  width:350px;
4  height:20px;
5  left:20px;
6  top:15px;
7  border:1px solid black;
8  direction:rtl;

}
</style>

</head>

<body>

<p id="para"></p>

<script>
</script>

</body>

</html>

تشریح کد ها :  در خط ۱ پاراگراف را با آی دی آن گرفته ایم تا خصوصیات آن را تعیین کنیم . 

در خط 2 خاصیت position  را برابر با absolute قرار داده ایم . تا بتوانیم بدون توجه به هیچ شی دیگری مکان پاراگراف را تعیین کنیم . 

در خط 3 عرض(width)پاراگراف را تعیین کرده ایم . 

در خط ۴ ارتفاع(height) پاراگراف را تعیین کرده ایم . 

در خط ۵ فاصله پاراگراف از سمت چپ صفحه (left)  را تعیین کرده ایم .

در خط 6 فاصله از بالای صفحه را تعیین کرده ایم (top).

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

در خط 8 تعیین کرده ایم که در پاراگراف ما متن ها راست چین باشند . rtl به معنی : right to left هست . 

 گام چهارم 

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

در ابتدا کدهای زیر را بین تگ <script> اضافه می کنیم  : 

کد 4.1

<html>

<head>

<style>
 #para{

  position:absolute;
  width:350px;
  height:20px;
  left:20px;
  top:15px;
  border:1px solid black;
  direction:rtl;

}
</style>

</head>

<body>

<p id="para"></p>

<script>

1 var text="بسم الله الرحمن الرحیم هست کلید در گنج حکیم"
2 var para=document.getElementById("para");
3 var b=text.split("");
4 var i=0;
5 var set=[];
6 set[0]="";

</script>

</body>

</html>

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

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

بدین منظور :  در خط یک یک متغیر به نام text را تعریف کرده ایم و متن مورد نظر را درون آن قرار داده ایم . 

در خط ۲ یک متغیر دیگر به نام para ایجاد کرده ایم و به وسیله ی دستور getElementById  پاراگراف مورد نظر که id آن برابر با para بود را گرفته ایم . 

در خط ۳ یک متغیر دیگر به نام b ایجاد کرده ایم  و آن را برابر با text.split("") قرار داده ایم . توجه کنید که دستور split("") در اینجا می آید و متن مورد نظر 

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

در خط ۴ یک متغیر به نام i ایجاد کردیم و آن را برابر با صفر قرار دادیم . i شمارنده ی برنامه ما به حساب می آید . 

در خط ۵ یک آرایه تعریف کرده ایم که نام آن set است  . این آرایه همان آرایه ای است که قرار است متن مورد نطر را که می خواهیم نمایش دهیم در بر بگیرد . 

در خط ۶ اندیس0 ام  (اعنصر 1 ام)  مجموعه set  را برابر با یک متن خالی قرار دادیم . در اندیس 0ام این مجموعه متن مورد نظر ما قرار می گیرد . 

گام پنجم 

 در این گام می خواهیم کدهای خود را کامل کنیم . پس در درون دستور setInterval  ادامه کد ها را می نویسیم : 

کد 5.1

<html>

<head>

<style>
 #para{

  position:absolute;
  width:350px;
  height:20px;
  left:20px;
  top:15px;
  border:1px solid black;
  direction:rtl;

}
</style>

</head>

<body>

<p id="para"></p>

<script>

 var text="بسم الله الرحمن الرحیم هست کلید در گنج حکیم"
 var para=document.getElementById("para");
 var b=text.split("");
 var i=0;
 var set=[];
 set[0]="";

1 setInterval(function(){
2 if(i<b.length){
3    set[0]+=b[i];
4    set[1]="_";
5    var c=set.join("");
6    para.innerHTML= c ;
7    i++;
8  }else{
9    i=0;
10    set[0]="";
11    }
12 },130);

</script>

</body>

</html>

 تشریح کد ها : در خط ۱ از دستور setInterval استفاده کرده ایم . این دستور در درون خود یک تابع دارد که دستورات درون آن طی یک 

زمان مشخص بر اساس میلی ثانیه اجرا می شوند . که در اینجا 130 میلی ثانیه است . 

در خط ۳ تا 7 مجموعه دستورات اصلی ما وجود دارند . ما در خط ۲ یک دستور شرطی if  قرار داده ایم  دستور if  مشخص می کند که

دستورات اصلی ما به تعداد اعضای مجموعه b اجرا شود . یعنی به تعداد حروف مورد نظر ما . b.lenght یعنی تعداد اعضای مجموعه b .

در خط ۳ به عنصر اول مجموعه set عنصر i ام مجموعه b را اضافه می کنیم . یعنی هر بار که این دستور اجرا شود حرف iام ما به 

عنصر اول مجموعه set که یک رشته بود اضافه می شود . 

در خط ۴ عنصر دوم مجموعه set را برابر با یک خط فاصله می کنیم .  چون می خواهیم این خط فاصله در آخر جمله ی به نمایش در آمده 

نشان داده شود . 

در خط ۵ به وسیله ی دستور join("")   عنصر اول و دوم مجموعه set را با هم الحاق می کنیم . یعنی جمله به دست آمده و همان خط فاصله را  

و آن را در متغیری به نام c  قرار می دهیم . 

در خط 6 متن درون پاراگراف مورد نظر را برابر با c قرار می دهیم . 

در خط ۷ به i یک واحد اضافه می کنیم .  خب فرض کنید همین دستورات بار ها و بارها اجرا شوند آنوقت تمام حروف ما تمام می شود و i بزرگ

تر از تعداد حروف ما می شود . پس در این صورت (else) می خواهیم خطوط 9 و 10 اجرا شوند . 

خط 9 و 10 در حقیقت جمله را صفر کرده و باعث می شوند جمله ی ما دوباره نوشته شود . 

نوشته شده توسط احسان عباسی
بازدید: 16772

آموزش صوتی JavaScript

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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

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