برچسب: طراحی وب

طراحی وب: ۱- سلکتور

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

آناتومی کلی CSS به شکل زیر است. در ابتدا سلکتور نوشته می‌شود. و پس از آن دستورات مورد نظر درون {…} کِرلی بِرَکِت Curly Bracket می‌آید.

انواع سلکتور:

  • ساده
  • مرکب
  • شبه کلاس
  • شبه المنت
  • اتریبیوت

سلکتورهای ساده – Basic

۱- فراگیر – Universal

علامت ستاره یا Asterisk به تنهایی نوشته می شود.


* { color: black; }    /* همه المنت‌ها را برمی‌گزیند. */

۲-  نوع – Type

تگ به تنهایی نوشته می‌شود.


X { color: black; }    /* همه المنت‌هایی که با تگ X هستند را برمی‌گزیند. */

۳- کلاس – Class

در ابتدای نام کلاس علامت دات (dot)  نوشته می‌شود.


.X { color: black; }    /* المنت‌هایی که با کلاس X هستند را برمی‌گزیند. */

۴- آی دی – id

در ابتدای نام آی دی علامت هشتگ نوشته می‌شود.


#X { color: black; }    /* المنت‌هایی که با آی دی X هستند را برمی‌گزیند. */

۵- اتریبیوت – Attribute

اگر تنها نام اتریبیوت درون برکت Bracket […] نوشته شود.


[foo] { color: black; }

همه المنت‌هایی که اتریبیوت foo دارند را برمی‌گزیند. مهم نیست مقدار آن چه باشند.

اگر نام و مقدار اتریبیوت درون برکت نوشته شود.


[foo="bar"] { color: black; }

همه المنت‌هایی که اتریبیوت foo آنها برابر bar باشد را برمی‌گزیند.

سلکتورهای مرکّب – Combinator

سلکتور مرکب از ترکیب چند سلکتور ساده ساخته می‌شود.

۱-  لیست – List

سلکتورهای ساده با کاما از هم جدا می‌شوند.


X, Y { color: black; }

هر المنتی را که با یکی از سلکتورهای X یا Y هم‌خوانی دارد را برمی‌گزیند.

۲-  نوادگان – Descendant

سلکتورهای ساده با اسپیس Space از هم جدا می‌شوند.


X Y { color: black; }

هر المنت‌ Y ای که درون X هست را برمی‌گزیند. (بی واسطه یا با واسطه)

۳- فرزند بلافصل – Direct Child

سلکتورهای ساده با بزرگتر از هم جدا می‌شوند.


X > Y { color: black; }

هر المنت‌ Y ای که بی واسطه درون X هست را برمی‌گزیند.

۴- خواهر برادری – sibling

سلکتورهای ساده با تیلدا Tilde از هم جدا می‌شوند.


X ~ Y { color: black; }

هر المنت‌ Y ای که پس از X هست را برمی‌گزیند. (بلا فاصله یا با فاصله)

۵- خواهر برادری بلافصل – Adjacent sibling

سلکتورهای ساده با علامت جمع از هم جدا می‌شوند.


X + Y { color: black; }

هر المنت‌ Y ای که بلا فاصله پس از X هست را برمی‌گزیند.

سلکتورهای شبه کلاس – Pseudo-Classes

در ابتدای نام این سلکتورها یک علامت کولن Colon نوشته می‌شود.


:pseudo-classes { color: black; }

مانند یک کلاس کار می‌کند.

۱- فرزندی Child-Related

یک یا چند فرزند درون یک المنت را برمی‌گزیند.


X:first-child { color: black; }

اولین فرزند المنت X را برمی‌گزیند.


X:last-child { color: black; }

آخرین فرزند المنت X را برمی‌گزیند.


X:only-child { color: black; }

اگر المنت X تک فرزند داشت آن را برمی‌گزیند.


X:nth-child(n) { color: black; }

n امین فرزند المنت X را برمی‌گزیند.


X:nth-last-child(n) { color: black; }

n امین فرزند المنت X را از آخر برمی‌گزیند.

۲- خواهر برادری Sibling-Related

یک یا چند المنت درون یک المنت را برمی‌گزیند.


