The University of Melbourne的 COMP10003 (Media Computation) 是一门非常有特色的入门级编程课程。与传统的纯终端输出教学不同，它的核心理念是通过“操作媒体（图像、音频、网页）”，让抽象的计算思维和数据结构（如嵌套循环、数组遍历、条件判断）变得极其直观。
针对课程中涉及的 Java 媒体处理 以及 Web 前端（HTML/CSS/JS） 两大核心模块，以下是极为系统且高针对性的教程、参考书与教辅设计方案。
一、 Java 与媒体计算模块 (Media Computation)
这个模块的重点不是企业级的 Java 工程开发，而是利用代码进行像素级操作和视觉呈现。课程通常会使用特定的媒体库或 Processing 环境。
1. 核心教材与参考书 (Textbooks)
-
《Introduction to Computing and Programming in Java: A Multimedia Approach》
-
作者：Mark Guzdial & Barbara Ericson
-
推荐理由：这是“媒体计算”这一教学流派的开山之作。书中详细拆解了如何使用 Java 遍历数组来改变图像像素，非常契合 COMP10003 的底层考点。
-
-
《Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction》
-
作者：Daniel Shiffman
-
推荐理由：如果课程涉及大量可视化算法设计，Processing 是极其优秀的教辅工具。它能将枯燥的 Java 语法与图形绘制完美结合，极大降低理解门槛。
-
2. 优质在线教程
-
The Coding Train (YouTube / Bilibili)：强烈推荐 Daniel Shiffman 的视频教程。其讲解极富感染力，能迅速建立起“代码逻辑 $\rightarrow$ 屏幕视觉”的映射感。
-
Processing 官方文档 (processing.org/tutorials)：提供了精简的图文教程，涵盖坐标系、颜色模型（RGB/HSB）以及像素数组（Pixels Array）的操作。
二、 Web 前端交互模块 (HTML/CSS/JS)
课程的另一部分要求将媒体内容嵌入网页，并利用 JavaScript 实现动态交互。重点在于 DOM 树的理解、基本事件监听和页面布局。
1. 权威文档与交互式闯关
-
MDN Web Docs (Mozilla 开发者网络)：前端领域的标准辞典。教辅中遇到任何关于标签、CSS 属性或 JS 函数（如
document.getElementById）的定义，以此为准。 -
freeCodeCamp：非常适合作为课后闯关练习。它的 HTML5 和 Basic JavaScript 模块可以在线编写代码并即时反馈，免去了初学者配置本地环境的痛苦。
-
W3Schools：其“Try it Yourself”在线编辑器非常适合课堂演示，能快速展示小段代码的实际运行效果。
2. 教辅演示平台
-
CodePen (codepen.io)：非常适合用来制作前端教辅案例。可以提前写好 HTML 骨架和 CSS 样式，只留出核心的 JavaScript 逻辑部分进行填空，有效控制认知负荷。
三、 教辅与作业设计方案 (Teaching Aids & Projects)
在准备教辅材料时，可以设计以下几类“脚手架”式的微型项目。这些项目既强化了算法与数学逻辑，又具有极强的视觉反馈：
1. 图像滤镜矩阵 (Java / 二维数组训练)
-
设计思路：提供一个预置了图片加载功能的 Java 模板。核心任务是编写嵌套的
for循环遍历图片的宽和高，提取每个像素的 RGB 通道。 -
算法植入：通过引入数学加权公式，将彩色像素转化为灰度值。例如，要求在循环体中实现心理学灰度公式：
$$Grayscale = 0.299 \times R + 0.587 \times G + 0.114 \times B$$这能很好地将矩阵遍历、变量赋值与直观的视觉变化结合起来。
2. 物理反弹模拟 (Java / 面向对象与状态更新)
-
设计思路：定义一个包含坐标 $(x, y)$ 和速度向量 $(v_x, v_y)$ 的对象。在主程序的
draw()循环中不断更新坐标并重绘背景。 -
算法植入：利用
if语句检测边界碰撞并反转速度向量（如vx = -vx），这是训练条件分支逻辑的绝佳视觉案例。
3. 交互式多媒体画廊 (HTML/CSS/JS 综合)
-
设计思路：使用 CSS Grid 排版一个照片墙。利用 JS 的
addEventListener为每张图片绑定点击事件。 -
交互植入：点击图片后，不仅在页面中央动态放大显示，同时触发预加载的音频对象播放声音。这一案例完美覆盖了课程要求的 DOM 操作与多媒体融合。