Govt. Boys Sr. Sec.

School
G. T. Road, Shahdara, DELHI-32
School ID: 1105006

National Skill Qualification Framework

Practical File

Name : …………………………………………………..
Student ID : …………………………………………………..
Class : …………………………………………………..
Subject : …………………………………………………..

Name of subject Teacher:

 Index
S. Experiment / Topic Page Signature
No. No.
1 Various Video Editing Software
2 Split Video Clip using Windows Movie Maker.
3 Joining Video clip using WMM.
4 Perform Trimming Video Clip using WMM.
5 Adding Titles in Video using WMM.
6 Publish movie to your computer using WMM.
7 Embedding Audio in Web Page
8 Embedding Video in Web Page.
9 Embedding Flash Files in Web Page.
Write a Program using JavaScript for Printing a line of Text in a web
10
Page.
Write a Program using JavaScript to show date and time in a Web
11
Page.
12 Write a Program using JavaScript to show Alter box in a Web Page.
Write a Program using JavaScript to show Confirm box in a Web
13
Page.
Write a Program using JavaScript to show Prompt box in a Web
14
Page.
Write a Program using JavaScript to Demonstrate function in a Web
15
Page.
Write a Program using JavaScript to find the position of the first
16
occurrence of a text in a string using indexOf() function.
Write a Program using JavaScript to search for a text in a string and
17
return the text if found using match() function.
Write a Program using JavaScript to replace characters in a string
18
using replace() function.
Write a Program using JavaScript to round off number to nearest
19
integer using round() function
Write a Program using JavaScript to return a Random number
20
between 0and 1 using Random() function.
21 Write a Program using JavaScript to return the function.
Program to return the number with highest value of two specified
22
numbers using MAX()
Program to return the number with the lowest value of two
23
specified number using MIN().
24 Program to create an array.
25 Write a Program using JavaScript to find length of Array.
26 Program to join two arrays using concat ().
27 Program to remove the last element from the array by using pop()
28 Program to add a new element to the array using push().
29 Program to reverse the order of the elements in the array.
30 Program to sort the array.
31 Execution of JavaScript immediately after a page has been loaded.
32 Execute a JavaScript when a button is clicked.
 Experiment: 1
Various Video Editing Software
1. Windows Movie Maker :- Movie Maker is an excellent, full-featured option for the average
home user. It is use to post produced movie editing with effects.

2. Virtual Dub :- VirtualDub is a video capture/processing utility for 32-bit and 64-bit Windows
platforms. It has batch-processing capabilities for processing large numbers of files and can be
extended with third-party video filters. VirtualDub is mainly geared toward processing AVI files,
although it can read (not write) 3 MPEG-1 and also handle sets of BMP images.

3. Wax :- Wax is a high performance and flexible video compositing and special effects software.
The idea for Wax is to be very general purpose and flexible in video compositing and effects, so
that you can compose your dream video sequence with ease every time.

4. Blender:- Blender is the free open source 3D content creation suite, available for all major
operating systems under the GNU General Public License. It is one of the powerful, multiuse
editing/compositing and modeling tool. This tool allows you to edit, create 3D graphics, sound
effects, add special effects and much more.

5. MovieStorm :- Moviestorm is the complete 3D movie making software application for all
abilities. Whether your movie interest is cartoons, crime, music, horror etc., you can create
awesome animation effects using this software.

6. VideoSpin :- VideoSpin, free editor based on Studio, does a pretty darn good job compared with
most free video tools. It doesn’t match the qualities of paid software's but perform basic editing
and output movies pretty easily.

7. Mewa Film :- It is a non-linear editing tool, called montage (this name might change) where
video files are shown as a sequence of images layed off horizontally. The video files can then be
assembled and cutted using intuitive actions as “drag and drop” and “rubber band selection”.

8. DVD Knife:- DVD Knife is a simple tool for extracting DVD clips from your DVD’s. The clips will be
stored in VOB format only. This is the simplest and fastest tool in its category which has ability to
extract long VOB clips in few seconds.

9. AVI Trimmer:- The AVI Trimmer is a free video editor for fast and lossless AVI editing. This
freeware AVI editor is small, smart, easy to use and involves no encoding/decoding processes.
No video / audio degradation and out of sync problem arises after editing.

10. Cinefx Jashaka:- Cinefx is an offline playback, editing, encoding, animation and visual effects tool
based on the Jahshaka technology that allows you to create professional digital media on your
desktop. Use the tools that hollywood uses to create blockbuster films and special effects.
 Experiment: 2
Split Video Clip using Windows Movie Maker

1. Import video to Windows Movie Maker.

2. In the Preview window, locate the specific frame of the video that you want to cut.
3. Click Split under Edit.
4. Delete the portion of the footage you no longer wish to use.
5. Save your movie.

Output
 Experiment: 3
Joining Video clip using WMM

1. Add Your Clips. Click the Add Videos and Photos button under the Home tab, and then select
the video clips you wish to combine to the WMM. ...
2. Arrange the Clips. ...
3. Save Your Video.

