生成式人工智能（AIGC）赋能的Web前端开发教学解决方案

一(yī)、引言

近年來(lái)，ChatGPT等生成(chéng)式(shì)人(rén)工智能(néng)技(jì)術(shù)的(de)影响日益显著，众多国内外大语言模型纷纷涌現(xiàn)。在(zài)教(jiào)育领域，AIGC（人(rén)工智能(néng)生成(chéng)内容）技(jì)術(shù)的(de)诞生为教(jiào)育带來(lái)了(le)机遇与挑战，吸引了(le)众多學(xué)者的(de)关注。特别是在(zài)计算机教(jiào)學(xué)领域，已有实证研究探索了(le)AIGC技(jì)術(shù)在(zài)Python程序设计等编程教(jiào)學(xué)中的(de)应用(yòng)。然而，关于AIGC技(jì)術(shù)在(zài)Web前(qián)端开发教(jiào)學(xué)方面的(de)研究尚显不足。因此，我们需要深入探索如何将AIGC技(jì)術(shù)融入Web前(qián)端开发教(jiào)學(xué)，并分析其(qí)对教(jiào)學(xué)的(de)影响及辅助能(néng)力。

二、AIGC賦(fù)能(néng)Web前(qián)端开发教(jiào)學(xué)概述

AIGC技(jì)術(shù)，基(jī)于预训练的(de)大型语言模型，展現(xiàn)出(chū)卓越的(de)语言理解和语境感知(zhī)能(néng)力，能(néng)够通(tōng)过自然语言交互，高效便捷地生成(chéng)编程教(jiào)學(xué)内容。与侧重于编程思维和逻辑分析的(de)程序、算法类课程不同，Web前(qián)端开发课程主要涉及HTML、CSS、JavaScript等技(jì)術(shù)，重点在(zài)于理解布侷(jú)、输入、事件驱动、事件处理、输出(chū)等概唸(niàn)，以(yǐ)及综合运用(yòng)前(qián)端技(jì)術(shù)。教(jiào)學(xué)方法更侧重于项目实践和即时反馈，适合初學(xué)者快速入门并看到學(xué)习成(chéng)果。对于进阶學(xué)习者而言，Web前(qián)端开发还需要融入创意和美學(xué)。引入AIGC技(jì)術(shù)在(zài)Web前(qián)端开发课程中具有三大优势：首先，Web前(qián)端开发内容直观，AIGC技(jì)術(shù)能(néng)快速展示效果，提高學(xué)生的(de)學(xué)习兴趣和效率；其(qí)次，Web前(qián)端开发中存在(zài)大量重复性工作，AIGC技(jì)術(shù)能(néng)有效减少这些工作，让學(xué)生有更多时间专注于解决复杂問(wèn)题和创新；最后，与程序、算法类课程相比，Web前(qián)端开发更注重个性化和创意美學(xué)设计，AIGC技(jì)術(shù)能(néng)提供成(chéng)熟的(de)开发方案、完善的(de)设计建议和代碼(mǎ)生成(chéng)支持。然而，AIGC技(jì)術(shù)的(de)应用(yòng)需要正确的(de)引导，以(yǐ)避免學(xué)习者思路混乱，以(yǐ)及过度依赖、技(jì)術(shù)和道德风险等問(wèn)题。

三、AIGC賦(fù)能(néng)、人(rén)机協(xié)同的(de)Web前(qián)端开发教(jiào)學(xué)模式(shì)

AIGC賦(fù)能(néng)、人(rén)机協(xié)同的(de)Web前(qián)端开发教(jiào)學(xué)模式(shì)指的(de)是在(zài)Web前(qián)端开发课程中，教(jiào)师、學(xué)生和机器三者協(xié)同合作，充分利用(yòng)AIGC技(jì)術(shù)完成(chéng)教(jiào)學(xué)任务。AIGC技(jì)術(shù)在(zài)课前(qián)、课中、课后三个阶段都能(néng)提供支持和创新，为Web前(qián)端开发知(zhī)识体系的(de)教(jiào)學(xué)、多样化教(jiào)學(xué)方法的(de)设计和丰富实践环节的(de)开展提供新的(de)思路和方法。在(zài)这种教(jiào)學(xué)模式(shì)下，教(jiào)师、學(xué)生和机器三者将紧密協(xié)作互动，充分发挥AIGC技(jì)術(shù)的(de)优势，從(cóng)而在(zài)多个學(xué)习层次中极大地影响并改变Web前(qián)端开发的(de)教(jiào)學(xué)模式(shì)。

四、AIGC辅助的(de)Web前(qián)端教(jiào)學(xué)模式(shì)创新设计

AIGC的(de)兴起促使教(jiào)师重新评估并优化其(qí)引导、教(jiào)學(xué)、讲授及评估方式(shì)。在(zài)课前(qián)阶段，教(jiào)师需要精心挑选Web前(qián)端开发的(de)相关案例，并利用(yòng)大型语言模型优化教(jiào)學(xué)提示词模板，以(yǐ)引导學(xué)生自主學(xué)习。课中，教(jiào)师可以(yǐ)结合人(rén)机協(xié)同的(de)教(jiào)學(xué)策略，通(tōng)过大型语言模型进行提問(wèn)与演示，巩固知(zhī)识点，并对學(xué)生的(de)回答给予反馈，引导他们进行深度反思。课后，教(jiào)师可以(yǐ)重新规划考核内容，将提示词學(xué)习和提問(wèn)能(néng)力纳入课程目标，同时利用(yòng)大型语言模型生成(chéng)题目与答案，但(dàn)需注意筛选与修正，确保内容的(de)准确性。

展开全文

學(xué)习者的(de)AIGC辅助學(xué)习可划分为四个层次：被动學(xué)习、主动學(xué)习、建构學(xué)习与交互學(xué)习。在(zài)课前(qián)预习阶段，學(xué)生主要进行被动學(xué)习，通(tōng)过向大型语言模型提問(wèn)，快速掌握(wò)基(jī)础知(zhī)识和扩展内容。课中，學(xué)生进入主动學(xué)习阶段，他们能(néng)够根据课程内容主动向模型提問(wèn)，筛选信息(xī)，并通(tōng)过多轮对话获得答案，提升學(xué)习效率与提問(wèn)技(jì)巧。课后，學(xué)生则进入建构學(xué)习阶段，他们可以(yǐ)与大型语言模型協(xié)同完成(chéng)作业与测试，进一(yī)步整合所學(xué)知(zhī)识，但(dàn)需要对模型的(de)回答进行二次确认与纠正。个人(rén)反思则贯穿课中与课后，學(xué)生可以(yǐ)通(tōng)过不断向模型提問(wèn)，巩固知(zhī)识，推断新知(zhī)识，并对問(wèn)答过程进行总结与反思，從(cóng)而达到交互學(xué)习的(de)层次。

这种人(rén)机協(xié)同的(de)Web前(qián)端开发教(jiào)學(xué)模式(shì)不仅适用(yòng)于该课程，还可推广至其(qí)他编程學(xué)习课程乃至整个计算机专业。Web前(qián)端开发课程的(de)特点使得AIGC的(de)应用(yòng)尤为直观且效果显著。

五、教(jiào)學(xué)模式(shì)应用(yòng)实践与AIGC案例分析

