آموزش جاوااسکریپت در 34 جلسه
با سلام. قصد دارم در 34 جلسه که البته امکان بیشتر شدن آن نیز وجود دارد به صورت کامل شما عزیزان را با زبان جاوااسکریپت آشنا کنم.
این مجموعه جلسات ترجمه ای از وب سایت W3C School است و از مباحث بسیار مقدماتی آغاز شده و کم کم به بخش ها و مباحث پیچیده تر می رسیم.
پاسخ : آموزش جاوااسکریپت در 34 جلسه
آموزش جاوااسکریپت – جلسه سی ویکم: اعتبار سنجی فرم ها به وسیله جاوااسکریپت برای بررسی معتبر بودن محتویاتی که کاربر در یک فرم وارد می کند را می توان از طریق برنامه نویسی سمت سرور انجام داد ولی برای بررسی فرم قبل از فرستادن آن به سرور فقط باید از جاوااسکریپت استفاده کرد.
چیزهایی که می شود با جاوااسکریپت اعتبارسنجی کرد به شرح زیر است:
آیا کاربر یک فیلدی که پر کردن آن الزامی است را خالی گذاشته است؟
آیا کاربر آدرس ایمیل معتبری (از نظر ساختار ایمیل) وارد کرده است؟
آیا کاربر تاریخ صحیحی وارد کرده است؟
آیا کاربر در داخل یک فیلد عددی، یک متن وارد کرده است؟
فیلدهای الزامی
تابع زیر بررسی می کندکه آیا یک فیلد خالی است. اگر فیلد خالی بود یک حعبه هشدار باز می شود و به کاربر اطلاع می دهد که فیلد را پر کند، ضمناً یک مقدار FALSE بر گردانده می شود و کاربر نمی تواند فرم را ثبت یا SUBMIT نند.
کد:تابع بالا را می توانید زمانی که کاربر فرم را ثبت کرد به کار برید:
function validateForm()
{
var x=document.forms["myForm"]["fname"].value
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
کد:
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
اعتبارسنجی ایمیل
تابع زیر بررسی می کند که محتویات فیلد ساختار درست ایمیل را دارد یا نه.
این به این معنی است که مقدار وارد شده باید حتماً یک علامت @ و عداقل یک نقطه (.) داشته باشد. ضمناً @ نباید اوین کاراکتر باشد و نقطه هم باید بعد از علامت @ بیاید و در پایان حداقل 2 کاراکتر وجود داشته باشد.
کد:تابع بالا را می توانید زمانی که کاربر فرم را ثبت کرد به کار برید:
function validateForm()
{
var x=document.forms["myForm"]["email"].value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
کد:
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
پاسخ : آموزش جاوااسکریپت در 34 جلسه
آموزش جاوااسکریپت در 34 جلسه آموزش جاوااسکریپت – جلسه سی و دوم: رویدادهای مربوط به زمان و تنظیم آن
جاوااسکریپت را می توان در فاصله های زمانی مختلفی اجرا کرد که به آن رویدادهای زمان بندی می گویند.
با استفاده از جاوااسکریپت شما می توانید تنظیم کنید که بعضی کارها در زمان خاصی اجرا شود که به آن رویدادهای زمان بندی می گویند.
رویدادهای زمانی در جاوااسکریپت خیلی ساده هستند. دو متد اصلی که در آنها استفاده می شود عبارتند از:
setTimeout() که باعث می شود کدی در زمانی در آیند اجرا شود.
clearTimeout() که عمل setimeout() را لغو می کند.
نکته: SeTimeout() و clearTimeout() هر دو متدهایی از شیء HTML Dom Window هستند.
متد setTimeout()
نحو (دستور):
کد:این متد یک value یا مقدار بمیگرداند. در دستور بالا، مقدار در متغیری به نام t ذخیره می شود. اگر می خواهید تابع setTimeout() را لغو کنید می توانید با استفاده از نام تابع به آن دسترسی داشته باشید.
var t=setTimeout("javascript statement",milliseconds);
اولین پارامتر این دستور یک رسته (استرینگ) از دستورات جاوااسکریپت و یا فراخوانی یک تایع است که می خواهیم آن ها را در زمان خاصی اجرا کنیم.
پارامر دوم نشان دهنده این است استت که در چه زمانی بعد از این لحظه شما می خواهید آن دستورات را اجر کنید.
نکته: هر 1000 میلی ثانیه یک ثانیه است.
مثال:
وقتی که دکمه موجمود در مثتا زیر فشار داده می شود، یک پنجره هشدار (alert box) بعد از گذشت 3 ثانیه نمایان می گردد.
کد:
<html>
<head>
<script type="text/javascript">
function timeMsg()
{
var t=setTimeout("alertMsg()",3000);
}
function alertMsg()
{
alert("Hello");
}
</script>
</head>
<body>
<form>
<input type="button" value="Display alert box in 3 seconds"
onclick="timeMsg()" />
</form>
</body>
</html>
مثال: لوپ بی نهایت
اگر می خواهید یک تایمر در یک حلقه بی نهایت اجرا شود باید تابعی بنویسید که خودش را صدا بزند.
در مثال زیر وقتی که دکمه زده می شود، فیلد ورودی از 0 شروع به شمارش می کند (برای همیشه).توجه کنید که ما ضمناً ما تابعی داریم که بررسی می کند اگر تایمر در حال حاضر در حال اجراست اگر دکمه چندین بار فشره شد تایمرهای جدید ایجاد نشود.
کد:
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()">
<input type="text" id="txt" />
</form>
</body>
</html>
clearTimeout()
دستور نحوی:
کد:
clearTimeout(setTimeout_variable)
مثال:
مثال زیر همان حلقه بی نهایت بالاست. تنها تفاوت این است که ما الآن یک دکمه ی “Stop Count!” اضاه کرده ایم که تایمر را متوقف می کند.
کد:
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onclick="stopCount()">
</form>
</body>
</html>
مثال های بیشتر:
کمه ای که هر دو ثانیه دو ثانیه شمارش انجام می دهد:
کد:مثال 2:
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onclick="stopCount()">
</form>
</body>
</html>
یک ساعت ساده ی دیجیتال با جاوااسکریپت:
کد:
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+" :"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
پاسخ : آموزش جاوااسکریپت در 34 جلسه
آموزش جاوااسکریپت در 34 جلسه آموزش جاوااسکریپت – جلسه سی و سوم: ساخت اشیاء
شایاء برای سازماندهی به اطلاعات بسیار مفید هستند.
مترجم: در اینجا نمی خواهی زیاد وارد مبحث OOP در جاوااسکریپت شویم فقط در حد آشنایی شما با نحوه ساختن اشیا در جاوااسکریپت و استفاده از آنها کفایت می کنیم. مبحث Object Oriented در جاوااسکریپت خود مبحث جداگانه است که به بیش از این تعداد جلسات نیازمند است.
اسن جلسه را با دو مثال شروه می کنیم.
مثال1: ساخت یک نمونه (Instance) مستقیم از یک شیء
کد:
<html>
<body>
<script type="text/javascript">
personObj={firstname:"John",lastname:"Doe",age:50, eyecolor:"blue"}
document.write(personObj.firstname + " is " + personObj.age + " years old.");
</script>
</body>
</html>
که خروجی آن به صورت زیر است:
کد:
John is 50 years old.
مثال 2: ساخت یک الگو (template) برای یک شیء:
کد:که خروجی این مثال هم به همان صورت بالاست.
<html>
<body>
<script type="text/javascript">
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>
</body>
</html>
اشیای جاوااسکریپت
در جلسات قبل دیدیم که جاوااسکریپت یک سری اشیای داخلی برای خود دارد مثال Strint ،Date ، Array و ...علاوه بر این اشیای درونی شما می توانید اشیای خودتان را هم بسازید.
یک شیء تنها نوع خاصی از داده هاست مه شامل مجموعه ای از خصوصیات (properties) و متدها (methods) است.
بگذارید با یک مثال شرع کنیم:
یک شخص (Person) یک شیء است. خصوصیات مقادیری است که با شیء وابسته شده اند. خصوصیات شخص عبارتند از نام، قد، وزن، رنگ پوست، زنگ چشم و ... تمام اشخاص اسن خصوصیات را دارند ولی مقادیر این خصوصیات از شخصی به شخص دیگر فرق می کند. اشیا متدهایی هم دارند. متدها اعمالی هستند که می توانند توسط یک شخص صورت گیرند. متدهای شخص می توان شامل eat()، sleep()، work()، play() و ... باشد.
خصوصیات (Properties)
دستور نحوی برای دستیابی به خصئصیات یک شیأ به صورت زیر است:
کد:شما می توانید به راحتی با مقدار دادن یک خصوصیت آن خصوصیت را به شیء اضافه کنید. فرض کنید که personObj در حال حاضر ساخته شده و وجود دارد.شما می توانید خصوصیاتی با نامهای firstname، lastname، age و eyecolor را به صورتی که در زیر نشان داده شده به آن نسبت دهید:
objName.propName
کد:که نتیجه کد بالا به صورت زیر است:
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=30;
personObj.eyecolor="blue";
document.write(personObj.firstname);
کد:
John
متدها (Methods):
یک شیء می توان شامل متد هم باشد.
با استفاده از دستور زیر می توانید به متدهای یک شیء دسترسی داشه باشید:
کد:نکته: پارامترهای متد را باید داخل پرانتزها به آن ارسال نمایید اگر بخواهید متد sleep() را به شیء personObj نسبت دهید به صورت زیر عمل کنید.
objName.methodName()
کد:
personObj.sleep();
ساخت شیء خودتان:
راه های یادی برای ساخت اشیاء وحود دارد:
1- ساخت یک نمونه مستقیم از یک شیء
کدهای زیر یک نمونه مستقیم از یک شیء می سازد و 4 خصوصیت را به آن نسبت می دهد:
کد:
personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";
راه حل دیگر (استفده از لیترال های شیء):
کد:
personObj={firstname:"John",lastname:"Doe",age:50, eyecolor:"blue"};
افزودن یک متد به شیء هم بسیار ساده است. مثال زیر یک متد به نام eat() به personObj اضافه می کند:
کد:
personObj.eat=eat;
2- ایجاد یک سازنده ی شیء:
ساخت یک تابع که یک شی ء را بسازد:
کد:در داخل تابع شما باید از دستور this.propertyName استفاده کنید. دلیل استفاده از این this ها اسن است که شما در هر لحظه بیش از یک شخص دارید (و اشخاصی که شما دارید بر روی آن ها کار می کنید باید مشخص باشند). دلیل استفاده از “this” این است که: یک نمونه از شیء در دسترس باشد.
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
حالا که شما یک سازنده شیء دارید می توانید نمونه های جدیدی از روی آن بسازید به صورت زیر:
کد:ضمناً شما می توانید متدهایی را به شیء شخص نسبت دهید. این کارها هم در داخل تابع انجام می شود:
var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");
کد:دقت کنید متدها فقط به اشیاء متصل می شوندو بعداً ما باید تابع newlastname را برایش بنویسیم تا بتوانیم از آن استفاده کنیم.
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.newlastname=newlastname;
}
کد:این تابع نام خانوادگی جدید شیء شخص را تعریف می کند و آن ا به شخص نسبت می دهد. جاوااسکریپت با استفاده از کلمه this متوجه می شود که شما دارید درباره کدام شخص صحبت می کند. بنابراین شما اکنون می توانید بنویسید:
function newlastname(new_lastname)
{
this.lastname=new_lastname;
}
کد:
myMother.newlastname("Doe")
پاسخ : آموزش جاوااسکریپت در 34 جلسه
آموزش جاوااسکریپت – جلسه سی و چهارم: شما جاوااسکریپت یاد گرفـتید. حالا چه کنید؟
خلاصه جاوااسکریپت
در این آموزش فرض بر این گذاشته شد که شما می دانید که چگنه جاوااسکریپت را برای پویاتر شدن و جذاب تر شدن وب سایتتان به صفحات HTML خود اضافه کنید. (م: البته در مثال ها هم تا حدودی آشنا شدید ولی به صورت جلسه ای خاص چیزی مطح نشد).
شما یاد گرفتید چگونه به متدها پاسخ دهید، چگونه فرم ها را اعتبارسنجی کنید و چگونه اسکریپت های مختلفی برای پاسخ به سناریوهای مختلف بسازید.
همچنین یاد گرفتید که چگونه اشیا را بسازید و از آن ها استفاده کنید و همچنین چگنه از اشیای داخلی جاوااسکریپت استفاده کنید.
م: این آموزش ها آموزش برنامه نویسی به زبان جاوااسکریپت بود و نه آموزش ترفندهای جاوااسکریپت و بیشتر مناسب کسانی است که می خواهند این زبان را به عنوان یک زبان برنامه نویسی سمت کلاینت فرابگیرند و نه کسانی که بخواهند قالب وبلاگ خود را با کدهای جاوااسکریپت زیبا تر کنند. البته با این آموزش ها و تلفیق آن ها به سادگی تمام این کارهایی که به عنوان کدهای جاوااسکریپت برای وبلاگ ها ارائه می شود را در صورتی که کمی با علم برنامه نویسی آشنا باشید انجام دهید.
خوب حالا از این به بعد چه کار باید کرد؟
گام بعدی یادگیری HTML DOM، jQuery و AJAX است. اگر می خواهید یک زبان سمت سرور را فرابگیرید PHP و ASP.NET گزینه های پیش روی شماست که در همین وب سایت کیش مهر می توانید آموزشهای خوبی را در بخش برنامه نویسی وب بیابید.
HTML DOM
HTML DOM استانداردی برای دسترسی و کار کردن و ایجاد تغییر روی عناصر HTML است. یک پلتفرم و مستقل از زبان برنامه نویسی است که شما می توانید در زبان های برنامه نویسی مختلف اعم از Java، JavaScript ، VBScript و ... از آن استفاده کنید.
م: حتماً این پلتفرم را بیاموزید زیرا که بسیار به جاوااسکریپت و جاوااسکریپت به ان وابسته است (خصوصاً از سمت جاوااسکریپت) شاید بعد از جی کئری و یا شاید هم زمان با هم آموزش این بخش رو هم شروع کنم. شاید ... شاید ...
jQuery
یک کتابخانه جاوااسکریپت است.
برنامه نویسی با جاوااسکریپت را بسیار بسیار ساده می کند.
م: امیدوارم به زودی آموزش jQuery ترجمه شده از همین وب سایت یعنی W3Schools رو شروع کنم.
AJAX
AJAX = Asynchronous JavaScript and XML جاوااسکریپت و XML نا همگام
یک زبان برنامه نویسی نیست ولی راهی جدید برا استفاده از استاندارهای موجود است.
درباره جابجا کردن داده ها با یک سرور و به روزرسانی بخشی از صفحه بدون بارگزاری مجدد صفحه است.
مثال هایی از آژاکس مثال گوگل مپ، جیمیل، یوتیوب و تب های فیس بوک است.
ASP.NET / PHP
همانطور که یم فایل HTML در سمت کلاین (در داخل مرورگر) اجرا می شود یک فایل ASP.NET/PHP در سمت سرور اجرا می شود.
با استفاده از این زبان ها شما می توانید به صورت پویا هر محتوایی را به وب سایتتان اضافه، از آن کم و یا آن را ویرایش کنید. می توانید از دیتابیس ها برای ذخیره اطلاعات استفاده نمایید.
در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)
مجوز های ارسال و ویرایش
آدرس لینک بک
درباره لینک بک ها
پاسخ با نقل قول
علاقه مندی ها (Bookmarks)