JavaScript基础入门：常用对象与交互示例详解
本文系统整理了JavaScript学习过程中的七个核心实例，涵盖Navigator、Cookie、Screen等环境对象，Event事件处理，Array数组切片，以及Document对象的表单读取与验证。通过具体代码示例，帮助初学者理解JS基础对象的使用方法与交互逻辑。
JavaScript学习前言与分享初衷
前言：
自接触JavaScript以来，我一直未能完整研读一本JS教材；从今日起，我将重新梳理学习路径，整理并分享学习过程中编写的JS代码。
后续发布的代码并非全部原创，其中相当部分借鉴自互联网资源，同时也包含源自无忧脚本的内容。
恳请读者在论坛中不要严厉指责，毕竟“当面斥责有失体面”！在此发布纯粹是为了与那些曾与我一样，或正身处学习前沿的朋友共享。
同时，我也期待获得大家更多的支持。如果各位朋友有任何建议或意见，欢迎多跟帖交流，共同探讨！谢谢！
基础对象与交互示例
实例一、
本实例主要演示了navigator、cookie、screen、location对象，以及函数调用和prompt、alert、confirm交互功能的简单应用。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> 点击我 </BODY> </HTML>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
事件处理应用
实例二、
本实例主要演示了event对象和事件的简单应用。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>mouse</title> </head> <body onMouseMove="GetPosition();" > 鼠标在文本框中按下:<input type="text" name="textfield" onMouseDown="alert('鼠标在文本框中按下')"> 键盘按下:<input type="text" name="textfield" onKeyDown="alert('键盘按下');"> event对象: <input type="text" name="textfield" id="text" onClick="catchEvent();"> <input type="submit" name="Submit" value="提交" id="button" onClick="catchEvent();"> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
数组与构造方法示例
实例三、
本实例主要演示了数组及其slice()方法的使用。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> 数组和其slice()方法的使用 </BODY> </HTML>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
实例四、
本实例主要演示了对象和构造方法的使用。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <body> 构造方法的使用 </body> </HTML>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
Document对象与表单操作
实例五（4.1）、
本实例主要演示了Document对象的使用。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> <IMG SRC="C:/Documents and Settings/Administrator/桌面/13608.gif" WIDTH="170" HEIGHT="1" BORDER="0" ALT=""> </BODY> </HTML>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
实例六（4.2）、
本实例主要演示了Document对象读取表单元素的使用。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> </BODY> </HTML>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
实例七（4.3）、
本实例主要演示了Document对象读取表单元素的使用，包含一个注册验证代码。
<html> <head> <title>用户注册</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .STYLE1 {color: #FFFFFF} --> </style> </head> <body> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
23下一页阅读全文
JavaScript将图片转换为Base64编码的两种途径
2026-11-05 16:43:05
怎么在 Vue 或 React 项目中正确集成 animate.js
2026-11-05 10:23:38
JS注册事件：addEventListener基础语法与参数详解
2026-11-05 08:44:56
JSP和JS的区别：运行环境与服务端/客户端职责解析
2026-11-04 23:34:36
pdf.js 官方下载地址：GitHub Release 获取预编译包
2026-11-04 23:07:27