0
ورود و ثبت نام

وبلاگ

MEGA JS مقالات برنامه نویسی یادگیری جاوااسکریپت 2) آموزش بارگذاری جاوااسکریپت روی قالب سایت

2) آموزش بارگذاری جاوااسکریپت روی قالب سایت

6 جولای 2019
ارسال شده توسط
یادگیری جاوااسکریپت
16.98k بازدید

 

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

قبل از شروع کد نویسی و بارگذاری جاوااسکریپت روی قالب سایت ما نیاز به یک محیط کد نویسی یا Editor داریم.

نصب محیط کد نویسی جاوااسکریپت

شمایی که الان دارید در این دوره شرکت میکنید حتما با HTML کار کردید. پس قطعا کدهای HTML خودتون رو داخل یه Editor مثل VS Code, Sublime Text, Atom, PHP Storm, Web Storm یا هر Editor دیگه ای نوشتید که فرق نمیکنه و بستگی به سلیقه خودتون داره .پیشنهاد من VS Code و تو این دوره از همین ویرایشگر استفاده میکنیم، به سه دلیل اصلی:

  • VS Code رایگان!
  • VS Code سبک و کم حجم
  • VS Code مناسب کد نویسی با جاوااسکریپت

پس VS Code برای همه قابل دسترس و روی همه سیستم ها حتی سیستم های ضعیف از نظر سخت افزاری قابل اجراس و همه دوستان در این دوره میتونند استفاده کنن. خب برای شروع، به نصب چندتا افزونه یا Extension روی VS Code نیاز داریم! کافیه اسم افزونه های زیر رو داخل بخش Extension نرم افزار VS Code سرچ و نصب کنید:

  • One Dark Pro
  • Material Theme
  • Live Server
  • JavaScript Snippets
  • Bracket Pair Colors
  • Beautify
  • Auto Close Tag
  • Auto Rename Tag
  • Prettier
  • Emmet

نصب جاوااسکریپت

برای اجرا کردن دستورات جاوا اسکریپت در سایت نیاز به بارگذاری جاوااسکریپت روی قالب سایت داریم. در واقع با استفاده از تگ Script، فایل با فرمت js. (فرمت مخصوص جاوا اسکریپت) فراخونی و دستورات جاوااسکریپت اجرا میشه. که این فراخونی فایل میتونه به دو صورت Internal و External انجام بشه.
پس از ایجاد پروژه خودمان نوبت به این میرسد که کد نویسی با زبان جاوااسکریپت را آغاز کنیم. کدنویسی و ساخت برنامه با زبان جاوا اسکریپت نیازمند کامپایلر یا تنظیمات خاص و پیچیده ای نداره و تنها در سند HTML خود باید از تگ اسکریپت (<script>) استفاده کنیم. استفاده از این تگ به دو روش انجام میشه که در ادامه به یادگیری هر دو روش میپردازیم.

  1. اینترنال جاوا اسکریپت

  2. اکسترنال جاوا اسکریپت

جاوااسکریپت داخلی (Internal)

در این روش ما تگ اسکریپت رو باز میکنیم و به روشی که در کد، پایین تر آمده است کد های جاوا اسکریپت خودمون رو مینویسیم. در نسخه های قدیمی تر جاوا اسکریپت لازم بود تا ما توسط خصیصه ی type نوع اسکریپت خودمون رو مشخص کنیم و ممکنه در برخی منابع به این شکل تگ script رو دیده باشید. برای مشخص کردن نوع کد، که جاوااسکریپته باید این attribute رو در تگ اسکریپت به صورت زیر قرار بدیم؛ اما با بروزرسانی های به وجود آمده دیگر نیازی به وارد کردن این attribute نداریم.

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

<"script">
document.getElementById("demo").innerHTML = "MEGAJS.com";
<"/script">

جاوااسکریپت خارجی (External)

در روش اکسترنال، ما یک سند جاوااسکریپت ایجاد میکنیم؛ که پسوندش “js” است. در این روش ما کد ها و دستورات جاوااسکریپت خودمون رو در فایل جدا گانه ای که پسوند js دارد مینویسیم و در فایل HTML خود فراخوانی میکنیم. فراخوانی فایل های جاوااسکریپت خارجی به این صورت شکل میگیرد که تگ اسکریپت را وارد میکنیم و به آن attribute سورس ”src” رو اختصاص میدهیم. سپس آدرس فایل جاوا اسکریپت رو در بخش src وارد میکنیم.

<"script" src="./assets/app.js> <"/script">

استفاده از جاوااسکریپت به هر دو روش داخلی و خارجی می‌تونه بسته به نیاز پروژه و ساختار کدها متفاوت باشه، اما در پروژه‌های بزرگ‌تر و پیچیده‌تر، استفاده از روش خارجی توصیه می‌شه تا کدها به‌صورت سازمان‌یافته‌تر و قابل‌مدیریت‌تر باشن.

اشتراک گذاری:
ویدئو “بارگذاری جاوااسکریپت روی قالب سایت” با کیفیت Full HD + سورس کد در لینک زیر اگه در دانلود مشکل داشتید با مرورگر دانلود کنید و از IDM استفاده نکنید. اگر پسوند فایل براتون ناشناس بود به صورت دستی پسوند .zip اضافه کنید.
دانلود فایل

برای مشاهده لینک دانلود لطفا وارد حساب کاربری خود شوید!

پسورد فایل : ندارد

