در این دوره چه آموزش داده می شود؟
در این دوره برای کسانی که به html وcss تسلط دارند کدنویسی جاوا اسکریپت آموزش داده می شود مبنای آموزش سایت JavaScript می باشد پیش نیاز این دوره آشنایی کامل با دستورات html و css می باشد.
- معرفی جاوا اسکریپت
- نحوه الحلق کدها به صفحه
- معرفی داده ها در جاوا اسکریپت
- اعداد
- رشته ها
- نوع داده منطقی و توابع مقایسه ای
- شی گرایی در جاوا اسکریپت
- ماژول
- نحوه ساخت ماژول ها
- نحوه استفاده از ماژول ها در صفحه
- تغییر کدهای صفحه به صورت پویا
پیش نیاز های این دوره آموزشی
- html5
- css3

بعد از اتمام دوره توانایی راه اندازی یک وب سایت با امکانات جاوا اسکریپت را خواهید داشت.
معرفی جاوا اسکریپت رایگان
یک مثال ساده از جاوا اسکریپت
جلسه ۱ ویدئو
جلسه 2 ویدئو
جلسه 3 ویدئو
جلسه 4 ویدئو

بعد از اتمام دوره توانایی راه اندازی یک وب سایت با امکانات جاوا اسکریپت را خواهید داشت.
جلسه ۵ ویدئو
جلسه 6 ویدئو
جلسه 7 ویدئو
جلسه 8 ویدئو

بعد از اتمام دوره توانایی راه اندازی یک وب سایت با امکانات جاوا اسکریپت را خواهید داشت.
جلسه 9 ویدئو
جلسه 10 ویدئو
جلسه 11 ویدئو

بعد از اتمام دوره توانایی راه اندازی یک وب سایت با امکانات جاوا اسکریپت را خواهید داشت.
جلسه 12 ویدئو
جلسه 13 ویدئو
جلسه 14 ویدئو
جلسه 15 ویدئو

بعد از اتمام دوره توانایی راه اندازی یک وب سایت با امکانات جاوا اسکریپت را خواهید داشت.
جلسه 16 ویدئو
جلسه 17 ویدئو
جلسه 18 ویدئو
جلسه 19 ویدئو

بعد از اتمام دوره توانایی راه اندازی یک وب سایت با امکانات جاوا اسکریپت را خواهید داشت.
جلسه 20 ویدئو
جلسه 21 ویدئو
جلسه 22 ویدئو
جلسه 23 ویدئو
جلسه 24 ویدئو
جلسه 25 ویدئو

بعد از اتمام دوره توانایی راه اندازی یک وب سایت با امکانات جاوا اسکریپت را خواهید داشت.
جلسه 26 ویدئو
جلسه 27 ویدئو
جلسه 28 ویدئو
جلسه 29 ویدئو

کار با DOM در جاوا اسکریپت
جلسه 30 ویدئو
جلسه 31 ویدئو
جلسه 32 ویدئو
جلسه 33 ویدئو

بعد از اتمام دوره توانایی راه اندازی یک وب سایت با امکانات جاوا اسکریپت را خواهید داشت.
جلسه 34 ویدئو
جلسه 35 ویدئو
جلسه 36 ویدئو

