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 ...
随机推荐
- http协议以及get和post请求
HTTP协议是网络传输信息的一种规范. 就好比两个人之间的交流,甲只会讲英语,乙只会说汉语,结果是他们必然无法开怀畅谈. HTTP协议也类 GET 请求获取 Request-URI 所标识的资源 ...
- 网易云音乐 歌词制作软件 BesLyric （最新版本下载）
导读 BesLyric , 一款专门制作 网易云音乐 LRC 滚动歌词的软件! 搜索.下载.制作 歌词更方便! 哈哈,喜欢网易云音乐,又愁于制作歌词的童鞋有福啦!Beslyric 为你排忧解难! 本文 ...
- WIFI底座
自己贴片的51+WIFI的开发板终于到了..还是贴片的好看 美中不足的是需要改一个电阻的阻值..还有就是由于自己的8266和51单片机一块断电上电,所以如果用的USB线的质量不好就会出现 下载不了程序 ...
- Promise使用时应注意的问题
最近在使用axios库时遇到了个问题,后端接口报了500错误,但前端并未捕获到.1. 调用接口的业务代码如下: // 业务代码调用 axios({ url: url, method: 'post', ...
- npm install报错 npm ERR! enoent ENOENT: no such file or directory
在npm之后出现如下错误: $ npm install npm WARN checkPermissions Missing write access to /Users/lucas/code/js/v ...
- 一文详解如何用 TensorFlow 实现基于 LSTM 的文本分类（附源码）
雷锋网按:本文作者陆池,原文载于作者个人博客,雷锋网已获授权. 引言 学习一段时间的tensor flow之后,想找个项目试试手,然后想起了之前在看Theano教程中的一个文本分类的实例,这个星期就用 ...
- 分布式全文搜索引擎ElasticSearch
一 什么是 ElasticSearch Elasticsearch 是一个分布式可扩展的实时搜索和分析引擎,一个建立在全文搜索引擎 Apache Lucene(TM) 基础上的搜索引擎.当然 Elas ...
- Linux下分布式系统以及CAP理论分析
CAP理论被很多人拿来作为分布式系统设计的金律,然而感觉大家对CAP这三个属性的认识却存在不少误区,那么什么是CAP理论呢?CAP原本是一个猜想,2000年PODC大会的时候大牛Brewer提出的,他 ...
- python报错问题解决：'ascii' codec can't encode character
之前部署了openstack虚拟化环境,有一天在使用nova list查看虚拟机的时候,突然报错!如下: [root@linux-node1 src]# nova listERROR (Unicode ...
- Codeforces Round #505 (rated, Div. 1 + Div. 2, based on VK Cup 2018 Final)-C. Plasticine zebra
问了学长,感觉还是很迷啊,不过懂了个大概,这个翻转操作,实质不就是在序列后面加上前面部分比如 bw | wwbwwbw 操作过后 wbwbwwbww 而 bw | wwbwwbwbw 这样我们就知道 ...