vsode (Visual Studio Code) JS -- HTML 教程

vsode (Visual Studio Code) JS -- HTML 教程

• JavaScript 是什么

-JavaScript 是一种基于对象和事件驱动的脚本语言 ，广泛用于在网页上实现动态交互效果 。JavaScript 可以嵌入到 HTML 页面中，通过在脚本标签中编写 JavaScript 代码 来实现各种功能。它主要用于处理用户交互、操作网页元素、验证表单数据、发送网络请求等。

参考资料~

• JavaScript 教程 | 菜鸟教程
• web | JavaScript 基础

---

年轻人的第一个程序 "Hello World!"

-javaScript 比 HTML 和 CSS 学习起来更加复杂一点，所以必须一步一个脚印地学习。首先，来看看如何在页面中添加一些基本的 JavaScript 脚本来建造一个"Hello world !"示例一切始于 Hello World
-打开你的测试站点 ，创建一个名为 scripts 的文件

下一步，在 index.html 文件< /body > 标签前的新行添加以下代码

<script src="scripts/main.js" defer></script>

与 CSS 的 < link > 元素类似，它将 JavaScript 引入页面 以作用于 HTML

现在将以下代码添加 到 js 文件中

let myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

最后，保存 HTML 和 JavaScript 文件 ，用浏览器打开 index.html 。可以看到如下内容

• 备注
  我们将 < script > 放在 HTML 文件的底部附近的原因是浏 览器 会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略，不过还是建议在HTML内部写JS代码，有时候外部会出现问题

-比如我写在HTML内

---

HTML 网页发生了什么？

• JavaScript 把页面的标题改成了"Hello world!"

工作原理：

• querySelector(). 函数获取标题的引用
• myHeadin 将querySelector().储存在 myHeading 变量中
• 之后，把 myHeading 变量的属性 textContent （标题内容）修改为"Hello world!"

-这与 CSS 选择器的用法非常相像 ：若要对某个元素进行操作 ，首先得选择它
-我们来学习一些 JavaScript 的核心特性 ，从而更好地理解它的运行机制 。学习这些知识很有意义，因为这些原理普遍适用于所有编程语言，掌握好它们，可以做到融会贯通

学习本节时，请尝试将示例代码输入到 JavaScript 控制台里看看会发生什么

---

变量 --- Variable

-变量 是存储值的容器 。要声明一个变量 ，先输入关键字 let 或 var，然后输入变量名

let my_var;

-变量定义后赋值

my_var = "CSDN -熟 禁止🔪用代码";

// 也可以在定义的时候赋值

let my_var = "CSDN -熟 禁止🔪用代码";

• JS 中的数据类型

变量	解释	示例
String	字符串：字符串的值必须用引号单双均可，必须成对	let myVariable = '熟';
Number	数字：无需引号	let myVariable = 10;
Boolean	布尔值（真 / 假）： true/false是 JS 里的特殊关键字，无需引号	let let myVariable = true;
Array	数组：用于在单一引用中存储多个值的结构	let myVariable = [1, '小没本', 10];
Object	对象：JavaScript 里一切皆对象，一切皆可储存在变量里	let myVariable = document.querySelector('h1');

---

注释

---

条件语句

-条件语句是一种代码结构 ，用来测试表达式的真假 ，并根据测试结果运行不同的代码 。一个常用的条件语句是 if ... else

let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("我最喜欢巧克力冰淇淋了。");
} else {
  alert("但是巧克力才是我的");
}

函数（Function）

-函数 用来封装可复用的功能 。如果没有函数，一段特定的操作 过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。之前已经涉及过一些函数

let myVariable = document.querySelector("h1");

-document.querySelector 和 alert 是浏览器内置的函数，随时可用

alert("hello!");

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

• 这大概是JS入门了

• 全网最全

全文 完