بعد از اتمام دوره توانایی راه اندازی یک وب سایت با امکانات جاوا اسکریپت را خواهید داشت.
جلسه 37 ویدئو
جلسه 38 ویدئو
جلسه اول آموزش جاوااسکریپت
زبان جاوا اسکریپت یکی از مشهورترین زبان های برنامه نویسی است. با استفاده از این زبان می توان صفحات استاتیک را پویا سازی کرد و از حالت مبتدی به حالت حرفه ای تبدیل کرد. برای استفاده از کدهای جاوااسکریپت در ابتدا باید با html و css آشنا باشیم و مدتی با این زبان ها کدنویسی کرده باشیم. برای استفاده از کدهای جاوااسکریپت می توان این کدها را در بخش head , body ویا در انتهای کدها نوشت. هم چنین می توان جاوااسکریپت را به صورت مستقل در فایل javascript نوشت و سپس در داخل کدهای html فراخوانی کرد. برای نوشتن کدهای جاوااسکریپت از تگ <script> استفاده می کنیم و بعد از اتمام کدها تگ را می بندیم. از جمله کاربردهایی که جاوااسکریپت دارد این هست که وقتی روی دکمه ای کلیک میکنیم یا موس را روی آن می بریم پیغامی رو نمایش بدهد و یا اینکه رنگ بخشی را با کلیک کردن و سایر رویدادهایی که تگ می پذیرد تغییر دهیم . دستور العمل document.getElementById(‘ ‘) برای فراخوانی جاوااسکریپ برای رویدادها تعریف می شود. در اینجا document اشاره به کل سند html دارد وgetElementById المانها را با استفاده از Id المان به جاوااسکریپت معرفی میکند. البته به جای Id میتوان از اسم کلاس المان یا استایل و … هم استفاده کرد.
استفاده از توابع در جاوا اسکریپت
تابع یا function دستورالعملی است که داده ای را دریافت میکند و سپس آن را پردازش می کند و در نهایت نتیجه را به عنوان خروجی نمایش می دهد. هر تابع یک اسم می گیرد که در هر جای کدنویسی میتوان با آن نام تابع را فراخوانی کرد و هم چنین می توان از یک تابع بارها استفاده کرد. استفاده از توابع باعث مرتب شدن صفحه index می شود.
Output یا خروجی در جاوا اسکریپت
نحوه نمایش خروجی در جاوا اسکریپت به روش های مختلف انجام می شود که ادامه بررسی میکنیم.
- با استفاده از innerhtml
با استفاده از innerhtml می توان محتوا را در بخشی که تمایل داریم مثلا داخل یک div نمایش بدهیم برای اینکار به div مورد نظر یک آیدی می دهیم و با استفاده ازآن کدجاواسکریپت را فراخوانی میکنیم.
- با استفاده از write
این روش بیشتر برای اهداف آزمایشی استفاده می شود و هر جایی که نوشته شود همان جا خروجی را نمایش می دهد.
- با استفاده از alert()
این output مثل alert() عمل میکند و خروجی را داخل یک پنجره نمایش می دهد بیشتر برای نمایش یک پیغام استفاده می شود. و نوشتن کلمه window الزامی نیست .
- با استفاده از log()
برای اشکال زدایی و ثبت log ها استفاده میشه و خطاها را در بخش console ثبت میکنه و با inspect گرفتن از صفحه می توان خطاها را در بخش consoleمشاهده کرد که برای مدیریت بهتر سایت است .
- با استفاده از print
با استفاده از این روش می توان از محتوای صفحه پرینت گرفت.
متغیرها در جاوااسکریپت
در جاوا اسکریپت تعریف متغیر مهم است و قوانین خاص خودش را دارد.
اطلاعاتی که ما وارد میکنیم به عنوان ورودی قرار می گیرد و فضایی را اشغال میکند به این فضای اشغال شده متغیر می گویند و متغیر به معنی این است که هر لحظه میتواند تغییر کند
از جمله این قوانین می توان به موارد زیر اشاره کرد:
- در جاوااسکریپت متغیر با حروف بزرگ با متغیر با حروف کوچک تفاوت دارد. مثلا class با Class تفاوت دارد و هر کدام یک متغیر مستقل است.
- نامی که انتخاب میشود باید با معنی باشد و از کلمات بی معنی استفاده نشود تا بعدا دچار مشکل نشویم .
- در نام گذاری متغیرهای بلند از متد camelcase استفاده می شود یعنی بخش اول کلمه با حروف کوچک است و بخش دوم با حروف بزرگ شروع می شود.
برای تعریف متغیر در ابتدا از کلمه letاستفاده می کنیم.
جلسه پنجم
برای تعریف متغیر در جاوا اسکریپت از var,let وconst استفاده می شود. تفاوت این سه روش تعریف این است که متغیری که با var تعریف میشه ثابت نیست یعنی من میتونم یکبار تعریف کنم var x=25; و دوباره جای دیگری تعریف کنم var x=”leila”; ولی این نحوه تعریف با let و const امکان پذیر نیست . یعنی اگر من تعریف کنم let x=2; دوباره نمی توانم متغیر دیگری را با همبن نام تعریف کنم ، یعنی let x=”2”; دیگر قابل تعریف نیست. این مورد برای const هم همین طور است. حال تفاوت let و const را بررسی میکنیم. در const اگر محتوا را تغییر دهیم errorمی دهد ولی در let error نمی دهد . مثلا اگر من تعریف کردم let x=2; میتوانم x را تغییر دهم و برنامه خطا نمیگیرد ولی در const حتی با تغییر محتوا هم برنامه خطا می گیرد.
Operation یا عملگرها
همه ی زبان های برنامه نویسی یک سری دستورات دارند برای محاسبه کردن . در جاوااسکریپت هم این عمگرها به صورت زیر می باشد:
عملگرهای محاسباتی | علامت تعریف شده |
جمع | + |
تفریق | – |
ضرب | * |
توان | ** |
تقسیم | / |
باقی مانده | % |
یک واحد اضافه کردن به متغیر | ++ |
یک واحد کم کردن به متغیر | — |
برای متغیرهای رشته ای هم عملگرها را استفاده میکنیم مثلا برای وصل کردن دو متغیر رشته ای از عملگر + استفاده می کنیم.
Let x = 5 + 5 ; =>x=10
Let y = “5” + “5” ; =>x=55
البته اگر یکی از متغییرها عددی هم باشد باز به صورت رشته ای عمل میکند.
عملگرهای مقایسه
علامت تعریف شده | عملگرهای مقایسه |
== | مساوی بودن یا نبودن مقدار متغیرها |
=== | مساوی بودن یا نبودن مقدار و نوع متغیرها |
=! | مساوی نبودن مقدار |
==! | مساوی نبودن مقدار و نوع |
< | بزرگتر از |
> | کوچکتر از |
=< | بزرگتر مساوی |
=> | کوچکتر مساوی |
سه عملگر && و ll و! برای عملیات تو در تو و پیچیده استفاده می شوند.
A&&b | b | A |
0 | 0 | 0 |
0 | 1 | 0 |
0 | 0 | 1 |
1 | 1 | 1 |
جلسه نهم
- ادامه مبحث Strings
String charAt() Method 12-
با استفاده از این متد، با تعیین موقعیت متغیر برای ما مشخص میکنه تو اون موقعیت چه کاراکتری قرار داره . مثلا در متغیر x با استفاده از موقعیت تعیین شده کاراکتر مربوط به آن را برمی گرداند:
Let x = ”hello world”;
Document.getElementById(“demo”).innerhtml = x. charAt(0);
نتیجه دستور کاراکتر h می باشد.
13- String charcodeAt() Method
با استفاده از این متد کد حروف رو برمی گردونیم . کامپیوتر براساس کد 0 و 1 کار میکنه و از طرفی تمام حروف کد بخصوصی دارند . حروف انگلیسی هر کدامشان طبق جدول جدول ascii کد گذاری شده اند که این کد برای اینکه قابل فهم برای کامپیوتر باشد به 0 و1 تبدیل می شود. حال با این متد ما می توانیم کد Ascciiحروف را برگردانیم.
14- String property access[]
می توان با استفاده از جایگاه هر کارکتر آن را برگرداند.
15- String split() Method
متد split() به ما این امکان را می دهد تا بتوانیم تعدادی کارکتر که به وسیله کاما یا هر چیزی از هم جدا شده اند با استفاده از جایگاهشان مشخص کنیم .
Let x = “a,b,c,d,e”;
Let y = x.split(“,”);
Document.getElementById(“demo”).innerhtml = y[0];
- String Search
متد هایی هستند که برای سرچ استفاده می شوند.
- String indexOf() Method
اگر بخوایم داخل یک رشته یک کلمه رو پیدا کنیم از این متد استفاده میکنیم . این متد جایگاه کلمه رو به صورت عدد نشون میده.
- String lastIndexOf() Method
اگر یک کلمه چندبار در متن تکرار شود این متد آخرین تکرار رو مشخص میکنه و جایگاه اون رو نشون میده .
- String lastIndexOf() Method
این متد شبیه به indexOf() عمل میکند و اولین کلمه ای که دنبالش هستیم را پیدا میکند و برمی گرداند .
- String match() Method
متد match عینا رشته ای که دنبالش هستیم را برمیگرداند و به حروف بزرگ و کوچک حساس است.
- String includes()
با استفاده از این متد متوجه میشیم که کلمه ای که مد نظر ماست تو جمله وجود داره یا نه.
- String starts with()
اگر بخواهیم تشخیص دهیم کلمه ای که مد نظر ماست کلمه ی آغازین رشته است یا نه از این متد می توانیم استفاده کنیم. و جواب آن همان طور که مشخص است true یا false است.
- Endswith() Method
اگر بخواهیم تشخیص دهیم کلمه ای که مد نظر ماست کلمه ی پایانی رشته است یا نه از این متد می توانیم استفاده کنیم. و جواب آن همان طور که مشخص است true یا false است.
- String template
در این مبحث می بینیم که String را علاوه بر“” و ‘ ‘، بین back-ticks (` `) هم می توان نوشت و این روش قابلیت های جدیدی را ایجاد می کند.
- اگر در متغیر تعریف شده هم زمان دابل کوتیشن و سینگل کوتیشن استفاده شود باید کل رشته را داخل back-ticks قرار داهیم تا خطا نگیرد.
- اگر بخواهیم داخل رشته عملیات محاسباتی انجام دهیم یا مقدار متغیر را برگردانیم می توانیم با قرار دادن $ قبل از متغیرها این کار را انجام دهیم.
- داخل (` `) می توانیم کد html بنویسیم.
- متدهای Numbers
Numberها به دو صورت عد صحیح (integer) یا اعشاری (decimals)هستند.
نکات:
- اگر متغیر یک عدد بزرگ باشد مثلا 12000000 می توان از نماد گذاری علمی استفاده کرد. Let x = 12e6
- اگر دو number با هم جمع بشن جواب یک عدد است ولی اگر دو string با هم جمع بشن جواب همان string است.
- جمع یک عدد صحیح و یک رشته باز هم رشته است.
- موقع محاسبات دو رشته اگر آن عملیات در رشته معنایی نداشته باشد ابتدا دو رشته به عدد صحیح تبدیل می شوند سپس عملیات انجام می شود مثلا علامت تقسیم، ضرب، منها و باقی مانده در رشته معنایی ندارد و به صورت number عمل می کند.
Let x = “100”;
Let y = “10”;
Let z = x/y =>10
- اگر یک نامبر رو تقسیم بر رشته کنیم جوابی که برمی گردونه NaN هست، NaN یعنی نامبر نیست .
Let x= 1000;
Let y = “apple”;
Let z = x/y => nan
- جمع nan و رشته مثل جمع دو رشته عمل میکند و به هم ملحق می شوند.
- جواب تقسیم رشته یا نامبر به صفر برابر با بی نهایت (infinity) است.
- وقتی عددی با 0x شروع میشه یعنی مبنای 16 اون متغییر رو برمی گردونه .
- اعداد باینری از تقسیمات متوالی یک عدد بر عدد 2 به دست می آید و به صورت 0 و 1 می باشد، از آنجایی که کامپیوتر تنها 0 و 1 را درک میکند همه اعداد به صورت اعداد باینری در می آیند . حروف نیز برای خود کد بخصوصی دارند که این کد باید به اعداد باینری تبدیل شود تا برای کامپیوتر قابل درک باشد.
- To Str() Method
این متد برای تبدیل اعداد به string می باشد.
- New Number() Method
در دنیای برنامه نویسی ما می توانیم یک سری object تعریف کنیم هر روش اعمالی رو انجام بدیم و به عنوان متغیر ازش استفاده کنیم برای اینکار از متد New Number() استفاده می کنیم.
- toExponential() Method
این متد توان اعداد رو نشون میده و گرد میکنه . مثلا عدد 6000.678 را با این متد به صورت e+36.000678 نمایش می دهد
- toExponential() Method
در این متد کلا متغیر رو گرد میکنه مثلا 9.66 با این متد 10 نمایش داده میشه.
- toprecision() Method
let x =9.656;
x.toprecision(2) => 9.7
x.toprecision(3) => 9.66
در این متد طبق عدد داخل پارانتز طول متغیر برگردانده می شود و اگر لازم شد گرد می شود . مثلا در اولی 9.7 شده چون از ما خواسته طول متغیر دو رقم باشد و در نتیجه گرد شده و در دومی طول متغیر 3 باید باشد پس دو رقم اعشار میخورد و این مورد هم گرد می شود اگر طول متغیر 4 باشد خود 9.656 عینا چاپ می شود.
- Valueof() Method
این متد مثل متد to string()عمل می کند. و مقدار را برمی گرداند.
- در جاوااسکریپت سه روش وجود دارد که می توان از آنها برای تبدیل متغیرها به اعداد استفاده کرد.
- متد number()
- متد parseint()
- متد parsefloat()
Number(true) => 1
Number(false) => 0
10 Number(“10”) =>
Number(“10.33”) => 10.33
Number(“10,33”) => nan
Number(“john”) => nan
- Number (newData(“1970-01-01”))
با استفاده از این متد می توان زمان رو براساس ثانیه تعیین کرد در واقع این تاریخ مبدا است و هر تاریخی بدهیم طبق آن حساب می شود .
جلسه دهم
- Parseint() Method
این متد integer یک عد رو رو برمی گردونه.
Document.getElementById(“demo”).innerhtml =
Parseint(“-10”); => -10
Parseint(“10.33”); =>10
Parseint(“10 6”); => -10
Parseint(“10 years”); => 10
Parseint(“years 10”); => nan
- Parsfloat() Method
این متد هم تقریبا به متد قبلی است و عدد برمی گرداند. منتهی مثلا مورد 10.33 را همانطور برمی گرداند .
Number Properties
Properties یا ویژگی ها خصوصیاتی هستند که روی یک object عمل می کنند. تفاوت آن با متد این است که متد به تنهایی کار میکند ولی propertie ها روی object پیاده می شود.
برخی از properties ها را در ادامه بررسی می کنیم:
- MAX_VALUE
let x = Number.MAX_VALUE;
document.getElementById(“demo”).innerHTML = x;
در اینجا منظور این است که بزرگ ترین عدد ممکن که کامپیوترگنجایشش رو داره برگردونه
- MIN_VALUE
در اینجا منظور این است کوچک ترین عدد ممکن که کامپیوترگنجایشش رو داره برگردونه
- POSITIVE-INFINITY
بزرگترین عدد مثبت و بی نهایت رو برمیگردونه که همان بی نهایت هست
- NEGATIVE-INFINITY
منفی بی نهایت رو برمیگردونه که در واقع کوچکترین عدد ممکن است .
- NAN
Let x = Number.NAN ; => NAN
ویژگی های اعداد را نمی توان روی متغیرها استفاده کرد. مثلا اگر بجای Number.MAX_VALUE
به این شکل بنویسیم : X.MAX_VALUE جوابی که به ما برمیگرداند تعریف نشده است . چون نمیتوان از اسم Numberاستفاده کرد برای این موارد.
جلسه یازدهم
آرایه به تعدادی متغیر که در کنار هم قرار می گیرند و فضایی از حافظه را اشغال می کنند گفته می شود عناصر آرایه ممکن است از یک نوع باشد یا نباشد.
برای تعریف آرایه می توان به شکل های مختلف اینکار را انجام داد.
- Const points = newArray()
- Const points = []
- Const points = newArray (10,20,30)
- Const points= [10,20,30]
اگر بخواهیم نوع آرایه را برگردانیم از typeof استفاده می کنیم .
Const fruits = [“a”,”b”,”c”];
Document.getElementById(“demo”).innerhtml = typeof fruits; => object
آرایه یک نوع object هست.
برای اینکه بدانیم متغیری که مقدار دهی شده آرایه هست یا نه می توانیم از دستور زیر استفاده کنیم :
Array.isArray(fruits);
جواب true یا false است.
Instanceof هم به ما کمک میکنه تشخیص بدهیم که متغیر ما آرایه هست یا خیر.
Const fruits = [“a”,”b”,”c”];
Fruits Instanceof Array
متدهای آرایه Array Method
- Tostring() Method
با این متد آرایه را به رشته تبدیل می کنیم.
- Join() Method
این متد کار tostring رو انجام میده و علاوه براون یک جداکننده هم میتواند بین عناصر آرایه ملحق کند.
Let x = [“a”,”b”,”c”,”d”];
Document.getElementById(“demo”).innerhtml = x.join(“*”);
- a*b*c*d
- pop() Method
متد pop() آخرین عنصر آرایه را حذف می کند .
- push() Method
این متد یک عنصر به آخر آرایه اضافه می کند.
عنصری که می خواهیم اضافه شود داخل متد push قرار می دهیم.
- Shift() Method
خونه اول رو حذف می کنه و بقیه رو شیفت میده به جای اون.
- Unshift() Method
این متد یک عنصر به ابتدای آرایه اضافه می کند .
- Changing element
برای تغییر دادن یک عنصر از آرایه می توانیم با استفاده index number اینکار را انجام دهیم .
Const fruits = [“a”,”b”,”c”,”d”];
Fruits [0]= “e”;
در جواب به جای a , e را جایگزین می کند.
- Array length
یک راه دیگر برای اضافه کردن عنصر به انتهای آرایه استفاده از
Array length است.
- Array delete()
با این متد عنصر مورد نظر را می تونیم حذف میکنیم ولی با این متد خونه عنصر حذف نمیشه بلکه فقط خونه عنصر روخالی میکنه. برای حذف بهتره از pop() یا shift() استفاده کنیم.
-10 Concat() Method
این متد دوتا آرایه رو به هم وصل میکنه.
-11 Splice() Method
متد splice برای اضافه کردن عناصر جدید به آرایه است.
Const fruits = [“a”,”b”,”c”,”d”];
Fruits.splice(2,0,”e”,”f”);
در دستور بالا 2 موقعیت عنصری که باید اضافه شود را نشان می دهد و 0 یعنی هیچ عنصری از آرایه ها حذف نشود. بقیه عناصر هم قرار هست اضافه شوند .
12- Slice() Method
این متد برای برش دادن است و به ازای عددی که داخل متد نوشته می شود از ابتدای آرایه عنصرها را برش می دهد مثلا اگر slice(3) باشد سه عنصر اول آرایه را حذف و بعد از آن را نمایش می دهد.

