JS

最新推荐文章于 2025-01-04 00:00:00 发布

赵一凡

最新推荐文章于 2025-01-04 00:00:00 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zyfqqq/article/details/79882818

本文介绍JavaScript的基本输出方法，包括window.alert(), document.write(), innerHTML及console.log()等，并深入探讨HTML事件处理、变量提升、表单验证及DOM操作，还介绍了Arguments对象的应用。

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

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

JavaScript 可以做什么?

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
等等 ...

可以使用多种方法来执行 JavaScript 事件代码：

HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
你可以为 HTML 元素指定自己的事件处理程序
你可以阻止事件的发生。
等等 ...

JavaScript 变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

以下两个实例将获得相同的结果：

实例 1

  x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

尝试一下 »

实例 2

  var x; // 声明 x
x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x

尝试一下 »

要理解以上实例就需要理解 "hoisting(变量提升)"。

变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

JavaScript 初始化不会提升

JavaScript 只有声明的变量会提升，初始化的不会。

以下两个实例结果结果不相同：

实例 1

  var x = 5; // 初始化 x
var y = 7; // 初始化 y

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x + " " + y;           // 显示 x 和 y
 

尝试一下 »

实例 2

  var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x + " " + y;           // 显示 x 和 y

var y = 7; // 初始化 y

尝试一下 »

实例 2 的 y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。

HTML 表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：

实例

   <
   form
    
   action
   =
   "
   demo_form.php
   "
    
   method
   =
   "
   post
   "
   > <
   input
    
   type
   =
   "
   text
   "
    
   name
   =
   "
   fname
   "
    
   required
   =
   "
   required
   "
   > <
   input
    
   type
   =
   "
   submit
   "
    
   value
   =
   "
   提交
   "
   ></
   form
   >
  

尝试一下 »

Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。

Arguments 对象

JavaScript 函数有个内置的对象 arguments 对象。

argument 对象包含了函数调用的参数数组。

通过这种方式你可以很方便的找到最大的一个参数的值：

实例

   x
    = 
   findMax
   (
   1
   , 
   123
   , 
   500
   , 
   115
   , 
   44
   , 
   88
   )
   ; 
   function
    
   findMax
   (
   )
    
   {
    
   var
    
   i
   , 
   max
    = 
   arguments
   [
   0
   ]
   ; 
   if
   (
   arguments
   .
   length
    < 
   2
   )
    
   return
    
   max
   ; 
   for
    
   (
   i
    = 
   0
   ; 
   i
    < 
   arguments
   .
   length
   ; 
   i
   ++
   )
    
   {
    
   if
    
   (
   arguments
   [
   i
   ]
    > 
   max
   )
    
   {
    
   max
    = 
   arguments
   [
   i
   ]
   ; 
   }
    
   }
    
   return
    
   max
   ;
   }
  

尝试一下 »

或者创建一个函数用来统计所有数值的和：

实例

   x
    = 
   sumAll
   (
   1
   , 
   123
   , 
   500
   , 
   115
   , 
   44
   , 
   88
   )
   ; 
   function
    
   sumAll
   (
   )
    
   {
    
   var
    
   i
   , 
   sum
    = 
   0
   ; 
   for
    
   (
   i
    = 
   0
   ; 
   i
    < 
   arguments
   .
   length
   ; 
   i
   ++
   )
    
   {
    
   sum
    += 
   arguments
   [
   i
   ]
   ; 
   }
    
   return
    
   sum
   ;
   }
  

尝试一下 »

HTML DOM (文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

  document.getElementById(
  id).
  attribute=新属性值
 

本例改变了 <img> 元素的 src 属性：

实例

  <!DOCTYPE html>
  
<html>
  
<body>
  
<img id="image" src="smiley.gif">
  
<script>
  
document.getElementById("image").src="landscape.jpg";
  
</script>
  
</body>
  
</html>

尝试一下 »

实例讲解：

上面的 HTML 文档含有 id="image" 的 <img> 元素
我们使用 HTML DOM 来获得 id="image" 的元素
JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）

实例解析

这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：

  <div id="div1">
  
<p id="p1">这是一个段落。</p>
  
<p id="p2">这是另一个段落。</p>
  
</div>

找到 id="div1" 的元素：

  var parent=document.getElementById("div1");
 

找到 id="p1" 的 <p> 元素：

  var child=document.getElementById("p1");
 

从父元素中删除子元素：

  parent.removeChild(child);
 

	如果能够在不引用父元素的情况下删除某个元素，就太好了。不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

  var child=document.getElementById("p1");
  
child.parentNode.removeChild(child);