جاوا اسکریپت یکی از مهمترین زبان برنامه نویسی در حوزه وب محسوب می‌شود. جاوا اسکریپت یک زبان سمت کاربر یا Front End است که بار منطقی فرآیندهای سمت وب را بر عهده می‌گیرد. با جاوااسکریپت می‌توان ورودی‌های کاربر در یک فرم ثبت نام یا اشتراک خبرنامه چک کرد و درست و غلط بودن اطلاعات را مورد بررسی قرار داد. جهت اعتبارسنجی ایمیل با جاوا اسکریپت باید ابتدا مقدار Input موبرط به ایمیل خوانده شود و سپس با الگوی عبارت Regular Ecpression مقایسه شود که فرمت ایمیل صحیح است یا خیر. در این آموزش با ساختار جاوا اسکریپت و نحوه گرفتن ورودی در جاوا اسکریپت آشنا خواهید شد.
درصورتیکه آموزش قبل مربوط به طراحی خبرنامه در وردپرس را مشاهده نکردید پیشنهاد ما این است ابتدا این آموزش را مشاهده نمایید.
فیلم آموزشی اعتبارسنجی ایمیل با جاوا اسکریپت
کاربرد تگ Script جهت اعتبارسنجی ایمیل با جاوا اسکریپت
جهت نوشتن دستورات جاوا اسکریپت باید یک تگ مخصوص بنام <Script> </Script> ایجاد کرد. بهترین کار این است که تگ جاوا اسکریپت و کدهای جاوا اسکریپت خود را دقیقاً بعد از تمامی تگ‌های Html قبل از بسته شدن تگ <body> بنویسید.
نحوه تعریف متغیر در جاوا اسکریپت
متغیرها در جاوا اسکریپت با کلمه کلیدی Var تعریف می‌شود و هر مقداری که داخل این متغیر ریخته شود نوع متغیر را تعیین خواهد کرد.
Var number = 2 متغیر عددی Var Email=”a.yahoo.com” متغیر رشته‌ای
قوانین تعریف متغیر در جاوا اسکریپت به شرح زیر می‌باشد:
- نام متغیرها نباید با اعداد شروع شوند.
- حرف اول نام متغیر نباید با حرف بزرگ نوشته شود.
- بین کلمات متغیر نباید از اسپیس، علامت + یا نقطه و … استفاده کرد.
- برای جدا کردن نام متغیرهای چند کلمه ای تنها می‌توان از علامت آندرلاین ( _ ) استفاده کرد.
همچنین در نحوه نوشتن نام متغیرهای چند کلمه‌ای قاعده Camel Case وجود دارد به اینصورت که حرف اول متغیر را کوچک و سپس حرف اول کلمه دوم، سوم و الی آخر را بصورت بزرگ بنویسید.
گرفتن ورودی در جاوا اسکریپت
در جاوا اسکریپت می‌توان المان‌های صفحه را بر اساس نام id، نام کلاس و با نوع تگ انتخاب کرد. در تمامی این حالات از آبجکتی بنام document استفاده می‌شود.
انتخاب المان بر اساس id
در این حالت باید برای المان Html یک id منحصر به فرد تعریف کرده که به کمک آن بتوان المان را شناسایی کرد و با توجه به اینکه id بصورت منحصر به فرد و یکتا می‌باشد دقیقا یک المان انتخاب خواهد شد. اینکار توسط دستور ( )getElementById انجام می‌شود و باید نام id را به همراه دابل کوتیشن ( ” ” ) داخل پرانتز قرار داد. می‌توان مقدار المان انتخاب شده را داخل یک متغیر قرار داد.
<input id=”email” Type=”Text”> <script> Var test= Document.getElementById(“email”); </script>
انتخاب المان بر اساس نام تگ
گاهی میخواهیم تمامی تگ‌های Html بصورت یکجا انتخاب شود مثلا می خواهیم تمامی تگ‌های p موجود در صفحه انتخاب و تغییراتی اعمال شود در این حالت باید از دستور ( )getElementsByTagName استفاده کرد و نام تگ موردنظر را به همراه دابل کوتیشن ( ” ” ) داخل پرانتز قرار داد.
document.getElementsByTagName(“p”);
انتخاب المان بر اساس نام کلاس
گاهی میخواهیم تمامی المان‌هایی که دارای یک کلاس مشخص هستند انتخاب شود. در این حالت باید از دستور ( )getElementsByClassName استفاده کرد و نام کلاس را به همراه دابل کوتیشن ( ” ” ) داخل پرانتز قرار داد.
<div class=”ChangeColor”> </div> <script> Document.getElementsByClassName(“ChangeColor ”) </script>
توضیحات اعتبارسنجی ایمیل با جاوا اسکریپت
سرفصل های آموزش طراحی UI
- 01 طراحی UI | آموزش Html رایگان 06:28
- 02 طراحی UI | طراحی فرم ثبت نام رایگان 07:54
- 03 طراحی UI | آموزش Css رایگان 07:05
- 04 طراحی UI | طراحی خبرنامه در وردپرس رایگان 10:06
- 05 طراحی UI | اعتبارسنجی ایمیل با جاوا اسکریپت رایگان 08:22
- 06ویتامین استوایی | آموزش رایگان UI عضویت 10 فیلم آموزشی
- 07 بستنی استوایی | آموزش طراحی رابط کاربری خرید 13 فیلم آموزشی
سلام
سلام دوست عزیز
با سلام استاد
من یک بار دیگه آموزش UI که رایگان بود رو تهیه کردم گفتم شاید بروزرسانی کردید من نفهمیدم
اما آموزش های مربوط به جاوااسکریپت داخل اش نبود
فقط مسائل مربوط به html و css داخلش موجود بود
سلام دوست عزیز
اگر توی دوره رایگان نیست پس توی دوره غیر رایگان هستش
واقعا آموزش عالی ای بود
فقط استاد یک سوال داشتم
به نظر میاد که این ویدیو یک قسمت قبلی هم داشته
اما من توی سایتتون گشتم اما پیدا نکردم
این قسمت قبلی این ویدیو رو کجا می تونیم پیدا کنیم؟
سلام دوست عزیز. امیدوارم که خوب باشید. تا اونجایی که به خاطر دارم. این آموزش های کامل توی محصول رایگان UI هست و این ویدئو هم بخشی از همون محصول هست.
واقعا از آموزشتون لذت بردم
اینکه مخاطب ها از آموزش ها راضی هستن، حس خیلی خوبی میده و اینکه نظراتشون رو به اشتراک بذارن، باز هم حس خوبی داره. ممنونم از این انرژی و دو حس خوبی که دادید 🙂