C Program To Concatenate Two Arrays

Lets write a C program to concatenate or append two arrays into a third array. Make use of macros to assign size of the arrays.

Example: Expected Output

Enter 5 integer numbers, for first array
0
1
2
3
4
Enter 5 integer numbers, for second array
5
6
7
8
9

Merging a[5] and b[5] to form c[10] ..

Elements of c[10] is ..
0
1
2
3
4
5
6
7
8
9
Concatenation of arrays

Video Tutorial: C Program To Concatenate Two Arrays


[youtube https://www.youtube.com/watch?v=xrqzVAnvCIY]

YouTube Link: https://www.youtube.com/watch?v=xrqzVAnvCIY [Watch the Video In Full Screen.]

Source Code: C Program To Concatenate Two Arrays

Method 1: Arrays with same size

#include<stdio.h>

#define N 5
#define M (N * 2)

int main()
{
    int a[N], b[N], c[M], i, index = 0;

    printf("Enter %d integer numbers, for first array\n", N);
    for(i = 0; i < N; i++)
        scanf("%d", &a[i]);

    printf("Enter %d integer numbers, for second array\n", N);
    for(i = 0; i < N; i++)
            scanf("%d", &b[i]);

    printf("\nMerging a[%d] and b[%d] to form c[%d] ..\n", N, N, M);
    for(i = 0; i < N; i++)
        c[index++] = a[i];

    for(i = 0; i < N; i++)
        c[index++] = b[i];

    printf("\nElements of c[%d] is ..\n", M);
    for(i = 0; i < M; i++)
        printf("%d\n", c[i]);

    return 0;
}

Output:
Enter 5 integer numbers, for first array
0
9
8
7
6
Enter 5 integer numbers, for second array
5
4
3
2
1

Merging a[5] and b[5] to form c[10] ..

Elements of c[10] is ..
0
9
8
7
6
5
4
3
2
1

Logic To Concatenate Two Array To Form Third Array

Here size of array a and b are same, so the for loops are same to accept elements of array a and b. We initialize variable index to 0. We write a for loop and iterate from 0 to 4, and copy the individual elements of array a to array c. Here index of array a and c varies from 0 to 4.

In the second for loop again we iterate the for loop from 0 to 4. This time value of variable index varies from 5 to 9, where as value of index of variable b varies from 0 to 4. So the individual elements of array b are copied to array c from index 5 to 9.

Method 2: Arrays with different size

#include<stdio.h>

#define N1 5
#define N2 6
#define M (N1 + N2)

int main()
{
    int a[N1], b[N2], c[M], i, index = 0;

    printf("Enter %d integer numbers, for first array\n", N1);
    for(i = 0; i < N1; i++)
        scanf("%d", &a[i]);

    printf("Enter %d integer numbers, for second array\n", N2);
    for(i = 0; i < N2; i++)
            scanf("%d", &b[i]);

    printf("\nMerging a[%d] and b[%d] to form c[%d] ..\n", N1, N2, M);
    for(i = 0; i < N1; i++)
        c[index++] = a[i];

    for(i = 0; i < N2; i++)
        c[index++] = b[i];

    printf("\nElements of c[%d] is ..\n", M);
    for(i = 0; i < M; i++)
        printf("%d\n", c[i]);

    return 0;
}

Output:
Enter 5 integer numbers, for first array
0
1
2
3
4
Enter 6 integer numbers, for second array
5
6
7
8
9
10

Merging a[5] and b[6] to form c[11] ..

Elements of c[11] is ..
0
1
2
3
4
5
6
7
8
9
10

Here the logic to concatenate array elements is same, but only difference is the size of array variable a and b. So we need to be careful while writing conditions in for loop.

For list of all c programming interviews / viva question and answers visit: C Programming Interview / Viva Q&A List

For full C programming language free video tutorial list visit:C Programming: Beginner To Advance To Expert

Working With Images: Small jQuery Application

In this video tutorial, we shall test our skills in jQuery: bind, unbind, append and remove functions. Also we shall see the use of chain methods.

jQuery Event Handling: Binding and Unbinding
Animate Image with ‘this’ Selector: jQuery
Append/Add and Remove HTML/XML Elements: jQuery

Assume that a client has mailed her requirements to us:
She has 5 images in her html page.
Once the user clicks on a image, a message should popin beside the image.
Image should be clickable only once.
Once the user clicks on other images, the messages appended beside previously clicked image must be removed.

With these requirements in mind, we shall start developing our image based jQuery Application.

HTML code
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
 <head><title>Working With Images: Small jQuery Application</title>
 <style type="text/css">
 img{
  padding: 10px;
 }
 </style>
 </head>
 <body>
 
   <div> <img src="images/aperture.png" width="69" height="69" /> </div>
   <div> <img src="images/coda.png" width="69" height="69" /> </div>
   <div> <img src="images/finder.png" width="69" height="69" /> </div>
   <div> <img src="images/photoshop.png" width="69" height="69" /> </div>
   <div> <img src="images/safari.png" width="69" height="69" /> </div>
 
   <script type="text/javascript" src="script/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="script/my_script.js"></script>
 </body>
</html>

Here we have included 5 images and have added 10px padding using CSS.
Each image is being placed inside a div tag.

Note:
So img is a child of div or div is the parent of img.

jQuery code
my_script.js

1
2
3
4
5
6
7
8
9
$(document).ready( function() {
 
  $("img").click( function() {
   $("b").remove();
   $(this).parent().append("<b>You clicked on Me!</b>");
   $(this).unbind();
 });
 
});

Once the document is ready and the user clicks on a image:
1. Any b tag present in the document is removed. Thus, the message associated with the image which was being clicked previously is removed.
2. The parent tag of the image being clicked: i.e., div tag is selected and a message with b tag is appended to it, which appears beside the image being clicked by the user.
3. The event associated with the image being clicked is removed.

Note:
Use of function().function() is called chain method.
Example:
parent().append();
next().parent().remove(); etc

Make sure to maintain the order of the code. If you replace or rearrange the code in a way other than above, you wouldn’t get expected result.
While practicing, change the order of the code and look for the output, that would help you understand the code and the flow / execution flow well.

Video Tutorial: Working With Images: Small jQuery Application


[youtube https://www.youtube.com/watch?v=MckRCdhiZBI]

YouTube Link: https://www.youtube.com/watch?v=MckRCdhiZBI [Watch the Video In Full Screen.]



Keep testing your jQuery skills by doing some mini projects like this one.
Let it be small, so that it doesn’t take forever to test your skills.

You could even test and enhance your jQuery skills by helping people on our forum.

Append/Add and Remove HTML/XML Elements: jQuery

Video tutorial to illustrate adding or appending an html element or removing an html element from the web page using jQuery: DOM (Document Object Model)

jQuery uses: .append(); and .remove(); functions to accomplish this task.

We could use these methods to append string or any other html or XML element and also remove string and other html or XML elements from the document.

In this example, we are illustrating with the help of an ordered list, by adding and removing its list items.

HTML code
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
 <head><title>Add/Append and Remove Elements!</title></head>
 <body>
            <ol>
             <li></li>
             <li></li>
            </ol>
 
 
          <button id="add_li">Add List</button>
          <button id="remove_li">Remove List</button>
 
   <script type="text/javascript" src="script/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="script/my_script.js"></script>
 </body>
</html>

Here we have two list items and two buttons.
Buttons have unique id’s: add_li, remove_li Clicking on which the list items get added and removed respectively.

jQuery code
my_script.js

1
2
3
4
5
6
7
8
9
10
11
$(document).ready( function() {
 
 $("#add_li").click( function() {
    $("ol").append("<li></li>");
 });
 
  $("#remove_li").click( function() {
    $("li:last").remove();
 });
 
});

Once the document is loaded and the user clicks on Add List button, the list item gets added.
Once the document is loaded and the user clicks on Remove List button, the list item gets deleted.

1
    $("ol").append("<li></li>");

Here li tag gets appended to ol tag.

1
    $("li:last").remove();

First select the element to be removed, and then call remove() method.
Here, we select the last list item in the ordered list and then invoke remove method, which removes li one at a time in reverse order.

Video Tutorial: Append/Add and Remove HTML Elements: jQuery


[youtube https://www.youtube.com/watch?v=jexv6AfI2lE]

YouTube Link: https://www.youtube.com/watch?v=jexv6AfI2lE [Watch the Video In Full Screen.]



If we select li and apply remove() method on it, it would remove all the list items from the document. So we need to specify the list item to be removed. In our case, we are interested in removing the last list item from the ordered list.

1
    $("li").remove();

Using append() and remove() methods, try to append and remove string and other html and xml elements from the document.
You could do the same on XML documents too.

Also Learn:
XML Tutorials