JavaScript

Interaction and effects on the web are spectacular when enhanced with the JavaScript programming language. Students create motion graphics and complex interactions to enhance the user experience after learning programming basics with activities like co-op games, interactive code-based quizzes, and programming challenges.

Instructor Course code Prerequisites
Self-directed LTW1000 Web Dev 3
Classes Labs Homework
None None ~90 h
  1. 1

    JavaScript!

    CLRs: 1, 3

    Dig into writing JavaScript and explore some activities to switch your brain’s thinking to computer mode.

    1. JavaScript intro slide deck
    1. JavaScript syntax videos
    2. JavaScript debugging videos
    1. Type Trapper
    2. What’s yo name?
    3. Letter looper
    1. Letter looper triangle
    2. Phrasal template generator
  2. 2

    Arrays, objects & functions

    CLRs: 1, 3

    Learn to use more complex JavaScript functionality with arrays, objects & reusable functions.

    1. Arrays, objects & functions slide deck
    1. Logic Luminary
    2. Contact list generator
    3. Hidden message fixer
    1. Insect injector
    2. Berry blobber
  3. 3

    JavaScript DOM

    CLRs: 1, 3

    Explore how to interact with HTML using the document object model and combine CSS with JavaScript.

    1. jQuery introduction slide deck
    1. Document object model videos
    1. Loop Lancer
    2. Working with jQuery
    3. JS ❤ CSS
    1. HTML rearranger
    2. Grain globber
  4. 4

    JavaScript events

    CLRs: 1, 3

    Learn how to write JavaScript code that responds to user generated events like clicks and key presses.

    1. JavaScript + jQuery events slide deck
    1. Bug Basher
    2. Circle mover
    3. Circle maker
    1. Circle colourer
    2. Simple to-do list
  5. 5

    JavaScript, jQuery & accessibility

    CLRs: 1, 2, 3, 4

    Look at how accessibility can be improved for JavaScript functionality using ARIA.

    1. JavaScript, jQuery & accessibility slide deck
    1. JavaScript, jQuery & accessibility videos
    1. Prodigious Picker
    2. Spacing Superstar
    3. Implementing ARIA
    1. ARIA ready?
    2. It’s more than just mice
  6. 6

    JavaScript + CSS + SVG

    CLRs: 1, 2, 3, 4

    Use JavaScript to trigger CSS & SVG effects like transition and animations.

    1. JavaScript + jQuery effects slide deck
    1. JavaScript + jQuery effects videos
    1. ARIA Activist
    2. Bubble popper
    3. Effect triggers
    1. Retro sign
    2. Randomized starfield banner
  7. 7

    jQuery plugins

    CLRs: 1, 2, 3, 4, 5

    Look at using some common jQuery plugins including smooth scroll & waypoints.

    1. jQuery plugins slide deck
    1. Bracket Bamboozler
    2. Document Defeater
    3. jQuery waypoints + SVG
    1. jQuery smooth scrolling navigation
    2. Parallax, schmarallax
  8. 8

    Responsive infographic

    CLRs: 1, 2, 3, 4, 5

    Plan, design & develop an respsonive, interactive infographic with animations, transitions and oodles of JavaScript.

    1. JavaScript Journeyer
    2. Responsive infographic paper plan
    3. Responsive infographic
    1. Browser testing
    2. Accessibility testing

Marking scheme

Activities & lessons

10% — 18 @ 0.6% each

  • Complete/incomplete
  • Formative assessment

Videos

15% — 5 @ 3.0% each

  • Complete/incomplete
  • Must reach 80% of playlist duration to receive pass
  • Formative assessment

Exercises

60% — 21 @ 2.9% each

  • Complete/incomplete
  • Formative assessment

Big projects

15% — 1 @ 15.0% each

  • Proof you learned everything
  • Summative assessment

Course learning requirements

1
Use modern tools to make websites

  • Host websites on cloud platforms
  • Use version control software to track code changes
  • Use online collaboration tools for getting assistance
  • Get feedback from automated tools and apply the suggested changes

2
Prepare websites for multiple devices and use cases

  • Make adaptive layouts that change and respond to different devices, screen sizes & type sizes
  • Use design techniques to structure layouts for increased usability of a website to meet any user’s need

3
Execute and create interactions using the JavaScript programming language

  • Demonstrate understanding of program flow and how computers execute code
  • Respond to user interactions in code and perform actions
  • Respond to server interactions in code and perform actions
  • Manipulate on-screen visual elements using code triggered by user interactions or automatically

4
Make websites accessible to all human beings

  • Apply coding best practices to enhance accessibility of web pages
  • Test websites with accessibility tools and fix problems
  • Enhance code with open standards to improve the accessibility of program functions

5
Plan, prototype and develop websites

  • Sketch components & how they adapt to different screen sizes
  • Wireframe pages to describe the content and basic layout
  • Describe interactions using sentences and storyboards
  • Build responsive prototypes for websites for all devices
  • Test websites on multiple devices for the best compatibility

Vocational learning outcomes

Description Taught Assessed Culminating performance
1 — Conceptualize and develop design solutions using principles of design to create visual communications that meet the needs of the projects.
2 — Employ the design process to create design solutions that meet the project objectives and the needs of the client and/or user.
3 — Plan, create and use photography, illustration and typography in design layouts to meet the requirements of the creative brief.
4 — Design, develop and create a variety of media products using relevant, current and/or emerging technologies.
5 — Communicate ideas, design concepts and opinions clearly and persuasively to others.
6 — Use recognized industry practices throughout the design process and related business tasks.
7 — Plan, implement, and evaluate graphic design projects using project management skills to deliver quality work to clients according to schedule and within budget.
8 — Complete all work in a professional and ethical manner, and in accordance with all applicable legislation and regulations.
9 — Keep current with visual media design trends, technologies and industry practices using strategies that enhance work performance and guide professional development.
10 — Identify and apply discipline-specific practices that contribute to the local and global community through social responsibility, economic commitment and environmental stewardship.

Essential employability skills

Description Taught Assessed Culminating performance
1 — Communicate clearly, concisely and correctly in the written, spoken and visual form that fulfills the purpose and meets the needs of the audience.
2 — Respond to written, spoken or visual messages in a manner that ensures effective communication.
3 — Execute mathematical operations accurately.
4 — Apply a systematic approach to solve problems.
5 — Use a variety of thinking skills to anticipate and solve problems.
6 — Locate, select, organize and document information using appropriate technology and information systems.
7 — Analyze, evaluate and apply relevant information from a variety of sources.
8 — Show respect for diverse opinions, values, belief systems and contributions of others.
9 — Interact with others in groups or teams in ways that contribute to effective working relationships and the achievement of goals.
10 — Manage the use of time and other resources to complete projects.
11 — Take responsibility for one's own actions, decisions and consequences.