چهارشنبه ۱۲ بهمن ۱۴۰۱

Wednesday, February 1, 2023 GMT +3: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 مطالب بیشتر:
کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
عملگرها (Operators) در جاوا اسکریپت (JavaScript)
کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
متدهای کار با آرایه در جاوا اسکریپت (JavaScript)
توابع (Functions) در جاوا اسکریپت (JavaScript)
دیدگاه
more ۹۰ دیدگاه برای این مطلب ارسال شده است.
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 عصر پیام ارسال کنید.
mahdi
۱۰:۲۶ ۱۴۰۰/۰۵/۱۰
سلام وقت بخیر ، استاد عزیز تنها راه شناسایی caret یعنی موقعیتش getSelection و range هست ؟ شما هم ادیتوری که دارید مینویسید با استفاده از این دوتاست ؟
موفق باشی استاد عزیز
بیشتر برای دریافت یا تغییر متن انتخاب شده از این متد و متدهای زیرمجموعه (rangeCount، getRangeAt، createRange و...) استفاده می کنیم، ممکن است تنها متد نباشد اما ظاهرا سازگارترین متد موجود است:
https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection
محمود
۱۱:۲۰ ۱۴۰۰/۰۸/۰۷
سلام
سایتوتون را تا تونستم در قسمت سرچ گشتم ولی جایی برای موضوع خودم پیدا نکردم. فکر کردم همین جا بهتر است.
من برای برگشت به صفحه قبلی از کد زیر استفاده می کنم،
<a href="#" class="backe-bottun" onClick="history.go(-1)" title="برگشت"></a>
و یا
<a href="#" class="backe-bottun" onClick="history.go(-1)" title="برگشت"></a>
ولی متاسفانه صفحه های من دارای لینک لنگر
<li> <a style="color: #ff00ff;" href="#گفتار1">گفتار 1 ساز و کار دستگاه تنفس در انسان</a></li>
به بخش های مختلف با ای دی هایی که تعریف کردم هستند و وقتی با کلیک روی لنگرها به بخش های مختلف صفحه می روم دیگر دکمه برگشت کار نمی کند . یعنی به صفحل قبل نمی رود و بخش های داخل صفحه میرود / لطفن اگر راه حلی است که به صفحه قبل برگردد راهنایی کنید. متشکرم. البته حتی به جا -1 از -4 که استفاده می کنم کد کار نمی کند.
متاسفانه متد history.go خیلی قدرت مانور ندارد و اگر می خواهید کلیک بر روی لنگرها تاثیری در دکمه بازگشت نداشته باشد می توانید از متد document.referrer استفاده کنید، مثال:
<script>
function myReferrerGo(){
window.location.href = document.referrer;
}
</script>
<a href="#" onclick="myReferrerGo();" title="prev">prev</a>
تفاوت این روش در این است که صفحه قبلی مجدد بارگذاری می شود، همچنین صفحه قبلی می تواند ارجاع از سایت دیگری باشد و در این صورت دکمه بازگشت کاربر را به سایت اولیه هدایت می کند.
سینا
۰۴:۳۴ ۱۴۰۱/۱۰/۲۱
با سلام و خسته نباشید
من یه صفحه دارم مثلا اول یه متنی رو echo می کنم
echo $text
این متن نشون داده میشه بعد یه textarea هم دارم که میخوام یه دکمه باشه که وقتی روش کلیک می کنم مقدار
$text
رو وارد کنه
با تشکر فراوان
برای دریافت متن چاپ شده با PHP و تنظیم در تگ textarea می توانیم JavaScript را با PHP مشابه نمونه زیر ترکیب کنیم:
<?php
$text = 'your text';
echo '<span id="block-id">' . $text . '</span>';
?>
<script>
function getSetText(block_id, area_id){
let block_elm = document.getElementById(block_id);
let area_elm = document.getElementById(area_id);
area_elm.innerHTML = block_elm.innerText;
}
</script>
<textarea id="area-id"></textarea>
<button onclick="getSetText('block-id', 'area-id')">Click</button>
سینا
۰۶:۱۷ ۱۴۰۱/۱۰/۲۲
با تشکر از شما بخاطر پاسخ قبلی بسیار از لطف شما سپاسگزارم
شرمنده یه سوال دیگه هم داشتم راهی وجود داره موقع export کردن یک جدول از توی دیتابیس mysql که مثلا بگیم از این شناسه تا اون شناسه میخواهم اکسپورت صورت بگیره query و یا تنظیم جدولها موقع export کردن!
چون وقتی اینکارو میخوام انجام بدم اگه جدول اطلاعاتش زیاد باشه به سرور فشار میاد و من همیشه یه مقداری از داده ها رو میخوام export کنم
هر چی توی نت گشتم چیزی پیدا نکردم!
با تشکر فراوان
در phpMyAdmin برای export ردیف های خاص باید از حالت جدول به جدول استفاده کنیم، یعنی کل دیتابیس را خروجی نگیریم بلکه وارد یک جدول شده و بر روی export کلیک کنیم، سپس از قسمت Export Method گزینه Custom - display all possible options را انتخاب و با تنظیم قسمت های Number of rows و Row to begin at در قسمت Dump some rows می توانیم تعداد ردیف ها و نقطه شروع را مشخص کنیم.
سینا
۰۶:۳۲ ۱۴۰۱/۱۰/۲۲
شرمنده تورو خدا ببخشید الان یه سوال دیگه و یه مشکل دیگه هم دارم ممنون میشم راهنمایی کنید
یه قسمت از سایتم مطالب رو از وبلاگها می گیره و بصورت خودکار میذاره بعد چون در لحظه ممکنه ده تا مطلب رو کپی کنه زمان ثبت همه مطالب باهم تقریبا یکی است که بصورت mktime ذخیره میشه من میخواهم زمان ثبت هر مطلب به مقداری که تعیین می کنم با هم فرق داشته باشه یعنی این مطلب مثلا یک دقیقه با مطلب قبلی و مطلب بعدی بازم یک دقیقه با مطلب قبلیش و بازم تا بی نهایت، نمی خوام زمان انتشار مطالب با هم برابر باشه میخوام با هم به تعدادی که تعیین میکنم با هم فرق داشته باشه.
مثلا الان زمان
time()
است و مطالب با این زمان ثبت میشن. میخواهم با هم فرق داشته باشند. مثلا 1 ساعت که معادل 3600 است.
امیدوارم منظورم رو واضح بیان کرده باشم.
با تشکر فراوان
ایجاد این حالت به سادگی ممکن نیست و برای اعمال آن باید کد نویسی کنید، اگر تفاوت ها در حد چند ثانیه باشد می توانید از تابع sleep استفاده کنید اما برای ایجاد تفاوت در حد دقیقه باید دستوراتی بنویسید که به فرض در حلقه ایجاد محتوا برای هر مطلب تاریخ آخرین مطلب فعلی را استخراج و با میزان زمان دلخواه اضافه و سپس مطلب جدید را ذخیره کند.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
6 × 1
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
علی رستگار
سلام خسته نباشید با تشکر از سایت خوبتون. من میخوام منوی سایت رو به صورت کامل از دید گوگل مخفی کنم، در حال حاضر...
۱۴۰۱/۱۱/۱۱

