طراحی سایت و برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

طراحی سایت و برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

کد جمع کردن چند جمله ای ها — راهنمای کاربردی

در این مطلب، الگوریتم و کد جمع کردن چند جمله ای ها همراه با ارائه مثالی بیان شده است؛ همچنین، کد جمع کردن دو چند جمله‌ای در زبان‌های برنامه‌نویسی «سی‌پلاس‌پلاس» (++C)، «جاوا» (Java)، «پایتون 3» (Python3)، «سی‌شارپ» (#C) , «پی‌اچ‌پی» (PHP)ارائه شده است.

جمع کردن چند جمله ای ها

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

ورودی‌ها:

A[] = {5, 0, 10, 6}

B[] = {1, 2, 4}

خروجی:

sum[] = {6, 2, 14, 6}

اولین آرایه ورودی، نشاگر «5 + 0x^1 + 10x^2 + 6x^3» و دومین آرایه، نشان‌گر «1 + 2x^1 + 4x^2» است. آرایه خروجی نیز نشان‌گر چندجمله‌ای «6 + 2x^1 + 14x^2 + 6x^3» است.

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

افزودن ([A[0..m-1], B[0..n01)

ساخت آرایه []sum با اندازه‌ای برابر با بیشینه m و n
کپی کردن []A در []sum
آرایه []B را بخوان و برای هر عنصر [B[i، اقدامات زیر را انجام بده:
- [sum[i] = sum[i] + B[i
[]sum را بازگردان.

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

کد جمع کردن چند جمله ای ها در ++C

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// Simple C++ program to add two polynomials 
#include <iostream> 
using namespace std; 
  
// A utility function to return maximum of two integers 
int max(int m, int n) {  return (m > n)? m: n; } 
  
// A[] represents coefficients of first polynomial 
// B[] represents coefficients of second polynomial 
// m and n are sizes of A[] and B[] respectively 
int *add(int A[], int B[], int m, int n) 
{ 
   int size = max(m, n); 
   int *sum = new int[size]; 
  
   // Initialize the porduct polynomial 
   for (int i = 0; i<m; i++) 
     sum[i] = A[i]; 
  
   // Take ever term of first polynomial 
   for (int i=0; i<n; i++) 
       sum[i] += B[i]; 
  
   return sum; 
} 
  
// A utility function to print a polynomial 
void printPoly(int poly[], int n) 
{ 
    for (int i=0; i<n; i++) 
    { 
       cout << poly[i]; 
       if (i != 0) 
        cout << "x^" << i ; 
       if (i != n-1) 
       cout << " + "; 
    } 
} 
  
// Driver program to test above functions 
int main() 
{ 
    // The following array represents polynomial 5 + 10x^2 + 6x^3 
    int A[] = {5, 0, 10, 6}; 
  
    // The following array represents polynomial 1 + 2x + 4x^2 
    int B[] = {1, 2, 4}; 
    int m = sizeof(A)/sizeof(A[0]); 
    int n = sizeof(B)/sizeof(B[0]); 
  
    cout << "First polynomial is \n"; 
    printPoly(A, m); 
    cout << "\nSecond polynomial is \n"; 
    printPoly(B, n); 
  
    int *sum = add(A, B, m, n); 
    int size = max(m, n); 
  
    cout << "\nsum polynomial is \n"; 
    printPoly(sum, size); 
  
    return 0; 
}

کد جمع کردن چند جمله ای ها در جاوا

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// Java program to add two polynomials 
  
class GFG { 
  
// A utility function to return maximum of two integers  
    static int max(int m, int n) { 
        return (m > n) ? m : n; 
    } 
  
// A[] represents coefficients of first polynomial  
// B[] represents coefficients of second polynomial  
// m and n are sizes of A[] and B[] respectively  
    static int[] add(int A[], int B[], int m, int n) { 
        int size = max(m, n); 
        int sum[] = new int[size]; 
  
// Initialize the porduct polynomial  
        for (int i = 0; i < m; i++) { 
            sum[i] = A[i]; 
        } 
  
// Take ever term of first polynomial  
        for (int i = 0; i < n; i++) { 
            sum[i] += B[i]; 
        } 
  
        return sum; 
    } 
  
// A utility function to print a polynomial  
    static void printPoly(int poly[], int n) { 
        for (int i = 0; i < n; i++) { 
            System.out.print(poly[i]); 
            if (i != 0) { 
                System.out.print("x^" + i); 
            } 
            if (i != n - 1) { 
                System.out.print(" + "); 
            } 
        } 
    } 
  
// Driver program to test above functions  
    public static void main(String[] args) { 
        // The following array represents polynomial 5 + 10x^2 + 6x^3  
        int A[] = {5, 0, 10, 6}; 
  
        // The following array represents polynomial 1 + 2x + 4x^2  
        int B[] = {1, 2, 4}; 
        int m = A.length; 
        int n = B.length; 
        System.out.println("First polynomial is"); 
        printPoly(A, m); 
        System.out.println("\nSecond polynomial is"); 
        printPoly(B, n); 
        int sum[] = add(A, B, m, n); 
        int size = max(m, n); 
        System.out.println("\nsum polynomial is"); 
        printPoly(sum, size); 
  
    } 
}

کد جمع کردن چند جمله ای ها در پایتون ۳

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
# Simple Python 3 program to add two 
# polynomials 
  
# A utility function to return maximum  
# of two integers 
  
# A[] represents coefficients of first polynomial 
# B[] represents coefficients of second polynomial 
# m and n are sizes of A[] and B[] respectively 
def add(A, B, m, n): 
  
    size = max(m, n); 
    sum = [0 for i in range(size)] 
  
    # Initialize the porduct polynomial 
      
    for i in range(0, m, 1): 
        sum[i] = A[i] 
  
    # Take ever term of first polynomial 
    for i in range(n): 
        sum[i] += B[i] 
  
    return sum
  
# A utility function to print a polynomial 
def printPoly(poly, n): 
    for i in range(n): 
        print(poly[i], end = "") 
        if (i != 0): 
            print("x^", i, end = "") 
        if (i != n - 1): 
            print(" + ", end = "") 
  
# Driver Code 
if __name__ == '__main__': 
      
    # The following array represents 
    # polynomial 5 + 10x^2 + 6x^3 
    A = [5, 0, 10, 6] 
  
    # The following array represents 
    # polynomial 1 + 2x + 4x^2 
    B = [1, 2, 4] 
    m = len(A) 
    n = len(B) 
  
    print("First polynomial is") 
    printPoly(A, m) 
    print("\n", end = "") 
    print("Second polynomial is") 
    printPoly(B, n) 
    print("\n", end = "") 
    sum = add(A, B, m, n) 
    size = max(m, n) 
  
    print("sum polynomial is") 
    printPoly(sum, size) 
      
# This code is contributed by 
# Sahil_Shelangia

کد جمع کردن چند جمله ای ها در #C

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
// C# program to add two polynomials 
using System; 
class GFG { 
  
    // A utility function to return maximum of two integers  
    static int max(int m, int n)  
    { 
        return (m > n) ? m : n; 
    } 
  
    // A[] represents coefficients of first polynomial  
    // B[] represents coefficients of second polynomial  
    // m and n are sizes of A[] and B[] respectively  
    static int[] add(int[] A, int[] B, int m, int n) 
    { 
        int size = max(m, n); 
        int[] sum = new int[size]; 
  
        // Initialize the porduct polynomial  
        for (int i = 0; i < m; i++) 
        { 
            sum[i] = A[i]; 
        } 
  
        // Take ever term of first polynomial  
        for (int i = 0; i < n; i++) 
        { 
            sum[i] += B[i]; 
        } 
  
        return sum; 
    } 
  
    // A utility function to print a polynomial  
    static void printPoly(int[] poly, int n)   
    { 
        for (int i = 0; i < n; i++) 
        { 
            Console.Write(poly[i]); 
            if (i != 0)  
            { 
                Console.Write("x^" + i); 
            } 
            if (i != n - 1)  
            { 
                Console.Write(" + "); 
            } 
        } 
    } 
  
    // Driver code  
    public static void Main()  
    { 
        // The following array represents  
        // polynomial 5 + 10x^2 + 6x^3  
        int[] A = {5, 0, 10, 6}; 
  
        // The following array represents  
        // polynomial 1 + 2x + 4x^2  
        int[] B = {1, 2, 4}; 
        int m = A.Length; 
        int n = B.Length; 
        Console.WriteLine("First polynomial is"); 
        printPoly(A, m); 
        Console.WriteLine("\nSecond polynomial is"); 
        printPoly(B, n); 
        int[] sum = add(A, B, m, n); 
        int size = max(m, n); 
        Console.WriteLine("\nsum polynomial is"); 
        printPoly(sum, size); 
  
    } 
} 
  
//This Code is Contributed  
// by Mukul Singh

کد جمع کردن چند جمله ای ها در PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?php 
// Simple PHP program to add two polynomials 
  
// A[] represents coefficients of first polynomial 
// B[] represents coefficients of second polynomial 
// m and n are sizes of A[] and B[] respectively 
function add($A, $B, $m, $n) 
{ 
    $size = max($m, $n); 
    $sum = array_fill(0, $size, 0); 
      
    // Initialize the porduct polynomial 
    for ($i = 0; $i < $m; $i++) 
        $sum[$i] = $A[$i]; 
      
    // Take ever term of first polynomial 
    for ($i = 0; $i < $n; $i++) 
        $sum[$i] += $B[$i]; 
      
    return $sum; 
} 
  
// A utility function to print a polynomial 
function printPoly($poly, $n) 
{ 
    for ($i = 0; $i < $n; $i++) 
    { 
        echo $poly[$i]; 
        if ($i != 0) 
            echo "x^" . $i; 
        if ($i != $n - 1) 
        echo " + "; 
    } 
} 
  
// Driver Code 
  
// The following array represents 
// polynomial 5 + 10x^2 + 6x^3 
$A = array(5, 0, 10, 6); 
  
// The following array represents  
// polynomial 1 + 2x + 4x^2 
$B = array(1, 2, 4); 
$m = count($A); 
$n = count($B); 
  
echo "First polynomial is \n"; 
printPoly($A, $m); 
echo "\nSecond polynomial is \n"; 
printPoly($B, $n); 
  
$sum = add($A, $B, $m, $n); 
$size = max($m, $n); 
  
echo "\nsum polynomial is \n"; 
printPoly($sum, $size); 
  
// This code is contributed by chandan_jnu 
?>

خروجی کد

First polynomial is
5 + 0x^1 + 10x^2 + 6x^3
Second polynomial is
1 + 2x^1 + 4x^2
Sum polynomial is
6 + 2x^1 + 14x^2 + 6x^3

پیچیدگی زمانی الگوریتم و برنامه بالا، برابر با (O(m+n است که در آن، m و n به ترتیب مرتبه چند جمله‌ای‌های داده شده هستند.

منبع: فرادرس

مشاوره پنج‌شنبه 27 تیر 1398 ساعت 17:54

0 نظر

مفاهیم عمومی برنامه نویسی ناهمگام (Asynchronous Programming) — به زبان ساده

در این مقاله برخی مفاهیم مهم مرتبط با برنامه نویسی ناهمگام و کارکرد آن‌ها در مرورگرهای وب و جاوا اسکریپت را بررسی می‌کنیم. پس از مطالعه مقاله حاضر، این مفاهیم را درک خواهید کرد و آماده مطالعه بخش‌های بعدی این سری مقالات آموزشی جاوا اسکریپت خواهید بود. همچنین برای مطالعه قسمت قبلی این مجموعه مطلب آموزشی می‌توانید به مطلب «تمرین ساخت شیئ در جاوا اسکریپت (بخش دوم) — راهنمای کاربردی» مراجعه کنید.

ناهمگام یعنی چه؟

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

برای نمونه کاربران Mac برخی اوقات این وضعیت را به شکل یک کرسر رنگین‌کمانی در حال چرخش تجربه می‌کنند. سیستم عامل با نمایش این کرسر در واقع اعلام می‌کند که برنامه کنونی که استفاده می‌کنید باید متوقف مانده و منتظر باشد تا چیز دیگری انجام یابد و این کار به مدت‌زمانی نیاز دارد و بدین‌وسیله اعلام می‌کنیم که جای نگرانی نیست و مشغول کار هستیم.

برنامه نویسی ناهمگام

این تجربه ناخوشایندی است و استفاده مناسبی از توان پردازشی رایانه به خصوص در این عصر که رایانه‌ها چندین هسته پردازشی دارند، به حساب نمی‌آید. این که منتظر بنشینیم تا کار دیگری پایان یابد، در حالی که می‌توان آن را به هسته پردازشی دیگری واگذار کرد تا در زمان خاتمه کار به ما اطلاع دهد. بدین ترتیب می‌توان کارها را به صورت همزمان پیش برد که اساس «برنامه‌نویسی ناهمگام» (asynchronous programming) را تشکیل می‌دهد. همه چیز به محیط برنامه که استفاده می‌کنید بستگی دارد تا با ارائه API–های مختلف امکان اجرای نامتقارن وظایف را فراهم سازد. در زمینه برنامه‌نویسی وب این محیط مرورگر وب است.

کد مسدودکننده

تکنیک‌های ناهمگام در برنامه‌نویسی و به خصوص برنامه‌نویسی وب بسیار مهم هستند. زمانی که یک وب اپلیکیشن در مرورگر اجرا می‌شود و یک دسته کد سنگین را بدون بازگرداندن کنترل به مرورگر اجرا می‌کند، ممکن است این گونه به نظر برسد که مرورگر قفل شده است. این وضعیت «مسدودسازی» (blocking) نامیده می‌شود. در این حالت مرورگر نمی‌تواند ورودی کاربر را مدیریت و وظایف دیگر را اجرا کند و تا زمانی که کنترل از پردازنده به مرورگر بازنگردد تداوم خواهد داشت.

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

در این مثال (+) چنان که ملاحظه می‌کنید یک «شنونده رویداد» به دکمه اضافه شده است تا زمانی که دکمه کلیک می‌شود یک عملیات زمان‌گیر را اجرا کند. در این عملیات 10 میلیون تاریخ محاسبه می‌شود و نتیجه در کنسول نمایش پیدا می‌کند. سپس یک پاراگراف به DOM اضافه خواهد شد.

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  let myDate;
  for(let i = 0; i < 10000000; i++) {
    let date = new Date();
    myDate = date
  }
 
  console.log(myDate);
 
  let pElem = document.createElement('p');
  pElem.textContent = 'This is a newly-added paragraph.';
  document.body.appendChild(pElem);
});

کنسول مرورگر

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

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

در مثال دوم (+) چیزی را شبیه‌سازی می‌کنیم که اندکی واقع‌گرایانه‌تر است و احتمال بیشتری برای دیدن آن در یک صفحه وب وجود دارد. ما تعامل‌پذیری کاربر را از طریق رندر کردن UI مسدود می‌کنیم. در این مثال دو دکمه داریم:

یک دکمه «Fill canvas» که وقتی کلیک شود، 1 میلیون دایره آبی را روی <canvas> ارائه می‌کند.
یک دکمه «Click me for alert» که وقتی کلیک شود یک پیام هشدار را نمایش می‌دهد.

function expensiveOperation() {
  for(let i = 0; i < 1000000; i++) {
    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
    ctx.beginPath();
    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
    ctx.fill()
  }
}
 
fillBtn.addEventListener('click', expensiveOperation);
 
alertBtn.addEventListener('click', () =>
  alert('You clicked me!')
);

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

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

دلیل این وضعیت آن است که جاوا اسکریپت به بیان کلی یک زبان برنامه‌نویسی «تک نخی» (single threaded) است. در این مرحله ابتدا باید با مفهوم «نخ» (thread) در برنامه‌نویسی آشنا شویم.

نخ

نخ اساساً یک پردازش منفرد است که برنامه می‌تواند برای اجرای وظیفه‌ای به خدمت بگیرد. هر نخ می‌تواند در هر زمان تنها یک وظیفه منفرد را اجرا کند:

Task A --> Task B --> Task C

هر وظیفه به صورت ترتیبی اجرا می‌شود و برای این که وظیفه‌ای بتواند شروع شود باید وظیفه قبلی به پایان رسیده باشد.

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

Thread 1: Task A --> Task B
Thread 2: Task C --> Task D

جاوا اسکریپت یک زبان تک نخی است

جاوا اسکریپت به صورت سنتی یک زبان تک نخی است. حتی اگر چندین هسته پردازشی را به کار بگیرید، در هر حال باید وظایف را روی یک نخ منفرد اجرا کنید که «نخ اصلی» (main thread) نام دارد. بدین ترتیب مثال فوق به صورت زیر اجرا می‌شود:

Main thread: Render circles to canvas --> Display alert()

البته پس از مدتی جاوا اسکریپت از برخی ابزارها کمک گرفت تا چنین مشکلاتی را رفع کند. «وب ورکر» (Web worker) امکان ارسال چند پردازش جاوا اسکریپت به یک نخ جدا را که worker نام دارد فراهم می‌سازد. بدین ترتیب می‌توان چندین دسته کد جاوا اسکریپت را به صورت همزمان اجرا کرد. به طور کلی از یک worker برای اجرای پردازش‌های سنگین و برداشتن این وظیفه از دوش نخ اصلی استفاده می‌شود. بدین ترتیب تعامل کاربر با مرورگر مسدود نمی‌شود.

Main thread: Task A --> Task C
Worker thread: Expensive task B

با در نظر داشتن این موضوع، نگاهی به این مثال (+) می‌اندازیم. کنسول مرورگر را باز نگهدارید. در واقع این مثال یک بازنویسی از مثال قبلی است که 10 میلیون تاریخ را در نخ worker جداگانه‌ای اجرا می‌کرد. اکنون زمانی که روی دکمه کلیک کنید، مرورگر می‌تواند پاراگراف را پیش از اتمام محاسبه تاریخ‌ها نمایش دهد. به این ترتیب عملیات نخست موجب مسدود شدن عملیات دوم نمی‌شود.

کد ناهمگام

وب ورکرها کاملاً مفید هستند، اما آن‌ها نیز محدودیت‌های خاص خود را دارند. مهم‌ترین محدودیت وب ورکرها این است که نمی‌توانند به DOM دسترسی داشته باشند. بنابراین نمی‌توان انتظار داشت که یک وب ورکر مستقیماً کاری برای به‌روزرسانی UI انجام دهد. ما نمی‌توانیم 1 میلیون دایره آبی را درون worker رندر کنیم، چون وظیفه آن صرفاً محاسبات است.

دومین مشکل این است که گرچه کد در یک ورکر مسدودسازی ندارد، اما همچنان در ذات خود همگام است. این وضعیت در مواردی که تابعی به نتایج پردازش‌های قبلی نیاز داشته باشد، مشکل‌ساز خواهد بود. نمودارهای نخ زیر را در نظر بگیرید:

Main thread: Task A --> Task B

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

Main thread: Task A --> Task B --> |Task D|
Worker thread: Task C -----------> | |

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

قابلیت‌های ناهمگام مرورگر

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

Main thread: Task A Task B
Promise: |__async operation__|

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

سخن پایانی

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

معرفی جاوا اسکریپت ناهمگام — به زبان ساده

منبع: فرادرس

مشاوره پنج‌شنبه 27 تیر 1398 ساعت 17:53

0 نظر

ایجاد فرم ورود (Login) با PHP — از صفر تا صد

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

ایجاد فرم ورود و ثبت نام

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

کدنویسی فرم ثبت نام

در ادامه کد HTML فرم ثبت نام را می‌بینید. شما باید آن را در فایلی به نام register.php ذخیره کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form method="post" action="" name="signup-form">
    <div class="form-element">
        <label>Username</label>
        <input type="text" name="username" pattern="[a-zA-Z0-9]+" required />
    </div>
    <div class="form-element">
        <label>Email</label>
        <input type="email" name="email" required />
    </div>
    <div class="form-element">
        <label>Password</label>
        <input type="password" name="password" required />
    </div>
    <button type="submit" name="register" value="register">Register</button>
</form>

این فرم کاملاً ابتدایی است، اما در آن از HTML5 استفاده کرده‌ایم تا برخی اعتبارسنجی‌های بسیار مقدماتی ورودی را اجرا کنیم. برای نمونه استفاده از “type=”email به کاربران هشدار می‌دهد که آدرس ایمیلی که وارد کرده‌اند دارای قالب‌بندی صحیح نیست. به طور مشابه، استفاده از خصوصیت pattern روی نام کاربری موجب می‌شود مطمئن شویم در نام کاربری تنها کاراکترهای حرف و رقم وجود دارند.

کدنویسی فرم ورود

در ادامه کد HTML فرم ورود را مشاهده می‌کنید. این کدها را در فایلی به نام login.php قرار دهید:

1
2
3
4
5
6
7
8
9
10
11
<form method="post" action="" name="signin-form">
    <div class="form-element">
        <label>Username</label>
        <input type="text" name="username" pattern="[a-zA-Z0-9]+" required />
    </div>
    <div class="form-element">
        <label>Password</label>
        <input type="password" name="password" required />
    </div>
    <button type="submit" name="login" value="login">Log In</button>
</form>

استایل‌دهی فرم‌ها با CSS

در ادامه برخی کدهای CSS را می‌بینید که روی این فرم‌ها اعمال می‌شوند:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
body {
    margin: 50px auto;
    text-align: center;
    width: 800px;
}
 
h1 {
    font-family: 'Passion One';
    font-size: 2rem;
    text-transform: uppercase;
}
 
label {
    width: 150px;
    display: inline-block;
    text-align: left;
    font-size: 1.5rem;
    font-family: 'Lato';
}
 
input {
    border: 2px solid #ccc;
    font-size: 1.5rem;
    font-weight: 100;
    font-family: 'Lato';
    padding: 10px;
}
 
form {
    margin: 25px auto;
    padding: 20px;
    border: 5px solid #ccc;
    width: 500px;
    background: #eee;
}
 
div.form-element {
    margin: 20px 0;
}
 
button {
    padding: 10px;
    font-size: 1.5rem;
    font-family: 'Lato';
    font-weight: 100;
    background: yellowgreen;
    color: white;
    border: none;
}
 
p.success,
p.error {
    color: white;
    font-family: lato;
    background: yellowgreen;
    display: inline-block;
    padding: 2px 10px;
}
 
p.error {
    background: orangered;
}

این فایل شامل برخی قواعد استایل‌دهی برای نمایش پیام‌های خطا و عناوین است. کدهای HTML و CSS که در این بخش ارائه شدند می‌توانند به عنوان مبنایی برای پروژه شما جهت ایجاد فرم‌های اختصاصی استفاده شوند و ممکن است استایل‌دهی و فیلدهای ورودی متفاوتی داشته باشند.

فرم ورود

ایجاد جدول کاربر و اتصال به پایگاه داده

گام بعدی ایجاد یک جدول کاربر است که همه اطلاعات را در مورد کاربران ثبت نام کرده ذخیره می‌کند. در این مورد جدول صرفاً شامل چهار ستون به این صورت خواهد بود: یک ستون برای شناسه با افزایش خودکار، یک نام کاربری یکتا، یک ایمیل و یک رمز عبور

می‌توان از گزاره‌های SQL زیر برای ایجاد سریع جدول استفاده کرد:

1
2
3
4
5
6
7
8
CREATE TABLE `users` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `username` varchar(25) NOT NULL,
  `password` varchar(255) NOT NULL,
  `email` varchar(100) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1;

سپس یک فایل به نام config.php ایجاد کرده و کدهای زیر را در آن می‌نویسیم تا به پایگاه داده وصل شویم:

1
2
3
4
5
6
7
8
9
10
11
12
<?php
define('USER', 'root');
define('PASSWORD', '');
define('HOST', 'localhost');
define('DATABASE', 'test');
 
try {
    $connection = new PDO("mysql:host=".HOST.";dbname=".DATABASE, USER, PASSWORD);
} catch (PDOException $e) {
    exit("Error: " . $e->getMessage());
}
?>

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

کد ثبت نام کاربر

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

کد زیر را در فایل registration.php قرار دهید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?php
 
include('config.php');
session_start();
 
if (isset($_POST['register'])) {
 
    $username = $_POST['username'];
    $email = $_POST['email'];
    $password = $_POST['password'];
    $password_hash = password_hash($password, PASSWORD_BCRYPT);
 
    $query = $connection->prepare("SELECT * FROM users WHERE EMAIL=:email");
    $query->bindParam("email", $email, PDO::PARAM_STR);
    $query->execute();
 
    if ($query->rowCount() > 0) {
        echo '<p class="error">The email address is already registered!</p>';
    }
 
    if ($query->rowCount() == 0) {
        $query = $connection->prepare("INSERT INTO users(USERNAME,PASSWORD,EMAIL) VALUES (:username,:password_hash,:email)");
        $query->bindParam("username", $username, PDO::PARAM_STR);
        $query->bindParam("password_hash", $password_hash, PDO::PARAM_STR);
        $query->bindParam("email", $email, PDO::PARAM_STR);
        $result = $query->execute();
 
        if ($result) {
            echo '<p class="success">Your registration was successful!</p>';
        } else {
            echo '<p class="error">Something went wrong!</p>';
        }
    }
}
 
?>

گام نخست این است که فایل config.php را بگنجانیم و یک «نشست» (Session) را آغاز کنیم. این فرایند به ما کمک می‌کند هر اطلاعاتی را که می‌خواهیم روی صفحه‌های مختلف به آن دسترسی داشته باشیم ذخیره کنیم.

سپس با وارسی تعیین شدن متغیر [‘POST[‘register_$، بررسی می‌کنیم که آیا کاربر روی دکمه Register کلیک کرده و فرم را تحویل داده است یا نه. همواره به یاد داشته باشید که ذخیره‌سازی رمزهای عبور به صورت متن ساده ‌ایده بدی است. به همین دلیل از تابع ()password_hash استفاده می‌کنیم. سپس هش محاسبه شده را در پایگاه داده خود ذخیره می‌کنیم. این تابع خاص یک هش 60 کاراکتری را با استفاده از salt محاسبه شده به صورت تصادفی ایجاد می‌کند.

در نهایت کوئری را اجرا می‌کنیم و بررسی می‌کنیم آیا هیچ ردیف غیر صفر برای آن آدرس ایمیل وجود دارد یا نه. اگر وجود داشته باشد پیامی به کاربر نمایش خواهیم داد که این آدرس ایمیل قبلاً در این وب‌سایت ثبت نام کرده است.

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

پیاده‌سازی کارکرد ورود کاربر

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

در ادامه کد این بخش را ملاحظه می‌کنید که باید در فایلی به نام login.php قرار گیرد.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
 
include('config.php');
session_start();
 
if (isset($_POST['login'])) {
 
    $username = $_POST['username'];
    $password = $_POST['password'];
 
    $query = $connection->prepare("SELECT * FROM users WHERE USERNAME=:username");
    $query->bindParam("username", $username, PDO::PARAM_STR);
    $query->execute();
 
    $result = $query->fetch(PDO::FETCH_ASSOC);
 
    if (!$result) {
        echo '<p class="error">Username password combination is wrong!</p>';
    } else {
        if (password_verify($password, $result['PASSWORD'])) {
            $_SESSION['user_id'] = $result['ID'];
            echo '<p class="success">Congratulations, you are logged in!</p>';
        } else {
            echo '<p class="error">Username password combination is wrong!</p>';
        }
    }
}
 
?>

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

زمانی که رمز عبور با موفقیت تأیید شود، متغیر [‘SESSION[‘user_id_$ را برابر با ID آن کاربر در پایگاه داده تعیین می‌کنیم. همچنین می‌توانید مقدار متغیرهای دیگر را نیز بسته به نیاز تعیین کنید.

محدودسازی دسترسی به صفحات

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

1
2
3
4
5
6
7
8
9
10
<?php
session_start();
 
if(!isset($_SESSION['user_id'])){
    header('Location: login.php');
    exit;
} else {
    // Show users the page!
}
?>

تنها کاری که در این مرحله باید انجام دهید، این است که مطمئن شوید اسکریپت شامل ()session_start در ابتدای خود است.

سخن پایانی

در این راهنما آموختیم که یک سیستم ثبت نام و ورود کاربر را با استفاده از PHP بسازیم. زمانی که با مبانی سیستم‌های ورود و ثبت نام آشنا شوید، می‌توانید منطق‌های پیچیده‌تری را نیز پیاده‌سازی کنید و به کاربر امکان ریست کردن رمز عبور، تأیید کردن آدرس ایمیل و کارهایی از این دست را بدهید. همچنین می‌توانید اعتبارسنجی فرانت‌اند بیشتری را با استفاده از خصوصیت‌های HTML5 و JQuery اجرا کنید تا فرم کاربرپسندتری داشته باشید.

منبع: فرادرس

مشاوره پنج‌شنبه 27 تیر 1398 ساعت 17:53

0 نظر

ساخت وب اسکرپر (Web Scraper) با جاوا اسکریپت — راهنمای کاربردی

وب اسکرپر

Callback-های ارسالی

در روزگار قدیم جاوا اسکریپت از callback استفاده می‌کرد که در آن درون هر تابع یک تابع ناهمگام نیز قرار می‌گرفت و بدین ترتیب چیزی ایجاد می‌شد که به نام «هرم مرگ» (pyramid of doom) یا «جهنم کال‌بک» (callback hell) مشهور بود. مثال زیر یک نمونه ساده از آن است:

1
2
3
4
5
6
7
8
/* Passed-in Callbacks */
doSomething(function(result) {
  doSomethingElse(result, function(newResult) {
    doThirdThing(newResult, function(finalResult) {
      console.log(finalResult);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

Then ،Promise و Catch

در ES6 ساختار جدیدی معرفی شد که کار دیباگ کردن کدهای ناهمگام را بسیار ساده‌تر و آسان‌تر می‌ساخت. این ساختار بر اساس شیئی به نام Promise و متدهای then و catch بنا شده بود:

1
2
3
4
5
6
7
8
/* "Vanilla" Promise Syntax */
doSomething()
.then(result => doSomethingElse(result))
.then(newResult => doThirdThing(newResult))
.then(finalResult => {
  console.log(finalResult);
})
.catch(failureCallback);

Async و Await

در نهایت ES7 دو کلیدواژه به نام‌های Async و Await معرفی کرد که امکان کدنویسی ناهمگام را به صورتی که تا حد امکان به کد همگام جاوا اسکریپت شبیه باشد فراهم می‌ساخت. نمونه‌ای از آن را در مثال زیر می‌بینید. این توسعه اخیر به تدریج خواناترین روش برای اجرای وظایف ناهمگام در جاوا اسکریپت تلقی شد و در مقایسه با ساختار معمولی Promise حتی از نظر کارایی حافظه نیز موجب ارتقا می‌شود.

1
2
3
4
5
6
7
8
9
10
11
/* Async/Await Syntax */
(async () => {
  try {
    const result = await doSomething();
    const newResult = await doSomethingElse(result);
    const finalResult = await doThirdThing(newResult);
    console.log(finalResult); 
  } catch(err) {
    console.log(err);
  }
})();

متغیرهای استاتیک

در گذشته بازیابی داده‌ها از دامنه دیگر مستلزم استفاده از XMLHttpRequest یا شیء XHR بود. امروزه می‌توانیم از API واکشی جاوا اسکریپت به این منظور استفاده کنیم. متد ()fetch یک آرگومان الزامی دارد که نشان‌دهنده مسیر منبعی است که می‌خواهیم واکشی کنیم و یک Promise بازگشت می‌دهد.

برای استفاده از ()fetch در Node.js باید یک پیاده‌سازی از fetch را ایمپورت کنید. Isomorphic Fetch یک گزینه رایج محسوب می‌شود. آن را با وارد کردن دستور زیر در ترمینال نصب کنید:

 npm install isomorphic-fetch es6-promise

سپس آن را در ابتدای سند به صورت زیر الزام (require) کنید:

1
const fetch = require('isomorphic-fetch')

JSON

اگر می‌خواهید داده‌های JSON را واکشی کنید، باید پیش از پردازش کردن پاسخ، متد ()json را روی آن اجرا کنید:

1
2
3
4
5
(async () => {
  const response = await fetch('https://wordpress.org/wp-json');
  const json = await response.json();
  console.log(JSON.stringify(json));
})()

JSON دریافت داده‌های مورد نیاز و پردازش کردن آن‌ها را به فرایندی نسبتاً سرراست تبدیل کرده است. اما اگر داده‌ها در قالب JSON نباشند چطور؟

HTML

در مورد اغلب وب‌سایت‌ها باید داده‌هایی را که می‌خواهیم، از قالب HTML استخراج کنیم. در وب‌سایت‌های استاتیک، دو روش به این منظور وجود دارد:

روش اول: عبارت‌های منظم

اگر نیازهای شما ساده هستند و با نوشتن regex نیز مشکلی ندارید، می‌توانید به سادگی از متد ()text استفاده کنید و سپس داده‌هایی که لازم دارید را با استفاده از متد match استخراج کنید. برای نمونه، در ادامه کدی را می‌بینید که برای استخراج محتوای تگ نخست h1 در یک صفحه مورد استفاده قرار می‌گیرد:

1
2
3
4
5
(async () => {
  const response = await fetch('https://example.com');
  const text = await response.text();
  console.log(text.match(/(?<=\<h1>).*(?=\<\/h1>)/));
})()

روش دوم: تحلیل‌گر DOM

اگر با سندهای پیچیده‌تری سروکار دارید، بهتر است از آرایه‌ای از متدهای داخلی جاوا اسکریپت برای کوئری زدن به DOM استفاده کنید. به این منظور از متدهایی مانند getElementById و querySelector استفاده کنید.

اگر بخواهیم کد فرانت‌اند را بنویسیم، می‌توانیم از اینترفیس DOMParser استفاده کنیم. از آنجا که ما از Node.js استفاده می‌کنیم، می‌توانیم از ماژول node نیز به جای آن بهره بگیریم. یک گزینه رایج jsdom است که می‌توان با دستور زیر آن را نصب کرد:

npm i jsdom

همچنین با دستورهای زیر آن را require می‌کنیم:

1
2
const jsdom = require("jsdom");
const { JSDOM } = jsdom;

با استفاده از jsdom می‌توانیم HTML ایمپورت شده را مانند شیء DOM خود و با بهره‌گیری از querySelector و متدهای مرتبط ایمپورت کنیم:

1
2
3
4
5
6
(async () => {
  const response = await fetch('https://example.com');
  const text = await response.text();
  const dom = await new JSDOM(text);
  console.log(dom.window.document.querySelector("h1").textContent);
})()

وب‌سایت‌های دینامیک

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

اگر چنین نیتی در سر دارید بهترین ماژول node برای اجرای این کار puppeteer است، چون جایگزین اصلی آن PhantomJS دیگر توسعه نمی‌یابد.

Puppeteer امکان اجرای کروم یا کرومیوم را روی پروتکل DevTools فراهم ساخته است و قابلیت‌هایی مانند ناوبری خودکار صفحه و تهیه تصویری از صفحه را دارد. DevTools به صورت پیش‌فرض یک مرورگر headless را اجرا می‌کند، اما تغییر دادن این تنظیمات برای دیباگ کردن مفید خواهد بود.

شروع

برای نصب Puppeteer به دایرکتوری پروژه در ترمینال بروید و عبارت زیر را وارد کنید:

npm i puppeteer

در ادامه مقداری کد اولیه برای شروع کار را مشاهده می‌کنید:

1
2
3
4
5
6
7
const puppeteer = require('puppeteer');
const browser = await puppeteer.launch({
  headless: false,
});
const page = await browser.newPage();
await page.setRequestInterception(true);
await page.goto('http://www.example.com/');

ابتدا puppeteer را راه‌اندازی می‌کنیم. حالت adless را نیز غیرفعال می‌کنیم به طوری که می‌توانیم ببینیم چه کار می‌کنیم. سپس یک برگه جدید باز می‌کنیم. متد زیر اختیاری است و امکان استفاده از متدهای abort ،continue و respond را در ادامه می‌دهد. در نهایت به صفحه منتخب می‌رویم.

page.setRequestInterception(true)

در مثال DOM Parser فوق می‌توانیم عناصر را با استفاده از document.querySelector و متدهای مرتبط کوئری کنیم.

لاگین شدن

اگر لازم باشد در یک وب‌سایت لاگین کنیم این کار با استفاده از متدهای type و click به سادگی انجام‌شدنی است. بدین ترتیب عناصر DOM با استفاده از همان ساختار querySelector شناسایی می‌شوند:

1
2
3
4
await page.type('#username', 'UsernameGoesHere');
await page.type('#password', 'PasswordGoesHere');
await page.click('button');
await page.waitForNavigation();

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

وب‌سایت‌های دینامیک عموماً از طریق مکانیسم اسکرول بی‌نهایت محتوا را به نمایش می‌گذارند. برای فائق آمدن بر این مشکل، باید کاری کنیم که puppeteer بر مبنای نوعی معیار اقدام به اسکرول کردن بکند.

در ادامه مثال ساده‌ای را می‌بینید که 5 بار اسکرول می‌کند و به مدت 1 ثانیه بین هر اسکرول صبر می‌کند تا محتوا بارگذاری شود.

1
2
3
4
for (let j = 0; j < 5; j++) {
  await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
  await page.waitFor(1000);
}

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

بهینه‌سازی

در نهایت چند روش وجود دارند که می‌توانند موجب بهینه‌سازی کدهای ما شوند و از این رو کد تا حد امکان سریع و روان اجرا شود. به عنوان مثال در ادامه روشی را ملاحظه می‌کنید که موجب می‌شود puppeteer از بارگذاری فونت‌ها و تصاویر منع شود.

1
2
3
4
5
6
7
8
9
await page.setRequestInterception(true);
page.on('request', (req) => {
 if (req.resourceType() == 'font' || req.resourceType() == 'image'){
   req.abort();
 }
 else {
   req.continue();
 }
});

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

سخن پایانی

مطالبی که در این نوشته مطرح کردیم تقریباً همه آن چیزی بود که برای ساخت یک وب اسکرپر کارآمد لازم بود. زمانی که داده‌ها را در حافظه گردآوری کردید، می‌توانید آن‌ها را با استفاده از ماژول fs در یک سند محلی ذخیره کنید، روی پایگاه داده آپلود کنید یا با استفاده از یک API مانند گوگل شیتز مستقیماً به یک سند ارسال کنید. اگر در زمینه وب اسکرپینگ تازه‌کار هستید یا در این زمینه معلوماتی دارید اما در زمینه Node.js مبتدی هستید، این مقاله احتمالاً برای شما مفید بوده است و شما را با برخی از ابزارهای قدرتمند Node.js که امکان وب اسکرپینگ را مهیا می‌سازند آشنا ساخته است.

منبع: فرادرس

مشاوره پنج‌شنبه 27 تیر 1398 ساعت 17:49

0 نظر

۱۰ تابع کمکی لاراول که باید بدانید — راهنمای کاربردی

لاراول تابع‌های کمکی زیادی دارد که روشی آسان برای کار با مسیرها، آرایه‌ها و رشته‌ها به دست می‌دهند. البته شناخت همه آن‌ها کاری تقریباً ناممکن است. اغلب توسعه‌دهندگان انواع بسیار رایج‌تر را می‌شناسند، اما برخی تابع‌های کمکی بسیار مفید دیگر نیز وجود دارند که در صورت کمی تأمل بیشتر با آن‌ها آشنا می‌شوید. در این مقاله تابع‌های کمکی لاراول که باید با آن‌ها آشنا شوید را معرفی می‌کنیم.

1. Logger

تابع کمکی Logger می‌تواند برای نوشتن پیامی با سطح debug در لاگ مورد استفاده قرار گیرد.

1
logger('Product was changed.', ['id' => $product->id]);

که در نتیجه خط زیر را به لاگ اضافه می‌کند:

1
[2019-06-14 09:53:22] local.DEBUG: Product was changed. {"id":4}

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

1
logger()->error('An error occurred');

کد فوق خط زیر را به لاگ اضافه می‌کند:

1
[2019-06-14 09:56:12] local.ERROR: An error occurred

2. تقسیم کردن آرایه

متد ()Arr::divide امکان افراز یک آرایه به دو آرایه را فراهم می‌سازد. متد تقسیم دو آرایه بازگشت می‌دهد که یکی شامل کلیدها و آرایه دیگر شامل مقادیر است.

1
2
3
4
use Illuminate\Support\Arr;
[$keys, $values] = Arr::divide(['name' => 'James', 'age' => 33]);
$keys: ['name', 'age']
$values: ['James', 33]

3. Blank

تابع کمکی Blank بررسی می‌کند که آیا یک مقدار خالی است یا نه. منظور از مقدار خالی null است، یعنی یک رشته که صرفاً شامل کاراکتر فاصله یا آرایه یا رشته خالی است.

نکته: مقادیر بولی به عنوان مقادیر خالی تلقی می‌شوند.

1
2
3
4
5
6
7
8
9
blank('');
blank('   ');
blank(null);
blank(collect());
// Will result in: true
blank(0);
blank(true);
blank(false);
// Will result in: false

معکوس این تابع کمکی، تابع کمکی filled است.

4. دامپ کردن متغیرها

دامپ کردن متغیرها در صورتی که بخواهیم یک یا چند متغیر را دیباگ کنیم بسیار کارآمد خواهد بود.

1
dump($variable);

امکان دامپ کردن متغیرهای چندگانه با ارسال متغیرهای دیگر به تابع dump نیز وجود دارد:

1
dump($var1, $var2, $var3);

در کنار تابع کمکی dump، تابع کمکی دامپ دیگری نیز وجود دارد. این تابع کمکی به نام dd شناخته می‌شود که به معنی «dump and die» است. تابع مذکور همانند تابع دامپ کار می‌کند و تنها تفاوت این است که تابع dd به جای این که صرفاً متغیر را دامپ کند، اجرای اسکریپت را نیز خاتمه می‌بخشد.

5. Paths

لاراول چند تابع کمکی دارد که می‌توان برای دریافت مسیر کامل به دایرکتوری‌های خاص مورد استفاده قرار گیرد. این‌ها تابع‌های کمکی هستند که لاراول در زمان استفاده از مسیرها استفاده می‌کند:

app_path
base_path
config_path
database_path
public_path
resource_path
storage_path

1
2
3
echo storage_path();
// Output:
"C:\Path\To\My\Project\storage"

همچنین می‌توانید یک آرگومان را به تابع‌های کمکی مسیر ارسال کنید که به مسیر الحاق می‌شود:

1
2
3
echo storage_path('attachment.pdf');
// Output:
"C:\Path\To\My\Project\storage\attachment.pdf"

6. Slug

برای تولید رشته مناسب URL از یک رشته می‌توان از تابع کمکی Str::slug استفاده کرد.

1
2
$slug = Str::slug('Laravel Is Awesome');
$slug: "laravel-is-awesome"

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

1
2
$slug = Str::slug('Laravel Is Awesome', '&');
$slug: "laravel&is&awesome"

7. بررسی مقدار آرایه

متد Arr:has می‌تواند با بهره‌گیری از نمادگذاری نقطه (.) برای بررسی این که یک یا چند آیتم در یک آرایه وجود دارند یا نه استفاده شود.

برای بررسی وجود آیتم‌های چندگانه کافی است به جای یک رشته، آرایه‌ای را به متد ارسال کنید:

1
2
3
4
5
6
7
8
use Illuminate\Support\Arr;
$blogs = ['blog' => ['title' => 'My blog', 'published' => true]];
$contains = Arr::has($blogs, 'blog.title'); 
// true
$contains = Arr::has($blogs, ['blog.title', 'blog.published']); 
// true
$contains = Arr::has($blogs, ['blog.title', 'blog.author']); 
// false

8. UUID

متد Str::uuid یک UUID ایجاد می‌کند:

1
2
use Illuminate\Support\Str;
echo(string) Str::uuid(); // "2ad4abcc-8adc-47b6-b21e-9e5497a8af1b"

9. Optional

تابع کمکی Optional امکان دسترسی به مشخصه‌ها را با فراخوانی متدها روی یک شیء که به صورت آرگومان ارسال شده فراهم می‌سازد. هر آرگومانی در این تابع پذیرفته است.

اگر شیء ارسالی به تابع null باشد، مشخصه‌ها و متدها به جای ایجاد خطا مقدار null بازگشت می‌دهند.

1
print optional($blog->author)->full_name;

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

10. Pluck

متد Arr::pluck همه مقادیر را از یک کلید مفروض در آرایه بازیابی می‌کند.

1
2
3
4
5
$parents = [
    ['parent' => ['id' => 1, 'name' => 'James']],
    ['parent' => ['id' => 8, 'name' => 'Lisa']],
];
Arr::pluck($parents, 'parent.name'); // ['James', 'Lisa']

منبع: فرادرس

مشاوره پنج‌شنبه 27 تیر 1398 ساعت 17:48

0 نظر

140
1
...
10
11
صفحه 12
13
14
...
28

طراحی سایت و برنامه نویسی

ابر برجسب

جدیدترین یادداشت‌ها

بایگانی

جستجو

کد جمع کردن چند جمله ای ها — راهنمای کاربردی

جمع کردن چند جمله ای ها

کد جمع کردن چند جمله ای ها در ++C

کد جمع کردن چند جمله ای ها در جاوا

کد جمع کردن چند جمله ای ها در پایتون ۳

کد جمع کردن چند جمله ای ها در #C

کد جمع کردن چند جمله ای ها در PHP

خروجی کد

مفاهیم عمومی برنامه نویسی ناهمگام (Asynchronous Programming) — به زبان ساده

ناهمگام یعنی چه؟

کد مسدودکننده

کنسول مرورگر

نخ

جاوا اسکریپت یک زبان تک نخی است

کد ناهمگام

قابلیت‌های ناهمگام مرورگر

سخن پایانی

ایجاد فرم ورود (Login) با PHP — از صفر تا صد

ایجاد فرم ورود و ثبت نام

کدنویسی فرم ثبت نام

کدنویسی فرم ورود

استایل‌دهی فرم‌ها با CSS

ایجاد جدول کاربر و اتصال به پایگاه داده

کد ثبت نام کاربر

پیاده‌سازی کارکرد ورود کاربر

محدودسازی دسترسی به صفحات

سخن پایانی

ساخت وب اسکرپر (Web Scraper) با جاوا اسکریپت — راهنمای کاربردی

Callback-های ارسالی

Then ،Promise و Catch

Async و Await

متغیرهای استاتیک

JSON

HTML

روش اول: عبارت‌های منظم

روش دوم: تحلیل‌گر DOM

وب‌سایت‌های دینامیک

شروع

لاگین شدن

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

بهینه‌سازی

سخن پایانی

۱۰ تابع کمکی لاراول که باید بدانید — راهنمای کاربردی

1. Logger

2. تقسیم کردن آرایه

3. Blank

4. دامپ کردن متغیرها

5. Paths

6. Slug

7. بررسی مقدار آرایه

8. UUID

9. Optional

10. Pluck