javascript 入门-03-运行代码

花花生

已于 2024-11-26 21:31:17 修改

阅读量783

点赞数 21

分类专栏： JavaScript 入门文章标签： javascript 开发语言 ecmascript

于 2024-11-26 00:58:25 首次发布

本文链接：https://blog.youkuaiyun.com/A_D_E/article/details/144043673

版权

JavaScript 入门专栏收录该内容

3 篇文章

订阅专栏

运行 javascript 代码片段的几种方式

Alice: 运行 javascript 代码片段的几种方式？代码片段是什么？
Bob: 代码片段就是比较少的代码，不是一个完整的前端项目啥的，就是你自己手写出来的一段代码。
Alice: 那可能只有十几行，几十行？
Bob：🤔 代码片段不是看行数的，不是说少于多少多少行的就是代码片段。就是一段可以直接执行的 js 代码而已，可能几十行几百行，也有可能很多。
Alice: 那运行 javascript 代码片段还有多少种方式？这个很重要吗？
Bob: 今天介绍三种方式，这个还挺重要的。因为这是 “磨刀” 的功夫，磨刀不误砍柴工，刀不快，基础不牢地动山摇。
Alice: 那你快讲吧，别墨迹了哥。
Bob：第一种就是最传统的，但并不是最简单的，需要了解一点点 html 的知识。
Alice: 那我们从最简单的一种开始是不是更好呢，

Bob: 有道理，第一种方式是最简单的，使用别人提供的工具。有一个产品，有手就能用，打开这个链接，点一下，哎。然后输入代码，直接自动运行在下面就能看到结果。playcode.io

Alice: 确实不错，这应该是我遇到过的最好看的在线运行 javascript 的网站了。
Bob：不仅好看，而且好用，能直接输出结果，都不用手动点确认。
Alice：那第二种呢？
Bob：第二种就有点小麻烦了，就是刚才说的，要知道一点点 HTML 的知识。这里我就不细讲了，各个标签是啥了，我们的主题是 javascript ，只给出实战的步骤好了。

本地要安装好 vscode (具体安装方式自己解决)
新建一个文件，命名为 hello.html
键盘上按 shift + !，然后回车
在 <body> 中新加 <script> 标签，然后加入代码
然后鼠标右键弹窗 vscode 的菜单，选择打开默认浏览器。
然后在打开的浏览器页面中，右键选择 检查，就能看到结果了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    console.log('hello Alice and bob')
  </script>
  
</body>
</html>

在这里插入图片描述
Alice: 这也太麻烦了，要 6 个步骤才能看到结果。这对新手来说简直难如登天，像是连续跳了 6 次大神，先这样，再那样，然后再这样，最后再这样，明白了吧。
Bob：那新手看啥不都是先这样，再那样，然后再这样，最后再这样吗。谁让你是新手呢，这些概念都要慢慢了解的，所以才要学而时习之，这样概念全都搞明白，是无底洞，打破砂锅问到底，学海无涯啊。

Alice: 好吧，那看看第三种方式吧。
Bob: 第三种也不太简单。需要知道一点点 nodejs。第二种方式是在浏览器中运行 javascript，第三种方式就是在另一个环境里面运行，那就是 nodejs
Alice: nodejs 是类似浏览器的一个软件吗？
Bob: 从运行 js 代码的角度是的，但二者其实就像西门子和西门庆，功能啥没啥相似的。
Alice: 🥶 好冷的笑话，西门子和西门庆，你快讲怎么用吧。
Bob: 我还是只讲具体步骤，不讲其他了。

下载安装 nodejs
新建 hello.js
打开控制台，使用 cd 命令进入到存放 hello.js 文件所在的目录
在控制台输入 node hello.js 就能看到结果了

Alice: 还是先这样，再这样跳了 4次大神，不过比第二种少了两步。
Bob: 丰俭由人，大家会做出自己的选择的。第三种方式要装 nodejs 还要用命令行，这比用 vscode 和浏览器门槛要高的。
Alice: 也对，讲了半天，还是第一个最好啊。
Bob: 第一种方式对新手是最友好的，还得是成熟的产品适合新手啊。不过各种语言的入门其实都这样，你比如说 Java，你要装虚拟机，你要配置系统路径，如果是写安卓，还需要装模拟器，简直懵逼。
Alice: 好吧，万事开头难啊。
Bob: 菜就多练。
Alice: 🙄