CLASS XII WEB-APPLICATION (NOTES UNIT 1)

WHAT IS MOVIE EDITING TOOL

Movie Editing tools are editing software and we can also say them as
application software which handles the post –
Production video editing of digital video sequences on a
computer non-linear editing system (NLE).

TYPES OF MOVIE EDITING TOOLS

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

Visit Us at www.studykeeda.in
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.

WHAT IS STORYBOARD
The storyboard is the default view in Windows Movie Maker.
We can use the storyboard to look at the sequence or
ordering of the clips in your project and easily rearrange them,
if necessary. This view also let us see any video effects or video
transitions that have been added. Audio clips that have added
to a project are not displayed on the storyboard, but we can
see them in the timeline view.T

WHAT IS TIMELINE

The timeline view provides a more detailed view of our movie

project and allows us to make finer edits. Using this timeline view,
we can:-
1) Trim video clips, adjust the duration of transitions between
clips, and view the audio track.

Visit Us at www.studykeeda.in
2) Review or modify the timing of clips in your project. Use the
timeline buttons to switch to storyboard view, zoom in or out
on details of your project, narrate the timeline, or adjust the
audio levels.

WHAT IS PREVIEW MONITOR

The preview monitor enables us to view individual clips or an entire

project. By using the preview monitor, we can preview our project
before publishing it as a movie. We can use the buttons underneath
the preview monitor to play or pause a clip, or to advance or rewind
a clip frame-by-frame. The Split button allows us to split a clip into
two parts at the point displayed in the preview monitor. The
preview monitor can be made larger or smaller by clicking View,
pointing to Preview Monitor Size, and choosing a size. The window
can be dragged to make it larger or smaller.

IMPORTING PICTURES, AUDIO AND VIDEO CLIPS PICTURES INTO

WINDOWS MOVIE MAKER

We can import files with the following file name extensions

into Windows Movie Maker to use in your project:
1. Video files: .asf, .avi, .dvr-ms, .m1v, .mp2, .mp2v, .mpe,
.mpeg, .mpg, .mpv2, .wm, and wmv
2. Audio files: .aif, .aifc, .aiff .asf, .au, .mp2, .mp3, .mpa, .snd,
.wav, and .wma
3. Picture files: .bmp, .dib, .emf, .gif, .jfif, .jpe, .jpeg, .jpg, .png,
.tif, .tiff, and .wmf

SPLITTING

Split : - We can manually split video and audio clips into smaller clips to
make your clips easier to work with.

Steps to Split a Clip:

1) In the Contents pane or on the storyboard/timeline, click the video or
audio clip that need to be split.
2) Under the preview monitor, click the Play button.

Visit Us at www.studykeeda.in
3) When the clip reaches a point near the place you want to split the clip,
click Pause.
4) Under the preview monitor, use the playback controls to find the point
where we want to split the clip.
5) Under the preview monitor, click the Split button.

JOINING

Joining : - We can combine contiguous video clips on the storyboard or in

the Contents pane (before adding the clip or clips to the
storyboard/timeline).

Steps to To Combine/Join Clips:

1) 1) In the Contents pane or on the storyboard, hold down the CTRL key,
and then click the contiguous clips which need to be combined.
2) 2) Click Clip, and then click Combine.

TRIM

When a clip is to be trimmed, a new start and/or end trim point is made.
The start trim point determines when the clip will begin to play, and the end
trim point determines when the clip will stop playing in our project and final
movie. When we trim a clip, the trimmed part of the clip is not actually
removed from the source file; it's just hidden so the trimmed part doesn't
appear in our project or published movie.

Steps to trim a video clip :

1) While in the storyboard view, click View, and then click Timeline.
2) On the timeline, click the clip that wished to be trim.
3) Use the playback controls under the preview monitor to find the point
where you want to trim the clip. Do the following:
1) When the playback indicator is at the point where we want the
selected video or audio clip to start playing back, click Clip, and then
click Trim Beginning.
2) When the playback indicator is at the point where we want the
selected video or audio clip to stop playing back, click Clip, and then
click Trim End.

Visit Us at www.studykeeda.in
ADDING TITLES IN WINDOWS MOVIE MAKER

Windows Movie Maker, we can add a title, your name, the date, credits,
and other text to your movie. For example, you might want to add a title to
introduce a person or scene that appears in your movie. You can add title
text to various places in your movie: at the beginning or end, before or after
a clip, or overlaying a clip. The title plays for the specified amount of
time, either on the screen by itself or overlaying the video as it plays, and
then the title disappears and the video clip or picture continues.
Steps to create title:
1. Click that location on the storyboard/timeline where title or credit is to be
inserted.
2. Click Tools, and then click Titles and Credits.
3. Click the link that corresponds to location where title or credit is to be
inserted..
4. In the Enter text for title box, type the text that you want to appear as the
title or credit. After you type the text, the
monitor displays the default animation and format for the title or credit need
to be inserted.
5. To change the title animation, click Change the title animation, and
select a title animation from the list.
6. To change the font and color for your title, click Change the text font and
color, and then choose the font, font color, formatting, background color,
transparency, font size, and position of the title to your liking.
7. Click Add Title.

Visit Us at www.studykeeda.in
Steps to Edit Existing Title:-

1) On the storyboard/timeline, click the title need to be edited.

2) 2) Click Edit, and then click Edit Title.
3) 3) Make the changes, and then click Add Title.

Steps to Change title duration:-

1) To make sure that you are in timeline view, click the View menu, and
then click Timeline.
2) Select the title whose duration you want to change.
3) Do the following:
1) To extend the playback duration of the title, drag the end trim handle
toward the end of the timeline.
2) To reduce the playback duration of the title, drag the end trim handle
toward the beginning of the timeline.

Steps to Remove a Title

1) On the storyboard/timeline, click the title that need to be removed.

2) 2) Click Edit, and then click Remove.

PUBLISHING MOVIE IN WINDOWS MOVIE MAKER

After finishing working on a project, we can publish the project as a movie.

A movie is a Windows Media file with a.wmv file name extension or an
Audio-Video Interleaved (AVI) file with an .avi file name extension.

Steps to Publish a Movie to your Computer

1) Click File, click Publish Movie.

2) Click This computer, and then click Next.
3) In the File name box, type a name for your movie.
4) In the Publish to box, choose where ever want to save the movie once
it's published, and then click Next.
5) Choose the settings to be used to publish the movie, and then click
Publish.

Visit Us at www.studykeeda.in
6) To watch the movie after it has been published, select the Play movie
after clicking Finish check box.
7) Click Finish.

STEPS BURN A MOVIE TO A RECORDABLE CD

1. Insert a blank recordable CD or a rewriteable CD into your CD burner.

2. Click File, and then click Publish Movie.
3. Click Recordable CD, and then click Next.
4. In the File name box, type a name for your movie.
5. In the CD Name box, type a name for the CD, and then click Next.
6. Choose the settings to be used to publish the movie, and then click
Publish.
7. To publish and burn the movie to another recordable CD, select the
Publish this
movie to another recordable CDcheck box, and then click Next.

STEPS TO PUBLISH A MOVIE

1. Click file.
2. Click publish movie.
3. Click this computer, and then click next.
4. In the file name box, type a name for your movie.
5. In the publish to box, choose where ever want to save the movie once
it's published, and then click next.
6. Choose the settings to be used to publish the movie
7. Click on publish.

IMPORTANT FULL FORMS

• JPEG => Joint Photographic Experts Group

• GIF => Graphics Interchange Format
• PDF => Portable Document Format
• WMF => Windows MetaFiles
• MPEG => Motion Picture Experts Group
• PNG => Portable Network Group

Visit Us at www.studykeeda.in
 Class XII WEB-APPLICATION (Notes Unit 2: Customizing and Embedding
Multimedia Components in Web Pages)

What is customizing multimedia tools in web page?

1. Multimedia comes in many different formats. It can be almost anything you can hear or see.
2. Examples: Pictures, music, sound, videos, records, films, animations, and more
3. Modern Web pages have often embedded multimedia elements, and modern browsers
have support for various multimedia formats.
4. Multimedia files also have their own formats with different extensions like: .swf, .wav,
.mp3, and .mp4.

Advantages of Using Multimedia on Web Pages:

● Greater Immersion: Adding multimedia elements to a Web page make it easier to draw in
viewers. While video is the most popular multimedia addition, sites also add audio and
interactive content to attract and hold the attention of the viewers.

● Enhanced Page Rankings for SEO: While the value of multimedia remains controversial in the
search engine optimization world, surveys conducted by Forrester Research indicate that video
content, done correctly, is a major benefit to a site's overall SEO strategy. The company
discovered in 2010 that websites with videos were 53 times more likely than text-based
websites to appear on the first page of search engine results.

● Better Branding: While HTML 5 text-based sites are more elaborate than websites of the
past, they are still limited in many ways. It is hard to represent a brand's image without
including audio or video content to support it. As such, multimedia sites are frequently
preferred by marketing departments because of their ability to completely present branding.

Disadvantages of Using Multimedia on Web Pages:

● Potential Damage to Search Engine Rankings: While video content can help a site with
search engines, images that are not handled correctly can damage a sites ranking. Sites lacking
links an automated "spider" program can follow end up being ignored by search engines.

● Loading Times: While the days of measuring page load times on a slow, dial-up modem are
over, multimedia content still takes longer to load than static content. Presenting a user who
visits a site with a screen that says "Please Wait. Loading" frequently results in a viewer clicking
away to a different page.

Visit us www.studykeeda.in
● Compatibility: Every browser can display at least some subset of HTML. Multimedia elements
not as widely supported. The best example of this is the absence of Flash multimedia on Apple's
mobile devices. As of the middle of 2012, the devices still did not support Flash, causing sites
that depend upon Flash to display incorrectly on iPads and iPhones. This problem applies to
other types of multimedia, as well.

Compatible Multimedia File Formats for Web Pages:-.

● Images : - A single still video image, whether created by a drawing or paint program or
scanned from a book or grabbed with a video camera, can be stored in any of a wide variety of
file formats. The data will be stored in a raster or a vector file format. A raster image is one
composed of a field of pixels, each characterized by a color, and is usually created in paint
programs, by scanning a picture or by grabbing an image. A vector format is created almost
always by a drawing/CAD program and consists not of pixels, but objects such as curves,
shades, and characters. Raster formats can be generally separated into two categories. Lossy
formats lose resolution (sharpness) when converted to, while lossless formats preserve image
information.

Eg. of Image file formats are :- .Jpeg, .GIF, .PNG, .tiff, .bmp, .PICT, .WMF, .psd etc.

Inserting Images into Web Pages

<!DOCTYPE html>

<html lang="en">

<head>

<title>Placing Images in HTML Documents</title>

</head>

<body>

<img src="/examples/images/kites.jpg" alt="Flying Kites">

<img src="/examples/images/sky.jpg" alt="Cloudy Sky">

<img src="/examples/images/balloons.jpg" alt="Hot Air Balloons">

</body>

</html>

Visit us www.studykeeda.in
● Movie: - Movies, as they are labeled here, consist of a series of still images, sometimes with
embedded audio information, united in such a way as to produce a single playable file. MPEG
and QuickTime are the two most commonly encountered movie formats on the Internet.

1. .avi: AVI is a file format developed by Microsoft and primarily used in Windows.

2. .mov, .MooV, .qt: Any of these file extensions means that the file is an Apple
Quicktime movie.

3. .mpg, .mpeg: MPEG files use the MPEG-1 video compression routine, a universal
protocol for creating and displaying time coded data created by the Motion Picture
Experts Group. Compatible Multimedia File Formats for Web Pages

Using the HTML5 video Element embed

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Specify Alternate Sources for video Element in HTML</title>

