HTML和JavaScript之间的关系.前端开发的基础知识

Question

我主要在企业应用程序的服务器端层(Java EE,Spring框架)工作.

现在,我试图理解(只是理解,而不是掌握)客户端技术.我读过的技术很少(书籍,在线资料):HTML,CSS; 下一个是javascript.

我有困难,如果我创造我们如何能够将所有这些技术和做一个"网页",例如somepage.html,它可以有HTML,CSS,JavaScript(和扩展仍是html的).这就像"混合"各种技术,这怎么可能？

是因为页面最终被浏览器读取,因此混合是可能的.

任何人都可以用简单的语言帮助我澄清这些疑惑吗？

Answer 1

一点理论

它有助于考虑您在浏览器中看到的HTML页面,该页面由三个组件组成:

1. DOM(实际HTML元素)
2. CSS(浏览器使用这些规则并决定如何渲染#1)
3. JavaScript(浏览器理解的编程语言.可以操作#1和#2,也可以做一堆其他动态的东西)

至于你的问题1为什么混合是可能的,你是正确的,这是因为所有三个都在浏览器最终呈现做出你叫什么"页面".

当你从#1>#2>#3开始逐步增强页面时,它会有所帮助.

HTML和CSS 不是编程语言.所以你没有结合任何东西.

• HTML是一组用于描述页面元素的规范.

• CSS是一套规则,用于告诉浏览器如何显示这些元素.

• JavaScript是三者中唯一的编程语言.这用于动态更改页面的行为,显示和交互.

它们中的所有三个都彼此一起使用,以在用户看到的页面上获得所需的行为.

那么浏览器如何使用这三个

当在浏览器中输入/单击URL时,浏览器从服务器请求"内容".服务器通过发送回初始HTML页面来响应,该页面通常包括DOM,CSS(作为链接标记)和JavaScript作为(脚本)标记.

1. 浏览器首先阅读HTML以创建所谓的a content tree.

2. 然后它"查看"CSS并将"应用"CSS content tree并创建所谓的a render tree.这添加了样式信息.

3. 最后它通过layout进程,其中每个HTML元素被分配精确的物理窗口坐标以显示在.

4. 最后,所有内容都被"绘制",您会看到风格化的HTML页面.

5. 浏览器分别在<script>标记中遇到JavaScript解析JavaScript .JavaScript可以添加/删除/修改dom的现有组件,并更改CSS应用于它们的方式.它还可以进行新的网络呼叫.

这是一个描述WebKit浏览器此过程的图表(源代码)

该文章描述了很详细的这个过程中,如果您有兴趣进一步阅读.

文件扩展名

关于为什么扩展的问题#2.html.从技术上讲,.html扩展只是一个来自操作系统文件系统的延续,浏览器并不关心!什么浏览器关心的是所谓的mime-type,通常由Web服务器返回.当浏览器看到特定的哑剧类型时,它们会"被教导"以某种方式行事.一些常见的有text/html或image/png等.

Answer 2

HTML可以通过<script>JavaScript的<link rel="stylesheet">标签和CSS的标签链接到外部资源.浏览器理解这些文件扩展名旨在增强HTML页面.

JavaScript负责您传统上认为的页面代码.您可以通过DOM查询响应HTML标记中的事件(传统上通过类似函数document.getElementById()或像jQuery 这样的外部库来完成).DOM只是浏览器中HTML的表示.

最后,CSS可以通过选择器为标记中的内容设置样式.这些选择器旨在匹配HTML元素,然后对它们应用一些视觉更改.

这就是它放在一起的样子.

HTML

<script src="myjavascript.js"></script>
<link rel="stylesheet" href="mycss.css">
<div id="foo">
   Hello World!
</div>

JavaScript(myjavascript.js)

document.getElementById("foo").addEventListener('click', function () {
    alert('Hey, you clicked the div!');
});

CSS(mycss.css)

#foo {
   color: red;
}