JavaScript & Dom 之 基本语法 

<!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="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属性读写的部分，现在浏览器应该都支持这种写法。

 

posted on 2018-09-05 16:20  Joyfulmath  阅读(288)  评论(0)  编辑  收藏  举报

导航