需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题基础代码。
2、在index.html中的<body>标签中，输入js代码：
function fun() {
alert('click success!');
}
3、浏览器运行index.html页面，此时点击按钮弹出了提示框。
方法步骤如下：
1、首先打开计算机，单击开始，然后在弹出的选项栏内找到“运行”选项并单击。
2、屏幕左下角出现“运行”对话框，输入“notepad”（不带引号），点“确定”。
3、弹出“记事本”窗口，复制下面的代码到记事本编辑框中：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset="GB2312" /><title>Untitled Document</title></head><body><p align="center">======请选择对话框类型======<br /><br />
按钮版：<br /><input type="button" onclick="xx()" value="消息框" /><input type="button" onclick="wt()" value="问题框" /><input type="button"
onclick="bj()" value="编辑框" /><br /><br />链接版：<br /><a href="javascript:xx();">消息框</a> <a href="javascript:wt();">问题框</a> <a href="javascript:bj();">编辑框</a><script language="javascript">function bj(){var name;name=prompt("请问您的名字或网名是什么？"
"请在此输入您的名字或网名");if(name==null) alert("无名氏，你好！");else{if(name=="请在此输入您的名字或网名") alert("无名氏，你好！");else{if(name=="") alert("无名氏，你好！");else{alert(name + "，你好！");}}}}</script><script
language="javascript">function wt(){var con;con=confirm("请选择一个按钮（确定或取消）：");if(con==true) alert("你选择了“确定”！");else alert("你选择了“取消”！");}</script><script language="javascript">function xx(){alert("这是一个消息框！");}</script></p></body></html>。
4、选择记事本工具栏上的“文件”->“保存”。
5、弹出“另存为”对话框，名称输入“JavaScriptDialog.htm”（不带引号），保存位置选择桌面，保存类型选择“所有文件”，其他设置不要动，点击“保存（S）”即可。
HTML代码本身是不提供点击事件等处理函数的，需要借助JavaScript来实现点击事件的处理等动态交互效果。
工具原料：编辑器、浏览器、jquery。
1、首先给一个元素绑定点击事件，点击事件的处理函数是弹出一个提示，这里使用简单的alert来做演示，代码如下：
<button id="btn">点击我</button><script type="text/javascript">
$(function(){
$('#btn').click(function(){
alert('你点击了我');
})
})
</script>
2、代码的运行的结果如下：
注意：以上代码需要引入jquery运行。