آموزش ساخت تابع تایپ خودکار در Html با جاوااسکریپت

برای ساخت تابع تایپ خودکاری که میخواهیم با استفاده از جاوااسکریپت ایجاد کنیم به سه آرگومان ورودی (1 - المان مورد نظر که میخواهیم متن درون آن خودکار تایپ شود، 2 - متن مورد نظر، 3- زمان فاصله بین تایپ هر حرف) نیاز داریم.

ابتدا المان مورد نظر را در سند html ایجاد میکنیم. برای مثال در اینجا یک تگ پاراگراف با ایدی result در سند html خود ایجاد میکنیم :

<p id="result"><p>

سپس با استفاده از سلکتور ها در جاوااسکریپت ، آن را انتخاب میکنیم :

var result = document.getElementById("result");

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

برای مثال یک تابع به نام writer ایجاد میکنیم و آرگومان های ورودی آن را نیز تایین میکنیم :

function writer(element,text,time){

}

این تابع سه آرگومان (المان مورد نظر، متن، زمان فاصله بین هر حرف(به ثانیه) ) را دریافت میکند و به ترتیب در text ، element و time ذخیره میکند.

حال باید یک شمارنده و یک Interval تعریف کنیم تا بتوانیم عمل تایپ خودکار را اجرا کنیم.

function writer(element,text,time){
	var i = 0;
	var run = setInterval(function(){
	
	},time*1000)
}

در اینجا گفتیم که هر (time*1000) میلی ثانیه یک تابع را اجرا کن .  دلیل نوشتن time*1000  آن است که واحد مقدار ورودی زمان برای Interval در جاوااسکریپت به میلی ثانیه است و برای راحتی کار ، مقدار آن را time*1000 قرار دادیم تا بتوانیم مقدار time را به ثانیه وارد کنیم و با استفاده از عمل ضرب ، خود آن به میلی ثانیه تبدیل کنیم. این عمل برای راحتی کار است.

حال باید تایین کنیم که در هر بار تکرار چه اتفاقاتی بیافتد.

با استفاده از charAt ، با توجه به index حروف متن وارد شده، تایین میکنیم که هر حرف از کلمه باید در هر چندثانیه ای که از قبل تایین کرده ایم به محتوای المانی که انتخاب کرده ایم اضافه شود. برای استفاده از index حروف ، از قبل یک شمارنده بنام i تایین کرده ایم و مقدار اولیه آن را 0 در نظر گرفته ایم:

function writer(element,text,time){
	var i = 0;
	var run = setInterval(function(){
		element.innerHTML+=text.charAt(i);
		i++;
	},time*1000)
}

در اینجا گفتیم که هر time*1000 میلی ثانیه ، عضو شماره i از متن را به المانی که انتخاب کرده ایم اضافه کن و به i یک واحد اضافه کن.

حالا باید تایین کنیم که اگر تمام حروف متن اضافه شدند و دیگر عضوی باقی نماند، Interval را غیرفعال شود. با استفاده از دستورات شرطی و دستور length این کار را انجام میدهیم

function writer(element,text,time){
	var i = 0;
	var run = setInterval(function(){
		element.innerHTML+=text.charAt(i);
		i++;
		if(i==text.length){
            clearInterval(run);
        }
	},time*1000)
}

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

جواب این است که تعدای که از length به دست می آید با تعدادی که از index حروف به دست می آید متفاوت است.

اما چگونه؟

وقتی بخواهیم تعداد اعضا را با index بسنجیم باید از 0 شروع کنیم ولی length از 1 شروع میشود.

مثلا اگر یک متن داشته باشیم که 8 کاراکتر دارد تعداد length آن برابر 8 است ولی آخرین index آن 7 است.

بنابرین مثلا در یک متن 8 حرفی ، index شماره 8 را نداریم و index آخرین عضو آن برابر 7 است.

در این تابع هم چون ما با index  عمل تایپ خودکار را انجام میدهیم بنابرین شرطی گذاشتیم که اگر i که شمارنده index است برابر length آن متن شد Interval را از کاربینداز زیرا در این صورت مقدار i با length متن برابر است.

حالا میتوانیم از آن استفاده کنیم.

برای مثال میخواهیم که درون تگ پاراگرافی که انتخاب کرده ایم ، متن (welcome) را بصورت تایپ خودکار قرار دهیم. و میگوییم که بین نوشتن هر کاراکتر ، نیم ثانیه فاصله باشد :

writer(result,"welcome",0.5)

از متن های فارسی نیز میتوانید استفاده کنید.