Javascript:是不是有些东西太简单了，不能链接到外部？

Question

我真的是JavaScript的新手。所以这可能是一个基本的问题？如果可能的话，我只是想要一些解释。

我正在做一些带有JS的web开发。然而，我要求所有的文件(JS和CSS)都必须通过外部工作表进行链接，并且使用复杂的函数是有意义的，但是对于一些简单的JS，我对这意味着什么感到有点困惑。

使用CSS，您可以进行内联样式设计，或者在样式标签的页眉中，或者在外部工作表中。有一些JS交互，我不知道它是否必须在哪里，或者是否有方法将它移动到外部工作表。

For Example, this basic "bulb on/off"

这里的js是onclick=document.getElementById(...)(通过单击图像/按钮来更改图像)

这种代码甚至可以放在外部工作表中吗？我对内联/标签/外部CSS的内部类比是否也适用于Javascript，或者JS的工作方式有所不同？我只是不想因为没有把东西放在正确的地方而被忽略。

Answer 1

在内部表示为对象树，我们称之为DOM (文档对象模型)。

JavaScript只做一件事:操纵DOM。根据您的JavaScript的执行时间，它将操作DOM在其确切时刻所处的状态。

程序员通常选择在DOM就绪之后执行他们的代码。这是一个时刻，之后所有的外部代码/样式等都被获取并初始化到DOM中，因此允许您确保您的代码正在根据加载后浏览页面时所看到的全部内容工作。

放大你关于将代码放在外部文件中的问题:当然，这是可能的。在某一时刻，该文件将被导入并加载到DOM中。其中的代码将在加载此文件时执行，或者在挂接到DOM就绪事件以启动此文件中的代码时执行。

Answer 2

你在这里有一个合理的问题(很抱歉我的观点-但很高兴你试了一下！)。

这来自Mozilla开发人员页面(https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)

接下来，在index.html文件中，在结束标记之前的新行上输入以下元素：

<script src="scripts/main.js"></script>

这基本上与CSS元素的作用相同-它将JavaScript应用于页面，因此它可以影响HTML (以及CSS，以及页面上的任何其他内容)。

在您的示例代码中，您编写了onclick=document.getElementById(...)。

这实际上应该写成

onclick=function() {
   document.getElementById(...)...
}