HTML JavaScript

by E-Computer Concepts December 27, 2019 at 5:44 pm

A Script means a small piece of program which can add more interactivity to your website. For example, a script is used to generate a pop-up message or an alert box message; it may also provide a dropdown menu on the web page.

This script is mostly written by using JavaScript or Visual Basic Script. We can write several small functions in the script, and these are called event handlers by using any of the scripting language in HTML and only then you can trigger those functions using HTML attributes.

JavaScript and frameworks associated with it are being used by most of the web developers; Visual Basic Script may not be supported by various major browsers.

We should keep our JavaScript code in a separate file and then we should include it wherever it’s needed, or we should define functionality inside it HTML document.

External JavaScript

If one is going to define a functionality which is mostly used in various HTML documents then it will be better to keep that functionality in a separate file of JavaScript and then we should include that file in our HTML document. JavaScript files always have extension as .js and it is mostly included in HTML files using a tag known as <script> tag.

An example of javasript in HTML is:

Consider of defining a small function using JavaScript in script.js which has code as shown −

function Hey() {
   alert("Hey, World");
}

Now we will make use of the above JavaScript file which is external in the following HTML document −

<html>
<head>
<title>Trying Java external Script</title>
<script src = "/html/script.js" type =
"text/javascript"/></script>
</head>
<body>
<input type = "button" onclick = "Hey();"
name = "ok" value = "Please Click Here" />
</body>
</html>

Here in the above example. A function is made first that is hey, and it is used in the HTML document by clicking on the button, function is called and it works.

Internal JavaScript

We can write our internal script code directly in Hyper Text Markup Language document. Usually we do keep script code in header of any of the document using a tag known as <script> tag, or in the other way there is no such restriction and one can put the source code anywhere in the document but we have to keep inside <script> tag.

We can try an example of the internal javasript as follows:

<html>
<head>
<title>Trying JavaScript Internal Script</title>      
<script type = "text/JavaScript">
{
function Hey() {alert("Hey, World");
         }
</script>
</head>
<body>
<input type = "button" onclick = "Hey();" name = "ok" value = "Please Click Here" />
</body>
</html>

This will produce the result, where one will get a button to clicked and functionality will be started. Script is always written inside the head part of the HTML. That is why this is always known as internal script. It will function same, as in external. When a user will click on the given button then the functionality will be started or we can say function will be called whuch is defined in the script.

Event Handlers in Scripting

Event handlers as the name indicates, handles various events. These are simply defined as functions which are generally called against any mouse action or keyboard event. One can define any business logic inside the event handler which can vary from a single to 1000s of line of code.

Following is the example which explains how to write any event handler. Let us write one simple function in header the header of the document by any name. We can call this function when any of the user brings mouse over a paragraph or press a key on the keyboard.

<html>
<head>
<title>Event Handlers Example</title>
<base href = "anysitename” />
<script type = "text/JavaScript">
 function TheEventHandler()
 {
 alert("I am an event handler, be alert!!");
         }
</script>
</head>
<body>
<p onmouseover = "TheEventHandler();">See an alert by bringing mouse here</p>
</body>
</html>

This will work when the mouse is brought on the text which is written “See an alert by bringing mouse here” the function named TheEventHandler start working.

Multimedia in HTML:

Multimedia consists of audio video files. Multimedia consists of audio video files. Multimedia system typically comes in many alternative formats. It will be virtually something you’ll be able to hear or see. Examples: pictures, music, sound, videos, records, films, animations, and more. web content typically contain multimedia system parts of various sorts and formats.

Multimedia Formats: multimedia system parts (like audio or video) ar hold on in media files. the foremost common thanks to discover the kind of a file, is to seem at the file extension.Multimedia files have formats and totally different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

  1. Mpeg: Stands for moving picture expert group. It is developed by moving picture expert group, generally used for video format. Also we have short forms like, mpeg and mpeg.
  2. Avi: This format stands for audio video interface. It is developed by Microsoft co-operations for video formats. This format goes best with most of the browsers.
  3. Wmv: It stands for Windows media video. This format is also launched by Microsoft co-operation. This is commonly used for videos This also goes very well with the browsers.
  4. Mov: This is quicktime format. It is developed by apple, for their computers or interfaces. Used for videos.
  5. Real video: .rm and .ram is used for real media. It is used for video. Mostly used when video has to be streamed online or on TV. But it is not very good format to work in the browsers.
  6. Flash: .swf is used for this format. And it is used to play the plugins in the browsers. It is developed by macromedia. Goes very good or we can see it is suitable for most of the browsers.
  7. WebM: This format of multimedia is developed by great web giants in the market of internet, such as, Opera, adobe, Google, Mozilla etc.

Attributes used while adding multimedia in HTML

src: This attribute is used to set the URL or path from where the video file will be fetched.

autoplay: This will specify that as soon as our web page gets ready, the video embedded in your page gets played at that moment.

controls: This attribute will tell the browser, what the media player controls or buttons (such as play and pause etc.) to be displayed on the page with the video.

width and height: These attributes are used for assigning the width and height of the media player in which the video will be shown.

muted: This attribute tells, whether the audio part of the given video should be kept in mute or in volume.

Browser Support

The first net browsers had support for text solely, restricted to one font in a very single color.

Later came browsers with support for colours and fonts, and images!

Audio, video, and animation are handled otherwise by the foremost browsers. completely different formats are supported, and a few formats need further helper programs (plug-ins) to work.

Hopefully this may become history. HTML5 multimedia system guarantees a better future for multimedia system.

Embedding videos in markup language primarily based document is additionally a vital half in net development.

Add Comment