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

JavaScript & Dom 之 基本语法的更多相关文章

  1. Javascript DOM编程艺术 语法部分

    1.变量,可以变化的东西我们称为变量,随着年龄的增大,我们的age不断变大 2.Javascript变量声明用var,可以不声明变量类型.尽量声明为一个字符串字面量. 3.弱类型:要求程序员必须明确的 ...

  2. Javascript DOM 编程艺术（第二版）读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  3. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  4. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  5. javascript Dom 编程

     javascript Dom  编程 知识概要: (1)Dom是什么? (2)Dom结构模型 (3)XML DOM和 HTML DOM (4)NODE接口的特性和方法 (5)DOM结点的常用属性 ...

  6. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  7. JavaScript DOM 对象

    JavaScript DOM 对象   什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...

  8. 前端基础：JavaScript DOM对象

    JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...

  9. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

随机推荐

  1. Sublime Text 3 Build 3143 可用License

    —– BEGIN LICENSE —–TwitterInc200 User LicenseEA7E-8900071D77F72E 390CDD93 4DCBA022 FAF6079061AA12C0 ...

  2. Omi框架学习之旅 - 插件机制之omi-transform及原理说明

    给omi-transform插件做个笔记,使用起来也很爽. transform.js这个库,一直想写一篇帖子的,可是,数学不好,三维矩阵和二位矩阵理解的不好,所以迟迟没写了, 这也是一个神库,反正我很 ...

  3. Python基础语法复习

    1.数据类型 List 列表 函数 append(): 在列表末尾追加. count(): 计算对象在列表中出现的次数. extend():将列表内容添加到列表中. index(): 计算对象在列表中 ...

  4. 一篇自己都看不懂的CDQ分治&整体二分学习笔记

    作为一个永不咕咕咕的博主,我来更笔记辣qaq CDQ分治 CDQ分治的思想还是比较简单的.它的基本流程是: \(1.\)将所有修改操作和查询操作按照时间顺序并在一起,形成一段序列.显然,会影响查询操作 ...

  5. Luogu4609 FJOI2016 建筑师 第一类斯特林数

    题目传送门 题意:给出$N$个高度从$1$到$N$的建筑,问有多少种从左往右摆放这些建筑的方法,使得从左往右看能看到$A$个建筑,从右往左看能看到$B$个建筑.$N \leq 5 \times 10^ ...

  6. WPF 任务栏背景闪烁提醒

    原文:WPF 任务栏图标闪烁提醒   public static class FlashWindow { [DllImport("user32.dll")] [return: Ma ...

  7. Luogu P1265 公路修建

    一眼看去,就是一道MST的模板题. 然后果断准备跑Kruskal,然后5个TLE. Kruskal复杂度对于这个完全图要O(n^2*logn^2),快排就会导致超时. 然后打了刚学的Prim.朴素O( ...

  8. 扩展ASP.NET Identity使用Int做主键

    当我们默认新建一个ASP.NET MVC项目的时候,使用的身份认证系统是ASP.NET Identity.但是这里的Identity使用的主键为String类型的GUID.当然这是大多数系统首先类型. ...

  9. C#大型电商项目优化（三）——扩展性与支付

    上一篇文章引来不少非议,笔者并非对EF有看法,而是针对不同的业务场景和框架背景,挑选不同的方案.每个方案都有其优势劣势,挑选最快速,最简单的方案,是笔者的初衷. 看评论也是学习的过程,然而有些只做评价 ...

  10. linux journalctl 命令

    目录 Help 输出所有的日志记录 匹配(match) 把日志保存到文件中 限定日志所能占用的最高容量 查看某次启动后的日志 查看指定时间段的日志 同时应用 match 和时间过滤条件 按 unit ...