持续更新……
注意:这是作者学习JavaScript的开始。
本文中一律使用斜体代表标签。
JavaScript常用标签
补充:
- 注释:
JS://、/* */(与 C 相同)
HTML:<!-- -->
CSS:/**/
第2章:
- 2.1:Filename = test.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8"/>
<title>Just a test</title>
</head>
<body>
<script src = "example.js"></script>
<!--代表脚本指向文件"example.js",即JavaScript代码可以写在脚本文件中。-->
<!--并且,将<script>放在</body>之前,能使浏览器加载速度最快。-->
</body>
</html>
- 2.1:准备工作
- Sublime Text 的补全功能非常适合写 JS。
- JS 代码必须通过HTML类文档执行,方法有三种。将 script 放在 /body 之前,并使用 src属性 可以使浏览器加载页面速度最快。
- 程序设计语言包括编译型和解释型两大类,JS 是一种解释型语言,即:不需要编译器,仅需要解释器。 对 JS 而言,浏览器自带解释器。
- 2.2:语法
- JS 注释方法与 C 完全一致。并且也允许使用 HTML 风格的注释,但又有一些不同。为避免混淆,并不建议使用。
- JS 的变量无需声明,直接赋值即可。但推荐使用关键字 var 在赋值的同时声明。
- JS 对大小写敏感。
- JS 也无须类型声明,因此它是一种弱类型语言。
- 数据类型:数值、字符串、布尔值。字符串:双引号、单引号均可,转义时可根据“所穿衣服”选择性转义。推荐全部使用双引号。
- 数组:无需声明,也无需指定数组大小。声明的写法为:var Beatles = Array() ;。数组下标从零开始。同数组中元素类型可以不同,甚至可以令 A[0] = Beatles ;(二维数组,可通过 A[0][0] 访问)。
- 关联数组:类似 C++ 中的 map,即下标可以为字符串。但不推荐使用。
- 对象:类似结构体或类,由于 JS 不需要声明,因此可以这样写:var Beatles = {} ; Beatles.vocalist = lennon ;
- 2.3:操作
- 字符串的相加:类似 Python,也可以直接使用 ‘+’,甚至也可以:alert(“10” + 20) 强制类型转换成字符串。这样的输出结果为 1020 。
- 2.4:条件语句( if )
- 是否使用花括号与 C 一致。
- 注意! JS 中有严格比较的操作符。即:=== 和 !==,这两种操作符既比较值也比较类型;而 == 和 != 仅比较值,即 “” == false 返回 true。
- && || !:或与非,和 C 相同。
- 2.5:循环语句
- 与 C++ 一致。
- 2.6:函数
- function。
- 如果在函数中 使用 var 声明了一个与某全局变量同名的局部变量,则全局变量是安全的;若没有用 var,则不存在局部变量。(必须使用 var !)
- 2.7:对象
- 对象是自包含的数据集合,所包含的数据可以通过两种形式访问:属性(property)、方法(method)。均使用点语法进行访问。
- 程序中创建的对象:术语称为用户定义对象(user-defined object)。
- 创建实例需要关键字 new,如:var Jeremy_Lin = new PERSON ;(PERSON 是已创建的对象;Jeremy_Li 是它的实例)。
- 内建对象:JS 已经写好的对象。注意数组就是一种内建对象(看它的调用形式!)。注意不要和 STL 中的字符串长度函数混淆:var Beatles = new Array() ; alert(Beatles.length) ; 这里所使用的是对象Array 的属性length。
- 其它内建对象:
Math.round():括号内是数,四舍五入。
Date():在创建新实例时自动以当前的时间和日期进行初始化。且 Date 对象提供有方法 getDay() 等。如:var cur = new Date() ; alert(cur.getDay()) ; 可以提供给定日期的星期。 - 宿主对象:由运行环境(对Web应用来说即为浏览器)提供的预定义对象。如 Form、Image、Element 等,一般我们仅使用 document 就够了。
第3章:
- 3.3:购物清单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>shopping list</title>
</head>
<body>
<h1>What to Buy?</h1>
<p title="a gentle reminder">Don't forget to buy these staff.</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
</body>
</html>
- 3.4:class
<!DOCTYPE html>
<html>
<head>
<title>class</title>
<style type="text/css">
.special{
font-style: italic;
}
/*
或者:
h2.special{
font-style: italic;
}
*/
</style>
</head>
<body>
<p class="special">This paragraph has a special class.</p>
<h2 class="special">So does this headline.</h1>
</body>
</html>
- 3.4:id
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>shopping list</title>
<style type="text/css">
#purchases{
border: 1px solid white;
background-color: #333;
color: #ccc;
padding: 1em;
}
#purchases li{
font-weight: bold;
}
</style>
</head>
<body>
<h1>What to Buy?</h1>
<p title="a gentle reminder">Don't forget to buy these staff.</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
</body>
</html>
- 3.5:Filename = example.js
var paras = document.getElementsByTagName('p');
for (var i = paras.length - 1; i >= 0; i--) {
alert(paras[i].getAttribute("title"))
}
- 3.5:setAttribute
var paras = document.getElementsByTagName('p');
for (var i = 0; i < paras.length; i++) {
var title_text = paras[i].getAttribute("title");
if(title_text){
paras[i].setAttribute("title" , "brand new title text");
//把 A 属性的值修改为 “ B ”
alert(paras[i].getAttribute("title"));
}
}
- 3.1:文档:DOM中的“D”
- 3.2:对象:DOM中的“O”
- 对象分为三类:
用户定义对象:user-defined object.(程序员创造的对象)
内建对象:native object.(语言提供的对象)
宿主对象:host object.(由浏览器提供的对象) - 宿主对象中,最基础的是 window 对象,它对应着浏览器窗口本身。它的属性和方法统称为 BOM:浏览器对象模型。
- 对象分为三类:
- 3.3:模型:DOM中的“M”
- 文档是“节点树”。
- 3.4:节点
- 每一个节点都是一个对象。
- 元素节点: 标签。 其中 html 没有被包含,是根元素。
- 文本节点: 被包含在元素节点内。
- 属性节点: title、id、class 等。
- CSS:
层叠样式表(Cascading Style Sheets)。
内容是对样式的声明,既可单独成立文件也可以嵌在 head 中(置于 style 之间)。
继承:子元素继承父元素的样式属性。
当需要精细控制时,就可以使用 class、id。
class: 使用 ‘.’,可以对任何元素声明一个属性值,属性值相同的元素可以使用同一种样式;也可以为某特定类型元素定义一种样式。
id: 使用 ‘#’,为某个元素加上独一无二的标识符。可以控制本身和子元。 - 获取元素:
(详见原书)
三种 DOM 方法:document.getElementById、document.getElementByTagName、
getElementById:返回一个对象。
getElementsByTagName:(一定)返回一个数组。可使用通配符 “ * ”。
getElementsByClassName:(一定)返回一个数组。可查询同时多个类名(取交集,与顺序无关)。
- 3.5:获取和设置属性
- getAttribute:没有值则返回 null。
- setAttribute:代码不会变,但属性值被覆盖。
第4章:
- 4.1:图片清单
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8"/>
<title>Image Gallery</title>
</head>
<body>
<h1>SnapShots</h1>
<ol>
<li>
<a href="Images/Alvaro Soler.jpg">Alvaro Soler</a>;
</li>
<li>
<a href="Images/Barney.jpg">Barney</a>
</li>
</ol>
<!--使用占位符-->
<img id="PLACE" src="Images/PLACE.jpg" alt="my image gallery"/>
<script src="example.js"></script>
</body>
</html>
- 4.2:JS function
function ShowPic(WhichPic) {
//WhichPic:一个带有href属性的元素节点参数。
var source = WhichPic.getAttribute("href");
var placeholder = document.getElementById('PLACE');
placeholder.setAttribute("src",source);
}
- 4.3:拦截、替换
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8"/>
<title>Image Gallery</title>
</head>
<body>
<h1>SnapShots</h1>
<ol>
<li>
<a href="Images/Alvaro Soler.jpg" onclick="ShowPic(this);return false;" title="Alvaro Soler">Alvaro Soler</a>;
</li>
<li>
<a href="Images/Barney.jpg" onclick="ShowPic(this);return false;" title="Barney">Barney</a>
</li>
</ol>
<img id="PLACE" src="Images/PLACE.jpg" alt="my image gallery"/>
<script src="example.js"></script>
</body>
</html>
-
4.1:标记
- 相对路径:
当前目录:. /(一般可省)
父级目录:. . / - 改进:
使用占位符。
- 相对路径:
-
4.2:JavaScript
- 拦截网站默认行为、替换图片。
- 书写 JS 函数,更改占位符的 src。
- 虽然有些老办法操作图片、表单等更便捷一些,但 DOM是适用多环境多语言的通用型API,通用性和可移植性更好,因此推荐使用。
- 在 HTML 代码中添加事件处理函数:event = "JavaScript statements ; "。可以在引号间放置任意数量的 JS 语句。
-
4.3:应用这个 JavaScript 函数
- 事件处理函数工作机制:一旦事件发生,相应 JS 代码就开始执行并可以返回一个值,传递给该事件函数。所以,若 onclick 函数的返回值是 false,则认为该链接未被点击,有效防止了用户被带到目标链接窗口。
- 关键字 this 代表本元素节点。
-
4.4:对这个函数进行扩展