Question

我正在学习JavaScript，但是本教程根据资源而有所不同。看起来JavaScipts不同，有两种类型。

因此，假设我们采用一个来源，则它们具有这样的代码：

<html>
    <body>
        <p>Before the script...</p>
        <script>
            alert( 'Hello, world!' );
        </script>
        <p>...After the script.</p>
    </body>
</html>

但是，当我在Codecademy上进行教程时，例如，它们没有任何html代码，没有正文，p，脚本...这些代码不会进入html。警报，onclick之类的功能非常流行，实际上，w3schools就是从这些功能开始的，而在Codecademy上则没有这样的功能。这行代码

document.getElementById('demo').innerHTML = Date();

它说这在javascript中很重要，但是codecademy根本没有提到它！就像那些文档的点getElementById（'demo'）一样，它在做什么？为什么它在w3schools上无处不在，而在Codecademy上却没有，如果它是如此重要？我完成了Codecademy上的整个JavaScript课程，但是我仍然感到困惑，它为何如此不同？我之前学习过Python，它与适当的JavaScript类似（我将适当的JavaScript称为Codecademy，因为结构类似于Python）因此，奇怪的JavaScript（在w3schools等上，而不在Codecademy上的那个）通常带有美元符号，像这样的行

function $(x) { return document.getElementById(x); }

正确的JavaScript仅在字符串插值中使用美元符号，仅此而已，整个Codecademy教程都没有我上面提供的所有奇怪的代码，这在其他Web来源上似乎真的很重要。我发现的所有YouTube教程也都使用正确的JavaScript，只是声明变量，编写函数（如Python等普通编程语言），但教程中的所有HTML标签，警报，onclicks，美元符号等都包含了这些内容喜欢w3schools？可以请人解释一下吗？

是的，我很尴尬。考虑到这一点，我知道Python和JavaScript的知识水平高于初学者，但是我无法弄清楚不同代码的含义以及正在发生的事情...

P.S。谢谢大家的回答。我可能不清楚，但我不想让您解释我发布的那些代码行的实际含义（就像你们大多数人一样），但主要是我想知道它为何如此不同，为什么呢？区别，为什么要使用两种不同类型的JavaScript？因此，我接受了适当的答案。

Answer 1

document.getElementById是DOM API的一部分，不是JavaScript的一部分。如果要与网页进行交互，则需要将html进行解析并“转换”为DOM树状结构。例如document在Node.js（服务器端JavaScript）中不存在，但是如果您要测试前端代码，则可以使用库。

<script>标签是一种将JavaScript文件添加到html页面的方法。但是您不需要HTML页面即可使用JavaScript（您可以使用我提到的Node.js）。

有关此事：

function $(x) {return document.getElementById(x);}

$是普通的变量和函数名，它是Prototype和jQuery库的继承人，这些库将其用作API主入口点，并且非常简短。

Answer 2

甚至可以说有两个以上！

Javascript是为在DOM上下文中在浏览器中工作而开发的，但是它还是一种独立于任何浏览器，任何HTML，任何DOM的编程语言。

在HTML中，public class RatingActivity extends AppCompatActivity { ImageView smiley; TextView t1; TextView smiley_text; RatingBar rate; Button submit; private String getRate; private int Submit_Rate; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_rating); smiley=(ImageView)findViewById(R.id.img_smile); t1=(TextView)findViewById(R.id.Text_rate); smiley_text=(TextView)findViewById(R.id.Rate_detail); rate=(RatingBar)findViewById(R.id.rate); submit=(Button)findViewById(R.id.Sbmit); rate.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() { @Override public void onRatingChanged(RatingBar ratingBar, float v, boolean b) { getRate=String.valueOf((int) rate.getRating()); if(getRate.equals("1")){ smiley.setImageResource(R.drawable.logo); smiley_text.setText(getRate+" star"); Submit_Rate=1; } else { Toast.makeText(RatingActivity.this,"No Point",Toast.LENGTH_SHORT).show(); } } }); submit.setText(getRate); } }标签用于javascript，但是您也可以链接到javascript文件。

Answer 3

<script>标记只是一个html元素，它声明此块的内容为javascript。内容将由DOM范围内的浏览器执行。

在javascript应用程序中，您没有将javascript直接编码到DOM中，而是将JS文件包含/注入到页面中。

Answer 4

当您看到alter user system profile my_profile;通常是试图从DOM树中查找元素时，在您的情况下，它正在尝试查找ID为getElement的元素。

会找到这样的东西

demo

对于代码<div class="container"> <p id="demo"> </p> </div>，这将获取日期并将其设置为HTML #demo节点。

对于document.getElementById('demo').innerHTML = new Date()，此函数正在尝试复制选择DOM的jQuery功能。它的作用与上面的代码相同，但是一旦声明，您键入的次数就会减少。

function $(x) {return document.getElementById(x);}

在HTML代码段中，在标记之前和之后使用function $(x) { return document.getElementById(x); } $('demo') // finds all nodes that have #demo in your DOM tree表示您是否要等待文档加载。 DOM树从一个节点加载到下一个节点，并且当您加载JS文件或脚本时，会立即加载并触发DOM树，除非告知其否使用事件和条件。

<script>

Answer 5

Codecademy上的一个主要处理服务器端Javascript，如果您想了解更多有关NodeJS的信息，请阅读NodeJS。另一个带有document.getElementById（）之类的东西是客户端Javascript，它由您或任何在浏览器内部访问网页（即客户端）的人执行。

另一方面，

NodeJS不在浏览器中运行，因此没有全局文档或窗口。您可以使用它来制作网络服务器（签出Express）或将其用于其他内容，就像使用其他语言（例如Python）一样。

它们两者仍然是相同的Javascript，但是它们在不同的上下文中运行。美元符号是非常典型的jQuery语法，它只是Javascript的框架，他们决定使用$作为变量名（允许使用），因此您可以轻松地看到它是jQuery的函数。没有什么可以阻止您在变量名中使用$自己，而不是在NodeJS和浏览器中使用。

为什么有两种不同的Javascript？

5 个答案: