JavaScript 课程 |了解 JavaScript 中的代码结构

上一篇： JavaScript 课程 |用 JavaScript 打印 Hello World
将 JavaScript 插入网页很像插入任何其他 HTML 内容。用于在 HTML 中添加 JavaScript 的标记是。标签包围的代码称为脚本博客。
'type' 属性是

如何编写、运行和保存代码

方法一：

创建一个 html 文件 (.htm) 扩展名并在“脚本”标签内编写 javascript 代码
然后只需在浏览器中加载 HTML 文件

方法二：

使用 .js 扩展名创建一个单独的 javascript 文件 (.js)。在里面写下你的代码。
现在使用脚本标签将这个 js 文件与 HTML 文档链接起来：

在身体或头部。

让我们借助一个简单的 javascript 示例来了解代码结构，其中仅使用 javascript 会使块消失。
代码结构：

index.html
styles.css
script.js

索引.html

html



 

    
    
    
    
    
    Button Vanisher

 

    
        
          How many times were you frustrated while looking out for a
          good collection of programming/algorithm/interview questions?
          What did you expect and what did you get? This portal has
          been created to provide well written, well thought and
          well-explained solutions for selected questions.
          Geeksforgeeks is the one stop solution to all
          your coding problems! Join us so that we can shape
          your future.

css

#plain {
    border: 2px solid black;
    max-width: 200px;
    height: 300px;
    margin: 0 auto;
    display: block;
}
 
a {
    display: block;
}

javascript

// javascript function to change the content of the
 
function toggle(id) {
    let button = document.getElementById(id);
    if (button.style.display == 'block') {
        button.style.display = 'none';
    } else {
        button.style.display = 'block';
    }
}

上面的 HTML 代码包含一个简单的 div 元素，它被包裹在一个锚标记（链接）中，因此每当我们单击 div 元素时，javascript 代码都会起作用。在 'div' 元素内有一些随机文本。在脚本标签内，我们将保存为“script.js”的 javascript 文件与 HTML 文档链接起来。 CSS文件也被链接了。
样式.css

css

#plain {
    border: 2px solid black;
    max-width: 200px;
    height: 300px;
    margin: 0 auto;
    display: block;
}
 
a {
    display: block;
}

上面的 CSS 代码只针对 ID 为 'plain' 的两个元素 'a' 和 'div' 元素。
脚本.js

javascript

// javascript function to change the content of the
 
function toggle(id) {
    let button = document.getElementById(id);
    if (button.style.display == 'block') {
        button.style.display = 'none';
    } else {
        button.style.display = 'block';
    }
}

当我们单击“div”按钮时，将调用上面的 Javascript 代码，因为我们已将它们与“a”标签以及“onclick='toggle(plain)”链接在一起。在函数内部，我们传递“div”元素的“ID”，然后使用 getElementByID 方法从“DOM”访问元素，然后是一个简单的 if-else 条件，用于检查“div”是否为“block”类型' 然后将显示更改为无，否则将其更改为显示块。
输出：（在单击 div 上的任意位置之前）

输出：（单击 div 上的任意位置后）

从代码中学习

页面被称为文档，用于在网页中编写脚本。
可以通过编写文档后跟一个点，再跟属性名称来引用文档的属性。该文档有很多属性。
在出现。

上面的代码是一个很好的例子，说明了我们应该如何创建一个目录，如何将不同类型的代码文件相互链接，以及如何编写简单而有效的代码。

支持的浏览器：

谷歌浏览器
微软边缘
火狐
歌剧
苹果浏览器

下一篇： JavaScript 课程 | JavaScript 中的变量