m.b
با سلام و خسته نباشید من یک سوال دارم . تو فرم لاگین بعد از لاگین کردن کاربر میخوام تاریخ و ساعت آخرین زمان...
۱۴۰۱/۱۱/۰۶

سینا
با سلام و درود من چهار تا داده به شیوه زیر دارم میخوام با php کوچکترین تاریخ هر دو کاربر ۲ و ۳...
۱۴۰۱/۱۱/۰۶

امیرحسین رستمی
سلام وقت بخیر یه همچین ارایه ای داریم میخوام همه حالت های حروفو بدست بیارم مثل بازی کلماتیک که هر حرف دوبار تکرار نشه...
۱۴۰۱/۱۱/۰۵

Ⲥⲅⲇⲍⲩ ⲃⲟⲩ
اینم لینک مستقیمش حتی لطفا خودتون با این لینک یا هر لینک آهنگ درست کنید بزارین ببینم
۱۴۰۱/۱۱/۰۵

Ⲥⲅⲇⲍⲩ ⲃⲟⲩ
هر چی میزارم رو پخش خودکار ولی تا وقتی روش کلیک نکنی پخش نمیشه چرا؟؟ رو اتو پلیِ ! هزارتا راهو روش رو رفتم جواب...
۱۴۰۱/۱۱/۰۵

