整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端入门教程之 JS 「基础运算符」数学 javas

前端入门教程之 JS 「基础运算符」数学 javascript学习

们从学校里了解到过很多运算符,比如说加号 +、乘号 *、减号 - 等。

在本章中,我们将从简单的运算符开始,然后着重介绍 JavaScript 特有的方面,这些是在学校中学习的数学所没有涵盖的。

术语:“一元运算符”,“二元运算符”,“运算元”

在正式开始前,我们先简单浏览一下常用术语。

  • 运算元 —— 运算符应用的对象。比如说乘法运算 5 * 2,有两个运算元:左运算元 5 和右运算元 2。有时候人们也称其为“参数”而不是“运算元”。
  • 如果一个运算符对应的只有一个运算元,那么它是 一元运算符。比如说一元负号运算符(unary negation)-,它的作用是对数字进行正负转换:
  • let x=1; x=-x; alert( x ); // -1,一元负号运算符生效
  • 如果一个运算符拥有两个运算元,那么它是 二元运算符。减号还存在二元运算符形式:
  • let x=1, y=3; alert( y - x ); // 2,二元运算符减号做减运算
  • 严格地说,在上面的示例中,我们使用一个相同的符号表征了两个不同的运算符:负号运算符,即反转符号的一元运算符,减法运算符,是从另一个数减去一个数的二元运算符。

数学

支持以下数学运算:

  • 加法 +,
  • 减法 -,
  • 乘法 *,
  • 除法 /,
  • 取余 %,
  • 求幂 **.

前四个都很简单,而 % 和 ** 则需要说一说。

取余 %

取余运算符是 %,尽管它看起来很像百分数,但实际并无关联。

a % b 的结果是 a 整除 b 的 余数)。

例如:

alert( 5 % 2 ); // 1,5 除以 2 的余数
alert( 8 % 3 ); // 2,8 除以 3 的余数

求幂 **

求幂运算 a ** b 将 a 提升至 a 的 b 次幂。

在数学中我们将其表示为 ab。

例如:

alert( 2 ** 2 ); // 22=4
alert( 2 ** 3 ); // 23=8
alert( 2 ** 4 ); // 2?=16

就像在数学计算中一样,幂运算也适用于非整数。

例如,平方根是指数为 ? 的幂运算:

alert( 4 ** (1/2) ); // 2(1/2 次方与平方根相同)
alert( 8 ** (1/3) ); // 2(1/3 次方与立方根相同)

用二元运算符 + 连接字符串

我们来看一些学校算术未涉及的 JavaScript 运算符的特性。

通常,加号 + 用于求和。

但是如果加号 + 被应用于字符串,它将合并(连接)各个字符串:

let s="my" + "string";
alert(s); // mystring

注意:只要任意一个运算元是字符串,那么另一个运算元也将被转化为字符串。

举个例子:

alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"

你看,第一个运算元和第二个运算元,哪个是字符串并不重要。

下面是一个更复杂的例子:

alert(2 + 2 + '1' ); // "41",不是 "221"

在这里,运算符是按顺序工作。第一个 + 将两个数字相加,所以返回 4,然后下一个 + 将字符串 1 加入其中,所以就是 4 + '1'='41'。

alert('1' + 2 + 2); // "122",不是 "14"

这里,第一个操作数是一个字符串,所以编译器将其他两个操作数也视为了字符串。2 被与 '1' 连接到了一起,也就是像 '1' + 2="12" 然后 "12" + 2="122" 这样。

二元 + 是唯一一个以这种方式支持字符串的运算符。其他算术运算符只对数字起作用,并且总是将其运算元转换为数字。

下面是减法和除法运算的示例:

alert( 6 - '2' ); // 4,将 '2' 转换为数字
alert( '6' / '2' ); // 3,将两个运算元都转换为数字

数字转化,一元运算符 +

加号 + 有两种形式。一种是上面我们刚刚讨论的二元运算符,还有一种是一元运算符。

一元运算符加号,或者说,加号 + 应用于单个值,对数字没有任何作用。但是如果运算元不是数字,加号 + 则会将其转化为数字。

例如:

// 对数字无效
let x=1;
alert( +x ); // 1

let y=-2;
alert( +y ); // -2

// 转化非数字
alert( +true ); // 1
alert( +"" );   // 0

它的效果和 Number(...) 相同,但是更加简短。

我们经常会有将字符串转化为数字的需求。比如,如果我们正在从 HTML 表单中取值,通常得到的都是字符串。如果我们想对它们求和,该怎么办?

二元运算符加号会把它们合并成字符串:

let apples="2";
let oranges="3";

alert( apples + oranges ); // "23",二元运算符加号合并字符串

如果我们想把它们当做数字对待,我们需要转化它们,然后再求和:

let apples="2";
let oranges="3";

// 在二元运算符加号起作用之前,所有的值都被转化为了数字
alert( +apples + +oranges ); // 5

// 更长的写法
// alert( Number(apples) + Number(oranges) ); // 5

从一个数学家的视角来看,大量的加号可能很奇怪。但是从一个程序员的视角,没什么好奇怪的:一元运算符加号首先起作用,它们将字符串转为数字,然后二元运算符加号对它们进行求和。

为什么一元运算符先于二元运算符作用于运算元?接下去我们将讨论到,这是由于它们拥有 更高的优先级

运算符优先级

如果一个表达式拥有超过一个运算符,执行的顺序则由 优先级 决定。换句话说,所有的运算符中都隐含着优先级顺序。

