故事情节为初学者电子学习TechTalk:第1部分
Sergey Tarasov / Shutterstock.com

如果我使用铰接式故事情节以进行电子学车,我需要知道JavaScript吗?

前一天,我很高兴地与Devlin Peck聊天,我可以通过使用JavaScript [1]来推动铰接故事情节的边界。讨论是初学者的意思。没什么技术。通过对话,我们探讨了某人将从学习JavaScript以及故事情节中受益的原因。我收到了关于这个主题的评论和问题,并出现了模式。

无论您是使用JavaScript还是不在电子教学中(不仅仅是在故事情节中),你都需要一些基本面。这是一个两件式文章,适用于电子教学的技术方面的人。

这篇文章是我的吗?

本文介绍了在跳入JavaScript之前所需的基本原理,甚至只是您发表的电子学习课程的基本故障排除。您可以快速决定本文是否适合您。如果您在电子学习的背景下了解这些问题的答案,则为本文太提升了:

  • HTTP,HTTPS,SSL和TSL之间有什么区别?
  • HTML,CSS和JavaScript如何一起工作以生成您看到的网页?
  • 如何使用浏览器的控制台检查所有文件是否已正确下载?
  • 您如何检查出版课程的故障排除时出错并警告?
  • 故事情节球员是什么?它是如何与JavaScript通信的?
  • 如何从Web浏览器中获取和设置故事情节变量?

浏览器故障排除

您发布了一个课程,当您尝试查看它时,它是空白的。没有错误消息。没有什么。只是空白。它不起作用。你做什么工作?

要解决此问题,您需要将罩打开并窥视世界上最常见的应用程序之一:您的Internet浏览器。当您在浏览器中键入URL时,您希望立即查看特定站点的网页(或者如果您在某些滞后后有速度较慢)。你知道你看到的不是这个特定网站上的页面吗?

让我解释:

  1. 您输入URL,让我们说https://www.rabbitorg.com,这是我的博客。
  2. 如果您的浏览器连接到Internet,它将尝试的第一件事是找出属于www.rabbitoreg.com的“IP地址”。互联网上有服务器刚刚这样做。这就像根据他们的名字找到你朋友的地址(假设它是独一无二的)。为什么我们需要URL地址和幕后的IP地址?它们是实用的,因为您可以保留一个网址,如www.rabbitorg.com,并更改实际服务器,而不会因用户中断。例如,您可以从Hostgator移动到BlueHost。你的观众永远不会注意到。与此同时,很难记住并将一堆数字标记为URL。
  3. 找到IP地址后,浏览器“ping”拥有此IP地址的Web服务器。这就像中断有人想要在该服务器上看到此特定页面的消息。
  4. 然后服务器检查此页面是否存在。如果它确实,它会检查是否有人访问它或是否限制某些用户。如果是公共,那么它将向浏览器开始为字节服务。就好像是“嘿,这是所有信息,走到一起。”
  5. 然后,浏览器接收这些“数据包”的信息,并解释它们中的内容。(浏览器和服务器可以相互理解的原因是他们同意他们使用的语言,他们通过的沟通以及它们的端口或频道。这里是您进入此内容的更多信息[2]。)
  6. 一旦浏览器接收初始数据包并在本地将它们放在一起(这是您的HTML页面),它就开始解释HTML页面。该页面可以告诉浏览器来获取更多文件,例如JavaScript文件,图形,CSS文件,用于颜色和布局,外部数据等。
  7. 一旦加载了所有文件,浏览器还会在页面上执行javascript代码。
  8. 当所有人都说并完成后,您可以在浏览器中看到页面。
  9. 本地浏览器和Internet上的Web服务器之间的所有此类通信都可以广泛打开。从字面上,如果通信未加密,任何人都可以听到您正在做的事情。有时没关系。但是,当您与您的银行交谈时,您可能不希望世界看到这一点。这就是为什么“安全”通信很重要。安全通信意味着所有信息都在浏览器和Web服务器之间加密。它只可以在HTTPS协议(而不是HTTP)上发生。关于SSL / TLS [3]等等,还有很多东西要了解这一点。

