Javascript 如何在html文件中包含.js脚本_Javascript_Html_Api

Javascript 如何在html文件中包含.js脚本

javascript html api

Javascript 如何在html文件中包含.js脚本,javascript,html,api,Javascript,Html,Api,我制作了以下html文件，带有OpenWeatherAPI和指向我的app.js文件的链接。但是如何在html文件中包含JavaScript代码呢？所以我想把这两个文件合并成一个。我不能让它正常工作我的html文件： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://s3.amazonaws.com/codecade

我制作了以下html文件，带有OpenWeatherAPI和指向我的app.js文件的链接。但是如何在html文件中包含JavaScript代码呢？所以我想把这两个文件合并成一个。我不能让它正常工作

我的html文件：

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
            <link rel="stylesheet" href="main.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            <script type='text/javascript' src='app.js'></script>
        </head>

        <body>
                        <div class="jumbotron">
                            <p>The weather outside is: </p>

                            <div class= "weather">
                            <input type="text" placeholder="Fill in your city first." id="city">
                            <button id="search">Submit</button>
                            <p id="demo"></p>
                            </div>

                        </div>
        </body>
    </html>

将app.js代码复制并粘贴到

标签中，您可以将其放在标题或底部

之前

    <script>
       /* your code*/
   </script>


/*你的代码*/

将代码放入脚本标记中：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
        <link rel="stylesheet" href="main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            //input city
            $('#search').click(function(){
                var city = $('#city').val();
                console.log(city);
                //get weather using API and input
                $.getJSON( "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&appid=9334f947893792dcb9b2e2c05ae23eb0", function( data ) {
                    $('.weather').html(Math.round(data.main.temp)+ ' degrees Celcius');
                });
            });
        });
        </script>
    </head>

    <body>
            <div class="jumbotron">
                <p>The weather outside is: </p>
            <div class= "weather">
                <input type="text" placeholder="Fill in your city first." id="city">
                <button id="search">Submit</button>
                <p id="demo"></p>
            </div>

        </div>
    </body>
</html>


$（文档）.ready（函数（）{
//输入城市
$（“#搜索”）。单击（函数（）{
var city=$（'#city'）.val（）；
控制台.日志（城市）；
//使用API和输入获取天气
$.getJSON（“http://api.openweathermap.org/data/2.5/weather?q=“+city+”&units=metric&appid=9334f947893792dcb9b2e2c05ae23eb0”，函数（数据）{
$（'.weather'）.html（Math.round（data.main.temp）+'degrees Celcius'）；
});
});
});
外面的天气是:
提交

在某些情况下，当我们在关闭body标记之前在html页面底部给出脚本时，某些脚本可以工作：


外面的天气是:
提交

$（文档）.ready（函数（）{
//输入城市
$（“#搜索”）。单击（函数（）{
var city=$（'#city'）.val（）；
控制台.日志（城市）；
//使用API和输入获取天气
$.getJSON（“http://api.openweathermap.org/data/2.5/weather?q=“+city+”&units=metric&appid=9334f947893792dcb9b2e2c05ae23eb0”，函数（数据）{
$（'.weather'）.html（Math.round（data.main.temp）+'degrees Celcius'）；
});
});
});

为了更好地优化，建议在文件底部添加代码和其他插件。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
        <link rel="stylesheet" href="main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            //input city
            $('#search').click(function(){
                var city = $('#city').val();
                console.log(city);
                //get weather using API and input
                $.getJSON( "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&appid=9334f947893792dcb9b2e2c05ae23eb0", function( data ) {
                    $('.weather').html(Math.round(data.main.temp)+ ' degrees Celcius');
                });
            });
        });
        </script>
    </head>

    <body>
            <div class="jumbotron">
                <p>The weather outside is: </p>
            <div class= "weather">
                <input type="text" placeholder="Fill in your city first." id="city">
                <button id="search">Submit</button>
                <p id="demo"></p>
            </div>

        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
        <link rel="stylesheet" href="main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>

    <body>
                    <div class="jumbotron">
                        <p>The weather outside is: </p>

                        <div class= "weather">
                        <input type="text" placeholder="Fill in your city first." id="city">
                        <button id="search">Submit</button>
                        <p id="demo"></p>
                        </div>

                    </div>
        <script src="js/otherplugins.js"></script>
        <script>
        $(document).ready(function(){
    //input city
    $('#search').click(function(){
        var city = $('#city').val();
        console.log(city);
        //get weather using API and input
        $.getJSON( "http://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&appid=9334f947893792dcb9b2e2c05ae23eb0", function( data ) {
            $('.weather').html(Math.round(data.main.temp)+ ' degrees Celcius');
        });
    });
});
        </script>
    </body>
</html>