JavaScript 实现如何添加动态交互
介绍
Javascript 是与 HTML 和 CSS 并列的 Web 开发三大支柱之一。优秀的 Web 开发人员应该熟悉这三种语言,因为它们都有各自的优势和独特的 Web 内容功能。HTML 代码用于在浏览器上显示文本和媒体;它使网站在浏览器中看起来可读。CSS 描述 HTML 元素及其在浏览器上的显示方式。另一方面,Javascript 用于使网页具有交互性,是一种用于构建 Web 应用程序的标记语言。
可以将所有这些 Web 技术无缝地混合在一起,以创建真正引人入胜的网站。当今 Web 开发的优点在于,大多数现代浏览器都倾向于支持嵌入了 Javascript 代码的 Web 应用程序和交互式页面。因此,甚至不需要额外的插件。用户所要做的就是启用 Javascript,在大多数情况下,默认情况下,浏览器上都会启用 Javascript。
使用和实现 JavaScript 代码的原因
Javascript 是一种面向对象的语言,目前估计有超过 90% 的网站都在使用这种语言。但不要将其与 Java混淆,Java 是一种独立的编程语言,需要在运行前进行编译,并且不是一种脚本语言。任何想要从事严肃的 Web 开发和前端编程的人都应该学习 Javascript。
学习 Javascript 并将其代码添加到标准 HTML 标记中的原因有很多。从交互式按钮到游戏,Javascript 确实可以让网站独一无二,并在众多基于标准 HTML5 和 CMS 构建的网站(通过 Wordpress 或其他模板)中脱颖而出。
当今的网络用户也习惯于直接通过浏览器运行应用程序(称为网络应用)。这些应用程序与必须安装在用户操作系统上并可立即访问的标准程序一样功能齐全。开发具有交互功能的网络应用(例如,用户可以直接输入数据或玩游戏)是 JavaScript 的优势之一。
Mozilla表示:“每当网页不仅仅是显示静态信息供您查看时,很可能就是 JavaScript 代码在后台运行的一个例子。显示及时的内容更新、交互式地图、动画 2D/3D 图形、滚动视频点唱机等 - 您可以肯定,JavaScript 可能参与其中。”
Javascript 实现示例包括您可以添加供用户填写的表单、可交互的地图(可让用户查看到您办公室的距离)、有线元素(如在页面上书写的文字看起来像是手绘的)、用户单击按钮时出现的有趣动画效果以及自定义滚动和热图。Creative Blog 提供了更多有关如何实现 Javascript 以增加 Web 内容的创造力和特色的优秀示例。
为什么要学习 javascript?
Javascript 也非常动态,并且易于实现为标准 HTML 代码。它是一种用纯文本编写的标记语言,就像 HTML 一样,也是一种客户端语言,在运行时不需要编译数据。由于它是一种前端和客户端语言,因此可以直接通过浏览器快速读取代码,而无需通过远程服务器和客户端发送和读取代码。这意味着良好的 Javascript 实现可以提高 Web 开发的速度和效率。
除此之外,Javascript 是一种面向对象的语言。这对于新手或有抱负的开发人员来说非常有用,因为它易于上手和理解。可以使用 javascript 代码描述和定义现实世界中的对象。属性(例如对象的尺寸及其照明或亮度)都可以用 Javascript 代码描述。Javascript 通过原型设计支持继承以及属性和方法。甚至可以在代码中随意实现事件,而代码恰好也封装在定义的对象中。
Markdown 与 HTML
Markdown 是一种比 HTML 更简单的编码语言。它更接近人类的语音或书面文字,即使对于非开发人员来说也很容易理解。下面,我将展示这两种语言在翻译方面的一些主要区别,并介绍现有 HTML 代码文件中的一些 Javascript 集成。我还将这种集成与纯 Javascript 或 .js 文件中的脚本代码进行比较。
Javascript 代码从 HTML 文件转换而来,看起来就像在读一篇文章。出于这个原因,它值得你熟悉一下。下面是一个简短的示例,其中包含一些在 HTML 网站上读取的代码,以 markdown 的形式写在右侧。单击此处代码是一个按钮:
如何在网页上添加 JavaScript 代码
如果要将 Javascript 代码添加到 HTML 文本文件,则必须将其插入到脚本标记中。您可以选择将此脚本代码添加到文本文件中的任何位置,例如或部分中的任何位置。脚本标记定义客户端代码。
下面是我在 HTML txt 文件中的脚本标签内实现 Javascript 代码的示例。它将“Hello World”写入 id=”File” 的 HTML 元素中:
<script>document.getElementById("File").innerHTML = "Hello World";</script>
以下是通过 Andrew Dawidson 转换器以 Markdown 编写的完整版本:
document.write( '<script>document.getElementById(\"File\").innerHTML = \"Hello World\";</script>\n' );
在这里,我将上面的 JavaScript 代码实现到现有的 HTML 文档中。括号之间是包裹JavaScript 代码的 HTML 标签。如果您想向浏览器发出信号,在页面加载之前运行 JavaScript 代码,请将其输入到 head 部分。将其插入 body 部分将与主 HTML 代码一起运行,与页面加载同步。如果您想操作特定内容,因为它会在页面上加载或在页面布局的某个点内运行代码,则将其插入 body 部分很有用。但一般来说,建议您在 head 部分与其他元数据和 CSS 代码一起运行它。
由于 Javascript 代码可以很容易地以标记形式编写,因此非常易于修改。除了将代码输入到标准 HTML 文本文件中之外,还可以创建一个单独的文件,该文件将在多个网页上运行。这节省了将其输入到每个页面的时间。这对于希望以更简单的方式查找或组织代码的开发人员也很有用。由于 Javascript 文件被缓存,页面加载速度也更快。这是通过将 Javascript 代码写入 script.js 文件并在 HTML 文档中引用它来完成的。
值得注意的是,外部.js文件应该用Javascript编写,并且不能包含
免责声明:本内容来源于第三方作者授权、网友推荐或互联网整理,旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有,其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况,请与我们取得联系,我们将尽快进行相关处理与修改。感谢您的理解与支持!
请先 登录后发表评论 ~