سه شنبه ۰۱ تیر ۱۴۰۰

Tuesday, June 22, 2021 GMT +4:30

» شروعی بر برنامه نویسی جاوا اسکریپت (JavaScript)

javascript

یکی از زبان های انعطاف پذیر و در عین حال قدرتمندی که در کنار تگ های ساده HTML و استایل CSS مورد استفاده برنامه نویسان وب قرار می گیرد، زبان برنامه نویسی جاوا اسکریپت (JavaScript) است، البته شاید تصورمان از شنیدن عنوان جاوا اسکریپت بیشتر معطوف به کدهای کاربردی وبلاگ ها و سایت ها شود، اما در واقع باید گفت قدرت این زبان برنامه نویسی خیلی بیشتر از جلوه های ظاهری است که می بینیم و احیانا به عنوان مدیر وبلاگ یا سایت با آنها سر و کار داریم، در دنیای حرفه ای بیشتر سایت ها و صفحات وب برای ایجاد انواع قابلیت های تعاملی سمت کاربر، بررسی اعتبار فرم ها، ارتباط با سرور، شناسایی قابلیت های مرورگر کاربران، کار با کوکی ها (Cookie) و مواردی از این دست از جاوا اسکریپت استفاده می کنند، البته با همه این تفاسیر به دلیل سمت کاربر (Client-side) بودن این زبان (یعنی جاوا اسکریپت تنها روی مرورگر کاربران قابل اجراست و برای تفسیر آن از مفسر مرورگر استفاده می شود نه سرور سایت)، در عین قدرتمندی محدودیت هایی نیز وجود خواهد داشت که جزء ویژگی های ذاتی هر زبان برنامه نویسی محسوب می شود.

اهمیت آموزش جاوا اسکریپت (JavaScript)


همان طور که اشاره شد فراگیری جاوا اسکریپت (JavaScript) جهت تکمیل روند آموزش مهارتهای برنامه نویسی وب گام سوم محسوب می شود، یعنی پس از آشنایی و تسلط بر HTML و CSS، نیاز به یک زبان اسکریپت نویسی تعاملی داریم تا بتوانیم با قدرت بیشتری صفحات وب خود را ایجاد نمائیم، این زبان در وب عموما جاوا اسکریپت است که البته کاربرد آن منحصر به وب نیست و گستره وسیعی دارد، منظور از اسکریپتی بودن این است که کدهای جاوا اسکریپت صرفا در موتور مرورگر تفسیر (Interprete) شده و توسط ماشین کامپایل (Compile) نمی شود، با توجه به اهمیت درک ساختار و نحوه عملکرد جاوا اسکریپت و گستره وسیع استفاده از آن عموما به علاقمندان برنامه نویسی توصیه می شود این زبان را در کنار سایر زبان های تخصصی مورد نظرشان بیاموزند تا در نوشتن و فهم الگوریتم های پیچیده و مبتنی بر رویداد ورزیده شوند (در این مرحله درک عمیق اصطلاحاتی که مطرح می شوند مد نظر نیست، صرف اینکه به صورت اجمالی با این مفاهیم آشنا باشیم و در روند یادگیری قرار بگیریم مطلوب خواهد بود).

دانش و برنامه های مورد نیاز برای یادگیری جاوا اسکریپت


برای فراگیری جاوا اسکریپت لازم است که ابتدا با HTML و CSS آشنا باشیم، به طور خاص در وب داشتن تسلط و دانش کافی در این دو زبان به نوعی پیش نیاز محسوب می شود، کدنویسی را نیز می توانیم در برنامه های ویرایشگر متنی مختلف انجام دهیم، از برنامه ساده Notepad ویندوز تا برنامه های قدرتمند مانند phpStorm، Dreamwaever، NetBeans و... همگی می توانند مورد استفاده قرار گیرند، در حال حاضر توصیه ما استفاده از برنامه قوی phpStorm است، در نهایت کدهای نوشته شده باید در صفحات HTML استفاده و با فراخوانی در مرورگر اجرا شوند.

نکات کلی که باید در رابطه با جاوا اسکریپت بدانیم