从小学开始,我们就知道在表达式 1 + 2 * 2 中,乘法先于加法计算。这就是一个优先级问题。乘法比加法拥有 更高的优先级

圆括号拥有最高优先级,所以如果我们对现有的运算顺序不满意,我们可以使用圆括号来修改运算顺序,就像这样:(1 + 2) * 2。

在 JavaScript 中有众多运算符。每个运算符都有对应的优先级数字。数字越大,越先执行。如果优先级相同,则按照由左至右的顺序执行。

这是一个摘抄自 Mozilla 的 优先级表(你没有必要把这全记住,但要记住一元运算符优先级高于二元运算符):

优先级

名称

符号

15

一元加号

+

15

一元负号

-

14

求幂

**

13

乘号

*

13

除号

/

12

加号

+

12

减号

-

2

赋值符

=

我们可以看到,“一元加号运算符”的优先级是 15,高于“二元加号运算符”的优先级 12。这也是为什么表达式 "+apples + +oranges" 中的一元加号先生效,然后才是二元加法。

赋值运算符

我们知道赋值符号=也是一个运算符。从优先级表中可以看到它的优先级非常低,只有 2。

这也是为什么,当我们赋值时,比如 x=2 * 2 + 1,所有的计算先执行,然后=才执行,将计算结果存储到 x。

let x=2 * 2 + 1;

alert( x ); // 5

赋值=返回一个值

=是一个运算符,而不是一个有着“魔法”作用的语言结构。

在 JavaScript 中,所有运算符都会返回一个值。这对于 + 和 - 来说是显而易见的,但对于=来说也是如此。

语句 x=value 将值 value 写入 x 然后返回 x

下面是一个在复杂语句中使用赋值的例子:

let a=1;
let b=2;

let c=3 - (a=b + 1);

alert( a ); // 3
alert( c ); // 0

上面这个例子,(a=b + 1) 的结果是赋给 a 的值(也就是 3)。然后该值被用于进一步的运算。

有趣的代码,不是吗?我们应该了解它的工作原理,因为有时我们会在 JavaScript 库中看到它。

不过,请不要写这样的代码。这样的技巧绝对不会使代码变得更清晰或可读。

链式赋值(Chaining assignments)

另一个有趣的特性是链式赋值:

let a, b, c;

a=b=c=2 + 2;

alert( a ); // 4
alert( b ); // 4
alert( c ); // 4

链式赋值从右到左进行计算。首先,对最右边的表达式 2 + 2 求值,然后将其赋给左边的变量:c、b 和 a。最后,所有的变量共享一个值。

同样,出于可读性,最好将这种代码分成几行:

c=2 + 2;
b=c;
a=c;

这样可读性更强,尤其是在快速浏览代码的时候。

原地修改

我们经常需要对一个变量做运算,并将新的结果存储在同一个变量中。

例如:

let n=2;
n=n + 5;
n=n * 2;

可以使用运算符 +=和 *=来缩写这种表示。

let n=2;
n +=5; // 现在 n=7(等同于 n=n + 5)
n *=2; // 现在 n=14(等同于 n=n * 2)

alert( n ); // 14

所有算术和位运算符都有简短的“修改并赋值”运算符:/=和 -=等。

这类运算符的优先级与普通赋值运算符的优先级相同,所以它们在大多数其他运算之后执行:

let n=2;

n *=3 + 5;

alert( n ); // 16 (右边部分先被计算,等同于 n *=8)

自增/自减

对一个数进行加一、减一是最常见的数学运算符之一。

所以,对此有一些专门的运算符:

  • 自增 ++ 将变量与 1 相加:
  • let counter=2; counter++; // 和 counter=counter + 1 效果一样,但是更简洁 alert( counter ); // 3
  • 自减 -- 将变量与 1 相减:
  • let counter=2; counter--; // 和 counter=counter - 1 效果一样,但是更简洁 alert( counter ); // 1

重要:

自增/自减只能应用于变量。试一下,将其应用于数值(比如 5++)则会报错。

运算符 ++ 和 -- 可以置于变量前,也可以置于变量后。

  • 当运算符置于变量后,被称为“后置形式”:counter++。
  • 当运算符置于变量前,被称为“前置形式”:++counter。

两者都做同一件事:将变量 counter 与 1 相加。

那么它们有区别吗?有,但只有当我们使用 ++/-- 的返回值时才能看到区别。

详细点说。我们知道,所有的运算符都有返回值。自增/自减也不例外。前置形式返回一个新的值,但后置返回原来的值(做加法/减法之前的值)。

为了直观看到区别,看下面的例子:

let counter=1;
let a=++counter; // (*)

alert(a); // 2

(*) 所在的行是前置形式 ++counter,对 counter 做自增运算,返回的是新的值 2。因此 alert 显示的是 2。

下面让我们看看后置形式:

let counter=1;
let a=counter++; // (*) 将 ++counter 改为 counter++

alert(a); // 1

(*) 所在的行是后置形式 counter++,它同样对 counter 做加法,但是返回的是 旧值(做加法之前的值)。因此 alert 显示的是 1。

总结:

  • 如果自增/自减的值不会被使用,那么两者形式没有区别:
  • let counter=0; counter++; ++counter; alert( counter ); // 2,以上两行作用相同
  • 如果我们想要对变量进行自增操作,并且 需要立刻使用自增后的值,那么我们需要使用前置形式:
  • let counter=0; alert( ++counter ); // 1
  • 如果我们想要将一个数加一,但是我们想使用其自增之前的值,那么我们需要使用后置形式:
  • let counter=0; alert( counter++ ); // 0

自增/自减和其它运算符的对比

++/-- 运算符同样可以在表达式内部使用。它们的优先级比绝大部分的算数运算符要高。

举个例子:

let counter=1;
alert( 2 * ++counter ); // 4

与下方例子对比:

let counter=1;
alert( 2 * counter++ ); // 2,因为 counter++ 返回的是“旧值”

尽管从技术层面上来说可行,但是这样的写法会降低代码的可阅读性。在一行上做多个操作 —— 这样并不好。

当阅读代码时,快速的视觉“纵向”扫描会很容易漏掉 counter++,这样的自增操作并不明显。

我们建议用“一行一个行为”的模式:

let counter=1;
alert( 2 * counter );
counter++;

位运算符

位运算符把运算元当做 32 位整数,并在它们的二进制表现形式上操作。

这些运算符不是 JavaScript 特有的。大部分的编程语言都支持这些运算符。

下面是位运算符:

  • 按位与 ( & )
  • 按位或 ( | )
  • 按位异或 ( ^ )
  • 按位非 ( ~ )
  • 左移 ( << )
  • 右移 ( >> )
  • 无符号右移 ( >>> )

这些运算符很少被使用,一般是我们需要在最低级别(位)上操作数字时才使用。我们不会很快用到这些运算符,因为在 Web 开发中很少使用它们,但在某些特殊领域中,例如密码学,它们很有用。当你需要了解它们的时候,可以阅读 MDN 上的 位操作符 章节。

逗号运算符

逗号运算符 , 是最少见最不常使用的运算符之一。有时候它会被用来写更简短的代码,因此为了能够理解代码,我们需要了解它。

逗号运算符能让我们处理多个语句,使用 , 将它们分开。每个语句都运行了,但是只有最后的语句的结果会被返回。

举个例子:

let a=(1 + 2, 3 + 4);

alert( a ); // 7(3 + 4 的结果)

这里,第一个语句 1 + 2 运行了,但是它的结果被丢弃了。随后计算 3 + 4,并且该计算结果被返回。

逗号运算符的优先级非常低

请注意逗号运算符的优先级非常低,比=还要低,因此上面你的例子中圆括号非常重要。

如果没有圆括号:a=1 + 2, 3 + 4 会先执行 +,将数值相加得到 a=3, 7,然后赋值运算符=执行 a=3,然后逗号之后的数值 7 不会再执行,它被忽略掉了。相当于 (a=1 + 2), 3 + 4。

为什么我们需要这样一个运算符,它只返回最后一个值呢?

有时候,人们会使用它把几个行为放在一行上来进行复杂的运算。

举个例子:

// 一行上有三个运算符
for (a=1, b=3, c=a * b; a < 10; a++) {
 ...
}

这样的技巧在许多 JavaScript 框架中都有使用,这也是为什么我们提到它。但是通常它并不能提升代码的可读性,使用它之前,我们要想清楚。

任务

后置运算符和前置运算符

重要程度: 5

以下代码中变量 a、b、c、d 的最终值分别是多少?

let a=1, b=1;

let c=++a; // ?
let d=b++; // ?

解决方案

赋值结果

重要程度: 3

下面这段代码运行完成后,代码中的 a 和 x 的值是多少?

let a=2;

let x=1 + (a *=2);

解决方案

类型转换

重要程度: 5

下面这些表达式的结果是什么?

"" + 1 + 0
"" - 1 + 0
true + false
6 / "3"
"2" * "3"
4 + 5 + "px"
"$" + 4 + 5
"4" - 2
"4px" - 2
"  -9  " + 5
"  -9  " - 5
null + 1
undefined + 1
" \t \n" - 2

好好思考一下,把它们写下来然后和答案比较一下。

解决方案

修正加法

重要程度: 5

这里有一段代码,要求用户输入两个数字并显示它们的总和。

它的运行结果不正确。下面例子中的输出是 12(对于默认的 prompt 的值)。

为什么会这样?修正它。结果应该是 3。

let a=prompt("First number?", 1);
let b=prompt("Second number?", 2);

alert(a + b); // 12

解决方案

原因是 prompt 以字符串的形式返回用户的输入。

所以变量的值分别为 "1" 和 "2"。

let a="1"; // prompt("First number?", 1);
let b="2"; // prompt("Second number?", 2);

alert(a + b); // 12

我们应该做的是,在 + 之前将字符串转换为数字。例如,使用 Number() 或在 prompt 前加 +。

例如,就在 prompt 之前加 +:

let a=+prompt("First number?", 1);
let b=+prompt("Second number?", 2);

alert(a + b); // 3

或在 alert 中:

let a=prompt("First number?", 1);
let b=prompt("Second number?", 2);

alert(+a + +b); // 3

在最新的代码中,同时使用一元和二元的 +。看起来很有趣,不是吗?

合类

1.Youngzine

http://www.youngzine.org/

这本儿童杂志充满了有趣的各种知识,故事、科学、社会、艺术、文化和世界新闻等等。

2. FunBrain

http://www.funbrain.com/

FunBrain有100多种互动游戏,在过程中培养孩子数学、阅读和识字等能力。另外,孩子们可以阅读各种流行的书籍和漫画,包括小屁孩日记等书。

3. TeachersPayTeachers

http://www.teacherspayteachers.com/

这网站居然也是免费的!里面包括多种活动、手工等资源!

4. Abcteach.com

http://www.abcteach.com/

免费网站提供大量的图书,包括相关利用资源参考。

5. FueltheBrain

http://www.fuelthebrain.com/

