如何将JavaScript添加到html？_Javascript_Html

如何将JavaScript添加到html？

javascript html

如何将JavaScript添加到html？,javascript,html,Javascript,Html,我正在从codeacademy学习JavaScript&我想把一个JavaScript示例放到一个html文档中。我该怎么办？这是javascript： var myName = "Codecademy"; var red = [0, 100, 63]; var orange = [40, 100, 60]; var green = [75, 100, 40]; var blue = [196, 77, 55]; var purple = [280, 50, 60]; var letterCol

我正在从codeacademy学习JavaScript&我想把一个JavaScript示例放到一个html文档中。我该怎么办？这是javascript：

var myName = "Codecademy";
var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var letterColors = [red, orange, green, blue, purple];

drawName(myName, letterColors);

if(10 < 3)
{
    bubbleShape = 'square';
}
else
{
    bubbleShape = 'circle';
}

    bounceBubbles();

var myName=“Codecademy”；
var red=[010063]；
var orange=[40100,60]；
绿色变量=[7510040]；
var blue=[196,77,55]；
紫色变量=[280,50,60]；
var letterColors=[红色、橙色、绿色、蓝色、紫色]；
drawName（我的姓名、字母颜色）；
如果（10<3）
{
泡泡形状='正方形'；
}
其他的
{
泡泡形状='圆形'；
}
弹跳气泡（）；

只需将代码包装在

元素中即可

<script type="text/javascript">
//your code here
</script>


//你的代码在这里

您使用

标记：

<html>
<head>
<script>
var myName = "Codecademy";
var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var letterColors = [red, orange, green, blue, purple];

drawName(myName, letterColors);

if(10 < 3)
{
    bubbleShape = 'square';
}
else
{
    bubbleShape = 'circle';
}

    bounceBubbles();
</script>
</head>
<body>
<!-- Put your HTML codes here -->
</body>
</html>


var myName=“Codecademy”；
var red=[010063]；
var orange=[40100,60]；
绿色变量=[7510040]；
var blue=[196,77,55]；
紫色变量=[280,50,60]；
var letterColors=[红色、橙色、绿色、蓝色、紫色]；
drawName（我的姓名、字母颜色）；
如果（10<3）
{
泡泡形状='正方形'；
}
其他的
{
泡泡形状='圆形'；
}
弹跳气泡（）；

在页面底部用脚本标记换行

<script type="text/javascript">
  //put script in here
</script>


//把脚本放在这里


我的页面
var myName=“Codecademy”；
var red=[010063]；
var orange=[40100,60]；
绿色变量=[7510040]；
var blue=[196,77,55]；
紫色变量=[280,50,60]；
var letterColors=[红色、橙色、绿色、蓝色、紫色]；
drawName（我的姓名、字母颜色）；
如果（10<3）
{
泡泡形状='正方形'；
}
其他的
{
泡泡形状='圆形'；
}
弹跳气泡（）；

内联脚本可以放在html文档的标题部分：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            var myName = "Codecademy";
            var red = [0, 100, 63];
            var orange = [40, 100, 60];
            var green = [75, 100, 40];
            var blue = [196, 77, 55];
            var purple = [280, 50, 60];
            var letterColors = [red, orange, green, blue, purple];

            drawName(myName, letterColors);

            if(10 < 3)
            {
                bubbleShape = 'square';
            }
            else
            {
                bubbleShape = 'circle';
            }

            bounceBubbles();
       </script>
</head>
<body>
    Body content goes here...
</body>


var myName=“Codecademy”；
var red=[010063]；
var orange=[40100,60]；
绿色变量=[7510040]；
var blue=[196,77,55]；
紫色变量=[280,50,60]；
var letterColors=[红色、橙色、绿色、蓝色、紫色]；
drawName（我的姓名、字母颜色）；
如果（10<3）
{
泡泡形状='正方形'；
}
其他的
{
泡泡形状='圆形'；
}
弹跳气泡（）；
身体内容在这里。。。

用

标记将其包装起来。在HTML5中，

type

属性是可选的。

有一些方法可以做到这一点。但只有一种方法可以做到“正确”。第一个是将javascript代码放入html的头部部分，如：

<html>
    <head>
    <script type="text/javascript">
        // your code here
    </script>
    </head>
    <body>
    </body>
</html>


//你的代码在这里

这是一个好方法，但不是最好的（稍后我会解释原因）。现在让我们换个角度来看，这还不是最好的：

<html>
    <head>
    </head>
    <body>
        <p>paragraph</p>
        <script type="text/javascript">
            // your code here
        </script>
    </body>
</html>


段落
//你的代码在这里

它工作正常，但不推荐使用

第三种也是最好的方法：

<html>
    <head>
    <script type="text/javascript" src="path/to/your/js/file.js"></script>
    </head>
    <body>
    </body>
</html>

您可以直接从外部文件加载javascript代码，这是最好的方法，因为您的代码是按顺序排列的，有意义的，并且是分开的。javascript代码是自上而下读取的，就像html一样。第二种方法通常用于影响视图上已绘制的元素。但是你可以用三种方法做同样的事情。最好的？最干净有序的方式。

如果脚本引用DOM元素，这将确保它们存在，因此您不需要将其包装在

窗口中。onload

函数。对不起，我应该澄清一下。是-确保加载页面，然后运行脚本。这是我编写/使用代码的习惯。根据JQuery和Google的设计建议，我使用document.ready函数。。。对我来说似乎是合法的。@simonadcock，因为正如我在帖子中所说的，代码应该有序、干净、有意义。所有的方法都可以接受谢谢你提供的所有方法javascript的路径正确吗？在navigator中查看源代码并确保已加载。此外，你有很好的实用程序，喜欢测试你的前端代码，我必须记住这个链接。路径不正确，现在可以了

<html>
    <head>
    <script type="text/javascript" src="path/to/your/js/file.js"></script>
    </head>
    <body>
    </body>
</html>