قبل از پرداختن به ادامه بحث نکات کلی را یادآور می شویم که در کار با دستورات جاوا اسکریپت لازم است آنها را بدانیم، اهمیت به خاطر داشتن این نکات در این است که حتی یک ایراد کوچک کدنویسی نیز می تواند موجب از کار افتادن کل برنامه شود، این موارد را به جهت پراکنده بودن در مبحثی جداگانه مطرح نکرده و در همین قسمت به صورت موردی مرور می کنیم:
- مفسر جاوا اسکریپت حساس به حروف بزرگ و کوچک است، یعنی به فرض عبارت var با Var از نظر مفسر این زبان متفاوت هستند.
- برای قرار دادن متن توضیحات یا راهنمای بین کدها از شیوه
/*متن راهنما*/
یا 
//متن راهنما
استفاده می کنیم، این متن در هنگام اجرای کدها هیچ تاثیر خاصی ندارد اما برای درج توضیحات و یا راهنمایی در خصوص شیوه کدنویسی استفاده می شود، مثال:
<script type="text/javascript">
//متن توضیحات
var test = 1;
alert(test);
</script>
- کدهای جاوا اسکریپت بین تگ head یا body قابل درج و اجرا هستند، علاوه بر این به صورت فایل خارجی نیز می توانیم آنها را در صفحه وارد کنیم، در حالت حرفه ای توصیه می شود جهت خواناتر شدن کدنویسی عموما از شیوه فایل خارجی استفاده کنیم، همچنین درج کدها و فایل های جاوا اسکریپتی در قسمت های انتهایی تگ body به جهت رعایت اصول بهینه سازی و افزایش سرعت بارگذاری ترجیح دارد.
- جاوا اسکریپت زبانی سمت کاربر (Client-side) است یعنی تنها در مرورگر کاربران قابل پردازش و اجرا می باشد، این عبارت در مقابل زبان های سمت سرور (Server-side) استفاده می شود که برای اجرا نیاز به یک سرور آنلاین یا لوکال دارند (مانند زبان  برنامه نویسی PHP).
- نوع داده در جاوا اسکریپت می تواند به سه صورت عددی (Int) به فرض 1، رشته ای (String) به فرض book یا بولین (Boolean) یعنی به صورت true یا false باشد، همچنین در صورتی که یک منبع تعریف شده اما مقداری نداشته باشد به صورت undefined و در صورتی که مقدار آن به هر دلیل خالی باشد به صورت null در نظر گرفته می شود، مثال:
<script type="text/javascript">
var test;
alert(test);
</script>
با اجرای کد بالا مقدار undefined در پنجره مرورگر نمایش داده خواهد شد چرا که متغیر فرضی test تعریف شده اما مقداری به آن اختصاص داده نشده است، بر همین اساس نمونه کد زیر مقدار null را نمایش خواهد داد:
<script type="text/javascript">
var test = null;
alert(test);
</script>
همان طور که مشخص است متغیر test با مقدار null تعریف شده است.

چند مثال از کاربرد جاوا اسکریپت در صفحات وب


برای کسب آشنایی اولیه و شروع عملی آموزش ها بد نیست چند مثال ساده از قابلیت های اسکریپت نویسی این زبان در صفحات وب را با هم بررسی کنیم، در زیر کدی را جهت نمایش پیام هشدار در پنجره مرورگر درج کرده ایم که به کمک متد alert و آبجکت window به محض پردازش صفحه در مرورگر نمایش داده می شود.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد یک هشدار در جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    text-align:justify;
    font-size:12px;
    direction:rtl;
}
</style>
<script type="text/javascript">
//نمایش یک پیام
window.alert("سلام! این یک پیام جاوا اسکریپت است");
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>

<hr>
کدهای جاوا اسکریپت بین تگ script نوشته می شوند.
</body>
</html>
پیش نمایش
همانطور که می بینیم شیوه نوشتاری (Syntax) این زبان به طور کلی به صورت زیر است:
object.method(argument1, argument2);
آبجکت ها در جاوا اسکریپت می توانند به طور مثال document یا window و متد نیز به فرض write، alert باشند، در صورت عدم آشنایی قبلی با این مفاهیم (آبجکت، متد) جای نگرانی نیست، همین که بدانیم چگونه از نمونه کدها مطابق با نیازمان پیروی کنیم، کافی خواهد بود، دستورات جاوا اسکریپت بین تگ های script نوشته و صفت type با مقدار text/javascript برای این تگ استفاده می شود، البته استفاده از این صفت در HTML نسخه 5 دلخواه است و حذف آن مشکلی به وجود نمی آورد اما در حال حاضر بهتر است این صفت را حذف نکنیم! از تگ noscript نیز برای نمایش پیام هشدار به کاربر در صورت فعال نبودن جاوا اسکریپت در مرورگر استفاده می کنیم، اگرچه در اغلب مرورگرها جاوا اسکریپت جزء ملزومات اولیه بوده و به صورت پیش فرض فعال است اما ممکن است به دلایلی خواسته یا ناخواسته این امکان غیرفعال باشد، در این صورت با نمایش پیام هشدار کاربر را نسبت به این موضوع آگاه می کنیم.