</head>

<body>

<video controls="controls">

<source src="/examples/video/shuttle.mp4" type="video/mp4">

<source src="/examples/video/shuttle.ogv" type="video/ogg">

Your browser does not support the HTML5 Video element.

</video>

</body>

</html>

Visit us www.studykeeda.in
● Sound: - Files containing data used to recreate audio on a computer are called audio files and
are also available in many different formats. Similar to image formats, audio files can either
store a digital sampling of the sound wave.

1. .au: An AU is an audio sound file native to Sun

2. mid, .rmi: MIDI files can be played with the Windows MIDI sequencer. They are music
files that conform to the MIDI standard. 3. .mod: A MOD file is a music file format
originally from the Commodore Amiga, but which is now popular on IBM-compatible
computers.

4. .wav: WAV (wave) files are Microsoft's native audio sound format. WAV files can
include 8-bit or 16-bit sound, in mono or stereo. They can be played on Pentium
computers with Media Player and wplany.

5. .snd: An SND is a Macintosh clickable sound format.

Embed sound file in html as audio control in HTML5:-

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Embedding Audio into an HTML Page</title>

</head>

<body>

<audio controls="controls" src="/examples/audio/birds.mp3">

Your browser does not support the HTML5 audio element.

</audio>

</body>

</html>

Visit us www.studykeeda.in
Embed sound file in html as object:-

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Inserting Audio Using object Element</title>

</head>

<body>

<object data="/examples/audio/sea.mp3"></object>

<object data="/examples/audio/sea.ogg"></object>

</body>

</html>

Embed sound file in html as source tag:-

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Specify Alternate Sources for audio Element in HTML</title>

</head>

<body>

<audio controls="controls">

<source src="/examples/audio/birds.mp3" type="audio/mpeg">

<source src="/examples/audio/birds.ogg" type="audio/ogg">

Your browser does not support the HTML5 audio element.

Visit us www.studykeeda.in
 </audio>

</body>

</html>

What is MIDI?

It's an acronym that stands for Musical Instrument Digital Interface. That's a program that acts
as a go-between for an instrument and something that creates the sound. Sort of like running a
guitar through a computer and then out a speaker. A midi file over the Web works as a program
that runs the sound card. The midi file is not simply read and reproduced like a .wav or an .au
file. The midi file sort of "plays" the sound card. It tells the sound card what note to produce
and for what duration. Embedding Video in Web Pages A good piece of video can help us to
deliver our message more effectively, educate readers, stimulate discussion and get our brand
going far beyond our own domain. Happily, it's not a problem nowadays to integrate a video
into a web page, as there's a lot of different tools to assist with this task. Some of them are
free, others are pricey. Here is a roundup of the most popular means of web video embedment.

Youtube Embed Code:-

<iframe width="560" height="315"
src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdm
BHs5Iftvv9TPboYG" frameborder="0" allow="autoplay; encrypted-media"
allowfullscreen></iframe>

Oembed :- OEmbed is an open standard for embedding videos and images into a website. We
can use the video URL available on YouTube, Vimeo, Dailymotion, Flickr, Scribd, Hulu and
supported resources. The simple API allows websites to display embedded content when a user
posts a link to that resource, without having to parse the resource directly.

Embedding Flash Files in Web Pages :-

There are many ways to insert your Flash project into a web page. Inserting Flash into Web
Pages Manually with Code:-

<object width="550" height="400">

<param name="movie" value="somefilename.swf">

<embed src="somefilename.swf" width="550" height="400">

Visit us www.studykeeda.in
</embed>

</object>

What is css and current version available of it?

"Cascading" means that styles can fall (or cascade) from one style sheet to another, enabling
multiple style sheets to be used on one HTML document. Even the simplest HTML document
may have three or more style sheets associated with it including: The browser's style sheet. The
user's style sheet. Current version available is CSS 3

What is latest HTML version is?

HTML5 is the latest evolution of the standard that defines HTML.

Video Lightbox :- Video LightBox is a wizard program for Windows and Mac that helps users
easily insert video to the website or blog, in a few clicks without writing a single line of code. It
is free for non-commercial use. we need to add a video URL (from YouTube, Facebook, Google
Video, Metacafe, Vimeo, MySpace) or drag and drop a desktop video file, then select the
template and publish the result to our website via a built-in FTP client.

Visit us www.studykeeda.in
 Web Application Notes Unit - 4
Advanced Features of Web-Design

What is Add-ins and steps to install add-in?

Add-ins extends the capability of the main program by adding enhanced custom
commands and specialized features. You can download a variety of Add-ins from:

http://msdn.microsoft.com/en-us/expression/jj873995.aspx
http://www.webassist.com/go/xweb-add-ins
http://www.expressionextras.com/products/lightbox.htm
http://www.dotnetcurry.com/ShowArticle.aspx?ID=534

Once you have downloaded an Add-in, use the following procedure to install the Add-in:
1) Select Tools > Add-ins. The Manage Add-ins dialog box appears.
2) Select Install…. Browse and select the Add-in and then click Open.
3) Select Yes.
4) Repeat the procedure to include more Add-ins.

What is Snippets and how to use the snippets?

Snippets are pieces of programs re-used by most developers. Snippets are useful as you
can keep reusing the code created many times across multiple web pages or web sites
saving enormous amount of time and effort. To view and insert the available snippets, do
the following:
1) Select Panels > Snippets. Notice the list of snippets available separated into
categories such as CSS, HTML, JavaScript, JQuery, etc.

2. To insert a snippet, do the following:

a) Create a new page. Place the cursor where you want the snippet to be placed.
b) Select View > Page > Code. (Snippets can be inserted only in Split or Code
View).
c) Expand HTML, expand Hyperlink folder.
d) Double-click on a snippet, for example: Add to favorites. Notice the code is
added to the web page.

PSD Templates
As a web designer, you need to create pages that are attractive and simple. Remember
that along with showcasing content to a visitor and the design also needs to be pleasant,
encouraging them to repeat their visit to the website.

Steps to LINK PSD & MEW

Also there is a special feature that can be used for updating an image whenever the
original (.PSD) Photoshop image is modified. To understand how to use this feature, do
the following:
Import a .PSD (Photoshop files use this extension) file and do the following:
1) Create a new web page, save the file as psd.html.

2) Select File > Import > Adobe Photoshop (.psd)

3) Browse and select the file. Click Open. Import Adobe Photoshop File dialog box
Appears

4) You can select the layers you want to import using the options in the left pane. Select
Compatibility Image located at right bottom and click OK.

Dynamic Web Templates

Templates help you organize the entire website to have a consistent look and feel. This is
very helpful when you work with large number of web pages.
On website, we may have some common items displayed on all pages such as the
logo, copyright & organization details, navigation menu, etc. but the content may vary on
each page. Here, we can create a dynamic web template (DWT) with fixed positions for
common elements and modifiable designated portions on each web page.

Features of DWT (dynamic web template)

1) When you update the DWT, all web pages in the website are automatically updated to
changes.
2) You can create multiple DWT and keep changing just the template that affects the
entire website.
3) You can allow only specific portions of the pages to be edited instead of whole web
page resulting in better control and reduced chances of mistakes.

Steps to Creating a Dynamic Web Template

To create a dynamic web template, do the following:

1) Create a new web page (to be used as template).
2) Add common elements such as a logo (picture), company name, copyright notice at
the bottom of the web page, etc.
3) You need to add editable regions and that will be the only area in which the content
can be modified. To create editable region, do the following:
a) Place the cursor where you need to place content (remember, this will be the
only area where the content can be placed or changed). Right-click and select
Manage Editable Regions…. The Editable Regions dialog box appears (figure
below).
b) Type a name, for example: Content. Click Add.
c) Click Close.

4. Select File > Save. Select Dynamic Web Template from the Save as type:
dropdown menu (figure below). Type a file name, for example: MyTemplate and click
Save

Fill in the blanks

1. Acronym for DWT _Dynamic Web Template_.

2. .DWT from the Save as type: dropdown menu should be used for creating DWT.

3. IIS full form Internet Information Services.

4. ISP full form Internet Service Provider

Explain the purpose of SEO.

Search Engine Optimization or SEO refers to the process that affects the website visibility
or ranking when displaying search results. Search Engines search contents of a web page
and create indexes to display results. As a web developer, you need to understand how
search engines work and how to get better search ranking. SEO Checker built-in with the
HTML Editor gives detailed reports that help you optimize the website for better ranking.

Seo components for web pages are

1. Page Title (only the first 70 characters are displayed in search results!)
2. Page Description (at least first 156 characters are displayed in search results!)
3. Page Keywords
4. Page headers (H1)
5. Links to other pages
6. Strong text (bold)
7. Phrases
8. ALT Text in images

Acronym for SEO Search Engine Optimization

What is Web Hosting?

Web hosting is an online service that enables you to publish your website or web
application on the Internet. When you sign up for a web hosting service, you basically
rent some space on a physical server where you can store all the files and data
necessary for your website to work properly.
Steps to Publishing your website

Once you have created the website, you need to publish it to computers that will be
available 24x7 for visitors to view. When you sign up with a hosting provider, generally,
you will be given multiple options to publish the content such as FTP, WebDAV,
FrontPage Server Extensions, etc.

To publish a website using FTP, do the following:

1) Open the website that you need to publish.

2) Select Site > Publishing Settings…. The Site Settings dialog box appears.

3) Prior to publishing, you need to add details such as the destination computer’s IP
addresses or domain name, settings and credentials. For example if you have signed
up with a web hosting provider who has given you an IP address 192.168.1.200 and
FTP as the method for publishing, do the following:

a) Click Add…. The Connection Settings dialog box is displayed.

b) Enter the following details:
(i) Type a name in the Name: textbox (usually your domain name or
destination computer name or IP address of the destination).
(ii) Select FTP from the Connection Type: dropdown menu.
(iii) Hosting providers will provide a path for publishing, for example:
ftp.domainame.ext. Type the path in Location: textbox.
(iv) Specify the folder where the content will be stored.
(v) Enter the username and password in Credentials: section. This will be
used when you publish from the HTML editor. Generally multiple files are
transferred simultaneously between HTML editor and destination resulting
in faster transfers. Leave this setting as it is or contact hosting provider for
this detail only if required.
(vi) Click Add.
c) Notice the change in the Publishing tab indicating the remote site
is added to the list.

4) Click OK.
5. Select Site > Publish All files to [NAME].
 Unit: 3 Web Scripting JavaScript
Q. 1 What is javaScript ?

Ans:

1. JavaScript is a cross-platform, object-oriented scripting language.

2. JavaScript is a small, lightweight language. It is not useful as a standalone language, but is
designed for easy embedding in other products and applications, such as web browsers.
3. Inside a host environment, JavaScript can be connected to the objects of its environment to
provide programmatic control over them.

Q.2 What is Difference between client side java script and server side java script?

Ans:

 Client-side JavaScript extends the core language by supplying objects to control a browser
(Navigator or another web browser) and its Document Object Model (DOM).
For example, client-side extensions allow an application to place elements on an HTML form and
respond to user events such as mouse clicks, form input, and page navigation.
 Server-side JavaScript extends the core language by supplying objects relevant to running
JavaScript on a server.
For example, server-side extensions allow an application to communicate with a relational
database, provide continuity of information from one invocation to another of the application,
or perform file manipulations on a server.

Q.3 Use of Java Script.

Ans:

1. Developing Multimedia Applications

The users can use JavaScript to add multimedia elements. With JavaScript you can show, hide,
change, resize images and create images rollovers. You can create scrolling text across the status
bar, thus making multimedia applications more interactive.
2. Create Pages Dynamically
Based on the user’s choice, the date or other external data, JavaScript can produce pages that
are customized to the user.
3. Interact with the User
JavaScript can do some processing of forms and can validate user input when the user submits
the form.
4. JavaScript Objects are Similar to Dictionaries

Visit us www.studykeeda.in 1
 In JavaScript, objects are just collections of name-value pairs. JavaScript objects are considered
as a dictionary with string keys. The users can get and set the properties of an object using
either the familiar "." (dot) operator, or the "[ ]" operator, which is typically used when dealing
with a dictionary.

Q.4 Explain the features of JavaScript?

Ans:

Browser Support

All browsers have accepted JavaScript as a scripting language and provide integrated support for it. For
example, to access flash content, you need to install flash plug-in in your browser. But to use JavaScript,
you don't have to use any plug-in at all.

JavaScript can be used on Client Side as well as on Server Side

JavaScript has access to Document Object Model DOM of browser. You can change the structure of web
pages at runtime. Thus, JavaScript can be used to add different effects to WebPages. On the other hand,
JavaScript could be used on the server side as well.

Functional Programming Language

In JavaScript, function could be assigned to variables just like any other data types. A function can accept
another function as a parameter and can also return a function. You can have functions with no name as
well. This provides you the ability to code in functional programming style.

Support for Objects

JavaScript is an object oriented language. However, the way JavaScript handles objects and inheritance
is bit different from conventional object oriented programming languages like C++/ Java.

Run-time Environment

JavaScript typically relies on a run-time environment (e.g. in a web browser) to provide objects and
methods by which scripts can interact with "the outside world".

Vendor-specific Extensions

JavaScript is officially managed by Mozilla Foundation, and new language features are added
periodically. However, only some JavaScript engines support these new features.

Object based Features Supported by JavaScript

Visit us www.studykeeda.in 2
 JavaScript supports various features related to object based language and JavaScript is sometimes
referred to as an object-based programming language

Object Type

JavaScript supports the development of object types and in this context JavaScript supports both
predefined and user-defined objects. It is possible to assign objects of any type to any variable. It is
possible to instantiate the defined object types to create object instances in JavaScript, which is a very
powerful feature of Object based language.

Q.5 What is script tag?

Ans:

The <script> tag alerts a browser that JavaScript code follows. It is typically embedded in the HTML.

<script language=”javaScript”>

Statements....

</script>

Q.6 What is the current version of javaScript?

Ans: JavaScript 1.5 is fully compatible with ECMA-262, Edition 3.

Q.7 How to Save and Run your Program in JavaScript?

Ans:

1. Open any editor like notepad and write the program

2. Save the program in a file with .html extension in a proper folder or subfolder on a drive.

3. Open the web browser like internet explorer or Mozilla Firefox

4. Open the file you created and save in step 2, to execute the program like to execute
C:/JAVA/firstprogram.html

Where C is the drive, JAVA is the folder name and firstprogram.html is the name of program which is
saved in the Java folder

Q.8 Explain Operators in javaScript?

Ans:

JavaScript operators can be used to perform various operations such as:

Visit us www.studykeeda.in 3
  Arithmetic Operators
 Comparison Operators
 Logical Operators
 Relational Operators
 Assignment Operators
 Conditional Operators

Arithmetic Operators
The arithmetic operators are used to perform common arithmetical operations, such as addition,
subtraction, multiplication etc. Here's a complete list of JavaScript's arithmetic operators:

Operator Description Example Result

+ Addition $x + $y Sum of $x and $y

- Subtraction $x - $y Difference of $x and $y.
* Multiplication $x * $y Product of $x and $y.
/ Division $x / $y Quotient of $x and $y
% Modulus $x % $y Remainder of $x divided by $y

JavaScript Code Example for Arithmetic Operators

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Arithmetic Operators</title>
</head>
<body>
<script>
var x = 10;
var y = 4;
document.write(x + y); // Prints: 14
document.write("<br>");

document.write(x - y); // Prints: 6

document.write("<br>");

document.write(x * y); // Prints: 40

document.write("<br>");

document.write(x / y); // Prints: 2.5

document.write("<br>");

document.write(x % y); // Prints: 2

Visit us www.studykeeda.in 4
 </script>
</body>
</html>

JavaScript Comparison/Relational Operators

The comparison operators are used to compare two values in a Boolean fashion.

Operator Name Example Result

== Equal x == y True if x is equal to y

=== Identical x === y True if x is equal to y, and they are of the same type
!= Not equal x != y True if x is not equal to y
!== Not identical x !== y True if x is not equal to y, or they are not of the same type
< Less than x < y True if x is less than y
> Greater than x > y True if x is greater than y
>= Greater than or equal to x >= y True if x is greater than or equal to y
<= Less than or equal to x <= y True if x is less than or equal to y

Code example of Comparison Operators

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Comparison Operators</title>
</head>
<body>
<script>
var x = 25;
var y = 35;
var z = "25";

document.write(x == z); // Prints: true

document.write("<br>");

document.write(x === z); // Prints: false

document.write("<br>");

document.write(x != y); // Prints: true

document.write("<br>");

document.write(x !== z); // Prints: true

document.write("<br>");

document.write(x < y); // Prints: true

document.write("<br>");

document.write(x > y); // Prints: false

document.write("<br>");

document.write(x <= y); // Prints: true

document.write("<br>");

document.write(x >= y); // Prints: false

</script>
</body>

Visit us www.studykeeda.in 5
</html>

JavaScript Logical Operators

The logical operators are typically used to combine conditional statements.

Operator Name Example Result

&& And x && y True if both x and y are true

|| Or x || y True if either x or y is true
! Not !x True if x is not true

Code example of Logical Operator

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Logical Operators</title>
</head>
<body>
<script>
var year = 2018;

// Leap years are divisible by 400 or by 4 but not 100

if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 == 0))){
document.write(year + " is a leap year.");
} else{
document.write(year + " is not a leap year.");
}
</script>
</body>
</html>

JavaScript Assignment Operators

The assignment operators are used to assign values to variables.

Operator Description Example Is The Same As

= Assign x = y x = y
+= Add and assign x += $ x = x + y
-= Subtract and assign x -= y x = x - y
*= Multiply and assign x *= y x = x * y
/= Divide and assign quotient x /= y x = x / y
%= Divide and assign modulus x %= y x = x % y

Visit us www.studykeeda.in 6
Code example of assignment operators
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Assignment Operators</title>
</head>
<body>
<script>
var x; // Declaring Variable

x = 10;
document.write(x + "<br>"); // Prints: 10

x = 20;
x += 30;
document.write(x + "<br>"); // Prints: 50

x = 50;
x -= 20;
document.write(x + "<br>"); // Prints: 30

x = 5;
x *= 25;
document.write(x + "<br>"); // Prints: 125

x = 50;
x /= 10;
document.write(x + "<br>"); // Prints: 5

x = 100;
x %= 15;
document.write(x); // Prints: 10
</script>
</body>
</html>

JavaScript Logical Operators

The logical operators are typically used to combine conditional statements.

Operator Name Example Result

&& And x && y True if both x and y are true

|| Or x || y True if either x or y is true
! Not !x True if x is not true

Code Example of logical operators:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Logical Operators</title>
</head>

Visit us www.studykeeda.in 7
<body>
<script>
var year = 2018;

// Leap years are divisible by 400 or by 4 but not 100

if((year % 400 == 0) || ((year % 100 != 0) && (year % 4 == 0))){
document.write(year + " is a leap year.");
} else{
document.write(year + " is not a leap year.");
}
</script>
</body>
</html>

Visit us www.studykeeda.in 8
Q.9 What is Data Types in javaScript?

Ans:

A data type is a classification of the type of data that a variable or object can hold. Data type is an
important factor in virtually all computer programming languages, including visual basic, C#, C/C++ and
JavaScript.

Q.10 Numbers in javaScript.

Ans:

We can convert a string to an integer using the built-in parseInt() function. This takes the base for the
conversion as an optional second argument, which you should always provide:

parseInt("123", 10)

123

parseInt("010", 10)

10

parseInt("010")

It happens because the parseInt() function decided to treat the string as octal due to the leading 0.

If you want to convert a binary number to an integer, just change the base:

parseInt("11", 2)

Q.11 Explain String in javaScript.

Ans: Strings in JavaScript are sequences of characters. More precisely, they're sequences of Unicode
characters, with each character represented by a 16-bit number. If we want to represent a single
character, we just need to use a string of length 1.

To find the length of a string, access its length property:

"hello".length

5 //length of given string “hello”

Visit us www.studykeeda.in 9
The strings are represented using objects and they have methods as well:

"hello, world".replace("hello", "goodbye") //by using replace() method

goodbye, world

"hello".toUpperCase() //by using toUpperCase() method

HELLO

Q.12 What is array in javaScript?

Ans: Arrays in JavaScript are actually a special type of object. They work similar to regular objects but
they have one magic property called 'length'. The length of the array (size of the array) is always one
more than the highest index in the array.

Code Example of JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Creating Arrays in JavaScript</title>
</head>
<body>
<script>
// Creating variables
var colors = ["Red", "Green", "Blue"];
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
var cities = ["London", "Paris", "New York"];
var person = ["John", "Wick", 32];

// Printing variable values

document.write(colors + "<br>");
document.write(fruits + "<br>");
document.write(cities + "<br>");
document.write(person);
</script>
</body>
</html>

Q.13 What is Function?

Ans: A function is a group of statements that perform specific tasks and can be kept and
maintained separately form main program. Functions provide a way to create reusable code

Visit us www.studykeeda.in 10
 packages which are more portable and easier to debug. Here are some advantages of using
functions:

 Functions reduces the repetition of code within a program — Function allows you to extract
commonly used block of code into a single component. Now you can perform the same task by
calling this function wherever you want within your script without having to copy and paste the same
block of code again and again.
 Functions makes the code much easier to maintain — Since a function created once can be used
many times, so any changes made inside a function automatically implemented at all the places
without touching the several files.
 Functions makes it easier to eliminate the errors — When the program is subdivided into
functions, if any error occur you know exactly what function causing the error and where to find it.
Therefore, fixing errors becomes much easier.

Code example of Function

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Define and Call a Function</title>
</head>
<body>
<script>
// Defining function
function sayHello() {
document.write("Hello, welcome to this website!");
}

// Calling function
sayHello(); // Prints: Hello, welcome to this website!
</script>
</body>
</html>

Some Important Programs

//Program to search for a text in a string and return the text if found using match()
<html>
<body>
<script>
var str="Honesty is the best policy";
document.write(str.match("policy")+"<br>");
document.write(str.match("Police")+"<br>");
document.write(str.match("pollicy")+"<br>");
document.write(str.match("policy")+"<br>");
</script>
</body>
</html>

Visit us www.studykeeda.in 11
Output
Policy
Null
Null
Policy
//Program to replace characters in a string using replace()

<html>
<body>
<p>click the button to replace the characters</p>
<p id="demo">hello prachi</p>
<button onclick="myFunction()">try it</button>
<script>
function myFunction()
{
var str=document.getElementById("demo").innerHTML;
var n=str.replace("hello","good morning");
document.getElementById("demo").innerHTML=n;
}
</script>
</body>
</html>

//Program to round off any number using round()

<html>
<body>
<p id="demo">click the button to round the no.to its nearest integer.</p>
<button onclick="myFunction()">try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML=Math.round(8.7896);
}
</script>
</body>
</html>

Visit us www.studykeeda.in 12
//Program to return a value random number between 0 and 1 using random()

<html>
<body>
<p id="demo">click the button to display a number</p>
<button onclick="myFunction()">try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML=Math.random();
}
</script>
</body>
</html>

//Program to return the number with highest value of two specified numbers using max()

