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

bestdata

Active Member
با سلام خدمت بازدید کنندگان گرامی
من خودم قصد داشتم امسال زبان جاوا اسکریپت خودم رو قوی تر کنم گفتم خوب پس بیام از صفر شروع کنم
گفتم حالا که میخوام یاد بگیرم تاپیکی تو انجمن مجید آنلاین راه اندازی کنم و آموزش ها رو به صورت ساده و مختصر همراه با فایل تست بذارم تو یه تاپیک اختصاصی تا هرکسی خواست ازش استفاده کنه

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

قوانین این تاپیک:
1.لطفا سوالات در مورد جاوا اسکریپت رو در این تاپیک نپرسید اینجا فقط آموزش داده میشود
2.لطفا از پست تشکر هم خود داری کنید

قوانین بر اثر زمان تغییر خواهند کرد قبل از هر کاری اول قوانین رو بخونید بعد انجام بدید

کسانی که مایل به خواندن این آموزش هستند می توانند از "ابزارهای مبحث" استفاده کرده و در این مبحث مشترک شوند.


منبع آموزش هم سایت
w3schools.com/js/default.asp هست

قابل ذکره برای یادگرفتن جاوا اسکریپت باید با زبان های HTML و CSS آشنایی داشته باشید.
 
آخرین ویرایش:

bestdata

Active Member
نوشتن یک خط کد HTML (یا هر زبان دیگری) توسط جاوا اسکریپت
از دستور

[HTMLS]
document.write("code html");


[/HTMLS]



استفاده می کنیم
به طور مثال کد زیر یک سر فصل 1 با یک پاراگراف توضیح ایجاد می کنید

[NOLINK]<script>
document.write("<h1>آموزش جاوا اسکريپت</h1>");
document.write("<p>آموزش جاوا اسکريپت از پايه براي تمامي کاربران </p>");
</script>[/NOLINK]



فایل تست هم ضمیمه کردم بازش کنید خروجی رو خواهید دید
تصویری از خروجی کد بالا
 

پیوست ها

  • document-write.png
    document-write.png
    2.7 کیلوبایت · بازدیدها: 7
  • document.write.zip
    296 بایت · بازدیدها: 17
آخرین ویرایش:

bestdata

Active Member
دستور alert جاوا اسکریپت

برای اینکه با کلیک دکمه ای پیامی به بازدید کنندگان نمایش دهید می توانید از دستور alert استفاده کنید

[HTMLS]<button type="button" onclick="alert('به آموزش جاوا اسکریپت خوش آمدید!')">Click Me</button>[/HTMLS]

عکس خروجی و فایل تست رو ضمیمه کردم
 

پیوست ها

  • alert.png
    alert.png
    4.6 کیلوبایت · بازدیدها: 4
  • alert.zip
    262 بایت · بازدیدها: 2

bestdata

Active Member
آموزش دستور innerHTML

زبان جاوا اسکریپت می تواند محتوای عنصری از HTML را تغییر دهد برای اینکار اول باید برای اون عنصر ID تعریف کنید (مربوط به زبان HTML می شود) بعد در تابع فایل جاوا اسکریپت ID رو صدا میزنیم و با دستور innerHTML محتوای عنصر را تغییر می دهیم

نمونه کد
[HTMLS]
<p id="test">
جاوا اسکریپت توانایی تغییر عناصر HTML را دارد.
</p>


<script>
function myFunction()
{
x=document.getElementById("test"); // برای پیدا کردن (برای اینکار برای اون عنصر آی دی تعریف می کنیم و ایجا آی دی اون رو صدا میزنیم) محل عنصر مورد نظر
x.innerHTML="آموزش جاوااسکریپت"; // محتوای عنصر مورد نظر رو تغییر میدیم
}
</script>


<button type="button" onclick="myFunction()">Click Me!</button>
[/HTMLS]

فایل خروجی جهت تست این قابلیت پیوست شد
 

پیوست ها

  • innerHTML.zip
    619 بایت · بازدیدها: 4

bestdata

Active Member
آموزش استفاده از توابع جاوا اسکریپت

با جاوا اسکریپت می توان ویژگی های زیبایی رو خلق کرد مثلا می توان کاری کرد با کلیک بر روی یک لامپ خاموش اون رو روشن کرد

این پست یه توضیح کلی در مورد عملکرد کد های جاوا اسکریپت هست

کد مورد نظر
[HTMLS]<script>function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="pic_bulboff.gif";
}
else
{
element.src="pic_bulbon.gif";
}
}
</script>


<img id="myimage" onclick="changeImage()"
src="pic_bulboff.gif" width="100" height="180">[/HTMLS]

وقتی صفحه لود شود فقط خروجی کد
[HTMLS]<img id="myimage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">[/HTMLS]
که یک عنصر عکس هست و آدرس آن یک عکس لامپ خاموش هست نمایش داده می شود
اما در این عنصر عکس تابعی (فانکشن) برای کلیک بر روی عکس تعریف شده است
[HTMLS]onclick="changeImage()"[/HTMLS]
اسم این تابع changeImage هست این تابع باید در کد جاوا اسکریپت تعریف شده باشد وگرنه با کلیک بر روی عکس هیچ اتفاقی رخ نخواهد داد
نحوه تعریف یک تابع در جاوا اسکریپت به شکل زیر استگ
[HTMLS]<script>
function changeImage()
{
//محل نوشتن کد های تابع
}
</script>[/HTMLS]
توضیح مختصر در مورد تعریف تابع باید اول کلمه function رو نوشته بعد با زدن یک فاصله اسم تابع مورد نظرمون رو بنویسیم
نام تابع دارای قوانین خاص خودش هست مثلا بهتره با عدد شروع نشه باید منحصر بفرد باشه از توابع از پیش تعریف شده جاوا اسکریپت نباشد و....