X:first-of-type { color: black; }

اولین المنت X درون یک المنت دیگر را برمی‌گزیند.


X:last-of-type { color: black; }

آخرین المنت X درون یک المنت دیگر را برمی‌گزیند.


X:only-of-type { color: black; }

المنت X را برمی‌گزیند، به شرط آنکه X درون یک المنت دیگر تک فرزند باشد.


X:nth-of-type(n) { color: black; }

n امین المنت X که درون یک المنت دیگر قرار دارد را برمی‌گزیند.


X:nth-last-of-type(n) { color: black; }

n امین المنت X از آخر که درون یک المنت دیگر قرار دارد را برمی‌گزیند.

۳- پیوندی Link-Related

بیشتر برای المنت از نوع لینک کاربرد دارد.


X:link { color: black; }

المنت X پیش از کلیک بر روی آن را برمی‌گزیند.


X:visited { color: black; }

المنت X پس از کلیک بر روی آن را برمی‌گزیند.

۴- ماوس Mouse-Related


X:hover { color: black; }

المنت X هنگامیکه نشانگر موس بر روی آن قرار گرفته است.


X:active { color: black; }

المنت X هنگامیکه کلید موس بر روی آن فشار داده شده است.


X:focus { color: black; }

المنت X هنگامیکه تمرکز بر روی آن است.

۵- ورودی – Input-Related


X:checked { color: black; }

المنت X هنگامیکه چک مارک خورده باشد.

۶- غیره


:root { color: black; }

المنت ریشه که همان html است.


:target { color: black; }

المنتی که id آن در انتهای URL آمده است.


:not(Y) { color: black; }

المنت‌هایی که Y نیستند.

سلکتورهای شبه المنت – Pseudo-Element

در ابتدای نام این سلکتورها دو علامت کولن Colon نوشته می‌شود.


::pseudo-element { color: black; }

یک المنت جدید درون المنت دیگر می‌سازد.


X::before { color: black; }

یک المنت درون یک المنت پیش از همه فرزندانش می‌سازد.


X::after { color: black; }

یک المنت درون یک المنت پس از همه فرزندانش می‌سازد.

پراپرتی content محتوای درون المنت را معیّن می‌کند.

برای تمرین و یادگیری بهتر به آدرس flukeout.github.io بروید.

مثال

در مثال زیر به کمک سلکتورهای before و after چیزی را  پیش و پس از محتوای اصلی المنت اضافه می‌کنیم.

HTML

<p>tea</p>
<p>water</p>
<p>coffee</p>
CSS

p::before {
    content: "Drinking ";
    color: Red;
}

p::after {
    content: " After Meals.";
    color: Blue;
}

مثال

در مثال زیر به کمک سلکتور before تصویری را  پیش از محتوای اصلی المنت اضافه می‌کنیم.

HTML

<p>Ali</p>
<p>Mahdi</p>
<p>Reza</p>
CSS

p::before {
    content: "";
    background: url(user.svg) no-repeat;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .1em;
}

Typicons

یک فونت اپن سورس و آزاد است که مجموعه کوچک و سبکی از آیکن‌های مورد نیاز شما را در خود فراهم آورده است. و شما می توانید آن ها را به سادگی در وب یا UI مورد نظر خود به کار برید.


موس خود را روی آیکن‌ها حرکت دهید. کد هر کدام در نوار پایین نمایش داده می‌شود. آن کد را در content به شکل زیر بنویسید.

مثال

در مثال زیر برای نمایش آیکن مورد نظر از تگ <i> استفاده شده است.

  • کلاس icon برای تنظیمات عمومی است. مثل نوع فونت، سایز، محل قرارگیری و …
  • کلاس بعدی (usr, cal, pen) تنها برای تعیین آیکن مورد نظر است. به کمک سلکتور before کد آیکن را مشخص می‌کنیم.
HTML

<p><i class="icon usr"></i>Mahdi</p>
<p><i class="icon cal"></i>May 1</p>
<p><i class="icon pen"></i>Edit</p>
CSS

@font-face {
    font-family: 'typicons';
    src: url('typicons.woff');
}

.icon::before {
    font: 1em 'typicons';
    display: inline-block;
    margin-right: .1em;
}

.usr::before { content: '\e12c'; }
.cal::before { content: '\e039'; }
.pen::before { content: '\e0c2'; }

تمرین

ابتدا یک پوشه به نام web2 بسازید. و در آن برای هر تمرین در هر جلسه پوشه‌ای جداگانه مشابه تصویر زیر بسازید. (ابتدا شماره جلسه سپس شماره تمرین)

تمرین ۱

  • این فایل را دانلود کنید.
  • آن را در فولدر web2 باز کنید.
  • با روش مثال بالا تغییراتی در آن بدهید تا همانند تصویر زیر شود

مثال

در مثال زیر می خواهیم عنوان یک دیتا را پیش از آن بنویسیم.

برای این کار به کمک سلکتور before مقدار یک اتریبیوت را  پیش از محتوای اصلی المنت اضافه می‌کنیم.

HTML

<p data-label="Firstname">Ali</p>
<p data-label="Lastname">Mahdavi</p>
<p data-label="Age">16</p>
CSS

p::before {
    content: attr(data-label)": ";
}

مثال

در مثال زیر می خواهیم عنوان عکس را زیرش نمایش دهیم.

برای این کار به کمک سلکتور after مقدار یک اتریبیوت را  پس از محتوای اصلی المنت اضافه می‌کنیم.

HTML

<picture data-title="Cute Duck">
    <img src="cute.jpg" />
</picture>
CSS

picture::after{
    content: attr(data-title);
}

مثال

در مثال زیر می خواهیم نوع یک دیتا را با نمایش یک آیکن پیش از نشان دهیم.

برای این کار به کمک سلکتور before مقدار یک اتریبیوت را  پیش از محتوای اصلی المنت اضافه می‌کنیم.

HTML

<p data-icon="&#xe12c;">Mahdi</p>
<p data-icon="&#xe039;">May 1</p>
<p data-icon="&#xe0c2;">Edit</p>
CSS

@font-face {
    font-family: 'typicons';
    src: url('typicons.woff');
}

[data-icon]::before {
    content: attr(data-icon);
    font: 1em 'typicons';
    display: inline-block;
    margin-right: .1em;
}

تمرین ۲

  • این فایل را دانلود کنید.
  • آن را در فولدر web2 باز کنید.
  • با روش مثال بالا تغییراتی در آن بدهید تا همانند تصویر زیر شود

زمان خواندن: ۸ دقیقه

جاواسکریپت
  1. مقدمه
    • تاریخچه
    • جاواسکریپت چه کارهایی می‌تواند انجام دهد؟
    • برنامه یا اسکریپت
    • شیءگرا
    • مدل آبجکت در بروزر
    • رویدادگرا
    • چگونه جاواسکریپت بنویسیم؟
  2. سینتکس (Syntax)
    • قواعد دستور زبان – Syntax
    • آغاز کار در جاواسکریپت
    • آبجکت window
    • آبجکت console
    • آبجکت document
  3. فرم (Forms)
    • form
    • button
    • input
    • label
  4. دیتا (Data)
    • نگهداری دیتا
      • متغیر
      • ثابت
    • انواع دیتا – Data Types
      • ساده (Primitive)
        • عدد (Numbers)
        • رشته (Strings)
        • منطقی (Boolean)
      • مرکب (Composite)
        • شیء (Objects)
        • آرایه (Arrays)
        • تابع (Functions)
      • بی‌ارزش (Trivial)
        • تهی (null)
        • نامعین (undefined)
    • تبدیل دیتا
  5. اکسپرشن (Expressions)
    • آپریتورهای استرینگ
    • آپریتورهای حساب
    • آپریتورهای بولین
    • آپریتورهای مقایسه‌ای
    • الویت آپریتورها
    • آبجکت Number
  6. کاندیشن۱ (Conditions)
    • تِرنِری – Ternary (?)
    • شرط if
    • اسکوپ – Scope
    • آبجکت Math
  7. کاندیشن۲ (Conditions)
    • سوئیچ – Switch
    • آبجکت String
  8. فانکشن (Functions)
    • نوع ۱
    • نوع ۲
  9. ایونت (Events)
    • روش ۱
    • روش ۲
    • روش ۳
    • ایونت‌های ماوس
  10. لوپ (Loops)
    • حلقه do
    • حلقه while
    • حلقه for
    • break
    • continue
  11. آرایه (Arrays)
    • تعریف
    • فانکشن
  12. سلکت
زمان خواندن: ۱ دقیقه

جاواسکریپت: ۱۲- سلکت

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

برای سرچ در صفحه و سلکت بخشی از آن چندین متد وجود دارد.

  • getElementById
  • getElementsByName
  • getElementsByTagName
  • getElementsByClassName
  • querySelector
  • querySelectorAll

یافتن المنت با id

متد getElementById پرکاربردترین متد جاواسکریپت است. در فایل HTML هر المنت می‌تواند id داشته باشد. و همیشه id باید در هر فایل یکتا باشند. به زبان دیگر در یک فایل HTML دو المنت نمی‌توانند یک id مشترک داشته باشند. بنابر این هر getElementById تنها یک المنت را می‌گیرد.

HTML

<h1 id="hi">Hello World!</h1>
JS

const hi = document.getElementById('hi');

یافتن المنت‌ها با اتریبیوت name

متد getElementsByName بر اساس اتریبیوت name در المنت‌های HTML عمل می‌کند. در فایل HTML هر المنت می‌تواند یک name داشته باشد. ولی name لازم نیست، یکتا باشند. یعنی در یک فایل HTML دو یا چند المنت می‌توانند یک name یکسان داشته باشند. و getElementsByName یک آرایه از المنت‌ها را می‌گیرد.

به حرف s در Elements توجه کنید. که همه المنت‌ها، با آن name را شامل می‌شود. این آرایه از اندیس صفر برای اولین المنت شروع می‌شود و به تعداد المنت‌های با آن name ادامه پیدا می‌کند.

HTML

<input type="text" name="firstname">
JS

const fname = document.getElementsByName('firstname')[0];

یافتن المنت‌ها با تگ HTML

متد getElementsByTagName بر اساس Tag المنت‌های HTML جستجو می‌کند. در فایل HTML هر المنت یک Tag دارد. و getElementsByTagName یک آرایه از المنت‌ها را می‌گیرد.

به حرف s در Elements توجه کنید. که همه المنت‌ها، درون آن Tag را شامل می‌شود. این آرایه از اندیس صفر برای اولین المنت شروع می‌شود و به تعداد المنت‌های با آن Tag ادامه پیدا می‌کند.

HTML

<h1>Hello World!</h1>
JS

const hi = document.getElementsByTagName('h3')[0];

یافتن المنت‌ها با کلاس

متد getElementsByClass بر اساس Class المنت‌های HTML جستجو می‌کند. در فایل HTML هر المنت می‌تواند یک Class داشته باشد. و getElementsByClass یک آرایه از المنت‌ها را می‌گیرد.

به حرف s در Elements توجه کنید. که همه المنت‌ها، که دارای آن Class هستند، را شامل می‌شود. این آرایه از اندیس صفر برای اولین المنت شروع می‌شود و به تعداد المنت‌های با آن class ادامه پیدا می‌کند.

HTML

<h1 class="title">Hello World!</h1>
JS

const hi = document.getElementsByClass('title')[0];

یافتن المنت با سلکتور CSS

متد querySelector بر اساس سلکتور CSS المنت‌ها در HTML جستجو می‌کند. و querySelector اولین المنت که با شرایط سلکتور هماهنگ باشد را می‌گیرد.

HTML

<h1 class="title">Hello World!</h1>
JS

const hi = document.querySelector('h1.title');

یافتن المنت‌ها با سلکتور CSS

متد querySelectorAll بر اساس سلکتور CSS المنت‌ها در HTML جستجو می‌کند. و querySelectorAll یک آرایه از المنت‌هایی که با شرایط سلکتور هماهنگ باشد را می‌گیرد.

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

HTML

<h1 class="title">Hello World!</h1>
JS

const hi = document.querySelectorAll('h1.title')[0];
زمان خواندن: ۳ دقیقه

جاواسکریپت: ۱۱- آرایه

آرایه (Array) چندین متغیر با یک نام است. هر یک از متغیرهای درون آرایه با یک شماره که به آن ایندکس (Index) می‌گوییم؛ از یکدیگر متمایز می‌شوند. هر یک از متغیرهای درون آرایه را اِلمنت‌، می‌نامند.

قواعد نام گذاری آرایه

  • قواعد نامگذاری آرایه همانند متغیر است.
  • ایندکس درون […] بِرَکِت Square Bracket نوشته می‌شود.
  • ایندکس همیشه از عدد صفر آغاز می‌شود.

مراحل استفاده از آرایه

  • Declare: تعیین نام آرایه و اختصاص فضا در حافظه
  • Assignment: نوشتن مقدار در آن
  • Access: خواندن مقدار از آن

روش‌های استفاده از آرایه

1.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Access
alert(color[0]);    // red
alert(color[1]);    // gold
alert(color[2]);    // olive
alert(color[3]);    // beige
alert(color[4]);    // khaki

2.

// Declare
let color = [];

// Assignment
color[0] = "red";
color[1] = "gold";
color[2] = "olive";
color[3] = "beige";
color[4] = "khaki";

// Access
alert(color[0]);    // red
alert(color[1]);    // gold
alert(color[2]);    // olive
alert(color[3]);    // beige
alert(color[4]);    // khaki

تغییر مقدار یک المنت

شما همیشه می‌توانید مقدار درون هر یک از المنت‌های آرایه را تغییر دهید.


// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Access
alert(color[2]);    // olive

// Change
color[2] = "lime";

// Access
alert(color[2]);    // lime

افزودن یک المنت

شما همیشه می‌توانید یک المنت، به انتهای آرایه بیفزایید.


// Declare & Assignment
let color = ["red", "gold", "olive", "beige"];

// Access
alert(color[4]);    // undefined 

// Add Element
color[4] = "khaki";

// Access
alert(color[4]);    // khaki

arr.length

تعداد المنت‌های آرایه را ارائه می‌کند.


// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
color[5] = "lime";

// Count
alert(color.length);    // 6

حفره تعریف نشده

افزودن المنت می‌تواند در بین آرایه حفره تعریف نشده (undefined holes) ایجاد کند.


// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
color[7] = "lime";

// Count
alert(color.length);    // 8

arr.push(elm1, elm2, …)

برای پرهیز از ایجاد حفره تعریف نشده، با این دستور یک یا چند المنت به انتهای آرایه بیفزایید.

این فانکشن تعداد جدید المنت‌های آرایه را برمی‌گرداند.


// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let n = color.push("lime");

// Access
alert(n);    // 6
alert(color) // red, gold, olive, beige, khaki, lime

arr.pop( )

آخرین المنت آرایه را حذف می‌کند و مقدار آن را برمی‌گرداند.


// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let c = color.pop();

// Access
alert(c);    // khaki
alert(color) // red, gold, olive, beige

arr.shift( )

اولین المنت آرایه را حذف می‌کند و مقدار آن را برمی‌گرداند.


// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let c = color.shift();

// Access
alert(c);    // red
alert(color) // gold, olive, beige, khaki

arr.unshift(elm1, elm2, …)

یک یا چند المنت به ابتدای آرایه می‌افزاید. و تعداد جدید المنت‌های آرایه را برمی‌گرداند.


// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let n = color.unshift("lime");

// Access
alert(n);    // 6
alert(color) // lime, red, gold, olive, beige, khaki

arr.splice(start, delCount, elm1, elm2, …)

یک یا چند المنت در میان آرایه حذف یا اضافه می‌کند. المنت‌های حذف شده را برمی‌گرداند.

1.

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3);

// Access
alert(color1);    // red, gold, olive
alert(color2);    // beige, khaki, lime
2.

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3,2);

// Access
alert(color1);    // red, gold, olive, lime
alert(color2);    // beige, khaki
3.

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3,2, "pink", "blue", "tan");