Output
 Experiment: 4
Perform Trimming Video Clip using WMM

1. Select a clip in the timeline. Click on Show Timeline if you do not see the timeline.
2. Place the play head where you want your clip to start. ...
3. Select Clip > Set Start Trim Point.
4. Place the play head where you want the clip to end. ...
5. Select Clip > Set End Trim Point.

Output
 Experiment: 5
Adding Titles in Video using WMM

1. On the Tools menu, click Titles and Credits.

-or-
In the Movie Tasks pane, under Edit Movie, click Make titles or credits.
2. On the Where do you want to add a title? page, click one of the links depending on where
you want to add the title.
3. In the Enter Text for Title page, type the text you want to appear as the title.
4. Click Change the title animation, and then on the Choose the Title Animation page, select a
title animation from the list.
5. Click Change the text font and color, and then on the Select Title Font and Color page,
choose the font, font color, formatting, background color, transparency, font size, and
position of the title.
6. Click Done, add title to movie to add the title to your movie.

Output
 Experiment: 6
Publish movie to your computer using WMM

1. In Windows Movie Maker, make sure movie is in final form. Then save it.
2. Click the Application button on the far left, choose Publish, and select from one of the
available Web sites.

Add a plugin at this point to publish to a different site. One of the best plugin options is LiveUpload
to YouTube, which automatically formats and forwards your movie directly to your YouTube
account.

Output
 Experiment: 7

Embedding Audio in Web Page

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Click play button to play audio</h2>
<audio src="./test.mp3" controls></audio>
</body>
</html>

Output
 Experiment: 8
Embedding Video in Web Page.

<!DOCTYPE html>
<html>
<head>
<title>Flash Content</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>

Output
 Experiment: 9
Embedding Flash Files in Web Page

<!DOCTYPE html>
<html>
<head>
<title>Adding Flash File</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<object width="500" height="400">
<param name="movie" value="file.swf">
<embed src="file.swf" width="500" height="400">
</embed>
</object>
</body>
</html>

Output
 Experiment: 10
Write a Program using JavaScript for printing a line of Text in a web Page

<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

Output

My First Web Page

My first paragraph.

Never call document.write after the document has finished loading. It will
overwrite the whole document.

11
 Experiment: 11
Write a Program using JavaScript to show date and time in a Web Page

<!DOCTYPE html>
<html>
<body>

<p>Get the current date and time:</p>

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

<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
</script>

</body>
</html>

Output

Get the current date and time:

Mon Nov 18 2024 16:10:15 GMT+0530 (India Standard Time)

 Experiment: 12
Write a Program using JavaScript to show Alter box in a Web Page

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Alert</h2>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>

Output
 Experiment: 13
Write a Program using JavaScript to show Confirm box in a Web Page

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Confirm Box</h2>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt;
if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Output
 Experiment: 14