حالا کد های این تابع رو توضیح مختصری بدیم
[HTMLS]
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="pic_bulboff.gif";
}
else
{
element.src="pic_bulbon.gif";
}


[/HTMLS]
توضیح دستور اول
[HTMLS]element=document.getElementById('myimage')[/HTMLS]




با این کد مشخص می کنیم که کدوم عنصر از HTML رو در نظر داریم توجه کنید که myimage همون ID عنصر عکس در HTML هست
element در این دستور یک اسم هست و می تواند دلخواه باشد
document.getElementById نام یک تابع پیش تعیین شده جاوا اسکریپت هست و باید به همین شکل نوشته شود

توضیح بخش دوم کد ها
[HTMLS]
if (element.src.match("bulbon"))
{
element.src="pic_bulboff.gif";
}
else
{
element.src="pic_bulbon.gif";
}
[/HTMLS]

این یک کد شرطی هست
بخش اول این کد
[HTMLS]if (element.src.match("bulbon")) {
element.src="pic_bulboff.gif";
}[/HTMLS]
مفهومش اینه اگر در src عنصر مورد نظر عبارت bulbon یافت شد کد element.src="pic_bulboff.gif"; را اجرا کن

توضیح بخش دوم کد شرطی
[HTMLS]else {
element.src="pic_bulbon.gif";
}[/HTMLS]
در غیر اینصورت کد element.src="pic_bulbon.gif"; رو اجرا کن

حالا شاید بپرسید element.src="pic_bulboff.gif"; و element.src="pic_bulbon.gif"; چه کار می کنند؟

توضیح کد element.src="pic_bulboff.gif";
این کد به عنصر مورد نظر در HTML رفته و بخش src آن را پیدا خواهد کرد و مقدار آن را به pic_bulboff.gif که آدرس لامپ خاموش هست تغییر میدهد
توضیح کد element.src="pic_bulbon.gif";
این کد به عنصر مورد نظر در HTML رفته و بخش src آن را پیدا خواهد کرد و مقدار آن را به pic_bulbon.gif که آدرس لامپ روشن هست تغییر میدهد


خلاصه وقتی تابع changeImage صدا زده میشه آدرس عکس رو بررسی می کنه اگه آدرس لامپ روشن باشه آدرس لامپ خاموش رو جاش میذاره اما اگه آدرس عکس روشن بود آدرس لامپ خاموش رو با استفاده از else جایگزین می کنه


فایل خروجی جهت تست پیوست شد دانلود کنید و امتحان کنید
 

پیوست ها

  • function.zip
    5.6 کیلوبایت · بازدیدها: 6

bestdata

Active Member
آموزش تغییر style توسط جاوا اسکریپت

خوب دوستان امیدوارم که آموزش ها بدردتون خورده باشه با اینکه هنوز استقبالی (تشکر زیر پست ها) نشده ولی من بازم ادامه میدم

اینبار میخوام کد جاوا اسکریپتی بنویسم که بتونه استایل یه عنصر HTML رو تغییر بده
برای اینکار من یه تابع میسازم و هر وقت اون تابع صدا زده بشه این اتفاق می افته
کد تابع به شکل زیر هست

[HTMLS]
<script>
function myFunction()
{
x=document.getElementById("demo") // Find the element
x.style.color="#ff0000"; // Change the style
}
</script>
[/HTMLS]
خوب کد عنصری که میخواهیم تغییرش بدیم هم به شکل زیر است
[HTMLS]
<p id="demo">
JavaScript can change the style of an HTML element.
</p>
[/HTMLS]
و کد عنصری که تابع جاوا اسکریپت رو فراخوانی می کنه به شکل زیر است
[HTMLS]
<button type="button" onclick="myFunction()">Click Me!</button>
[/HTMLS]

توضیح مختصر با کلیک کردن بر روی دکمه تابع جاوا اسکریپت فراخوانی می شود و استایل عنصر مورد نظر تغییر می کند
من برای اینکه همیشه تکرار باعث میشه یه چیزی تو ذهن موندگار بشه میام خط به خط اینا رو توضیح میدم

توضیح کد تعریف تابع جاوا اسکریپت
[HTMLS]
<script>
function myFunction()
{
x=document.getElementById("demo") // Find the element
x.style.color="#ff0000"; // Change the style
}
</script>
[/HTMLS]
توجه کنید هر وقت خواستید یک کد جاوا اسکریپت رو توی یک فایل HTML یا php یا asp ... بخواهید بنویسید باید اول تگ <script> رو بنویسید تا مرورگر متوجه بشه که کد جاوا اسکریپت هست

