نگاهی به آینده: بوت‌استرپ و جاوااسکریپت

۱. بوت‌استرپ چیست

در چهارده فصل گذشته هر استایلی که خواستیم، خودمان نوشتیم. بوت‌استرپ یک فایل CSS آماده و بسیار بزرگ است که هزاران کلاس از پیش نوشته دارد. کافی است آن را به صفحه وصل کنیم و بعد تنها نام کلاس‌ها را در HTML بنویسیم.

<link rel="stylesheet" href="bootstrap.rtl.min.css">
<link rel="stylesheet" href="style.css">

وصل کردن بوت‌استرپ: نمونه 01-bootstrap-intro

شرح مثال

• فایل را از سایت getbootstrap.com دانلود می‌کنیم و کنار فایل‌های پروژه می‌گذاریم، دقیقاً مانند کاری که با style.css خودمان می‌کنیم.
• نام فایل bootstrap.rtl.min.css است. آن rtl یعنی نسخه راست‌چین که برای فارسی لازم داریم. نسخه معمولی، کل چیدمان صفحه فارسی را برعکس می‌کند.
• فایل خودمان همیشه بعد از بوت‌استرپ می‌آید. یادتان هست که در فصل سوم گفتیم در تداخل، قانون پایین‌تر برنده است؟ اگر جایشان را عوض کنید، بوت‌استرپ روی استایل شما را می‌پوشاند.

<button class="btn btn-primary">دکمه اصلی</button>
<button class="btn btn-success">دکمه سبز</button>
<button class="btn btn-outline-primary">دکمه توخالی</button>

<div class="alert alert-success">ثبت‌نام انجام شد.</div>
<div class="alert alert-danger">رمز عبور اشتباه است.</div>

دکمه و پیام آماده، بدون یک خط CSS

در فصل چهارم برای ساخت همین دکمه حدود ده خط CSS نوشتیم: padding، border، border-radius، background-color و hover:. در بوت‌استرپ همه این موارد از قبل داخل کلاس btn btn-primary نوشته شده است.

۲. سیستم ستونی بوت‌استرپ

در فصل یازدهم گرید و در فصل دوازدهم media query را یاد گرفتیم. بوت‌استرپ همین دو کار را با سه کلاس ساده انجام می‌دهد.

<div class="container">
    <div class="row">
        <div class="col-md-4">ستون یک</div>
        <div class="col-md-4">ستون دو</div>
        <div class="col-md-4">ستون سه</div>
    </div>
</div>

سیستم ستونی: نمونه 02-bootstrap-grid

شرح مثال

• container یک جعبه وسط‌چین با عرض محدود، مانند کلاس container. خودمان در فصل چهاردهم.
• row یک ردیف. ستون‌ها باید داخلش باشند.
• col یک ستون داخل ردیف.

بوت‌استرپ هر ردیف را به دوازده قسمت تقسیم می‌کند. عدد جلوی col- می‌گوید این جعبه چند قسمت از آن دوازده تا را بگیرد. پس col-4 یعنی یک‌سوم و col-6 یعنی نصف. جمع عددهای یک ردیف باید دوازده شود.

حرف وسط، نقطه شکست است. col-md-4 یعنی «از عرض تبلت به بالا یک‌سوم، و روی موبایل تمام عرض». یعنی چیدمان واکنش‌گرا، بدون نوشتن حتی یک media query.

۳. اجزای آماده

بوت‌استرپ تنها رنگ و فاصله نیست؛ قطعه‌های کامل و آماده هم دارد.

<div class="card">
    <img src="images/math-class.jpg" class="card-img-top" alt="کلاس ریاضی">
    <div class="card-body">
        <h5 class="card-title">ریاضی و فیزیک</h5>
        <p class="card-text">مناسب علاقه‌مندان به مهندسی</p>
        <a href="#" class="btn btn-primary">بیشتر بدانید</a>
    </div>
</div>

<table class="table table-striped table-bordered">
    ...
</table>

