js第一次笔记

    JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：

• 使用 window.alert() 写入警告框
• 使用 document.write() 写入 HTML 输出
• 使用 innerHTML 写入 HTML 元素
• 使用 console.log() 写入浏览器控制台

  JavaScript 关键词

  JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。

  下面的表格列出了一部分将在教程中学到的关键词：

  关键词	描述
  break	终止 switch 或循环。
  continue	跳出循环并在顶端开始。
  debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
  do ... while	执行语句块，并在条件为真时重复代码块。
  for	标记需被执行的语句块，只要条件为真。
  function	声明函数。
  if ... else	标记需被执行的语句块，根据某个条件。
  return	退出函数。
  switch	标记需被执行的语句块，根据不同的情况。
  try ... catch	对语句块实现错误处理。
  var	声明变量。

  注释：JavaScript 关键词指的是保留的单词。保留词无法用作变量名。

   JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构。 

var x, y;	// 如何声明变量
x = 7; y = 8;	// 如何赋值
z = x + y;	// 如何计算值

JavaScript 值

JavaScript 语句定义两种类型的值：混合值和变量值。

混合值被称为字面量（literal）。变量值被称为变量。

JavaScript 字面量

书写混合值最重要的规则是：

写数值有无小数点均可：

15.90

10011

字符串是文本，由双引号或单引号包围：

"Bill Gates"

'Bill Gates' 

JavaScript 变量

在编程语言中，变量用于存储数据值。

JavaScript 使用 var 关键词来声明变量。

var x;

x = 7;

JavaScript 运算符

JavaScript 使用算数运算符（+ - * /）来计算值：

(7 + 8) * 10

JavaScript 使用赋值运算符（=）向变量赋值：

var x, y;
var x = 7;
var y = 8;

JavaScript 表达式

表达式是值、变量和运算符的组合，计算结果是值。

表达式也可包含变量值：

6 * 10

值可以是多种类型，比如数值和字符串:

x * 10

例如，"Bill" + " " + "Gates"，计算为 "Bill Gates"：

"Bill" + " " + "Gates"

JavaScript 关键词

JavaScript 关键词用于标识被执行的动作。

var 关键词告知浏览器创建新的变量：

var x = 7 + 8;
var y = x * 10; 

JavaScript 注释

并非所有 JavaScript 语句都被“执行”。

双斜杠 // 或 /* 与 */ 之间的代码被视为注释。

注释会被忽略，不会被执行：

var x = 7;   // 会执行

// var x = 8;   不会执行