برای تعریف تابع از کد function myFunction() استفاده می کنیم که function همواره ثابت است (یعنی هر وقت بخوای تابعی تعریف کنی اول باید این رو بنویسی) بعد اسم تابع رو مینویسیم myFunction توجه کنید که اسم تابع دلخواه هست و می تواند هر چیز دیگری باشد اما قواعد نام گذاری خاص خود را دارد توجه کنید بعد از نام تابع همواره () وجود دارد
پس یکی از نشانه های تابع در جاوا اسکریپت وجود کلمه function در ابتدا خط و وجود () بعد از نام تابع هست

کاراکتر } محدوده کد های تابع را مشخص می کند (بخش آغازین کد تابع رو مشخص می کند
درصورتی که تابع فقط یک خط دستور داشته باشد میتوان } را ننوشت

x=document.getElementById("demo") // Find the element تشکیل شده از دو قسمت است یکی x=document.getElementById("demo") و دیگری // Find the element
توضیح بخش x=document.getElementById("demo") در این خط متغییری به نام x تعریف کرده و مقدار آن را ID عنصر مورد نظر قرار داده است
پس برای تعیین ID عنصر مورد نظر از document.getElementById("demo") استفاده می کنیم
و برای مقدار دهی یه متغییر از = استفاده می کنیم
توضیح بخش // Find the element به این نوع کد ها کامنت گفته می شوند که برای توضیح دستورات نوشته شده هست و هیچ تاثیری در عملکرد فایل جاوا اسکریپت ندارند
برای نوشتن کامنت می توان اول دوبار پشت سر هم / بنویسید ( اینطور // ) بعد توضیح خود را به هر زبانی که دوست دارید ( انگلیسی فارسی روسی ... ) بنویسید توجه شود وقتی // نوشته می شود یعنی توضیحات یک خط هستند اگه با زدن اینتر به خط پایین بروید دیگر از حالت کامنت خارج می شود و یه دستور حساب می شود
تو این کدی که داریم مثال میزنیم توضیحش گفته " پیدا کردن عنصر مورد نظر"

x.style.color="#ff0000"; // Change the style مث کد بالا تشکیل شده از دو بخش هست یک بخش دستور یک بخش کامنت


x.style.color="#ff0000"; مشخص کرده که متغییر x ( که همون عنصر مورد نظر ما هست چون در کد قبلی مقدار x را ID عنصر مورد قرار دادیم) قسمت style آن بخش color تغییر کنه به کد رنگ #ff0000
پس هر وقت بخواهیم بخش رنگ متن یک عنصر را تغییر دهیم باید از کد نام.style.color استفاده کنیم
بخش کامنت هم گفته تغییر استایل

کاراکتر { مشخص کرده که کد تابع به پایان رسیده

وقتی بخواهیم دیگر کد جاوا اسکریپت ننویسیم و به HTML ادامه بدیم باید </script> بنویسیم که نشان دهنده پایان کدهای جاوا اسکریپت هست

خوب این از توضیح کد جاوا اسکریپت
کد کلی میشه کد زیر
[HTMLS]
<p id="demo">
JavaScript can change the style of an HTML element.
</p>


<script>
function myFunction()
{
x=document.getElementById("demo") // Find the element
x.style.color="#ff0000"; // Change the style
}
</script>


<button type="button" onclick="myFunction()">Click Me!</button>
[/HTMLS]

فایل جهت تست این تابع پیوست شده دانلود کنید و اجراش کنید تا خروجی رو ببینید
من برای اینکه متوجه بشید که نام تابع دلخواه هست نام تابع را در فایل پیوست تغییر داده ام
 

پیوست ها

  • x.style.color.zip
    464 بایت · بازدیدها: 2

bestdata

Active Member
دریافت فقط عدد در input توسط جاوا اسکریپت

تو این پست میخوام کدی رو براتون توضیح بدم که کارش اینه اگه توی عنصر input غیر از عدد چیز دیگه ای وارد کنید بهتون پیامی داده بشه و بگه که ورودی عدد نیست.

کد تابع جاوا اسکریپت
[HTMLS]
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("Not Numeric");
}
}
</script>
[/HTMLS]
کد عنصر input
[HTMLS]<input id="demo" type="text">[/HTMLS]

کد دکمه برای فراخوانی تابع جاوا اسکریپت
[HTMLS]<button type="button" onclick="myFunction()">Click Me!</button>[/HTMLS]

خوب بازم مث همیشه خط به خط توضیح میدم
<script> تگ آغازین برای نوشتن دستورات زبان برنامه نویسی جاوا اسکریپت هست با نوشتن این مروگر متوجه میشود که خطوط جاوا اسکریپت هستند
function myFunction() یک تابع با نام myFunction تعریف شده است
} مشخص کردن محل شروع محدوده کد های تابع جاوا اسکریپت

var x=document.getElementById("demo").value; این کد یکم تازگی داره واسه همین توضیح بیشتری در موردش میدیم
بخش اولش var x که داره متغییر x رو تعریف می کنه البته میشد بجاش فقط x نوشت اما var x شکل استاندارد هست
= نشان دهنده این است که متغییر میخواهد مقدار دهی شود (مقدار قبلی حذف و مقدار جدید جایگزین می شود)
document.getElementById("demo").value به فایل HTML رفته و عنصری که ID آن demo هست رو بدست میاره و مقدار (value ) آن عنصر رو بدست میاره
پس این خط دستور مقدار عنصر مورد نظر را بدست می آورد و این مقدار را در متغییر x قرار می دهد



if(x==""||isNaN(x)) این خط دستور هم تازگی داره یکم بیشتر توضیحش میدم
ساختار کلی این هست if(شرط) پس این خط به دو قسمت تقسیم می شود if() و x==""||isNaN(x)
بخش if() که نیازی به توضیح مفصل نیست و میدونید وقتی این میاد یعنی یه شرط رو میخواد چک کنه اگه شرط درست بود کد هاش داخل رو اجرا می کنه اگه شرط درست نبود کد های داخل رو اجرا نمی کنه
اما بخش x==""||isNaN(x) به سه قسمت تقسیم میشه x=="" و || و isNaN(x)
بخش x=="" مقدار متغییر x رو با مقدار "" (همون هیچ یا پوچ) مقایسه می کنه در صورت برابر بودن شرط درست میشه
پس نکته جدید اینکه == برای مقایسه کردن مقدار ها هست و مقدار هیچ کدوم رو تغییر نمیده

|| نماید یا هست بخش شرط دو قسمت داره این نماد میگه یا بخش اول درست بود انجام بده یا بخش دوم
یه مثال بهتر بزنم تا این نماد را بهتر درک کنید فرض کنید به شما میگن دو تاس را با هم بندازید اگر 2 یا 3 اومد یک سیب بردارید
حالا شما تاس رو میندازید یکی 2 و دیگری 5 میاد یک سیب بر میدارید
تاس میندازی یکی 4 و دیگری 3 میاد یک سیب دیگه بر میدارید
تاس میندازید یکی 2 و دیگری 3 میاد یک سیب دیگه بر میدارید
تاس میندازید یکی 5 و دیگری 7 میاد شرط درست نیست پس نمی تونید سیب بردارید

isNaN(x) یک تابع از پیش تعریف شده در جاوا اسکریپت رو صدا میزند ومقدار x رو به تابع میفرستد و اگر x عدد نباشد شرط درست میشود

حالا اگه isNaN(x) یا x=="" یکی از این دو یا هر دو همزمان درست باشد شرط اجرا میشود

} نشان دهنده محل آغاز کد های شرط هست

با انجام شرط کد زیر اجرا میشوند
alert("Not Numeric"); که از تابع از پیش تعریف شده alert استفاده شده و یک پیامی به کاربر نشان می دهد

{ نشان دهنده پایان کد های شرط هست
{ نشان دهنده پایان محدوده کدهای تابع هست

شاید سوالی برایتان پیش بیاید اگر شرط درست نشود چه کدی اجرا خواهد شد؟
جواب این است که هیچ کدی اجرا نخواهد شد

</script> هم پایان محدوده کد نویسی به زبان جاوا اسکریپت مشخص می کنیم

خوب اینم از توضیحات این کد ها امیدوارم مفید باشند پس کد کامل میشه
[HTMLS]
<input id="demo" type="text">


<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("Not Numeric");
}
}
</script>


<button type="button" onclick="myFunction()">Click Me!</button>
[/HTMLS]

من فایل پیوست رو هم ID عنصر هم نام تابع هم متن پیام رو تغییر دادم می تونید دانلود کنید و تست کنید
توجه کنید باید روی دکمه کلیک کنید با زدن اینتر تابع صدا زده نمیشود
 

پیوست ها

  • document.getElementById.zip
    535 بایت · بازدیدها: 2

bestdata

Active Member
توضیح مختصری در مورد جاوا اسکریپت

- زبان جاوا اسکریپت باید بین دو تگ <script> و </script> نوشته شود
نمونه کد جاوا اسکریپت که با تگ
<script> شروع وبا تگ </script> پایان آن مشخص شده است
[HTMLS]
<script>
alert("My First JavaScript");
</script>
[/HTMLS]
- جاوا اسکریپت می تواند هم در body و هم در head استفاده شود اما برای بهینه تر شدن لود سایت بهتره که آنرا در بخش footer سایت (بخش پایانی body ) قرار بدیم
نمونه کد جاوا اسکریپت در تگ BODY
[HTMLS]
<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
.
.
</body>
</html>
[/HTMLS]
نمونه کد جاوا اسکریپت در تگ HEAD
[HTMLS]
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>


<body>


<h1>My Web Page</h1>


<p id="demo">A Paragraph</p>


<button type="button" onclick="myFunction()">Try it</button>


</body>
</html>
[/HTMLS]
- کدهای جاوا اسکریپت رو می توان در فایلی ذخیره نمود و آن فایل را در صفحه فراخوانی کرد
نمونه کد فراخوانی جاوا اسکریپت از فایل
[HTMLS]
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
[/HTMLS]
توجه کنید که درون فایل جاوا اسکریپتی که صدا زده می شود نباید از تگ های
<script> و </script> استفاده شده باشد

قابل ذکره که مایکروسافت اجازه نوشتن برنامه برای ویندوز هشت توسط زبان جاوا اسکریپت را داده است و این آینده روشنی برای زبان برنامه نویسی جاوا اسکریپت هست. ( جاوا اسکریپت هم اکنون در اینترنت و ویندوز هشت استفاده می شود)

 

bestdata

Active Member
انجام عملیات جبری با جاوا اسکریپت

زبان جاوا اسکریپت قابلیت انجام جمع و تفریق و ضرب و تقسیم (و سایر عملیات های ریاضی دیگر) هست

نمونه کد جمع دو متغییر عددی:
[HTMLS]
<script>
var x=5;
var y=6;
var z=x+y;
document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
</script>
[/HTMLS]
توضیح این خطوط
خط اول تگ آغازین جاوا اسکریپت هست <script>خط دوم var x=5; یک متغییر به نام x تعریف کرده و مقدار آنرا 5 قرار داده است.
خط سوم var y=6; یک متغییر به نام y تعریف کرده و مقدار آنرا 6 قرار داده است.
خط چهارم var z=x+y; یک متغییر به نام z تعریف کرده و مقدار آنرا مجموع مقادیر x و y قرار داده است.
خط پنجم document.write(x + "<br>"); در سند ( فایل HTML ) مقدار x را چاپ می کند و بعد تگ <br> را قرار می دهد
خط شیشم document.write(y + "<br>"); در سند ( فایل HTML ) مقدار y را چاپ می کند و بعد تگ <br> را قرار می دهد
خط هفتم document.write(z + "<br>"); در سند ( فایل HTML ) مقدار z را چاپ می کند و بعد تگ <br> را قرار می دهد

لازم به توضیحه که یکی از خطوط پنج الی هفت را مفصل تر توضیح بدیم
[HTMLS]document.write(x + "<br>");


[/HTMLS]

این خط دستور تابع پیش تعریف شده [HTMLS]document.write();[/HTMLS] را فراخوانی می کند و دو مقدار به این تابع می فرستد مقدار x و مقدار "<br>" .
تابع از پیش تعریف شده [HTMLS]document.write();[/HTMLS] کارش نوشتن در سند (فایل HTML ) هست. پس وقتی ما دو مقدار را به تابع میفرستیم یعنی میخواهیم دو مقدار درون فایل نوشته شوند.
حالا شاید بپرسید چرا x خالی نوشته شده است اما <br> ( لازم به توضیحه <br> یک تگ HTML هست که برای رفتن به خط پایین استفاده می شود) درون "" نوشته شده است؟
در زبان جاوا اسکریپت هر وقت خواستید متغییری مقدارش رو نمایش دهید باید فقط نام آن را بنویسید اما هر وقت خواستید متنی را بنویسید باید آن متن را درون "" قرار دهید.
خوب یک سوال شاید شما یک جا بخواهید مقدار x که عدد پنج هست رو چاپ کنید و یک جا خود حرف x را چاپ کنید. برای اینکار هر وقت مقدار x را خواستید چاپ کنید این خط دستور را بنویسید [HTMLS]document.write(x);[/HTMLS] هر وقت خواستید خود حرف x را چاپ کنید خط دستور [HTMLS]document.write("x");[/HTMLS] را بنویسید.
و یک سوال دیگر شاید بپرسید که + بین x و "<br>" چیه؟ در جاوا اسکریپت هر وقت بخواهید دو مقدار متفاوت را باهم ترکیب کنید باید بین آنها + بذارید

چند نمونه کد برای درک توضیح بالا
[HTMLS]<script>var x=5;
var y=6;
var z=x+y;


document.write("x = " + x + "<br>");
document.write("y = " + y + "<br>");
document.write("x + y = " + z + "<br>");
</script>[/HTMLS]
این کد خروجی زیر را دارد
[HTMLS]x = 5
y = 6
x + y = 11[/HTMLS]
یک نمونه دیگر
[HTMLS]<script>var x=5;
var y=6;
var z=x+y;


document.write("x = " + x + "<br>");
document.write("y = " + y + "<br>");
document.write(x + " + " + y + " = " + z + "<br>");
</script>[/HTMLS]
این کد خروجی زیر را می دهد
[HTMLS]x = 5
y = 6
5 + 6 = 11[/HTMLS]

برای تفریق کافیه مقدار z را برابر x-y قرار دهید
نمونه کد ها
[HTMLS]<script>var x=5;
var y=6;
var z=x-y;


document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
</script>[/HTMLS]
خروجی کد
[HTMLS]5
6
-1[/HTMLS]
نمونه کد دیگر
[HTMLS]<script>var x=5;
var y=6;
var z=x-y;


document.write("x = " + x + "<br>");
document.write("y = " + y + "<br>");
document.write("x - y = " + z + "<br>");
</script>[/HTMLS]
خروجی کد
[HTMLS]x = 5
y = 6
x - y = -1[/HTMLS]
نمونه کد دیگر
[HTMLS]<script>var x=5;
var y=6;
var z=x-y;


document.write("x = " + x + "<br>");
document.write("y = " + y + "<br>");
document.write(x + " - " + y + " = " + z + "<br>");
</script>[/HTMLS]
خروجی کد
[HTMLS]x = 5
y = 6
5 - 6 = -1[/HTMLS]

همچنین برای عملیات ضرب کافیه فقط مقدار z را برابر x*y قرار دهیم
نمونه کد 1
[HTMLS]<script>var x=5;
var y=6;
var z=x*y;


document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
</script>[/HTMLS]
خروجی کد
[HTMLS]5
6
30[/HTMLS]
نمونه کد 2
[HTMLS]<script>var x=5;
var y=6;
var z=x*y;


