0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

محل قرار گیری کدهای جاوا اسکریپت

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 1792
تاریخ بروزرسانی ۱۸ اردیبهشت ۱۴۰۰

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

 

محل قرار گیری کدهای جاوا اسکریپت

با سلام خدمت دوستان و برنامه نویسان و همراهان همیشگی تیم طراحی سایت اصفهان وب یار. دراین قسمت از آموزش جاوا اسکریپت با موضوع محل قرار گیری کدهای جاوا اسکریپت همراه شما عزیزان هستیم. در جلسه اول آموزش جاوا اسکریپت، با یک مثال ساده کار رو شروع نمودیم و گفتیم کدهای جاوا اسکریپت درون تگهای باز و بسته <script> و <script/> قرار می گیرند. اینک می خواهیم این تگ های script را درون سایت خود و در جای مناسب قرار دهیم. خوشبختانه  تگ های جاوا اسکریپت این توانایی را دارند که در هر جایی از صفحات html به کار روند اما معمول ترین و استاندارد ترین آن ها به سه روش است که در ادامه هر سه روش قرار گیری کدهای جاوا اسکریپت را به شما عزیزان آموزش می دهیم.

آموزش زبان جاوا اسکریپت

محل کدهای جاوا اسکریپت در صفحه html

1.جاوا اسکریپت در بخش <head>

هنگامی که کدهای جاوا اسکریپت را در قسمت head قرار داده باشیم، این کدها در هنگام لود صفحه زود تر از سایر اجزا اجرا می گردند که این مسئله تاثیر مستقیمی روی سرعت و سئو سایت دارد. به همین سبب زمانی از این روش استفاده می کنیم که قرار است یک سری توابع و رویداد هایی در هنگام بارگزاری سایت (onload) اتفاق بیفتد. از جمله نمایش پاپ آپ های خبرنامه و…

در مورد توابع و رویداد ها در جلسه ی مربوط به خود بیشتر صحبت می کنیم. اکنون به مثال زیرکه محل قرارگیری کدهای جاوا اسکریپت در بخش head است توجه نمایید:

<!DOCTYPE html>
<html>
<head>
<script type=”text/javascript”>
document.getElementById(“demo”).innerHtml=”my first javascript”;
</script>
</head>
<body>
<p id=” demo “>my first project</p>
</body>
</html>

 

2.جاوا اسکریپت در بخش <body>

یک روش بهتر برای محل قرار گیری کدهای جاوا اسکریپت ، گذاشتن آن ها در تگ body است. زیرا همان طور که در جلسه ی مقدمه ی جاوا اسکریپت نیز بیان شد صفحات وب و کدهای جاوا اسکریپت توسط مرورگر به صورت مفسری ترجمه می شوند ؛ به همین دلیل با این روش  نیمی از صفحه تا قبل از تگ جاوا اسکریپت لود شده است. پس اگر بخواهیم سرعت سایت خود را بهبود ببخشیم، بهتر است کدهای جاوا اسکریپت را در انتهای تگ body و قبل از بسته شدن آن بنویسیم. به عنوان مثال:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id=” demo “>my first project</p>
</body>
</html>

 

محل قرار گیری کدهای جاوا اسکریپت

3.جاوا اسکریپت در فایل خارجی

گاهی اوقات پیش می آید که یک سری از کدهای javaScript در چندین صفحه تکرار می شوند و این تکرار کدها به بهینگی برنامه نویسی سایت لطمه وارد می کند. به همین سبب بهترین راهکار استفاده از فایل خارجی جاوا اسکریپت است. حال در این روش کدها جاوا اسکریپت را بدون تگ script در فایلی جداگانه و با پسوند .js ذخیره کرده و سپس آن را در بخش head و بهتر از آن در انتهای body فراخوانی می نماییم.

به عنوان مثال درون فایل myScript.js کد زیر را می نویسیم:

document.getElementById(“demo”).innerHtml=”my first javascript”;

 

و سپس در فایل html به فایل myScript.js لینک می دهیم:

<!DOCTYPE html>
<html>
<body>
<p id=” demo “>my first project</p>
<script src="myScript.js"></script>
</body>
</html>

 

با روش3 خوانایی و بروز رسانی کدهای جاوا اسکریپت و html بیشتر می شود و همچنین با catch شدن فایل های جاوا اسکریپت در سیستم کاربر ، سرعت بارگزاری سایت بهبود می یابد.

این بخش ازآموزش های جاوا اسکریپت نیز به پایان رسید. در صورت اطلاع از آخرین آموزش های ما می توانید در کانال تلگرام وب یار webyar_net@ عضو شوید.

 

