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="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 之 基本语法的更多相关文章
- Javascript DOM编程艺术 语法部分
1.变量,可以变化的东西我们称为变量,随着年龄的增大,我们的age不断变大 2.Javascript变量声明用var,可以不声明变量类型.尽量声明为一个字符串字面量. 3.弱类型:要求程序员必须明确的 ...
- Javascript DOM 编程艺术（第二版）读书笔记——基本语法
Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- javascript DOM操作HTML文档
文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...
- javascript Dom 编程
javascript Dom 编程 知识概要: (1)Dom是什么? (2)Dom结构模型 (3)XML DOM和 HTML DOM (4)NODE接口的特性和方法 (5)DOM结点的常用属性 ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- JavaScript DOM 对象
JavaScript DOM 对象 什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...
- 前端基础：JavaScript DOM对象
JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
随机推荐
- 如何应用ML的建议-上
本博资料来自andrew ng的13年的ML视频中10_X._Advice_for_Applying_Machine_Learning. 遇到问题-部分(一) 错误统计-部分(二) 正确的选取数据集- ...
- linux安装jdk与配置-centos7版本
1.Linux安裝jdk 1.如果電腦沒有wget命令的,先使用yum安裝wget命令. eg: yum install wget 2.安裝好后就可以直接使用wget命令去下載jdk. 附:打開官網連 ...
- Luogu4099 HEOI2013 SAO 组合、树形DP
传送门 值得注意的是一般的DAG的拓扑序列数量是NP问题,所以不能直接入手 题目中给出的图可以看做是一个树形图,虽然方向比较迷.考虑使用树形图的性质 不妨任选一个点为根做树形DP,注意到数的位置与方案 ...
- NoSql的三大基石：CAP理论&BASE&最终一致性
关系型数据库的局限 NoSql出现在关系型数据库之后,主要是为了解决关系型数据库的短板,我们先来看看随着软件行业的发展,关系型数据库面临了哪些挑战: 1.高并发 一个最典型的就是电商网站,例如双11, ...
- kafka学习2：kafka集群安装与配置
在前一篇:kafka学习1:kafka安装 中,我们安装了单机版的Kafka,而在实际应用中,不可能是单机版的应用,必定是以集群的方式出现.本篇介绍Kafka集群的安装过程: 一.准备工作 1.开通Z ...
- 轻量级WebApi请求插件：PostMan
时间很宝贵,废话不多说,只说三句,如下: 十年河东,十年河西,莫欺骚年穷!~_~ 打错个字,应该是莫欺少年穷! 学历代表你的过去,能力代表你的现在,学习代表你的将来. 学无止境,精益求精. 本次介绍的 ...
- springboot 读取 yml 配置的几种方式
前言:在springboot 项目中一般默认的配置文件是application.properties,但是实际项目中我们一般会使用application.yml 文件,下面就介绍一下在springbo ...
- SQL调优日记--并行等待的原理和问题排查
概述 今天处理项目,客户反应数据库在某个时间段,反应特别慢.需要我们提供一些优化建议. 现象 由于是特定的时间段慢,排查起来就比较方便.直接查看这个时间段数据库的等待情况.查看等待类型发现了大量的CX ...
- Python_装饰器_29
# 装饰器形成的过程 : 最简单的装饰器 有返回值的 有一个参数 万能参数 # 装饰器的作用 # 原则 :开放封闭原则 # 语法糖 :@ # 装饰器的固定模式 import time # print( ...
- sixsix团队“餐站”应用代码规范及开发文档
网络爬虫文档 以下是我们软工小组关于网络爬虫部分代码的的说明文档.至于一些分功能的小函数或方法就不在此赘述,一看就能明白.下面就主要的函数进行说明. 从总体上来说主要有三部分:店家信息爬取部分,菜品信 ...