document.write("x = " + x + "<br>");
document.write("y = " + y + "<br>");
document.write("x × y = " + z + "<br>");
</script>[/HTMLS]
خروجی کد
[HTMLS]x = 5
y = 6
x × y = 30
[/HTMLS]
[HTMLS]<script>var x=5;
var y=6;
var z=x*y;


document.write("x = " + x + "<br>");
document.write("y = " + y + "<br>");
document.write(x + " × " + y + " = " + z + "<br>");
</script>[/HTMLS]
خروجی کد
[HTMLS]x = 5
y = 6
5 × 6 = 30[/HTMLS]

همچنین برای عملیات تقسیم فقط کافیه مقدار z را به x/y تغییر دهید
نمونه کد
[HTMLS]<script>var x=5;
var y=6;
var z=x/y;


document.write(x + "<br>");
document.write(y + "<br>");
document.write(z + "<br>");
</script>[/HTMLS]
خروجی کد
[HTMLS]5
6
0.8333333333333334[/HTMLS]
نمونه کد
[HTMLS]<script>var x=5;
var y=6;
var z=x/y;


document.write("x = " + x + "<br>");
document.write("y = " + y + "<br>");
document.write("x ÷ y = " + z + "<br>");
</script>[/HTMLS]
خروجی کد
[HTMLS]x = 5
y = 6
x ÷ y = 0.8333333333333334[/HTMLS]
نمونه کد
[HTMLS]<script>var x=5;
var y=6;
var z=x/y;


document.write("x = " + x + "<br>");
document.write("y = " + y + "<br>");
document.write(x + " ÷ " + y + " = " + z + "<br>");
</script>[/HTMLS]
خروجی کد
[HTMLS]x = 5
y = 6
5 ÷ 6 = 0.8333333333333334[/HTMLS]

فایل پیوست شده شامل همه کد ها گفته شده است امیدوارم آشنایی نسبی پیدا کرده باشید
 

پیوست ها

  • Algebra.zip
    389 بایت · بازدیدها: 2

bestdata

Active Member
تاییدیه فرم با جاوا اسکریپت JavaScript Form Validation

تو این پست میخواهیم کدی رو توضیح بدیم که کارش اینه که محتوای فیلد نام رو بررسی می کنه اگه خالی گذاشته شده باشه به کاربر هشدار داده میشه که فیلد باید پر شود

کد کامل :
[HTMLS]<!DOCTYPE html><html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>


<body>
<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>
</body>


</html>[/HTMLS]

توضیح خطوط جاوا اسکریپت
[JSS]function validateForm()[/JSS]
این کد داره یه تابع به نام validateForm که هیچ آرگومانی رو به عنوان ورودی نمی گیره ( یعنی بین () هیچ چیزی نیست) رو تعریف می کنه

[JSS]var x=document.forms["myForm"]["fname"].value;

[/JSS]
این خط داره یک متغییر تعریف می کنه که مقدار این متغییر محتوای فیلد fname از فرم myForm که در فایل HTML ایجاد شده هست.

[JSS]if (x==null || x=="")

[/JSS]
این خط یک شرطه و بررسی می کنه که اگه مقدار متغییر x پوچ باشه یا برابر "" ( که همون خالی هست ) باشه کد شرط اجرا بشه

خطوط کد شرط
[JSS]alert("First name must be filled out");[/JSS]
به کاربر یه کادر هشدار نشون میده و متن First name must be filled out رو نشون میده

[JSS]return false;[/JSS]
با این خط کد از شرط خارج میشه
 

پیوست ها

  • validateForm.zip
    456 بایت · بازدیدها: 9

bestdata

Active Member
کد بررسی ایمیل در فرم ها با جاوا اسکریپت

امروز کدی رو توضیح میدیم که کارش اینه که تو فیلد ایمیل عبارت ورودی رو بررسی می کنه در صورتی که به شکل [email protected] نباشد به کاربر هشدا دهد
کد کلی
[HTMLS]<!DOCTYPE html><html>
<head>
<script>
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("آدرس ايميل وارد شده صحيح نميباشد");
return false;
}
}
</script>
</head>


<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
ايميل: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>


</html>


[/HTMLS]

اما توضیح خط به خط کد های جاوا اسکریپت بالا

کل کد جاوا اسکریپت در کد بالا کد زیر هست:
[JSS]<script>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("آدرس ايميل وارد شده صحيح نميباشد");
return false;
}
}
</script>[/JSS]
خط اول این کد عبارت [HTMLS]function validateForm()[/HTMLS] هست که کارش تعریف یک تابع به نام validateForm (نام تابع دلخواه است می توان تغییر داد)هست که هیچ آرگومانی برای ورودی نمیگیره ...
خط دوم این کد عبارت [HTMLS]var x=document.forms["myForm"]["email"].value;[/HTMLS] هست که کارش تعریف یک متغییر به نام x هست که مقدارش برابر مقدار فیلد email از فرم myForm هست...
خط سوم این کد عبارت [HTMLS]var atpos=x.indexOf("@");[/HTMLS] هست که یک متغییر به نام atpos تعریف می کنه و مقدارش برابر تعداد کاراکتر ها تا قبل کاراکتر @ از مقدار متغییر x هست...