<html>
<body>
<p id="demo">Click the button to return the highest no. between 5 and 10.</p>
<button onclick="myFunction()">try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML=Math.max(5,10);
}
</script>
</body>
</html>

//Program to return the number with the lowest value of two specified number using min().

<html>
<body>
<p id="demo">Click the button to return the lowest no. between 77 and 9.</p>
<button onclick="myFunction()">try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML=Math.min(77,9);
}
</script>
</body>
</html>

Visit us www.studykeeda.in 13
//Program to join two arrays using concat().

<html>
<body>
<p id="demo">Click the button to join three arrays</p>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction()
{
var fruits=["Apple","Orange"];
var vegetables=["Cucumber","Carrot","Raddish"];
var grains=["Wheat","Maize"];
var mix=fruits.concat(vegetables,grains);
var x=document.getElementById("demo");
x.innerHTML=mix;
}
</script>
</body>
</html>

//Program to reverse the order of the elements in the array.

<html>
<body>
<p id="demo">Click the button to reverse the order of the element in the array.</p>
<button onclick="myFunction()">Click me</button>
<script>
var alphabet=["z","k","j","h","e"];
function myFunction()
{
alphabet.reverse();
var x=document.getElementById("demo");
x.innerHTML=alphabet;
}
</script>
</body>
</html>

//Program to sort the array.

<html>
<body>
<p id="demo">Click the button to sort the array</p>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction()
{
var fruits=["Banana","Orange","Apple","Mango"];
fruits.sort();

Visit us www.studykeeda.in 14
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>

Q.15 What is events in javaScript explain it.

Ans: An event is something that happens when user interact with the web page, such as when he
clicked a link or button, entered text into an input box or textarea, made selection in a select box,
pressed key on the keyboard, moved the mouse pointer, submits a form, etc. In some cases, the
Browser itself can trigger the events, such as the page load and unload events.

Below are some of the most commonly used events:

 onLoad - occurs when a page loads in a browser
 onUnload - occurs just before the user exits a page
 onMouseOver - occurs when you point to an object
 onMouseOut - occurs when you point away from an object
 onSubmit - occurs when you submit a form
 onClick - occurs when an object is clicked
//Execution of javascript immediately after a page has been loaded.

Some important events program

//Execution of javascript immediately after a page has been loaded.

<html>
<head>
<script>
function myFunction()
{
confirm("Welcome to the loaded browser");
}
</script>
</head>
<body onload="myFunction()">
<h1>Event handling!</h1>
</body>
</html>

//Execute a javascript when a button is clicked.

<html>
<head>
<script>
function myFunction()
{

Visit us www.studykeeda.in 15
document.getElementById("demo").innerHTML="Hello World";
}
</script>
</head>
<body>
<p>Click the button</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>

Visit us www.studykeeda.in 16
 JAVASCRIPT Notes

JAVASCRIPT
JavaScript is the scripting language of the Web.

JavaScript is used in millions of Web pages to add functionality, validate forms, detect browsers, and
much more.

Introduction to JavaScript

JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create
cookies, and much more.

JavaScript is the most popular scripting language on the Internet, and works in all major browsers, such as
Internet Explorer, Mozilla Firefox, and Opera.

What is JavaScript?

 JavaScript was designed to add interactivity to HTML pages

 JavaScript is a scripting language
 A scripting language is a lightweight programming language
 JavaScript is usually embedded directly into HTML pages
 JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
 Everyone can use JavaScript without purchasing a license

Java and JavaScript are two completely different languages in both concept and design!

Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in
the same category as C and C++.

What can a JavaScript Do ?

 JavaScript gives HTML designers a programming tool - HTML authors are normally not
programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can
put small "snippets" of code into their HTML pages
 JavaScript can put dynamic text into an HTML page - A JavaScript statement like this:
document.write("<h1>" + name + "</h1>") can write a variable text into an HTML page
 JavaScript can react to events - A JavaScript can be set to execute when something happens,
like when a page has finished loading or when a user clicks on an HTML element
 JavaScript can read and write HTML elements - A JavaScript can read and change the content
of an HTML element
 JavaScript can be used to validate data - A JavaScript can be used to validate form data before
it is submitted to a server. This saves the server from extra processing
 JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the
visitor's browser, and - depending on the browser - load another page specifically designed for that
browser

By – Prof Harshal V Patil Page 1

 JAVASCRIPT Notes

 JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve
information on the visitor's computer.

JavaScript Variables
Variables are "containers" for storing information.

JavaScript variables are used to hold values or expressions.

A variable can have a short name, like x, or a more descriptive name, like carname.

Rules for JavaScript variable names:

 Variable names are case sensitive (y and Y are two different variables)
 Variable names must begin with a letter or the underscore character

Note: Because JavaScript is case-sensitive, variable names are case-sensitive.

Example

A variable's value can change during the execution of a script. You can refer to a variable by its name to
display or change its value.

<html>
<body>
<script type="text/javascript">
var firstname;
firstname="Welcome";
document.write(firstname);
document.write("<br />");
firstname="XYZ";
document.write(firstname);
</script>

<p>The script above declares a variable,

assigns a value to it, displays the value, change the value,
and displays the value again.</p>

</body>
</html>

Output :
Welcome
XYZ

The script above declares a variable, assigns a value to it, displays the value, change the value, and
displays the value again.
By – Prof Harshal V Patil Page 2
 JAVASCRIPT Notes

Declaring (Creating) JavaScript Variables

Creating variables in JavaScript is most often referred to as "declaring" variables.

You can declare JavaScript variables with the var statement:

var x;
var carname;

After the declaration shown above, the variables are empty (they have no values yet).

However, you can also assign values to the variables when you declare them:

var x=5;
var carname="Scorpio";

After the execution of the statements above, the variable x will hold the value 5, and carname will hold
the value Scorpio.

Note: When you assign a text value to a variable, use quotes around the value.

Assigning Values to Undeclared JavaScript Variables

If you assign values to variables that have not yet been declared, the variables will automatically be
declared.

These statements:

x=5;
carname="Scorpio";

have the same effect as:

var x=5;
var carname="Scorpio";

Redeclaring JavaScript Variables

If you redeclare a JavaScript variable, it will not lose its original value.

var x=5;
var x;

By – Prof Harshal V Patil Page 3

 JAVASCRIPT Notes

After the execution of the statements above, the variable x will still have the value of 5. The value of x is
not reset (or cleared) when you redeclare it.

By – Prof Harshal V Patil Page 4

 JAVASCRIPT Notes

DataTypes

 Numbers - are values that can be processed and calculated. You don't enclose them in quotation
marks. The numbers can be either positive or negative.
 Strings - are a series of letters and numbers enclosed in quotation marks. JavaScript uses the string
literally; it doesn't process it. You'll use strings for text you want displayed or values you want
passed along.
 Boolean (true/false) - lets you evaluate whether a condition meets or does not meet specified
criteria.
 Null - is an empty value. null is not the same as 0 -- 0 is a real, calculable number, whereas null is
the absence of any value.

Data Types

TYPE EXAMPLE
Numbers Any number, such as 17, 21, or 54e7
Strings "Greetings!" or "Fun"
Boolean Either true or false
Null A special keyword for exactly that – the null value (that is, nothing)

JavaScript Arithmetic

As with algebra, you can do arithmetic operations with JavaScript variables:

y=x-5;
z=y+5;

JavaScript Operators
The operator = is used to assign values.

The operator + is used to add values.

The assignment operator = is used to assign values to JavaScript variables.

The arithmetic operator + is used to add values together.

y=5;
z=2;
x=y+z;

By – Prof Harshal V Patil Page 5

 JAVASCRIPT Notes

The value of x, after the execution of the statements above is 7.

JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic between variables and/or values.

Given that y=5, the table below explains the arithmetic operators:

Operator Description Example Result

+ Addition x=y+2 x=7
- Subtraction x=y-2 x=3
* Multiplication x=y*2 x=10
/ Division x=y/2 x=2.5
% Modulus (division remainder) x=y%2 x=1
++ Increment x=++y x=6
-- Decrement x=--y x=4

JavaScript Assignment Operators

Assignment operators are used to assign values to JavaScript variables.

Given that x=10 and y=5, the table below explains the assignment operators:

Operator Example Same As Result

= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0

The + Operator Used on Strings

The + operator can also be used to add string variables or text values together.

To add two or more string variables together, use the + operator.

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

By – Prof Harshal V Patil Page 6

 JAVASCRIPT Notes

After the execution of the statements above, the variable txt3 contains "What a verynice day".

To add a space between the two strings, insert a space into one of the strings:

txt1="What a very ";

txt2="nice day";
txt3=txt1+txt2;

or insert a space into the expression:

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

After the execution of the statements above, the variable txt3 contains:

"What a very nice day"

Adding Strings and Numbers

Look at these examples:

x=5+5;
document.write(x);

x="5"+"5";
document.write(x);

x=5+"5";
document.write(x);

x="5"+5;
document.write(x);

The rule is:

If you add a number and a string, the result will be a string.

JavaScript Comparison and Logical Operators

Comparison and Logical operators are used to test for true or false.

By – Prof Harshal V Patil Page 7

 JAVASCRIPT Notes

Comparison Operators

Comparison operators are used in logical statements to determine equality or difference between variables
or values.

Given that x=5, the table below explains the comparison operators:

Operator Description Example

== is equal to x==8 is false
=== is exactly equal to (value and type) x===5 is true
x==="5" is false
!= is not equal x!=8 is true
> is greater than x>8 is false
< is less than x<8 is true
>= is greater than or equal to x>=8 is false
<= is less than or equal to x<=8 is true

How Can it be Used

Comparison operators can be used in conditional statements to compare values and take action depending
on the result:

if (age<18) document.write("Too young");

You will learn more about the use of conditional statements in the next chapter of this tutorial.

Logical Operators

Logical operators are used to determine the logic between variables or values.

Given that x=6 and y=3, the table below explains the logical operators:

Operator Description Example

&& and (x < 10 && y > 1) is true
|| or (x==5 || y==5) is false
! not !(x==y) is true

Conditional Operator

JavaScript also contains a conditional operator that assigns a value to a variable based on some condition.

By – Prof Harshal V Patil Page 8

 JAVASCRIPT Notes

Syntax
variablename=(condition)?value1:value2

Example
greeting=(visitor=="PRES")?"Dear President ":"Dear ";

If the variable visitor has the value of "PRES", then the variable greeting will be assigned the value
"Dear President " else it will be assigned "Dear".

Conditional Statements

Very often when you write code, you want to perform different actions for different decisions. You can
use conditional statements in your code to do this.

In JavaScript we have the following conditional statements:

 if statement - use this statement if you want to execute some code only if a specified condition is
true
 if...else statement - use this statement if you want to execute some code if the condition is true
and another code if the condition is false
 if...else if....else statement - use this statement if you want to select one of many blocks of code to
be executed
 switch statement - use this statement if you want to select one of many blocks of code to be
executed

If Statement

You should use the if statement if you want to execute some code only if a specified condition is true.

Syntax
if (condition)
{
code to be executed if condition is true
}

Note that if is written in lowercase letters. Using uppercase letters (IF) will generate a JavaScript error!

Example 1
<script type="text/javascript">
//Write a "Good morning" greeting if
//the time is less than 10
var d=new Date();
var time=d.getHours();

By – Prof Harshal V Patil Page 9

 JAVASCRIPT Notes

if (time<10)
{
document.write("<b>Good morning</b>");
}
</script>

Example 2
<script type="text/javascript">
//Write "Lunch-time!" if the time is 11
var d=new Date();
var time=d.getHours();

if (time==11)
{
document.write("<b>Lunch-time!</b>");
}
</script>

Note: When comparing variables you must always use two equals signs next to each other (==)!

Notice that there is no ..else.. in this syntax. You just tell the code to execute some code only if the
specified condition is true.

If...else Statement

If you want to execute some code if a condition is true and another code if the condition is not true, use
the if....else statement.

Syntax

if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}