这里的几个基本要点:页面看起来如何取决于您的浏览器,因为服务器只发送信息,但在您的浏览器中本地发生“渲染”和解释。这就是为什么它是一个噩梦,有时候是用于刷新开发人员,以在Chrome,Firefox,Opera,Safari中测试某些东西,即(安息吧),边缘等。更不用说每个这些浏览器可能在不同的操作系统上运行不同的版本。。

浏览器故障排除:现在是什么?

伟大的故事,但我该怎么办?

好问题。这整个“握手”和信息交换在今天的世界中发生得如此之快,通常可以立即出现页面。但是,所有浏览器都为您提供了一种监控和调试问题的方法,它们只是隐藏在业余爱好者。

在Chrome中,您可以通过快捷方式Ctrl + Shift + I(或...更多→开发人员工具)打开开发人员窗口。这将是你的朋友!即使你永远不使用JavaScript,掌握开发人员窗口也可以解决你的一堆头痛。

浏览器中的HTML,CSS和JavaScript

在网页的上下文中,您可以听到很多:HTML,CSS和JavaScript三个术语。要简化,请将HTML视为要显示的内容。它是一种标记语言,您可以看到您是否右键单击任何页面并选择查看页面源代码。CSS确定页面的外观:布局,颜色,样式等。它通常在页面加载的单独文件中。如今,您可以真正的幻想事物,例如具有纯CSS的动画,没有任何JavaScript [4]。最后,可以操纵页面的JavaScript提供交互,隐藏和显示元素,计算值,句柄形式等。由于JavaScript已经长时间使用了,并且通常存在框架(Vue,Angular,React等)。)为特定用例创建[5]。框架就像一堆预构建的组件,这样你就不会从头开始。

vanilla javascript.

开箱即用,不使用任何其他框架,所有浏览器都可以了解JavaScript。这是JavaScript的普通版本,我们经常被称为vanilla javascript。文章中的例子是vanilla javascript。

Chrome中的元素,控制台和网络选项卡

让我们从网络选项卡开始。“网络”选项卡显示浏览器发送或接收的所有文件和比例。我们称之为网络流量。留在此网络选项卡上并刷新页面(F5)。你会在实时看到的速度是如何下载的。

此页面上最重要的信息之一是每个项目的状态。这是第二列,文件名的名称。这是你的浏览器可能会询问Web服务器数千个单独的物品。对于每个项目,服务器确认带有状态号的询问。代码200意味着一切都可以。

(你知道Google有一个用于Chrome的应用程序是否叫做OK 200?它被称为OK 200的原因是200是代码Web服务器如果没有任何问题,则代码Web服务器发送。)

其他众所周知的数字:

  • 404 - Unkown.
    当浏览器请求Web服务器上不存在的项目时,会发生这种情况。
  • 401 - 禁止
    在这种情况下,浏览器进行了有效的请求,但是WebServer拒绝提供信息。这可能是因为用户未登录或登录,但不具有查看项目的权限。
  • 500内部服务器错误
    那很糟。我的意思是非常糟糕,因为它意味着“未知原因”导致服务器上的问题。浏览器无法解决。

有关其他任何事情,请查看此项列表[4]。

所以,回到原始问题:没有错误,只有空白页。你做什么工作?打开“开发人员窗口”,转到“网络”选项卡,然后刷新页面。您可能会看到某些文件(通常是红色)的问题,具有错误代码。那些可能是罪魁祸首。

控制台标签

控制台选项卡是您的Buddy,用于初始网络选项卡之外的所有故障排除。即使所有文件都已加载罚款,您也可以与它们有很多问题。事实上,控制台标签是您将花费大部分侦探工作的地方。对于启动器,控制台选项卡显示网页的错误和警告。其中一些是非至关重要的,其他人可以打破整个页面。