<span class="badge bg-primary">جدید</span>

اجزای آماده: نمونه 03-bootstrap-components

شرح مثال

کارتی که در فصل چهاردهم با حدود سی خط CSS ساختیم، اینجا تنها چند نام کلاس است. جدول راه‌راهی که در فصل سیزدهم با nth-child(odd): ساختیم، اینجا تنها table-striped است.

بوت‌استرپ یک فایل جاوااسکریپت هم دارد که اجزای متحرک را ممکن می‌کند: منوی موبایلی که باز و بسته می‌شود، پنجره بازشو، برگه‌های تب‌دار. آن فایل هم مانند CSS دانلود و کنار پروژه گذاشته می‌شود و درست قبل از </body> وصل می‌شود.

۴. مقایسه با سایت دست‌ساز ما

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

تا اینجا دو زبان یاد گرفتیم: HTML می‌گوید چه چیزی در صفحه باشد و CSS می‌گوید آن چیزها چه شکلی باشند. زبان سوم، جاوااسکریپت، کار سومی انجام می‌دهد: صفحه چه کاری انجام دهد.

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

// این پیام را به کاربر نشان بده
alert("سلام! به دنیای جاوااسکریپت خوش آمدید");

// و این را در کنسول مرورگر بنویس
console.log("این پیام فقط برای برنامه‌نویس است");

// دو متغیر بساز
let name = "سارا";
let age = 16;

console.log(name);

اولین برنامه: نمونه 05-js-intro

شرح مثال

• فایل جاوااسکریپت با پسوند js. ساخته می‌شود و درست قبل از </body> وصل می‌شود. چرا آخر صفحه؟ چون مرورگر فایل را از بالا به پایین می‌خواند. اگر جاوااسکریپت اول باشد، وقتی اجرا می‌شود هنوز هیچ عنصری از صفحه ساخته نشده و برنامه نمی‌تواند آنها را پیدا کند.
• alert یک پنجره کوچک به کاربر نشان می‌دهد.
• console.log پیامی در کنسول مرورگر می‌نویسد که تنها برنامه‌نویس می‌بیند. کنسول را با کلید F12 باز کنید.
• let یعنی «یک جعبه بساز». متن را داخل گیومه می‌گذاریم اما عدد را نه. توضیح در جاوااسکریپت با دو اسلش شروع می‌شود.

۶. تغییر دادن صفحه با جاوااسکریپت

کار جاوااسکریپت با صفحه دو مرحله دارد: اول عنصر را پیدا کن، بعد آن را عوض کن.

// مرحله ۱: پیدا کردن با id
let box = document.getElementById("welcome");

// مرحله ۲: عوض کردن
box.textContent = "سلام! این متن را جاوااسکریپت نوشت";
box.style.backgroundColor = "#2f4f4f";
box.style.color = "#ffffff";

تغییر صفحه: نمونه 06-js-dom

شرح مثال

document.getElementById("welcome") یعنی «در سند دنبال عنصری بگرد که id آن welcome است». همان آی‌دی فصل سوم، این بار برای جاوااسکریپت.

textContent متن داخل عنصر را عوض می‌کند و style استایلش را. تنها دقت کنید که نام ویژگی‌های CSS در جاوااسکریپت کمی فرق دارد: خط تیره حذف و حرف بعدی بزرگ می‌شود.

۷. رویداد کلیک

در فصل پنجم hover: را یاد گرفتیم: وقتی موس روی چیزی می‌رود، ظاهرش عوض می‌شود. اما CSS نمی‌تواند بفهمد کاربر کلیک کرده و بعد از آن کاری انجام دهد. این کار جاوااسکریپت است.

let btn = document.getElementById("my-button");

btn.onclick = function () {
    document.body.style.backgroundColor = "#2f4f4f";
};


// شمارنده
let number = 0;
let box = document.getElementById("count");
let countBtn = document.getElementById("count-btn");

countBtn.onclick = function () {
    number = number + 1;
    box.textContent = number;
};

