Head first javascript（一）

网页需要更好的交互体验，仅仅有html和css当然不够，因此javascript粉末登场

<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>