Write a Program using JavaScript to show Prompt box in a Web Page

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Prompt</h2>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
let text;
let person = prompt("Please enter your name:", "Harry Potter");
if (person == null || person == "") {
text = "User cancelled the prompt.";
} else {
text = "Hello " + person + "! How are you today?";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

Output
 Experiment: 15

Write a Program using JavaScript to find the position of the first occurrence of a text in a string
using indexOf() function

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The indexOf() Method</h2>
<p>indexOf() returns the position of the first occurrence of a value in a string.</p>
<p>Find "welcome":</p>
<p id="demo"></p>
<script>
let text = "Hello world, welcome to the universe.";
let result = text.indexOf("welcome");
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>

Output

JavaScript Strings

The indexOf() Method

indexOf() returns the position of the first occurrence of a value in a string.

Find "welcome":

13
 Experiment: 16

Write a Program using JavaScript to search for a text in a string and return the text if found using
match() function

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The match() Method</h2>
<p>match() searches for a match in a string.</p>
<p>Do a search for "ain":</p>
<p id="demo"></p>
<script>
let text = "The rain in SPAIN stays mainly in the plain";
let result = text.match("ain");
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>

Output

JavaScript Strings

The match() Method

match() searches for a match in a string.

Do a search for "ain":

ain
 Experiment: 17

Write a Program using JavaScript to replace characters in a string using replace() function

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The replace() Method</h2>
<p>replace() searches a string for a value,
and returns a new string with the specified value(s) replaced:</p>
<p id="demo">Visit School!</p>
<script>
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = text.replace("School", "Market");
</script>
</body>
</html>

JavaScript Strings

The replace() Method

replace() searches a string for a value, and returns a new string with the specified
value(s) replaced:

Visit School!
 Experiment: 18

Write a Program using JavaScript to round off number to nearest integer using round() function

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math</h1>
<h2>The Math.round() Method</h2>
<p>Math.round() rounds a number to the nearest integer:</p>
<p id="demo"></p>
<script>
let a = Math.round(2.60);
let b = Math.round(2.50);
let c = Math.round(2.49);
let d = Math.round(-2.60);
let e = Math.round(-2.50);
let f = Math.round(-2.49);
document.getElementById("demo").innerHTML = a + "<br>" + b + "<br>" + c + "<br>" + d +
"<br>" + e + "<br>" + f;
</script>
</body>
</html>

Output

JavaScript Math

The Math.round() Method

Math.round() rounds a number to the nearest integer:

3
3
2
-3
-2
-2
 Experiment: 19

Write a Program using JavaScript to return a Random number between 0and 1 using random()
function

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Math.random()</h2>
<p>Math.random() returns a random number between 0 (included) and 1 (excluded):</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.random();
</script>
</body>
</html>

Output

JavaScript Math.random()
Math.random() returns a random number between 0 (included) and 1 (excluded):

0.7445624499285202
 Experiment: 20

Write a Program using JavaScript to return the function

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Statements</h1>
<h2>The return Statement</h2>
<p>Call a function that returns the value of PI:</p>
<p id="demo"></p>
<script>
function myFunction() {
return Math.PI;
}
document.getElementById("demo").innerHTML = myFunction();
</script>
</body>
</html>

Output

JavaScript Statements

The return Statement

Call a function that returns the value of PI:

3.141592653589793
 Experiment: 21

JavaScript program to return the number with highest value of two specified numbers using max()

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math</h1>
<h2>The Math.max() Method</h2>
<p>Return the number with the highest value:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.max(5, 10);
</script>
</body>
</html>

Output

JavaScript Math

The Math.max() Method

Return the number with the highest value:

10
 Experiment: 22

JavaScript program to return the number with the lowest value of two specified number using
min()

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Math</h1>
<h2>The Math.min() Method</h2>
<p>Return the number with the lowest value:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = Math.min(5, 10);
</script>
</body>
</html>

Output

JavaScript Math

The Math.min() Method

Return the number with the lowest value:

5
 Experiment: 24

JavaScript program to create an array

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<p id="demo"></p>
<script>
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>

Output

JavaScript Arrays
Saab,Volvo,BMW
 Experiment: 25

Write a Program using JavaScript to find length of Array

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The length Property</h2>
<p>The length property sets or returns the number of elements in an array.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
document.getElementById("demo").innerHTML = length;
</script>
</body>
</html>

Output

Script Arrays

The length Property

The length property sets or returns the number of elements in an array.

4
 Experiment: 26

Program to join two arrays using concat()

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The concat() Method</h2>
<p>The concat() method concatenates (joins) two or more arrays:</p>
<p id="demo"></p>
<script>
const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const children = arr1.concat(arr2);
document.getElementById("demo").innerHTML = children;
</script>
</body>
</html>

Output

JavaScript Arrays

The concat() Method

The concat() method concatenates (joins) two or more arrays:

Cecilie,Lone,Emil,Tobias,Linus
 Experiment: 27

Program to remove the last element from the array by using pop()

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The pop() Method</h2>
<p>pop() removes the last element of an array.</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
document.getElementById("demo").innerHTML = fruits;
</script>
</body>
</html>

Output

JavaScript Arrays

The pop() Method

pop() removes the last element of an array.

Banana,Orange,Apple
 Experiment: 28

Program to add a new element to the array using push()

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The push() Method</h2>
<p>push() adds new items to the end of an array:</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
document.getElementById("demo").innerHTML = fruits;
</script>
</body>
</html>

Output

JavaScript Arrays

The push() Method

push() adds new items to the end of an array:

Banana,Orange,Apple,Mango,Kiwi
 Experiment: 29

Program to reverse the order of the elements in the array

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The reverse() Method</h2>
<p>The reverse() method reverses the order of the elements in an array.</p>
<p id="demo"></p>
<script>
// Create an Array
const fruits = ["Banana", "Orange", "Apple", "Mango"];
// Reverse the Array
const fruits2 = fruits.reverse();
document.getElementById("demo").innerHTML = fruits2;
</script>
</body>
</html>

Output

JavaScript Arrays

The reverse() Method

The reverse() method reverses the order of the elements in an array.

Mango,Apple,Orange,Banana
 Experiment: 30

Program to sort the array

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>
<p>The sort() method sorts an array alphabetically:</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;
fruits.sort();
document.getElementById("demo2").innerHTML = fruits;
</script>
</body>
</html>

Output

JavaScript Arrays

The sort() Method

The sort() method sorts an array alphabetically:

Banana,Orange,Apple,Mango

Apple,Banana,Mango,Orange
 Experiment: 31

Execution of JavaScript immediately after a page has been loaded

<!DOCTYPE html>
<html>
<body onload="myFunction()">
<h1>HTML DOM Events</h1>
<h2>The onload Event</h2>

<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</body>
</html>

Output

HTML DOM Events

The onload Event
 Experiment: 32

Execute a JavaScript when a button is clicked

<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>
<p>The onclick event triggers a function when an element is clicked on.</p>
<p>Click to trigger a function that will output "Hello World":</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>

Output