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 ...
随机推荐
- Java字节码里的invoke操作&&编译时的静态绑定与动态绑定
一个一直运行正常的应用突然无法运行了.在类库被更新之后,返回下面的错误. Exception in thread "main" java.lang.NoSuchMethodErro ...
- （转）tcp/ip协议的简单理解 -- ip报文和tcp报文的格式
1.概念: TCP/IP协议通信的过程其实就对应着数据入栈与出栈的过程.入栈的过程,数据发送方每层不断地封装首部与尾部,添加一些传输的信息,确保能传输到目的地.出栈的过程,数据接收方每层不断地拆除首部 ...
- mysql 修改字段
alter table dev_instant_video modify column content varchar(2500)alter table dev_instant_video_info ...
- 截取字符串中最后一个中文词语(MS SQL)
有朋友需求一个问题,就是处理一张表中某一字段,从这个字段中去截取内容中最后一个中文词语. ID SourceText Result 1 张达:U:1杨英苹:U:1,周忱:U:1,;苗桥:U:1,章玮: ...
- @Vue/Cli 3 关于 render 空的处理
问题场景 vue-cli 3 在打包部署时候会出现 dist folder not working "Uncaught TypeError: Cannot set property 'ren ...
- sql文件或连接数据库反向生成pdm文件
1. File -> Reverse Engineer -> Database 2.选择sql数据库类型 mysql / sqlserver /oracle 3.using script ...
- 浅谈nornalize.css(含源码)
Normalize.css是一种CSS reset的替代方案.经过@necolas和@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异,这个项目终于变成了现在这样. 我们创造norm ...
- Oracle_忘记密码
1.运行到C盘根目录 2.输入:SET ORACLE_SID = 你的SID名称 3.输入:sqlplus/nolog 4.输入:connect/as sysdba 5.输入:altre user s ...
- [转载]sql 盲注之正则表达式攻击
[转载]sql 盲注之正则表达式攻击 -----------------------------------------MYSQL 5+-------------------------------- ...
- webpack详细配置解析
阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本 ...