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

چاپ

مقدمه

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

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

کد مقدمه   

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

گام اول

در ایتدا  تگ های اصلی 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 در حقیقت جمله را صفر کرده و باعث می شوند جمله ی ما دوباره نوشته شود .