This media is not supported in your browser
VIEW IN TELEGRAM
📌رویداد های زمانی یا Timing Events
✅در جاوا اسکریت کدها می توانند در فاصله های زمانی معینی اجرا شوند. که به این فواصل زمانی را Timing Events میگویند.
✅دو متد یا تابع اصلی برای این کار وجود دارد:
🔷(setTimeout(function, milliseconds
تابع را بعد از اتمام زمان مشخص شده اجرا می کند
🔷(setInterval(function, milliseconds
مانند setTimeout عمل می کند اما تابع را تکرار می کند.
@alithecodeguy
✅در جاوا اسکریت کدها می توانند در فاصله های زمانی معینی اجرا شوند. که به این فواصل زمانی را Timing Events میگویند.
✅دو متد یا تابع اصلی برای این کار وجود دارد:
🔷(setTimeout(function, milliseconds
تابع را بعد از اتمام زمان مشخص شده اجرا می کند
🔷(setInterval(function, milliseconds
مانند setTimeout عمل می کند اما تابع را تکرار می کند.
@alithecodeguy
📌متد ()some
✅ متد some یک تابع Callback میگیرد و اگر حداقل یک عنصر از آرایه که تابع Callback برای آن فراخوانی شده، شرط تابع صدق کند مقدار true را برمیگرداند. در غیر این صورت مقدار false برمیگرداند.
📌متد ()every
✅ این متد دقیقا عملکردی متضاد با متد some را دارد. به این صورت که این متد نیز یک تابع Callback میگیرد و در صورتی که شرط تابع Callback برای تمام آیتمهای آرایه برقرارباشد، مقدار true برمیگرداند و در غیر این صورت مقدار false برمیگرداند.
@alithecodeguy
✅ متد some یک تابع Callback میگیرد و اگر حداقل یک عنصر از آرایه که تابع Callback برای آن فراخوانی شده، شرط تابع صدق کند مقدار true را برمیگرداند. در غیر این صورت مقدار false برمیگرداند.
📌متد ()every
✅ این متد دقیقا عملکردی متضاد با متد some را دارد. به این صورت که این متد نیز یک تابع Callback میگیرد و در صورتی که شرط تابع Callback برای تمام آیتمهای آرایه برقرارباشد، مقدار true برمیگرداند و در غیر این صورت مقدار false برمیگرداند.
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌تگ map در HTML
✅ با استفاده از این تگ میتوانیم یک فضای قابل کلیک کردن بر روی یک عکس ایجاد کنیم. با ایجاد این فضا برای یک عکس این امکان برای کاربر فراهم میشود که با کلیک بر روی تصویر مورد نظر به یک صفحه دیگر هدایت شود و همینطور دستورات جاوااسکریپتی برای تصویر تعریف شود.
✅ با این تگ میتوان برای تصاویر فضای قابل کلیک به صورت دایره، مستطیل و چند ضلعی ایجاد کرد.
https://www.w3schools.com/html/html_images_imagemap.asp
@alithecodeguy
✅ با استفاده از این تگ میتوانیم یک فضای قابل کلیک کردن بر روی یک عکس ایجاد کنیم. با ایجاد این فضا برای یک عکس این امکان برای کاربر فراهم میشود که با کلیک بر روی تصویر مورد نظر به یک صفحه دیگر هدایت شود و همینطور دستورات جاوااسکریپتی برای تصویر تعریف شود.
✅ با این تگ میتوان برای تصاویر فضای قابل کلیک به صورت دایره، مستطیل و چند ضلعی ایجاد کرد.
https://www.w3schools.com/html/html_images_imagemap.asp
@alithecodeguy
📌انواع واحد اندازه گیری در css
✅در css چندین واحد برای بیان طول وجود دارد که برخی از این واحدها نسبت به بقیه کارایی بیشتری دارند.
🔹px
با توجه به یک صفحه نمایش تعریف میشود که هر یک پیکسل یه نقطه از یک صفحه نمایش است.
🔹em
نسبت به اندازه فونت المان والد اندازه تغییر میکند. به عنوان مثال em2 یعنی 2 برابر اندازه فونت فعلی است. (1em = 16px)
🔹rem
نسبت به اندازه فونت المان ریشه اندازه تغییر میکند. (1rem = 16px)
🔹%
نسبت به اندازه فونت المان والد اندازه تغییر میکند.
🔹vw
نسبت به عرض صفحه نمایش اندازه تغییر میکند. (1vw = 1% width of the viewport = 4.8px)
🔹vh
نسبت به ارتفاع صفحه نمایش اندازه تغییر میکند. (1vh = 1% height of the viewport = 8px)
https://www.w3schools.com/cssref/css_units.asp
@alithecodeguy
✅در css چندین واحد برای بیان طول وجود دارد که برخی از این واحدها نسبت به بقیه کارایی بیشتری دارند.
🔹px
با توجه به یک صفحه نمایش تعریف میشود که هر یک پیکسل یه نقطه از یک صفحه نمایش است.
🔹em
نسبت به اندازه فونت المان والد اندازه تغییر میکند. به عنوان مثال em2 یعنی 2 برابر اندازه فونت فعلی است. (1em = 16px)
🔹rem
نسبت به اندازه فونت المان ریشه اندازه تغییر میکند. (1rem = 16px)
🔹%
نسبت به اندازه فونت المان والد اندازه تغییر میکند.
🔹vw
نسبت به عرض صفحه نمایش اندازه تغییر میکند. (1vw = 1% width of the viewport = 4.8px)
🔹vh
نسبت به ارتفاع صفحه نمایش اندازه تغییر میکند. (1vh = 1% height of the viewport = 8px)
https://www.w3schools.com/cssref/css_units.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.
Media is too big
VIEW IN TELEGRAM
📌font awesome
✅یکی از راه های اضافه کردن آیکون به صفحات وب استفاده از font awesome میباشد. با استفاده از این روش میتوانید به جای تهیه و استفاده از تصاویر مختلف در وبسایت خود از آیکونهای آماده در این فونت استفاده کنید.
به این دلیل که این تصاویر به صورت برداری هستند میتوانید آیکونها را بدون تغییر در کیفیت نمایش آنها، در هر اندازهای به کار ببرید.
✅همچنبین میتوانید به کمک CSS میتوانید، رنگ، اندازه و موارد دیگری را که از این طریق قابل تنظیم کردن است روی آیکونها اعمال کنید.
✅برای استفاده رایگان از font awesome میتوانید از دو روش استفاده کنید. روش اول دانلود آیکونها از وب سایت میباشد و روش دوم ایجاد اکانت و لینک کردن آدرسی که پس از ایجاد اکانت در اختیار کاربر قرار میگیرد.
@alithecodeguy
✅یکی از راه های اضافه کردن آیکون به صفحات وب استفاده از font awesome میباشد. با استفاده از این روش میتوانید به جای تهیه و استفاده از تصاویر مختلف در وبسایت خود از آیکونهای آماده در این فونت استفاده کنید.
به این دلیل که این تصاویر به صورت برداری هستند میتوانید آیکونها را بدون تغییر در کیفیت نمایش آنها، در هر اندازهای به کار ببرید.
✅همچنبین میتوانید به کمک CSS میتوانید، رنگ، اندازه و موارد دیگری را که از این طریق قابل تنظیم کردن است روی آیکونها اعمال کنید.
✅برای استفاده رایگان از font awesome میتوانید از دو روش استفاده کنید. روش اول دانلود آیکونها از وب سایت میباشد و روش دوم ایجاد اکانت و لینک کردن آدرسی که پس از ایجاد اکانت در اختیار کاربر قرار میگیرد.
@alithecodeguy
📌Css Text
✅ در css پروپرتی های بسیاری برای قالب بندی متن وجود دارد که هنگام استایل دهی در صفحات وب، تعداد زیادی از این ویژگی ها مورد استفاده قرار میگیرد.
✅ پروپرتی های متن به صورت زیر دسته بندی میشود:
🔹Text Color
برای استفاده از رنگ بندی در متن استفاده میشود
🔹Text Alignment
برای تراز بندی متن در صفحات وب استفاده میشود
🔹Text Decoration
برای حذف یا اضافه کردن decoration برای متون در صفحات وب استفاده میشود
✅ برای آشنایی با ویژگی های بیشتر و همچنین نحوه استفاده از این ویژگی ها سایت زیر را مطالعه کنید.
https://www.w3schools.com/css/css_text.asp
@alithecodeguy
✅ در css پروپرتی های بسیاری برای قالب بندی متن وجود دارد که هنگام استایل دهی در صفحات وب، تعداد زیادی از این ویژگی ها مورد استفاده قرار میگیرد.
✅ پروپرتی های متن به صورت زیر دسته بندی میشود:
🔹Text Color
برای استفاده از رنگ بندی در متن استفاده میشود
🔹Text Alignment
برای تراز بندی متن در صفحات وب استفاده میشود
🔹Text Decoration
برای حذف یا اضافه کردن decoration برای متون در صفحات وب استفاده میشود
✅ برای آشنایی با ویژگی های بیشتر و همچنین نحوه استفاده از این ویژگی ها سایت زیر را مطالعه کنید.
https://www.w3schools.com/css/css_text.asp
@alithecodeguy
📌 متد ()concat
✅متد concat برای الحاق دو آرایه بهم مورد استفاده قرار میگیرد و یک آرایه جدید برمیگرداند.
📌متد ()slice
✅ متد slice دو آرگومان میگیرد که این آرگومانها index آرایه هستند و برای کپی کردن آرایه از index آغازین تا index پایانی مورد استفاده قرار میگیرد.
اولین آرگومان index است که کپی کردن آیتمها را از آن شروع میکنیم. دومین آرگومان index است که کپی آیتمها را تا آن انجام میدهیم. در نهایت این متد یک آرایه جدید برمیگرداند که آیتمهای آرایه اصلی از ایندکس آغازین تا ایندکس پایانی در آن کپی شده است.
@alithecodeguy
✅متد concat برای الحاق دو آرایه بهم مورد استفاده قرار میگیرد و یک آرایه جدید برمیگرداند.
📌متد ()slice
✅ متد slice دو آرگومان میگیرد که این آرگومانها index آرایه هستند و برای کپی کردن آرایه از index آغازین تا index پایانی مورد استفاده قرار میگیرد.
اولین آرگومان index است که کپی کردن آیتمها را از آن شروع میکنیم. دومین آرگومان index است که کپی آیتمها را تا آن انجام میدهیم. در نهایت این متد یک آرایه جدید برمیگرداند که آیتمهای آرایه اصلی از ایندکس آغازین تا ایندکس پایانی در آن کپی شده است.
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌خروجی در جاوااسکریپت
✅در جاوااسکریپت میتوانید به چهار روش داده ها را در خروجی نمایش دهید:
🔹نمایش خروجی در تگهای html با استفاده از innerHTML
🔹نمایش خروجی در صفحه وب با استفاده از ()document.write. این دستور معمولا برای تست خروجی مورد استفاده قرار میگیرد.
🔹نمایش به صورت پیغام در یک alert box با استفاده از ()window.alert
🔹گرفتن خروجی در کنسول مرورگر با استفاده از ()console.log. از این روش معمولا برای خطایابی استفاده میشود.
@alithecodeguy
✅در جاوااسکریپت میتوانید به چهار روش داده ها را در خروجی نمایش دهید:
🔹نمایش خروجی در تگهای html با استفاده از innerHTML
🔹نمایش خروجی در صفحه وب با استفاده از ()document.write. این دستور معمولا برای تست خروجی مورد استفاده قرار میگیرد.
🔹نمایش به صورت پیغام در یک alert box با استفاده از ()window.alert
🔹گرفتن خروجی در کنسول مرورگر با استفاده از ()console.log. از این روش معمولا برای خطایابی استفاده میشود.
@alithecodeguy
This media is not supported in your browser
VIEW IN TELEGRAM
📌دستورات Break و Continue در جاوا اسکریپت
✅دستورات Break و Continue در جاوا اسکریپت اجازه می دهد اجرای حلقه های تکرار را کنترل کرده و قبل از اینکه شرط اجرای حلقه نقض شود تا حلقه پایان یابد، حلقه را پایان داده و یا مجددا اجرا شود.
این دستورات کنترل شما را بر حلقه های تکرار for و while بیشتر می کند.
✅دستور Break باعث شکستن حلقه و خروج از حلقه می شود.
✅دستور Continue از اجرای کدهای بعد از Continue جلوگیری میکند و حلقه از ابتدا اجرا می شود.
@alitehcodeguy
✅دستورات Break و Continue در جاوا اسکریپت اجازه می دهد اجرای حلقه های تکرار را کنترل کرده و قبل از اینکه شرط اجرای حلقه نقض شود تا حلقه پایان یابد، حلقه را پایان داده و یا مجددا اجرا شود.
این دستورات کنترل شما را بر حلقه های تکرار for و while بیشتر می کند.
✅دستور Break باعث شکستن حلقه و خروج از حلقه می شود.
✅دستور Continue از اجرای کدهای بعد از Continue جلوگیری میکند و حلقه از ابتدا اجرا می شود.
@alitehcodeguy
📌CSS Box Model
✅تمام المانهای HTML را می توان به عنوان باکس در نظر گرفت و در css زمانیکه از دیزاین و layout صحبت میکنیم درواقع از box model استفاده میکنیم.
✅هر css box model به صورت یک جعبهای است که در اطراف المانهای HTML قرار میگیرد. این box model از 4 قسمت مختلف تشکیل شده است.
🔹Content
بخشی است که متن و تصاویر قرار میگیرند.
🔹Padding
شامل یک ناحیه و فضا اطراف content است.
🔹Border
حاشیه ای است که اطراف padding و content قرار میگیرد.
🔹Margin
شامل یک ناحیه و فضا خارج از border است.
https://www.w3schools.com/css/css_boxmodel.asp
@alithecodeguy
✅تمام المانهای HTML را می توان به عنوان باکس در نظر گرفت و در css زمانیکه از دیزاین و layout صحبت میکنیم درواقع از box model استفاده میکنیم.
✅هر css box model به صورت یک جعبهای است که در اطراف المانهای HTML قرار میگیرد. این box model از 4 قسمت مختلف تشکیل شده است.
🔹Content
بخشی است که متن و تصاویر قرار میگیرند.
🔹Padding
شامل یک ناحیه و فضا اطراف content است.
🔹Border
حاشیه ای است که اطراف padding و content قرار میگیرد.
🔹Margin
شامل یک ناحیه و فضا خارج از border است.
https://www.w3schools.com/css/css_boxmodel.asp
@alithecodeguy
دوستان گرامی پستها رو ، من (علی) و خانم پناهی میذاریم. اگر سوالی براتون پیش اومده به نویسندش دقت کنید و اگر از خود نویسندش بپرسید احتمالا سریعتر نتیجه بگیرید.
برای این پنج شنبه دورهمی tailwind 3 رو داریم. جمعه دو هفته دیگه هم دوره فشرده جدید داریم. بنراشو میذارم.
امشب یا فردا هم در مورد عقد قرارداد و سفته و اینجور مسایل ویدیو میسازم.
اگر نظر خاصی در موردش داریم ممنون میشم کامنت کنید
برای این پنج شنبه دورهمی tailwind 3 رو داریم. جمعه دو هفته دیگه هم دوره فشرده جدید داریم. بنراشو میذارم.
امشب یا فردا هم در مورد عقد قرارداد و سفته و اینجور مسایل ویدیو میسازم.
اگر نظر خاصی در موردش داریم ممنون میشم کامنت کنید
This media is not supported in your browser
VIEW IN TELEGRAM
📌تگ picture در HTML
✅از این تگ زمانی میتوانید استفاده کنید که قصد دارید برای سایزهای مختلف از مرورگر، از چندین تصویر متفاوت استفاده نمایید.
✅تگ picture شامل یک یا چندین تگ source میباشد و همچنین در داخل این تگ لازم است از چندین attribute استفاده کنید که شامل media، src و srcset است.
https://www.w3schools.com/html/html_images_picture.asp
@alithecodeguy
✅از این تگ زمانی میتوانید استفاده کنید که قصد دارید برای سایزهای مختلف از مرورگر، از چندین تصویر متفاوت استفاده نمایید.
✅تگ picture شامل یک یا چندین تگ source میباشد و همچنین در داخل این تگ لازم است از چندین attribute استفاده کنید که شامل media، src و srcset است.
https://www.w3schools.com/html/html_images_picture.asp
@alithecodeguy
📌متد ()includes در آرایه
✅این متد مشخص میکند که یک آرایه آیا مقدار مشخصی درمیان ورودی های خود دارد یا نه و مقدار true و false را برمیگرداند.
✅برخی از موارد کاربرد این متد شامل جست و جو در متن(رشته ها)، جست و جو در آرایه ها و موارد مشابه میباشد.
✅این متد در متون به حروف کوچک و بزرگ حساس است.
✅این متد دو پارامتر ورودی میگیرد که اولین پارامتر مقداری است که قصد جست وجو در آرایه را داریم و پارامتر اجباریست. پارامتر دوم نیز index شروع جست و جو است که مقدار اختیاری است.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
@alithecodeguy
✅این متد مشخص میکند که یک آرایه آیا مقدار مشخصی درمیان ورودی های خود دارد یا نه و مقدار true و false را برمیگرداند.
✅برخی از موارد کاربرد این متد شامل جست و جو در متن(رشته ها)، جست و جو در آرایه ها و موارد مشابه میباشد.
✅این متد در متون به حروف کوچک و بزرگ حساس است.
✅این متد دو پارامتر ورودی میگیرد که اولین پارامتر مقداری است که قصد جست وجو در آرایه را داریم و پارامتر اجباریست. پارامتر دوم نیز index شروع جست و جو است که مقدار اختیاری است.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
@alithecodeguy
دورهمی آنلاین و رایگان Tailwind3
جلسه از طریق اسکایپ
پنج شنبه ۱۴ بهمن ساعت ۱۸
لینک اسکایپ :
https://join.skype.com/GvwuGHpgGou3
جلسه از طریق اسکایپ
پنج شنبه ۱۴ بهمن ساعت ۱۸
لینک اسکایپ :
https://join.skype.com/GvwuGHpgGou3
This media is not supported in your browser
VIEW IN TELEGRAM
📌CSS Pseudo-elements
✅یک کلمه کلیدی است که به یک selector اضافه میشود و به برنامه نویس این امکان را میدهد که تنها قسمت خاصی از المانها را تغییر دهد.
✅برای استفاده از این روش کافیست اول المان مورد نظر را انتخاب کرده و کلمه کلیدی مورد استفاده را پس از المان بیاورید و در نهایت از نحوه استایل دهی در css استفاده نمایید.
✅لیست pseudo-elements را میتوانید در آدرس زیر مشاهده نمایید.
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
@alithecodeguy
✅یک کلمه کلیدی است که به یک selector اضافه میشود و به برنامه نویس این امکان را میدهد که تنها قسمت خاصی از المانها را تغییر دهد.
✅برای استفاده از این روش کافیست اول المان مورد نظر را انتخاب کرده و کلمه کلیدی مورد استفاده را پس از المان بیاورید و در نهایت از نحوه استایل دهی در css استفاده نمایید.
✅لیست pseudo-elements را میتوانید در آدرس زیر مشاهده نمایید.
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
@alithecodeguy
سوال سر صبحی 😬
آیا در js میتونیم روی آرایه ها از for...in استفاده کنیم؟ واگر میشه استفاده کرد چه فرقی با for...of داره؟
آیا در js میتونیم روی آرایه ها از for...in استفاده کنیم؟ واگر میشه استفاده کرد چه فرقی با for...of داره؟
📌z-index css
✅از z-index برای المانهایی استفاده میشود که روی هم قرار میگیرند و باهم تداخل دارند و با استفاده از این ویژگی ترتیب قرارگیری المانها روی هم مشخص میشود.
✅این property یک عدد صحیح را به عنوان مقدار قبول میکند که شامل اعداد مثبت، منفی و صفر میباشد.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
@alithecodeguy
✅از z-index برای المانهایی استفاده میشود که روی هم قرار میگیرند و باهم تداخل دارند و با استفاده از این ویژگی ترتیب قرارگیری المانها روی هم مشخص میشود.
✅این property یک عدد صحیح را به عنوان مقدار قبول میکند که شامل اعداد مثبت، منفی و صفر میباشد.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
@alithecodeguy
Media is too big
VIEW IN TELEGRAM
📌تغییر از فونت با استفاده از google fonts
✅درواقع google fontsیک وبسایت کاربردی و جامع از انواع فونتها میباشد که طراحان سایت میتوانند از تمام فونتهای موجود د راین سایت برای تغییر ستایل متون در وبسایت خود استفاده نمایند.
✅به دو روش میتوانید از فونتهای موجود دراین سایت استفاده کنید:
🔹از طریق import کردن در صفحه css
🔹از طریق link کردن در صفحه html
✅نحوه استفاده از هر دو روش در ویدئو آموزش داده شده است.
https://fonts.google.com/
@alithecodeguy
✅درواقع google fontsیک وبسایت کاربردی و جامع از انواع فونتها میباشد که طراحان سایت میتوانند از تمام فونتهای موجود د راین سایت برای تغییر ستایل متون در وبسایت خود استفاده نمایند.
✅به دو روش میتوانید از فونتهای موجود دراین سایت استفاده کنید:
🔹از طریق import کردن در صفحه css
🔹از طریق link کردن در صفحه html
✅نحوه استفاده از هر دو روش در ویدئو آموزش داده شده است.
https://fonts.google.com/
@alithecodeguy