This repository holds lecture notes for the Web Project side of Visual Design and Web Project, a module in the Department of Film, Media, and Cultural Studies at Birkbeck, University of London. The first four sessions are dedicated to programming with vanilla JavaScript, and the last three cover the basics of making web applications with the JavaScript framework Vue.js.
You can download and run demo files in this repository. See the steps for installation.
We have one main textbook for programming concepts and vanilla JavaScript: Marijn Haverbeke, Eloquent JavaScript: A Modern Introduction to Programming (EJS), third edition, 2018, https://eloquentjavascript.net/.
For the Vue.js JavaScript framework, we will rely mainly on the official documentation at vuejs.org.
The first JavaScript session on setup, values, and data types can be found in the repository for last term.
Students will be able to do the following with JavaScript:
- Assign and re-assign values to variables with appropriate declarations
- Write conditional statements to control program logic
- Define and call functions to reuse code
- EJS chapters 2 & 3
statements,
;, variables,=,let,const,var
conditionals,
if,else,while,{}, block scope
functions,
function,return,{}, function scope
Students will be able to do the following with JavaScript:
- Describe the characteristics of JavaScript arrays
- Form, mutate, and read data in arrays
- Rerun code on each item in an array or string using iteration
- Describe the characteristics of JavaScript objects and classes
- Write class definitions and object methods
- Access object properties and run object methods
- EJS chapter 4
- EJS chapter 6
arrays,
[], indexing,slice,length,concat,push,pop, mutability
indexing,
slice,length, newlines,\n,trim, string interpolation, backticks,$,{,},split,join
iteration,
for...of,for
objects, properties, methods, classes,
class, inheritance,constructor,new, maps,Map
Students will be able to do the following with JavaScript:
- Define the DOM
- Write JavaScript that reads and mutates the DOM
- Run code when users perform actions on the DOM
- Catch bugs with console logging, type checking, and strict mode
- Handle errors and exceptions
- EJS chapters 14 & 15
- EJS chapters 8, 10, 11 & 13
Document Object Model (DOM),
document,getElementById,getElementsByTagName,getElementsByClassName,HTMLCollection,Element,querySelector,querySelectorAll,NodeList,Node, live and static objects
modifying the DOM, events,
addEventListener,click, callbacks
strict mode, exceptions, errors,
throw,try,catch
Students will be able to do the following with JavaScript:
- Describe the characteristics of JSON and CSV data formats
- Get data from hosted files and parse it for use in a program
- Make calls to a REST API
- Store and retrieve data in localStorage
- Draw shapes on a webpage
- EJS chapters 17 & 18
- “Introducing JSON,” json.org, https://www.json.org/json-en.html
- EJS chapter 11
JSON, JSON string, JSON array, JSON methods,
localStorage
APIs, making GET requests,
fetch
SVG,
canvas, vector and raster (bitmap) images, text, transformations
Students will be able to do the following:
- Open and run basic commands in command line interfaces
- Perform common Git operations on the command line
- Interpret error messages in JavaScript
- Debug JavaScript programs
- Create animations using JavaScript
- Learn about JavaScript drawing libraries
- Maybell Obadoni, “How to Use the Command Line Interface - For Beginners,” freeCodeCamp, Sep 27, 2022, https://www.freecodecamp.org/news/how-to-use-the-cli-beginner-guide/
- Ray Villalobos, “Learning Git and GitHub,” LinkedIn Learning, Aug 27, 2021, https://www.linkedin.com/learning/learning-git-and-github-14213624
- Michael Karén, "JavaScript tutorial: Get started with Canvas animations", May 21, 2021, https://www.educative.io/blog/canvas-animations-in-javascript
- EJS, chapter 8
Terminal, Git Bash,
ls,pwd,touch,mv,cat,git
setTimeout(),setInterval(),requestAnimationFrame(), p5.js and JavaScript libraries
Students will be able to do the following with Vue.js:
- Describe the characteristics of Vue
- Install Vue on a computer or load it in a webpage
- Declare reactive objects
- Dynamically populate HTML templates with text
- Dynamically populate HTML attributes with data
- Run code when users perform actions on the DOM
- “Introduction,” Vue.js, https://vuejs.org/guide/introduction.html
- “Creating an Application,” Vue.js, https://vuejs.org/guide/essentials/application.html
- “Template Syntax,” Vue.js, https://vuejs.org/guide/essentials/template-syntax.html
- “Reactivity Fundamentals,” Vue.js, https://vuejs.org/guide/essentials/reactivity-fundamentals.html
- “Class and Style Bindings,” Vue.js, https://vuejs.org/guide/essentials/class-and-style.html
- “Event Handling,” Vue.js, https://vuejs.org/guide/essentials/event-handling.html
frameworks, Vue characteristics, installation, Vue from CDN, browser extensions, IDE extensions, Volar
templates,
{{ }}, single-file components,.vue,setup, reactivity,reactive,ref
attribute bindings,
v-bind,:
event listeners,
v-on,@,click, methods
Students will be able to do the following with Vue.js:
- Bind user input data to reactive objects as models
- Render HTML based on conditions
- Render lists
- Render values based on other values
- Run code at a specific time in the lifecycle of the webpage
- “Form Input Bindings,” Vue.js, https://vuejs.org/guide/essentials/forms.html
- “Conditional Rendering,” Vue.js, https://vuejs.org/guide/essentials/conditional.html
- “List Rendering,” Vue.js, https://vuejs.org/guide/essentials/list.html
- “Computed Properties,” Vue.js, https://vuejs.org/guide/essentials/computed.html
- “Lifecycle Diagram,” Vue.js, https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram
form bindings,
value,input,v-model
conditional rendering,
v-if,v-else,v-else-if
list rendering,
v-for,in,key, mutating methods
computed properties,
computed
lifecycle hooks,
created,updated,mounted
Students will be able to do the following with Vue.js:
- Describe the characteristics of Vue components
- Divide an app into an appropriate set of components
- Nest components
- Pass data to child components
- Receive data and events from child components
- Create more complex component nests with slots
- “Components Basics,” Vue.js, https://vuejs.org/guide/essentials/component-basics.html
- “Registration,” Vue.js, https://vuejs.org/guide/components/registration.html
- “Props,” Vue.js, https://vuejs.org/guide/components/props.html
- “Events,” Vue.js, https://vuejs.org/guide/components/events.html
- “Fallthrough Attributes,” Vue.js, https://vuejs.org/guide/components/attrs.html
- “Slots,” Vue.js, https://vuejs.org/guide/components/slots.html
components,
.vue
props,
defineProps,props
emits,
emit,defineEmits,response
slots,
slot
Lectures are copyright Birkbeck, University of London. Pictures and workshop documents are copyright Birkbeck, University of London unless otherwise stated where they are referenced in the lectures.
This work is licensed under a Creative Commons Attribution 4.0 International License.
