<!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. JAVA 第九周学习总结

    20175308 2018-2019-2 <Java程序设计>第九周学习总结 教材学习内容总结 准备工作 下载MYSQL数据库管理系统 前往MYSQL官网的下载页面,选择相应平台的MYSQ ...

  2. 【Codeforces 464D】World of Darkraft - 2

    Codeforces 464 D 首先我们知道这K个装备是互不干扰的,就是说如果一个装备升级了或者卖掉了,不会对其它装备的挣到的钱产生任何影响.所以我们就考虑单独处理某一个装备挣到的钱. 那么就设\( ...

  3. Android 如果布局中有ScrollView和Fragment或者带有滚动条的布局进行嵌套，布局加载完成页面无法定位到顶部的情况

    页面无法定位到顶部: 1.ScrollView中嵌套Fragment(Fragment中可能有想ScrollView,ListView带有滚动条的控件). 2.ScrollView嵌套ScrollVi ...

  4. Android PageAdapter翻译

    介绍:ViewPager和PagerAdapter结合使用 public abstract class PagerAdapter extends Object java.lang.Object     ...

  5. Nginx-PHP优化设置 + lnmp调优的关键影响因素 + php-fpm + nginx返回码 + tcp调优 + 最大文件描述符

    https://www.cnblogs.com/zengkefu/p/5602473.html最大文件描述符 https://blog.csdn.net/fanren224/article/detai ...

  6. Luogu4338 ZJOI2018 历史 LCT、贪心

    传送门 题意:在$N$个点的$LCT$中,最开始每条边的虚实不定,给出每一个点的$access$次数,求一种$access$方案使得每条边的虚实变换次数之和最大,需要支持动态增加某个点的$access ...

  7. 重写Override ToString()方法

    使用一个小例子来演示: 创建一个普通类别: class Ax { private int _ID; public int ID { get { return _ID; } set { _ID = va ...

  8. Spring boot多模块（moudle）中的一个注入错误（Unable to start embedded container; nested exception is org）

    org.springframework.context.ApplicationContextException: Unable to start embedded container; nested ...

  9. 深入理解USB流量数据包的抓取与分析

    0x01 问题提出 在一次演练中,我们通过wireshark抓取了一个如下的数据包,我们如何对其进行分析? 0x02 问题分析 流量包是如何捕获的? 首先我们从上面的数据包分析可以知道,这是个USB的 ...

  10. tomcate+keepalived配置双机热备

    环境清单: 应用1:192.168.51.101 应用2:192.168.51.75 虚拟IP:192.168.51.179 一.安装Tomcat(参照其他文档): 二.部署应用,并修改响应的端口(9 ...