Example
<script type="text/javascript">
//If the time is less than 10,
//you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.
var d = new Date();

By – Prof Harshal V Patil Page 10

 JAVASCRIPT Notes

var time = d.getHours();

if (time < 10)

{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>

If...else if...else Statement

You should use the if....else if...else statement if you want to select one of many sets of lines to execute.

Syntax
if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if condition1 and
condition2 are not true
}

Example
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>");
}
else if (time>10 && time<16)
{
document.write("<b>Good day</b>");
}
else

By – Prof Harshal V Patil Page 11

 JAVASCRIPT Notes

{
document.write("<b>Hello World!</b>");
}
</script>

The JavaScript Switch Statement

You should use the switch statement if you want to select one of many blocks of code to be executed.

Syntax
switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is
different from case 1 and 2
}

This is how it works: First we have a single expression n (most often a variable), that is evaluated once.
The value of the expression is then compared with the values for each case in the structure. If there is a
match, the block of code associated with that case is executed. Use break to prevent the code from
running into the next case automatically.

Example
<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.
var d=new Date();
theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Finally Friday");
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday");

By – Prof Harshal V Patil Page 12

 JAVASCRIPT Notes

break;
default:
document.write("I'm looking forward to this weekend!");
}
</script>

JavaScript Controlling(Looping) Statements

Loops in JavaScript are used to execute the same block of code a specified number of times or while
a specified condition is true.

JavaScript Loops

Very often when you write code, you want the same block of code to run over and over again in a row.
Instead of adding several almost equal lines in a script we can use loops to perform a task like this.

In JavaScript there are two different kind of loops:

 for - loops through a block of code a specified number of times

 while - loops through a block of code while a specified condition is true

The for Loop

The for loop is used when you know in advance how many times the script should run.

Syntax

for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}

Example

Explanation: The example below defines a loop that starts with i=0. The loop will continue to run as long
as i is less than, or equal to 10. i will increase by 1 each time the loop runs.

Note: The increment parameter could also be negative, and the <= could be any comparing statement.

<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{

By – Prof Harshal V Patil Page 13

 JAVASCRIPT Notes

document.write("The number is " + i);

document.write("<br />");
}
</script>
</body>
</html>

Result

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10

JavaScript While Loop

Loops in JavaScript are used to execute the same block of code a specified number of times or while
a specified condition is true.

The while loop

The while loop is used when you want the loop to execute and continue executing while the specified
condition is true.

while (var<=endvalue)
{
code to be executed
}

Note: The <= could be any comparing statement.

Example

Explanation: The example below defines a loop that starts with i=0. The loop will continue to run as long
as i is less than, or equal to 10. i will increase by 1 each time the loop runs.

<html>

By – Prof Harshal V Patil Page 14

 JAVASCRIPT Notes

<body>
<script type="text/javascript">
var i=0;
while (i<=10)
{
document.write("The number is " + i);
document.write("<br />");
i=i+1;
}
</script>
</body>
</html>

Result

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10

The do...while Loop

The do...while loop is a variant of the while loop. This loop will always execute a block of code ONCE,
and then it will repeat the loop as long as the specified condition is true. This loop will always be
executed at least once, even if the condition is false, because the code is executed before the condition is
tested.

do
{
code to be executed
}
while (var<=endvalue);

Example

<html>
<body>
<script type="text/javascript">

By – Prof Harshal V Patil Page 15

 JAVASCRIPT Notes

var i=0;
do
{
document.write("The number is " + i);
document.write("<br />");
i=i+1;
}
while (i<0);
</script>
</body>
</html>

Result

The number is 0

JavaScript Break and Continue

There are two special statements that can be used inside loops: break and continue.

JavaScript break and continue Statements

There are two special statements that can be used inside loops: break and continue.

Break

The break command will break the loop and continue executing the code that follows after the loop (if
any).

Example

<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
By – Prof Harshal V Patil Page 16
 JAVASCRIPT Notes

</html>

Result

The number is 0
The number is 1
The number is 2

Continue

The continue command will break the current loop and continue with the next value.

Example

<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

Result

The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10

By – Prof Harshal V Patil Page 17

 JAVASCRIPT Notes

JavaScript Functions

A function (also known as a method) is a self-contained piece of code that performs a particular
"function". You can recognise a function by its format - it's a piece of descriptive text, followed by open
and close brackets.A function is a reusable code-block that will be executed by an event, or when the
function is called.

To keep the browser from executing a script when the page loads, you can put your script into a function.

A function contains code that will be executed by an event or by a call to that function.

You may call a function from anywhere within the page (or even from other pages if the function is
embedded in an external .js file).

Functions can be defined both in the <head> and in the <body> section of a document. However, to
assure that the function is read/loaded by the browser before it is called, it could be wise to put it in the
<head> section.

Example
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!"
onclick="displaymessage()" >
</form>
</body>
</html>

If the line: alert("Hello world!!") in the example above had not been put within a function, it would have
been executed as soon as the line was loaded. Now, the script is not executed before the user hits the
button. We have added an onClick event to the button that will execute the function displaymessage()
when the button is clicked.

By – Prof Harshal V Patil Page 18

 JAVASCRIPT Notes

You will learn more about JavaScript events in the JS Events chapter.

How to Define a Function

The syntax for creating a function is:

function functionname(var1,var2,...,varX)
{
some code
}

var1, var2, etc are variables or values passed into the function. The { and the } defines the start and end of
the function.

Note: A function with no parameters must include the parentheses () after the function name:

function functionname()
{
some code
}

Note: Do not forget about the importance of capitals in JavaScript! The word function must be written in
lowercase letters, otherwise a JavaScript error occurs! Also note that you must call a function with the
exact same capitals as in the function name.

The return Statement

The return statement is used to specify the value that is returned from the function.

So, functions that are going to return a value must use the return statement.

Example

The function below should return the product of two numbers (a and b):

function prod(a,b)
{
x=a*b;
return x;
}

When you call the function above, you must pass along two parameters:

product=prod(2,3);

By – Prof Harshal V Patil Page 19

 JAVASCRIPT Notes

The returned value from the prod() function is 6, and it will be stored in the variable called product.

The Lifetime of JavaScript Variables

When you declare a variable within a function, the variable can only be accessed within that function.
When you exit the function, the variable is destroyed. These variables are called local variables. You can
have local variables with the same name in different functions, because each is recognized only by the
function in which it is declared.

If you declare a variable outside a function, all the functions on your page can access it. The lifetime of
these variables starts when they are declared, and ends when the page is closed.

What is an Event?

Event Handlers

Event Handlers are JavaScript methods, i.e. functions of objects, that allow us as JavaScript
programmers to control what happens when events occur.

Directly or indirectly, an Event is always the result of something a user does. For example, we've already
seen Event Handlers like onClick and onMouseOver that respond to mouse actions. Another type of
Event, an internal change-of-state to the page (completion of loading or leaving the page). An onLoad
Event can be considered an indirect result of a user action.

Although we often refer to Events and Event Handlers interchangeably, it's important to keep in mind the
distinction between them. An Event is merely something that happens - something that it is initiated by
an Event Handler (onClick, onMouseOver, etc...).

The elements on a page which can trigger events are known as "targets" or "target elements," and we can
easily understand how a button which triggers a Click event is a target element for this event. Typically,
events are defined through the use of Event Handlers, which are bits of script that tell the browser what to
do when a particular event occurs at a particular target. These Event Handlers are commonly written as
attributes of the target element's HTML tag.

The Event Handler for a Click event at a form field button element is quite simple to understand:

<INPUT TYPE="button" NAME="click1" VALUE="Click me for fun!"

onClick="event_handler_code">

The event_handler_code portion of this example is any valid JavaScript and it will be executed when the
specified event is triggered at this target element. This particular topic will be continued in Incorporating
JavaScripts into your HTML pages.

There are "three different ways" that Event Handlers can be used to trigger Events or Functions.

Method 1 (Link Events):

By – Prof Harshal V Patil Page 20

 JAVASCRIPT Notes

Places an Event Handler as an attribute within an <A HREF= > tag, like this:

<A HREF="foo.html" onMouseOver="doSomething()"> ... </A>

You can use an Event Handler located within an <A HREF= > tag to make either an image or a text link
respond to a mouseover Event. Just enclose the image or text string between the <A HREF= > and the
</A> tags.

Whenever a user clicks on a link, or moves her cursor over one, JavaScript is sent a Link Event. One
Link Event is called onClick, and it gets sent whenever someone clicks on a link. Another link event is
called onMouseOver. This one gets sent when someone moves the cursor over the link.

You can use these events to affect what the user sees on a page. Here's an example of how to use link
events. Try it out, View Source, and we'll go over it.

<A HREF="javascript:void('')"
onClick="open('index.htm', 'links', 'height=200,width=200');">How to Use Link Events
</A>

The first interesting thing is that there are no <SCRIPT> tags. That's because anything that appears in the
quotes of an onClick or an onMouseOver is automatically interpreted as JavaScript. In fact, because
semicolons mark the end of statements allowing you to write entire JavaScripts in one line, you can fit an
entire JavaScript program between the quotes of an onClick. It'd be ugly, but you could do it.

Here are the three lines of interest:

1. <A HREF="#" onClick="alert('Ooo, do it again!');">Click on me!</A>

2. <A HREF="javascript:void('')" onClick="alert('Ooo, do it again!');">
Click on me!
</A>
3. <A HREF="javascript:alert('Ooo, do it again!')" >Click on me!</A>

In the first example we have a normal <A> tag, but it has the magic onClick="" element, which says,
"When someone clicks on this link, run the little bit of JavaScript between my quotes." Notice, there's
even a terminating semicolon at the end of the alert. Question: is this required? NO.

Let's go over each line:

1. HREF="#" tells the browser to look for the anchor #, but there is no anchor "#", so the browser
reloads the page and goes to top of the page since it couldn't find the anchor.
2. <A HREF="javascript:void('')" tells the browser not to go anywhere - it "deadens" the link when
you click on it. HREF="javascript: is the way to call a function when a link (hyperlink or an
HREFed image) is clicked.
3. HREF="javascript:alert('Ooo, do it again!')" here we kill two birds with one stone. The default
behavior of a hyperlink is to click on it. By clicking on the link we call the window Method alert()
and also at the same time "deaden" the link.

By – Prof Harshal V Patil Page 21

 JAVASCRIPT Notes

The next line is

<A HREF="javascript:void('')" onMouseOver="alert('Hee hee!');">

Mouse over me!
</A>

This is just like the first line, but it uses an onMouseOver instead of an onClick.

Method 2 (Actions within FORMs):

The second technique we've seen for triggering a Function in response to a mouse action is to place an
onClick Event Handler inside a button type form element, like this:

<FORM>
<INPUT TYPE="button" onClick="doSomething()">
</FORM>

While any JavaScript statement, methods, or functions can appear inside the quotation marks of an Event
Handler, typically, the JavaScript script that makes up the Event Handler is actually a call to a function
defined in the header of the document or a single JavaScript command. Essentially, though, anything that
appears inside a command block (inside curly braces {}) can appear between the quotation marks.

For instance, if you have a form with a text field and want to call the function checkField() whenever the
value of the text field changes, you can define your text field as follows:

<INPUT TYPE="text" onChange="checkField(this)">

Nonetheless, the entire code for the function could appear in quotation marks rather than a function call:

<INPUT TYPE="text" onChange="if (this.value <= 5) {

alert("Please enter a number greater than 5");
}">

To separate multiple commands in an Event Handler, use semicolons

