︎Back to Design for Web & Screens

SUNY Purchase ︎ (DES3800) Design for Web & Screens

Knitting Circle: JavaScript


What is JavaScript?

JavaScript is, an interpreted programming language. It allows us to much more dynamic things than before. Here’s some examples.

Better yet, why is JavaScript?

With features like animations in CSS, you may not always know when to use JavaScript. The short answer is generally when you reach the limits of what you can do in CSS you probably need JavaScript. If you want a more dynamic and interactive experience, you’re probably looking for something that you can do in JavaScript. More clearly, 

Where should you be able to end up?

Rather than go through a super detailed exploration of JavaScript (which could be a class in itself), our collective goals should be to understand:
  • how to look for an answer to a problem (terminology, phrasing)
  • how to modify an example that does a version of what you want to do.
  • Under

Syntax 

HTML is one thing, CSS is one thing, JavaScript is another, here’s some of the building blocks of how they look and what you’ll encounter.

Climbin’ the Tree

JavaScript uses what’s called the Document Object Model  to represent the pages, the main way you encounter this is through document.getElementById( “the_id_you_want”), your ID just needs to be within the document (or <body>) of the HTML page. The main takeaway here is that if your code is not working that you need to examine if the JavaScript is “reaching” it correctly.

Event Handling︎

This is the main way that we’ll be using to trigger events. We’ll use onmouseover, onmouseout, onmousedown, onmouseup attached to the div’s we want to interact with to create the result we want. We use JavaScripts innerHTML to change HTML content, and style and the tag we want to use (in camel case) to change the actual CSS




Activities you can do from this point

(We gotta submit progress on our repl.it’s)

  • Figure out a JavaScript example you want to hijack and start to traverse the JavaScript and we’ll triage what isn’t making sense. 

  • Take this JavaScript Quiz from W3 Schools︎ Let me know if there are answers you want to go over and why they are what they are.

  • Reinforce HTML knowledge before goin’ in on JavaScript ︎ create a design for a multipage website in XD and then begin to convert it to HTML and CSS. (Let me know if we should do an XD refresher). 

  • Improve on your litany_against_fear.html Project with JavaScript ︎ If your project was on the simpler side and you want to continue working on it that is cool. 

  • Work on your Observational Coding Project︎We can start a small group to talk about importing libraries and working with three.js (if you want)


︎Back to Design for Web & Screens