对事件作出反应\
<!--
alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。
onclick 事件只是您即将在本教程中学到的众多事件之一。-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<center>
<body>
<h1>我的第一段 Java Script 代码</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击:
</p>
<button type="button" onclick="alert(‘Welcome!‘)">点击这里</button>
</body>
</center>
</html>
改变 HTML 内容\
<!--您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。
DOM(文档对象模型)是用以访问 HTML 元素的正式 W3C 标准。
-->
<!-- 在这个例子中应当注意
1.getElementById 千万不要写错
2.id号可以是不同的,根据自己的需要自己定义,调用的时候要一一对应
3.编码格式要注意,在head中添加utf-8
4.<button type="button" onclick="myFunction()">点击这里</button>这段代码不是在script标签中!!!
5.结合事件处理来修改自己的代码
-->
<!DOCTYPE html>
<html>
<head>
<title>Change html content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<center>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<p id="Angel">
U o _ o U
</p>
<script>
function myFunction()
{
x=document.getElementById("demo");//查找元素
x.innerHTML="Hello JavaScript!";//改变内容
}
function myFunction_1()
{
y=document.getElementById("Angel");
y.innerHTML="Today is a fun day!";
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
<button type="button" onclick="myFunction_1()">点击这里</button>
</body>
</center>
</html>
改变 HTML 样式\
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<center>
<p id="demo">
Happy Birthday To You !!!
</p>
<body>
<script>
function myfunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button typte="button" onclick="myfunction()">点击开始</button>
</body>
</center>
</html>
写入HTML输出
<!--只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。-->
<!DOCTYPE html>
<html>
<center>
<head>
<title></title>
</head>
<body>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
</body>
</center>
</html>