مثالی دیگر با جاوا اسکریپت


همانطور که گفتیم، کدهای جاوا اسکریپت توسط مفسر مرورگر اجرا یا به عبارت صحیحتر تفسیر (Interprete) می شوند، لذا ویژگی هایی مانند تاریخ یا زمان، مبتنی بر تاریخ و زمان مرورگر و در واقع تاریخ و زمان سیستم عامل خواهند بود، مثالی برای ایجاد یک متن همراه تاریخ (در جاوا اسکریپت نیز مانند CSS می توان دستورات را به شکل یک فایل خارجی در صفحه وارد کرد، کدهای این مثال نیز از یک فایل خارجی در صفحه ایمپورت شده اند):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد یک پاراگراف در جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<script type="text/javascript" src="docwrite.js"></script>
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    text-align:justify;
    font-size:12px;
    direction:rtl;
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>

<hr>
کدهای این صفحه به صورت یک فایل خارجی ایمپورت شده است.
</body>
</html>
کد ایمپورت شده در صفحه:
document.write("کد جاوا اسکریپت، ایجاد یک پاراگراف و نمایش تاریخ:<br>");
document.write("<p>" + Date() + "</p>");
پیش نمایش
همان طور که اشاره شد، کدهای جاوا اسکریپت را می توان به صورت فایل خارجی نیز در صفحه ایمپورت کرد که در مثال بالا در قسمت src به صورت آدرس دهی نسبی مشخص است، برای کاهش حجم کلی صفحات وب و افزایش سرعت بارگذاری بهینه تر این است که دستورات جاوا اسکریپت را تا حد امکان در یک یا چند فایل تجمیع کرده و  بین تگ head قرار دهیم، البته در مواردی نیز ممکن است مجبور باشیم کدها را در انتهای صفحه یا در بخش دیگری درج کنیم، به طور مثال اگر فایل از سروری خارجی (دامنه ای به غیر از سایت اصلی) در صفحه بارگذاری شود، اختلال در بارگذاری آن فایل (به این دلیل که اغلب مرورگرها تا هنگام بارگذاری کامل فایل های js از پردازش ادامه صفحه خودداری می کنند) می تواند موجب تاخیر در بارگذاری کل صفحه شود و ممکن است مجبور باشیم اینگونه فایل ها را در انتهای صفحه قرار دهیم.
نکته: عبارت Date به کار رفته در کد بالا یک تابع درونی جاوا اسکریپت است (یعنی این تابع و ویژگی های آن از قبل در مفسر تعریف شده است)، از تابع Date برای موارد مربوط به تاریخ و زمان استفاده می شود (در آموزش های بعدی به صورت اختصاصی در این رابطه بیشتر خواهیم گفت).
در مطالب پیش رو گام به گام با مفاهیم، دستورات و قابلیت های این زبان آشنا خواهیم شد تا در نهایت به تسلط کافی برای نوشتن اسکریپت ها و برنامه های مورد نیازمان دست پیدا کنیم.
دسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» دستور switch و case در جاوا اسکریپت (JavaScript)
» عملگرها (Operators) در جاوا اسکریپت (JavaScript)
» کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
» متدهای کار با آرایه در جاوا اسکریپت (JavaScript)
» توابع (Functions) در جاوا اسکریپت (JavaScript)
commentنظرات (۸۵ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: mahdi
۰۷:۱۸ ۱۳۹۹/۰۲/۲۱
سلام استاد عزیز ، خیلی ممنون از راهنمایی ، انجامشون میدم، فکر میکنم همه این کارارو بلد باشم فقط WYSIWYG رو اصلا نشنیده بودم که سرچ کردم و فهمیدم چیه ، اینم وقت میزارم که کامل یادش بگیرم ، خیلی ممنون استاد عزیز و مهربان
نویسنده: mahdi
۲۲:۳۹ ۱۳۹۹/۰۲/۲۸
سلام استاد عزیز ، این درسته که با node.js دیگه نیازی به یادگیری php نخواهیم داشت؟
پاسخ: 
در تئوری بله، Node.js پلتفرمی است که با هدف پوشش نیازهای سمت سرور برای برنامه نویسان زبان جاوا اسکریپت معرفی شده اما در عمل توصیه می کنیم اگر قصد انتخاب این پلتفرم را دارید حتما یک زبان برنامه نویسی اختصاصی سمت سرور (نه صرفا PHP) را ابتدا حداقل در حد مقدمات یاد بگیرید، به تجربه مفاهیم عمیق وب با درگیر شدن با برنامه نویسی غیر پلتفرم محور بدست می آید، نکته دیگر اینکه هر کدام از موارد بالا می توانند در جای خود یا حتی در کنار هم کاربرد داشته باشند، به فرض Node.js در زمینه برنامه های مبتنی بر ورودی خروجی ممتد مانند گروه ها در اپلیکیشن های موبایل، چت روم های آنلاین، بازی سازی و... عملکرد ساده تر و سریع تری دارد اما در زمینه برنامه های نیازمند CPU مانند پردازش های پیچیده قدرت کمتری دارد یا در کار با دیتابیس تنوع متدهای آن در مقایسه با PHP یا زبان های سمت سرور دیگر که اکستنشن های اختصاصی دارند کمتر است، همچنین برای نصب و راه اندازی Node.js ممکن است مشکل پیدا کردن هاست وجود داشته باشد و پشتیبانی از آن در حال حاضر به وسعت PHP نیست.
در کل انتخاب یک زبان بستگی به برنامه ای دارد که می خواهید بسازید، هر دو این موارد در حال رشد هستند و توسعه دهنده گان سعی می کنند با بهبود ساختار و فرآیندها سهم بیشتری از کاربران را بدست بیاورند.
نویسنده: mahdi
۱۲:۰۵ ۱۳۹۹/۰۴/۲۲
سلام استاد عزیز و گرامی ، یه دفتر چه یادداشت با localstorage میخوام بنویسم ولی مشکل دارم،
testic.loxblog.com
دو تا سوال دارم ممنون میشم راهنماییم کنی ، اولی اینکه دلیت فقط یکی از آیتم ها رو به چه نحوی انجام بدم ، دکمشو گذاشتم ولی نمیدونم دقیقا چطوری باید عمل کنه و دوم اینکه میخوام اون یادداشتها توی بخش سمت چپی حتی وقتی صفحه رفرش میشه بمونن و دیده بشن تا زمانیکه دلیت بشن ، خیلی گشتم داخل نت ولی چیزی پیدا نکردم ، چیزایی هم که بود بغیر از جاوااسکریپت با فریمورکاش بود که من بلد نیستمشون ، ممنون میشم اگه وقتشو داری داخل همین وبلاگ برام درستش کنی که کداشو ببینمو بفهممشون
خیلی ممنون استاد ، امیدوارم سالمو سلامت باشی
پاسخ: 
ظاهرا بخش ویرایش قالب لوکس بلاگ دچار ایرادی است و کد قالب را کامل نمایش نمی دهد؟! در هر صورت ویرایش کد به نحوی که کارهای مد نظرتان را انجام دهد واقعا زمانبر است و کل ساختار باید مجدد پیاده سازی و کدنویسی شود که حداقل در کوتاه مدت میسر نیست، اما جهت راهنمایی در جاوا اسکریپت برای اینگونه موارد از متدهای زیرمجموعه آبجکت localStorage یا حافظه محلی (حافظه مرورگر کاربر) استفاده می کنند که شامل چهار متد اصلی به شرح زیر است:
متد setItem برای تنظیم یک آیتم به صورت کلید و مقدار آن، مثال:
localStorage.setItem('key', 'value');
متد getItem برای دریافت مقادیر آیتم مد نظر بر اساس کلید تنظیم شده، مثال:
let item = localStorage.getItem('key');
متد removeItem برای حذف آیتم مد نظر بر اساس کلید تنظیم شده، مثال:
localStorage.removeItem('key');
و در نهایت متد clear برای حذف کل آیتم ها صرف نظر از کلید آنها، مثال:
localStorage.clear();
با آگاهی از این متدها کار کنترل و استفاده از داده های ذخیره شده ساده می شود و با توجه به اینکه مقادیر ذخیره شده از این طریق حتی با بستن مرورگر و خاموش روشن کردن سیستم هم حذف نمی شوند در مراجعات بعدی نیز با داشتن key مد نظر می توانیم به مقادیر آن آیتم دسترسی داشته باشیم.
در نمونه کدهایتان همین مبنا استفاده شده است منتها ساختار ناقص است و دستورات با هم پیوستگی لازم را ندارند و باید مجدد بازنویسی شوند، به فرض برای تنظیم آیتم ها از عبارت اتفاقی به صورت زیر استفاده می شود:
localStorage.setItem(random,c);
اما این عبارت اتفاقی در هنگام فراخوانی توابع به فرض با onclick به کدها داده نمی شود تا کد تشخیص دهد کدام آیتم مد نظر کاربر است، یا برای نمایش مجدد آیتم ها می توانیم یک ریتم خاص برای ایجاد key داشته باشیم به فرض key-1، key-2 و... در هنگامی که کاربر مجدد به صفحه مراجعه می کند ابتدا وجود چنین آیتم هایی را بررسی و در صورت وجود نمایش دهیم، مثال:
let check = true;
let loop = 1;
while(check !== false){
if(localStorage.hasOwnProperty('key-' + loop){
//اين آيتم وجود دارد، ادامه حلقه
} else{
//اين آيتم وجود ندارد، پايان حلقه
check = false;
}

loop++;
}
پیشنهاد ما این است ابتدا یک دکمه طراحی و کارهای مد نظر را با همان دکمه پیاده سازی کنید تا با نحوه کار آشنا شوید، در کل خیلی پیچیده نیست اما زمانبر است، اطلاعات بیشتر:
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
نویسنده: mahdi
۱۴:۴۶ ۱۳۹۹/۰۴/۲۲
سلام استاد عزیز ، میتونید یه نمونه که فقط با جاوا اسکریپت کار شده نه با فریمورکاش بهم معرفی کنید ببینم؟ من هرچی گشتم پیدا نکردم
خیلی ممنون
پاسخ: 
این لینک ها را بررسی کنید:
https://developer.mozilla.org/en-US/docs/Web/API/Storage/removeItem

https://www.w3schools.com/jsref/api_storage.asp

https://stackoverflow.com/questions/61578576/removing-only-selected-list-item-from-local-storage-pure-js
نویسنده: mahdi
۱۹:۱۳ ۱۳۹۹/۰۴/۲۲
سلام استاد اگه براتون زحمتی نیست یه نگاه دیگه بهش بندازید ، الان ریموو ادیت درست هستن فقط برای نمایش کلیشون که وقتی رفرش میکنیم در صفحه باقی بمونن مشکل دارم ، حتی در صفحه هم میمونن ولی دیگه دکمه ادیت و دلیت از کار میفتن ، خیلی ممنون استاد عزیز
پاسخ: 
اگر به سورس کد دقت کنیم موقعی که بر روی دکمه save کلیک می کنیم برای دکمه های del و edit در رویداد onclick یک تابع تعریف می شود که یک سری عملیات در آن نوشته شده، به فرض:
rem.onclick = function(){
this.parentNode.remove()
localStorage.removeItem(localStorage.key(random))
}
اما مکانیزم نمایش آیتم ها پس از بستن پنجره مرورگر این قسمت را ندارد و صرفا در حلقه for هر چیزی که قبلا بوسیله c.outerHTML ذخیره شده باشد را در خروجی چاپ می کند و رویدادی به آنها نسبت نمی دهد، برای رفع مشکل باید موقع ایجاد div ها با زدن دکمه save به هر div یک id یکتا با شماره متناظر اختصاص دهیم به فرض edit-1، del-1 و... در هنگام چاپ موارد در حلقه for مجدد برای هر دکمه قسمت onclick در نظر بگیریم:
var selected;
let count = localStorage.length;
function sv(btn){

rem.innerHTML = "del"
rem.setAttribute("id", "del-" + count);
rem.onclick = function(){

let a = localStorage.setItem(random,c.outerHTML);
count++;
}else{
افزودن این حلقه بعد از حلقه for موجود:
let rem;
for(let i =0; i<localStorage.length; i++){
rem = document.getElementById('del-' + i);
if(rem != null){
rem.onclick = function(){
this.parentNode.remove();
}
}
}
البته این کدها کامل نیستند و باز مشکل شناسایی آیتم ها موجود در localStorage وجود دارد که باید ساختار را بر اساس راهنمایی یادداشت قبلی تنظیم کنید.
نویسنده: امیرحسین
۰۸:۱۹ ۱۳۹۹/۱۲/۱۰
سلام استاد وقت بخیر، من یه فرمی ساختم که
<form method="post" action="https://zagrosroom.com/instaBot/receiveData.php" enctype="multipart/form-data">
<input type="file" id="files" name="files">
<input type="submit" name="sender" value="ok">
</form>
حالت پیشفرضش هیچ فایلی انتخاب نشده، ولی میخوام با جاوا اسکریپت یکاری کنم که حالت پیشفرض یک فایلی انتخاب کنه، منظورم اینه که صفحه به محض اینکه لود شد خودش بیاد تو قسمت file chooser یه فایلی انتخاب کنه و خودش درجا دکمه سابمیت رو هم بزنه دقیقا میخوام کاری که curlFile تو پی اچ پی میکنه رو با جاوا اسکریپت انجام بدم و یه فایلی رو به یه سروری بفرستم با جاوا اسکریپت، چگونه ممکنه؟
پاسخ: 
تا آنجا که اطلاع داریم آپلود فایل به این شیوه از سمت کاربر به سرور با سیاست های امنیتی مرورگرها در تضاد است و امکانش اگر نه صفر حداقل با روش های معمول شدنی نیست، بحث curlFile متفاوت است چون در آنجا فایل از فضای وب فراخوانی می شود نه سیستم کاربر، با جاوا اسکریپت نهایت بتوانیم با متد submit و توابعی مانند setTimeout به صورت خودکار فرم را ارسال کنیم اما انتخاب فایل و اینکه از چه آدرسی باشد (مشخص نکرده اید) باید با باز شدن پنجره مرورگر صورت گیرد و به صورت خودکار شدنی نیست مگر اینکه سیستم کاربر هک شود و کنترل آن در دست باشد که به لحاظ اخلاقی و قانونی صحیح نیست.
نویسنده: mahdi
۱۲:۰۶ ۱۴۰۰/۰۲/۰۲
سلام استاد عزیز وقتتون بخیر ،
استاد عزیز میگن کار با window.innerHeight , width برای پرفورمنس بد هستش ؟
ولی اگر بخوایم وقتی سایز پنجره مثلا کمتر از 500 شد یک عمل روی بده و از سایز بزرگ تا همین 500 که مد نظر ماست هیچ کاری هم صورت نپذیره و فقط زمانی که به 500 رسید ، کاری که میخوام یک بار انجام میشه ، این بازم برای پرفورمنس بده ؟ منظورم اینه که در طی ریسایز شدن پنجره هیچ کاری انجام نمیدم و فقط زمانیکه به 500 رسید کارم یکبار انجام میشه ، خیلی ممنون استاد عزیز سلامت و موفق باشید
پاسخ: 
در استفاده از قابلیت های مبتنی بر ابعاد صفحه در کل چند قانون تجربی وجود دارد:
- استفاده از CSS و به فرض media screen بر JavaScript اولویت دارد، یعنی هر امکانی که بشود هم با CSS و هم JavaScript انجام داد گزینه اول در اولویت است.
- امکانات استانداردی که پردازش مستمر نداشته و تداخلی هم با سایر قابلیت های حین اجرای صفحه ندارند و صرفا یک لحظه اجرا شده و خاتمه پیدا می کنند معمولا برای رابط کاربری مشکل ساز نیستند و صرف اینکه کار با فلان متد برای Performance بد است یک بحث کلی است و نتیجه را در عمل باید دید.
- در استفاده از متدهای جاوا اسکریپتی بهترین حالت Cross Browser بودن یعنی نوشتن کدها یا انتخاب متدهایی است که در تمام مرورگرها یا حداقل در نسخه های جدید تمام مرورگرها کاربردی باشند.
این شرط ها را رعایت کنیم در کل از نظر فنی مشکلی برای در نظر گرفتن امکانات مبتنی بر ابعاد صفحه نمایش نیست.
نویسنده: mahdi
۱۵:۳۲ ۱۴۰۰/۰۲/۰۲
سلام ، استاد عزیز پردازش مستمر یعنی هر بار یه کاری صورت بگیره؟ اینکه هر بار یه شرط چک بشه پردازش مستمر نیست ؟
مثلا عرض مرورگر رو یه شرط گذاشتم که تا شد 500px یه کاری یه بار انجام شه ، این شرط هر لحظه چک میشه ولی خب هیچ کاری انجام نمیشه ، این چک کردن جزو پردازش مستمر نمیشه؟
پاسخ: 
منظور از پردازش مستمر یعنی هر فرآیندی که در حال استفاده از منابع سخت افزاری/نرم افزاری باشد به فرض افکت انیمیشنی در حال اجرا باشد یا هر چند ثانیه تابعی با متدهایی مانند setInterval فراخوانی شود، در خصوص عرض مرورگر اگر با متدهای ذاتی جاوا اسکریپت مانند addEventListener شرط را اختصاص داده باشید مشکلی نیست چون در مفسر بهینه شده و منابع را مستمر مصرف نمی کند، یعنی تا عرض مرورگر 500 نشده کد خاصی در حال پردازش نیست و فقط یک گوش به زنگ رویداد برای این اتفاق ثبت شده است.
نویسنده: mahdi
۰۹:۵۴ ۱۴۰۰/۰۳/۱۰
سلام استاد وقت بخیر،استاد عزیز من یه چارت با جاوااسکریپت نوشتم که سه تا نمودار میلیه ای و خطی و نقطه ای رو در بر میگیره یعنی میشه به این سه شکل ازش استفاده کرد، فقط اینو با کانواس ننوشتم با css نوشتم و تعداد عناصرش یه کم زیاد شده ولی واقعا خوشکل و مشتی شده ، میبینمش کیف میکنم :) فقط استاد سوالم اینه که این تعداد زیاد عناصر روی پرفرمنس تاثیر بدی داره؟ مثلا اگر با کانواس بنویسیم خب فقط یه تگ کانواس درون دام قرار میگیره ولی با این شکلی که من نوشتم هر چیزی که داخل نمودار میبینیم یک عنصر اچ تی ام ال یا svg هستش ولی خب این حتی تا ie9 هم درست کار میکنه
بنظرتون از لحاظ پرفرمنس بد هستش یا بشینم با کانوس بنویسمش؟
خیلی ممنون استاد عزیز
پاسخ: 
هم با روش Canvas و هم HTML، CSS و SVG می شود خروجی مشابه ایجاد کرد منتها همان طور که اشاره کردید با توجه به اینکه اطلاعات آبجکت های Canvas به محض ترسیم در جایی نگهداری نمی شوند از نظر Performance حداقل روی کاغذ بهتر است منتها معایبی هم دارد به فرض شکل SVG انعطاف پذیر نیست یا در DOM به آبجکت ها دسترسی نداریم و مواردی از این دست، در کل اگر برنامه نوشته شده به روش اول در یک سیستم معمولی به خوبی کار می کند استفاده از Canvas در اولویت نیست، شاید استفاده از این قابلیت برای پروژه های دارای عناصر گرافیکی خیلی زیاد مانند بازی های تحت وب گزینه مناسبی باشد، در کل در وب راه حل های مبتنی بر DOM در اولویت هستند.
نویسنده: mahdi
۰۹:۵۷ ۱۴۰۰/۰۳/۱۰
استاد وقتشو دارید امشب ببینیدش مثلا در حد نیم ساعت که وقتتونم گرفته نشه؟
پاسخ: 
در صورت آنلاین بودن حوالی ساعت 5:30 عصر پیام ارسال کنید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





9 × 3
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form علیرضا
در:
مفید و کاربردی مرسی
۱۴۰۰/۰۳/۳۱

form محمود
در:
سلام مهندس وقت بخیر دوباره به کمک شما نیاز پیدا کردم ، چگونه می توان استایل صوت به یک متن داد. به...
۱۴۰۰/۰۳/۳۰

form پرتو
در:
سلام استاد خسته نباشید قالبم درست شد خیلی ممنون یه خواهش دیگه هم ازتون داشتم اینکه یه بوردر برای تک به تک پست ها جداگانه...
۱۴۰۰/۰۳/۲۴

form بهنیا
در:
سلام خسته نباشید ببخشید چطوری میتونم برای خود وبسایتم یه لینک بسازم؟ کد خاصی داره؟
۱۴۰۰/۰۳/۲۴

form Raha
در:
سلام وقت بخیر چه جوری می تونم از دو تا function باهم استفاده کنم. مثلا میخوام توی مسیج باکس دوتا عدد دلخواه بدم...
۱۴۰۰/۰۳/۲۴

form رها
در:
سلام ممنون میشم اگه راهنماییم کنید من میخوام تو جاوا اسکریپت توی مسیج باکس بصورت اختیاری عدد بدم و جمع و تفریق انجام بشه. ...
۱۴۰۰/۰۳/۲۴

form محمد
در:
با عرض سلام و احترام مجدد پیرو کامنت قبلی که لطف کرده و توجه فرمودید آدرس سایت این هست: از توجه و راهنمایی‌های همیشگی...
۱۴۰۰/۰۳/۲۳

form محمد
در:
سلام وقت بخیر با سپاس از تیم محترم وبگو یک سوال داشتم از خدمتتون در عکسی که در آدرس با...
۱۴۰۰/۰۳/۲۲

form پرتو
در:
با سلام استاد من براتون ایمیل فرستادم لطفا ایمیل خود را چک کنید با تشکر
۱۴۰۰/۰۳/۲۱

form پرتو
در:
سلام خوبید خسته نباشید من یه کد قالبی دارم که میشه براتون بفرستم و شما تغییرش بدین من قالبم رو می خاستم اگه...
۱۴۰۰/۰۳/۲۰

form سید ارمیا حسینی
در:
سلام ببخشید عالی بود اما اگه می خواستم مثلا چیزی رو ایجاد کنم که مثلا کاربر بعد از ورود به صحفه 5 ثانیه بعد وارد...
۱۴۰۰/۰۳/۲۰

form الی
در:
سلام وقت بخیر من میخوام یه سایت طراحی کنم و در قسمت هدر یه گیف بذارم ولی هر کار می کنم گیف نمایش داده...
۱۴۰۰/۰۳/۱۸

form علیرضا حسینی
در:
دمتون گرم خسته نباشید خیلی عالی بود
۱۴۰۰/۰۳/۱۸

form حامدترابی
در:
سلام چند وقته که وبلاگ شهیدحسن ترابی گودرزی باز نمیشه ولی با vpn باز میشه. میشه راهنماییم کنید. ممنون میشم
۱۴۰۰/۰۳/۱۶

form mahdi
در:
سلام استاد این تابع در لوکال هم ایمیل ارسال میکنه هم فایل ضمیمه ، البته زمپ رو یه سری تغییرات باید داد و حساب ایمیل...
۱۴۰۰/۰۳/۱۲

form mahdi
در:
سلام وقت بخیر ، استاد عزیز اگر ما با تابع mail یه تابعی بنویسیم که در لوکال قابلیت ارسال هر نوع ایمیلی رو داشته باشه...
۱۴۰۰/۰۳/۱۲

form masood
در:
سلام وقتتون بخیر ببخشید من یک سوالی دارم اگر بخوایم تنظیماتی که برای id و class در نظر داریم رو تو یه...
۱۴۰۰/۰۳/۱۱

form mahdi
در:
استاد وقتشو دارید امشب ببینیدش مثلا در حد نیم ساعت که وقتتونم گرفته نشه؟
۱۴۰۰/۰۳/۱۰

form mahdi
در:
سلام استاد وقت بخیر،استاد عزیز من یه چارت با جاوااسکریپت نوشتم که سه تا نمودار میلیه ای و خطی و نقطه ای رو در بر...
۱۴۰۰/۰۳/۱۰

form پرتو
در:
وای من نمی تونم توی زمینه طراحی قالب های دیگ فعالیت کنم چون خیلی سختن فک نکنم بتونم اگر جایی می شناسید که قالب های...
۱۴۰۰/۰۳/۰۹

form پرتو
در:
سلام خسته نباشید شرمنده مزاحم شدم دوباره، می خاستم بپرسم می ارزه کسی وبلاگ در مورد قالب سازی بزنه یا اینکه نه نمی ارزه آخه...
۱۴۰۰/۰۳/۰۹

form یاس
در:
سلام میخواستم بدونم چجوری باید فایل متنی HTML دارای هایپرلینک را باز کند و محتوای آنرا بخواند و سپس هایپرلینک های آن را شناسایی کند...
۱۴۰۰/۰۳/۰۸

form sattar
در:
سلام، اون قسمتی که اعتبار سنجی ورود حروف فارسی هست مشکل داره یعنی کاربر رو اجبار به وارد کردن حروف فارسی میکنیم اما اگر مثلا...
۱۴۰۰/۰۳/۰۸

form mahdi
در:
سلام استاد ckeditor بهتره یا TinyMCE؟ من اینو ckeditor دیدم که راست چین چپ چین نداشت بعد استاد عزیز من یه چیزی رو...
۱۴۰۰/۰۳/۰۶

form پرتو
در:
ممنونم از شما که کدش رو دادید فقط یه سوال داشتم و اونم اینکه این کد رو در کدوم قسمت قالب قرار بدم و ایا...
۱۴۰۰/۰۳/۰۴

form mahdi
در:
سلام نه استاد عزیز نیازی نیست چون خودمم فکر میکنم لوگو رو باید از قبل مثلا با فتوشاپ آماده داشت و فقط میخواستم این امکانم...
۱۴۰۰/۰۳/۰۳

form پرتو
در:
سلام خواستم تشکر کنم از کدی که قبلا بهم داده بودید درست شد قالبم واقعا ممنونم ازتون یه چیز دیگه می خاستم بگم اینکه یه...
۱۴۰۰/۰۳/۰۳

form دانیال
در:
باسلام خیلی ممنون بابت مطالب عالیه سایتتون این مطلب هم مثل بقیه مطالب عالی بود
۱۴۰۰/۰۳/۰۳

form mahdi
در:
سلام استاد عزیز ، بله استاد اونطوری قرار میگیره وقتی تصویر از قبل مثلا با فتوشاپ شفاف شده باشه ، ولی اگر بخوایم یک عکس...
۱۴۰۰/۰۳/۰۳
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.