COMP3512

winter 2024

lec-js-01

The Next Stretch

⚠️

13th: Midterm 2 (JS)

15th: Withdraw Deadline

⚠️

Announcements

This week's lab time

I'll be in B107, rarin' to help.

I'm fully aware it's a late Friday lab at the start of Reading Week.

And about Reading Week....

I'll be around some of the time.

I'll update my calendar regularly.

About getting help

Why aren't people getting help?

How's that working out?

Beats me.

And about your second chat

If you show up and demo what you have - even if you're not checking every box - no penalty.

If you don't show up, the penalty is in effect.

The final marking scheme will remain in effect.

let's talk about these things today:

◉ How can we use JavaScript to deface a website?
◉ What will working on JS in Codespaces be like?
◉ How do I bring external JS into my pages?
◉ What's working with JS objects like?
◉ What's JSON and how do I work with it?

JavaScript Intro

How can we use JavaScript to deface a website?

Let us torment mymru.

// change text with the textContent property
someElement.textContent = "We promise to be down at the most inconvenient time.";

// add an element to the page
let h1 = document.createElement('h1');
h1.textContent = "I AM THE NEW H1 IN TOWN";
temp.appendChild(h1);

// remove an element - buh bye
someElement.remove();

// change the style of a page element
someElement.style="background-color: #bada55;"

// remove attributes from an element
someElement.href = "";

// change behaviour on click
someElement.addEventListener("click", function() { alert("Wa ha ha! I'm in control now!"); })

If you're not living in the dev tools over the next 7 weeks, you're doing something terribly wrong.

⚠️

Much - if not most - of our work for the rest of the course will basically involve doing what we just did using the Inspector:

grabbing something on a web page
bending that something to our will

What will working on JS in Codespaces be like?

Let's go see.

01-js-in-our-codespace

Side Note:
We technically don't need Apache or PHP on our Codespace here - and leaving it off would speed things up. So why keep it?

How do I bring external JS into my pages?

We'll look at the way the text does it first.

02-external-js-no-modules

Now with the way I'd like you to do it.

02-external-js-with-modules

I'm not throwing shade here: browser support for modules was sucky around the time the text was released!

Sharing between modules requires some work.

03-sharing-with-modules

You should read up on this a bit more.

Here's a very nice blurb on those script tags.

Here's a very nice blurb on imports and exports.

BRAIN BREAK

What's working with JS objects like?

You've got 2 categories of types in JS: primitive types and reference types (i.e. objects)

Let's talk about objects, because they're more interesting...

...but you're still expected to know what the primitive types are! 😏

Let's build an airport object using an object literal
(a.k.a. object initializer).

04-object-literals

Let's build the same airport object using an object constructor function.

05-object-constructor-functions

What's JSON and how do I work with it?

06-json-from-objects

Let's create the JSON that represents a simple JS object

07-objects-from-json