article

استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP

php

همان طور که می دانیم، جاوا اسکریپت (JavaScript) به عنوان یک زبان اسکریپت نویسی سمت کاربر و قابل اجرا در مرورگر، به خودی خود فواید و کاربردهای زیادی در صفحات وب دارد و تقریبا تمام برنامه نویسان و توسعه دهنده گان از آن استفاده می کنند، از این گذشته مواردی پیش می آید که بخواهیم از قدرت و قابلیت های آن برای نمایش محتوای داینامیک و به طور خاص در تعامل و ترکیب با PHP استفاده کنیم، این شیوه یکی از معمول ترین روش هایی است که بیشتر سایت های خدمات دهنده در زمینه ابزارهای وبلاگ نویسی برای کوتاه کردن کدهای نهایی و خیلی فواید دیگر از آن استفاده می کنند، از این رو و به جهت اینکه پرسش های زیادی از طرف کاربران در این خصوص مطرح می شود، قصد داریم این آموزش را به نحوه استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP اختصاص دهیم.

هدف از ترکیب JavaScript و PHP


پیش از اینکه به ادامه آموزش بپردازیم، بد نیست در یک جمع بندی کلی با هدف این تکنیک آشنا شویم.
شرایطی که باعث می شود از جاوا اسکریپت و PHP به صورت ترکیبی استفاده کنیم اغلب به مواردی مربوط می شوند که بخواهیم به طور مثال محتوای داینامیک خروجی داده شده توسط کدهای PHP را به صورت فریم در صفحات HTML نمایش دهیم، به طور مثال فرض کنید فایل PHP با آدرس زیر یک آیکن پیج رنگ نمایش می دهد.
http://www.yoursite.com/page_rank.php?url=$url&img=5
واضح است که اگر آدرس فرضی بالا در یک مرورگر وارد شود، آیکن پیج رنک به نمایش در می آید، اما مسلما امکان درج مستقیم فایل PHP در صفحات HTML وجود ندارد و از طرفی تمام و شاید اغلب کاربران این امکان را ندارند که از دستورات سمت سرور استفاده کنند و محتوای فایل را نمایش دهند (که اگر هم در شرایطی این طور باشد، با مشکلات و دردسرهای بعدی روبرو خواهند شد)، به همین خاطر باید به دنبال یک واسطه بین فایل های داینامیک و صفحات HTML استاتیک باشیم، این واسطه نیز چیزی نیست جزء دستورات جاوا اسکریپت که به راحتی می توان به کمک آنها و تنها با چند خط کدنویسی ساده به هدف مورد نظر رسید و کد نهایی را به شکل نمونه زیر تغییر داد.
<script type="text/javascript" src="http://yoursite.com/page_rank.php?url=$url&img=5"></script>
اکنون می توان کد اسکریپتی بالا را در صفحات HTML به راحتی استفاده کرد، این روش جایگزین مناسبی است برای تکنیک های مشابه (مانند استفاده از iframe و...)، اما مراحل انجام این کار.

فراخوانی فایل PHP در JavaScript


اولین گام این است که آدرس فایل PHP خود را در قسمت src تگ های جاوا اسکریپت آدرس دهی کنیم، البته اگر تعداد فایل های سمت سرور بیش از یک مورد باشد، فایلی باید در این قسمت تنظیم شود که خروجی را تولید می کند و نیازی به وارد کردن سایر فایل ها درون دستورات جاوا اسکریپت نیست، به مثال زیر توجه کنید.
<script type="text/javascript" src="http://yoursite.com/output.php"></script>
نکته 1: اگر فایل سمت سرور (فایل PHP) نیاز به دریافت پارامترهایی داشته باشد، مانند متد GET در حالت عادی، می توانیم پارامترها را با افزودن علامت ? به انتهای آدرس و استفاده از علامت های & و =، به هر تعداد که لازم است تنظیم کنیم.
نکته 2: استفاده از این روش محدود به لینک های داینامیک نیست، درواقع با هر لینکی که فایل سرور به درستی توسط آن فراخوانی شود، خروجی دریافت شده و به نمایش در می آید.

تنظیمات JavaScript در فایل PHP


