JavaScript基础

参考《现代js教程》所学笔记

目录

js编写位置

代码结构

变量

常量

---

js编写位置

- 可以编写到标签的指定属性中

<button onclick="alert('hello');">我是按钮</button>

  <a href="javascript:alert('aaa');">超链接</a>

- 可以编写到script标签中

  <script type="text/javascript">

    //编写js代码

  </script>

- 可以将代码编写到外部的js文件中，然后通过标签将其引入

<script src="/js/script1.js"></script>

<script src="/js/script2.js"></script>

注意

如果设置了 src 特性，script 标签内容将会被忽略。

一个单独的 <script> 标签不能同时有 src 特性和内部包裹的代码。

这将不会工作：

<script src="file.js">

  alert(1); // 此内容会被忽略，因为设定了 src

</script>

我们必须进行选择，要么使用外部的 <script src="…">，要么使用正常包裹代码的 <script>。

为了让上面的例子工作，我们可以将它分成两个 <script> 标签。

<script src="file.js"></script>

<script>

  alert(1);

</script>

代码结构

【区分大小写！！！】

我们可以在代码中编写任意数量的语句。语句之间可以使用分号进行分割。

例如，我们将 “Hello World” 这条信息一分为二：

alert('Hello'); alert('World');

通常，每条语句独占一行，以提高代码的可读性：

alert('Hello');

alert('World');

分号

当存在换行符（line break）时，在大多数情况下可以省略分号。

下面的代码也是可以运行的：

alert('Hello')

alert('World')

在这，JavaScript 将换行符理解成“隐式”的分号。这也被称为 自动分号插入。

在大多数情况下，换行意味着一个分号。但是“大多数情况”并不意味着“总是”！

注释

随着时间推移，程序变得越来越复杂。为代码添加 注释 来描述它做了什么和为什么要这样做，变得非常有必要了。

你可以在脚本的任何地方添加注释，它们并不会影响代码的执行，因为引擎会直接忽略它们。

单行注释以两个正斜杠字符 // 开始。

这一行的剩余部分是注释。它可能独占一行或者跟随在一条语句的后面。

不支持注释嵌套！

不要在 /*...*/ 内嵌套另一个 /*...*/。

下面这段代码报错而无法执行：

/*

  /* 嵌套注释 ?!? */

*/

alert( 'World' );

变量

  - 变量可以用来保存字面量，并且可以保存任意的字面量

变量 是数据的“命名存储”。我们可以使用变量来保存商品、访客和其他信息。

  - 一般都是通过变量来使用字面量，而不直接使用字面量，而且也可以通过变量来对字面量进行一个描述

- 声明变量

  - 使用var关键字来声明一个变量var a;

  -  为变量赋值

         a = 1;

  - 声明和赋值同时进行

    var d = 456;

变量命名

JavaScript 的变量命名有两个限制：

1. 变量名称必须仅包含字母，数字，符号 $ 和 _。
2. 首字符必须非数字。

有效的命名，例如：

let userName;

let test123;

如果命名包括多个单词，通常采用驼峰式命名法（camelCase）。也就是，单词一个接一个，除了第一个单词，其他的每个单词都以大写字母开头：myVeryLongName。

有趣的是，美元符号 '$' 和下划线 '_' 也可以用于变量命名。它们是正常的符号，就跟字母一样，没有任何特殊的含义。

下面的命名是有效的：

let $ =1; // 使用 "$" 声明一个变量

let _ = 2;
// 现在用 "_" 声明一个变量

alert($ + _); // 3

下面的变量命名不正确：

let 1a; 
// 不能以数字开始

let my-name; 
// 连字符 '-' 不允许用于变量命名

区分大小写

命名为 apple 和 AppLE 的变量是不同的两个变量。

允许非英文字母，但不推荐

常量

声明一个常数（不变）变量，可以使用 const 而非 let：

const myBirthday = '18.04.1982';

使用 const 声明的变量称为“常量”。它们不能被修改，如果你尝试修改就会发现报错：

const myBirthday = '18.04.1982'myBirthday = '01.01.2001'; // 错误，不能对常量重新赋值

当程序员能确定这个变量永远不会改变的时候，就可以使用 const 来确保这种行为，并且清楚地向别人传递这一事实。

大写形式的常数

一个普遍的做法是将常量用作别名，以便记住那些在执行之前就已知的难以记住的值。

使用大写字母和下划线来命名这些常量。

例如，让我们以所谓的“web”（十六进制）格式为颜色声明常量：

const COLOR_RED = "#F00";

const COLOR_GREEN = "#0F0";

const COLOR_BLUE ="#00F";

const COLOR_ORANGE = "#FF7F00";

// ……当我们需要选择一个颜色

let color = COLOR_ORANGE;

alert(color);// #FF7F00

好处：

• COLOR_ORANGE 比 "#FF7F00" 更容易记忆。
• 比起 COLOR_ORANGE 而言，"#FF7F00" 更容易输错。
• 阅读代码时，COLOR_ORANGE 比 #FF7F00 更易懂。

什么时候该为常量使用大写命名，什么时候进行常规命名？让我们弄清楚一点。

作为一个“常数”，意味着值永远不变。但是有些常量在执行之前就已知了（比如红色的十六进制值），还有些在执行期间被“计算”出来，但初始赋值之后就不会改变。

例如：

const pageLoadTime = /* 网页加载所需的时间 */;

pageLoadTime 的值在页面加载之前是未知的，所以采用常规命名。但是它仍然是个常量，因为赋值之后不会改变。

换句话说，大写命名的常量仅用作“硬编码（hard-coded）”值的别名。

与浏览器交互

我们学习了与用户交互的 3 个浏览器的特定函数：

alert

显示信息。

prompt

显示信息要求用户输入文本。点击确定返回文本，点击取消或按下 Esc 键返回 null。

confirm

显示信息等待用户点击确定或取消。点击确定返回 true，点击取消或按下 Esc 键返回 false。

这些方法都是模态的：它们暂停脚本的执行，并且不允许用户与该页面的其余部分进行交互，直到窗口被解除。

上述所有方法共有两个限制：

1. 模态窗口的确切位置由浏览器决定。通常在页面中心。
2. 窗口的确切外观也取决于浏览器。我们不能修改它。

这就是简单的代价。还有其他一些方法可以显示更漂亮的窗口，并与用户进行更丰富的交互，但如果“花里胡哨”不是非常重要，那使用本节讲的这些方法也挺好。