网页需要更好的交互体验,仅仅有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 onload="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" onclick="touchRock();" /> </div> </body>