لازمه که اینجا یه توضیح در مورد x.indexOf("@") یه توضیحی داده بشه
توضیح تابع [HTMLS]indexOf()[/HTMLS]
این تابع محل کاراکتر خاصی رو در یک رشته مشخص می کنه (چندمین کاراکتر از یک رشته)
قابل ذکره این تابع اولین بار که کلمه یا کاراکتر مورد نظر رو ببینه نتیجه رو نشون میده
یک مثال از تابع [HTMLS]indexOf()[/HTMLS]

[HTMLS]<!DOCTYPE html><html dir=rtl>
<body>


<p>با کلیک بر روی دکمه زیر تعداد کاراکتر های قبل از کلمه خوش آمدید رو بهتون میگه</p>
<p>سلام دنیا، به دنیای دیجیتالی خوش آمدید!</p>
<p id="demo"></p>
<button onclick="myFunction()">کلیک کن</button>


<script>
function myFunction()
{
var str="سلام دنیا، به دنیای دیجیتالی خوش آمدید!";
var n=str.indexOf("خوش آمدید");
document.getElementById("demo").innerHTML=n;
}
</script>


</body>
</html>[/HTMLS]

با کلیک کردن دکمه تابع جاوا اسکریپت صدا زده میشه و این تابع رشته "سلام دنیا، به دنیای دیجیتالی خوش آمدید!" رو شروع می کنه به شمارش تا وقتی به کلمه خوش آمدید برسه وقتی رسید تعداد کاراکتر های قبلش رو چاپ می کنه...

خوب بریم سراغ ادامه توضیحات کد های برنامه اصلی این پست

خط چهارم این کد عبارت [HTMLS]var dotpos=x.lastIndexOf(".");[/HTMLS] هست که یک متغییر به نام dotpos تعریف می کنه و مقدارش برابر تعداد کاراکتر ها تا قبل کاراکتر . از مقدار متغییر x هست...

توضیح تابع [HTMLS]lastindexOf()[/HTMLS]
این تابع کاراکتر های قبلی ( یا به طور دیگه مکان ) کاراکتر خاصی رو حساب می کنه
قابل توجه است که این تابع آخرین باری که کاراکتر خاص رو در رشته پیدا می کنه رو حساب می کنه

برای دریک این یک مثال میزنیم

[HTMLS]<!DOCTYPE html><html dir=rtl>
<body>


<p>با کلیک بر روی دکمه زیر تعداد کاراکتر های قبل از کلمه خوش آمدید رو بهتون میگه</p>
<p>سلام دنیا خوش آمدید به سایت مجید آنلاین، به دنیای دیجیتالی خوش آمدید!</p>
<p id="demo"></p>
<button onclick="myFunction()">کلیک کن</button>


<script>
function myFunction()
{
var str="سلام دنیا خوش آمدید به سایت مجید آنلاین، به دنیای دیجیتالی خوش آمدید!";
var n=str.lastIndexOf("خوش آمدید");
document.getElementById("demo").innerHTML=n;
}
</script>


</body>
</html>[/HTMLS]

خوب ادامه توضیح کد اصلی
خط پنجم این کد عبارت [HTMLS]if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)[/HTMLS] که یک شرط رو بررسی می کنه میگه اگه مقدار متغییر atpos کمتر از 1 هست یا مقدار dotpos کمتر مجموع مقدار atpos بعلاوه بر 2 هست یا مقدار dotpos بعلاوه دو بیشتر مساوی تعداد کاراکتر های متغییر x هست (کافیه فقط یکی از این شرط ها برقرار باشه چون بینشون یا هست )
خط شیشم کد عبارت [HTMLS] alert("آدرس ايميل وارد شده صحيح نميباشد");[/HTMLS] که عبارت "آدرس ايميل وارد شده صحيح نميباشد" رو وقتی شرط برقرار باشد نمایش میدهد
خط هفتم کد عبارت [HTMLS] return false;[/HTMLS] که این کد باعث میشه از حلقه (لوپ) شرط بپره بیرون و باعث نشه که پش سر هم هشدار رو نشون بده


امید وارم که این توضیحات بدردتون بخوره
 

پیوست ها

  • lastindexOf.zip
    533 بایت · بازدیدها: 0
  • indexOf.zip
    500 بایت · بازدیدها: 0
  • email-validateForm.zip
    543 بایت · بازدیدها: 0

bestdata

Active Member
معرفی تابع match در جاوا اسکریپت

تابع match می توان برای جستجوی یک کلمه خاص در یک رشته استفاده کرد .

کد مثال آموزشی:

[HTMLS]<!DOCTYPE html><html>
<body>


<script>


var str="سلام به کاربران انجمن مجید آنلاین!";
document.write(str.match("آنلاین") + "<br>");
document.write(str.match("انلاین") + "<br>");
document.write(str.match("آنلاین!"));


</script>


</body>
</html>[/HTMLS]
کار این مثال به این صورته که میاد متنی رو درون رشته از کلمات جستجو می کنه اگه متن یافت بشه خود متن رو چاپ می کنه
اما در صورتی که متن جستجو شده در رشته نباشد عبارت null چاپ خواهد شد
خروجی کدمثالی که زده شده به شکل زیر است:
[HTMLS]آنلاین
null
آنلاین![/HTMLS]
خوب کد جاوا اسکرپیت رو توضیح بدیم تا متوجه بشید تمامی کد جاوا اسکریپت این مثال این هست:

[HTMLS]<script>

var str="سلام به کاربران انجمن مجید آنلاین!";
document.write(str.match("آنلاین") + "<br>");
document.write(str.match("انلاین") + "<br>");
document.write(str.match("آنلاین!"));


</script>[/HTMLS]

اولین خط دستور این کد خط زیر است :
[HTMLS]var str="سلام به کاربران انجمن مجید آنلاین!";[/HTMLS]
این خط چیکار می کنه؟ این خط یک متغییر (var) به نام str (هر نام دیگری می توان بجایش استفاده کرد اسم متغییر دلخواه است) تعریف می کنه که مقدارش برابر است با "سلام به کاربران انجمن مجید آنلاین!" لازم به ذکره که "" ها محدوده محتوا را مشخص می کنند و خودشون جز رشته محسوب نمی شوند. و در آخر ; دارد که این نشان دهنده پایان خط دستور است در صورتی که ; نوشته نشود کد با ارورر بر میخورد

خوب پس یه متغییر داریم به نام str
اگر ما این str رو چاپ کنم عبارت سلام به کاربران انجمن مجید آنلاین! چاپ خواهد شد (یعنی مقدار str برابر است با سلام به کاربران انجمن مجید آنلاین! )

خوب میریم سراغ توضیح خط دستور بعدی
[HTMLS]document.write(str.match("آنلاین") + "<br>");[/HTMLS]
این خط دستور از چند بخش مهم تشکیل شده ما از بخش های درونی به بیرون توضیح میدیم
درونی ترین بخش این خط دستور [HTMLS]str.match("آنلاین")[/HTMLS] است که کارش اینه میاد کلمه آنلاین رو درون محتوای str جستجو می کنه
توجه کنید وقتی میخواهید برای یک متغییر خاصی تابعی رو صدا بزنید اول اسم متغییر رو می نویسید (str) بعد یک نقطه می نویسید (.) بعد اسم تابع را می نویسید (match() ) و چون تابع match ورودی دریافت می کند باید بین () آن یک مقدار (کلمه یا عبارتی که میخواهید جستجو شود ) را بنویسید.

تابع match می تواند از یک کاراکتر (مثلا آ ) تا یک جمله (مثلا انجمن مجیدآنلاین) را می تواند جستجو نماید لازم به ذکر است که این تابع به کوچیک و بزرگ بودن حروف حساس است مثلا اگه در رشته ای کلمه Hello باشد و ما درون همین رشته کلمه hello را جستجو کنیم نتیجه null خواهد شد (عبارت جستجو شده باید دقیقا تکرار شده باشد)

خوب حالا به دستور بیرونی می پردازیم [HTMLS]document.write(str.match("آنلاین") + "<br>");[/HTMLS]
اول نحوه کار تابع [HTMLS]document.write();[/HTMLS] را شرح دهیم
این خط دستور کارش نوشتن و چاپ متغییر ها و رشته ها هست که در پست document.write توضیح داده شده است (پس مقدار متغییر ها و رشته های مشخص رو چاپ می کنه)
در این مثال مقادیری که به این تابع داده شده تا چاپ شوند
یکی مقدار خروجی تابع str.match("آنلاین") است و دیگری خط دستور از پیش تعیین شده [HTMLS]<br>[/HTMLS]
لازم به ذکر است در جاوا اسکریپت وقتی بخواهیم یک متغییری رو با یک رشته ثبت ترکیب کنیم و باهم چاپ کنیم باید بین آنها از + استفاده کنیم
لازم به ذکر است رشته ای که میخواهیم عینا چاپ شود را باید بین "" قرار دهیم (به طور مثال همین br )

خوب پس این خط دستور اول میاد یه چیزی رو چاپ کنه میاد ببینه مقدار های ورودیش چیه؟ یکی از مقدارهای ورودیش تابع match هست یکی هم تگ اچ تی ام ال br هست خو اول مقدار خروجی match رو درخواست میده مقدار خروجی این خط دستور عبارت آنلاین است چرا؟ چون کلمه آنلاین درون رشته str قرار داردبعد از چاپ کردن مقدار خروجی تابع match تگ HTML br را چاپ می کند که کارش انتقال محتوا به خط پایین است.

خوب بریم سراغ خط دستور بعدی
[HTMLS]document.write(str.match("انلاین") + "<br>");[/HTMLS]
این خط دستور شبیه به خط دستور بالایی است با این تفاوت که مقدار خروجی تابع match این تابع null است چرا؟ چون کلمه انلاین عینا در رشته str تکرار نشده است

خط دستور بعدی خط دستور
[HTMLS]document.write(str.match("آنلاین!"));[/HTMLS]
است که شبیه به خط دستور های قبلی است و مقدار خروجی این خط دستور کلمه آنلاین! است


فایل تست پیوست شده دانلود کنید اجرا کنید و مقادیر رو دستکاری کنید تا بهتر کارکرد این تابع را متوجه بشید
 

پیوست ها

  • match.zip
    327 بایت · بازدیدها: 0

جدیدترین ارسال ها

بالا