0/5 (0 Reviews)
مطالب مرتبط
wordpress-security-threats-increase-security
مطالعه :

 امنیت وردپرس در لوگین » هسته وردپرس , با توجه به متن باز بودن آن , یکی از ایمن ترین هسته های سایت ساز است .(امنیت وردپرس در لوگین) اما این در حالتی است که کاربران وردپرس , هیچ لوازم یدکی را ( مانند قالب یا افزونه یا هک و کد ) بر روی آن سوار نکنند . این البته غیر ممکن است , چرا که بخشی از کاربرد و قدرت وردپرس , وابسته به این یدک هاست . یک نفوذگر نیز این را به خوبی میداند و بسیار کم هستند نفوذگرانی که برای نفوذ به یک وبسایت وردپرسی , وقت خود را صرف اسکن هسته سایت نمایند ( مخصوصا اگر هسته مرتبا به روز شده و از نسخه های روز استفاده کند ) . امنیت وردپرس در لوگین نفوذگران معمولا برای نفوذ به یک وردپرس , در ابتدا اقدام به اسکن بخش لاگین و سپس افزونه ها و در نهایت قالب وبسایت میکنند . اینها تماما بخش هایی هستند که افزونه ها بر آن سوار میشوند . ممکن است مدیر وب سایت , با هدف دیزاین بخش لاگین , از افزونه استفاده کرده باشد , افزونه ای که در اسکنهای Acunetix مشخص میشود که بیشتر از امنیت , فقط بر زیبایی تکیه کرده است و موجودیت وبسایت را به خطر انداخته است . مدیر دیگر , بدون توجه به امنیت […]

استاندارد نویسی با HTML و CSS
مطالعه :

هنگامی با CSS و HTML کد نویسی میکنید، وقتی تعداد کدها زیاد میشود. بررسی خطایابی و اصلاح کدها کاری مشکل میباشد. مخصوصا اگر بعد از مدتی به کدها مراجعه کنید و بخواهید کدها را اصلاح کنید. یا اینکه بخواهید کدهایی که فرد دیگری نوشته را تغییر دهید یا اصلاح کنید. در صورتی که از قواعد مشخصی استفاده نکرده باشد کاری زمانبر است. این موضوع برای پروژه های بزرگتر به مراتب بحرانی تر است. برای رفع این مشکلات استاندارد هایی برای کد نویسی تعریف شده که به کمک این استانداردها کد نویسی و توسعه برنامه ها ساده تر شده است. در این مقاله سه تا از قوانین استاندارد نویسی  را با هم بررسی میکنیم. و استاندارد معروف BEM را مفصل تر توضیح میدهیم.  OOCSS  BEM  SMACSS استاندارد نویسی با OOCSS – ( Object-Oriented CSS) این استاندارد اولین متدولوژی نامگذاری در Css میباشد. که قوانین استاندارد نویسی در آن تعریف شده است. همانطور که از نامش مشخص است شی گرایی در Css است.  شی گرایی در Css به کمک کلاس ها صورت میگیرد. هدف آن ایجاد اشیاء با قابلیت استفاده مجدد است. شی گرایی در برنامه نویسی به معنای شکستن کارهای بزرگ به کارهای کوچک میباشد.  در این تکنیک اسکلت اصلی نوشته میشود و استایل های بصری در قالب کلاسهای جداگانه روی ساختار اصلی اعمال میشود. این امر توسعه پروژه ها را […]

هوش مصنوعی
مطالعه :

هوش مصنوعی (AI) انقلابی در فناوری اطلاعات ایجاد کرده است. AI زیر شاخه ای از علوم رایانه است. که شامل ایجاد ماشین ها و نرم افزارهای هوشمند است که مانند انسان ها کار می کنند و واکنش نشان می دهند. هوش مصنوعی و برنامه های کاربردی آن در زمینه های مختلف زندگی انسان ها به عنوان سیستم خبره حل کننده مشکلات پیچیده در زمینه های مختلف مانند علم، مهندسی، تجارت، پزشکی، بازی های ویدیویی و تبلیغات استفاده می‌شود. هوش مصنوعی (AI) که توسط برخی به عنوان انقلاب صنعتی  شناخته می شود، نه تنها نحوه انجام کارها، نحوه ارتباط ما با دیگران، بلکه آنچه را که در مورد خود می دانیم نیز تغییر خواهد داد. IR1.0، IR قرن 18، بدون اینکه مستقیماً روابط انسانی را پیچیده کند، باعث ایجاد یک تغییر اجتماعی عظیم شد. با این حال، هوش مصنوعی مدرن تأثیر فوق‌العاده‌ای بر نحوه انجام کارها و همچنین نحوه ارتباط ما با یکدیگر دارد. در مواجهه با این چالش، اصول جدیدی از اخلاق زیستی هوش مصنوعی باید در نظر گرفته‌شود. و برای ارائه دستورالعمل هایی برای رعایت فناوری هوش مصنوعی توسعه یابد. تا جهان از پیشرفت این هوش جدید بهره مند شود.   هوش مصنوعی چیست؟ هوش مصنوعی (AI) تعاریف مختلفی دارد. برخی آن را فناوری ایجاد‌شده می‌دانند که به رایانه ها و ماشین ها اجازه‌می‌دهد هوشمندانه کارکنند. برخی آن را […]

