网页需要更好的交互体验,仅仅有html和css当然不够,因此javascript粉末登场
<script>表示当前页面有javascript,一般放在<head>中
<html>
<head>
<title>...</title>
<script type = "text/javascript">
function ...
</script>
</head>
...
</html>
onload : 页面加载完成之后会出发onload event
alert() : 插入一些提示信息
example:
<body onload = "alert('Hello, world');">
在页面加载完成之后提示'Hello, world',可以发现调用函数的方式是触发时机onload加上函数alert
以下代码自己定义了一个函数touchRock(),onclick表示在鼠标点击图片的时候触发:
<head>
...
<script type="text/javascript">
function touchRock() {
var username = prompt("what is your name?", "enter your name here.")
if(username){
alert("it is good to meet your, " + username )
document.getElementById("rocking").src = "/home/jolin/Desktop/JS examples/chapter01/irock/rock_happy.png"
}
}
</script>
</head>
<body οnlοad="alert('hello, i am your pet rock.');">
<div style="margin-top: 100px; text-align: center">
<img id="rocking" alt="iRock"
src="/home/jolin/Desktop/JS examples/chapter01/irock/rock.png"
style="cursor: pointer"
οnclick="touchRock();" />
</div>
</body>