This media is not supported in your browser
VIEW IN TELEGRAM
📌متد addEventListener در جاوا اسکریپت
✅یکی از مهمترین و پرکاربردترین متدهای مورد استفاده در جاوااسکریپت است که یک event را به عناصر HTML وصل میکند. با استفاده از این متد میتوان event handlerمختلف را به یک عنصر اضافه کنید.
✅توجه داشته باشید که پرکاربردترین syntax مورد استفاده برای این متد به صورت زیر است.
addEventListener(type, listener);
🔹type
یک رشته حساس به حروف بزرگ و کوچک است که درواقع event مورد نظرمیباشد.
🔹listener
یک تابع جاوااسکریپتی را اجرا میکند که event مشخص شده بر روی المان مورد نظر را تعیین میکند.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
@alithecodeguy
✅یکی از مهمترین و پرکاربردترین متدهای مورد استفاده در جاوااسکریپت است که یک event را به عناصر HTML وصل میکند. با استفاده از این متد میتوان event handlerمختلف را به یک عنصر اضافه کنید.
✅توجه داشته باشید که پرکاربردترین syntax مورد استفاده برای این متد به صورت زیر است.
addEventListener(type, listener);
🔹type
یک رشته حساس به حروف بزرگ و کوچک است که درواقع event مورد نظرمیباشد.
🔹listener
یک تابع جاوااسکریپتی را اجرا میکند که event مشخص شده بر روی المان مورد نظر را تعیین میکند.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
@alithecodeguy
Media is too big
VIEW IN TELEGRAM
📌المان <canvas> در HTML
✅از این المان برای ترسیم گرافیک در صفحه وب مورد استفاده قرار میگیرد.
✅المان <canvas> تنها یک محفظه برای گرافیک است و برای ترسیم گرافیک باید از جاوا اسکریپت استفاده کنید.
✅این المان روش های مختلفی برای ترسیم کادرها، دایره ها، متن و افزودن تصاویر دارد. برای آشنایی بیشتر یک مثال ساده در ویدئو آورده شده است.
https://www.w3schools.com/html/html5_canvas.asp
@alithecodeguy
✅از این المان برای ترسیم گرافیک در صفحه وب مورد استفاده قرار میگیرد.
✅المان <canvas> تنها یک محفظه برای گرافیک است و برای ترسیم گرافیک باید از جاوا اسکریپت استفاده کنید.
✅این المان روش های مختلفی برای ترسیم کادرها، دایره ها، متن و افزودن تصاویر دارد. برای آشنایی بیشتر یک مثال ساده در ویدئو آورده شده است.
https://www.w3schools.com/html/html5_canvas.asp
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌تغییر عناصر HTML در جاوااسکریپت
✅در جاوااسکریپت با استفاده از ()document.write میتوانید محتوای عناصر HTML را به طور مستقیم تغییر دهید.
✅با استفاده از property innerHTMLنیز میتوانید محتوای جدید را جایگزین محتوای قبلی کنید.
✅برای تغییر دادن مقدار ویژگی HTML میتوانید از attribute استفاده نمایید.
@alithecodeguy
✅در جاوااسکریپت با استفاده از ()document.write میتوانید محتوای عناصر HTML را به طور مستقیم تغییر دهید.
✅با استفاده از property innerHTMLنیز میتوانید محتوای جدید را جایگزین محتوای قبلی کنید.
✅برای تغییر دادن مقدار ویژگی HTML میتوانید از attribute استفاده نمایید.
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌تغییر استایل با استفاده از جاوااسکریپت
✅برای تغییر استایل دهی با استفاده از جاوااسکریپت میتوانید از دستور زیر استفاده نمایید.
document.getElementById(id).style.property = new style
@alithecodeguy
✅برای تغییر استایل دهی با استفاده از جاوااسکریپت میتوانید از دستور زیر استفاده نمایید.
document.getElementById(id).style.property = new style
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌افزونه CodeSnap یکی از پرکاربدترین افزونههای vsCode برای تهیه عکس از کدهای شما است. کار با این افزونه بسیار آسان است و برای آشنایی با نحوه استفاده از این افزونه ویدئوی بالا را مشاهده نمایید.
@alithecodeguy
@alithecodeguy
اگر میخواید از یه مخزن گیت کلون بگیرید ولی هیستوریش رو نمیخواید ، از کتابخونه زیر میتونید استفاده کنید.
https://github.com/Rich-Harris/degit
#git #github #degit
https://github.com/Rich-Harris/degit
#git #github #degit
📌متد sort()
✅متد sort اعضای آرایه را مرتبسازی میکند. مرتبسازی به صورت صعودی انجام میشود.
✅این متد، آرایه جدید برنمیگرداند. همان آرایه را مرتبسازی میکند
✅توجه داشته باشید که هنگام مرتب سازی آرایه به صورت رشته تبدیل میشود، بنابراین هنگام مرتب سازی آرایهها عددی آنها را به رشته تبدیل میکند. بنابراین لازم است برای مرتب سازی این آرایههای عددی تابعی بنویسید و به این متد ارسال نمایید.
زیرا متد sort میتواند تابع نیز قبول کند.
@alithecodeguy
✅متد sort اعضای آرایه را مرتبسازی میکند. مرتبسازی به صورت صعودی انجام میشود.
✅این متد، آرایه جدید برنمیگرداند. همان آرایه را مرتبسازی میکند
✅توجه داشته باشید که هنگام مرتب سازی آرایه به صورت رشته تبدیل میشود، بنابراین هنگام مرتب سازی آرایهها عددی آنها را به رشته تبدیل میکند. بنابراین لازم است برای مرتب سازی این آرایههای عددی تابعی بنویسید و به این متد ارسال نمایید.
زیرا متد sort میتواند تابع نیز قبول کند.
@alithecodeguy
📌HTML Responsive Web Design
✅طراحی وب ریسپانسیو درباره ایجاد صفحاتی است که در همه دستگاهها خوب به نظر برسد.
✅برای ایجاد یک صفحه وب ریسپانسیو اضافه کردن تگ <meta name="viewport" content="width=device-width, initial-scale=1.0"> به صفحه HTML ضروری است. پس از اضافه کردن این تگ، این امکان برای طراحان وب فراهم میشود که با استفاده از استایل دهی CSS صفحات ریسپانسیو ایجاد نمایند.
https://www.w3schools.com/html/html_responsive.asp
@alithecodeguy
✅طراحی وب ریسپانسیو درباره ایجاد صفحاتی است که در همه دستگاهها خوب به نظر برسد.
✅برای ایجاد یک صفحه وب ریسپانسیو اضافه کردن تگ <meta name="viewport" content="width=device-width, initial-scale=1.0"> به صفحه HTML ضروری است. پس از اضافه کردن این تگ، این امکان برای طراحان وب فراهم میشود که با استفاده از استایل دهی CSS صفحات ریسپانسیو ایجاد نمایند.
https://www.w3schools.com/html/html_responsive.asp
@alithecodeguy
W3Schools
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
به در خواست یکی از دوستان این آگهی قرار داده شد :
متقاضی یک مربی مسلط به برنامه نویسی جاوا در سطح پیشرفته ساعتی ۲۰۰ هزارتومان
برای ارتباط
00393488889832
( واکس آپ)
متقاضی یک مربی مسلط به برنامه نویسی جاوا در سطح پیشرفته ساعتی ۲۰۰ هزارتومان
برای ارتباط
00393488889832
( واکس آپ)
دوره آنلاین و فشرده فرانت اند
(اطلاعات بیشتر در تصویر)
لینک تلگرام:
https://news.1rj.ru/str/alithecodeguy
لینک لینکدین:
https://www.linkedin.com/in/alithecodeguy/
(اطلاعات بیشتر در تصویر)
لینک تلگرام:
https://news.1rj.ru/str/alithecodeguy
لینک لینکدین:
https://www.linkedin.com/in/alithecodeguy/
Media is too big
VIEW IN TELEGRAM
📌javanoscript engine
✅به زبان ساده javanoscript engine نرم افزاری است که کدهای جاوااسکریپت را اجرا میکند. همچنین موتورهای جاوااسکریپت معمولا توسط فروشندگان وب توسعه پیدا میکنند. توجه داشته باشید در یک مرورگر، موتور جاوا اسکریپت در هماهنگی با موتور رندر از طریق Document Object Model اجرا می شود. به عبارت دیگر کد سطح بالا را به کد قابل خواندن برای ماشین تبدیل می کنند که به رایانه اجازه می دهد تا برخی از وظایف خاص را انجام دهد.
https://www.geeksforgeeks.org/what-happens-inside-javanoscript-engine/
@alithecodeguy
✅به زبان ساده javanoscript engine نرم افزاری است که کدهای جاوااسکریپت را اجرا میکند. همچنین موتورهای جاوااسکریپت معمولا توسط فروشندگان وب توسعه پیدا میکنند. توجه داشته باشید در یک مرورگر، موتور جاوا اسکریپت در هماهنگی با موتور رندر از طریق Document Object Model اجرا می شود. به عبارت دیگر کد سطح بالا را به کد قابل خواندن برای ماشین تبدیل می کنند که به رایانه اجازه می دهد تا برخی از وظایف خاص را انجام دهد.
https://www.geeksforgeeks.org/what-happens-inside-javanoscript-engine/
@alithecodeguy
📌HTML Entities
✅برخی از کاراکترها در HTML رزرو شده هستند و برای نمایش آنها در صفحه وب طراحی شده نمیتوان بصورت مستقیم از این کاراکترها استفاده کرد. مانند علامت <> که در HTML برای نمایش تگها از آن استفاده میشود. بنابراین برای اینکه بتوانیم کاراکترهای رزرو شده را نمایش دهیم لازم است از Character entities استفده نماییم. نحوه استفاده از یک character entity به صورت زیر است:
🔹 &entity_name;
🔹 &#entity_number;
✅لیست برخی از character entities در وب سایت زیر آورده شده است.
https://www.w3schools.com/html/html_entities.asp
@alithecodeguy
✅برخی از کاراکترها در HTML رزرو شده هستند و برای نمایش آنها در صفحه وب طراحی شده نمیتوان بصورت مستقیم از این کاراکترها استفاده کرد. مانند علامت <> که در HTML برای نمایش تگها از آن استفاده میشود. بنابراین برای اینکه بتوانیم کاراکترهای رزرو شده را نمایش دهیم لازم است از Character entities استفده نماییم. نحوه استفاده از یک character entity به صورت زیر است:
🔹 &entity_name;
🔹 &#entity_number;
✅لیست برخی از character entities در وب سایت زیر آورده شده است.
https://www.w3schools.com/html/html_entities.asp
@alithecodeguy
Media is too big
VIEW IN TELEGRAM
📌عملیات همگام یا synchronous و ناهمگام یا asynchronous چیست؟
✅در روش همگام یا synchronous کدها پشت سر هم و به صورت خطی اجرا میشوند. در این روش از برنامه نویسی دستورات باید به ترتیب اجرا شوند و اگر یک خط از دستورات اجرا نشوند اجازه رفتن به خط دیگر داده نمیشود.
✅در جاوااسکریپت برخی از عملیات هستند که جدا از روند اصلی برنامه اجرا میشوند که به آنها عملیات ناهمگام یا asynchronous گفته میشود. به عبارت دیگر هنگامیکه مفسر به قسمتی از کد رسید که لازم است با یک منبع خارجی ارتباط برقرار میکند، منتظر نتیجه این قسمت نمیماند و به ادامه روند برنامه میپردازد.
✅توجه داشته باشید که این دو عبارت یک مفهوم در زبانهای برنامهنویسی هستند و برای پیادهسازی این مفاهیم روشهای بسیاری وجود دارند که یکی از این روشها async/await میباشد.
@alithecodeguy
✅در روش همگام یا synchronous کدها پشت سر هم و به صورت خطی اجرا میشوند. در این روش از برنامه نویسی دستورات باید به ترتیب اجرا شوند و اگر یک خط از دستورات اجرا نشوند اجازه رفتن به خط دیگر داده نمیشود.
✅در جاوااسکریپت برخی از عملیات هستند که جدا از روند اصلی برنامه اجرا میشوند که به آنها عملیات ناهمگام یا asynchronous گفته میشود. به عبارت دیگر هنگامیکه مفسر به قسمتی از کد رسید که لازم است با یک منبع خارجی ارتباط برقرار میکند، منتظر نتیجه این قسمت نمیماند و به ادامه روند برنامه میپردازد.
✅توجه داشته باشید که این دو عبارت یک مفهوم در زبانهای برنامهنویسی هستند و برای پیادهسازی این مفاهیم روشهای بسیاری وجود دارند که یکی از این روشها async/await میباشد.
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌توابع callback در جاوااسکریپت
✅همانطور که میدانید جاوا اسکریپت کارها را به صورت asynchronous یا همان غیر همزمان انجام می دهد. یعنی بجای صبر کردن برای دریافت پاسخ و سپس انجام ادامه اجرای دستورات، به سراغ کد بعدی برای اجرا می رود و در صورتی که پاسخ دستورات مورد نظر آماده شده باشد دوباره به سراغ اجرای دستوراتی که رد کرده است، خواهد رفت.
✅حال زمانی که ما یک تابع را به عنوان آرگومان به تابع دیگر ارسال میکنیم، و تابع دوم را مجبور میکنیم که تا قبل از اجرای کامل تابع اول اجرا نشود، در واقع ما از Callback استفاده کرده ایم. با اینکار مفسر را وادار میکنیم کدها را دقیقا به همان ترتیبی که نوشتهایم اجرا کند. به زبان ساده، توابع callback برای این که ما مطمئن شویم یک قطعه کدی اجرا نمی شود مگر اینکه کد دیگری اجراش تمام شده باشد کاربرد دارد و برنامه را مجبور میکنیم مادامی که پاسخ دریافت نشده کدهای بعدی اجرا نشود.
✅یکی از پرکاربردترین زمان استفاده از توابع callback هنگام دریافت اطلاعات از API میباشد.
@alithecodeguy
✅همانطور که میدانید جاوا اسکریپت کارها را به صورت asynchronous یا همان غیر همزمان انجام می دهد. یعنی بجای صبر کردن برای دریافت پاسخ و سپس انجام ادامه اجرای دستورات، به سراغ کد بعدی برای اجرا می رود و در صورتی که پاسخ دستورات مورد نظر آماده شده باشد دوباره به سراغ اجرای دستوراتی که رد کرده است، خواهد رفت.
✅حال زمانی که ما یک تابع را به عنوان آرگومان به تابع دیگر ارسال میکنیم، و تابع دوم را مجبور میکنیم که تا قبل از اجرای کامل تابع اول اجرا نشود، در واقع ما از Callback استفاده کرده ایم. با اینکار مفسر را وادار میکنیم کدها را دقیقا به همان ترتیبی که نوشتهایم اجرا کند. به زبان ساده، توابع callback برای این که ما مطمئن شویم یک قطعه کدی اجرا نمی شود مگر اینکه کد دیگری اجراش تمام شده باشد کاربرد دارد و برنامه را مجبور میکنیم مادامی که پاسخ دریافت نشده کدهای بعدی اجرا نشود.
✅یکی از پرکاربردترین زمان استفاده از توابع callback هنگام دریافت اطلاعات از API میباشد.
@alithecodeguy
📌متد ()filter در آرایهها
✅با استفاده از این متد میتوانیم بر روی آیتم های یک آرایه فیلتر اعمال کنیم. این متد یک تابع callback دریافت میکند و به ازای هر یک از آیتمهای آرایه یک بار اجرا میشود و در صورت برقرار بودن شرط مورد نظر این آیتم آرایه برگردانده میشود.
✅به این نکته توجه داشته باشید که اگر متد filter را بر روی آرایهای از آبجکتها اعمال کنید، آبجکت را برنمیگرداند و همیشه یک آرایه از آبجکتها را برمیگرداند.
@alithecodeguy
✅با استفاده از این متد میتوانیم بر روی آیتم های یک آرایه فیلتر اعمال کنیم. این متد یک تابع callback دریافت میکند و به ازای هر یک از آیتمهای آرایه یک بار اجرا میشود و در صورت برقرار بودن شرط مورد نظر این آیتم آرایه برگردانده میشود.
✅به این نکته توجه داشته باشید که اگر متد filter را بر روی آرایهای از آبجکتها اعمال کنید، آبجکت را برنمیگرداند و همیشه یک آرایه از آبجکتها را برمیگرداند.
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌 :is() CSS pseudo-class
✅در این روش یک لیستی از selector را به عنوان آرگومان خود در نظر میگیرد و هر المانی را که میتواند توسط یکی از selectorهای آن لیست انتخاب شود را انتخاب میکند.
✅به عبارت دیگر این روش برای یک لیستی بزرگی از المانها که تکرار شدهاند کاربرد دارد و برای کمتر شدن دستورات css بسیار مفید میباشد.
https://css-tricks.com/almanac/selectors/i/is/
@alithecodeguy
✅در این روش یک لیستی از selector را به عنوان آرگومان خود در نظر میگیرد و هر المانی را که میتواند توسط یکی از selectorهای آن لیست انتخاب شود را انتخاب میکند.
✅به عبارت دیگر این روش برای یک لیستی بزرگی از المانها که تکرار شدهاند کاربرد دارد و برای کمتر شدن دستورات css بسیار مفید میباشد.
https://css-tricks.com/almanac/selectors/i/is/
@alithecodeguy
Media is too big
VIEW IN TELEGRAM
📌promise in javanoscript
✅این مفهوم در ES6 به جاوااسکریپت اضافه شده است و یکی از مهمترین کاربردهای promise در جاوااسکریپت کمک به رهایی از callback hell یا جهنم callbackها است. با کمک promise میتوانید بخشی از کدها را مدیریت کنید و به صورت asynchronous اجرا کنید.
✅برای ایجاد promise از تابع سازنده آن استفاده میشود.
🔹new Promise(function(resolve, reject){
// our logic goes here ..
});
✅به این نکته توجه داشته باشید که هر promise میتواند یک چرخه حیات با 3 حالت داشته باشد:
🔹pending
حالتی است که هنوز اجرای کدها به پایان نرسیده و نتیجهی آن هنوز مشخص نیست.
🔹resolved
حالتی است که اجرای کدها با موفقیت به پایان رسیده است.
🔹rejected
حالتی است که اجرای کدها با شکست به پایان رسیده است.
@alithecodeguy
✅این مفهوم در ES6 به جاوااسکریپت اضافه شده است و یکی از مهمترین کاربردهای promise در جاوااسکریپت کمک به رهایی از callback hell یا جهنم callbackها است. با کمک promise میتوانید بخشی از کدها را مدیریت کنید و به صورت asynchronous اجرا کنید.
✅برای ایجاد promise از تابع سازنده آن استفاده میشود.
🔹new Promise(function(resolve, reject){
// our logic goes here ..
});
✅به این نکته توجه داشته باشید که هر promise میتواند یک چرخه حیات با 3 حالت داشته باشد:
🔹pending
حالتی است که هنوز اجرای کدها به پایان نرسیده و نتیجهی آن هنوز مشخص نیست.
🔹resolved
حالتی است که اجرای کدها با موفقیت به پایان رسیده است.
🔹rejected
حالتی است که اجرای کدها با شکست به پایان رسیده است.
@alithecodeguy