Javascript实例教程：从弹出窗口到折叠菜单

"这是一份JavaScript的实例教程，旨在通过实际操作帮助学习者掌握JavaScript的基础应用，包括创建弹出式窗口和构建折叠式导航菜单。教程以代码示例为主，易于理解和实践。" 在JavaScript实例教程中，首先介绍了如何创建弹出式窗口。弹出式窗口是JavaScript常用的功能之一，它可以在用户交互时打开一个新的浏览器窗口。在这个例子中，通过`window.open()`函数实现这一功能。`window.open()`接受三个参数：要打开的页面URL、新窗口的名称以及定义窗口特性的字符串。例如： ```javascript function CreateWindow() { msgWindow = window.open("pop_win.html", "displayWindow", "toolbar=no, width=350, height=400, directories=no, status=no, scrollbars=yes, resize=no, menubar=no"); } ``` 在这个函数中，`"pop_win.html"`是新窗口要加载的页面，`"displayWindow"`是窗口的名称，用于区分多个窗口，而后面的字符串定义了窗口的各种属性，如无工具栏(`toolbar=no`)、350x400的大小、无目录(`directories=no`)、无状态栏(`status=no`)、有滚动条(`scrollbars=yes`)、不可调整大小(`resize=no`)和无菜单栏(`menubar=no`)。调用这个函数可以通过HTML中的按钮，如： ```html <FORM> <INPUT TYPE="button" VALUE="创建窗口" onClick="CreateWindow()"> </FORM> ``` 接下来的教程内容是关于创建折叠式导航菜单。这种菜单可以优化网页空间，提供更整洁的用户体验。实现方法是通过监听选择列表(`SELECT`元素)的`onChange`事件，当用户选择一个选项时，调用一个处理函数来改变窗口的URL。以下是一个简单的例子： ```javascript <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function formHandler() { var URL = document.form.site.options[document.form.site.selectedIndex].value; window.location.href = URL; // End --> } </SCRIPT> ``` 然后在HTML中，我们创建一个名为`form`的表单，并包含一个下拉选择列表： ```html <CENTER> <FORM name="form"> <SELECT NAME="site" SIZE=1 onChange="formHandler()"> <OPTION VALUE="">连接到… <OPTION VALUE="http://www.example.com">示例网站 <!-- 更多选项... --> </SELECT> </FORM> </CENTER> ``` 在这个例子中，当用户选择一个选项，`formHandler`函数会被触发，获取所选选项的值（即链接地址），然后使用`window.location.href`改变当前窗口的URL，从而实现导航。 通过这些实例，初学者能够了解并实践JavaScript的基本语法和常见功能，从而更好地掌握JavaScript在网页交互中的应用。记住，实践是学习编程的关键，尝试将这些代码应用到自己的项目中，你会对JavaScript有更深的理解。