// Access
alert(color1);    // red, gold, olive, pink, blue, tan, lime
alert(color2);    // beige, khaki
4.

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3, 0, "pink", "tan");

// Access
alert(color1);  // red, gold, olive, pink, tan, beige, khaki, lime
alert(color2);  // []

arr.concat(arrX, arrY, …)

دو یا چند آرایه را به هم پیوند می‌دهد و یک آرایه برمی‌گرداند.


// Declare & Assignment
let color = [];
let color1 = ["red", "gold", "olive"];
let color2 = ["beige", "khaki", "lime"];

color = color1.concat(color2);

// Access
alert(color1);    // red, gold, olive
alert(color2);    // beige, khaki, lime
alert(color);    // red, gold, olive, beige, khaki, lime

arr.sort( )

المنت‌های یک آرایه را به ترتیب الفبا، مرتب می‌کند. و المنت‌های تعریف نشده را حذف می‌کند.


// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki", "lime"];

color.sort();

// Report
alert(color);  // beige, gold, khaki, lime, olive, red

arr.sort(function(a, b) {…})

استفاده از متد sort بدون پارامتر، آرایه را به ترتیب الفبا مرتب می‌کند. بنابراین اگر به ترتیب عدد یا ترتیب دیگری بخواهید sort کنید؛ باید از یک فانکشن برای مقایسه استفاده کنید. این فانکشن دو پارامتر را می‌گیرد و پس از انجام عملیات روی آنها، یک عدد برمی‌گرداند. مثبت یا منفی بودن آن عدد نشان می‌دهد که کدامیک از دو پارامتر باید قبل از دیگری باشد.

  • اگر function(a, b) < 0 بود؛ a قبل از b
  • اگر function(a, b) = 0 بود؛ جای a و b تغییر نمی‌کند.
  • اگر function(a, b) > 0 بود؛ a بعد از b

اگر بخواهید یک مجموعه از اعداد را از کوچک به بزرگ sort کنید می‌توانید از فانکشن زیر استفاده نمایید.


const compare = function(a, b) {

  if (a < b) { return -1; }

  if (a > b) { return 1;  }

  // a = b
  return 0;
}

// Short form
const compare = function(a, b) {
  return a - b;
}

// Arrow form
const compare = (a, b) => a - b;

این فانکشن را می توانید مستقیما در sort تعریف کنید.


// Declare & Assignment
let num = [4, 2, 5, 1, 3];

num.sort((a, b) => a - b);

// Report
alert(num);  // 1, 2, 3, 4, 5

arr.filter(function(value, index) {…})

با المنت‌هایی که تست را پاس کنند، یک آرایه جدید می سازد.

  • متد filter یک فانکشن را به عنوان پارامتر می‌گیرد.
  • این فانکشن دو پارامتر می‌تواند داشته باشد. اولی مقدار المنت و دومی ایندکس آن.
  • باید این فانکشن مقدار true یا false را برگرداند.

مثال زیر المنت‌های فرد را حذف می‌کند.


// Declare & Assignment
let num = [4, 2, 5, 1, 3];

let result = num.filter(val => val % 2 == 0);

// Report
alert(result);  // 4, 2

arr.map(function(value, index) {…})

یک فانکشن را روی همه المنت‌های آرایه اجرا می‌کند و آرایهٔ جدید می‌سازد.

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

مثال زیر مقدار هر المنت‌ را دو برابر می‌کند.


// Declare & Assignment
let num = [4, 2, 5, 1, 3];

let result = num.map(val => val * 2);

// Report
alert(result);  // 8, 4, 10, 2, 6

تمرین ۱

  • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • تنها فایل script.js را می‌توانید تغییر دهید.
  • ابتدا تعدادی عدد را بگیرد سپس میانه آنها را محاسبه و گزارش کند. (تعداد اعداد از پیش معلوم نیست.)

زمان خواندن: ۶ دقیقه

جاواسکریپت: ۱۰- لوپ

حلقه تکرار – Iterative Loop

گاهی شما می‌خواهید قطعه‌ای از کد، چندین بار اجرا شود. در این صورت باید از حلقه تکرار استفاده کنید. (بیشتر…)

زمان خواندن: ۸ دقیقه