h28 HTML Javascript

A script is a small piece of program that can add interactivity to our websites. For example, a script could generate a pop-up alert box message, or provide a dropdown menu. This script could be written using JavaScript or VBScript. Nowadays, only JavaScript and associated frameworks are being used by most web developers, VBScript is not even supported by major browsers.

There are multiple ways of adding scripts to the HTML document. We can keep JavaScript code in a separate file and then include it wherever it's needed, or it is also possible to define functionality inside the HTML document itself. Let's see both cases one by one with suitable examples.

External JavaScript

If developers are going to define a functionality that will be used in various HTML documents, then it's better to keep that functionality in a separate JavaScript file and then include that file in the HTML documents.

A JavaScript file will have an extension as .js and it will be included in HTML files using the <script> tag.

Example

Consider we define a small function using JavaScript in script.js which has following code −

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

 

Now, let's make use of the above external JavaScript file in our following HTML document −

复制代码
<!DOCTYPE html>
<html>
<head>
   <title>JavaScript External Script</title>
   <script src="script.js" type="text/JavaScript" />
   </script>
</head>
<body>
   <input type="button" onclick="Hello();" name="ok" value="Click Me" />
</body>
</html>
复制代码

 

This will produce the following result, where you can try to click on the given button −

 

Internal Script

We can write the script code directly into our HTML document. Usually, we keep script code in the header of the document inside the <script> tag, however, there is no restriction. We are allowed to put the script code anywhere in the document but inside the <script> tag.

Example

复制代码
<!DOCTYPE html>
<html>
<head>
   <title>JavaScript Internal Script</title>
   <base href="http://www.tutorialspoint.com/" />
   <script type="text/JavaScript"> function Hello(){
      alert("Hello, World");
   }
   </script>
</head>
<body>
   <input type="button" onclick="Hello();" name="ok" value="Click Me" />
</body>
</html>
复制代码

 

This will produce the following result, where you can try to click on the given button −

Event Handlers

Event handlers are nothing but simply defined functions which can be called against any mouse or keyboard event. We can define any kind of business logic inside our event handler which can vary from a single to 1000s line of code.

Example

Following example explains how to write an event handler. We are going to write one simple function named EventHandler() in the header of the document. We will call this function when any user brings mouse over a paragraph.

复制代码
<!DOCTYPE html>
<html>
<head>
   <title>Event Handlers Example</title>
   <base href="http://www.tutorialspoint.com/" />
   <script type="text/JavaScript"> function EventHandler(){
      alert("I'm event handler!!");
   }
   </script>
</head>
<body>
   <p onmouseover="EventHandler();">Bring your mouse here to see an alert</p>
</body>
</html>
复制代码

 

After running the above HTML code, bring your mouse over the output screen to see the result.

 

Hide Scripts from Older Browsers

Although most browsers these days’ support JavaScript, but still some older browsers don't. If a browser doesn't support JavaScript, instead of running your script, it would display the code to the user. To prevent this, we can simply place HTML comments around the script as shown below.

JavaScript Example:
<script type="text/JavaScript">
   <!--
   document.write("Hello JavaScript!");
   //-->
</script>

The <noscript> Element

For users whose browsers do not support scripts, or for those who have disabled scripts in their browsers, we can embed scripts into the web page using the <noscript> tag as illustrated in the below example.

JavaScript Example:
<script type="text/JavaScript">
   <!--
   document.write("Hello JavaScript!");
   //-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>

 

Default Scripting Language

There may be a situation when we are required to include multiple script files and ultimately using multiple <script> tags. We can specify a default scripting language for all the script tags at once. This saves us from specifying the language every time we use a script tag within the page. Below is the example −

<meta http-equiv="Content-Script-Type" content="text/JavaScript" />

Note that you can still override the default by specifying a language within the script tag.

 

posted @   emanlee  阅读(3)  评论(0)  编辑  收藏  举报
相关博文：
·  HTML 01 - Introduction
·  h26 HTML Head Element
·  如何在HTML中使用JavaScript：从基础到高级的全面指南！
·  HTML 中的 JavaScript
·  2 JavaScript 用法
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
历史上的今天：
2014-05-18 Windows Myeclipse 10 安装 Perl 插件
2010-05-18 14个优化网站性能提高网站访问速度技巧
2009-05-18 如何查看sql server版本号
2009-05-18 BlogEngine.NET Extensions
2009-05-18 BlogEngine.NET Widgets
2008-05-18 C语言程序设计 练习题参考答案 第八章 文件（2）
2008-05-18 C语言程序设计 练习题参考答案 第八章 文件（1）
点击右上角即可分享
微信分享提示