avaScript 使 HTML 页面具有更强的动态和交互性。

在线实例

插入一段脚本

如何将脚本插入 HTML 文档。

使用 <noscript> 标签

如何应对不支持脚本或禁用脚本的浏览器。

HTML <script> 标签

<script> 标签用于定义客户端脚本，比如 JavaScript。

<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

下面的脚本会向浏览器输出"Hello World!"：

实例

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

Tip: 学习更多关于Javascript教程，请查看JavaScript 教程!

HTML<noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

实例

<script>document.write("Hello World!")</script><noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

JavaScript体验(来自本站javascript教程)

JavaScript实例代码:

JavaScript可以直接在HTML输出:

document.write("<p>这是一个段落。</p>");

JavaScript事件响应:

<buttontype="button"onclick="myFunction()">点我！</button>

JavaScript处理 HTML 样式:

document.getElementById("demo").style.color="#ff0000";

HTML 脚本标签

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

载脚本长期以来一直是互联网可用性的重要组成部分。一般都是在服务端来实现的居多，随着技术的发展，前后端分离技术的兴起，以前很多后端的事也更多让前端来实现，我开始寻找一种无需服务器就可以强制下载的方法，经过一番努力，终于我找到了它，就在Firefox Devols Debugger中，有兴趣的朋友可以自己去试一下！

废话不多说，直接上脚本。

1、javascript脚本

function downloadFile(data, fileName, type="text/plain") {
 // 创建不可见的元素
 const a = document.createElement("a");
 a.style.display = "none";
 document.body.appendChild(a);
 // 将href设置为要下载数据的blob表示形式
 a.href = window.URL.createObjectURL(
 new Blob([data], { type })
 );
 // 使用下载属性设置所需的文件名
 a.setAttribute("download", fileName);
 // 通过模拟点击触发下载
 a.click();
 // 清理
 window.URL.revokeObjectURL(a.href);
 document.body.removeChild(a);
}

2、html元素

<form onsubmit="onFormSubmit(); return false;">
		<p>
			<label for="demo_filename">文件名称：</label><br>
			<input type="text" id="demo_filename">
		</p>
		<p>
			<label for="demo_content">内容：</label><br>
			<textarea id="demo_content"></textarea>
		</p>
		<button type="submit">下载</button>
	</form>

3、运行效果

是不是很简单，这样做的函数非常小，并且依赖于URL.createObjectUrl，函数注入<a>元素，将其设置为Blob值设置为目标文件的文本内容，并单击下载按钮以触发下载。元素在过程中保持隐藏状态，并在click()调用，一旦函数被调用，浏览器的下载提示就会显示出来，createObjectURL和Blob这两种技术才是真正的魔力！