دوره آموزشی رایگان
این دوره کاملا رایگان می باشد و نیاز به پرداخت هیچگونه هزینه ای نمی باشد.
درخواست مشاوره
برای کسب اطلاعات بیشتر درباره این دوره درخواست مشاوره خود را ارسال کنید و یا با ما در تماس باشید.
درخواست مشاورهدوره های مرتبط
آموزش برنامه نویسی داکر
چیزی که یاد خواهید گرفت با استفاده از NextJs، Hardhat، OpenZeppelin و Ethers می توانید یک بازار NFT حرفه ای…
آموزش برنامه نویسی جنگو
چیزی که یاد خواهید گرفت با استفاده از NextJs، Hardhat، OpenZeppelin و Ethers می توانید یک بازار NFT حرفه ای…
پکیج کامل آموزش برنامه نویسی بلاکچین ۰ تا ۱۰۰ با برنامه نویسی سالیدیتی (بلاک چین) پروژه محور
دوره آموزش برنامه نویسی بلاکچین با سالیدیتی پروژه محور در بستر اتریوم بصورت صفر تا ۱۰۰ همراه با آموزش تمامی مفاهیم و الزامات کد نویسی web3.js و آموزش پیش نیازهای html ,css ,js
آموزش بوت استرپ 5 رایگان برای طراحی سایت
در پکیج آموزش طراحی سایت دو و چند زبانه، تمام ابزارهای مورد نیاز برای چندزبانه کردن یک وبسایت وردپرسی، در اختیار شما قرار گرفته است.
chat_bubble_outlineنظرات
500,000 تومان 250,000 تومان

مهندس مریم گوهرزاد
کارشناس ارشد نرم افزارکارشناس ارشد نرم افزار مدیر مجتمع دیجیتال آرتا رسانه
قوانین ثبت دیدگاه