در گام دوم و در فایل PHP، باید خروجی کدها را مطابق با syntax دستور document.write تنظیم کنیم، همان طور که می دانیم یک دستور ساده document.write در جاوا اسکریپت به صورت زیر است:
<script type="text/javascript">
document.write('چاپ خروجی مورد نظر در مرورگر');
</script>
لذا وقتی این دستور را در کدهای PHP استفاده می کنیم باید به نکات زیر توجه داشته باشیم.
- درج موارد مربوط به document.write درون تگ های PHP مجاز نیست و باید خارج از علامت های php?> و ?> باشد.
نمونه اشتباه:
<?php
document.write('echo "ترکیب جاوا اسکریپت و PHP";');
?>
نمونه صحیح:
document.write('<?php
echo "ترکیب جاوا اسکریپت و PHP";
?>'
);
- به جهت رعایت syntax صحیح و مطابق با دستور العمل جاوا اسکریپت، علامت های ' و " در خروجی را با یک بک اسلش (\) ایمن سازی می کنیم، دقت کنید که در برخی سرور ها به جهت روشن بودن قابلیت magic_quotes_gpc (این قابلیت علامت های ' و " را با افزودن یک بک اسلش ایمن سازی می کند)، این کار به صورت خودکار انجام می شود و لذا ابتدا باید این قابلیت را غیر فعال کنید یا بک اسلش های اضافه شده را حذف نمائید تا از درج دو بک اسلش (یک بک اسلش توسط magic_quotes_gpc و یک بک اسلش دیگر توسط توابعی مانند addslashes) اجتناب شود، نمونه راه حل زیر می تواند هر دو مشکل را بر طرف کند.
document.write('<?php
//تابعی برای حذف بک اسلش های اضافه
function GpcClean($str){
    if(get_magic_quotes_gpc()){
        return stripslashes($str);    
    }
    return $str;
}
//افزودن بک اسلش به خروجی
echo addslashes(GpcClean("ترکیب جاوا اسکریپت و PHP"));
?>'
);
ملاحظه می کنید که برای بررسی روشن بودن قابلیت magic_quotes_gpc از تابع get_magic_quotes_gpc استفاده کرده ایم، اگر این قابلیت روشن باشد (مقادیر برگردانده شده توسط تابع get_magic_quotes_gpc برابر با TRUE بود)، مقادیر خروجی از فیلتر تابع stripslashes عبور کرده و بک اسلش های زائد حذف می شوند، در نهایت نیز با تابع addslashes، هر جا علامت ' یا " در خروجی وجود داشته باشد به صورت '\ و "\ تبدیل می شوند تا مطابق با syntax دستورات جاوا اسکریپت باشند.
نکته: استفاده از خط جدید (line break) در خروجی، مجاز نیست و موجب از کار افتادن نمایش کد می شود، به عبارت دیگر نباید از حالت Enter در خروجی کدهای PHP در ترکیب با جاوا اسکریپت استفاده شود.
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» ایجاد پنل جمع شونده با جاوا اسکریپت و فریم ورک Spry
» اعتبار سنجی فرم های وب با جاوا اسکریپت
» کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت
» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
» ساخت پنل چند سربرگی (Tabbed Panel) با جاوا اسکریپت و CSS
commentنظرات (۷۸ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: مجتبی
۱۳:۰۴ ۱۳۹۹/۰۴/۰۴
سلام میشه یک کد جاوا رو به php تبدیل کرد تا لود سایت سریع تر بشه؟
پاسخ: 
PHP در سرور اجرا و JavaScript در مرورگر پردازش می شود، به همین خاطر راهی برای تبدیل جاوا اسکریپت نیست، اما با استفاده از ابزارهای فشرده سازی دستورات JS می توانیم حجم فایل ها و کدها را کاهش دهیم، برای مثال:
https://javascript-minifier.com

https://jscompress.com
نویسنده: عاطفه مرادی
۱۱:۴۵ ۱۳۹۹/۰۵/۱۹
سلام. من تازه یادگیری html رو شروع کردم و برای وبسایتمون برروی کنترل پنل html می نویسم. از طراح وبسایت خواستم که دسترسی جاوا را برایم باز کنند و ایشون یک فایل js در ftp برایم فرستادند. فایل js را در notepad باز کردم. ولی مطمئن نیستم اگر در notepad جاوا را بنویسم و id بدهم، می توانم از آن در html استفاده کنم یا باید این فایلها بصورت آنلاین باز شود. کلا در این مورد راهنمایی می خواستم. ممنون
پاسخ: 
صفحات HTML هم به صورت آنلاین (روال متداول بازدید از سایت ها، بارگذاری اطلاعات از سرور) و هم به صورت آفلاین (اجرای فایل از روی دستکتاپ با برنامه های مرورگر، بارگذاری اطلاعات از سیستم عامل یا آنلاین) قابل مشاهده هستند، داخل این صفحات می توانیم فایل ها یا دستورات مستقیم جاوا اسکریپتی داشته باشیم که این دستورات همزمان با نمایش صفحه وب در مرورگر کاربران اجرا می شوند، اگر کدها به صورت فایل خارجی در صفحه قرار بگیرند باید آدرس مشخصی داشته باشند، این آدرس بسته به محل نگهداری فایل های JS می تواند آفلاین (بر روی سیستم عامل) و یا آنلاین (بر روی سرور سایت) باشد، برای ویرایش کدهای این نوع فایل ها نیز هم می توانیم محتویات فایل را مستقیما ویرایش کنیم و هم نسخه جدید کدنویسی و جایگزین نسخه موجود کنیم (البته با گرفتن پشتیبان از فایل موجود)، لطفا برای کسب اطلاعات بیشتر از ساختار وب به لینک زیر مراجعه کنید:
webgoo.ir/help
نکته: در صورتی که بخواهیم نتیجه تغییرات در سایت آنلاین اعمال شود قاعدتا فایل های موجود در سرور باید ویرایش شوند و صرفا ویرایش آفلاین آنها بدون جایگزینی با نسخه آنلاین کفایت نمی کند.
نویسنده: شهریار صادقی
۱۳:۱۸ ۱۳۹۹/۰۹/۰۱
من سه تا صفحه در php storm درست کردم یکی برای html یکی برای جاوا اسکریپت و جی کوِئری و یکی هم برای css اول کتابخانه جی کوئری رو فراخوانی کردم و بعد فایل js خودم رو و بعد هم فایل css رو حالا css کار میکنه ولی js کار نمیکنه دلیلش چیه ؟ من حتی تابعی که تو صفحه جاوا نوشته بودم رو با رویداد onclick تو html امتحان کردم اینطوری کار میکرد ولی وقتی همه دستورات رو تو صفحه جی اس میارم دیگه کار نمیکنه.
پاسخ: 
لطفا با زدین دکمه F12 در مرورگر خطا یا خطاهای دریافتی در قسمت Console را بررسی و درج کنید، همچنین اگر فایل ها را در یک لینک آنلاین جهت تست قرار دهید بهتر می توان بررسی و دقیقتر راهنمایی کرد، در صورت عدم دسترسی به تست آنلاین و تمایل می توانید فایل ها را به صورت Zip شده به آدرس ایمیل ما (موجود در بخش تماس) ارسال و پاسخ را از همان طریق پیگیری نمائید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





2 × 8
 refresh

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

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

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

form علی
در:
من در یک سایت سازی سایت ساختم یه بخش داره به نام اسکریپت دلخواه می خوام یه اسکریپتی بذارم که مثلا یه موسیقی وقتی کاربر...
۱۳۹۹/۱۰/۲۷

form امیرحسین
در:
بله استاد خیلی ممنون، نمیدونستم خودش Optimize رو انجام میده در کل من بعد از ایندکس گذاری ها همیشه سعی کردم جوری که با...
۱۳۹۹/۱۰/۲۶

form امیرحسین
در:
ُسلام وقت بخیر این کووری هم چون اول قسمت WHERE انجام میشه بعد قسمت ON پس این کووری هم با حالت کووری قبلی برابره
۱۳۹۹/۱۰/۲۶

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

form محمد بیدل بازه
در:
سلام خسته نباشید ببخشید من توی یک قسمت سایتم تصویری دارم و میخوام سمت راست اون تصویر متن بنویسم ولی نمیشه تا متن رو...
۱۳۹۹/۱۰/۲۵

form سلام
در:
و اینکه یه تگ خوب برای فونت معرفی کنید و یه تگ دیگه که متن رو (تیتر مطلب (تست)) در ادامش بنویسه نه اینکه...
۱۳۹۹/۱۰/۲۴

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

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

form حورارمی
در:
سلام. من هنوز نمیدونم تو تنظیمات باید کجا رو بگردم تا قالب وبلاگم رو با عکس مورد علاقه ام تغییر بدم. یا نمیتونم...
۱۳۹۹/۱۰/۲۳

form راشد
در:
این روش خیلی طولانیه در فروشگاه من یک برنامه گرفتم که یه عکس توش اپلود کن بهت یک لینک میده در ظرف چند ثانیه و...
۱۳۹۹/۱۰/۲۱

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

form محمود
در:
سلام و عرض ادب من در سایتم یک قسمت تب ایجاد کردم، متن ها را که در تب می نویسم پاراگراف بندی نمی شوند....
۱۳۹۹/۱۰/۲۱
form علی آقابیگی
در:
سلام خسته نباشید ببخشید من می خواستم کد جدید در وبلاگم بزارم بعد اشتباهی رفتم در قسمت ویرایش کدها و بعد بیشتر کدها را پاک...
۱۳۹۹/۱۰/۲۰
form محمد
در:
سلام. من میخوام با جاوا اسکریپت یک کدی بنویسم که وقتی کاربر روی یک دکمه ‏ای کلیک کرد، یک کد تصادفی برای شمارش ارسال...
۱۳۹۹/۱۰/۲۰
form پوریا
در:
سلام خسته نباشید، ممنونم بابت توضیحات خوبتون، یه مشکلی داشتم میخواستم ببینم امکانش هست راهنمایی کنید؟ فرض کنید یه اینطور متنی داریم: ...
۱۳۹۹/۱۰/۱۹
form seyedsobhanmansouri
در:
سلام خسته نباشید من سایتمو طراحی کردم اما به این مشکلات بر میخورم اول اینکه هدر سایتم نمایش داده نمیشه اصلا و بعد...
۱۳۹۹/۱۰/۱۹
form رضا
در:
سلام. ممنون بابت مطالب مفیدتون. این نوع جستجو به سئو سایت لطمه نمیزنه؟؟؟ چون در این مدل جستجو، مقدار impression میره بالا ولی...
۱۳۹۹/۱۰/۱۹
form mahdi
در:
سلام استاد عزیز ، پس بنظرتون بجای وقت گذاشتن برای یادگیری لاراول و وردپرس ، وقت بزارم که عمیق تر php و ساختار mvc...
۱۳۹۹/۱۰/۱۹
form علی
در:
سلام و ممنون بابت وبسایت عالیتون داخل بعضی سایت ها دیدید مثلا یه متنی شروع به تایپ شدن می کنه و وقتی کامل شد...
۱۳۹۹/۱۰/۱۸
form محمد
در:
سلام خدمت شما دوست عزیز سوالم این بود میخاستم چندتا مثال از این تابع و چند تابع دیگه از خودتون رو برام مثال بزنید...
۱۳۹۹/۱۰/۱۸
form محمود رنجبر
در:
سلام برادر مشکل من تو همین سایتی هست که فرستادم وقتی گزینه خانه رو کلیک میکنم و بعد دکمه بک گوشی رو میزنم بالای صفحه...
۱۳۹۹/۱۰/۱۷
form mahdi
در:
سلام استاد عزیز ، بعد از آموزس php با لاراول کار کنیم بهتره ؟
۱۳۹۹/۱۰/۱۶
form رضا
در:
آدرس رو براتون گذاشتم دامنه قبلا روی یه وبلاگ میهن بلاگ بود چند ماه میشه که از میهن بلاگ خداحافظی کردم ولی هنوز که هنوزه...
۱۳۹۹/۱۰/۱۴
form نیلو
در:
سلام... ببخشید بعد طراحی قالب قالب شیشه ایم هست یا نه؟؟؟
۱۳۹۹/۱۰/۱۳
form مجتهدزاده
در:
سلام من یه فرمی طراحی کردم که توش قراره تعداد زیاد (حدود 10 الی 50) فیلد رو تو دیتابیس اینسرت کنم. آیا باید...
۱۳۹۹/۱۰/۰۸
form مجتهدزاده
در:
سلام لطفا راهنمایی بفرمایید که چه زمانی قبل از متغیر @ استفاده می شه و کاربردش چیه؟ با تشکر
۱۳۹۹/۱۰/۰۶
form ali
در:
سلام چجوری میشه با php بازی هوب رو طراحی کرد
۱۳۹۹/۱۰/۰۶
form رضا
در:
سلام ممنون از سایت خوبتون ایکون سایتم رو توی دسکتاپ درست نشون میده ولی تو گوشی مشکل داره طبق اموزش شما هم انجام دادم...
۱۳۹۹/۱۰/۰۶
form فرانک دستان
در:
سلام من خیلی دوست دارم روی وبلاگم کد اهنگ بزارم ولی هیچ کدوم نمی یاد بهم گفتن از این کدها دیگه پشتیبانی نمی شه شما...
۱۳۹۹/۱۰/۰۵
form مصطفی
در:
سلام. عملگر @ چه زمانی قبل از یک متغییر میاد؟
۱۳۹۹/۱۰/۰۵
form سما
در:
سلام من وقتی میزنم روی مشاهده وبلاگ صفحه فیلتر برام میاد و نمیتونم وبلاگمو ببینم
۱۳۹۹/۱۰/۰۵
form مجتبی
در:
سلام من وبلاگ بلاگفا دارم کدها و جاوا استیکرها رو میزارم تو قسمتشون ولی همه ی کدها رو یکطرف وبلاگ نشون میده چطوری سمت...
۱۳۹۹/۱۰/۰۵
form matin asadi
در:
سلام ممنون بابت سایت خوبتو من یه مشکلی دارم می خواستم کدی برای این مثال زیر بنویسم ولی بلد نیستم ممنون میشم کمک کنید. ...
۱۳۹۹/۱۰/۰۲
form sahar1999
در:
سلام وقت بخیر چطور میتونم در برنامه نویسی سی شارپ هنگام ایجاد پایگاه داده ی MySql نام پایگاه داده رو از txetbox دریافت کنم؟
۱۳۹۹/۱۰/۰۱
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.