•  JavaScript 标识符

  标识符是名称。

  在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。

  在大多数编程语言中，合法名称的规则大多相同。

  在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。

  连串的字符可以是字母、数字、下划线或美元符号。

  提示：数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。

  JavaScript 对大小写敏感

  所有 JavaScript 标识符对大小写敏感。

  变量 lastName 和 lastname，是两个不同的变量。

  avaScript 变量

  JavaScript 变量是存储数据值的容器。

  在本例中，x、y 和 z 是变量：

  实例

  var x = 7;
  var y = 8;
  var z = x + y; 

  从上例中，您可获得：

  x 存储值 7， y 存储值 8， z 存储值 15

  类似代数

  在本例中，price1、price2 以及 total 是变量：

  实例

  var price1 = 7;
  var price2 = 8;
  var price3 = 12;
  var total = price1 + price2 + price3;
  

  亲自试一试

  在编程中，类似代数，我们使用变量（比如 price1）来存放值。

  在编程中，类似代数，我们在表达式中使用变量（total = price1 + price2）。

  从上例中，您可以算出 total 的值是 27。

  提示：JavaScript 变量是存储数据值的容器。

  JavaScript 标识符

  所有 JavaScript 变量必须以唯一的名称的标识。

  这些唯一的名称称为标识符。

  标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。

  构造变量名称（唯一标识符）的通用规则是：

  名称可包含字母、数字、下划线和美元符号 名称必须以字母开头 名称也可以  $ 和  _ 开头（但是在本教程中我们不会这么做） 名称对大小写敏感（y 和 Y 是不同的变量） 保留字（比如 JavaScript 的关键词）无法用作变量名称

  提示：JavaScript 标识符对大小写敏感。

  赋值运算符

  在 JavaScript 中，等号（=）是赋值运算符，而不是“等于”运算符。

  这一点与代数不同。下面的代码在代数中是不合理的：

  x = x + 5

  然而在 JavaScript 中，它非常合理：把 x + 5 的值赋给 x。

  （计算 x + 5 的值并把结果放入 x 中。x 的值递增 5。）

  注释：JavaScript 中的“等于”运算符是 ==。

  JavaScript 数据类型

  JavaScript 变量可存放数值，比如 100，以及文本值，比如 "Bill Gates"。

  在编程中，文本值被称为字符串。

  JavaScript 可处理多种数据类型，但是现在，我们只关注数值和字符串值。

  字符串被包围在双引号或单引号中。数值不用引号。

  如果把数值放在引号中，会被视作文本字符串。

  实例

  var pi = 3.14;
  var person = "Bill Gates";
  var answer = 'How are you!';
  

  亲自试一试

  声明（创建） JavaScript 变量

  在 JavaScript 中创建变量被称为“声明”变量。

  您可以通过 var 关键词来声明 JavaScript 变量：

  var carName;

  声明之后，变量是没有值的。（技术上，它的值是 undefined。）

  如需赋值给变量，请使用等号：

  carName = "porsche";

  您可以在声明变量时向它赋值：

  var carName = "porsche";

  在上面的例子中，我们创建了名为 carName 的变量，并向其赋值 "porsche"。

  然后，我们在 id="demo" 的 HTML 段落中“输出”该值：

  实例

  <p id="demo"></p>
  
  <script>
  var carName = "porsche";
  document.getElementById("demo").innerHTML = carName; 
  </script>
  

  亲自试一试

  提示：在脚本的开头声明所有变量是个好习惯！

  一条语句，多个变量

  您可以在一条语句中声明许多变量。

  以 var 作为语句的开头，并以逗号分隔变量：

  var person = "Bill Gates", carName = "porsche", price = 15000;

  声明可横跨多行：

  var person = "Bill Gates",
  carName = "porsche",
  price = 15000;

  Value = undefined

  在计算机程序中，被声明的变量经常是不带值的。值可以是需被计算的内容，或是之后被提供的数据，比如数据输入。

  不带有值的变量，它的值将是 undefined。

  变量 carName 在这条语句执行后的值是 undefined：

  实例

  var carName;

  重复声明 JavaScript 变量

  如果再次声明某个 JavaScript 变量，将不会丢它的值。

  在这两条语句执行后，变量 carName 的值仍然是 "porsche"：

  实例

  var carName = "porsche";
  var carName; 

  JavaScript 算术

  与代数类似，您能够通过 JavaScript 变量进行算术运算，使用 = 和 + 之类的运算符：

  实例

  var x = 3 + 5 + 8;

  字符串也可以使用加号，但是字符串将被级联：

  实例

  var x = "Bill" + " " + "Gates";

  还可以试试这个：

  实例

  var x = "8" + 3 + 5;

  提示：如果把要给数值放入引号中，其余数值会被视作字符串并被级联。

  现在试试这个：

  实例

  var x = 3 + 5 + "8";

  JavaScript 不会把 VAR 或 Var 译作关键词 var。

  JavaScript 与驼峰式大小写

  历史上，程序员曾使用三种把多个单词连接为一个变量名的方法：

  连字符：

  first-name, last-name, master-card, inter-city.

  注释：JavaScript 中不能使用连字符。它是为减法预留的。

  下划线：

  first_name, last_name, master_card, inter_city.

  驼峰式大小写（Camel Case）：

  FirstName, LastName, MasterCard, InterCity.

  JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写：

  firstName, lastName, masterCard, interCity

