JavaScript DOM编程艺术 - 读书笔记1-3章
1.JavaScript语法
准备工作
一个普通的文本编辑器,一个Web浏览器。
JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head>标签中的<script>标签之间;一种更好的方式是把JavaScript代码存为一个扩展名为.js的独立文件,在文档<head>部分放一个<script>标签,并把它的src属性指向该文件。
但最好的做法是把<script>标签放到HTML文档的最后,</body>标签之前:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Example</title>
</head>
<body>
...
<script src="file.js"></script>
</body>
</html>
JavaScript是一门解释型语言,Web浏览器是其解释器,负责完成有关的解释和执行工作。浏览器中的JavaScript解释器将直接读入源代码并执行。解释型语言代码中的错误只能等到解释器执行到有关代码时才能被发现。
语法
JavaScript是一种弱类型语言,它不需要对变量进行类型声明。这意味着可以在任何阶段改变变量的数据类型。
字符串
var mood = "don't ask"; //如果字符串包含双引号,就把整个字符串放在单引号里;如果字符串包含单引号,就把整个字符串放在双引号里
var mood = 'don\'t ask'; //如果字符串包含单引号,还想放在单引号里,就必须使用对其进行转义
var height = "about 5'10\" tall";
数组
var beatles = Array(4); //声明数组的同时可以指定数组长度
var beatles = Array(); //也可以不给出元素个数
var beatles = Array("John", "Paul", "George", "Ringo"); //声明数组的同时进行赋值
var beatles = ["John", "Paul", "George", "Ringo"]; //方括号
var lennon = ["John", 1940, false]; //不同数据类型存入一个数组
var beatles = [];
beatles[0] = lennon; //数组的元素为数组,beatles[0][0]的值是"John" var lennon = Array(); //关联数组
lennon["name"] = "John";
lennon["year"] = 1940;
lennon["living"] = false;
对象
var lennon = Object(); //使用Object关键字创建对象
lennon.name = "John";
lennon.year = 1940;
lennon.living = false;
var lennon = {name:"John", year:1940, living:false}; //使用大括号创建对象
条件语句
比较操作符
var a = false;
var b = "";
if(a==b){
alert("a equals b"); //true,因为==认为空字符串与false含义相同
} var a = false;
var b = "";
if(a===b){
alert("a equals b"); //true,因为全等操作符===不仅判断变量的值,同时判断变量的类型
} //对于!=同样如此,!== 比较严格不相等
对象
内建对象 如Array, Date, Math
宿主对象 如Form, Image, Element, document
2.DOM
DOM把一份文档表示为一棵树。
节点
元素节点
文本节点
属性节点
<p title="a gentle reminder">Don't forget to but this stuff.</p> //p是一个元素节点,title是一个属性节点,Don't ... 是一个文本节点
获取元素
有3中DOM方法可以获取元素节点
getElementById
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Example</title>
</head>
<body>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale">Milk</li>
</ul>
<script>
alert(typeof document.getElementById("purchases"));
</script>
</body>
</html> //output : Object
getElementsByTagName
document.getElementsByTagName("li"); //它返回的是一个对象数组。
var shopping = document.getElementById("purchases");
var items = shopping.getElementsByTagName("*");
alert(items.length); //output : id属性值为purchases的元素包含的列表项的个数
getElementsByClassName
document.getElementsByClassName("important sale");
设置和获取元素属性
getAttribute
var paras = document.getElementsByTagName("p");
for(var i=0; i<paras.length; i++){
var title_text = paras[i].getAtrribute("title");
if(title_text) alert(title_text);
}
setAttribute
var shopping = document.getElementById("purchases");
shopping.setAttribute("title", "a list if goods"); //如果没有这个属性,就先创建这个属性,然后设置它的值;如果本身就有这个属性,这个属性的值会被覆盖掉 //setAttribute做出的修改不会反映在文档本身的源代码, 这是因为DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容 //这正是DOM的真正威力:对页面内容进行刷新却不需要在浏览器里刷新页面
JavaScript DOM编程艺术 - 读书笔记1-3章的更多相关文章
- JavaScript DOM编程艺术读书笔记(三)
第七章 动态创建标记 在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> ...
- JavaScript DOM编程艺术读书笔记(二)
第五章 最佳实践 平稳退化(graceful degradation):如果正确使用了JavaScript脚本,可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站.虽然某 ...
- JavaScript DOM编程艺术读书笔记(一)
第一章,第二章 DOM:是一套对文档的内容进行抽象和概念化的方法. W3C中的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容,结构和样式. DHTML( ...
- JavaScript DOM编程艺术 读书笔记
2. JavaScript语法 2.1 注释 HTML允许使用"<!--"注释跨越多个行,但JavaScript要求这种注释的每行都必须在开头加上"< ...
- JavaScript DOM编程艺术读书笔记(四)
第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+fin ...
- JavaScript DOM编程艺术-学习笔记(第二章)
1.好习惯从末尾加分号:开始 2.js区分大小写 3.程序界万能的命名法则:①不以,数字开头的数字.字母.下划线.美元符号 ②提倡以下划线命名法来命名变量,以驼峰命名法来命名函数.但是到了公司往往会身 ...
- 《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- JavaScript DOM编程艺术学习笔记(一)
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
- JavaScript DOM编程艺术-学习笔记
发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...
随机推荐
- RocketMQ入门(2)最佳实践
转自:http://www.changeself.net/archives/rocketmq入门(2)最佳实践.html RocketMQ入门(2)最佳实践 一.服务端安装部署 我是在虚拟机中的Cen ...
- Select-Object用法
展开 modules 属性的详细信息 get-process |? {$_.processname -eq "cmd"}|select -ExpandProperty module ...
- 将SCOM2007代理升级到 System Center 2012 SP1
使用以下过程可以升级到 System Center 2012 Service Pack 1 (SP1), Operations Manager工程师.您应首先验证代理程序满足最小受支持的配置.有关详细 ...
- TengineWeb服务器项目
- 【C/C++多线程编程之六】pthread相互排斥量
多线程编程之线程同步相互排斥量 Pthread是 POSIX threads 的简称,是POSIX的线程标准. Pthread线程同步指多个线程协调地,有序地同步使用共享 ...
- Linux下文件描述符
http://blog.csdn.net/kumu_linux/article/details/7877770 文件描述符是一个简单的整数,用以标明每一个被进程所打开的文件和socket.第一个打开的 ...
- IaaS层市场科普
简介 这是本博客系列云计算相关文章中的第二篇,所有文章请参考: 博客所有文章 本文主要介绍了一下当前IaaS层市场上的几个主要角色,这几个角色的历史发展以及现状. 开源市场 CloudStack 一句 ...
- C如何获取文件夹下所有文件
http://baike.baidu.com/view/1186290.htm?fr=aladdin 使用io.h中的_findfirst,_findnext,_findclose,_finddata ...
- com.classpath.www
package com.classpath.www; import java.io.File; import java.net.URL; import javax.servlet.ServletCon ...
- java_jdbc_spring框架查询操作简例
1.添加commons-dbcp-1.4,commons-logging,commons-pool-1.2//线程池,commons.collections-3.2.1.jar,spring.jar ...