رویداد کلیک: نمونه 07-js-click

شرح مثال

onclick یعنی «هنگام کلیک». آن function یک بسته از دستورهاست که تا وقتی کلیک نشود اجرا نمی‌شود. هر بار که کاربر کلیک کند، دستورهای داخلش بار دیگر اجرا می‌شوند.

در مثال شمارنده، متغیر number بیرون از تابع تعریف شده تا مقدارش بین کلیک‌ها حفظ شود. این اولین باری است که صفحه ما چیزی را «به خاطر می‌سپارد»، کاری که با CSS هرگز ممکن نبود.

۸. منوی موبایل، بالاخره

در فصل دوازدهم و چهاردهم گفتیم تنها کاری که با CSS نتوانستیم انجام دهیم، منوی موبایلی است که با دکمه باز و بسته شود. حالا حلش می‌کنیم.

<button class="menu-btn" id="menu-btn">☰</button>

<nav class="main-nav" id="main-nav">
    <a href="#">خانه</a>
    <a href="#">درباره ما</a>
    <a href="#">تماس</a>
</nav>

.menu-btn {
    display: none;
}

@media (max-width: 768px) {
    .menu-btn {
        display: block;          /* دکمه ظاهر شود */
    }

    .main-nav {
        display: none;           /* منو پنهان شود */
        flex-direction: column;
        width: 100%;
    }

    .main-nav.open {
        display: flex;           /* مگر اینکه کلاس open داشته باشد */
    }
}

let btn  = document.getElementById("menu-btn");
let menu = document.getElementById("main-nav");

btn.onclick = function () {
    menu.classList.toggle("open");
};

منوی موبایل: نمونه 08-js-menu-toggle

شرح مثال

به تقسیم کار دقت کنید، چون این تمیزترین روش کار با این سه زبان است:

• HTML تنها ساختار را دارد: یک دکمه و یک منو، هر کدام با یک id.
• CSS تمام ظاهر را دارد: پنهان شدن منو، ظاهر شدن دکمه، و یک کلاس آماده به نام open که وقتی روی منو باشد آن را نشان می‌دهد. تمام کارهای این فصل و فصل دوازدهم اینجاست.
• جاوااسکریپت تنها یک کار می‌کند: کلاس open را می‌گذارد یا برمی‌دارد. classList.toggle یعنی «اگر این کلاس هست بردار، اگر نیست بگذار». سه خط، برای حل مشکلی که دو فصل با آن درگیر بودیم.

۹. نقشه راه

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

دو مسیر شغلی

• فرانت‌اند: هر چیزی که کاربر می‌بیند. HTML، CSS، جاوااسکریپت و یک فریم‌ورک. شما همین حالا در این مسیر هستید.
• بک‌اند: هر چیزی که پشت صحنه است. سرور، پایگاه داده و امنیت. کسی که هر دو را بلد باشد، فول‌استک نامیده می‌شود.

پنج توصیه مهم

1. بسازید و فقط به خواندن اکتفا نکنید. ویدیو دیدن حس یادگیری می‌دهد اما مهارت نمی‌سازد. هر چیزی را که یاد گرفتید، همان روز پیاده کنید.
2. پروژه‌های کوچک و واقعی. سایت باشگاه مدرسه، صفحه معرفی خودتان، یک ماشین‌حساب ساده.
3. کد دیگران را بخوانید. روی هر سایتی F12 بزنید و ببینید چگونه ساخته شده است.
4. پروژه‌هایتان را نگه دارید. شش ماه بعد که به کد امروزتان نگاه کنید، پیشرفت خودتان را می‌بینید.
5. سردرگم شدن و گیر کردن بخشی طبیعی از مسیر برنامه‌نویسی است. هر برنامه‌نویسی روزی چند بار جست‌وجو می‌کند. این ضعف نیست، خودِ مهارت است.

سخن پایانی

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

بقیه مسیر بیش از هر چیز به تمرین و تجربه نیاز دارد.