JavaScript 注释

JavaScript 注释用于解释 JavaScript 代码，增强其可读性。

JavaScript 注释也可以用于在测试替代代码时阻止执行。

单行注释

单行注释以 // 开头。

任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。

本例在每条代码行之前使用单行注释：

// 改变标题：
 document.getElementById("myH").innerHTML = "我的第一张页面";
// 改变段落：
 document.getElementById("myP").innerHTML = "我的第一个段落。";

本例在每行结尾处使用了单行注释来解释代码：

var x = 5;      // 声明 x，为其赋值 5
var y = x + 2;  // 声明 y，为其赋值 x + 2

多行注释

多行注释以 /* 开头，以 */ 结尾。

任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。

本例使用多行注释（注释块）来解释代码：

实例

/*
 下面的代码会改变
 网页中
 id = "myH" 的标题
 以及 id = "myP" 的段落：
*/
document.getElementById("myH").innerHTML = "我的第一张页面";
document.getElementById("myP").innerHTML = "我的第一个段落。"; 

注释：使用单行注释最为常见。

提示：注释块常用于官方声明。

使用注释来阻止执行

使用注释来防止代码执行很适合代码测试。

在代码行之前添加 // 会把可执行的代码行更改为注释。

本例使用 // 来阻止代码行的执行：

//document.getElementById("myH").innerHTML = "我的第一张页面";
document.getElementById("myP").innerHTML = "我的第一个段落。"; 

本例使用注释块来阻止多行代码的执行：

/*
document.getElementById("myH").innerHTML = "我的第一张页面";
document.getElementById("myP").innerHTML = "我的第一个段落。";
*/

JavaScript 变量

JavaScript 变量是存储数据值的容器。

在本例中，x、y 和 z 是变量：

实例：

var x = 7;
var y = 8;
var z = x + y; 

从上实例中可获得：

• x 存储值 7
• y 存储值 8
• z 存储值 15

类似代数

在本例中，price1、price2 以及 total 是变量：

实例：

var price1 = 7;
var price2 = 8;
var price3 = 12;
var total = price1 + price2 + price3;

在编程中，类似代数，我们使用变量（比如 price1）来存放值。

在编程中，类似代数，我们在表达式中使用变量（total = price1 + price2）。

从上实例中，可以算出 total 的值是 27。

提示：JavaScript 变量是存储数据值的容器。

赋值运算符

在 JavaScript 中，等号（=）是赋值运算符，而不是“等于”运算符。

这一点与代数不同。下面的代码在代数中是不合理的：

x = x + 5

然而在 JavaScript 中，它非常合理：把 x + 5 的值赋给 x。

（计算 x + 5 的值并把结果放入 x 中。x 的值递增 5。）

注释：JavaScript 中的“等于”运算符是"=="。

JavaScript 数据类型

JavaScript 变量可存放数值，比如 100，以及文本值，比如 "Bill Gates"。

在编程中，文本值被称为字符串。

JavaScript 可处理多种数据类型，但是现在，我们只关注数值和字符串值。

字符串被包围在双引号或单引号中。数值不用引号。

如果把数值放在引号中，会被视作文本字符串。

实例:

var pi = 3.14;
var person = "Bill Gates";
var answer = 'How are you!';

声明（创建） JavaScript 变量

在 JavaScript 中创建变量被称为“声明”变量。

您可以通过 var 关键词来声明 JavaScript 变量：

var carName;

声明之后，变量是没有值的。（技术上，它的值是 undefined。）

如需赋值给变量，请使用等号：

carName = "porsche";

您可以在声明变量时向它赋值：

var carName = "porsche";

在上面的例子中，我们创建了名为 carName 的变量，并向其赋值 "porsche"。