在(zài)实际教(jiào)學(xué)中，Web前(qián)端开发课程的(de)设计從(cóng)HTML和CSS入手，逐步深入到JavaScript编程与框架应用(yòng)，拆解复杂問(wèn)题并系统化解决。基(jī)于已有研究对大型语言模型与人(rén)工智能(néng)在(zài)计算机辅助教(jiào)學(xué)中的(de)功能(néng)总结，我们收集并整理了(le)AIGC賦(fù)能(néng)、人(rén)机協(xié)同教(jiào)學(xué)模式(shì)下师生在(zài)课前(qián)、课中、课后使用(yòng)AIGC辅助教(jiào)學(xué)的(de)应用(yòng)案例。在(zài)这些案例中，AIGC在(zài)知(zhī)识拓展、实例辨析、案例分析、语法练习、代碼(mǎ)编写与纠错等多个场景均展現(xiàn)出(chū)了(le)强大的(de)辅助作用(yòng)。

5.1 知(zhī)识拓展

在(zài)Web前(qián)端开发的(de)教(jiào)學(xué)过程中，學(xué)习者通(tōng)常從(cóng)HTML、CSS到JavaScript的(de)基(jī)础學(xué)习路径入手，这三者构成(chéng)了(le)前(qián)端开发的(de)核心技(jì)術(shù)。大型语言模型能(néng)够辅助學(xué)习者在(zài)概唸(niàn)理解、辨析等方面进行知(zhī)识拓展。

ChatGPT在(zài)回答基(jī)本概唸(niàn)、语法结构和常见元素等基(jī)础問(wèn)题时表現(xiàn)出(chū)色，类似于传统搜索引擎，能(néng)够提供丰富的(de)學(xué)习資(zī)源。但(dàn)由于其(qí)提供的(de)信息(xī)准确性无法完全保证，建议初學(xué)者在(zài)學(xué)习时应结合权威資(zī)料进行参考。

5.2 实例辨析

ChatGPT能(néng)够解答CSS相关問(wèn)题，简要解释CSS规则，并阐述多个规则应用(yòng)于同一(yī)标签时的(de)优先级和顺序。这使得初學(xué)者能(néng)够快速掌握(wò)CSS知(zhī)识，并通(tōng)过复用(yòng)或修改代碼(mǎ)來(lái)验证规则，從(cóng)而巩固基(jī)础知(zhī)识。

5.3 案例分析

下图展示了(le)ChatGPT分析JavaScript变量作用(yòng)域的(de)一(yī)个案例。在(zài)分析过程中，ChatGPT详细解释了(le)侷(jú)部变量和全侷(jú)变量作用(yòng)域的(de)差异，并解释了(le)案例中最后一(yī)行输出(chū)空白行的(de)原因。这表明ChatGPT能(néng)够有效地展示变量概唸(niàn)，并能(néng)通(tōng)过准确的(de)输出(chū)和错误提示功能(néng)帮助學(xué)习者理解案例。

5.4 语法练习

下图提供了(le)一(yī)个由文心一(yī)言生成(chéng)的(de)JavaScript语法练习题的(de)例子。文心一(yī)言能(néng)够有效地整合变量初始化、事件监听器的(de)添(tiān)加以(yǐ)及DOM元素的(de)引用(yòng)和更新，并据此生成(chéng)语法练习题。在(zài)该例子中，文心一(yī)言清晰地描述了(le)JavaScript事件的(de)基(jī)本逻辑，學(xué)生可以(yǐ)通(tōng)过这些练习學(xué)会如何为元素添(tiān)加事件监听器、编写事件处理函数，并在(zài)浏览器中测试自己编写的(de)代碼(mǎ)。这种直观的(de)实践方式(shì)有助于學(xué)生深入理解代碼(mǎ)的(de)运行逻辑，從(cóng)而加深对JavaScript语法的(de)理解。

5.5 代碼(mǎ)编写能(néng)力展示

在(zài)代碼(mǎ)编写能(néng)力方面，ChatGPT和CodeGeeX分别贡献了(le)一(yī)个网页代碼(mǎ)案例，具体如下图所示。