小费:如果您与客户合作,他们报告“它不起作用”的错误(这是基本上无用的信息),请他们这样做。打开他们的开发人员窗口,打开选项卡并拍摄他们所看到的屏幕截图。这是一个更好的出发点,而不是“它不起作用”

常见的罪魁祸首:故事情节中的嵌入对象

一个问题我经常得到关于嵌入式Web对象没有在故事情节中出现。当您发布您的课程时,故事情节会尝试在iframe中显示您的嵌入对象(将是一个站点)。iframe就像浏览器中的浏览器。它看起来像网页的一部分,但实际上,它与窗口中的窗口完全独立。

控制台我告诉别人看的第一件事。您可以在控制台中看到网站在iframe中“拒绝显示”。它是控制台中的红色错误。例如,如果您尝试将Google嵌入为Web对象,因此人们可以搜索,它会拒绝显示。(除非Web服务器本身专门允许您嵌入网站,否则您无法对此做任何事情。)如果您的已发布的课程在HTTP网站上,则会发生同样的事情,并且您正在尝试从HTTPS页面加载另一个站点。

控制台说javascript

控制台的其他实际使用是它会讲JavaScript。这意味着您不需要任何幻想站点某处来测试简单的命令。您可以在控制台中执行此操作。

如果您输入警报(“Hello World!”)并按Enter键,弹出消息显示。如果要在控制台本身中显示此消息:console.log(“Hello World!”),这将在控制台中显示相同的消息。嗯,那种无用的东西。同意。“你好世界”主要只是学习新的编程语言时的第一步。但它将是一个救星故事情节和与玩家的沟通。

故事情节播放器是什么?

重要的是要了解故事情节课程如何在发布时在浏览器中运行。故事情节使用他们称之为浏览器内的播放器。该玩家负责知道要显示的内容,处理变量,观看触发器等。此播放器还从外部“隐藏”故事情节变量。阅读或写故事情节变量的唯一方法是通过播放器。对于发布的课程内的任何变更,它是一种看门人。

这意味着什么是JavaScript,浏览器本身理解的语言不在播放器内。它仅在播放器之外仅适用于浏览器。故事情节变量位于播放器内。要访问故事情节变量,Javascript需要帮助。幸运的是,玩家愿意在外界和内部故事情节变量之间演奏“信使”。

要在控制台中显示Storyline变量的值,请尝试此命令(假设您有一个名为storyline变量变量名):

console.log(getPlayer()。getvar(“variableName”)))

让我们打破这个JavaScript代码:

console.log(“消息”)在括号中显示任何东西之前,你学到了。

getPlayer()是故事情节拥有的函数。函数就像是一个经常执行的程序,它是一个特定的东西。在这种情况下,它返回给我们与故事情节进行通信的播放器。除非它是您在浏览器中查看的故事情节已发布项目,否则您将无法使用此功能。getPlayer()返回一个对象,允许您通过名称设置和获取变量。现在你有球员的注意力,它会让你设置或获得变量。

这 ”。”(点)getPlayer()。getvar(“variablename”)是访问GetPlayer()内的getVar()函数的标准表示符。您不能只在控制台中键入getVar(“variableName”)。它不会被识别,因为它仅在玩家内有效。

要设置故事情节变量,请使用:

getPlayer()。setvar(“variableName”,“值”)

使用setVar(),您需要讲述故事情节您设置的变量是什么值。根据变量的类型,此命令可能看起来不同:

getPlayer()。setvar(“年龄”,21)

getPlayer()。setvar(“名称”,“zsolt”)

getPlayer()。setvar(“非常聪明”,false)

这是否意味着任何人都可以从他们的浏览器中改变故事情节变量?

是的,您可以从控制台中更改故事情节变量。是的,任何人都可以这样做。只要用户知道变量的名称,他们就可以从浏览器中设置它。所以,下次你命名你的变量你可能想要比使用更复杂分数,例如。