然后，我们在 id="demo" 的 HTML 段落中“输出”该值：

实例:

<p id="demo"></p>

<script>
var carName = "porsche";
document.getElementById("demo").innerHTML = carName; 
</script>

一条语句，多个变量

您可以在一条语句中声明许多变量。

以 var 作为语句的开头，并以逗号分隔变量：

var person = "Bill Gates", carName = "porsche", price = 15000;

声明可横跨多行：

var person = "Bill Gates",
carName = "porsche",
price = 15000;

Value = undefined

在计算机程序中，被声明的变量经常是不带值的。值可以是需被计算的内容，或是之后被提供的数据，比如数据输入。

不带有值的变量，它的值将是 undefined。

变量 carName 在这条语句执行后的值是 undefined：

实例

var carName;

重复声明 JavaScript 变量

如果再次声明某个 JavaScript 变量，将不会丢它的值。

在这两条语句执行后，变量 carName 的值仍然是 "porsche"：

实例

var carName = "porsche";
var carName; 

JavaScript 算术

与代数类似，您能够通过 JavaScript 变量进行算术运算，使用 = 和 + 之类的运算符：

实例

var x = 3 + 5 + 8;

字符串也可以使用加号，但是字符串将被级联：

实例

var x = "Bill" + " " + "Gates";

还可以试试这个：

实例

var x = "8" + 3 + 5;

提示：如果把要给数值放入引号中，其余数值会被视作字符串并被级联。

现在试试这个：

实例

var x = 3 + 5 + "8";

JavaScript 函数 

 

JavaScript 函数是被设计为执行特定任务的代码块。

JavaScript 函数会在某代码调用它时被执行。

实例

function myFunction(p1, p2) {
    return p1 * p2;              // 该函数返回 p1 和 p2 的乘积
}

JavaScript 函数语法

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

圆括号可包括由逗号分隔的参数：

(参数 1, 参数 2, ...)

由函数执行的代码被放置在花括号中：{}

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

函数参数（Function parameters）是在函数定义中所列的名称。

函数参数（Function arguments）是当调用函数时由函数接收的真实的值。

在函数中，参数是局部变量。

在其他编程语言中，函数近似程序（Procedure）或子程序（Subroutine）。

函数调用

函数中的代码将在其他代码调用该函数时执行：

• 当事件发生时（当用户点击按钮时）
• 当 JavaScript 代码调用时
• 自动的（自调用）

您将在本教程中学到更多有关函数调用的知识。

函数返回

当 JavaScript 到达 return 语句，函数将停止执行。

如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。

函数通常会计算出返回值。这个返回值会返回给调用者：

实例

计算两个数的乘积，并返回结果：

var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 x

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

x 的结果将是：

56

为何使用函数？

您能够对代码进行复用：只要定义一次代码，就可以多次使用它。

您能够多次向同一函数传递不同的参数，以产生不同的结果。

实例

把华氏度转换为摄氏度：

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

document.getElementById("demo").innerHTML = toCelsius(77);

() 运算符调用函数

使用上面的例子，toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数结果。

实例

访问没有 () 的函数将返回函数定义：

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

document.getElementById("demo").innerHTML = toCelsius;

用作变量值的函数

函数的使用方法与变量一致，在所有类型的公式、赋值和计算中。

实例

使用变量来存储函数的值：

var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";

您能够把函数当做变量值直接使用：

var text = "The temperature is " + toCelsius(77) + " Celsius";

局部变量

在 JavaScript 函数中声明的变量，会成为函数的局部变量。

局部变量只能在函数内访问。

实例

// 此处的代码不能使用 carName

function myFunction() {
    var carName = "Volvo";
    // 此处的代码可以使用 carName
}

// 此处的代码不能使用 carName

由于局部变量只能被其函数识别，因此可以在不同函数中使用相同名称的变量。

局部变量在函数开始时创建，在函数完成时被删除。