<INPUT TYPE="text" onChange="alert(‘Thanks for the entry.’);

confirm(‘Do you want to continue?’);">

The advantage of using functions as Event Handlers, however, is that you can use the same Event Handler
code for multiple items in your document and, functions make your code easier to read and understand.

Method 3 (BODY onLoad & onUnLoad):

The third technique is to us an Event Handler to ensure that all required objects are defined involve the
onLoad and onUnLoad. These Event Handlers are defined in the <BODY> or <FRAMESET> tag of an
HTML file and are invoked when the document or frameset are fully loaded or unloaded. If you set a flag

By – Prof Harshal V Patil Page 22

 JAVASCRIPT Notes

within the onLoad Event Handler, other Event Handlers can test this flags to see if they can safely run,
with the knowledge that the document is fully loaded and all objects are defined. For example:

<SCRIPT>

var loaded = false;

function doit() {
// alert("Everything is \"loaded\" and loaded = " + loaded);
alert('Everything is "loaded" and loaded = ' + loaded);
}

</SCRIPT>

<BODY onLoad="loaded = true;">

-- OR --
<BODY onLoad="window.loaded = true;">

<FORM>
<INPUT TYPE="button" VALUE="Press Me"
onClick="if (loaded == true) doit();">
-- OR --
<INPUT TYPE="button" VALUE="Press Me"
onClick="if (window.loaded == true) doit();">
-- OR --
<INPUT TYPE="button" VALUE="Press Me"
onClick="if (loaded) doit();">
</FORM>

</BODY>

The onLoad Event Handler is executed when the document or frameset is fully loaded, which means that
all images have been downloaded and displayed, all subframes have loaded, any Java Applets and Plugins
(Navigator) have started running, and so on. The onUnLoad Event Handler is executed just before the
page is unloaded, which occurs when the browser is about to move on to a new page. Be aware that when
you are working with multiple frames, there is no guarantee of the order in which the onLoad Event
Handler is invoked for the various frames, except that the Event Handlers for the parent frame is invoked
after the Event Handlers of all its children frames -- This will be discussed in detail in Week 8.

Setting the bgColor Property

The first example allows the user to change the color by clicking buttons, while the second example
allows you to change colors by using drop down boxes.

Event Handlers

By – Prof Harshal V Patil Page 23

 JAVASCRIPT Notes

EVENT DESCRIPTION
onAbort the user cancels loading of an image
input focus is removed from a form element (when the user clicks outside the field) or
onBlur
focus is removed from a window
onClick the user clicks on a link or form element
onChange the value of a form field is changed by the user
onError an error happens during loading of a document or image
onFocus input focus is given to a form element or a window
onLoad once a page is loaded, NOT while loading
onMouseOut the user moves the pointer off of a link or clickable area of an image map
onMouseOver the user moves the pointer over a hypertext link
onReset the user clears a form using the Reset button
onSelect the user selects a form element’s field
onSubmit a form is submitted (ie, when the users clicks on a submit button)
onUnload the user leaves a page

Note: Input focus refers to the act of clicking on or in a form element or field. This can be done by
clicking in a text field or by tabbing between text fields.

Which Event Handlers Can Be Used

OBJECT EVENT HANDLERS AVAILABLE

Button element onClick, onMouseOver
Checkbox onClick
Clickable ImageMap area onClick, onMouseOver, onMouseOut
Document onLoad, onUnload, onError
Form onSubmit, onReset
Framesets onBlur, onFocus
Hypertext link onClick, onMouseOver, onMouseOut
Image onLoad, onError, onAbort

By – Prof Harshal V Patil Page 24

 JAVASCRIPT Notes

Radio button onClick

Reset button onClick
Selection list onBlur, onChange, onFocus
Submit button onClick
TextArea element onBlur, onChange, onFocus, onSelect
Text element onBlur, onChange, onFocus, onSelect
Window onLoad, onUnload, onBlur, onFocus

JavaScript Arrays

An array object is used to create a database-like structure within a script. Grouping data points
(array elements) together makes it easier to access and use the data in a script. There are methods
of accessing actual databases (which are beyond the scope of this series) but here we're talking
about small amounts of data.

An array can be viewed like a

column of data in a spreadsheet. The
name of the array would be the same
as the name of the column. Each
piece of data (element) in the array
is referred to by a number (index),
just like a row number in a column.

An array is an object. Earlier, I said

that an object is a thing, a collection
of properties (array elements, in this
case) grouped together.

You can name an array using the

same format as a variable, a function or an object. Remember our basic rules: The first
character cannot be a number, you cannot use a reserved word, and you cannot use spaces.
Also, be sure to remember that the name of the array object is capitalized, e.g. Array.

The JavaScript interpreter uses numbers to access the collection of elements (i.e. the data) in
an array. Each index number (as it is the number of the data in the array's index) refers to a
specific piece of data in the array, similar to an ID number. It's important to remember that
the index numbering of the data starts at "0." So, if you have 8 elements, the first element
will be numbered "0" and the last one will be "7."

Elements can be of any type: character string, integer, Boolean, or even another array. An
array can even have different types of elements within the same array. Each element in the

By – Prof Harshal V Patil Page 25

 JAVASCRIPT Notes

array is accessed by placing its index number in brackets, i.e. myCar[4]. This would mean
that we are looking for data located in the array myCar which has an index of "4." Since the
numbering of an index starts at "0," this would actually be the fifth index. For instance, in the
following array,

var myCar = new Array("Chev","Ford","Buick","Lincoln","Truck");

alert(myCar[4])

the data point with an index of "4" would be Truck. In this example, the indexes are
numbered as follows: 0=Chev, 1=Ford, 2=Buick, 3=Lincoln, and 4=Truck. When creating
loops, it's much easier to refer to a number than to the actual data itself.

The Size of the Array

The size of an array is determined by either the actual number of elements it contains or by
actually specifying a given size. You don't need to specify the size of the array. Sometimes,
though, you may want to pre-set the size, e.g.:

var myCar = new Array(20);

That would pre-size the array with 20 elements. You might pre-size the array in order to set
aside the space in memory.

Multidimensional Arrays

This type of an array is similar to parallel arrays. In a multidimensional array, instead of

creating two or more arrays in tandem as we did with the parallel array, we create an array
with several levels or "dimensions." Remember our example of a spreadsheet with rows and
columns? This time, however, we have a couple more columns.

Multidimensional arrays can be created in different ways. Let's look at one of these method.
First, we create the main array, which is similar to what we did with previous arrays.
var emailList = new Array();

Next, we create arrays for elements of the main array:

By – Prof Harshal V Patil Page 26
 JAVASCRIPT Notes

emailList[0] = new Array("President", "Paul Smith", "[email protected]");

emailList[1] = new Array("Vice President", "Laura Stevens", "[email protected]");
emailList[2] = new Array("General Manager", "Mary Larsen", "[email protected]");
emailList[3] = new Array("Sales Manager", "Bob Lark", "[email protected]");

In this script we created "sub arrays" or arrays from another level or "dimension." We used
the name of the main array and gave it an index number (e.g., emailList[0]). Then we created
a new instance of an array and gave it a value with three elements.

In order to access a single element, we need to use a double reference. For example, to get
the e-mail address for the Vice President in our example above, access the third element "[2]"
of the second element "[1]" of the array named emailList.

It would be written like this:

var vpEmail = emailList[1][2]

alert("The address is: "+ vpEmail)
1. We declared a variable, named it emailList, and initialized it with a
value of a new instance of an array.
2. Next, we created an array for each of the elements within the original
array. Each of the new arrays contained three elements.
3. Then we declared a variable named vpEmail and initialized it with the
value of the third element ([email protected]) of the second
element "[1]" of the array named emailList.

You could also retrieve the information using something like:

var title = emailList[1][0]

var email = emailList[1][2]
alert("The e-mail address for the " + title +" is: " + email)

By – Prof Harshal V Patil Page 27

 JAVASCRIPT Notes

Array Properties
length

The length property returns the number of elements in an array. The format is
arrayName.length. The length property is particularly useful when using a loop to cycle
through an array. One example would be an array used to cycle banners:

var bannerImg = new Array();

bannerImg[0]="image-1.gif";
bannerImg[1]="image-2.gif";
bannerImg[2]="image-3.gif";

var newBanner = 0
var totalBan = bannerImg.length

function cycleBan() {
newBanner++
if (newBanner == totalBan) {
newBanner = 0
}
document.banner.src=bannerImg[newBanner]
setTimeout("cycleBan()", 3*1000)
}
window.onload=cycleBan;

This portion is then placed in the body where the banner is to be displayed:

&lt;img src="image-1.gif" name="banner">

Let's take a look and see what happened here:

By – Prof Harshal V Patil Page 28

 JAVASCRIPT Notes

1. On the first line, we created a new instance of the array bannerImg, and gave it three data
elements. (Remember, we are only making a copy of the Array object here.)
2. Next, we created two variables: newBanner, which has a beginning value of zero; and
totalBan, which returns the length of the array (the total number of elements contained in the
array).
3. Then we created a function named cycleBan. This function will be used to create a loop to
cycle the images.
a. We set the newBanner variable to be increased each time the function cycles.
(Review: By placing the increment operator [" ++ "] after the variable [the
"operand"], the variable is incremented only after it returns its current value to the
script. For example, its beginning value is "0", so in the first cycle it will return a
value of "0" to the script and then its value will be increased by "1".)
b. When the value of the newBanner variable is equal to the variable totalBan (which is
the length of the array), it is then reset to "0". This allows the images to start the
cycle again, from the beginning.
c. The next statement uses the Document Object Method (DOM - we'll be taking a look
at that soon) to display the images on the Web page. Remember, we use the dot
operator to access the properties of an object. We also read the statement backwards,
i.e., "take the element from the array bannerImg, that is specified by the current
value of the variable newBanner, and place it in the src attribute located in the
element with the name attribute of banner, which is located in the document object."
d. We then used the setTimeout function to tell the script how long to display each
image. This is always measured in milliseconds so, in this case, the function
cycleBan is called every 3,000 milliseconds (i.e., every 3 seconds).
4. Finally, we used the window.onload statement to execute the function cycleBan as soon as
the document is loaded.

There are a total of five properties for the Array object. In addition to the length property
listed above, the others are:

1. constructor: Specifies the function that creates an object's prototype.

2. index: Only applies to JavaScript arrays created by a regular expression
match.
3. input: Only applies to JavaScript arrays created by a regular expression
match.
4. prototype: Used to add properties or methods.

By – Prof Harshal V Patil Page 29

 JAVASCRIPT Notes

The other properties listed here are either more advanced or seldom used. For now, we'll
stick to the basics.

Javascript Object Hierarchy

Hierarchy Objects
Object Properties Methods Event Handlers
Window defaultStatus alert onLoad
frames blur onUnload
opener close onBlur
parent confirm onFocus
scroll focus
self open
status prompt
top clearTimeout
window setTimeout
History length back none
forward
go
Navigator appCodeName javaEnabled none
appName
appVersion
mimeTypes
plugins
userAgent
document alinkColor clear none (the onLoad and onUnload event handlers
anchors close belong to the Window object.
applets open
area write
bgColor writeln
cookie
fgColor
forms
images
lastModified
linkColor
links
location
referrer
title

By – Prof Harshal V Patil Page 30

 JAVASCRIPT Notes

vlinkColor
image border none none
complete
height
hspace
lowsrc
name
src
vspace
width
form action submit onSubmit
elements reset onReset
encoding
FileUpload
method
name
target
text defaultValue focus onBlur
name blur onCharge
type select onFocus
value onSelect

Built-in Objects
Array length join none
reverse
sort xx
Date none getDate none
getDay
getHours
getMinutes
getMonth
getSeconds
getTime
getTimeZoneoffset
getYear
parse
prototype
setDate
setHours
setMinutes
setMonth
setSeconds
setTime

By – Prof Harshal V Patil Page 31

 JAVASCRIPT Notes

setYear
toGMTString
toLocaleString
UTC
String length anchor Window
prototype big
blink
bold
charAt
fixed
fontColor
fontSize
indexOf
italics
lastIndexOf
link
small
split
strike
sub
substring
sup
toLowerCase
toUpperCase

JavaScript Array Object

The Array object is used to store multiple values in a single variable.

Create an Array

The following code creates an Array object called myCars:

var myCars=new Array();

There are two ways of adding values to an array (you can add as many values as you need to define as
many variables you require).

1:

var myCars=new Array();

myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

By – Prof Harshal V Patil Page 32

 JAVASCRIPT Notes

You could also pass an integer argument to control the array's size:

var myCars=new Array(3);

myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";

2:

var myCars=new Array("Saab","Volvo","BMW");

Note: If you specify numbers or true/false values inside the array then the type of variables will be
numeric or Boolean instead of string.

Access an Array

You can refer to a particular element in an array by referring to the name of the array and the index
number. The index number starts at 0.

The following code line:

document.write(myCars[0]);

will result in the following output:

Saab

Modify Values in an Array

To modify a value in an existing array, just add a new value to the array with a specified index number:

myCars[0]="Opel";

Now, the following code line:

document.write(myCars[0]);

will result in the following output:

Opel

JavaScript Date Object

By – Prof Harshal V Patil Page 33

 JAVASCRIPT Notes

Create a Date Object

The Date object is used to work with dates and times.

The following code create a Date object called myDate:

var myDate=new Date()

Note: The Date object will automatically hold the current date and time as its initial value!

Set Dates

We can easily manipulate the date by using the methods available for the Date object.

In the example below we set a Date object to a specific date (14th January 2010):

var myDate=new Date();

myDate.setFullYear(2010,0,14);

And in the following example we set a Date object to be 5 days into the future:

var myDate=new Date();

myDate.setDate(myDate.getDate()+5);

Note: If adding five days to a date shifts the month or year, the changes are handled automatically by the
Date object itself!

Compare Two Dates

The Date object is also used to compare two dates.

The following example compares today's date with the 14th January 2010:

var myDate=new Date();

myDate.setFullYear(2010,0,14);
var today = new Date();
if (myDate>today)
{
alert("Today is before 14th January 2010");
}
else
{
alert("Today is after 14th January 2010");
}

JavaScript Math Object

By – Prof Harshal V Patil Page 34
 JAVASCRIPT Notes

Math Object

The Math object allows you to perform mathematical tasks.

The Math object includes several mathematical constants and methods.

Syntax for using properties/methods of Math:

var pi_value=Math.PI;
var sqrt_value=Math.sqrt(16);

Note: Math is not a constructor. All properties and methods of Math can be called by using Math as an
object without creating it.

Mathematical Constants

JavaScript provides eight mathematical constants that can be accessed from the Math object. These are: E,
PI, square root of 2, square root of 1/2, natural log of 2, natural log of 10, base-2 log of E, and base-10 log
of E.

You may reference these constants from your JavaScript like this:

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

Mathematical Methods

In addition to the mathematical constants that can be accessed from the Math object there are also several
methods available.

The following example uses the round() method of the Math object to round a number to the nearest
integer:

document.write(Math.round(4.7));

The code above will result in the following output:

By – Prof Harshal V Patil Page 35

 JAVASCRIPT Notes

The following example uses the random() method of the Math object to return a random number between
0 and 1:

document.write(Math.random());

The code above can result in the following output:

0.4218824567728053

The following example uses the floor() and random() methods of the Math object to return a random
number between 0 and 10:

document.write(Math.floor(Math.random()*11));

The code above can result in the following output:

JavaScript String Object

String object

The String object is used to manipulate a stored piece of text.

Examples of use:

The following example uses the length property of the String object to find the length of a string:

var txt="Hello world!";

document.write(txt.length);

The code above will result in the following output:

12

The following example uses the toUpperCase() method of the String object to convert a string to
uppercase letters:

var txt="Hello world!";

document.write(txt.toUpperCase());

The code above will result in the following output:

HELLO WORLD!

By – Prof Harshal V Patil Page 36

 JAVASCRIPT Notes

Window Object

The Window object is the top level object in the JavaScript hierarchy.

The Window object represents a browser window.

A Window object is created automatically with every instance of a <body> or <frameset> tag.

IE: Internet Explorer, F: Firefox, O: Opera.

Window Object Collections

Collection Description IE F O
frames[] Returns all named frames in the window 4 1 9

Window Object Properties

Property Description IE F O
closed Returns whether or not a window has been closed 4 1 9
defaultStatus Sets or returns the default text in the statusbar of the window 4 No 9
document See Document object 4 1 9
history See History object 4 1 9
length Sets or returns the number of frames in the window 4 1 9
location See Location object 4 1 9
name Sets or returns the name of the window 4 1 9
opener Returns a reference to the window that created the window 4 1 9
outerHeight Sets or returns the outer height of a window No 1 No
outerWidth Sets or returns the outer width of a window No 1 No
pageXOffset Sets or returns the X position of the current page in relation to the No No No
upper left corner of a window's display area
pageYOffset Sets or returns the Y position of the current page in relation to the No No No
upper left corner of a window's display area
parent Returns the parent window 4 1 9
personalbar Sets whether or not the browser's personal bar (or directories bar)
should be visible
scrollbars Sets whether or not the scrollbars should be visible
self Returns a reference to the current window 4 1 9
status Sets the text in the statusbar of a window 4 No 9
statusbar Sets whether or not the browser's statusbar should be visible
toolbar Sets whether or not the browser's tool bar is visible or not (can only
be set before the window is opened and you must have
UniversalBrowserWrite privilege)
top Returns the topmost ancestor window 4 1 9

By – Prof Harshal V Patil Page 37

 JAVASCRIPT Notes

Window Object Methods

Method Description IE F O
alert() Displays an alert box with a message and an OK button 4 1 9
blur() Removes focus from the current window 4 1 9
clearInterval() Cancels a timeout set with setInterval() 4 1 9
clearTimeout() Cancels a timeout set with setTimeout() 4 1 9
close() Closes the current window 4 1 9
confirm() Displays a dialog box with a message and an OK and a Cancel 4 1 9
button
createPopup() Creates a pop-up window 4 No No
focus() Sets focus to the current window 4 1 9
moveBy() Moves a window relative to its current position 4 1 9
moveTo() Moves a window to the specified position 4 1 9
open() Opens a new browser window 4 1 9
print() Prints the contents of the current window 5 1 9
prompt() Displays a dialog box that prompts the user for input 4 1 9
resizeBy() Resizes a window by the specified pixels 4 1 9
resizeTo() Resizes a window to the specified width and height 4 1.5 9
scrollBy() Scrolls the content by the specified number of pixels 4 1 9
scrollTo() Scrolls the content to the specified coordinates 4 1 9
setInterval() Evaluates an expression at specified intervals 4 1 9
setTimeout() Evaluates an expression after a specified number of milliseconds 4 1 9

Document Object

The Document object represents the entire HTML document and can be used to access all elements in a
page.

The Document object is part of the Window object and is accessed through the window.document
property.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Document Object Collections

Collection Description IE F O W3C
anchors[] Returns a reference to all Anchor objects in the 4 1 9 Yes
document
forms[] Returns a reference to all Form objects in the 4 1 9 Yes
document
images[] Returns a reference to all Image objects in the 4 1 9 Yes
document
links[] Returns a reference to all Area and Link objects in 4 1 9 Yes

By – Prof Harshal V Patil Page 38

 JAVASCRIPT Notes

the document

Document Object Properties

Property Description IE F O W3C
body Gives direct access to the <body> element
cookie Sets or returns all cookies associated with the 4 1 9 Yes
current document
domain Returns the domain name for the current document 4 1 9 Yes
lastModified Returns the date and time a document was last 4 1 No No
modified
referrer Returns the URL of the document that loaded the 4 1 9 Yes
current document
title Returns the title of the current document 4 1 9 Yes
URL Returns the URL of the current document 4 1 9 Yes

Document Object Methods

Method Description IE F O W3C
close() Closes an output stream opened with the 4 1 9 Yes
document.open() method, and displays the
collected data
getElementById() Returns a reference to the first object with the 5 1 9 Yes
specified id
getElementsByName() Returns a collection of objects with the specified 5 1 9 Yes
name
getElementsByTagName() Returns a collection of objects with the specified 5 1 9 Yes
tagname
open() Opens a stream to collect the output from any 4 1 9 Yes
document.write() or document.writeln() methods
write() Writes HTML expressions or JavaScript code to a 4 1 9 Yes
document
writeln() Identical to the write() method, with the addition 4 1 9 Yes
of writing a new line character after each
expression

History Object

The History object is actually a JavaScript object, not an HTML DOM object.

The History object is automatically created by the JavaScript runtime engine and consists of an array of
URLs. These URLs are the URLs the user has visited within a browser window.

The History object is part of the Window object and is accessed through the window.history property.

IE: Internet Explorer, F: Firefox, O: Opera.

By – Prof Harshal V Patil Page 39

 JAVASCRIPT Notes

History Object Properties

Property Description IE F O
length Returns the number of elements in the history list 4 1 9

History Object Methods

Method Description IE F O
back() Loads the previous URL in the history list 4 1 9
forward() Loads the next URL in the history list 4 1 9
go() Loads a specific page in the history list 4 1 9

Form Object

The Form object represents an HTML form.

For each instance of a <form> tag in an HTML document, a Form object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Form Object Collections

Collection Description IE F O W3C
elements[] Returns an array containing each element in the form 5 1 9 Yes

Form Object Properties

Property Description IE F O W3C
acceptCharset Sets or returns a list of possible character-sets for the form data No No No Yes
action Sets or returns the action attribute of a form 5 1 9 Yes
enctype Sets or returns the MIME type used to encode the content of a 6 1 9 Yes
form
id Sets or returns the id of a form 5 1 9 Yes
length Returns the number of elements in a form 5 1 9 Yes
method Sets or returns the HTTP method for sending data to the server 5 1 9 Yes
name Sets or returns the name of a form 5 1 9 Yes
target Sets or returns where to open the action-URL in a form 5 1 9 Yes

Standard Properties
Property Description IE F O W3C
className Sets or returns the class attribute of an element 5 1 9 Yes
dir Sets or returns the direction of text 5 1 9 Yes
lang Sets or returns the language code for an element 5 1 9 Yes
title Sets or returns an element's advisory title 5 1 9 Yes

By – Prof Harshal V Patil Page 40

 JAVASCRIPT Notes

Form Object Methods

Method Description IE F O W3C
reset() Resets the values of all elements in a form 5 1 9 Yes
submit() Submits a form 5 1 9 Yes

Image Object

The Image object represents an embedded image.

For each instance of an <img> tag in an HTML document, an Image object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Image Object Properties

Property Description IE F O W3C
align Sets or returns how to align an image according to the 5 1 9 Yes
surrounding text
alt Sets or returns an alternate text to be displayed, if a browser 5 1 9 Yes
cannot show an image
border Sets or returns the border around an image 4 1 9 Yes
complete Returns whether or not the browser has finished loading the 4 1 9 No
image
height Sets or returns the height of an image 4 1 9 Yes
hspace Sets or returns the white space on the left and right side of the 4 1 9 Yes
image
id Sets or returns the id of the image 4 1 9 Yes
isMap Returns whether or not an image is a server-side image map 5 1 9 Yes
longDesc Sets or returns a URL to a document containing a description 6 1 9 Yes
of the image
lowsrc Sets or returns a URL to a low-resolution version of an image 4 1 9 No
name Sets or returns the name of an image 4 1 9 Yes
src Sets or returns the URL of an image 4 1 9 Yes
useMap Sets or returns the value of the usemap attribute of an client- 5 1 9 Yes
side image map
vspace Sets or returns the white space on the top and bottom of the 4 1 9 Yes
image
width Sets or returns the width of an image 4 1 9 Yes

Standard Properties
Property Description IE F O W3C
className Sets or returns the class attribute of an element 5 1 9 Yes
title Sets or returns an element's advisory title 5 1 9 Yes

By – Prof Harshal V Patil Page 41

 JAVASCRIPT Notes

Area Object

The Area object represents an area of an image-map (An image-map is an image with clickable regions).

For each instance of an <area> tag in an HTML document, an Area object is created.

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).

