一般来说，快速上手JavaScript编程有以下三种方法，即在浏览器工作台环境中直接编程、利用在线的JavaScript环境开始练习以及本地新建文件进行练习。本文所指的JavaScript编程均指的是前端编程，如果要进一步深入练习JavaScript，可以在本地安装nodejs并进行配置使用。

浏览器工作台环境

在Chrome或者Firefox等现代浏览器中均内置了工作台环境，在Chrome或者Firefox，打开开发者工具栏即可进行编程（快捷键 Ctrl+Shift+I）。在工作台中可以直接输入代码开始编程。
1.png2.png

在线JavaScript环境

一些网站中提供了在线的JavaScript编程环境，可用于直接在线联系JavaScript.著名的在线编辑环境包括：

进一步，如果你要在线练习TypeScript：

  • 菜鸟工具
  • 官方PlayGround

    本地新建文件

    本地新建一个 HelloWorld 目录并在其中新建 HelloWorld.js 文件：
    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.       <meta charset="utf-8">
    5.       <title>Hello World</title>
    6.       <link rel="stylesheet" href="styles.css">
    7.   </head>
    8.   <body>
    9.       <p>Welcome To JavaScript World</p>
    10.       <div id="HelloWorld"></div>
    11.   </body>
    12.   <script type="text/javascript" src="HelloWorld.js"></script>
    13. </html>
    同一文件夹下新建 styles.css 文件：
    1. #HelloWorld {
    2.   width: 100px;
    3.   height: 100px;
    4.   color: tomato;
    5.   background-color:yellow;
    6. }
    7. h1{
    8.   width:200px;
    9.   height:100px;
    10.   color:blueviolet;
    11. }
    12. p{
    13.   color:blue;
    14. }
    同一文件夹下新建 HelloWorld.js 文件： ```javascript

document.getElementById(“HelloWorld”).innerHTML =”

Hello World

hello world

“;

window.onload=()=>{ alert(“这是一个入门示例程序”); } `` 在VS Code或其他编辑器中打开该文件夹，编辑其中几个文件，就可以开始JavaScript练习了。用浏览器打开html文件，可以看到编辑效果。如果使用VS Code也可以安装 [Html Preview` ](https://marketplace.visualstudio.com/items?itemName=tht13.html-preview-vscode)插件，直接在编辑器中预览编辑效果。