2024-11-23 |欢迎您，第位读者！|

001 Try It with JavaScript in Hugo中增加一点JavaScript

我如何开始整JavaScript

最近看了一个很扯的视频，就是说要想高效，就要缩短工作时间。不管你们信不信，反正我是信了。我缩减工作时间干什么呢？当然是摸鱼。不钓鱼的退休干部就只能搞点人畜无害的东西，比如学一门新的程序设计语言……

前面知乎有个知友给大家安利JavaScript，我很多年前看了会那本

JavaScript: The Good Parts

感觉还行，又有点怪怪的感觉，因为对HTML、CSS和Web技术先的不感兴趣，就先放在一边。

后面还是前面不记得，在用Anasys Workbench的时候，被迫编几个DesignModeler的脚本用的JavaScript，感觉很不爽……

这次跟知友论来论去，跑去把Lisp捡起来玩玩才发现，SCIP已经改用JavaScript啦！

大受震撼……

我正好Lisp感觉没啥好整的，太大的现在有2个deadline，太小的整的没劲。那就JavaScript呗……

JavaScript的例子

下面先看一个例子。

上面的“应用”是用JavaScript写的，可以计算阶乘。你可以输入一个数字，然后输入回车计算或者点击输入框的外面，也会触发，就可以看到这个数字的阶乘。

其实，别的不说，就JavaScript这个运行速度，简直是盖了……这还不是尾递归，速度快的一塌糊涂。好吧，技术总是发展得如此之快，麻瓜们只能瞠目结舌不知所措。

对应的HTML代码为：

 1<hr>
 2<!-- standalone test: using this 
 3<link rel="stylesheet" href="./fact-style.css">
 4-->
 5<link rel="stylesheet" href="/javascript/fact-style.css">
 6<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 7<div id="line">
 8    <input type="text" id="num" placeholder="Enter a number">!=<div id="fact"></div>
 9</div>
10<!-- standalone test: using this
11<script src="./fact.js"></script>
12-->
13<script src="/javascript/fact.js"></script>
14
15<hr>

这里我引用了jQuery，我唯一知道的JavaScript基础设施……不知道是不是有替代的更好的，在我找到之前，就用这个来操纵我的HTML吧。

对应的JavaScript代码放在单独的文件中，下面是JavaScript的代码。

 1function factorial(n) {
 2    if (n === 0) {
 3        return 1;
 4    } else {
 5        return n * factorial(n - 1);
 6    }
 7}
 8
 9function updateFactorialText() {
10    var n = $("#num").val();
11    if (n == "") {
12        return;
13    }
14    try {
15        n = parseInt(n);
16    } catch (e) {
17        return;
18    }
19    var value = factorial(n);
20    $("#fact").text(value);
21
22    if ($("#" + n).length) {
23        return;
24    }
25
26    $("#line").before("<div class='equation' id='" + n + "'>" + n + "!=" + value + "</div>");
27}
28
29// setup enter key response to input element
30$("#num").keypress(function (e) {
31    if (e.which == 13) {
32        updateFactorialText();
33    }
34});
35// setup out of focus response to input element
36$("#num").focusout(function () {
37    updateFactorialText();
38});

首先是定义阶乘函数，最无聊的一种定义方式，递归调用，终止条件0!=1。然后是更新文字，利用jQuery来操纵，设置文本，并添加历史记录。

通过在历史记录中按照id设置为对应数字来保持单一性。最后是给输入框的回车和失去焦点添加回调函数。jQuery是那么性感。

不要忘了还有一个CSS文件，内容如下，不要嘲笑领域专家的CSS技能……我们基本上刷成灰的就会说好看，刷成绿的就说难看。

 1    input {
 2        display: inline-block;
 3        background-color: aqua;
 4    }
 5
 6    #fact {
 7        display: inline-block;
 8    }
 9
10    #line {
11        display: inline-block;
12    }
13
14    .equation {
15        background-color: lightgray;
16        width: 400px;
17    }

真看起来真的还行，在Hugo里面也能做一个JavaScript的App……下面再测试一下另外一个东西。

JavaScript中危险的`eval`

下面我们设置一个对话框，输入JavaScript语句，将运行并将结果显示下面。

对应的代码为：

 1<style>
 2    #result {
 3        color: cyan;
 4        background: black;
 5        font-size: 24px;
 6    }
 7
 8    .scriptWindow {
 9        font-size: 12px;
10    }
11</style>
12
13<textarea rows="10" cols="80" type="scriptWindow" id="javascript_sentence" placeholder="Enter an expression"></textarea>
14
15<textarea id="result" rows="1" cols="47" readonly></textarea>
16
17
18<script>
19    function eval_expression() {
20        // get value from javascript_sentence
21        var expr = $("#javascript_sentence").val();
22        $("#result").text(eval?.(expr));
23
24    }
25    // setup out of focus response to input element
26    $("#javascript_sentence").focusout(function () {
27        eval_expression();
28    });
29    $("#javascript_sentence").keypress(function (e) {
30        if (e.which == 13) {
31            eval_expression();
32        }
33    });
34</script>

看起来这个也没有问题。

Hugo中导入HTML、JS和CSS的美好之处

实际上，这里面最好的就是，所有的代码，可以直接写成HTML文件、JS文件和CSS文件，在这个帖子里中，我可以直接引用文件内容。

如果是插入HTML文件内容本身，我定义了一个Hugo宏，htmlfile.html，放在/laytouts/shortcodes目录下，

{{ .Get 0 | readFile | safeHTML }}

只要在Github Repository的hugo.toml中增加一个选项：

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

在Markdown文件中增加HTML文件的原始内容，就是记得这里要写文件相对于Hugo站点根目录的全路径：

这个部分就直接成为博客的一部分，这也太完美了吧。

然后，要展示源代码，就只需要：

这两个宏命令，其实都是一样的，我专门做成两个，就是为了区别功能，当然，codesnap还可以引用别的语言的代码。

还是有点完美的……我简直是个天才。

下一步

这样的话，可以玩的就太多了……

001 Try It with JavaScript in Hugo中增加一点JavaScript

我如何开始整JavaScript

JavaScript的例子

JavaScript中危险的eval

Hugo中导入HTML、JS和CSS的美好之处

下一步

JavaScript中危险的`eval`