Area Object Properties

Property Description IE F O W3C
accessKey Sets or returns the keyboard key to access an area 5 1 No Yes
alt Sets or returns an alternate text to be displayed, if a browser 5 1 9 Yes
cannot show an area
coords Sets or returns the coordinates of a clickable area in an image- 5 1 9 Yes
map
hash Sets or returns the anchor part of the URL in an area 4 1 No No
host Sets or returns the hostname and port of the URL in an area 4 1 No No
href Sets or returns the URL of a link in an image-map 4 1 9 Yes
id Sets or returns the id of an area 4 1 9 Yes
noHref Sets or returns whether an area should be active or inactive 5 1 9 Yes
pathname Sets or returns the pathname of the URL in an area 4 1 9 No
protocol Sets or returns the protocol of the URL in an area 4 1 9 No
search Sets or returns the query string part of the URL in an area 4 1 9 No
shape Sets or returns the shape of an area in an image-map 5 1 9 Yes
tabIndex Sets or returns the tab order for an area 5 1 9 Yes
target Sets or returns where to open the link-URL in an area 4 1 9 Yes

Standard Properties
Property Description IE F O W3C
className Sets or returns the class attribute of an element 5 1 9 Yes
dir Sets or returns the direction of text 5 1 9 Yes
lang Sets or returns the language code for an element 5 1 9 Yes
title Sets or returns an element's advisory title 5 1 9 Yes

Navigator Object

The Navigator object is actually a JavaScript object, not an HTML DOM object.

The Navigator object is automatically created by the JavaScript runtime engine and contains information
about the client browser.

IE: Internet Explorer, F: Firefox, O: Opera.

By – Prof Harshal V Patil Page 42

 JAVASCRIPT Notes

Navigator Object Collections

Collection Description IE F O
plugins[] Returns a reference to all embedded objects in the document 4 1 9

Navigator Object Properties

Property Description IE F O
appCodeName Returns the code name of the browser 4 1 9
appMinorVersion Returns the minor version of the browser 4 No No
appName Returns the name of the browser 4 1 9
appVersion Returns the platform and version of the browser 4 1 9
browserLanguage Returns the current browser language 4 No 9
cookieEnabled Returns a Boolean value that specifies whether cookies are 4 1 9
enabled in the browser
cpuClass Returns the CPU class of the browser's system 4 No No
onLine Returns a Boolean value that specifies whether the system is in 4 No No
offline mode
platform Returns the operating system platform 4 1 9
systemLanguage Returns the default language used by the OS 4 No No
userAgent Returns the value of the user-agent header sent by the client to 4 1 9
the server
userLanguage Returns the OS' natural language setting 4 No 9

Navigator Object Methods

Method Description IE F O
javaEnabled() Specifies whether or not the browser has Java enabled 4 1 9
taintEnabled() Specifies whether or not the browser has data tainting enabled 4 1 9

ZIP CODE VALIDATION

<!-- TWO STEPS TO INSTALL ZIP CODE VALIDATION:

1. Copy the coding into the HEAD of your HTML document

2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Original: Brian Swalwell -->

By – Prof Harshal V Patil Page 43

 JAVASCRIPT Notes

<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin

function validateZIP(field) {

var valid = "0123456789-";

var hyphencount = 0;

if (field.length!=5 && field.length!=10) {

alert("Please enter your 5 digit or 5 digit+4 zip code.");

return false;

for (var i=0; i < field.length; i++) {

temp = "" + field.substring(i, i+1);

if (temp == "-") hyphencount++;

if (valid.indexOf(temp) == "-1") {

alert("Invalid characters in your zip code. Please try again.");

return false;

if ((hyphencount > 1) || ((field.length==10) && ""+field.charAt(5)!="-")) {

alert("The hyphen character should be used with a properly formatted 5 digit+four zip code, like '12345-
6789'. Please try again.");

return false;

return true;

By – Prof Harshal V Patil Page 44

 JAVASCRIPT Notes

// End -->

</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<center>

<form name=zip onSubmit="return validateZIP(this.zip.value)">

Zip: <input type=text size=30 name=zip>

<input type=submit value="Submit">

</form>

</center>

<p><center>

<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

</center><p>

By – Prof Harshal V Patil Page 45

 Techshiva by Tanya Batra
23a/18b Tilak nagar new delhi

UNIT 1
Class 10 - Artificial Intelligence (417)

1. Which of the following is a type of verbal communication? [1]

a) Written b) Oral

c) Expressions d) Both Oral and Written

2. Which of the following may help in getting accuracy in written communication? [1]

a) Use of simple language b) Proofreading and editing

c) All of these d) Precision

A
3. Semantic markers are important cohesive devices that serve as “signposts” to connect ideas in any piece of [1]

IV
writing. The semantic markers used to indicate the development of ideas or to list the ideas are:
i. Primarily
SH
ii. Secondly
iii. Finally
iv. Consequently
CH

a) iii, ii, iv b) i, ii, iv

c) i, ii, iii d) i, iii, iv

4. Renu is very good in dance. Which of the following is her way of expressing her thought on the stage? [1]
TE

a) Body language b) All of these

c) Eye movement d) Facial expression

5. With which of the following words, the article an cannot be used? [1]

a) Hours b) MLA

c) European d) Egg
6. What is given in the descriptive feedback in the form of written comments or verbal conversations? [1]

a) General rules b) Specific information

c) Specific rules d) General guidance

7. The goal(s) of effective communication is/are: [1]

a) Creating understanding b) Sharing information

c) All of these d) Changing attitude

8. Communication is required: [1]

a) At all time b) Frequently

1/4
9958517220
 c) At no time d) Sometimes
9. How can the sender of communication improve its clarity? [1]
10. What do you understand by feedback? [1]
11. What are the factors that cause communication barriers? [1]
12. What are the three important points to be considered in communication? [1]
13. Mention the main purpose of specific feedback. [1]
14. What are the types of communication barrier? [1]
15. Why is feedback necessary in communication? [1]
16. What is a compound-complex sentence? [1]
17. Define a Sentence. [1]
18. What does effective communication reduce? [1]
19. What do you understand by the word communication? [2]
20. What are the main goals of effective communication? [2]
21. What are the techniques to hone active listening skills? [2]
22. Identify the conjunctions and prepositions from the list below and write these in the different boxes. [2]
Over, Because, Under, And, Since, In, At, Although, Or, Up, On, Beside

A
23. Give two examples of gestures. [2]
24.
25.
26.
IV
What do you understand by effective communication and barriers?
Which three parts of communication are considered important and why?
Define communication.
[2]
[2]
[2]
SH
27. What are the measures to overcome communication barriers? [2]
28. What are the factors responsible for causing barriers? [2]
29. Describe the term descriptive feedback. [4]
CH

30. In a communication cycle, explain the term medium. What problems may the medium create and how? [4]
31. What are the factors that causes barriers to communication? Explain any three. [4]
32. Which principle of effective communication is covered by the five-question method? List three aspects of this [4]
TE

principle that need to be covered by these questions.

33. Draw any five common signs used for Visual Communication. Explain what each conveys and where did you [4]
see it.
34. What are the various forms of communication? Describe them in one sentence each with examples. [4]
35. Explain five types of visual communication. [4]
36. Fill correct nouns and verbs from the given options to complete the sentence in given below: [4]
Nouns: Boy, Mr. S Sen, Rahim, Children, Cat, Students
Verbs: Swimming, Driving, Writing, Teaching, Eating, Playing
i. The ________ is ________.
ii. The ________ are ________.
iii. The ________ are ________.
iv. ________ is ________ the car.
v. ________ is ________.
vi. The ________ is ________.
37. What causes stress? [1]

a) All of these b) Family pressure

2/4
9958517220
 c) Deadlines d) Work load
38. Self-Reliance means ________. [1]
i. Ability to Work Independently.
ii. Take ownership of the task assigned and leave no stone unturned in accomplishing the task.
iii. Both ability to Work Independently and take ownership of the task assigned and leave no stone unturned in
accomplishing the task.
iv. None of these

a) Option (i) b) Option (iii)

c) Option (ii) d) Option (iv)

39. What makes you complete work or studies without others cheering you? [1]

a) Self-confidence b) Self-motivation

c) Self-esteem d) Communication
40. Which of the following is/are not the symptom(s) of stress? [1]

a) Nausea b) Heart burn

A
c) None of these d) Stomach ache
41. Which of the following helps to manage stress?
i. Recreational activities like watching movies etc.
IV [1]
SH
ii. Going On Vacations with Family and Friends
iii. Taking Nature Walks
iv. All of these
CH

a) Option (ii) b) Option (iii)

c) Option (iv) d) Option (i)

42. ________ is our ability to bounce back from stressful or negative experiences. [1]
TE

a) Resiliency b) Visualisations

c) Self-discovery d) Deep breathing

43. Which of the following statement exhibit an example of weaknesses? [1]

a) I have a fear of swimming in rivers. b) I do not like to lose in any game or sports.

c) I would like to speak English fluently. d) All of these

44. The ability to identify and name our emotions is called ________. [1]

a) All of these b) Harnessing Emotions

c) Emotional Awareness d) Managing Emotions

45. Which of the following statements related to self-regulation is correct? [1]

a) Self-regulation helps people to cope with b) Self-regulation helps people to behave in

Low income socially acceptable ways.

c) Self-regulation helps people to cope with d) Self-regulation makes people more

strong feelings. independent.

3/4
9958517220
46. How is yoga an effective tool for stress management? [1]

a) It encourages good mood b) it ensures proper function of body

c) It gives a healthy dose of self-compassion d) Both it encourages good mood and it gives a
healthy dose of self-compassion
47. What is the main purpose of self-motivation? [1]
48. What are the main stress management techniques? [1]
49. What are the types of stressors? [1]
50. What is extrinsic motivation? [1]
51. What are the causes that leads to stress? [1]
52. Mention two ways of scheduling an appointment. [1]
53. Why is stress management required? [1]
54. What part is played by enjoying a vacation in reducing stress? [1]
55. When is someone called a self-motivated person? [1]
56. What is the main advantage of setting realistic goals? [1]
57. Explain the steps to manage emotional intelligence. [2]

A
58. Define stress and stress management in your own words. [2]
59.
60.
61.
How can tracking your time help you?
Why is stress management needed?
IV
What are the various disease-causing factors caused by stress? [2]
[2]
[2]
SH
62. Explain the importance of Time Management. [2]
63. Define goal-setting and explain its importance. [2]
64. Explain the role of hormones in stress. [2]
CH

65. Why is self-regulation important in life? [4]

66. How stress can be caused by both good and bad experiences? [4]
67. What are the four kinds of self-awareness? [4]
68. How can we self-motivate ourselves for completing a task which appears to be too large or too complex to be [4]
TE

done by us?
69. What is fatigue-related stress? Why is it difficult to avoid? [4]

4/4
9958517220