mvc
مطالعه :

با گسترش صفحات وب و پویایی و تعامل آنها بیشتر شده در نتیجه پیچیدگی بیشتری دارند. اینجاست که معماری 3  لایه جوابگوی نیازطراحان سایت نیست و مبحثی به نام معماری MVC  پیش می آید. مسئله کجاست؟ فرض کنید یک نرم افزار تحت وب جهت ارائه سود و زیان شرکت ارائه کردید که سود و زیان شرکت را به کمک عدد و رقم نمایش میدهد. بعد از مدتی صاحب نرم افزار از شما میخواد اعداد را به صورت نمودار نمایش دهید. یا حتی بخواهید داده ها را با فرمت خاصی روی یک فایل ذخیره کنید. اگر شما از استانداردهای کد نویسی استفاده نکرده باشید و در کد نویسی مستقیما از پایگاه داده استفاده کرده باشید، جدای از آنکه مشکل امنیتی دارد که موضوع بحث ما در این مقاله نیست اعمال تغییرات بر روی برنامه را با مشکل جدی روبرو میکند. اما اگر از معماری MVC استفاده کرده باشید به دلیل تفکیک تمام بخش ها (بخش سرور سایت و بخش کلایت سایت) اعمال تغییرات بر روی این سیستم سریع تر و راحت تر خواهد بود و دست برنامه نویس بازتر است. همینطور استفاده از معماری MVC به ما کمک میکند تا بتوانیم قسمت های مختلف پروژه را در یک تیم طراحی نرم افزار همزمان پیش بریم بدون اینکه هریک از گروه های طراحی نرم افزار از نحوه عملکرد قسمت های دیگر آگاهی […]

مطالعه :

Firefox یک مرورگر اینترنتی است. که توسعه دهندگان این مرورگر همواره سعی دارند. تا آن را بیشتر توسعه دهند. Firefox developer edition برای توسعه دهندگان و طراحان وب طراحی شد. این نسخه توسط فایرفاکس رونمایی شده است. شکل ظاهری آن از رنگ های تیره و مشکی طراحی شده است. آخرین نسخه firefox developer edition که فایرفاکس 94 می باشد. در اواخر سال 2019 به تدریج شتاب بیشتری گرفت. به طوری که نسخه جدید آن از سال 2020 شروع به طراحی شد. و در دوم نوامبر سال 2021 آخرین نسخه یعنی فایرفاکس 94 منتشر شد. ابزارهای کاربردیMozilla firefox developer edition:     1.    Animation inspector tool این ابزار برای ساخت انیمیشن است. که به زبان سی اس اس می باشد. استفاده از این ابزار کار آسانی است. توسط این ابزار می توانید. انیمشین را در هر مرحله می توان مشاهده کرد. برای کار کردن با آن کافی است. بر روی انیمیشن کلیک راست کرده. و inspect element را انتخاب نمایید. و در پنجره dev tool روی animations کلیک کنید. 2.    Color picker for css این ابزار که در ورژن توسعه دهنده محصول فایرفاکس وجود دارد، ایجاد، تنظیم و آزمایش رنگ های سفارشی را برای وب آسان می کند. همچنین تبدیل بین فرمت‌های رنگی مختلف که توسط CSS پشتیبانی می‌شوند. را آسان می‌کند، از جمله: رنگ‌های HEXA، RGB (قرمز/سبز/آبی) و HSL (رنگ/اشباع/روشنایی). […]

مطالعه :

آیا امکان ایجاد چت روم در وردپرس وجود دارد؟ بله! شما با استفاده از وردپرس می توانید یک چت روم در سایت خود ایجاد کنید. این کار باعث می شود که کاربران شما بدون نیاز به برنامه هایی مانند Discord به راحتی با یکدیگر چت کنند. در این مقاله میخواهیم نحوه ی ایجاد چت روم با استفاده از وردپرس را به شما عزیزان آموزش دهیم. با ما همراه باشید.   دلایل ایجاد چت روم در سایت ممکن است شما صاحب یک وب سایت انجمن باشید. در این صورت احتمالا به دنبال راهی هستید تا یک چت روم را اضافه کنید. برخی از سایت ها برای این کار از whatsapp و یا slack استفاده می کنند. اما ایرادی که استفاده از چت روم های خارجی دارد این است تمامی ارتباطات در خارج از وب سایتتان اتفاق می افتد. از مهم ترین مزیت های ایجاد چت روم داخلی ، ترک نکردن سایت توسط کاربران در هنگام چت است. این برای سئوی سایت شما هم بهتر است.     بیایید با هم نگاهی به نحوه ی ساخت چت روم در وردپرس بیندازیم:   در قدم اول افزونه ی Simple Ajax Chat را دانلود و نصب کنید. بعد از فعالسازی افزونه به بخش تنظیمات Simple Ajax Chat بروید. در این بخش باید نام چت خود را در قسمت General Settings تغییر دهید. در general […]

دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *