یادگیری زبان جاوا اسکریپت بصورت تئوری – قسمت دوم

آموزش زبان برنامه‌نویسی جاوا اسکریپت (JavaScript) – قسمت دوم
آنچه در این مطلب می‌خوانید

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

در قسمت اول آموزش رایگان جاوا اسکریپت به مباحث اولیه زبان جاوا اسکریپت، متغیرها و عملگرهای آن پرداختم. در این قسمت قصد دارم تا مباحث دیگری همچون تابع ریاضی، حلقه‌ها و دستورات شرطی صحبت کنم. در ادامه در مطلب آموزش رایگان جاوا اسکریپت با ما همراه باشید.

توابع ریاضی از جمله موارد کاربردی در هر زبان برنامه‌نویسی می‌باشد. زبان برنامه‌نویسی جاوا اسکریپت نیز از این قاعده مستثنی نبوده و از توابع ریاضی پشتیبانی می‌کند. برای استفاده از توابع ریاضی در جاوا اسکریپت از کلاس Math استفاده می‌شود.

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

  1. متد PI که عدد پی را به شما می دهد.
  2. متد round که عدد مورد نظر را به نزدیک عدد صحیح آن گرد می‌کند.
  3. متد pow که نقش توان را دارد. دو مقدار دریافت می‌کند که مقدار اول، عدد مورد نظر و مقدار دوم، توان آن می‌باشد.
  4. متد sqrt که برای گرفتن جذر از عدد است.
  5. متد abs که قدر مطلق عدد مورد نظر را می‌دهد.
  6. متد ceil که عدد مورد نظر را به سمت عدد صحیح بالا رند می‌کند.
  7. متد floor که عدد مورد نظر را به سمت عدد صحیح پایین رند می‌کند.
  8. متد max و min که به ترتیب حداکثر و حداقل مقدار را در بین ورودی های داده شده به آن، به شما می‌دهد.
  9. متد random که به شما یک مقدار تصادفی بین ۰ تا ۱ در حالت پیش‌فرض می‌دهد.

کلاس ریاضی در آموزش رایگان جاوا اسکریپت همچنین از توابع مثلثاتی نیز پیروی می‌کند.

Math.PI;

Math.round(4.7);    // returns 5
Math.round(4.4);    // returns 4

Math.pow(8, 2);      // returns 64

Math.sqrt(64);      // returns 8

Math.abs(-4.7);     // returns 4.7

Math.ceil(4.4);     // returns 5

Math.floor(4.7);    // returns 4

Math.sin(90 * Math.PI / 180);     // returns 1 (the sine of 90 degrees)

Math.random();     // returns a random number

Math.min(0, 150, 30, 20, -8, -200);  // returns -200

Math.max(0, 150, 30, 20, -8, -200);  // returns 150

متد random

یکی از متدهای جذاب کلاس ریاضی زبان برنامه نویسی جاوا اسکریپت، random می‌باشد. همانطور که گفتم در حالت عادی این متد عددی بین ۰ و ۱ به شما می‌‌دهد. اما این امکان وجود دارد تا با ضرب در ۱۰، ۱۰۰، ۱۰۰۰ و … اعداد رندوم در بین اعداد بزرگتر نیز ایجاد کنید. در صورتی که قصد دارید تا عدد صحیح رندوم ایجاد کنید، از متد floor در کنار متد random می‌توانید استفاده کنید.

Math.floor(Math.random() * 10);     // returns a random integer from 0 to 9

Math.floor(Math.random() * 11);      // returns a random integer from 0 to 10

Math.floor(Math.random() * 100);     // returns a random integer from 0 to 99

Math.floor(Math.random() * 101);     // returns a random integer from 0 to 100

Math.floor(Math.random() * 10) + 1;  // returns a random integer from 1 to 10

Math.floor(Math.random() * 100) + 1; // returns a random integer from 1 to 100

اکنون قصد دارم تا یک تابع به شما معرفی کنم که با استفاده از آن تابع، با دادن ورودی به تابع مورد نظر، اعداد رندوم تولید کنید. این متد بسیار ساده است، شما یک مقدار حداقل و یک مقدار حداکثر به ورودی تابع در هنگام فراخوان می‌دهید و در داخل تابع مورد نظر، اختلاف حداقل و حداکثر را در متد random ضرب می‌کند و سپس floor آن را دریافت می‌کند و به مقدار حداقل اضافه می‌کند تا در بازه‌ی مورد نظر شما، عدد رندوم تولید شود.

function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min) ) + min;
  }