孩子可以从FueltheBrain的游戏和互动活动中练习数学,科学和语言艺术技巧!

6. Free Rice

http://freerice.com/

这个网站可以让孩子复习英语词汇和语法。每答对,网站将捐出一粒大米。收集大米的同时,帮助孩子们对抗知识上的饥饿。

7. Mr. Nussbaum

http://mrnussbaum.com/

努斯鲍姆先生是一个拥有大量的互动游戏和活动的网站,包含数学、语言艺术、历史、地理、科学等等资源。

8. SmartyGames

http://www.smartygames.com/index.php

免费游戏网站,学习如何使用钱、计时、计数和阅读。同时,你会发现迷宫、记忆游戏、谜题、数独和更多游戏!

9. Federal Resources for Educational Excellence

http://free.ed.gov/subjects.cfm?subject_id=41

来自美国教育部的免费教学资源。在这里可以找到高质量的材料,语言艺术、科学、数学、历史和更多!

10. KidsClick !

http://www.kidsclick.org/

KidsClick !是一个web搜索网站,成为自己的资源搜索管理员!

11. Turtle Diary

http://www.turtlediary.com/

超过1000种的教育活动、游戏、动画课程,可打印工作表、互动故事书等等。

12. Librarians’ Internet Database

http://www.ipl.org/

网站帮你找到你和你的孩子可以安心使用的资源。

13. YouTube

http://www.youtube.com/

数以百万计的YouTube视频,一定会有让你感兴趣的东西。一步一步的教程,新闻剪报,社论,短纪录片和更多。

14. TeacherTube

http://www.teachertube.com/

TeacherTube,听起来像是教师版的youtube。网站的设计是有点过时的(这让人想起过去版本的YouTube),但还是有许多教育视频可供选择。

15. e-Learning for Kids

http://www.e-learningforkids.org/index_main.html

您可以通过教育游戏级别或主题搜索来帮助孩子在家学习,资源包括数学,科学和语言艺术。

16. Appolicious

http://www.appolicious.com/categories/23-education

Appolicious是成千上万的教育应用程序的清单描述和评论。这是一个很不错的地方,如果你正在寻找一些新的东西,可以去看看。

17. IMDb

http://www.imdb.com/

使用IMDb,互联网电影数据库,可以查询任何电影的内容,还可以检查评级,确保它适合你,并阅读他人的观影评论。

18. Pinterest

http://www.pinterest.com/

无穷无尽的资源你可以在那里找到。来自世界各地的人们创造了这个地方,充满着伟大的东西。如果你想看看我发现什么Pinterest,跟我来。

19. Learnist

http://learni.st/

这个社交网络针对那些想要学习不同的东西的人。用户创建和分享知识的集合。“教育”主题有很多行业趋势和共享资源。

20. Wonderopolis

http://wonderopolis.org/

这个网站是去每日热身的好地方,因为它有很多有趣的问题像“早上为什么草是湿的呢?”、“最高的灯塔在哪里?”、“天空有多重?”和更多!

适合学龄前孩子

21. Seussville

http://www.seussville.com/

苏斯博士,相信每个人都喜欢…这个网站充满了互动游戏、活动,了解苏斯博士的故事从这里开始。

22. Sesame Street

http://www.sesamestreet.org/

芝麻街有各种各样的活动,帮助学生学习基本技能,如计算,造句,认识不同的形状和对象等。

23. The Color

http://www.thecolor.com/

TheColor拥有数以百计的免费在线着色页,甚至不需要被打印出来。你的页面可以保存到你的着色作品并分享。这是一个很好的网站。

24. FunFonix

http://www.funfonix.com/

FunFonix有多种在线语音游戏。可定制Worksheet!

25. Phonics Student Online Components

http://www.sadlier-oxford.com/phonics/student.cfm

有很多PreK-6 grade-appropriate在线游戏和活动。

26. Alphabet Zoo

http://www.sadlier-oxford.com/phonics/grade_k_1/zoo_a/zoo1x.htm

一个有趣的互动游戏,适合较小的小学生学习如何匹配大小写字母。

27. Starfall

http://www.starfall.com/

这个网站是一个免费的资源网站,让学生练习字母和发音! 学习phonics的最佳推荐,适合幼儿园,一年级和二年级孩子。

语言艺术类

28. Grammar Ninja Game

http://www.kwarp.com/portfolio/grammarninja.html

有趣的游戏可以帮助孩子学习不同的语法。有三个级别的难度可选择。

29. Scholastic Graphic Organizers for Reading Comprehension

http://www.scholastic.com/teachers/lesson-plan/graphic-organizers-reading-comprehension

学乐网站,帮助孩子的阅读评估、阅读理解、课程开发和更多。

30. ReadWriteThink

http://www.readwritethink.org/

ReadWriteThink是一个全面的堂资源的集合网。它包括可搜索的教案、学生互动,活动,还有适合孩子的诗歌、漫画、报纸等等。

31. Spellathon

http://www.spellathon.net/

练习拼写与拼写游戏,适用于互动白板,手机和平板电脑。

32. TVOKids: Spelling Bee Game

http://www.tvokids.com/games/spellingbee

Spelling Bee大赛的网络游戏版本,孩子听到这个词,练习拼写。

33. Shel Silverstein

http://www.shelsilverstein.com/

如果你爱谢尔西尔弗斯坦和他的诗歌,你需要看看这个。有两个版本的网站,高带宽的版本更加炫目,但他们都有相同的基本内容。有有趣的游戏和活动,甚至可以观看动画视频。

