<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<link rel="stylesheet" href="style/layout.css" media="screen"/>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images/1.jpg" title="a fire work" onclick="showPic(this); return false;">fireworks</a>
</li>
<li>
<a href="images/2.jpg" title="a coffee" onclick="showPic(this); return false;">coffee</a>
</li>
<li>
<a href="images/3.jpg" title="a red ,red rose" onclick="showPic(this); return false;">Rose</a>
</li>
<li>
<a href="images/4.jpg" title="The famous clock" onclick="showPic(this); return false;">Big Ben</a>
</li>
</ul>
<img id="placeholder" src="data:images/5.jpg" alt="my image gallery"/>
<p id="description">Choose an image.</p>
<a href="http://www.baidu.com" class="warning" >A Test Code</a>
<p class="abc" >Be Careful</p>
<script type="text/javascript" src="scripts/showPic.js">
window.onload = ergodic();
</script>
</body>
</html>
1.js文件
js文件的语法是放在<body> or <head>里面。
1.1内部js
js写的就是函数,或者说,js里面存放的是执行的方法。
<script>
alert("My First JavaScript");
</script>
如上就是最简单的js语句。
既然<script>的存放的是逻辑处理,我们是不是可以把它独立出来呢,是的,外部js。
1.2外部js
<script type="text/javascript" src="scripts/showPic.js">
</script>
把js的内容独立方法一个文件里面,这个html页面里面只有view的内容,如果再把颜色配置等放在单独的文件里面,这样不就是MVP吗,或者更彻底一点。
2.css
如同上面的说法,如果把颜色等配置,通过独立的文件处理,这样html里面只有最基本的布局文件。
<link rel="stylesheet" href="style/layout.css" media="screen"/>
body{
font-family: "Helvetica", "Arial", serif;
color:#333;
background-color: #ccc;
margin: 1em 10%;
}
h1{
color: #333;
background-color: transparent;
}
可以通过标签匹配,也可以通过class,或者id匹配。
html,js,css,这样就形成了最基本的html文件的展示。
3.Dom
如果匹配html里面的元素呢,这个可以使用Dom语法。
var body_element = document.getElementsByTagName("body")[0];
console.log(body_element.childNodes.length);
alert(body_element.childNodes.length);
这段代码就是dom属性读写的部分,现在浏览器应该都支持这种写法。