这两个案例均源自课程后期的(de)综合实践环节，充分展示了(le)大型语言模型在(zài)代碼(mǎ)编写方面的(de)成(chéng)熟能(néng)力。例如，ChatGPT提供的(de)代碼(mǎ)示例中，实現(xiàn)了(le)英文单词的(de)添(tiān)加与显示，同时能(néng)够通(tōng)过点击“清空”按钮清除所有内容，这一(yī)过程不仅体現(xiàn)了(le)对中文解释的(de)可见性控制，还综合运用(yòng)了(le)HTML、CSS和JavaScript的(de)基(jī)础知(zhī)识。两段代碼(mǎ)均具备清晰的(de)结构和逻辑，易于理解和修改，充分证明了(le)AIGC在(zài)前(qián)端编程领域对學(xué)习者的(de)有效辅助。值得注意的(de)是，这两个案例的(de)提示语设计得条理清晰，为代碼(mǎ)的(de)正确生成(chéng)奠定了(le)坚实基(jī)础。因此，學(xué)生在(zài)进行综合实践时，应致力于提升提示语的(de)工程水平，以(yǐ)便更好地從(cóng)AIGC技(jì)術(shù)中获益。同时，教(jiào)师在(zài)教(jiào)學(xué)过程中也应引导學(xué)生學(xué)会問(wèn)题拆解，注重培养其(qí)AI素养和利用(yòng)AIGC提問(wèn)的(de)能(néng)力。

5.6 代碼(mǎ)纠错与优化

在(zài)前(qián)端开发的(de)學(xué)习过程中，代碼(mǎ)调试是至关重要的(de)一(yī)环。无论是初學(xué)者还是经验丰富的(de)开发者，都可能(néng)面临逻辑错误、语法错误或页面样式(shì)問(wèn)题等挑战。下图通(tōng)过一(yī)个具体案例展示了(le)文心一(yī)言在(zài)JavaScript中如何定位并修复事件处理函数未(wèi)更新页面的(de)問(wèn)题。

文心一(yī)言首先准确识别了(le)计数器未(wèi)更新的(de)問(wèn)题所在(zài)，然后提供了(le)详细的(de)解决方案和修改后的(de)代碼(mǎ)。这一(yī)实践充分证明了(le)AIGC在(zài)Web前(qián)端开发中的(de)广泛应用(yòng)能(néng)力，包括知(zhī)识拓展、实例辨析、案例分析、语法练习、代碼(mǎ)编写以(yǐ)及代碼(mǎ)纠错等方面。AIGC的(de)便捷易用(yòng)和快速反馈特性有助于教(jiào)师在(zài)课前(qián)、课中和课后优化引导、讲授、教(jiào)學(xué)和考核方式(shì)，從(cóng)而提升教(jiào)學(xué)质量[10]。在(zài)教(jiào)师的(de)引导下，學(xué)生可以(yǐ)充分利用(yòng)AIGC进行持续练习和经验積(jī)累，增强代碼(mǎ)调试能(néng)力，提高开发效率和代碼(mǎ)质量。

需要强调的(de)是，本文所提及的(de)案例应用(yòng)实践均源于Web前(qián)端设计基(jī)础课程，涉及的(de)实践内容尚处于基(jī)础教(jiào)學(xué)阶段。虽然大型语言模型在(zài)浅层次、单个知(zhī)识点的(de)基(jī)础教(jiào)學(xué)中表現(xiàn)出(chū)色，但(dàn)在(zài)处理综合性問(wèn)题时，使用(yòng)者仍需提高提問(wèn)技(jì)巧，恰当拆解問(wèn)题，以(yǐ)便更好地利用(yòng)AIGC技(jì)術(shù)。在(zài)AIGC賦(fù)能(néng)、人(rén)机協(xié)同的(de)Web前(qián)端开发教(jiào)學(xué)模式(shì)下，教(jiào)师应積(jī)极引导學(xué)生合理利用(yòng)AIGC技(jì)術(shù)，培养其(qí)AI素养，并有效规避潜在(zài)风险。