34. ManyThings

http://www.manythings.org/

这个网站是一个很好的资源,不管是英语教师还是学生。它有一个广泛的拼写游戏和活动的集合,非常适合非英语母语人士。我最喜欢的是拼写比赛游戏。

35. Forvo

http://zh.forvo.com/

Forvo是世界上最大的发音字典。对ESL学生非常有价值,因为他们可以查找任何单词,听发音地道的英语。

36. LitPick

http://www.litpick.com/

这个很棒的网站让孩子阅读和在线查找免费电子图书!适合4 - 12年级的孩子。

37. Storybird

http://storybird.com/

Storybird是可以自制书籍的网站。你可以和朋友们一起做志同道合的事情。

38. The Story Starter

http://thestorystarter.com/

它被列为作家文摘杂志在2012作家101最佳网站名单。

39. Creative Writing Prompts

http://www.creativewritingprompts.com/

当孩子需要灵感,这个网站就是要去的地方。功能超过300多个的详细的创意写作提示,以及期刊的想法。您还可以使用写作提示来热身。

40. Inklewriter

http://www.inklestudios.com/inklewriter/

Inklewriter是一个免费工具,允许孩子编写和发布故事。对教师和学生而言,是用电脑进行创意写作的完美地方。

数学类

41. Math Chimp

http://www.mathchimp.com/

数学游戏的免费网站,适合K-8年级孩子。

42. AAA Math: Fractions

http://www.aaamath.com/fra.htm

AAA数学网站的馏分部分是特别有用的,因为它提供了视觉表示和易于理解的说明。您可以从选择喜欢的碱性馏分主题中进行选择,增加分数,比较分数,分数转换,降低分数等。

43. AplusMath: Money Flashcards

http://www.aplusmath.com/cgi-bin/flashcards/money

这里会让孩子们掌握数钱的技能。

44. Math-Play

Math-Play在线数学游戏,按年级水平,内容和游戏类型分类。你会发现加法,减法,乘法,整数、分数等资源。

45. Math Game Time

数学游戏时间,互动的数学游戏、视频和worksheets,按年级水平分。孩子将能够实践学习计算。

46. Cool Math 4 Kids

http://www.coolmath4kids.com/

这个免费网站看起来可能是在90年早期的设计,但它有很多的内容,减法,次方、乘除法、分数、小数和更多。

47. Calculator.com

http://calculator.com/

一个免费的在线计算器。

48. Calcoolate

http://www.calcoolate.com/

顾名思义,Calcoolate是一个在线计算器。

科学类

49. Extreme Science

http://www.extremescience.com/

最大的海洋食肉动物是什么?世界上最大的蜘蛛有多大?寒冷的南极有什么?了解所有关于动物和世界各地的地方。

50. Earthquakes for Kids

http://earthquake.usgs.gov/learn/kids/

美国地质调查局网站,为孩子提供了关于地震的信息。他们可以了解最新咨询,通过看动画或相关游戏认识地震。

51. Water Cycle Diagram – Earthguide

http://earthguide.ucsd.edu/earthguide/diagrams/watercycle/

Earthguide水循环图提供了一个可视化表示水循环的不同部分,包括降水、径流、入渗、蒸发、蒸散、冻结和更多。

52. Plate Tectonics Animations

http://www.ucmp.berkeley.edu/geology/tectonics.html

加州大学伯克利分校的板块构造的动画演示板的工作流程,以及相关理论,对板块构造及世界形成提供历史资料和动画视频演示!

53. ARKive

http://www.arkive.org/

里面有令人叹为观止的照片和世界濒危物种影片。 每个条目还包括物种的有关范围,栖息地和更多的说明和信息。

54. Animal Planet

http://animal.discovery.com/

动物星球的视频,介绍在地球上的自然资源,野生动物等等。

55. Infrared Zoo Gallery

http://coolcosmos.ipac.caltech.edu/image_galleries/ir_zoo/

可以看到冷血动物和非冷血动物的区别等。还可以学习如何从羽毛,毛皮等分辨不同的动物。非常酷!

56. National Aquarium

http://www.aqua.org/

国家水族馆,位于巴尔的摩。官方网站有很多海洋动物的资源。

57. eNature

http://www.enature.com/

使用eNature濒危和受威胁物种的搜索引擎,输入您的邮政编码和了解你附近的高度威胁的动物。还可以参与游戏、测验和领取免费赠品。

58. Bagheera

http://www.bagheera.com/

在Bagheera了解世界各地濒危和已经灭绝的物种,提供更多的学习机会。

59. Life of Birds

PBS的网站内,认识地球的适应力最强的生物——鸟类。

60. InnerBody

http://www.innerbody.com/index.html

人体所有系统包括消化系统、免疫系统、肌肉系统、呼吸系统、骨骼系统等等介绍。

61. Planet Size Comparison

http://sciencenetlinks.com/interactives/messenger/psc/PlanetSize.html

这个超赞的网站可以让你挑选在我们的太阳系中的两颗行星,并直观地比较它们。 这是一个多么伟大的创意!

62. Exploratorium

http://www.exploratorium.edu/

旧金山探索博物馆的官方网站。它包括各种主题,从天文学知识到介绍人的身体。

63. Rainforest Heroes

http://rainforestheroes.com/

了解热带雨林和可以做些什么来帮助保护它。包括创意写作、拼写、阅读、科学,数学,所有关于雨林的主题或保护热带雨林的资源。

64. B-EYE

http://andygiger.com/science/beye/beyehome.html

