w3c之js学习总结

①JavaScript：改变 HTML 内容

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

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

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

②JavaScript：改变 HTML 图像
<script>
function changeImage(){
qian=document.getElementById('myimage')
if (qian.src.match("bulbon")){
qian.src="/i/eg_bulboff.gif";
}
else{
qian.src="/i/eg_bulbon.gif";
}
}
</script>

<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">

<p>点击灯泡来点亮或熄灭这盏灯</p>
③JavaScript：改变 HTML 样式

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

<script>
function myFunction(){
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

④JavaScript：验证输入 输入的内容若不是数字，就会弹出提醒
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction(){
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("Not Numeric");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>

⑤请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：

覆盖 效果：点击按钮后之前在的文本全消失了，只剩下“糟糕！文档消失了。”

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

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

<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>
⑥折行
document.write("Hello
World!");
⑦变量的声明 一条语句，多个变量

您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var name="Gates", age=56, job="CEO";

声明也可横跨多行：
var name="Gates",
age=56,
job="CEO";