نور
سلام این کد ابتدای وبلاگه منه چطور میتونم به آدرس لینکی که توش میشه تغییرات کد رنگ ها رو انجام داد دسترسی پیدا...
۱۴۰۱/۱۱/۰۴

پــــرتو
سلام خسته نباشید شرمنده دوباره مزاحم میشم نه انگار متوجه سوالم نشدین ، عه جناب منظورم این هستش که یه کدی دارم و میخاستم ویرایشش...
۱۴۰۱/۱۱/۰۳

پــــرتو
سلام جناب خسته نباشید شاید این سوالم تکراری باشه ولی خب راستش نمیدونم سوالمو کجا ثبت کردم واسه همین دوباره می پرسم ببخشید...
۱۴۰۱/۱۱/۰۳

پژمان
با سلام من یک سوال دارم می خواستم ببینم چطور میشه وقتی صفحات سایت عوض می شن هدر و فوتر ثابت بمونه و فقط محتویات...
۱۴۰۱/۱۱/۰۱

سینا
با سلام و با تشکر از شما از لطف و محبت شما بسیار ممنون و سپاسگزارم ببخشید این چند خیلی پیام دادم و مزاحم...
۱۴۰۱/۱۰/۲۹

سینا
با سلام و درود من یه کد نوشتم که برای id های پشت سر هم جواب میده و زمان رو برام تغییر میده وقتی...
۱۴۰۱/۱۰/۲۹

سینا
باسلام مجدد و درود برشما واسه مطالب جدید راحته آخرین مطلب رو با کوئری زدن توی دیتابیس پیدا کنم و برای مطلب بعدش آپدیت...
۱۴۰۱/۱۰/۲۸

سینا
با تشکر از شما استاد بزرگوارم اینو شب تست می کنم من واسه آپدیت کردن تایم لازم دارم توضیح کامل به اینصورت: واسه...
۱۴۰۱/۱۰/۲۷

سینا
با سلام و درود بر شما راهی هست توی mysql من داده های یک جدول رو که عددی هستند به صورت زیر آپدیت کنم!...
۱۴۰۱/۱۰/۲۶

علی داوری
سلام. چطور از فایل های داخلی کامپیوتر برای آیکون سایت استفاده کنیم؟ مسیر عکسو تو href کپی میکنم اتفاقی نمیفته
۱۴۰۱/۱۰/۲۴

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

سینا
با تشکر از شما بخاطر پاسخ قبلی بسیار از لطف شما سپاسگزارم شرمنده یه سوال دیگه هم داشتم راهی وجود داره موقع export کردن...
۱۴۰۱/۱۰/۲۲

سینا
با سلام و خسته نباشید من یه صفحه دارم مثلا اول یه متنی رو echo می کنم رو وارد کنه با...
۱۴۰۱/۱۰/۲۱

ali
میخواستم حالت تصویر بدم بدون استفاده از list_style_image روشی هست بشه طراحی کرد
۱۴۰۱/۱۰/۲۰

محمد جواد
با سلام ... من میخوام اطلاعات محصولی که داخل دیتابیس mysql هست رو بجای ستونی ، ردیفی نمایش بدم برای نمایشش چطوری باید کد...
۱۴۰۱/۰۹/۲۷

کاربر
سلام هر کاری کردم جواب نداد
۱۴۰۱/۰۹/۲۳

پارسا
ببخشید چطور سایز هاشون و اندازه هاشون رو بزرگ تر کنیم ؟
۱۴۰۱/۰۹/۲۱

ابراهیم جهانگیری
حدود سه روز بود دنبال این مطلب بودم . ممنون از شما
۱۴۰۱/۰۹/۱۶

پــــرتو
سلام خسته نباشید ببخشید اگر بخایم همین منو رو بصورت عمودی بخایم انجامش بدیم باید از چه کدی استفاده کنیم و اگر بخایم برای قالبمون...
۱۴۰۱/۰۹/۱۵

میثم
بسیار سپاسگزار و ممنونم. واقعا عالی بود.
۱۴۰۱/۰۹/۱۵

میثم
ممنونم خیلی عالی بود. کلی محاسبات ریاضی انجام دادم :) اخرش یه شرط دیگه میخواست! حالا یه سوال: در حال حاضر بعد از...
۱۴۰۱/۰۹/۱۳
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.