给孩子不同的世界观!B-EYE可以通过蜜蜂的眼睛,让孩子看见世界是什么样子的。你可以放大或缩小真正体验复合眼在视觉上的效果。

65. Coral Reef PhotoBank

http://www.coral.org/resources/photobank.html

珊瑚礁的图片库是一个很好的资源,如果你正有兴趣研究海洋生态系统如珊瑚礁。

66. The Dino Directory

http://www.nhm.ac.uk/nature-online/life/dinosaurs-other-extinct-creatures/dino-directory/top-5/top-5.html

查看五大知名恐龙的3D模型,并了解他们的名字和来历,他们有多大,他们吃什么和何时何地居住在哪里。

67. eSpecies Fact Sheets

http://www.kidsplanet.org/factsheets/map.html

电子实况报道,包括照片,保护状况,以及超过50种的濒危物种的信息。

68. Steve Spangler Science Experiments

http://www.stevespanglerscience.com/

简单有趣的科学实验搜索目录。

69. Switcheroo Zoo

http://www.switcheroozoo.com/zoo.htm

让孩子通过组装不同的动物部位建立自己的动物。让他们想象新动物的栖息地,描述它是如何生存,它吃什么以及它与其他动物的关系。

70. The Magic School Bus Games

http://www.scholastic.com/magicschoolbus/games/index.htm

8大以互动科学为基础的游戏,包括怪物的bug,大境匹配,空间大通,以及更多!也有活动及科学实验,孩子可以在课堂上或在家里做。

71. Lawrence Hall of Science Kids

http://www.lawrencehallofscience.org/kidsite/

科学游戏大补充,孩子们科学思想交流阵地。

72. MyGarbology

http://www.naturebridge.org/garbology.php

这个网站很好解释了我们丢弃的物品的解决方案,我们可以如何保护我们的地球。

社会研究/历史类

73. Blabberize

http://blabberize.com/

Blabberize是一个有趣的Web 2.0工具,允许你上传照片,并添加音频文件。

74. Mission U.S.

http://www.mission-us.org/

任务美国是两个免费的、互动的、身临其境的美国历史游戏。一个专注于美国革命,另一个重点是奴隶运动,让孩子们了解历史,提高学习历史的兴趣。

75. Online Hieroglyphics Translator

http://www.quizland.com/hiero.mv

输入一个词时,看看它看起来像埃及象形文字的翻译。这是一个很酷的网站。

76. Playing History

http://playinghistory.org/

汇集了所有历史游戏,建成了简单的、可搜索的数据库。

77. iCivics

http://www.icivics.org/

免费课程计划和学习公民知识的互动游戏。 一些覆盖在iCivics材料的内容包括公民和参与,分权,政府预算和分支机构。

78. Printable World Maps

http://geography.about.com/library/blank/blxindex.htm

免费打印地图的国家资料。每个地图都是一个空白的轮廓。

79. Nat Geo Education: Mapping

http://education.nationalgeographic.com/education/mapping/?ar_a=1&force_AR=True

免费打印地图,打印巨幅地图和在线互动地图。

80. Timerime

http://timerime.com/

MP3音频剪辑,YouTube视频剪辑等。

81. X Timeline

http://www.xtimeline.com/index.aspx

很容易创建和分享,包括图片和视频。

82. Time Toast

http://www.timetoast.com/

用一个有效的电子邮箱注册即可,可共享网络上的任何东西!

83. Dipity

http://www.dipity.com/

Dipity,你可以创建和互动,以及定制自己的分享。

84. Capzles

http://www.capzles.com/

创建自己的分享,图片、视频、音频、Microsoft Word,Microsoft Excel,微软PowerPoint和PDF文件。

85. 50 States

http://www.50states.com/

详细信息的50个州,包括缩写和省会城市。优秀的美国地理教学资料!

86. Have Fun with History

http://www.havefunwithhistory.com/

为教育工作者孩子的历史资料,有美国所有主要的历史事件短片。

87. Famous People

http://www.biography.com/people

包括传记(图)、视频、照片以及更多。

88. The Underground Railroad

http://teacher.scholastic.com/activities/bhistory/underground_railroad/index.htm

深入地了解奴隶情况。有音频、幻灯片、录像等等。

89. The Seattle Times: Martin Luther King Jr.

http://seattletimes.com/special/mlk/

宝贵资源,马丁·路德·金故事。这个网站包括传记,相片等等。

90. Education Place: Outline Maps

http://www.eduplace.com/ss/maps/

可打印地图的另一个资源,包括历史上的地图!

91. Electoral College Calculator

http://www.archives.gov/federal-register/electoral-college/calculator.html

何为选举?展示如白宫的候选人的竞选之路。

92. Plimoth Plantation: Thanksgiving Interactive Activity

http://www.plimoth.org/learn/MRL/interact/thanksgiving-interactive-you-are-historian

这个有趣的网站让孩子们扮演历史侦探调查到底第一个感恩节发生了什么。

TML+CSS+JavaScript技术是网络统计学编程的基础,网络统计学离不开网页前台编程技术,学习web前端开发基础技术(网页设计)需要了解:HTML、CSS、JavaScript三种语言。其中,HTM(HyperText MarkUp Language,HTML)超文本标记语言是网页内容的载体,网页内容就是网页制作者放在页面上想要让用户浏览的信息,包含文字、公式、图片、视频、表格等。

HTML超文本标记语言有如下特征:

  • HTML是用来制作网页的标记语言,HTML不需要编译,直接由浏览器解析;
  • HTML文件是一个文本文件,包含了一些HTML元素, 标签等;
  • HTML文件必须使用html或htm为文件名后缀;
  • HTML是大小写不敏感的,HTML与html是一样的。

