轻松学习JavaScript四:JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用

我们开始解释JS在HTML中作用。对于因特网和视窗操作系统,JavaScript都意味着未来。

(1)JavaScript:写入HTML输出

实例代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS作用</title>
</head>

<body>
<p>
JavaScript 能够直接写入HTML输出流中:
</p>

<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>

<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
</body>
</html>

运行结果为:

提示:您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。

(2)JavaScript:对事件作出反应

实例代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS作用</title>
</head>

<body>
<h1>我的第一段 JavaScript</h1>

<p>
JavaScript 能够对事件作出反应。比如对按钮的点击:
</p>

<button type="button" onclick="alert('Welcome!')">点击这里</button>
</body>
</html>

点击按钮之后:

alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。onclick 事件只是您即将在本教程中学到的

众多事件之一。

(3)JavaScript:改变HTML内容

使用JavaScript来处理HTML内容是非常强大的功能。

实例代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS作用</title>
</head>

<body>
<h1>我的第一段 JavaScript</h1>

<p id="demo">
JavaScript能改变HTML元素的内容。
</p>

<script type="text/javascript">
function myFunction()
{
x=document.getElementById("demo");  // 找到元素
x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>

<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

点击之前:

点击之后:

您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。DOM(文档对象模

型)是用以访问HTML元素的正式 W3C 标准。

(4)JavaScript:改变HTML图像

本例会动态地改变HTML<image>的来源(src):

The Light bulb

点击灯泡就可以打开或关闭这盏灯

实例代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS作用</title>
</head>

<body>
<script type="text/javascript">
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
  {
  element.src="http://www.w3school.com.cn/i/eg_bulboff.gif";
  }
else
  {
  element.src="http://www.w3school.com.cn/i/eg_bulbon.gif";
  }
}
</script>

<img id="myimage" onclick="changeImage()" 

src="http://www.w3school.com.cn/i/eg_bulboff.gif">

<p>点击灯泡来点亮或熄灭这盏灯</p>
</body>
</html>

未点击之前:

点击之后:

再次点击之后:

JavaScript能够改变任意HTML元素的大多数属性,而不仅仅是图片。这是最炫酷的一个实例,也是经典的样

例!!

(5)JavaScript:改变HTML样式

改变HTML元素的样式,属于改变HTML属性的变种。

实例代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS作用</title>
</head>

<body>
<h1>我的第一段 JavaScript</h1>

<p id="demo">
JavaScript 能改变HTML元素的样式。
</p>

<script type="text/javascript">
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000";          // 改变样式
}
</script>

<button type="button" onclick="myFunction()">点击这里</button>

</body>
</html>

运行结果为:

点击按钮后:

(7)JavaScript:验证输入

JavaScript 常用于验证用户的输入。

实例代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS作用</title>
</head>

<body>
<h1>我的第一段 JavaScript</h1>

<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>

<input id="demo" type="text">

<script type="text/javascript">
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
	{
	alert("Not Numeric");
	}
}
</script>

<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

输入lian之后的结果为:

(7)操作HTML元素

如需从JavaScript访问某个HTML元素,您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素:

例子:通过指定的 id 来访问 HTML 元素,并改变其内容:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS作用</title>
</head>

<body>
<h1>My First Web Page</h1>

<p id="demo">My First Paragraph</p>

<script type="text/javascript">
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
</html>

运行的结果为:

JavaScript由web浏览器来执行。在这种情况下,浏览器将访问 id="demo" 的 HTML 元素,并把它的内容

(innerHTML)替换为 "My First JavaScript"。

(8)警告

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:

实例代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS作用</title>
</head>

<body>
<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button onclick="myFunction()">点击这里</button>

<script type="text/javascript">
function myFunction()
{
document.write("糟糕!文档消失了。");
}
</script>
</body>
</html>

点击按钮之后:

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-29 19:07:31

轻松学习JavaScript四:JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用的相关文章

轻松学习JavaScript十八:JavaScript之DOM简介

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,运行开发人员添加,移除和修改页面的某一部分.HTML或XML页面的每个部分都 是一个节点的衍生物.通过DOM,可访问HTML文档的所有元素.当网页被加载时,浏览器会创建页面的文档对象模 型,DOM模型被构造为对象的树. DOM是W3C(万维网联盟)的标准.DOM定义了访问HTML和XML文档的标准."W3C 文档对象模型(DOM)是中立

轻松学习JavaScript十八:DOM编程学习之DOM简单介绍

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分. HTML或XML页面的每一个部分都 是一个节点的衍生物. 通过DOM.可訪问HTML文档的全部元素. 当网页被载入时.浏览器会创建页面的文档对象模 型,DOM模型被构造为对象的树. DOM是W3C(万维网联盟)的标准.DOM定义了訪问HTML和XML文档的标准."W3C 文档对象模型(DOM)是

轻松学习JavaScript十一:JavaScript基本类型(包含类型转换)和引用类型

一值的类型 早在介绍JS的数据类型的时候就提到过基本类型和引用类型,不过在说两种类型之前,我们先来了解一下变量的 值的类型.在ECMAScript中,变量可以存在两种类型的值,即原始值和引用值. (1)原始值 存储在栈中的简单数据段,也就是说,它们的值直接存储在变量访问的位置. (2)引用值 存储在堆中的对象,也就是说,存储在变量处的值是一个指针,指向存储对象的内存处. 为变量赋值时,ECMAScript的解释程序必须判断该值是原始类型,还是引用类型.要实现这一点,解释程序则需 尝试判断该值是否

轻松学习JavaScript八:JavaScript函数

函数是一组可以随时随地运行的语句,函数作为ECMAScript的核心是很重要的.函数是由事件驱动的或者当它被 调用时执行的可重复使用的代码块.也就是函数是定义一次但却可以调用或执行任意多次的一段JavaScript代码.函 数有时会有参数,即函数被调用时指定了值的局部变量.函数常常使用这些参数来计算一个返回值,这个值也成为函 数调用表达式的值. 一函数声明 函数对于任何语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方,任何时候 调用执行.JS中的函数使用functio

轻松学习JavaScript十三:JavaScript基于面向对象之继承(包含面向对象继承机制)

一面相对象继承机制 今天算是什么都没干,尽在了解面向对象三大特性之一的继承了,过去的学习的C++和C#都是正统的面向对象语 言,学习的时候也没有怎么深入了解过,只是简单的学习最基础的继承.下午在看继承机制的时候,看到一个很经典 的继承机制实例.这个实例使用UML很好的解释了继承机制. 说明继承机制最简单的方式是,利用一个经典的例子就是几何形状.实际上,几何形状只有两种,即椭圆形(是圆 形的)和多边形(具有一定数量的边).圆是椭圆的一种,它只有一个焦点.三角形.矩形和五边形都是多边形的一种, 具有

轻松学习JavaScript二十四:DOM编程学习之操作CSS样式(一)

CSS样式作为HTML的辅助,可以增强页面的显示效果.前面学了DOM操作HTML,因此也要学DOM操作CSS 样式的方法.在学习CSS的时候,已经知道了CSS插入到HTML文档有三种情况,分别为:行内式,内嵌式和外联式 (这是我们最常用的).下面就来看怎么操作这三种情况: 一操作行内式 先来写一个HTML文档: <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

轻松学习JavaScript三:JavaScript与HTML的结合

HTML中的JavaScript脚本必须位于<script>与</script>标签之间,JavaScript脚本可被放置在HTML页面的 <body>标签和<head>标签中,这种视情况而定,一般放在<head>标签内. 一<script> 标签 如需在HTML页面中插入JavaScript脚本,请使用<script>标签.<script>和</script>会告诉JavaScript在何处开始

(转)轻松学习JavaScript三:JavaScript与HTML的结合

摘自:http://blog.csdn.net/erlian1992 HTML中的JavaScript脚本必须位于<script>与</script>标签之间,JavaScript脚本可被放置在HTML页面的 <body>标签和<head>标签中,这种视情况而定,一般放在<head>标签内. 一<script> 标签 如需在HTML页面中插入JavaScript脚本,请使用<script>标签.<script>

怎样轻松学习JavaScript

js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径.我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路".js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象.晦涩难懂,如:闭包.内置对象.DOM. B:本身内容很多,如函数库.对象库就一大堆. C:混合多种编程思想.它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAVA,PHP)不大一样