JavaScript简介
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
改变 HTML 图像
点亮灯泡实例
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/images/pic_bulboff.gif";
}
else
{
element.src="/images/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
浏览器显示效果就是点击灯泡的图片就会打开或者关闭灯,非常有趣。
JavaScript 函数
函数就是包裹在花括号中的代码块,前面使用了关键词 function:
当调用该函数时,会执行函数内的代码。
可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
以下是我课后的练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h>你喜欢小猫吗?</h>
<p id="demo">喵喵喵。</p>
<button type="button" onclick="myfunction()">喜欢(❤ ω ❤)</button>
<button type="button" onclick="alert('那你喜欢♥小狗吗')">不太喜欢</button>
<script>
function myfunction(){
document.getElementById("demo").innerHTML="养一只猫吧";
}
</script>
</body>
</html>
显示出来的效果是这样的:
点击喜欢(❤ ω ❤)按钮:“喵喵喵”会变化,如下:
点击不太喜欢,会出现一个窗口:
JavaScript HTML DOM
HTML DOM 模型被构造为对象的树:
通过 id 查找 HTML 元素
<p id="intro">我爱你</p>
<p>送你花花</p>
<script>
x=document.getElementById("intro");
document.write("<p>好巧,我也想说 " + x.innerHTML + "</p>");
</script>
浏览器显示如下:
通过类名找到 HTML 元素
<p class="intro">这瓶水给你吧</p>
<script>
x=document.getElementsByClassName("intro");
document.write("我不渴 " + x[0].innerHTML + "</p>");
</script>
浏览器显示如下:
改变 HTML 属性
document.getElementById(id).attribute=新属性值
示例:
document.getElementById("image").src="landscape.jpg";
本例改变了 <img>
元素的 src 属性.
JavaScript HTML DOM 事件
我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:
onclick=JavaScript