1 Javascript:交互式网络-CSDN博客

本文链接：https://blog.csdn.net/WeAreZero/article/details/50826981

本文深入探讨了如何使用JavaScript增强网页的交互性，通过实例展示了如何利用JavaScript与网络API进行通信，实现动态更新和用户反馈，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>虚拟宠物狗</title>
    <script type="text/javascript">
        //script一般放在head标签中；（当然也可以放在别的位置，但起码这是最好的习惯）
        //script标签表示接下来是脚本语言；
        //text/javascript指出使用的指令脚本为javascript；
        //接下来是javascript内容；
        //
        function touchDog() {
            var name = prompt('你叫什么名字？', '在此输入你的名字。');
            //prompt负责制作弹出窗口，并向用户询问名字，当用户点击确定后返回true(相当于对话框)
            if (name) {
                alert('见到你很开心' + name + "。");
                document.getElementById("rockImg").src = "smail.jpg";
            }
        }
        //
        //浏览器中有一种特殊的软件——javascript解析器；
        //所以javascript是解释语言，与编绎语言相对；

        //“事件”是种注记，表示我们可以用javascrip代码响应事件
        //“函数”是一段执行常见任务且可重复利用的javascript代码
    </script>
</head>
<body onload="alert('你好,我是你的宠物狗！')">
    <!--javascript代码也可以放在事件处理器中；事件以javascript响应网页里发生的动静；
onload事件在网页载入完毕后触发；alert()是内置函数，用于弹出框-->
    <div style="margin-top: 100px; text-align: center;">
        <img id="rockImg" src="8_150709170804_10.jpg" alt="IDog" style="cursor: pointer"
            onclick="touchDog()" /><!--cursor: pointer当鼠标移到图片上时呈手形-->
    </div>
</body>
</html>