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
    评论
回答: Visual Studio Code是一个开源的代码编辑器,它支持多种操作系统,并具有丰富的功能和扩展性。它内置了Git版本控制功能,并支持代码补全、代码片段、代码重构等开发环境功能。\[1\]对于Web编译,Visual Studio Code可以通过安装相应的插件来实现。例如,可以安装HTML、CSS和JavaScript插件来编写和调试Web前端代码。此外,还可以安装Node.js插件来支持后端开发。通过这些插件,你可以在Visual Studio Code中编写、调试和运行Web应用程序。\[2\]在Visual Studio Code中,你可以创建一个新的项目或打开一个已有的项目,并在编辑器中编写你的代码。你可以使用适当的插件来提供语法高亮、代码提示和其他辅助功能。\[3\]当你完成编写代码后,你可以使用适当的插件来进行编译和调试。例如,对于前端代码,你可以使用插件将HTML、CSS和JavaScript文件编译成可在浏览器中运行的代码。对于后端代码,你可以使用Node.js插件来运行和调试你的应用程序。总之,Visual Studio Code是一个功能强大且灵活的代码编辑器,适用于各种类型的编程任务,包括Web编译。 #### 引用[.reference_title] - *1* [Visual Studio Code -> VSCode 开发环境搭建 ---- Lua 开发环境搭建 及 代码运行(code runner 插件)](https://blog.csdn.net/yanwennian/article/details/103480938)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [visual studio code搭建Java环境 - 一步一个脚印详细教程](https://blog.csdn.net/xuesonmax/article/details/121016567)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Linux环境中Visual Studio Code的配置使用----编译运行C/C++(良心教程)](https://blog.csdn.net/weixin_44723488/article/details/106081066)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值