小费:没有办法列出播放器具有的所有变量,因此用户必须知道变量的名称。但是,javascript可以操纵你的课程。然而,这更糟糕了!如果您使用的是SCORM用户可以简单地从控制台中发送一些代码,并且您的LMS标记为100%的分数。(它不适用于所有课程,但是的,这是多么脆弱的是一个简单的通过/失败。)

上一个单词在getPlayer()上:由于我们使用的代码通常有几行,因此每次键入GetPlayer()都很麻烦。它还使得代码不太可读。这就是为什么你经常在JavaScript中看到我们首先将GetPlayer()分配给JavaScript变量,然后使用来自那里的变量:

让玩家= getPlayer();

console.log(player.getvar(“年龄”))

- > 21.

Playervar(“年龄”,100)

console.log(player.getvar(“年龄”))

- > 100.

JavaScript和故事情节变量

在这种情况下,“播放器”是JavaScript变量。只要您一直使用它,我们可以命名为foo或junglegym。JavaScript变量与故事情节变量不同。请记住,玩家让所有内心都能从世界隔离。JavaScript变量就像Storyline变量,但有更多类型的数字,文本和布尔值。我们将介绍本文系列的第二部分中的变量。

小费:请注意变量命名约定中的较低和大写字母。变量名称在JavaScript中区分大小写。如果您的故事情节变量称为年龄,但您发出命令Player.Setvar(“年龄”,21)它不会起作用,因为即使故事情节变量不区分大小写,javascript中的“年龄”和“年龄”是两个不同的变量。在JavaScript中,您可以同时拥有两个不同的变量,如年龄和年龄。故事情节不会让您创建年龄,如果已有年龄变量,因为它不区分大小写。

高级球员动作

现在你知道如何获得和设置变量,这是您的最终挑战。假设您在故事情节中有一个“age”变量,运行此代码后的控制台输出将是什么?为什么?

让玩家= getPlayer();

Playervar(“年龄”,21);

console.log(player.setvar(“age”,player.getvar(“年龄”)+ 1));

让Ads = Player.getvar(“年龄”);

console.log(年龄);

答案正在进行本文系列的第2部分。

结论

故障排除任何HTML发布的课程应以开发人员窗口开头。检查控制台中的错误,检查网络红线(除OK 200以外)。单个错误可以打破整个课程。使用控制台的另一个优点是它清除页面的缓存(如果正确设置)。由于浏览器正在使用缓存数据,仍然存在徘徊。

使用控制台与故事情节内的变量交互。例如,当您正在进行质量保证时,这是有用的,并且您需要解锁某些事情而不通过活动。您只需翻转任何变量故事情节即可作为解锁幻灯片或活动的触发器。

最后,您可以使用故事情节的JavaScript触发将消息发送到控制台。当您在故事情节中有复杂的逻辑和大量变量时,这是一个救生员。您可以在设计流程中添加JavaScript触发器,以便在控制台中更新您的工作方式。如果您打算了解有关JavaScript的更多信息,请查看这些推荐的课程[6]。

最终提示:何时使用警报()相对consol.log()?警报暂停浏览器中的所有活动,并显示弹出消息。console.log将消息写入控制台,但从不打扰您的代码。哪一个用于何时使用?我建议使用的唯一一次警报()是你想停止一切。这是有用的,例如,当变量变化时,当您在控制台中看到结果时变化时,为时已晚。您可以添加分步警报()命令查看它们是如何更改的。请注意,您可以一次只有一个警报弹出窗口。

参考:

[1]通过JavaScript FT超越故事情节。Zsolt Olah

[2]TCP / IP端口和套接字解释

[3]什么是SSL,TLS?以及此加密协议如何运作

[4]150+ CSS动画和效果的惊人示例

[5]基于JavaScript的Web框架的比较

[6]2021年在线网上课程,教程和认证

关闭
订阅时事通讯订阅时事通讯