HTML超文本标记语言是通过使用标记来描述文档结构和表现形式的一种语言,由浏览器进行解析后把结果显示在网页上。它是网页构成的基础,你见到的所有网页都离不开HTML。

一、HTML文档结构

1、HTML文档基本结构

<HTML>
<HEAD>
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>
<p>第一个HTML文件</p>
</BODY>
</HTML>

HTML文档以标记【<HTML>】开始,以标记【</HTML>】结束。HTML标签告诉浏览器这两个标签之间的内容是HTML文档。

HTML文档分为文档头【<HEAD>...</HEAD>】和文档体【<BODY>...</BODY>】两部分。在文档头里,对这个文档进行了一些必要的定义,文档体中才是要显示的各种文档内容信息。

打开windows的记事本,复制、粘贴HTML文档基本结构代码,在指定文件夹中保存为"First.html",如图:

图1:保存到指定文件夹的HTML文档"First.html

鼠标双击打开这个HTML文件,显示结果如图:

图2:浏览器打开HTML文档"First.html,段落标签<p>第一个HTML文件</p>之间的文本显示在浏览器中

2、HTML文档头

HTML文档中文档头【<HEAD>...</HEAD>】标签间的内容不被显示,但在网页设计中非常重要。下面为一段HTML文档头代码:

<HEAD>
<TITLE>网页标题</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://code.jquery.com/jquery.mobile-1.1.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
<!--
.item-title {padding: 25px 10px; }
#fixed-fullscreen-content {margin-top: 0; }
A.oPageLink {FONT-SIZE:14pt;COLOR:#6666ff; TEXT-DECORATION:none;}
//-->
</style>
<script language="JavaScript">
<!--
function setLSNorm() {
if(window.localStorage){
    localStorage.setItem($("#oNorm5").val(),$("#d1").val());
}else{
    alert('This browser does NOT support localStorage');
    }
    alert(localStorage.getItem($("#oNorm5").val()))
}
//-->
</script>
</HEAD>

HTML文档头代码中,

  • <TITLE>网页标题</TITLE>:设置网页标题,显示在浏览器上方;
  • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>:

标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。几乎任何网页可以看到类似上面这段代码。“charset=UTF-8”(有时为“charset=gb2312”)表示网页使用不同字符集。标签属性单元较为复杂,对于初学者来说,记住在网页中加入这段代码即可;

  • <link rel="stylesheet" href="http://code.jquery.com/jquery.mobile-1.1.1.min.css"/>:

CSS外部样式,外部样式是通过在html中引用外部css文件来控制网页样式,同一个css文件可以被多个网页引用;

  • <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>:

引用外部JavaScript脚本程序文件,一个独立存在的JS脚本文件可以被多个网页引用;

  • <style>***</style>:

CSS内部样式,内部样式内部样式是写在html文件中,且包含在代码块中,而style写在head里面。内部样式对所在网页内所有指定的标签有效;

CSS还有一种内联样式,内联样式是直接在html标签上定义该标签的css样式,如:<div style="width:300px; color:#ff0000;">。这里style为块标签div的样式属性,定义块标签div的宽度为300像素、标签内文字颜色为红色。更多CSS知识参见“教程”;

  • <script language="JavaScript">***</script>:

在网页内部运行的JavaScript代码。更多JS知识参见教程。

3、HTML文档体

HTML文档中,文档体中才是要显示的各种文档内容信息。HTML文档体包含在【<BODY>...</BODY>】标签之间。文档体中常用的HTML标签为:

<b>标签b之间的文字在网页中显示为粗体字</b>
<i>标签b之间的文字在网页中显示为斜体字</i>
<h1>h1 标题1(head1)</h1>
<h2>h2 标题2(head2)</h2>
<h3>h3 标题3(head3)</h3>
<h4>h4 标题4(head4)</h4>
<h5>h5 标题5(head5)</h5>
<h6>h6 标题6(head6)</h6>
<sub>下标(subscript)</sub>
<sup>上标(superscript)</sup>
<a href="#">a 超级链接(anchor)</a>
<br/> br 换行(break)
<hr/> hr 横线(horizontal)
<center>center 居中(center)</center>
<div>div 区块(division)</div>
<p>p 段落(paragraph)</p>
<pre>pre 按预定格式显示的文本(Preformatted)</pre>
<img src="#" alt="图片" />img 图片(image)
<form action="#" method="post">
<input type="text" name="name" value=""/>文本输入框(text)
<input type="radio" name="name" value=""/>单选框(radio)
<input type="checkbox" name="name" value=""/>复选框(checkbox)
<input type="file" name="name" value=""/>文件选择框(file)
<input type="hidden" name="name" value=""/>隐藏域(hidden)
<input type="image" name="name" value=""/>图片按钮(image)
<input type="password" name="name" value=""/>密码输入框(password)
<input type="reset" name="name" value="reset"/>重置按钮(reset)
<input type="submit" name="name" value="submit"/>提交按钮(submit)
<select>
<option value="value">option 选择项1(option)</option>
<option value="value">option 选择项2(option)</option>
</select>
<textarea>textarea 多行文本输入区(textarea)</textarea>
</form>
有序列表
<ol>
<li>li 列表项(list item)</li>
<li>li 列表项(list item)</li>
</ol>
无序列表
<ul>
    <li>li 列表项(list item)</li>
    <li>li 列表项(list item)</li>
</ul>
table 表格(table)
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>td 表格数据(table data)</td>
        <td>td 表格数据(table data)</td>
    </tr>
    <tr>
        <td>td 表格数据(table data)</td>
        <td>td 表格数据(table data)</td>
    </tr>
</table>

4、HTML文档体转义字符

转义字符串(Escape Sequence)也称字符实体(Character Entity)。在HTML中,定义转义字符串的原因有两个:

  • 第一个原因是像“<”和“>”这类符号已经用来表示HTML标签,因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号,就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时,要严格遵守字母大小写的规则。
  • 第二个原因是有些字符在ASCII字符集中没有定义,因此需要使用转义字符串来表示。

转义字符串分成三部分:

  • 第一部分是一个&符号,英文叫ampersand;
  • 第二部分是实体名字或者是#加上实体编号;
  • 第三部分加一个分号。

(1)常用HTML转义字符表

(2)数学和希腊字母标志

二、HTML常用标签(tag)使用方法及显示效果

1、超链接标签【a

【用法】<a href="https://www.toutiao.com/article/7221429823632409147/">统计学面临的机遇与挑战 - 网络统计学</a>

【效果】统计学面临的机遇与挑战 - 网络统计学

2、换行标签【br】

【用法】在我后面换行<br/> br 换行(break)

【效果】

在我后面换行

br 换行(break)

3、粗体标签【b】

【用法】<b>b 粗体(bold)</b>

【效果】b 粗体(bold)

4、居中标签【center】

【用法】<center>center 居中(center)</center>

【效果】

center 居中(center)

5、换行块标签【div

【用法】<div>div 区块(division),自动换行</div>后续文本

【效果】

div 区块(division),自动换行

后续文本

6、不换行块标签【span】

【用法】<span>span 区块(division),不换行</span>后续文本

【效果】span 区块(division),不换行后续文本

7、标题标签【hi】

【用法】hi 标题

<h1>h1 标题1(head1)</h1>
<h2>h2 标题2(head2)</h2>
<h3>h3 标题3(head3)</h3>
<h4>h4 标题4(head4)</h4>
<h5>h5 标题5(head5)</h5>
<h6>h6 标题6(head6)</h6>

【效果】

8、横线标签【hr】

【用法】<hr> hr 横线(horizontal)

【效果】

————————————————

hr 横线(horizontal)

9、斜体标签【i】

【用法】<i>i 斜体(italic)</i>

【效果】i 斜体(italic)

10、图片标签【img】

【用法】<img src="http://www.galaxystatistics.com/webTJX/mobile/blog/img/test1.jpg">

【效果】

图3:【img】图片标签显示src属性所指网络图片

11、有序列表标签【ol】

【用法】ol 有序列表(order list)

<ol>
  <li>li 列表项(list item)</li>
  <li>li 列表项(list item)</li>
</ol>

【效果】

  1. li 列表项(list item)
  2. li 列表项(list item)

12、无序列表标签【ul】

【用法】ul 无序列表(unordered list)

<ul>
<li>li 列表项(list item)</li>
<li>li 列表项(list item)</li>
</ul>

【效果】

  • li 列表项(list item)
  • li 列表项(list item)

13、段落标签【p】

【用法】<p>p 段落(paragraph)</p>

【效果】p 段落(paragraph)

14、按预定格式标签【pre】

【用法】<pre> 按预定格式显示的文本(Preformatted)</pre>

【效果】按预定格式显示的文本(Preformatted)

15、下标标签【sub】

【用法】X<sub>sub 下标(subscript)</sub>

【效果】Xsub 下标(subscript)

16、上标标签【sup】

【用法】X<sup>sup 上标(superscript)</sup>

【效果】

17、表格标签【table

【用法】X<sub>table 表格(table)</sub>

<table border="1" cellpadding="0" cellspacing="0">
<caption>table 表格(table)</caption>
		<tr>
				<td>td 表格数据(table data)</td>
				<td>td 表格数据(table data)</td>
		</tr>
		<tr>
				<td>td 表格数据(table data)</td>
				<td>td 表格数据(table data)</td>
		</tr>
</table>

【效果】

18、表单标签

【用法】form 表单(form)

<form action="#" method="post">form 表单(form)<p/>
<input type="text" name="name" value="" />input,type='text' 文本输入框(text)<p/>
<input type="radio" name="name" value="" />input,type='radio' 单选框(radio)<p/>
<input type="checkbox" name="name" value="" />input,type='checkbox' 复选框(checkbox)<p/>
<input type="file" name="name" value="" />input,type='file' 文件选择框(file)<p/>
<input type="hidden" name="name" value="" />input,type='hidden' 隐藏域(hidden)<p/>
<input type="password" name="name" value="" />input,type='password' 密码输入框(password)<p/>
<input type="reset" name="name" value="reset" />input,type='reset' 重置按钮(reset)<p/>
<input type="submit" name="name" value="submit" />input,type='submit' 提交按钮(submit)<p/>
select 选择列表(select)
<select>
<option value="value1">option 选择项1(option)</option>
<option value="value2">option 选择项2(option)</option>
<option value="value3">option 选择项3(option)</option>
</select><p/>
<textarea>
textarea
多行文本输入区
</textarea> <p/>
</form>

【效果】

HTML文档制作主要指〈BODY〉***〈/BODY〉之间HTML标签的布局设计。本文简单介绍了常用的HTML标签,如果想用这些标签制作出漂亮的统计报告,还需要CSS样式修饰和JavaScript基本进行动态响应。至于统计图表、公式等需要JavaScript调用库函数来实现。