برچسب ها:

مطالب زیر را حتما مطالعه کنید

43 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • درود و خدا قوت
    میخواستم بدونم که ایا ادیتور vs code که شما گفتین بهترین ادیتور موجود برای جاوا اسکریپت هست یا ن فقط چون روی سیستم های ضعیف هم نصب میشه ازش استفاده کردین ؟ و این ک نظرتون درباره atom چیه؟

    • سلام و درود. ببینید ادیتور نظر شخصیه و مثل vs code و atom و web storm عالین با هر کدوم راحت ترید کار کنید.
      vs code بخاطر رایگان بودن سبکی و پلاگین های عالیش استفاده میکنم

  • سلام مگا جی اس عزیز ،
    یه سوال فنی مهندسی
    آیا لایو سرور رو میشه تو خود vs هم استفاده کرد منظور اینه که تو خود پنجره کنار کد هامون باز بشه و نخواد بره یه مرور گر رو باز کنه ؟

      • سلام خسته نباشید.
        من نمی تونم ویدیو ها را باز کنم و با کلیک روی قسمت دانلود ویدیو ، به یک صفحه ی دیگه میرم که می‌نویسد آدرس پیدا نشد😔

      • سلام و درود از لینک های داخل دوره مقدماتی در منو دوره مقدماتی استفاده کنید تا لینک ها اصلاح بشه

    • سلام و درود. آیکون emmet اصلی شبیه موشک تلگرام میمونه و بعد از نصب باید برنامه رو ببینید دوباره باز کنید و توجه کنید پلاگین emmet فقط توی فایل با پسوند html اجرا میشه

    • سلام و درود اگه منظورتون کنسول داخل ادیتور هست که باید پلاگین هایی که با گفتمو نصب و استفاده کنید. اما اگه منظورتون کنسول مرورگر هست که باید آخرین ورژنش رو نصب کنید و دارک مود سیستم شما فعال باشه.

  • سلام
    لطفا راهنمایی بفرمایید
    در مورد extention ها
    نمی تونم دقیا اون extention معرفی شده رو پیدا کنم
    مثلا برای javaScript snippets و barket pair colors و prettier و emmet چندین نمونه وجود داره که معلئم نیست دقیقا کدوم باید نصب بشه
    لطفا اگر میشه لیتک قرار بدین

    • درورد بر شما،
      اسم دقیق extensionها نوشته شده است.
      اما همیشه برای نصب اکستنشن مورد نیازتون به تعداد نصب فعال دقت کنید. اکستنشن های خوب نصب بالای ۱۰۰هزارتا یا حتی بالای ۱ میلیون , و ۲ میلیون دارند
      (تعداد نصب اکستنشن داخل صفحه مربوط به هر اکستنشن زیر اسم و کنار یه ابر کوچیک نوشته شده است

    • درورد بر شما،
      اسم دقیق extensionها نوشته شده است.
      اما همیشه برای نصب اکستنشن مورد نیازتون به تعداد نصب فعال دقت کنید. اکستنشن های خوب نصب بالای ۱۰۰هزارتا یا حتی بالای ۱ میلیون دارند
      (تعداد نصب اکستنشن داخل صفحه مربوط به هر اکستنشن زیر اسم و کنار یه ابر کوچیک نوشته شده است

    • سلام. این دوره جاوااسکریپت هست و در جلسه قبل توضیح دادیم که تفاوت جاوا با جاوااسکریپت چیه؟
      برای طراحبی اپلیکیشن ابتدا باید دوره مقدماتی و بعد دوره اکما اسکریپت را بگذرونید، بعد از اون سراغ فریمورک React و React native برید تا به دنیای اپلیکیشن وارد بشید.😊

    • ابزار کنسول برای توسعه دهنده و برنامه نویس هست و موارد گفته شده برای درک و فهم مفاهیم برنامه نویسی گفته شده است و نیازی به نمایش به کاربر نیست. اما تو دوره پروژه محور مینی پروژه های کار شده به صورت ویژوال هست و علاوه بر کنسول به کاربر نمایش داده میشود

  • سلام
    مال من emmet روی سیستمم کار نمیکنه هیچ جا هم هیچ آموزشی راجع بهش نیست
    بار اول که نصب کردم کار کرد بعد از این که سیستم رو خاموش و روشن کردم دیگه کار نکرد
    این مدلی هم کعه کد ها رو میشناسه و تا اولش رو میزنی بقیه ش رو برات میاره هم برای من کار نمیکنه

      • ممنون از پاسختون
        به خاطر این رفتم یه ویندوز 7 نصب کردم روی اون ویندوز نسخه جدیدش رو از خود سایتش گرفتم باز هم نمیشه

      • آقا دستت بی بلا نفست گرم
        حل شد.
        اشتباه از من بود. به این دقت نکردم که اگر میخوام کدها رو ساجست کنه و emmet کار کنه نباید روی فایل ناشناس انتظار اجرا داشته باشم.
        مثلا وقتی new html file درست میکنم روی اون برام فقط کدهای html و css رو میشناسه و میاره. اگر css باشه کدهای css رو میشناسه و html رو نمیاره. مثلا وقتی فایل css باز میکنم مثلا علامت تعجب و تب رو بزنم برام بخش های دیفالت html رو emmet نمیکنه.

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

ثبت سفارش
×
ورود | ثبت‌نام
ورود شما به معنای پذیرش شرایط مگا جی اس و قوانین می باشد