<!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. QT 布局管理器的使用

    很多的时候,需要布局管理器的使用, 在此介绍一下布局管理器的使用,直接上代码 #include "widget.h" #include "ui_widget.h" ...

  2. Oracle存储过程的调试

    在工作汇总有时候程序会调用存储过程来实现某些功能,因为这样的话,速度更快.所以学习如何调试存储过程就非常的重要. 首先,打开PLSQL DEVELOPMENT首先介绍一下,这个软件的各个窗口是用来干什 ...

  3. 数据库日志——mysql与Oracle的日志

    一.MySQL 在数据同步中用的比较多的是MySQL的binlog 1.bin-log简介 它记录了所有的DDL和DML(除了数据查询语句,select与show不记录)语句,以事件形式记录,还包含语 ...

  4. odoo订餐系统之类型设计

    这次开发的模块是订餐的类型设计,比如大荤 小荤 蔬菜 米饭 等基本数据.1.设计model类,很简单就一个字段: class MyLunchProductionCategory(osv.Model): ...

  5. 使用Pandas_UDF快速改造Pandas代码

    1. Pandas_UDF介绍 PySpark和Pandas之间改进性能和互操作性的其核心思想是将Apache Arrow作为序列化格式,以减少PySpark和Pandas之间的开销. Pandas_ ...

  6. 【福利】送Scala语言入门视频学习资料

    没有套路真的是送!! 想要学好大数据,scala语言是必不可少的,spark和kafka等大数据重要组件都是用scala写的,想要彻底搞懂这些组件是如何运作的必须得看源码,而学习scala是看源码的必 ...

  7. 小白学Docker之基础篇

    系列文章: 小白学Docker之基础篇 小白学Docker之Compose 小白学Docker之Swarm PS: 以下是个人作为新手小白学习docker的笔记总结 1. docker是什么 百科上的 ...

  8. Git学习笔记 第二章

    文件相关操作 修改readme.txt文件,执行 git status 命令查看当前仓库状态 git status 位于分支 master 尚未暂存以备提交的变更: (使用 "git add ...

  9. github实验三结对报告

    一．题目简介 本项目需要实现一个具有四则运算的计算器,能够实现基本的加.减.乘.除运算,以及其他的辅助功能(阶乘.正弦.余弦.指数运算):界面简洁实用,模拟Windows中的计算器程序,要提供主要的设 ...

  10. 作业1+2.四则运算(改进后完整版，用python写的)_064121陶源

    概述: 用一个星期加上五一的三天假期自学了python,在Mac系统上重新写出了四则运算的程序,编译器是PyCharm,相当于完成了作业2.d)"选一个你从来没有学过的编程语言,试一试实现基 ...