• 前端入门之深入了解JavaScript的运行原理和术语


    如果您正在考虑全面系统学习JavaScript 的话!那么在开始之前了解一些有关这种编程语言的一般知识会很有帮助。本期目标是带你了解JavaScript的整体运行原理和专业术语背后!

     

     

    高层次定义 JavaScript

    JavaScript 是一种编程语言,可让开发人员在网页上实现复杂的操作。除了静态信息之外, 网站上所有绝大部分的内容都是JavaScript呈现的,例如滚动视频点唱机、动画图形、交互式地图和内容更新。

    JavaScript 建立在CSS 和 HTML 事实上,它们本质上是网页底层,从 HTML 开始,然后是用于样式的 CSS 和用于动态行为的 JavaScript。

    回顾一下,HTML 是一种定义段落并提供结构的标记语言,而 CSS 包含样式规则并将它们应用于 HTML。

    了解编译代码与解释代码

    JavaScript是一种轻量级的解释型编程语言。当您使用解释型语言时,无需在浏览器运行之前转换代码。相反,在代码从文档的顶部到底部运行后,您将立即获得结果。

    相比之下,编译语言需要在计算机运行之前编译或转换为另一种形式。一个例子是 C++,因为它必须被编译成计算机运行的汇编语言。

    了解客户端与服务器端代码

    JavaScript也非常通用,可用于服务器端和客户端代码。服务器端代码在服务器中运行,结果下载并显示在浏览器中。或者,客户端代码是在计算机上运行的;当您访问一个网站时,您的浏览器会下载客户端代码,然后运行并显示它。

     

     

     

    了解动态与静态代码

    最后,JavaScript用于客户端和服务器端的动态代码,指的是网页能够根据情况显示各种显示,以及在必要时生成新内容的能力。

    虽然静态代码始终显示相同的内容,但动态代码会实时更新内容。

    对于客户端代码,JavaScript 在浏览器中生成新内容。例如,创建一个 HTML 表格,用来自服务器的数据填充它并在网页上显示它。使用服务器端代码,可以在服务器中创建新内容,例如从现有数据库中获取数据。

    探索 JavaScript 能做什么

    JavaScript的核心元素可以处理一系列任务和功能,其中最常见的之一是将值存储在变量中。例如,要求用户输入他们的名字,然后将其存储在一个名为“name”的变量中。

    JavaScript 还可以对字符串或文本片段执行操作,以及运行代码作为对特定网页事件的响应,例如确定按钮是否被点击的“点击”事件,并在它被点击时运行代码。

    API接口

    为了获得更多功能,应用程序编程接口 (API)构建在核心 JavaScript 语言之上,让您能够以非凡的方式使用JavaScript 代码。将 API 视为提供预制的代码构建块,让您创建和实现一个原本证明具有挑战性的程序。简而言之,无需从头开始编写代码。

    API 通常通过浏览器或第三方提供。浏览器 API 是 Web 浏览器的一部分,可以执行复杂的操作,这些操作在周围的计算机环境中很有用或暴露数据。示例包括可以创建 3D 或 2D 动画图形的“WebGL”和“Canvas”API;检索地理信息以补充您的 JavaScript 的“地理定位 API”;以及允许操作 CSS 和 HTML 的文档对象模型 (DOM) API。还有视频和音频浏览器 API。

    第三方 API 通常会将其信息和代码放到网上,但它们不会自动内置到您的浏览器中。示例包括OpenStreetMap API、Google Maps API和Twitter API、微信 API。前者让您可以做一些事情,例如在您的网站上嵌入自定义地图,而后者可以让您显示您最近的社交媒体活动或执行类似的操作。

    当然,这只是各种浏览器和第三方 API 的一小部分示例。

    使用 JavaScript 的浏览器安全性

    每当您打开一个新的浏览器选项卡时,它都会打开一个独特的执行环境来运行代码,因此一个选项卡的内容不会影响其他选项卡的内容。从安全的角度来看,这使得从网站窃取代码变得更加困难。JavaScript 培训可能会涵盖更高级的流程,例如在选项卡之间安全地发送数据和代码。

    当 JavaScript 在页面上运行时

    当您加载网站时,代码会在执行环境中运行。代码将是HTML、CSS 和 JavaScript,而执行环境是浏览器选项卡。在执行 JavaScript 之前,CSS和 HTML 必须加载到页面上。

    换句话说,页面的样式、结构和内容在 JavaScript 开始运行之前就已经确定了。当 JavaScript 动态修改 CSS 和 HTML 以更新用户界面时,这种操作顺序有助于减少错误。

     

    JavaScript 运行顺序

    JavaScript 的运行顺序很简单:它按顺序运行,从顶部开始向下运行。虽然这可能是您所期望的,但这也意味着您需要注意放置代码的顺序,在代码中比实际需要的更早定义对象。

    为避免任何错误,请务必在引用之前定义对象。

    添加 JavaScript

    与 CSS 类似,有一系列方法可用于将 JavaScript 添加到您的页面。CSS 依赖于<style> 元素和样式表,而 JavaScript 使用<script>元素。

    内部 JavaScript

    要应用内部 JavaScript,请确保您拥有要添加的 JavaScript 的本地副本。在文本编辑器和浏览器中打开文件。HTML 应该开发一个带有可点击按钮的简单网页。在文本编辑器中输入:

    它应该在</head>标记之前。在上述代码的相关部分添加您的 JavaScript(在“JavaScript 到这里”下方)。保存文件并刷新浏览器以在下面生成一个新段落。

    外部 JavaScript

    您还可以将 JavaScript 放在外部文件中,这样您就可以在多个 HTML 文件中重复使用相同的代码,并通过删除脚本部分来更轻松地阅读 HTML。首先在包含 HTML 文件的同一目录中创建一个文件,并将其标记为script.js或类似的东西——关键组件是.js文件扩展名,它指的是 JavaScript。

    将当前代码中的<script>元素替换为:

    在您的script.js文件中添加您的 JavaScript 代码,保存它然后刷新浏览器以产生与使用内部 JavaScript 相同的结果。

     

    避免内联 JavaScript 处理程序

    有时,您可能会在 HTML 代码中找到 JavaScript 代码,如下所示:

    它具有与上述示例相同的功能,但有一个内联的“onclick”处理程序,当您单击 <button> 时会运行该函数。

    虽然这会产生类似的结果,但不要对您的 JavaScript 执行此操作。使用此方法需要您在每个按钮上都包含 onclick=”createParagraph()”,因此效率非常低。

    使用 JavaScript 加载脚本

    所有 HTML 都按出现的顺序加载,因此如果您的 JavaScript 在相关 HTML 之前最终加载和解析,则代码将无法运行。

    为了解决这个问题,程序员有时会添加结构。例如:

    分别用于内部和外部 JavaScript。

    JavaScript 的老式解决方案是简单地将脚本元素放在</body>标记之前,以确保它在所有 HTML 被解析后加载。

    这两种解决方案的问题在于,在加载HTML DOM之前,您无法从 JavaScript 加载和解析脚本。如果网站很大并且有大量的 JavaScript,这会大大降低网站的速度。

     

    另一种方法是使用异步和延迟。异步脚本下载脚本,但是它们不会阻止页面呈现,而是在脚本完成下载后执行。异步脚本不能保证以任何顺序运行或阻止页面上的其他元素显示,如果页面上的每个 JavaScript 脚本都是独立的,这是理想的选择。或者,defer按出现的顺序运行 JavaScript 脚本,并在下载内容和脚本时执行它们,非常适合需要等待解析以加载脚本的情况。

  • 相关阅读:
    指令汇B新闻客户端开发(三) 下拉刷新
    安卓消息推送解决方案
    java常用的7大排序算法汇总
    内存溢出的解决方案
    指令汇B新闻客户端开发(二) 主页面布局
    指令汇B新闻客户端开发(一) 新手引导页开发
    2015最流行的Android组件、工具、框架大全
    安卓开发过程中空指针的问题Java.lang.NullPointerException
    闪屏页面开发遇到的问题you need to use a theme.appcompat theme (or descendant)
    8、杂散性问题
  • 原文地址:https://www.cnblogs.com/icodingedu/p/16228254.html
Copyright © 2020-2023  润新知