Fatal编程技术网

将javascript与html链接

javascript jquery html

将javascript与html链接,javascript,jquery,html,Javascript,Jquery,Html,我只是通过codeacademy学习html、css和javascript。我想尝试和实践我通过创建一个没有codeacademy环境的网站所学到的东西。我遇到的问题是将javascript链接到html。我在一个文件夹中有三个文件：index.html、style.css和script.js。正如我所了解到的，我正在进行设置，该网站的加载情况良好，但由于某些原因，javascript从来都不起作用。有什么原因吗？以下是我的html和js： index.html： <!DOCTYPE ht

我只是通过codeacademy学习html、css和javascript。我想尝试和实践我通过创建一个没有codeacademy环境的网站所学到的东西。我遇到的问题是将javascript链接到html。我在一个文件夹中有三个文件：index.html、style.css和script.js。正如我所了解到的，我正在进行设置，该网站的加载情况良好，但由于某些原因，javascript从来都不起作用。有什么原因吗？以下是我的html和js：

index.html：

<!DOCTYPE html>
<html>
<head>
    <title>Result</title>
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
    <script type='text/javascript' src='script.js'></script>
</head>
<body>
    <form>
    MESSAGE: <input type="text" name="message" value="Type your text here!">
    </form>
    <button>Add!</button><br/>
    <div id="messages"></div>
</body>


结果
信息：
加上

script.js：

$(document).ready(function () {
    $('button').click(function () {
        var toAdd = $("input[name=message]").val();
        $('#messages').append("<p>" + toAdd + "</p>");
    });
});

<script src="jquery.js"></script>

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var toAdd=$（“输入[名称=消息]”）.val（）；
$（“#消息”）。追加（“”+toAdd+”
”；
});
});
您需要包含jquery（在包含script.js之前）


结果
您的脚本是使用jQuery语法编写的，但您没有在任何地方包含jQuery库。在脚本之前添加jQuery，您应该会很好

我建议使用CDN。在脚本标记之前添加此行：

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
编辑：根据sircapsalot的要求，CDN是一个内容交付网络

您还没有包含jQuery，codecademy会为您完成这项工作，您可以下载一个本地文件，然后像script.js一样包含它：

$(document).ready(function () {
    $('button').click(function () {
        var toAdd = $("input[name=message]").val();
        $('#messages').append("<p>" + toAdd + "</p>");
    });
});

<script src="jquery.js"></script>
或者像这样链接到CDN：

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
您还必须引用实际的JQuery库：

在脚本之前添加以下内容：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
如前面的答案所述。您应该首先像这样包含jQuery：

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
但这里有一个提示。无论何时在网页上包含jQuery，都应该首先下载它，然后再包含它。这将为您带来一个好处，即即使用户失去了互联网连接，jQuery仍然可以工作，但另一方面，如果您从Google API中包含jQuery，则当用户失去互联网连接时，脚本将停止工作

您可以在此处下载jQuery：

您可以通过这种方式将其包括在内（取决于保存它的名称）：
您没有在任何地方包含jQuery。您应该查看浏览器控制台中弹出的错误：
未定义变量$
或类似的错误。它通常在不包含jQuery的情况下出现。OP只是学习HTML、CSS等。。您希望他们如何知道CDN是什么：P@sircapsalot，我想把它拼出来，但我知道这将是一场速度竞赛，以获得答案。（事实上，我仍然排在pXL的第二位……不够快！）我现在提供了一个定义和一个有用的链接。@a.mpeters，这是指向“script.js”的正确路径吗？我这样问是因为你是对的，代码很好，而且到目前为止提供的所有答案都是正确的。