<!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. 扫盲记-第六篇--Normalization

    深度学习模型中的Normalization 数据经过归一化和标准化后可以加快梯度下降的求解速度,这就是Batch Normalization等技术非常流行的原因,Batch Normalization ...

  2. 关于TerraBuilder的扩展开发

    熟悉Skyline的朋友,可能会发现,在最新的6.6的产品体系中,TerraBuilder中用于生成三维地形场景的模块,改成了TerrainBuilder. 通常情况下,这款软件模块,我们主要用它来进 ...

  3. .Net Framework 4.x 程序到底运行在哪个 CLR 版本之上

    转帖:https://blog.csdn.net/WPwalter/article/details/78067293 另参考:https://www.cnblogs.com/worksguo/arch ...

  4. linux 下隐藏进程的一种方法

    前言 本文所用到的工具在 https://github.com/gianlucaborello/libprocesshider 可以下载 思路就是利用 LD_PRELOAD 来实现系统函数的劫持 LD ...

  5. bootstrapTable使用场景及方式

    场景一:混合开发,适用jsp.php前端不足  纯html结构 <div> <table id="table" data-toggle="table&q ...

  6. QT 遇到的问题

    遇到的问题: 1:在QT中使用opengl,发现一个很神奇的问题,个人感觉是qt的bug. 问题详情:在我添加了一个成员变量之后,使用opengl编写的窗口没有任何输出了,只有一个背景. 但是删除那个 ...

  7. Thrift_简介(基于C#)

    //Server: TProtocolFactory ProtocolFactory = new TBinaryProtocol.Factory(true, true); TTransportFact ...

  8. xmlSpy套件（Altova MissionKit 2016）的Ollydbg调试过程及破解

    最近工作需要用到XML处理软件,网上找到Altova MissionKit 2016( 包含了XmlSpy.MapForce.StyleVision.UModel.DatabaseSpy等工具),用了 ...

  9. Centos 6.9下部署Oracle 11G数据库环境的操作记录

    操作系统:Centos6.9(64Bit)Oracle:11g .11.2.0.4.0版本Ip地址:172.16.220.139 废话不多说了,下面记录安装过程:1)安装桌面环境 [root@vm01 ...

  10. linux-流程控制语言

    if: for: 增强for循环 while: 统计这个目录下所有文件的大小 编写脚本 执行 help text: