آموزش برنامه نویسی وب و مهارتهای مرتبط
پنجشنبه ۰۴ اردیبهشت ۱۴۰۴
Thursday, April 24, 2025 GMT +3:30
Thursday, April 24, 2025 GMT +3:30
شروعی بر برنامه نویسی جاوا اسکریپت (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>- جاوا اسکریپت زبانی سمت کاربر (Client-side) است یعنی تنها در مرورگر کاربران قابل پردازش و اجرا می باشد، این عبارت در مقابل زبان های سمت سرور (Server-side) استفاده می شود که برای اجرا نیاز به یک سرور آنلاین یا لوکال دارند (مانند زبان برنامه نویسی PHP).
- نوع داده در جاوا اسکریپت می تواند به سه صورت عددی (Int) به فرض 1، رشته ای (String) به فرض book یا بولین (Boolean) یعنی به صورت true یا false باشد، همچنین در صورتی که یک منبع تعریف شده اما مقداری نداشته باشد به صورت undefined و در صورتی که مقدار آن به هر دلیل خالی باشد به صورت null در نظر گرفته می شود، مثال:
<script type="text/javascript">
var test;
alert(test);
</script><script type="text/javascript">
var test = null;
alert(test);
</script>چند مثال از کاربرد جاوا اسکریپت در صفحات وب
برای کسب آشنایی اولیه و شروع عملی آموزش ها بد نیست چند مثال ساده از قابلیت های اسکریپت نویسی این زبان در صفحات وب را با هم بررسی کنیم، در زیر کدی را جهت نمایش پیام هشدار در پنجره مرورگر درج کرده ایم که به کمک متد 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);مثالی دیگر با جاوا اسکریپت
همانطور که گفتیم، کدهای جاوا اسکریپت توسط مفسر مرورگر اجرا یا به عبارت صحیحتر تفسیر (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
برچسب ها: HTML - JavaScript
قبلی »
مطالب بیشتر:تعریف و استفاده از متغیر (Variable) در جاوا اسکریپت (JavaScript)
متدهای کار با آرایه در جاوا اسکریپت (JavaScript)
حلقه for و while در جاوا اسکریپت (JavaScript)
دستور switch و case در جاوا اسکریپت (JavaScript)
کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
دیدگاه
۹۰ دیدگاه برای این مطلب ارسال شده است. چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.سینا
۰۶:۳۲ ۱۴۰۱/۱۰/۲۲
شرمنده تورو خدا ببخشید الان یه سوال دیگه و یه مشکل دیگه هم دارم ممنون میشم راهنمایی کنید
یه قسمت از سایتم مطالب رو از وبلاگها می گیره و بصورت خودکار میذاره بعد چون در لحظه ممکنه ده تا مطلب رو کپی کنه زمان ثبت همه مطالب باهم تقریبا یکی است که بصورت mktime ذخیره میشه من میخواهم زمان ثبت هر مطلب به مقداری که تعیین می کنم با هم فرق داشته باشه یعنی این مطلب مثلا یک دقیقه با مطلب قبلی و مطلب بعدی بازم یک دقیقه با مطلب قبلیش و بازم تا بی نهایت، نمی خوام زمان انتشار مطالب با هم برابر باشه میخوام با هم به تعدادی که تعیین میکنم با هم فرق داشته باشه.
مثلا الان زمان
امیدوارم منظورم رو واضح بیان کرده باشم.
با تشکر فراوان
یه قسمت از سایتم مطالب رو از وبلاگها می گیره و بصورت خودکار میذاره بعد چون در لحظه ممکنه ده تا مطلب رو کپی کنه زمان ثبت همه مطالب باهم تقریبا یکی است که بصورت mktime ذخیره میشه من میخواهم زمان ثبت هر مطلب به مقداری که تعیین می کنم با هم فرق داشته باشه یعنی این مطلب مثلا یک دقیقه با مطلب قبلی و مطلب بعدی بازم یک دقیقه با مطلب قبلیش و بازم تا بی نهایت، نمی خوام زمان انتشار مطالب با هم برابر باشه میخوام با هم به تعدادی که تعیین میکنم با هم فرق داشته باشه.
مثلا الان زمان
time()امیدوارم منظورم رو واضح بیان کرده باشم.
با تشکر فراوان
ایجاد این حالت به سادگی ممکن نیست و برای اعمال آن باید کد نویسی کنید، اگر تفاوت ها در حد چند ثانیه باشد می توانید از تابع sleep استفاده کنید اما برای ایجاد تفاوت در حد دقیقه باید دستوراتی بنویسید که به فرض در حلقه ایجاد محتوا برای هر مطلب تاریخ آخرین مطلب فعلی را استخراج و با میزان زمان دلخواه اضافه و سپس مطلب جدید را ذخیره کند.
سینا
۰۶:۱۷ ۱۴۰۱/۱۰/۲۲
با تشکر از شما بخاطر پاسخ قبلی بسیار از لطف شما سپاسگزارم
شرمنده یه سوال دیگه هم داشتم راهی وجود داره موقع export کردن یک جدول از توی دیتابیس mysql که مثلا بگیم از این شناسه تا اون شناسه میخواهم اکسپورت صورت بگیره query و یا تنظیم جدولها موقع export کردن!
چون وقتی اینکارو میخوام انجام بدم اگه جدول اطلاعاتش زیاد باشه به سرور فشار میاد و من همیشه یه مقداری از داده ها رو میخوام export کنم
هر چی توی نت گشتم چیزی پیدا نکردم!
با تشکر فراوان
شرمنده یه سوال دیگه هم داشتم راهی وجود داره موقع 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 می توانیم تعداد ردیف ها و نقطه شروع را مشخص کنیم.
سینا
۰۴:۳۴ ۱۴۰۱/۱۰/۲۱
با سلام و خسته نباشید
من یه صفحه دارم مثلا اول یه متنی رو echo می کنم
با تشکر فراوان
من یه صفحه دارم مثلا اول یه متنی رو echo می کنم
echo $text$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>محمود
۱۱:۲۰ ۱۴۰۰/۰۸/۰۷
سلام
سایتوتون را تا تونستم در قسمت سرچ گشتم ولی جایی برای موضوع خودم پیدا نکردم. فکر کردم همین جا بهتر است.
من برای برگشت به صفحه قبلی از کد زیر استفاده می کنم،
سایتوتون را تا تونستم در قسمت سرچ گشتم ولی جایی برای موضوع خودم پیدا نکردم. فکر کردم همین جا بهتر است.
من برای برگشت به صفحه قبلی از کد زیر استفاده می کنم،
<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>متاسفانه متد history.go خیلی قدرت مانور ندارد و اگر می خواهید کلیک بر روی لنگرها تاثیری در دکمه بازگشت نداشته باشد می توانید از متد document.referrer استفاده کنید، مثال:
<script>
function myReferrerGo(){
window.location.href = document.referrer;
}
</script>
<a href="#" onclick="myReferrerGo();" title="prev">prev</a>mahdi
۱۰:۲۶ ۱۴۰۰/۰۵/۱۰
سلام وقت بخیر ، استاد عزیز تنها راه شناسایی caret یعنی موقعیتش getSelection و range هست ؟ شما هم ادیتوری که دارید مینویسید با استفاده از این دوتاست ؟
موفق باشی استاد عزیز
موفق باشی استاد عزیز
بیشتر برای دریافت یا تغییر متن انتخاب شده از این متد و متدهای زیرمجموعه (rangeCount، getRangeAt، createRange و...) استفاده می کنیم، ممکن است تنها متد نباشد اما ظاهرا سازگارترین متد موجود است:
https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelectionmahdi
۰۹:۵۷ ۱۴۰۰/۰۳/۱۰
استاد وقتشو دارید امشب ببینیدش مثلا در حد نیم ساعت که وقتتونم گرفته نشه؟
در صورت آنلاین بودن حوالی ساعت 5:30 عصر پیام ارسال کنید.
mahdi
۰۹:۵۴ ۱۴۰۰/۰۳/۱۰
سلام استاد وقت بخیر،استاد عزیز من یه چارت با جاوااسکریپت نوشتم که سه تا نمودار میلیه ای و خطی و نقطه ای رو در بر میگیره یعنی میشه به این سه شکل ازش استفاده کرد، فقط اینو با کانواس ننوشتم با css نوشتم و تعداد عناصرش یه کم زیاد شده ولی واقعا خوشکل و مشتی شده ، میبینمش کیف میکنم :) فقط استاد سوالم اینه که این تعداد زیاد عناصر روی پرفرمنس تاثیر بدی داره؟ مثلا اگر با کانواس بنویسیم خب فقط یه تگ کانواس درون دام قرار میگیره ولی با این شکلی که من نوشتم هر چیزی که داخل نمودار میبینیم یک عنصر اچ تی ام ال یا svg هستش ولی خب این حتی تا ie9 هم درست کار میکنه
بنظرتون از لحاظ پرفرمنس بد هستش یا بشینم با کانوس بنویسمش؟
خیلی ممنون استاد عزیز
بنظرتون از لحاظ پرفرمنس بد هستش یا بشینم با کانوس بنویسمش؟
خیلی ممنون استاد عزیز
هم با روش Canvas و هم HTML، CSS و SVG می شود خروجی مشابه ایجاد کرد منتها همان طور که اشاره کردید با توجه به اینکه اطلاعات آبجکت های Canvas به محض ترسیم در جایی نگهداری نمی شوند از نظر Performance حداقل روی کاغذ بهتر است منتها معایبی هم دارد به فرض شکل SVG انعطاف پذیر نیست یا در DOM به آبجکت ها دسترسی نداریم و مواردی از این دست، در کل اگر برنامه نوشته شده به روش اول در یک سیستم معمولی به خوبی کار می کند استفاده از Canvas در اولویت نیست، شاید استفاده از این قابلیت برای پروژه های دارای عناصر گرافیکی خیلی زیاد مانند بازی های تحت وب گزینه مناسبی باشد، در کل در وب راه حل های مبتنی بر DOM در اولویت هستند.
mahdi
۱۵:۳۲ ۱۴۰۰/۰۲/۰۲
سلام ، استاد عزیز پردازش مستمر یعنی هر بار یه کاری صورت بگیره؟ اینکه هر بار یه شرط چک بشه پردازش مستمر نیست ؟
مثلا عرض مرورگر رو یه شرط گذاشتم که تا شد 500px یه کاری یه بار انجام شه ، این شرط هر لحظه چک میشه ولی خب هیچ کاری انجام نمیشه ، این چک کردن جزو پردازش مستمر نمیشه؟
مثلا عرض مرورگر رو یه شرط گذاشتم که تا شد 500px یه کاری یه بار انجام شه ، این شرط هر لحظه چک میشه ولی خب هیچ کاری انجام نمیشه ، این چک کردن جزو پردازش مستمر نمیشه؟
منظور از پردازش مستمر یعنی هر فرآیندی که در حال استفاده از منابع سخت افزاری/نرم افزاری باشد به فرض افکت انیمیشنی در حال اجرا باشد یا هر چند ثانیه تابعی با متدهایی مانند setInterval فراخوانی شود، در خصوص عرض مرورگر اگر با متدهای ذاتی جاوا اسکریپت مانند addEventListener شرط را اختصاص داده باشید مشکلی نیست چون در مفسر بهینه شده و منابع را مستمر مصرف نمی کند، یعنی تا عرض مرورگر 500 نشده کد خاصی در حال پردازش نیست و فقط یک گوش به زنگ رویداد برای این اتفاق ثبت شده است.
mahdi
۱۲:۰۶ ۱۴۰۰/۰۲/۰۲
سلام استاد عزیز وقتتون بخیر ،
استاد عزیز میگن کار با window.innerHeight , width برای پرفورمنس بد هستش ؟
ولی اگر بخوایم وقتی سایز پنجره مثلا کمتر از 500 شد یک عمل روی بده و از سایز بزرگ تا همین 500 که مد نظر ماست هیچ کاری هم صورت نپذیره و فقط زمانی که به 500 رسید ، کاری که میخوام یک بار انجام میشه ، این بازم برای پرفورمنس بده ؟ منظورم اینه که در طی ریسایز شدن پنجره هیچ کاری انجام نمیدم و فقط زمانیکه به 500 رسید کارم یکبار انجام میشه ، خیلی ممنون استاد عزیز سلامت و موفق باشید
استاد عزیز میگن کار با window.innerHeight , width برای پرفورمنس بد هستش ؟
ولی اگر بخوایم وقتی سایز پنجره مثلا کمتر از 500 شد یک عمل روی بده و از سایز بزرگ تا همین 500 که مد نظر ماست هیچ کاری هم صورت نپذیره و فقط زمانی که به 500 رسید ، کاری که میخوام یک بار انجام میشه ، این بازم برای پرفورمنس بده ؟ منظورم اینه که در طی ریسایز شدن پنجره هیچ کاری انجام نمیدم و فقط زمانیکه به 500 رسید کارم یکبار انجام میشه ، خیلی ممنون استاد عزیز سلامت و موفق باشید
در استفاده از قابلیت های مبتنی بر ابعاد صفحه در کل چند قانون تجربی وجود دارد:
- استفاده از CSS و به فرض media screen بر JavaScript اولویت دارد، یعنی هر امکانی که بشود هم با CSS و هم JavaScript انجام داد گزینه اول در اولویت است.
- امکانات استانداردی که پردازش مستمر نداشته و تداخلی هم با سایر قابلیت های حین اجرای صفحه ندارند و صرفا یک لحظه اجرا شده و خاتمه پیدا می کنند معمولا برای رابط کاربری مشکل ساز نیستند و صرف اینکه کار با فلان متد برای Performance بد است یک بحث کلی است و نتیجه را در عمل باید دید.
- در استفاده از متدهای جاوا اسکریپتی بهترین حالت Cross Browser بودن یعنی نوشتن کدها یا انتخاب متدهایی است که در تمام مرورگرها یا حداقل در نسخه های جدید تمام مرورگرها کاربردی باشند.
این شرط ها را رعایت کنیم در کل از نظر فنی مشکلی برای در نظر گرفتن امکانات مبتنی بر ابعاد صفحه نمایش نیست.
- استفاده از CSS و به فرض media screen بر JavaScript اولویت دارد، یعنی هر امکانی که بشود هم با CSS و هم JavaScript انجام داد گزینه اول در اولویت است.
- امکانات استانداردی که پردازش مستمر نداشته و تداخلی هم با سایر قابلیت های حین اجرای صفحه ندارند و صرفا یک لحظه اجرا شده و خاتمه پیدا می کنند معمولا برای رابط کاربری مشکل ساز نیستند و صرف اینکه کار با فلان متد برای Performance بد است یک بحث کلی است و نتیجه را در عمل باید دید.
- در استفاده از متدهای جاوا اسکریپتی بهترین حالت Cross Browser بودن یعنی نوشتن کدها یا انتخاب متدهایی است که در تمام مرورگرها یا حداقل در نسخه های جدید تمام مرورگرها کاربردی باشند.
این شرط ها را رعایت کنیم در کل از نظر فنی مشکلی برای در نظر گرفتن امکانات مبتنی بر ابعاد صفحه نمایش نیست.
امیرحسین
۰۸:۱۹ ۱۳۹۹/۱۲/۱۰
سلام استاد وقت بخیر، من یه فرمی ساختم که
<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>تا آنجا که اطلاع داریم آپلود فایل به این شیوه از سمت کاربر به سرور با سیاست های امنیتی مرورگرها در تضاد است و امکانش اگر نه صفر حداقل با روش های معمول شدنی نیست، بحث curlFile متفاوت است چون در آنجا فایل از فضای وب فراخوانی می شود نه سیستم کاربر، با جاوا اسکریپت نهایت بتوانیم با متد submit و توابعی مانند setTimeout به صورت خودکار فرم را ارسال کنیم اما انتخاب فایل و اینکه از چه آدرسی باشد (مشخص نکرده اید) باید با باز شدن پنجره مرورگر صورت گیرد و به صورت خودکار شدنی نیست مگر اینکه سیستم کاربر هک شود و کنترل آن در دست باشد که به لحاظ اخلاقی و قانونی صحیح نیست.
mahdi
۱۹:۱۳ ۱۳۹۹/۰۴/۲۲
سلام استاد اگه براتون زحمتی نیست یه نگاه دیگه بهش بندازید ، الان ریموو ادیت درست هستن فقط برای نمایش کلیشون که وقتی رفرش میکنیم در صفحه باقی بمونن مشکل دارم ، حتی در صفحه هم میمونن ولی دیگه دکمه ادیت و دلیت از کار میفتن ، خیلی ممنون استاد عزیز
اگر به سورس کد دقت کنیم موقعی که بر روی دکمه save کلیک می کنیم برای دکمه های del و edit در رویداد onclick یک تابع تعریف می شود که یک سری عملیات در آن نوشته شده، به فرض:
rem.onclick = function(){
this.parentNode.remove()
localStorage.removeItem(localStorage.key(random))
}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{let rem;
for(let i =0; i<localStorage.length; i++){
rem = document.getElementById('del-' + i);
if(rem != null){
rem.onclick = function(){
this.parentNode.remove();
}
}
}mahdi
۱۴:۴۶ ۱۳۹۹/۰۴/۲۲
سلام استاد عزیز ، میتونید یه نمونه که فقط با جاوا اسکریپت کار شده نه با فریمورکاش بهم معرفی کنید ببینم؟ من هرچی گشتم پیدا نکردم
خیلی ممنون
خیلی ممنون
این لینک ها را بررسی کنید:
https://developer.mozilla.org/en-US/docs/Web/API/Storage/removeItemhttps://www.w3schools.com/jsref/api_storage.asphttps://stackoverflow.com/questions/61578576/removing-only-selected-list-item-from-local-storage-pure-jsmahdi
۱۲:۰۵ ۱۳۹۹/۰۴/۲۲
سلام استاد عزیز و گرامی ، یه دفتر چه یادداشت با localstorage میخوام بنویسم ولی مشکل دارم،
خیلی ممنون استاد ، امیدوارم سالمو سلامت باشی
testic.loxblog.comخیلی ممنون استاد ، امیدوارم سالمو سلامت باشی
ظاهرا بخش ویرایش قالب لوکس بلاگ دچار ایرادی است و کد قالب را کامل نمایش نمی دهد؟! در هر صورت ویرایش کد به نحوی که کارهای مد نظرتان را انجام دهد واقعا زمانبر است و کل ساختار باید مجدد پیاده سازی و کدنویسی شود که حداقل در کوتاه مدت میسر نیست، اما جهت راهنمایی در جاوا اسکریپت برای اینگونه موارد از متدهای زیرمجموعه آبجکت localStorage یا حافظه محلی (حافظه مرورگر کاربر) استفاده می کنند که شامل چهار متد اصلی به شرح زیر است:
متد setItem برای تنظیم یک آیتم به صورت کلید و مقدار آن، مثال:
در نمونه کدهایتان همین مبنا استفاده شده است منتها ساختار ناقص است و دستورات با هم پیوستگی لازم را ندارند و باید مجدد بازنویسی شوند، به فرض برای تنظیم آیتم ها از عبارت اتفاقی به صورت زیر استفاده می شود:
متد setItem برای تنظیم یک آیتم به صورت کلید و مقدار آن، مثال:
localStorage.setItem('key', 'value');let item = localStorage.getItem('key');localStorage.removeItem('key');localStorage.clear();در نمونه کدهایتان همین مبنا استفاده شده است منتها ساختار ناقص است و دستورات با هم پیوستگی لازم را ندارند و باید مجدد بازنویسی شوند، به فرض برای تنظیم آیتم ها از عبارت اتفاقی به صورت زیر استفاده می شود:
localStorage.setItem(random,c);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/localStoragemahdi
۲۲:۳۹ ۱۳۹۹/۰۲/۲۸
سلام استاد عزیز ، این درسته که با node.js دیگه نیازی به یادگیری php نخواهیم داشت؟
در تئوری بله، Node.js پلتفرمی است که با هدف پوشش نیازهای سمت سرور برای برنامه نویسان زبان جاوا اسکریپت معرفی شده اما در عمل توصیه می کنیم اگر قصد انتخاب این پلتفرم را دارید حتما یک زبان برنامه نویسی اختصاصی سمت سرور (نه صرفا PHP) را ابتدا حداقل در حد مقدمات یاد بگیرید، به تجربه مفاهیم عمیق وب با درگیر شدن با برنامه نویسی غیر پلتفرم محور بدست می آید، نکته دیگر اینکه هر کدام از موارد بالا می توانند در جای خود یا حتی در کنار هم کاربرد داشته باشند، به فرض Node.js در زمینه برنامه های مبتنی بر ورودی خروجی ممتد مانند گروه ها در اپلیکیشن های موبایل، چت روم های آنلاین، بازی سازی و... عملکرد ساده تر و سریع تری دارد اما در زمینه برنامه های نیازمند CPU مانند پردازش های پیچیده قدرت کمتری دارد یا در کار با دیتابیس تنوع متدهای آن در مقایسه با PHP یا زبان های سمت سرور دیگر که اکستنشن های اختصاصی دارند کمتر است، همچنین برای نصب و راه اندازی Node.js ممکن است مشکل پیدا کردن هاست وجود داشته باشد و پشتیبانی از آن در حال حاضر به وسعت PHP نیست.
در کل انتخاب یک زبان بستگی به برنامه ای دارد که می خواهید بسازید، هر دو این موارد در حال رشد هستند و توسعه دهنده گان سعی می کنند با بهبود ساختار و فرآیندها سهم بیشتری از کاربران را بدست بیاورند.
در کل انتخاب یک زبان بستگی به برنامه ای دارد که می خواهید بسازید، هر دو این موارد در حال رشد هستند و توسعه دهنده گان سعی می کنند با بهبود ساختار و فرآیندها سهم بیشتری از کاربران را بدست بیاورند.
mahdi
۰۷:۱۸ ۱۳۹۹/۰۲/۲۱
سلام استاد عزیز ، خیلی ممنون از راهنمایی ، انجامشون میدم، فکر میکنم همه این کارارو بلد باشم فقط WYSIWYG رو اصلا نشنیده بودم که سرچ کردم و فهمیدم چیه ، اینم وقت میزارم که کامل یادش بگیرم ، خیلی ممنون استاد عزیز و مهربان
صفحه 1 از 6 محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.