JavaScript基础_1

HTML

Javascript基础_1

JS 简介

JavaScript 是属于 HTML 和 Web 的编程语言。
编程令计算机完成您需要它们做的工作。
JavaScript 很容易学习。

为何学习 JavaScript？

JavaScript 是 web 开发者必学的三种语言之一：

  • HTML 定义网页的内容
  • CSS 规定网页的布局
  • JavaScript 对网页行为进行编程

JavaScript 简介

JavaScript 能够改变 HTML 内容
getElementById() 是多个 JavaScript HTML 方法之一。

本例使用该方法来“查找” id=”demo” 的 HTML 元素，并把元素内容（innerHTML）更改为 “Hello JavaScript”：

实例

1
2
3
document.getElementById("demo").innerHTML = "Hello JavaScript";

document.getElementById("demo").innerHTML = 'Hello JavaScript';

  1. JavaScript 能够改变 HTML 属性

    通过改变 标签的 src 属性（source）来改变一张 HTML 图像
    JavaScript 能够改变 HTML 样式 (CSS)
    改变 HTML 元素的样式，是改变 HTML 属性的一种变种：

实例

1
document.getElementById("demo").style.fontSize = "25px";
  1. JavaScript 能够隐藏 HTML 元素
    可通过改变 display 样式来隐藏 HTML 元素：

实例

1
document.getElementById("demo").style.display="none";
  1. JavaScript 能够显示 HTML 元素
    可通过改变 display 样式来显示隐藏的 HTML 元素：

实例

1
document.getElementById("demo").style.display="block";

JavaScript 使用

JS 输出

<script> 标签

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。

实例

1
2
3
<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

注释：旧的 JavaScript 例子也许会使用 type 属性：<script type=”text/javascript”>。
注释：type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

  1. <head> 或<body> 中的 JavaScript

    您能够在 HTML 文档中放置任意数量的脚本。
    脚本可被放置与 HTML 页面的 或 部分中，或兼而有之。

  2. <head> 中的 JavaScript
    在本例中，JavaScript 函数被放置于 HTML 页面的 <head> 部分。
    该函数会在按钮被点击时调用：

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

</body>
</html>

提示：把脚本置于 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

外部脚本

脚本可放置与外部文件中：
外部文件：myScript.js

1
2
3
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}

外部脚本很实用，如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。

如需使用外部脚本，请在 <script> 标签的 src (source) 属性中设置脚本的名称：

实例

1
<script src="myScript.js"></script>
您可以在 &#60;head> 或 &#60;body> 中放置外部脚本引用。
该脚本的表现与它被置于 &#60;script> 标签中是一样的。

注释：外部脚本不能包含 <script> 标签。

外部 JavaScript 的优势

在外部文件中放置脚本有如下优势：

  • 分离了 HTML 和代码
  • 使 HTML 和 JavaScript 更易于阅读和维护
  • 已缓存的 JavaScript 文件可加速页面加载

如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：

实例

1
2
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

外部引用

可通过完整的 URL 或相对于当前网页的路径引用外部脚本

1
<script src="https://www.xxxx.com/js/myScript1.js"></script>

JavaScript 输出

JavaScript 不提供任何内建的打印或显示函数。

JavaScript 显示方案

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

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

使用 innerHTML

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。

id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

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

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

提示：更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。

使用 document.write()

出于测试目的，使用 document.write() 比较方便：

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：

实例

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<button onclick="document.write(5 + 6)">试一试</button>

</body>
</html>

提示：document.write() 方法仅用于测试。

使用 window.alert()

您能够使用警告框来显示数据：

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

使用 console.log()

在浏览器中，您可使用 console.log() 方法来显示数据。
请通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

JavaScript 语句

在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”。

实例

1
2
3
4
var x, y, z;	// 语句 1
x = 22;		// 语句 2
y = 11;		// 语句 3
z = x + y;	// 语句 4

JavaScript 程序

  • 计算机程序是由计算机“执行”的一系列“指令”。
  • 在编程语言中，这些编程指令被称为语句。
  • JavaScript 程序就是一系列的编程语句。

注释：在 HTML 中，JavaScript 程序由 web 浏览器执行。

JavaScript 语句

JavaScript 语句由以下构成：

          值、运算符、表达式、关键词和注释。

这条语句告诉浏览器在 id=”demo” 的 HTML 元素中输出 “Hello Kitty.”：

实例

1
document.getElementById("demo").innerHTML = "Hello Kitty.";
大多数 JavaScript 程序都包含许多 JavaScript 语句。
这些语句会按照它们被编写的顺序逐一执行。

注释：JavaScript 程序（以及 JavaScript 语句）常被称为 JavaScript 代码。

分号( ; )

分号分隔 JavaScript 语句。

请在每条可执行的语句之后添加分号：

