مثال های کاربردی جاوااسکریپت
نحوه استفاده از تک کوتیشن و دوبل کوتیشن
استفاده از جاوااسکریپت در قسمت Head صفحه
استفاده از جاوااسکریپت در قسمت Body صفحه
فراخوانی فایل مجزای جاوااسکریپت در قسمت Head صفحه
فراخوانی فایل مجزای جاوااسکریپت در قسمت Body صفحه
نحوه ایجاد / استفاده از توضیحات در جاوااسکریپت
انتخابگر ID در جاوااسکریپت
انتخابگر Class در جاوااسکریپت
انتخاب تگ ها از طریق نام شون
انتخاب تگ ها از طریق مقدار صفت Name
انتخاب تگ ها از طریق متد querySelector
انتخاب چندین تگ بصورت همزمان با استفاده از متد querySelectorAll
انتخاب صفت یک تگ ( اون تگ img رو انتخاب میکنه که دارای صفت title باشه )
نمایش خروجی با استفاده از innerHTML
نمایش خروجی با استفاده از ()document.write
نمایش خروجی با استفاده از ()alert - نمایش یک متن ساده بصورت مستقیم با لود شدن صفحه
نمایش خروجی با استفاده از ()alert - نمایش یک متن ساده بصورت غیر مستقیم
نمایش خروجی با استفاده از ()console.log
پرینت / چاپ کردن صفحه ( روش ساده )
پرینت / چاپ کردن صفحه ( روش پیشرفته )
نحوه ایجاد / تعریف متغیر در جاوااسکریپت
چسبوندن ۳ متغیر بهمدیگه و نمایش آنها در خروجی
نحوه تعریف متغیرهای محلی و سراسری
تعریف چندین متغیر بهمراه مقدار با استفاده از کلمه کلیدی Let
متغیر Var رو میشه دوباره تعریف کرد و مقدار جدید بهش داد
متغیر Let رو نمیشه دوباره تعریف کرد و مقدار جدید بهش داد
متغیر Var رو میشه اول بهش مقدار داد بعد تعریفش کرد
متغیر Let رو نمیشه اول بهش مقدار داد بعدش تعریفش کرد
مقدار متغیر Const همواره ثابت هستش و در داخل برنامه قابل تغییر نیست
متغیر Const رو نمیشه دوباره تعریف کرد و مقدار جدید بهش داد
متغیر Const رو نمیشه اول بهش مقدار داد بعدش تعریفش کرد
تعریف ۲ متغیر بهمراه مقدار عددی و در نهایت نمایش حاصل جمع ۲ عدد
حاصل جمع ۲ عدد و تقسیم بر یک ۱ عدد
تعریف ۲ متغیر بهمراه مقدار متنی یا String
تعریف عدد و متن و در نهایت چسبوندن متن و عدد بهمدیگه
تعریف ۲ عدد در قالب متن ( هرچی داخل دابل کوتیشن یا ” ” قرار بگیره به عنوان متن حسابش میکنه ) و استفاده از + برای جمع کردن اعداد
تعریف آرایه و نمایش مقادیر موجود در آرایه
نحوه بدست آوردن نوع داده ای یک متغیر با استفاده از عملگر typeof
نحوه شکستن سطر و رفتن به سطر جدید در خروجی
نحوه استفاده از + ( علامت جمع یا به اضافه ) برای شکستن رشته به چندین سطر
محاسبه تعداد کاراکترهای موجود در یک باکس متن ( Textarea ) ( وقتی شروع به تایپ کردن کنید اونم تعداد کاراکترهارو شمارش میکنه )
نحوه بدست آوردن آخرین کاراکتر یک کلمه
نحوه بدست آوردن اولین کاراکتر یک کلمه
نحوه پیوند زدن چندین رشته بهمدیگه
یک رشته رو در درون یک رشته دیگه اول جستجو میزنیم و بعدش جایگزین همون رشته ی جستجو شده میکنیم
نحوه بُرش / قیچی کردن یک بخش از متن
نحوه تبدیل حروف کوچک انگلیسی به حروف بزرگ و برعکس
دریافت ۲ عدد صحیح از کاربر توسط تگ Input و سپس جمع ( + ) کردن اعداد
نحوه گِرد کردن یک عدد به نسبت تعداد ارقام اعشار
استفاده از عملگرهای + و – ( برای جمع و تفریق کردن )
استفاده از عملگر * ( برای ضرب کردن )
استفاده از عملگر ** ( برای به توان رساندن )
استفاده از عملگر / ( اسلش یا Slash ) برای تقسیم کردن
استفاده از ++ ( یک واحد افزایش ) – استفاده هم در قبل از متغیر هم بعد از متغیر
استفاده از -- ( ۲تا - ) ( یک واحد کاهش )
استفاده از علامت % ( درصد ) برای محاسبه باقیمانده ( در مثال زیر یک عدد از کاربر دریافت میشود و سپس با کلیک بروی یک دکمه ، مشخص میشود که عدد وارد شده زوج است یا فرد )
نحوه استفاده از عملگر =+
عملگرهای مقایسه ای ( استفاده از == یعنی مساوی بودن مقادیر متغیرها )
عملگرهای مقایسه ای ( استفاده از === یعنی هم نوع یک متغیر و هم مقدارش باید مساوی همدیگه باشن )
عملگرهای مقایسه ای ( استفاده از =! یعنی مساوی نبودن مقدار متغیر )
عملگرهای مقایسه ای ( استفاده از < یعنی بزرگتر بودن )
مقایسه کردن متنی که کاربر وارد میکنه با متن از پیش تعریف شده خودمون
کاربر باید یک عدد در یک رنج مشخص شده وارد کنه
نحوه استفاده از عملگرهای منطقی ( یعنی میگیم اگه فلان [و] بهمان )
نحوه استفاده از عملگرهای منطقی ( یعنی میگیم اگه فلان [یا] بهمان )
نحوه استفاده از عملگرهای منطقی ( یعنی میگیم اگه فلان برابر نبود با بهمان )
استفاده ترکیبی از عملگرهای مقایسه ای و عملگرهای منطقی
دریافت یک عدد در مبنای ۱۰ از کاربر و تبدیل آن به مبنای ۲
نحوه تعریف تابع بدون پارامتر
نحوه تعریف تابع با پارامتر
نحوه فراخوانی تابع در رویداد onclick ( onclick یعنی وقتی بروی چیزی کلیک شد )
فراخوانی تابع بصورت مستقیم در خوده دستورات جاوااسکریپت ( تو این حالت دیگه لازم نیست حتما بروی چیزی کلیک شه، بلکه با لود شدن صفحه تابع هم درجا اجرا میشه )
نحوه تعریف شئ یا Objects
نحوه نمایش یا فراخوانی آیتم های یک شئ ( روش اول )
نحوه نمایش یا فراخوانی آیتم های یک شئ ( روش دوم )
نحوه حلقه For زدن در اشیاء یا Objects
نحوه اضافه کردن ویژگی جدید به شئ یا Objects
نحوه حذف کردن ویژگی های شئ یا Objects
نحوه مدیریت خطاها ( خطای SyntaxError )
نحوه مدیریت خطاها ( خطای RangeError )
نحوه مدیریت خطاها ( خطای ReferenceError )
نحوه مدیریت خطاها ( خطای TypeError )
نحوه فراخوانی یا نمایش آیتم های آرایه
نمایش یکجای تمامی آیتم های یک آرایه در یک لیست نامرتب
نحوه تغییر دادن مقادیر آرایه ها
بدست آوردن اولین آیتم آرایه
بدست آوردن آخرین آیتم آرایه
نحوه اضافه کردن آیتم جدید به آرایه
نحوه حذف کردن آیتم از آرایه ( روش اول )
نحوه حذف کردن آیتم از آرایه ( روش دوم )
نحوه تعریف علامت جداکننده بین آیتم های آرایه
نحوه حذف آخرین آیتم از آرایه با استفاده از متد ()pop
نحوه ادغام یا Merge کردن چندین آرایه بهمدیگه
نحوه بُرش زدن چندین آیتم از آرایه
مرتب سازی یک آرایه بر اساس حروف الفبا
برعکس کردن ترتیب قرار گیری آیتم های یک آرایه
مرتب سازی آیتم های عددی یک آرایه با استفاده از تابع مقایسه
بدست آوردن تعداد میلی ثانیه سپری شده از تاریخ ۰۱,۰۱,۱۹۷۰ تا حال حاضر ( همین لحظه )
نمایش تاریخ و ساعت فعلی سیستم
نحوه مقایسه 2تا تاریخ
بدست آوردن تاریخ شمسی / فارسی
بدست آوردن تاریخ شمسی / فارسی ( استفاده از کتابخانه jdf.scr.ir ) ( روش پیشنهادی )
نمایش فقط سال - ماه و روز از تاریخ میلادی
نمایش ساعت - دقیقه - ثانیه و میلی ثانیه
گرفتن روز از هفته و ماه از سال ( بصورت فارسی / شمسی )
تولید عدد تصادفی صحیح بین ۰ تا ۱۰,۰۰۰
تولید عدد تصادفی صحیح بین ۱ تا ۱۰,۰۰۰
ایجاد یک تابع سفارشی برای تولید عدد تصادفی
شبیه سازی سیستم تولید و تایید کد فعالسازی
نحوه تولید متن تصادفی ( که شامل عدد، حروف خاص مثه @ و.. باشه )
دریافت ۱ عدد از کاربر و تولید عدد تصادفی از بین عدد ۱ تا عددی که کاربر مشخص کرده
در یک Input فقط حروف فارسی بتونه وارد شه
در یک Input فقط عدد فارسی بتونه وارد شه
در یک Input فقط اعداد فارسی و حروف فارسی و حروف بزرگ یا کوچک انگلیسی از a تا f میتونه وارد شه
نحوه استفاده از دستور شرطی IF و Else
نحوه استفاده از دستور شرطی IF و Else و ElseIF
دریافت یک نام کاربری و رمز از کاربر و سپس چک کردن نام کاربری و رمز وارد شده با نام کاربری و رمز از قبل تعریف شده در برنامه
نحوه استفاده از دستور شرطی Switch
نحوه استفاده از دستور شرطی Switch ( یک نام از کاربر دریافت میکنه و بعدش میره و از بین گزینه های مختلف یا کیس های مختلف بررسی میکنه اگه نامی که کاربر وارد کرده با اون نامی که خودمون از قبل مشخص کردیم یکی بود پیغام میده میگه مثلا سلام فلانی و از این حرفا )
نحوه استفاده از دستور شرطی Switch ( نمایش نام روز از هفته )
تولید جدول ضرب ۱۰ * ۱۰ با استفاده از حلقه for تودرتو
چاپ عدد 0 تا 100 با استفاده از حلقه تکرار For
نحوه حلقه زدن در یک شئ قابل تکرار ( یک شئ قابل تکرار مثه آرایه ها یا مثلا متن / رشته ها )
چاپ عدد 1 تا 10 با استفاده از حلقه تکرار while
نحوه استفاده از حلقه Do / While
نمایش کل آیتم های یک آرایه با استفاده از حلقه While
مبحث زمانبندی - بعد از ۳ ثانیه یه پیغام در صفحه ظاهر میشه
مبحث زمانبندی - تغییر مسیر صفحه بعد از ۲ ثانیه به صفحه دیگر
مبحث زمانبندی - هر ۲ ثانیه یکبار کلمه (فری لرن) در صفحه چاپ میشود
مبحث زمانبندی - رفرش شدن صفحه در هر ۵ ثانیه یکبار بصورت خودکار
نحوه پاکسازی / متوقف کردن setTimeout
نحوه پاکسازی / متوقف کردن setInterval
نحوه ایجاد یک تایمر کم شونده ( تایمر معکوس یا Countdown Timer )
با کلیک بروی یک دکمه عدد اضافه میشه و با کلیک بروی دکمه دیگه کم میشه
ایجاد یک تایمر اضافه شونده ( ثانیه و دقیقه و ساعت )
تغییر رنگ زمینه صفحه توسط کاربر و ذخیره در کوکی ( در دفعات بعدی رنگ زمینه همونی خواهد بود که کاربر انتخاب کرده )
نحوه تعریف و استفاده از SessionStorage و فراخوانی آن
نحوه حذف SessionStorage
نحوه تعریف و استفاده از localStorage + فراخوانی مقدار
نحوه حذف کردن داده ها از localStorage
تغییر رنگ زمینه و رنگ متن صفحه توسط کاربر و ذخیره در LocalStorage ( در دفعات بعدی رنگ زمینه همونی خواهد بود که کاربر انتخاب کرده )
دریافت یک نام از کاربر با استفاده از جعبه پیغام Prompt و ذخیره در حافظه مرورگر و نمایش در دفعات بعدی
برنامه ای که هربار به یک متغیر مقدار اضافه میکنه ( شمارش بازدید از صفحه )
نمایش باکس پیغام هشدار ( نمونه ساده )
نمایش باکس پیغام هشدار ( استفاده از کتابخانه SweetAlert )
نمایش باکس پیغام تاییدیه ( نمونه ساده )
نمایش باکس پیغام تاییدیه ( استفاده از کتابخانه SweetAlert )
نمایش باکس گرفتن مقدار از کاربر ( نمونه ساده )
نمایش باکس گرفتن مقدار از کاربر ( استفاده از کتابخانه SweetAlert )
نحوه اعتبارسنجی فرم ها ( نمونه 1 )
نحوه اعتبارسنجی فرم ها ( نمونه 2 )
نحوه اعتبارسنجی فرم ها ( نمونه 3 )
بدست آوردن محتوای تگ Body و نمایشش در تگ Textarea
بدست آوردن محتوای کل صفحه و نمایشش در تگ Textarea
بدست آوردن نام و نوع گره یک تگ
بدست آوردن تگ والد یا پدر یک تگ
بدست آوردن اولین فرزند از یک عنصر والد
بدست آوردن فرزند آخر از عنصر والد
حذف یا خالی کردن محتوای موجود در یک عنصر
گرفتن مقدار داخل Input و سپس نمایشش در تگ H2
نحوه ایجاد تگ جدید در صفحه با استفاده از جاوااسکریپت
نحوه حذف کردن فرزندان یک تگ والد
کاربر میتونه تگ و متن داخل تگ رو مشخص کنه بعدش با کلیک بروی دکمه ، اون تگ ایجاد میشه
بدست آوردن مقدار صفت href از تگ a
با کلیک بروی یک دکمه، آدرس URL یک عکس رو بدست میاریم
بدست آوردن مقدار صفت id و title از تگ P
نحوه تعریف صفت جدید برای تگ
میخوایم یک آدرس URL عکس از کاربر بگیریم بعدش همون آدرس رو برای تگ IMG ست کنیم
نحوه حذف کردن صفت یک تگ
با کلیک بروی دکمه رنگ زمینه و رنگ متن صفحه تغییر پیدا میکند
با کلیک بروی ۱ دکمه متن موجود در باکس هم مخفی میشود و هم نمایش داده میشود
با کلیک بروی دکمه، تصویر زمینه و رنگ زمینه برای صفحه تنظیم میشه
کاربر میتونه به دلخواه خودش از یک باکس رنگ ، یه رنگ دلخواه انتخاب کنه برای رنگ زمینه و رنگ متن
بدست آوردن تعداد عددی کل صفت های موجود در یک تگ
بدست آوردن تعداد کل تصاویر ( تگ img ) که درون صفحه قرار دارند
نحوه بدست آوردن تمامی صفت های داخل یک تگ (صفت + مقدار)
اضافه کردن رویداد onclick با استفاده از جاوااسکریپت
ریختن محتوای جدید درون تگ body
دریافت یک آدرس یا URL از کاربر ، و سپس تولید تگ لینک با همون آدرسی که کاربر مشخص کرده
ساخت و اضافه کردن تگ link و در نهایت قرار دادنش درون تگ head صفحه
نحوه ایجاد / تعریف صفت جدید برای تگ
با کلیک بروی یک دکمه ، کل صفحه وب قابل ویرایش میشه
نحوه ایجاد یک صفحه جدید با استفاده از جاوااسکریپت
با کلیک بروی یک دکمه، نام دامنه ی اون سایتی که فایل روش اجرا شده رو نمایش میده
بدست آوردن مقادیر صفت های موجود در تگ Form ( مثلا صفت action و method )
بدست آوردن مقادیر داخل اینپوت ( Input ) های موجود در فرم
مشاهده و مخفی کردن رمز عبور
میخوایم با کلیک بروی یک دکمه ، عنوان یا Title صفحه رو بدست آوریم
بدست آوردن مقدار صفت های src و alt و title از یک عکس
بدست آوردن آدرس URL تمامی عکس های موجود در صفحه به کمک حلقه For
گرفتن یک تگ از یک صفحه دیگه و نمایش در صفحه فعلی
بدست آوردن تعداد کل لینک های موجود در صفحه ( هر تگی که دارای صفت href باشد )
بدست آوردن مقدار صفت href از داخل تمامی لینک های موجود در صفحه
با کلیک بروی یک دکمه، یک فایل خارجی جاوا اسکریپت به صفحه اضافه میشه
گرفتن عنوان یا Title صفحه وب
ست کردن عنوان یا Title جدید برای صفحه وب
گرفتن آدرس کامل URL صفحه ای که داخلشیم
نحوه ایجاد دکمه اشتراک گذاری در شبکه های اجتماعی ( واتس اپ ، توییتر ، تلگرام ، لینکدین )
با کلیک بروی یک دکمه روی Input فوکوس میشه و با کلیک بروی دکمه دیگری، فوکوس حذف میشه
اسکرول شدن خودکار صفحه بروی تگی که روش کلیک شده
بدست آوردن لیست تمامی کلاس های موجود در یک تگ
اضافه و حذف کردن کلاس از یک تگ
اضافه کردن همزمان چندین نام کلاس به تگ
حذف کردن همزمان چندین نام کلاس از تگ
جایگزین کردن یک نام کلاس با نام کلاس دیگر
ایجاد حالت شب یا ( Night Mode ) ، با کلیک بروی دکمه صفحه تاریک میشه و دوباره با کلیک بروی همون دکمه صفحه روشن میشه
میخوایم کاری کنیم که وقتی بسمت پایین اسکرول کردیم، منو فیکس بشه و بچسبه به سقف مرورگر
تکثیر بی نهایت از یک Input در صفحه
با کلیک بروی یک دکمه، باکس محتوا بصورت تمام صفحه باز خواهد شد و با کلیک بروی دکمه دیگر، از حالت تمام صفحه خارج خواهد شد
نشان دادن تفاوت ۳ویژگی innerText و innerHTML و textContent
اضافه کردن آیتم جدید به یک لیست
گرفتن یک متن از کاربر و اضافه کردن اون متن به یک لیست
نمایش تفاوت innerHTML با outerHTML
یک باکس هشدار داریم که میخوایم با کلیک بروی یک دکمه اون باکس بسته یا حذف بشه
حذف کردن تگ با استفاده از جاوااسکریپت
با کلیک بروی یک دکمه، کاربر بطور خودکار اسکرول میشه روی بخش مشخص شده ما
گرفتن مقدار یک ویژگی CSS از یک تگ
تنظیم مقدار جدید برای یک ویژگی CSS
میخوایم با استفاده از جاوااسکریپت اول یک تگ Style در صفحه ایجاد کنیم بعدش به تگ head داخل صفحه اضافش کنیم و در نهایت داخل تگ Style میخوایم استایل جدید برای صفحه تعریف کنیم
نحوه بدست آوردن نام دامنه ( یا آدرس IP ) صفحه ای که اجرا شده
بدست آوردن آدرس URL صفحه بطور کامل ( از https تا آخرش )
ساخت دکمه ( button ) لینک دار ( که وقتی روش کلیک کنیم بره به یک آدرس دلخواه )
بدست آوردن آدرس دامنه صفحه ای که اجرا شده ( شامل http یا https )
هر ۳ ثانیه بطور خودکار صفحه رِفرِش ( یا بارگذاری مجدد یا تازه سازی یا Reload ) میشه
با کلیک بروی یک دکمه، صفحه رفرش میشه
نحوه بدست آوردن اندازه کل عرض و ارتفاع صفحه نمایش مرورگر
دکمه برو به بالای صفحه ( وقتی به اندازه مشخصی بسمت پایین اسکرول میشه )
نحوه کدگذاری و کدگشایی متن
اسکرول کردن بسمت پایین با هربار کلیک بروی دکمه
با کلیک بروی یک دکمه، پنجره جدید مرورگر باز میشه
باز کردن چندین پنجره مرورگر بصورت همزمان با آدرس های مختلف ( مرورگر ممکنه جلوگیری کنه از بازشدنشون، باید دسترسی داد بهش که بازشون کنه )
بسته شدن خودکار صفحه پس از چندثانیه
Top

استفاده از محتویات این صفحه برای عموم آزاد می باشد. [سایت آموزشی فری لرن]