JavaScript基础知识1~5

删除没备份的痛

于 2021-09-15 09:47:45 发布

阅读量329

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/qq_41995845/article/details/120301915

版权

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

实例

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

注释：type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
JavaScript 函数和事件
JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。

例如，当发生事件时调用函数，比如当用户点击按钮时。

提示：您将在稍后的章节学到更多有关函数和事件的知识。

<head> 或 <body> 中的 JavaScript
您能够在 HTML 文档中放置任意数量的脚本。

脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。

<head> 中的 JavaScript
在本例中，JavaScript 函数被放置于 HTML 页面的 <head> 部分。

该函数会在按钮被点击时调用：

实例

一张网页

一个段落

试一试亲自试一试中的 JavaScript 在本例中，JavaScript 函数被放置于 HTML 页面的部分。

该函数会在按钮被点击时调用：

实例

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" οnclick="myFunction()">试一试</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>

</body>
</html>

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

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

外部文件：myScript.js

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

外部脚本很实用，如果相同的脚本被用于许多不同的网页。

JavaScript 文件的文件扩展名是 .js。

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

实例

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

亲自试一试
您可以在 <head> 或 <body> 中放置外部脚本引用。

该脚本的表现与它被置于 <script> 标签中是一样的。

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

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

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载
如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：

实例

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

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

本例使用完整的 URL 来链接至脚本：

实例

<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

亲自试一试
本例使用了位于当前网站上指定文件夹中的脚本：

实例

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

亲自试一试
本例链接了与当前页面相同文件夹的脚本：

实例

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

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

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

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台
使用 innerHTML
如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。

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

实例

<!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() 比较方便：

实例

<!DOCTYPE html>
<html>
<body>

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

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

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

</body>
</html>

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

实例

<!DOCTYPE html>
<html>
<body>

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

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

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

</body>
</html>

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

使用 window.alert()
您能够使用警告框来显示数据：

实例

<!DOCTYPE html>
<html>
<body>

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

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

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

</body>
</html>

亲自试一试
使用 console.log()
在浏览器中，您可使用 console.log() 方法来显示数据。

请通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。

实例

<!DOCTYPE html>
<html>
<body>

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

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

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

</body>
</html>

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

实例

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.”：

实例

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

亲自试一试
大多数 JavaScript 程序都包含许多 JavaScript 语句。

这些语句会按照它们被编写的顺序逐一执行。

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

分号 ;
分号分隔 JavaScript 语句。

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

a = 5;
b = 6;
c = a + b;

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

a = 5; b = 6; c = a + b;

亲自试一试
您可能在网上看到不带分号的例子。

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

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

下面这两行是相等的：

var person = “Bill”;
var person=“Bill”;
在运算符旁边（ = + - * / ）添加空格是个好习惯：

var x = y + z;
JavaScript 行长度和折行
为了达到最佳的可读性，程序员们常常喜欢把代码行控制在 80 个字符以内。

如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符：

实例

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

亲自试一试
JavaScript 代码块
JavaScript 语句可以用花括号（{…}）组合在代码块中。

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

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

实例

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 关键词指的是保留的单词。保留词无法用作变量名。
4、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 关键词来声明变量。

= 号用于为变量赋值。

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

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，是两个不同的变量。

lastName = "Gates";
lastname = "Jobs";

亲自试一试
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.
camelCase
JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写：

firstName, lastName, masterCard, interCity
JavaScript 字符集
JavaScript 使用 Unicode 字符集。

Unicode 覆盖世界上几乎所有的字符、标点和符号。
5、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 = "我的第一个段落。";
*/

删除没备份的痛

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