در مثال زیر استفاده از تابع بالا در یک html را می‌توانید مشاهده کنید:

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Math.random()</h2>

    <p>
      Every time you click the button, getRndInteger(min, max) returns a random
      number between 0 and 9 (both included):
    </p>

    <button
      onclick="document.getElementById('demo').innerHTML = getRndInteger(0,10)"
    >
      Click Me
    </button>

    <p id="demo"></p>

    <script>
      function getRndInteger(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
      }
    </script>
  </body>
</html>

دستورات شرطی و حلقه‌ها

موضوع بعدی که به آن خواهم پرداخت دستورات شرطی و حلقه‌ها می‌باشد.

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

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

if (condition) {
  //  block of code to be executed if the condition is true
}

if (hour < 18) {
  greeting = "Good day";
}

if (condition) {
  //  block of code to be executed if the condition is true
} else {
  //  block of code to be executed if the condition is false
}

if (hour < 18) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

if (condition1) {
  //  block of code to be executed if condition1 is true
} else if (condition2) {
  //  block of code to be executed if the condition1 is false and condition2 is true
} else {
  //  block of code to be executed if the condition1 is false and condition2 is false
}

if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

دستور switch

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

در صورتی که خروجی شرط تعریفی switch بامقدار هر یک از case برابری می‌کرد، دستورات داخل case مورد نظر اجرا می‌شوند. دستور break در انتهای دستورات داخل case به معنی پایان دستور switch می‌باشد. در صورتی که هیچ یک از case ها برقرار نباشد، دستورات داخل default اجرا می‌شود.

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}

یک نکته‌ای که در رابطه با دستور switch نیاز است تا رعایت کنید، این می‌باشد که دستور switch در مقایسه معادل === عمل می‌کند. برای درک بهتر به مثال زیر توجه کنید، در این مثال متغیر x به صورت یک عدد از نوع رشته، تعریف شده است، اما شرط case ها، یک عدد از نوع عددی می‌باشد.

به دلیل اینکه “۰” === ۰ نمی‌باشد، در نتیجه دستور داخل default اجرا می‌شود. این نکته ای می‌باشد که در استفاده از دستور switch حتما نیاز است تا به آن توجه کنید.

var x = "0";
switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}

دستورات شرطی به همین سادگی که می‌بینید می‌باشند اما بسیار پرکاربرد هستند.

حلقه‌های for و حلقه‌های while

بعد از دستورات شرطی به سراغ حلقه‌ها می روم. حلقه‌ها به دو دسته‌ی حلقه‌های for و حلقه‌های while تقسیم می‌شوند. ابتدا از حلقه‌های for شروع می‌کنم. برای اینکه متوجه شوید چرا استفاده از حلقه‌ی for موجب کدنویسی بهتر و بهینه‌تر می‌شود. به نمونه‌ی زیر توجه کنید. شما می‌توانید به هر دو شکل زیر یک متغیر داشته باشید. اما در حال اول باید هر کدام را در یک خط جداگانه بنویسید اما در حالت استفاده از حلقه‌ی for تنها با دو خط می‌توانید همان دستور را اجرا کنید. شاید در تعداد کم کاربرد حلقه‌ی for به چشم نیاید، اما فرض کنید به جای این تعداد محدود، ۱۰۰۰ خط از همین کد مورد استفاده بود، در این حالت استفاده از حلقه‌ها بسیار کاربردی می‌باشد.

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

حلقه‌ها به ۵ دسته مختلف تقسیم می‌شوند:

  • for: در این حالت شما یک متغیر تعریف می‌کنید و برای آن نقطه انتهایی و میزان تغییر آن در هر بار اجرای حلقه را مشخص می‌کنید.
  • for/in: در این حالت زمانی مورد استفاده قرار می‌گیرد که شما یک شی (object) دارید و قصد دارید تا ویژگی‌های آن را داشته باشید.
  • for/of: در این حالت نیز زمانی که یک شی قابل پیاده‌سازی حلقه دارید و قصد دارید تا مقادیر هر یک از شی‌ها را بدست آورید.
  • while: این دستور نیز زمانی استفاده می‌شود که شما قصد دارید تا یک حلقه را تا زمانی که شرط مورد نظرتان برقرار نیست، اجرا شود.
  • do/while: این دستور نیز مشابه دستور while می‌باشد، با این تفاوت که دستورات اجرایی مورد نظر با استفاده از do تعریف می‌شود.

نمونه‌ای استفاده از دستور for

در مثال زیر چند حالت مختلف قابل تعریف دستور for را می‌توانید مشاهده کنید. هر قسمت از تعریف دستور for با استفاده از ; از یکدیگر جدا شده اند. تا زمانی که این نشانه استفاده نشده است، در تعریف آن قسمت قرار دارید.

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

for (i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

var i = 0;
var len = cars.length;
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

استفاده از دستور for/in:

var person = {fname:"John", lname:"Doe", age:25};

var text = "";
var x;
for (x in person) {
  text += person[x];
}

استفاده از دستور for/of:

for (variable of iterable) {
  // code block to be executed
}

var cars = ['BMW', 'Volvo', 'Mini'];
var x;

for (x of cars) {
  document.write(x + "<br >");
}

var txt = 'JavaScript';
var x;

for (x of txt) {
  document.write(x + "<br >");
}

استفاده از دستور while:

while (condition) {
  // code block to be executed
}

while (i < 10) {
  text += "The number is " + i;
  i++;
}

استفاده از دستور do/while:

do {
  // code block to be executed
}
while (condition);

do {
  text += "The number is " + i;
  i++;
}
while (i < 10);

تفاوت دستور while و do/while

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

در دستورات شرطی و حلقه‌ها، ممکن است، حالتی پیش ‌آید که شما قصد دارید تا در صورتی که شرط خاصی در داخل حلقه برقرار  بود، از اجرای ادامه‌ی حلقه جلوگیری شود و اصطلاحا از حلقه خارج شوید. برای اینکار از دستور break استفاده می‌شود که پیش تر در دستور switch/case مشاهده کردید. در مثال زیر زمانی که مقدار متغیر i برابر با ۳ شود، اجرای حلقه متوقف می‌شود.

for (i = 0; i < 10; i++) {
  if (i === 3) { break; }
  text += "The number is " + i + "<br>";
}

دستور continue

دستور دیگری نیز وجود دارد که از حلقه شما را خارج نمی‌کند اما از اجرای دستورات بعد از شرط مورد نظر در حلقه جلوگیری می‌کند و به حلقه بعدی می‌رود. این دستور continue می‌باشد. در مثال زیر، زمانی که مقدار متغیر i برابر با ۳ باشد، دستور مقدار دهی text اجرا نمی‌شود و به حلقه بعدی می‌رود.

for (i = 0; i < 10; i++) {
  if (i === 3) { continue; }
  text += "The number is " + i + "<br>";
}

یک قابلیتی در نسخه‌های جدیدتر جاوا اسکریپت اضافه شده است به نام arrow function. این ویژگی به شما این امکان را می‌دهد تا بتوانید توابع را به صورت کوتاه‌تری بنویسید و اجرا کنید. به مثال زیر توجه کنید:

در این مثال با استفاده مدل arrow function، عبارت کوتاه تری نوشته شده است.

hello = function() {
  return "Hello World!";
}
hello = () => {
  return "Hello World!";
}

اگر که شما تنها یک خروجی داشته باشید، از این نیز کوتاه تر می‌توانید بنویسید:

hello = () => "Hello World!";

این نوع از توابع نیز مشابه توابع عادی، می‌توانید مقدار ورودی دریافت کند:

hello = (val) => "Hello " + val;

hello = val => "Hello " + val;

arrow function

مورد بعدی در رابطه با arrow function ها، استفاده از عبارت this می‌باشد. به دو مثال زیر توجه کنید.

در مثال اول، که از حالت عادی تعریف توابع استفاده شده است، عبارت this به به شی‌ای که تابع مورد نظر را صدا می‌زند اشاره می‌کند اما در حالت استفاده از arrow function، عبارت this به شی‌ای که با آن تابع مورد نظر تعریف شده است، اشاره می‌کند.

به همین خاطر در مثال اول، در هر بار صدا زدن تابع، همان مورد اجرا می‌شود. اما در حالت دوم، window را که در سری اول با آن تابع صدا زده شده است، دوبار بازگردانده می‌شود.

//Regular Function:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

//The window object calls the function:
window.addEventListener("load", hello);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

//Arrow Function:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

//The window object calls the function:
window.addEventListener("load", hello);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

کنترل خطاها

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

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

try {
  // Block of code to try
}
catch(err) {
  // Block of code to handle errors
}

مثالی از استفاده از آن:

<p id="demo"></p>

<script>
  try {
    adddlert("Welcome guest!");
  } catch (err) {
    document.getElementById("demo").innerHTML = err.message;
  }
</script>

که با استفاده از err و عبارت err.message می‌توانید پیام مورد نظر با ارور مورد نظر را نمایش دهید.

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

throw "Too big";    // throw a text
throw 500;          // throw a number

نمونه‌ای از استفاده از این دستور

زمانی که هر یک از شرط ها بر قرار نباید، عبارت throw نمایش داده می‌شود. با استفاده از این دستور شما می‌توانید خطاهای شخصی سازی شده ایجاد کنید.

<!DOCTYPE html>
<html>
  <body>
    <p>Please input a number between 5 and 10:</p>

    <input id="demo" type="text" />
    <button type="button" onclick="myFunction()">Test Input</button>
    <p id="p01"></p>

    <script>
      function myFunction() {
        var message, x;
        message = document.getElementById("p01");
        message.innerHTML = "";
        x = document.getElementById("demo").value;
        try {
          if (x == "") throw "empty";
          if (isNaN(x)) throw "not a number";
          x = Number(x);
          if (x < 5) throw "too low";
          if (x > 10) throw "too high";
        } catch (err) {
          message.innerHTML = "Input is " + err;
        }
      }
    </script>
  </body>
</html>

دستور finally

دستور آخر در کنترل خطاها، finally می‌باشد. این دستور در نهایت بعد از try/catch دستور آن اجرا می‌شود.

try {
  // Block of code to try
} catch (err) {
  // Block of code to handle errors
} finally {
  // Block of code to be executed regardless of the try / catch result
}

function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try {
    if (x == "") throw "is empty";
    if (isNaN(x)) throw "is not a number";
    x = Number(x);
    if (x > 10) throw "is too high";
    if (x < 5) throw "is too low";
  } catch (err) {
    message.innerHTML = "Error: " + err + ".";
  } finally {
    document.getElementById("demo").value = "";
  }
}

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

در اینجا قصد دارم تا چند نوع از این ارورها را تعریف کنم.

خطاتعریف
SyntexErrorدر صورتی که مشکلی در دستورات باشد، خطا می‌دهد
RangeErrorعدد مورد نظر در خارج از بازه‌ی مورد نظر باشد
ReferenceErrorمتغیر پیش از استفاده تعریف نشده است.
TypeErrorنوع داده ی تعریف شده صحیح نمی باشد.

نمونه‌ای از استفاده از خطاها در آموزش رایگان جاوا اسکریپت

var num = 1;
try {
  num.toPrecision(500);   // A number cannot have 500 significant digits
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

var x;
try {
  x = y + 1;   // y cannot be referenced (used)
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

try {
  eval("alert('Hello)");   // Missing ' will produce an error
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

var num = 1;
try {
  num.toUpperCase();   // You cannot convert a number to upper case
}
catch(err) {
  document.getElementById("demo").innerHTML = err.name;
}

شما با استفاده از err.name می‌توانید نام خطای مورد نظر را نمایش دهید.

در آخرین مبحث از جاوا اسکریپت قصد دارم تا به regex بپردازم. Regex یک قابلیتی است که به شما این امکان را می‌دهد تا بتوانید بر اساس الگوهای خاصی، به جست و جوی عبارت، کلمه خاصی بپردازید.

Regex دارای متدهای مختلفی می‌باشد

  • متد Search: با استفاده از این متد می‌توانید الگوی خاصی و یا کلمه خاصی را در داخل عبارت مورد نظرتان جست و جو کنید. این الگوی خاص می‌تواند به گونه‌ای باشد که تنها اعداد را به شما بدهد و یا اینکه عبارت هایی را به شما بدهد که در داخل آن عدد قرار دارد و یا تنها ایمیل‌ها را به شما بدهید و بسیاری کاربرد دیگر.
  • متد replace: با استفاده از این متد می‌توانید یک عبارت را با عبارت دیگری جایگزین کنید.
var str = "Visit W3Schools!";
var n = str.search("W3Schools");

var str = "Visit W3Schools";
var n = str.search(/w3schools/i);

var str = "Visit Microsoft!";
var res = str.replace("Microsoft", "W3Schools");

var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3Schools");

الگوهای مختلفی با استفاده از regex می‌توانید تعریف کنید. برای تعریف این الگوهای خاص می‌توانید از کاراکترهای ویژه‌ای که در Regex تعریف شده است، استفاده کنید.

کاراکترتوضیحمثال
[]مشخص کردن کاراکترهای خاص“[a-m]”
\توالی‌های خاص را مشخص می‌کند. با نمادهای مشخص قابل استفاده است.“\d”
.تمامی کاراکترها را مشخص می‌کند.“he..o”
^با چه چیزی شروع شده باشد.“^hello”
$با چه چیزی تمام شده باشد.“world$”
*هیچ تعداد و یا بیشتر از یک چیز خاصی وجود داشته باشد.“aix*”
+یک و یا بیشتر از یک چیز خاصی وجود داشته باشد.“aix+”
{}دقیقا به اندازه تعداد مشخصی از یک چیزی وجود داشته باشد.“al{2}”
|این یا آن“falls|stays”
()به صورت یک گروه در می‌آورد.

در جدول زیر، کاراکترهایی که با / معنا پیدا می‌کنند، تعریف شده‌اند.

کاراکترتوضیحمثال
\Aدر صورتی که شروع مقداری با مقدار بعد از این کاراکتر مشابهت داشته باشد، مقدار مورد نظر را بر می‌گرداند.این کاراکتر قبل از مقدار مورد نظر قرار می‌گیرد.“\AThe”
\bدر صورتی که ابتدا یا انتهای مقداری با مقدار قبل و یا بعد از این کاراکتر مشابهت داشته باشد، مقدار مورد نظر را بر می‌گرداند. این کاراکتر ابتدا و یا انتهای مقدار مورد نظر قرار می‌گیرد.r”\bain”
r”ain\b”
\Bدر صورتی که ابتدا یا انتهای مقداری با مقدار قبل و یا بعد از این کاراکتر مشابهت نداشته باشد، مقدار مورد نظر را بر می‌گرداند. کاراکتر ابتدا و یا انتهای مقدار مورد نظر قرار می‌گیرد.r”\Bain”
r”ain\B”
\dدر صورتی که در متن مورد نظر عدد وجود داشته باشد، اعداد را بر می‌گرداند.“\d”
\Dمقادیری از متن که در آن عدد وجود ندارد را بر می‌گرداند.“\D”
\sدر صورتی که فاصله (white-space) در متن وجود داشته باشد، مشابهت بر می‌گرداند.“\s”
\Sدر صورتی که فاصله (white-space) در متن وجود نداشته باشد، مشابهت بر می‌گرداند.“\S”
\wمقادیری از متن که در آن حروف وجود دارد را بر می‌گرداند.“\w”
\Wمقادیری از متن که در آن حروف وجود ندارد را بر می‌گرداند.“\W”
\Zدر صورتی که پایان مقداری با مقدار قبل این کاراکتر مشابهت داشته باشد، مقدار مورد نظر را بر می‌گرداند. این کاراکتر انتهای مقدار مورد نظر قرار می‌گیرد.“Spain\Z”

در جدول زیر در داخل [] عبارت خاصی قرار می‌گیرد که معنی خاصی دارد.

عبارتتوضیح
[]در داخل [] می‌توان کاراکترهای مشخصی نوشت و در صورتی که با کاراکترهای درون [] مشابهت وجود داشته باشد، آن را بر می‌گرداند. این کاراکترها هم شامل حروف می‌باشد و هم عدد.
[a-n]در صورتی که با حروف کوچک الفبای بین a-n مشابهتی وجود داشته باشد، آن را بر می‌گرداند. این بازه می‌تواند متناسب با نیاز متفاوت باشد. در صورتی که حروف بزرگ مد نظر باشد، به صورت حروف بزرگ باید نوشته شود.
[^arn]در داخل [] می‌توان کاراکترهای مشخصی نوشت و در صورتی که با کاراکترهای درون [] مشابهت وجود نداشته باشد، آن را بر می‌گرداند.
[۰-۹]در صورتی که بین ۰ تا ۹ در داخل متن مشابهتی وجود داشته باشد، آن را بر می‌گرداند. این بازه می‌تواند متناسب با نیاز متفاوت باشد.
[۰-۵][۰-۹]در صورتی که بین ۰۰ تا ۵۹ در داخل متن مشابهتی وجود داشته باشد، آن را بر می‌گرداند. این بازه می‌تواند متناسب با نیاز متفاوت باشد. با این دستور می‌توان بین اعداد دو رقمی جست‌وجو انجام داد و به همین ترتیب برای ارقام بیشتر.
[a-zA-Z]تمامی حروف الفبای بین a-z (چه با حروف بزرگ و چه با حروف کوچک) مشابهتی وجود داشته باشد، آن را بر می‌گرداند. این بازه می‌تواند متناسب با نیاز متفاوت باشد.
[+]در صورتی که + در متن وجود داشته باشد، آن را بر می‌گرداند و به همین ترتیب برای علائم دیگری همچون *, ., |, (), $,{}.

یکی از سایت‌های بسیار خوب برای تمرین regex، سایت این می‌باشد. حتما با regex کار کنید و سعی کنید، آشنایی و تسلط خوبی بر روی آن داشته باشید.

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

https://maktabkhooneh.org/mag/article-of-javascript-programming-language-tutorial-part-ii/
تصویر مهناز محمدی

مهناز محمدی

0 0 امتیازها
امتیاز دهی به محتوا
مشترک شوید
اطلاع از
guest
0 دیدگاه
قدیمی ترین
جدید ترین دیدگاه با تعداد رای زیاد
بازخورد (Feedback) های اینلاین
نمایش تمام دیدگاه ها
مقالات بیشتر
بهترین قالب‌های وردپرس رایگان

بهترین قالب های وردپرس رایگان؛ راهنمای انتخاب

بهترین قالب‌های وردپرس

بهترین قالب‌های وردپرس؛ راهنمای انتخاب حرفه‌ای‌ترین پوسته‌های فارسی

آموزش نصب درگاه پرداخت در وردپرس

راهنمای کامل نصب و اتصال درگاه پرداخت در وردپرس و ووکامرس

آموزش افزونه رنک مث برای سئو

آموزش جامع و گام‌به‌گام افزونه رنک مث (Rank Math)

راهنمای جامع انتخاب بهترین افزونه افزایش سرعت سایت وردپرس تصویر 1: بهترین افزونه افزایش سرعت وردپرس وقتی یک سایت وردپرسی دیر باز می‌شود، کاربر منتظر نمی‌ماند و همین چند ثانیه تاخیر می‌تواند تجربه کاربری و مسیر خرید را تحت تاثیر قرار دهد. انتخاب افزونه مناسب هم به نوع سایت، میزان ترافیک و زیرساخت آن بستگی دارد؛ ابزاری که برای یک فروشگاه پرترافیک مناسب است، لزوما بهترین گزینه برای یک وبلاگ سبک یا سایت شرکتی نیست. از طرفی، نصب چند افزونه قدرتمند بدون تنظیمات درست می‌تواند باعث تداخل شود. در این راهنما، بهترین افزونه‌های افزایش سرعت وردپرس را از نظر قابلیت‌ها، امکانات رایگان و پولی و کاربرد بررسی می‌کنیم تا بتوانید گزینه مناسب سایت خود را انتخاب و یک Stack بهینه برای افزایش سرعت بسازید. چرا سرعت لود سایت برای سئو و فروش شما حیاتی است؟ سرعت سایت، اولین تجربه کاربر از کیفیت یک وب‌سایت است. وقتی صفحه سریع و روان نمایش داده می‌شود، کاربر راحت‌تر به محتوا می‌رسد، صفحات بیشتری را بررسی می‌کند و مسیر خرید را با تمرکز بیشتری ادامه می‌دهد. در مقابل، تاخیر در بارگذاری می‌تواند باعث خروج زودهنگام کاربر و کاهش فرصت‌های تبدیل شود. از نگاه گوگل نیز سرعت بخشی از تجربه صفحه است و Core Web Vitals در سیستم‌های رتبه‌بندی مورد توجه قرار می‌گیرد؛ البته امتیاز خوب به‌تنهایی جایگاه برتر را تضمین نمی‌کند. بنابراین، بهینه‌سازی سرعت را باید هم‌زمان برای سئو، تجربه کاربر و افزایش فروش دنبال کرد. دسته‌بندی افزونه‌های سرعت؛ از سرویس‌های ابری تا ابزارهای تخصصی همه ابزارهای افزایش سرعت، یک کار را با یک روش انجام نمی‌دهند. بعضی راهکارها بخش عمده پردازش را به زیرساخت ابری منتقل می‌کنند و بعضی دیگر مستقیما داخل وردپرس، کش، فایل‌ها، تصاویر و کدهای سایت را بهینه می‌کنند. NitroPack نمونه‌ای از راهکارهای ابری و یکپارچه است؛ کش، بهینه‌سازی تصاویر، فشرده‌سازی کد و CDN را در زیرساخت خود مدیریت می‌کند و بخشی از بار پردازشی را از سرور سایت برمی‌دارد. در مقابل، WP Rocket یک افزونه تخصصی بهینه‌سازی وردپرس است که امکاناتی مانند Page Cache، کش مرورگر، بهینه‌سازی CSS و JavaScript، Lazy Load و Preload را مستقیما برای سایت فراهم می‌کند. دسته سوم، ابزارهای Utility هستند؛ ابزارهایی که روی یک بخش مشخص تمرکز دارند، مثل بهینه‌سازی تصاویر، CDN، کش آبجکت یا مدیریت فایل‌های CSS و JavaScript. این ابزارها زمانی ارزش بیشتری پیدا می‌کنند که بخواهید Stack سرعت سایت را دقیقا بر اساس نیاز و زیرساخت خودتان طراحی کنید. معرفی و مقایسه برترین افزونه‌های افزایش سرعت وردپرس در سال 2026 بازار افزونه‌های سرعت وردپرس چند گزینه شناخته‌شده با رویکردهای متفاوت دارد. NitroPack یک راهکار ابری و یکپارچه است که کش، بهینه‌سازی منابع و CDN را در یک سرویس ترکیب می‌کند؛ WP Rocket بیشتر بر کش و بهینه‌سازی فایل‌ها در سطح وردپرس تمرکز دارد؛ و LiteSpeed Cache زمانی بیشترین ظرفیت خود را نشان می‌دهد که سایت روی LiteSpeed یا زیرساخت سازگار با QUIC.cloud اجرا شود. NitroPack؛ راهکار یکپارچه برای کمترین درگیری فنی NitroPack بخش مهمی از فرایند بهینه‌سازی را در زیرساخت ابری خود مدیریت می‌کند و امکاناتی مانند کش، بهینه‌سازی تصاویر، بهینه‌سازی کد و CDN را کنار هم قرار می‌دهد. این رویکرد برای صاحبان سایت‌هایی جذاب است که سرعت مناسب را با تنظیمات دستی کمتر دنبال می‌کنند. WP Rocket؛ کنترل بیشتر روی بهینه‌سازی وردپرس WP Rocket مجموعه‌ای از قابلیت‌های کش، بهینه‌سازی CSS و JavaScript، Lazy Load، Preload و بهینه‌سازی Core Web Vitals را ارائه می‌دهد. ساختار آن برای کاربرانی مناسب است که یک افزونه تخصصی وردپرس می‌خواهند و ترجیح می‌دهند تنظیمات عملکرد سایت را با کنترل بیشتری مدیریت کنند. LiteSpeed Cache؛ انتخاب قدرتمند برای زیرساخت LiteSpeed LiteSpeed Cache فقط یک افزونه کش ساده نیست؛ مجموعه‌ای از قابلیت‌های کش و بهینه‌سازی را در اختیار سایت‌های وردپرسی قرار می‌دهد. قابلیت‌های کش در سطح سرور به LiteSpeed یا زیرساخت سازگار مانند QUIC.cloud وابسته‌اند، در حالی که ابزارهایی مثل بهینه‌سازی CSS و JavaScript، تصاویر و دیتابیس دامنه استفاده گسترده‌تری دارند. تصویر 2: ترکیب افزونه‌های افزایش سرعت وردپرس مقایسه سریع افزونه‌های برتر افزایش سرعت وردپرس برای مقایسه عملکرد واقعی، نرخ قبولی Core Web Vitals را بر اساس داده منتشرشده در ژانویه 2026 توسط NitroPack و مبتنی بر داده‌های بیش از 2 میلیون سایت در نظر گرفته‌ایم. این اعداد نشان‌دهنده عملکرد کل سایت‌ها در آن مجموعه داده هستند و به‌تنهایی تضمین‌کننده نتیجه یک سایت مشخص نیستند. افزونه نرخ قبولی Core Web Vitals در داده ۲۰۲۶ بهترین کاربرد مدل قیمت‌گذاری سطح تنظیمات NitroPack 54% بهینه‌سازی خودکار و سایت‌هایی که تنظیمات فنی کمتری می‌خواهند رایگان/ اشتراکی آسان WP Rocket 50% سایت‌های وردپرسی با نیاز به کنترل مناسب و تنظیمات ساده اشتراکی آسان تا متوسط LiteSpeed Cache 48% سایت‌های روی LiteSpeed و زیرساخت سازگار با QUIC.cloud رایگان متوسط تا پیشرفته Perfmatters 51% کنترل اسکریپت‌ها و بهینه‌سازی جزئیات فرانت‌اند اشتراکی متوسط WP-Optimize 46% ترکیب کش، بهینه‌سازی دیتابیس و تصاویر رایگان/ اشتراکی متوسط چگونه یک Stack مطمئن بسازیم؟ پشته افزونه‌ها زمانی کاربردی است که هر ابزار یک وظیفه مشخص داشته باشد. برای ساخت چنین ترکیبی، این سه اصل را در نظر بگیرید: • یک افزونه اصلی برای کش انتخاب کنید. دو سیستم Page Cache را هم‌زمان فعال نکنید؛ چرا که مدیریت چند لایه کش می‌تواند باعث تداخل و رفتارهای غیر قابل‌پیش‌بینی شود. • هر قابلیت را به یک ابزار بسپارید. اگر افزونه اصلی شما Minify، Lazy Load یا بهینه‌سازی CSS را انجام می‌دهد، همان قابلیت را در ابزار دوم خاموش کنید. این روش از پردازش تکراری و تداخل تنظیمات جلوگیری می‌کند. • بعد از هر تغییر، سایت را تست کنید. صفحات مهم، فرم‌ها، سبد خرید و فرایند پرداخت را بررسی کنید و سپس Core Web Vitals را دوباره بسنجید. این مرحله در سایت‌های فروشگاهی اهمیت بیشتری دارد؛ چرا که تنظیمات کش می‌تواند با محتوای پویا و شخصی‌سازی‌شده تعامل داشته باشد. در عمل، یک Stack خوب معمولا از یک ابزار اصلی کش و بهینه‌سازی + ابزارهای تخصصی برای نیازهای مشخص تشکیل می‌شود. ترکیب دقیق نیز بر اساس هاست، قالب و معماری سایت انتخاب می‌شود. نقش هاستینگ در کارایی افزونه‌های سرعت؛ آیا افزونه به‌تنهایی کافی است؟ حتی بهترین افزونه سرعت، روی یک زیرساخت ضعیف به نتیجه ایده‌آل نمی‌رسد. نوع وب‌سرور، منابع CPU و RAM، نسخه PHP، موقعیت سرور و قابلیت‌هایی مثل Server-side Cache و Object Cache مستقیما روی زمان پاسخ‌گویی سایت اثر می‌گذارند. مستندات وردپرس نیز کش سمت سرور و Object Cache را از اجزای مهم معماری بهینه‌سازی معرفی می‌کند. برای مثال، WP Rocket می‌تواند با Page Cache پردازش PHP و درخواست‌های پایگاه داده را کاهش دهد؛ اما اگر زمان پاسخ سرور همچنان بالا باشد، باید منابع و تنظیمات هاست را هم بررسی کرد. خود WP Rocket نیز تاکید می‌کند که عملکرد نهایی سایت به ظرفیت هاست و وضعیت سرور وابسته است. بنابراین قبل از نصب افزونه، زیرساخت را بشناسید: هاست مناسب + کش در سطح سرور + افزونه بهینه‌سازی متناسب با محیط اجرا، ترکیب منطقی‌تری از تکیه بر یک افزونه به‌تنهایی است. سوالات متداول درباره انتخاب بهترین افزونه بهترین افزونه افزایش سرعت وردپرس برای کاربران مبتدی کدام است؟ اگر به دنبال راهکاری هستید که بدون دانش فنی و تنها با چند کلیک بیشترین تاثیر را بگذارد، افزونه‌های NitroPack و WP Rocket بهترین‌ها هستند. این ابزارها اکثر تنظیمات بهینه‌سازی را به صورت خودکار انجام می‌دهند. آیا می‌توان چندین افزونه افزایش سرعت را همزمان نصب کرد؟ خیر؛ نصب همزمان چندین افزونه که وظایف مشابهی دارند (مانند دو افزونه کش) باعث ایجاد تداخل و خرابی در ظاهر سایت می‌شود. پیشنهاد می‌شود یک افزونه اصلی برای کش انتخاب کرده و در صورت نیاز، آن را با ابزارهای تخصصی کوچک‌تر (مانند Perfmatters برای مدیریت اسکریپت‌ها) ترکیب کنید. چرا با وجود نصب بهترین افزونه، سایت من همچنان کند است؟ افزونه‌ها نمی‌توانند مشکلات ریشه‌ای مانند هاست ضعیف، قالب‌های سنگین و غیراستاندارد یا طراحی نامناسب صفحه را به طور کامل جبران کنند. بهینه‌سازی سرعت باید از زیرساخت و هاستینگ شروع شود و افزونه‌ها به عنوان مکمل عمل کنند. تفاوت اصلی افزونه‌های رایگان و پرمیوم در چیست؟ افزونه‌های رایگان مانند WP Super Cache معمولا فقط عمل کش‌کردن را انجام می‌دهند؛ اما نسخه‌های پرمیوم قابلیت‌هایی مانند بهینه‌سازی کد و تصاویر، CSS بحرانی و اتصال به CDN را نیز در اختیار شما می‌گذارند که تاثیر مستقیم و بیشتری بر امتیاز Core Web Vitals دارند. تصویر 3: افزایش سرعت سایت وردپرس سخن پایانی؛ سرعت بیشتر، شروع یک مسیر حرفه‌ای بهترین افزونه افزایش سرعت وردپرس

راهنمای جامع انتخاب بهترین افزونه افزایش سرعت سایت وردپرس

بهترین افزونه‌های امنیت وردپرس در سال ۲۰۲۶

بهترین افزونه امنیت وردپرس؛ راهنمای جامع انتخاب و مقایسه پلاگین‌های برتر