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

vsode (Visual Studio Code) JS – HTML 教程

  • JavaScript 是什么

-JavaScript 是一种基于对象和事件驱动的脚本语言,广泛用于在网页上实现动态交互效果JavaScript 可以嵌入到 HTML 页面中,通过在脚本标签中编写 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

-变量存储值的容器。要声明一个变量,先输入关键字 letvar,然后输入变量名

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.querySelectoralert 是浏览器内置的函数,随时可用

alert("hello!");
function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}
  • 这大概是JS入门了
  • 全网最全
    ——————————————————————————————————————————————

全文 完

  • 40
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值