用Visual Studio Code创建JavaScript运行环境【2024版】

用Visual Studio Code创建JavaScript运行环境

JavaScript 的历史

JavaScript 最初被称为 LiveScript,由 Netscape(Netscape Communications Corporation,网景通信公司)公司的布兰登·艾奇(Brendan Eich)在 1995 年开发。在 Netscape 与 Sun(一家互联网公司,全称为“Sun Microsystems”,现已被甲骨文公司收购)合作之后将其更名为了 JavaScript。
在这里插入图片描述

下载软件

1.可以从官网直接下载vscode,软件很小,我现在使用的是最新的1.80.1版本
2.咱们调试js需要用到浏览器,配置的插件是用Chrome浏览器,所以没有的话装一个。
3.从官网下完之后一直下一步就安装完成了

安装必要的扩展插件

1.VSCode界面很简洁安装完之后所有的功能都一目了然,我们需要安装插件可以点击如图的工具和语言:

在这里插入图片描述

2.安装以下两个插件如图:

在这里插入图片描述
在这里插入图片描述

3.我们要调试一个js,需要创建一个html文档里面添加js方法,简单创建个文件,可以直接拖到编译器上,内容如下:

<!DOCTYPE html>
<html><head><title>JavaScript</title>
</head><body><div id="demo"></div><script>// 在 id 属性为 demo 的标签中添加指定内容document.getElementById("demo").innerHTML = "Hello World";</script>
</body></html>

4. 文件放到编译器之后,我们按下F5会有一个弹出框提示我们使用什么环境,因为我们还没创建所以选择more按钮添加插件能让我们进行调试:

在这里插入图片描述

5.进入扩展商店列表我们可以选择JavaScript Debugger插件进行安装,安装完后我们需要重启环境才会生效,或者点击重新加载:

在这里插入图片描述

6.安装完之后再次按下F5时就可以看到Chrome了,选择之后编译器会在当前html文件同目录下创建一个.vscod文件夹里面有一个launch.json的配置文件,同时在编译器显示出来:

在这里插入图片描述

7.做好这些以后按下F5我们会发现已经可以正常运行啦,可以安心学习我们的js基础知识了

如果调试有问题欢迎留言讨论,希望大家顺利开启JavaScript之旅

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/649708.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle PL/SQL Programming 第2章:Creating and Running PL/SQL Code 读书笔记

暂不考虑系统设计或单元测试之类的任务&#xff0c;所有 PL/SQL 程序员必须熟悉的基本操作任务包括&#xff1a; 浏览数据库创建和编辑 PL/SQL 源代码编译 PL/SQL 源代码&#xff0c;并更正编译器注意到的任何代码错误和警告从某个环境执行编译后的程序检查程序执行的结果 与…

mysql 存储过程学习

存储过程介绍 1.1 SQL指令执行过程 从SQL执行的流程中我们分析存在的问题: 1.如果我们需要重复多次执行相同的SQL&#xff0c;SQL执行都需要通过连接传递到MySQL&#xff0c;并且需要经过编译和执行的步骤; 2.如果我们需要执行多个SQL指令&#xff0c;并且第二个SQL指令需要…

2024总结-前端面试题(全)

CSS 1. 请解释CSS的盒模型是什么&#xff0c;并描述其组成部分。 答案&#xff1a;CSS的盒模型是用于布局和定位元素的概念。它由内容区域、内边距、边框和外边距组成&#xff0c;这些部分依次包裹在元素周围。 2. 解释CSS中的选择器及其优先级。 答案&#xff1a;CSS选择器…

ES 可扩展、高可靠、使用场景等常见问题

ElasticSearch的常见问题 什么是ElasticSearch ElasticSearch是一款非常强大的、基于Lucene的开源搜索及分析引擎&#xff1b;它是一个实时的分布式搜索分析引擎&#xff0c;它能让你以前所未有的速度和规模&#xff0c;去探索你的数据。 它被用作全文检索、结构化搜索、分析…

Topaz Video AI:无损放大,让你的视频更清晰!

在当今的数字时代&#xff0c;视频内容的重要性越来越受到人们的关注。无论是在社交媒体上分享生活片段&#xff0c;还是在商业领域中制作宣传视频&#xff0c;人们都希望能够展现出更高质量的视频内容。 然而&#xff0c;由于各种原因&#xff0c;我们经常会面临一个问题&…

C++版QT:分割窗口

目录 mainwindow.h mainwindow.cpp main.cpp Qt的分割窗口功能允许用户将一个窗口分割成多个区域&#xff0c;每个区域可以独立地显示不同的内容。这种功能在许多应用程序中非常有用&#xff0c;例如编辑器、浏览器和IDE等。 理解Qt的分割窗口&#xff0c;需要从以下几个方面…

音频格式之AAC:(2)AAC封装格式ADIF,ADTS,LATM,extradata及AAC ES存储格式

系列文章目录 音频格式的介绍文章系列&#xff1a; 音频编解码格式介绍(1) ADPCM&#xff1a;adpcm编解码原理及其代码实现 音频编解码格式介绍(2) MP3 &#xff1a;音频格式之MP3&#xff1a;(1)MP3封装格式简介 音频编解码格式介绍(2) MP3 &#xff1a;音频格式之MP3&#x…

IDEA jdk版本切换问题

打开 IntelliJ IDEA 的 Project Structure&#xff08;快捷键通常是 Ctrl Alt Shift S&#xff09;。 转到 Project Settings > Modules。 选择相应的模块&#xff0c;然后在 Sources 标签页下&#xff0c;查看 Language level 是否设置为 自己需要的jdk版本语言。 接…

Unity2D新手教程[安装和创建项目]

1.教程简介 本教程是YouTube大佬教程视频的随笔, 目前正在更新中... 教程地址[YouTube](https://www.youtube.com/watch?vXtQMytORBmM)2.安装 本教程使用的Unity版本 2021.3.34f1&#xff0c; 安装好该LTS(长期支持)版本之后, 在左侧Install选项卡Tab中选择对应版本右边的齿…

强化学习 - Proximal Policy Optimization (PPO)

什么是机器学习 Proximal Policy Optimization&#xff08;PPO&#xff09;是一种用于解决强化学习问题的策略梯度方法。PPO的目标是通过优化代理的策略函数来最大化期望累积奖励。它通过引入一个剪切项&#xff08;clipping term&#xff09;来限制新策略相对于旧策略的更新幅…

20240125-边界外路径

题目要求 有一个m*n的网格&#xff0c;网格中有一个小球。小球初始位置位[startRow&#xff0c;startColumn]。您可以将小球移动到网格中相邻的四个单元格之一&#xff08;可能会越过网格边界移出网格&#xff09;。最多可以对小球进行maxMove移动。 给定 m、n、maxMove、sta…

uniapp导入uView组件库

目录 准备工作 1. 新建一个项目 2. 导入uview组件库 3. 关于SCSS 配置步骤 1. 引入uView主JS库 2. 在引入uView的全局SCSS 3. 引入uView基础样式 4. 配置easycom组件模式 添加效果实验运行即可成功 准备工作 1. 新建一个项目 2. 导入uview组件库 在进行配置之前&#x…

TensorFlow2实战-系列教程2:神经网络分类任务

&#x1f9e1;&#x1f49b;&#x1f49a;TensorFlow2实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Jupyter Notebook中进行 本篇文章配套的代码资源已经上传 1、Mnist数据集 下载mnist数据集&#xff1a; %matplotlib inline from pathlib imp…

练习12.5_按键_Python编程:从入门到实践(第3版)

编写一个创建空屏幕的Pygame文件。在事件循环中&#xff0c;每当检测到pygame.KEYDOWN事件时 都打印属性event.key。运行这个程序并按下不同的键&#xff0c;看看控制台窗口的输出&#xff0c;以便了解 Pygame会如何响应。 Rocket_Game.py import pygame import sys from s…

使用代码取大量2*2像素图片各通道均值,存于Excel文件中。

任务是取下图RGB各个通道的均值及标签&#xff08;R, G&#xff0c;B&#xff0c;Label&#xff09;,其中标签由图片存放的文件夹标识。由于2*2像素图片较多&#xff0c;所以将结果放置于Excel表格中&#xff0c;之后使用SVM对他们进行分类。 from PIL import Image import os …

【Linux】查看硬件信息和操作系统信息、安装的应用信息

【Linux】查看硬件信息和操作系统信息、安装的应用信息 一、硬件信息 1.1 CPU信息 cat /proc/cpuinfo #查看 processor : 0 // 逻辑处理器的唯一标识符 physical id : 0 // 硬件上真实存在的CPU siblings : 1 // 一个物理CPU有几个逻辑CPU cpu…

定向减免!函数计算让轻量 ETL 数据加工更简单,更省钱

作者&#xff1a;澈尔、墨飏 业内较为常见的高频短时 ETL 数据加工场景&#xff0c;即频率高时延短&#xff0c;一般均可归类为调用密集型场景。此场景有着高并发、海量调用的特性&#xff0c;往往会产生高额的计算费用&#xff0c;而业内推荐方案一般为攒批处理&#xff0c;业…

鸿蒙:@State装饰器

State装饰的变量&#xff0c;或称为状态变量&#xff0c;一旦变量拥有了状态属性&#xff0c;就和自定义组件的渲染绑定起来。当状态改变时&#xff0c;UI会发生对应的渲染改变。 在状态变量相关装饰器中&#xff0c;State是最基础的&#xff0c;使变量拥有状态属性的装饰器&am…

ChatGPT+Midjourney+闲鱼赚钱方法实战探索

最近天天在朋友群内看到朋友接单(出售提示词&#xff0c;图片&#xff09;&#xff0c;轻轻松松半小时就赚200-300&#xff0c;特意探索了一下相关玩法&#xff0c;总结出一套ChatGPTMidjourney闲鱼赚钱方法&#xff0c;主打的是易上手&#xff0c;有可操作性&#xff01; 具体…

项目性能优化之用compression-webpack-plugin插件开启gzip压缩

背景&#xff1a;vue项目打包发布后&#xff0c;部分js、css文件体积较大导致页面卡顿&#xff0c;于是使用webpack插件compression-webpack-plugin开启gzip压缩 前端配置vue.config.js 先通过npm下载compression-webpack-plugin包&#xff0c;npm i compression-webpack-plug…