1
2
3
a = 5;
b = 6;
c = a + b;

如果有分号分隔，允许在同一行写多条语句：

1
a = 5; b = 6; c = a + b;
可能在网上看到不带分号的例子。

提示：以分号结束语句不是必需的，但我们仍然强烈建议您这么做。

JavaScript 空白字符

JavaScript 会忽略多个空格。您可以向脚本添加空格，以增强可读性。

下面这两行是相等的：

1
2
var person = "Bill";
var person="Bill";
在运算符旁边（ = + - * / ）添加空格是个好习惯：
1
var x = y + z;

JavaScript 行长度和折行

为了达到最佳的可读性，程序员们常常喜欢把代码行控制在 80 个字符以内。
如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符：

实例

1
2
document.getElementById("demo").innerHTML =
 "Hello Kitty.";

JavaScript 代码块

JavaScript 语句可以用花括号（{...}）组合在代码块中。

代码块的作用是定义一同执行的语句。

您会在 JavaScript 中看到成块组合在一起的语句：

实例

1
2
3
4
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello Kitty.";
    document.getElementById("myDIV").innerHTML = "How are you?";
}

注释：在本教程中我们为代码块用了 4 个空格的缩进。

JavaScript 关键词

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

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

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

JavaScript 语法

JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构。
1
2
3
var x, y;	// 如何声明变量
x = 7; y = 8;	// 如何赋值
z = x + y;	// 如何计算值

JavaScript 值

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

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

JavaScript 字面量

  • 书写混合值最重要的规则是：
    写数值有无小数点均可：

    15.90

    10011

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

    "Bill Gates"

'Bill Gates'

JavaScript 变量

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

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

= 号用于为变量赋值。

在本例中，x 被定义为变量。然后，x 被赋的值是 7：

1
2
3
var x;

x = 7;

JavaScript 运算符

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

(7 + 8) * 10

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

1
2
3
var x, y;
var x = 7;
var y = 8;

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

例如：

1
2
3
"Bill" + " " + "Gates"，计算为 "Bill Gates"：

"Bill" + " " + "Gates"

JavaScript 关键词

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

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

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

JavaScript 注释

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

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

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

1
2
3
var x = 7;   // 会执行

// var x = 8;   不会执行

JavaScript 标识符

标识符是名称。

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

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

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

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

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

JavaScript 对大小写敏感

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

变量 lastName 和 lastname，是两个不同的变量。
1
2
lastName = "Gates";
lastname = "Jobs";

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

JavaScript 与驼峰式大小写

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

连字符：

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

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

下划线：

1
first_name, last_name, master_card, inter_city.

驼峰式大小写（Camel Case）：

1
FirstName, LastName, MasterCard, InterCity.

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

1
firstName, lastName, masterCard, interCity

JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖世界上几乎所有的字符、标点和符号。

JavaScript 注释（2）

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

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

单行注释

单行注释以 // 开头。

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

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

实例

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

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

实例

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

本文标题:JavaScript基础_1

文章作者:Mr.AZ

发布时间:2020年05月30日 - 21时55分

最后更新:2020年05月30日 - 22时03分

原始链接:https://oldaz.github.io/2020/05/30/JavaScript%E5%9F%BA%E7%A1%80_1/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. JS 简介
    1. 1.1. 为何学习 JavaScript？
    2. 1.2. JavaScript 简介
  2. 2. JavaScript 使用
    1. 2.1. JS 输出
      1. 2.1.1. &#60;script> 标签
  3. 3. 外部脚本
  4. 4. 外部 JavaScript 的优势
    1. 4.1. 外部引用
  5. 5. JavaScript 输出
    1. 5.1. JavaScript 显示方案
      1. 5.1.1. 使用 innerHTML
      2. 5.1.2. 使用 document.write()
      3. 5.1.3. 使用 window.alert()
      4. 5.1.4. 使用 console.log()
  6. 6. JavaScript 语句
    1. 6.1. JavaScript 程序
    2. 6.2. JavaScript 语句
    3. 6.3. 分号( ; )
    4. 6.4. JavaScript 空白字符
    5. 6.5. JavaScript 行长度和折行
    6. 6.6. JavaScript 代码块
    7. 6.7. JavaScript 关键词
  7. 7. JavaScript 语法
  8. 8. JavaScript 值
  9. 9. JavaScript 字面量
  10. 10. JavaScript 变量
  11. 11. JavaScript 运算符
  12. 12. JavaScript 关键词
  13. 13. JavaScript 注释
  14. 14. JavaScript 标识符
    1. 14.1. JavaScript 对大小写敏感
    2. 14.2. JavaScript 与驼峰式大小写
  15. 15. JavaScript 字符集
  16. 16. JavaScript 注释（2）
    1. 16.1. 单行注释
,