Feb 7

your projects

Look at and discuss your website projects. (I've moved them to playground/1_static_site.)

Topics for discussion ... CSS box model ? Flexbox ?

javascript

Our next topic is to dive into javascript and the DOM (document object model) which lets HTML tags act as javascript objects.

This is a big topic.

Some good sources to read about it are on the resources page.

Let's take a look at some of the essentials in class :

• two environments : in a browser (frontend i.e. Firefox) , on a server (backend i.e. node)
  • server : $ node; console.log("hello") ; could use any language ; "require" packages
  • browser : look at "document" object in Firefox console ; only choice ; "import" packages ; DOM
• language syntax :
  • scope: "var" (default) and "let"
  • functions
    • function foo(x){return 2*x+1}
    • foo = function(x){return 2*x+1};
    • foo = x => 2*x+1;
  • objects | associative array | python's "dictionary"
    • foo = {first:'Jim', 'last':'Smith', name:_=>this.first+this.last}
    • constructor function and new built-in
    • no classes : prototypes
    *
  • "this" built-in : object within function ; but parent object within arrow function
    • foo = {first:'Jim', 'last':'Smith', name:function(){return this.first+' '+this.last}}; first.name()
    • first='a';last='b'; bar={name:_=>this.first+this.last}; bar.name()
    • ... which I find can be confusing. Similar to 'self' in python ... except when it isn't.

For next Tuesday, I'd like you each to choose a topic from the readings appropriate to your level of experience and share with the class. (This is a seminar, eh?)

For next Thursday : make a static web site that does something interactive (a calculator, a trivial game, clicking something makes something change, ...) using the DOM.

You can check out some of my old dynamic pages for examples.

Remember that codepen or jsfiddle can be good testing sandboxes.

Please deploy in playground/2_interactive_js

You can (again) work with someone else as a pair if you'd like.

security

Heads up : After this wek of javascript I'd like to look into security issues with the core (html,css,js) technologies.

Here are some starting places to for readings on this topic.

We're going to create some security examples, likely as group projects.

• MDN: website security
• wikipedia: web security exploits
• OWASP Top Ten web app security risks (general categories)
• OWASP Attacks

Also coming soon : I'd like to have us to work with a backend framework, probably Flask, as well as a SQL database, probably SQLite.

Then more exploits, with that new infrastructure.

Then ... maybe back to some network-level stuff including security - nmap, http GET, POST and then perhaps choose some groups & projects.

aside

• mini projects built with VanillaJS | HN discussion