1 of 27

Intro to JavaScript

JavaScript: the DOM // intro to programming in JavaScript

1

2 of 27

What is JavaScript?

  1. Initially created as a browser-only language (where the browser is the interpreter)
  2. Does all of the same things as other ‘real’ programming languages do (Turing complete).
  3. An interpreted language (like Python) – no compiler
  4. Now used in a variety of different contexts (it can be run anywhere that a JavaScript engine is installed)
  5. Many languages “transpile” to JavaScript (e.g. Dart, TypeScript, CoffeeScript), meaning that you can program in another language, and then run a ‘transpiler’ to convert your code to JavaScript so that your browser can understand it.

2

Nice overview: https://javascript.info/intro

3 of 27

“Client-Side” JavaScript

What is JavaScript’s job within the browser?

  1. Can respond to user events
  2. Can manipulate the DOM by adding/removing/modifying/deleting:
    1. elements
    2. attributes
    3. style properties
    4. content
  3. Can pull down resources from any server (for which it is authorized) and inject content into the DOM
  4. Can post content from the browser to a server
  5. Can manipulate data (which JS sees as lists of objects)
  6. Can do all the computations that an ordinary language can do (but heavy computations are typically delegated to server processes)

3

Nice overview: https://javascript.info/intro

4 of 27

The Possibilities and Limitations of “Client-Side” JavaScript

  1. Can JavaScript from your browser access your file system?
    1. No — that’d be a huge security risk. Why?
  2. Can JavaScript access your camera, microphone, or current location?
    • Only with your permission
  3. Can JavaScript store information about you that the site can access later?
    • Yes — Cookies and localstorage (you can view these via the browser inspector)
  4. Can JavaScript transmit information about your browsing interactions back to the server?
    • Yes — b/c JavaScript can (1) “listen” to any user event (mousemove, click, drag, scroll, etc.), and (2) post information to a server, it can collect and transmit fine-grained information about your browsing behavior
  5. Can any website access the information that another website has gathered about you?
    • It’s possible, but not through client-side JavaScript (see next slide)

4

Nice overview: https://javascript.info/intro

5 of 27

5

Browser’s Local Storage / Cookies

Information Services Website

Google

- Google-assigned user id

- Other metadata

Online shopping Website

Amazon

- Amazon-assigned user id

- Other metadata

X

Tracking Company

Third Party Cookies

- Third Party user id

- Third Party user id

6 of 27

“Server-Side” JavaScript (Not in this Class, but FYI)

What is JavaScript’s job on a server (e.g. Node.js)?

  • Node.js lets developers use JavaScript on a server — to generate web pages before the page is sent to the user's web browser (developed in 2009)
  • Analogous to the role that other web frameworks fill — Java’s Spring, Django (Python), Flask (Python), Ruby on Rails, etc.
  • Can connect to databases, communicate with other server processes, and interoperate with other languages via sockets and processes on a server.
  • V8 is the JavaScript compiler (Open Sourced via Chrome). Compiles JavaScript directly to native machine code before executing it

6

7 of 27

Client-Side JavaScript Schedule

Week 5 (this week):

  • Intro to DOM manipulation.
  • Intro to computer programming with JavaScript:
    • variables, expressions, and statements
    • data types

�Week 6

  1. Functions and Events
  2. Templating

�Week 7

  1. AJAX (interacting with Servers)
  2. Working with data and APIs

7

8 of 27

JavaScript Readings / Videos

LinkedIn Learning — see website for playlists

8

9 of 27

Document Object Model (DOM)

[Reminder from Lecture 4]

A way of representing a document, like a web page, in a way that can be understood by a human and by a computer. Javascript can directly manipulate the DOM dynamically.

9

10 of 27

Selectors

Recall from CSS: selectors are ways of targeting elements in a web page so that we can apply styles to them.

​

Remember these...

​

10

11 of 27

...

1 <body>

2 <div class=”title-bar”>

3 <h1>Welcome, Malik</h1>

4 <img id=”profile” src=”images/pic.png” />

5 <hr>

6 </div>

7 <div>Right

8 <ul>

9 <li>list item 1</li>

10 <li>list item 2</li>

11 <li>list item 3</li>

12 </ul>

13 </div>

14 </body>

...

body {

color: grey;

}

h1, li {

text-transform: uppercase;

display: inline-block;

color: #999999;

}

.title-bar {

padding: 5px;

background-color: #EEEEEE;

}

#profile {

width: 100px;

float: left;

margin-right: 20px;

}

11

12 of 27

...

1 <body>

2 <div class=”title-bar”>

3 <h1>Welcome, Malik</h1>

4 <img id=”profile” src=”images/pic.png” />

5 <hr>

6 </div>

7 <div>Right

8 <ul>

9 <li>list item 1</li>

10 <li>list item 2</li>

11 <li>list item 3</li>

12 </ul>

13 </div>

14 </body>

...

body {

color: grey;

}

h1, li {

text-transform: uppercase;

display: inline-block;

color: #999999;

}

.title-bar {

padding: 5px;

background-color: #EEEEEE;

}

#profile {

width: 100px;

float: left;

margin-right: 20px;

}

12

13 of 27

...

1 <body>

2 <div class=”title-bar”>

3 <h1>Welcome, Malik</h1>

4 <img id=”profile” src=”images/pic.png” />

5 <hr>

6 </div>

7 <div>Right

8 <ul>

9 <li>list item 1</li>

10 <li>list item 2</li>

11 <li>list item 3</li>

12 </ul>

13 </div>

14 </body>

...

body {

color: grey;

}

h1, li {

text-transform: uppercase;

display: inline-block;

color: #999999;

}

.title-bar {

padding: 5px;

background-color: #EEEEEE;

}

#profile {

width: 100px;

float: left;

margin-right: 20px;

}

13

14 of 27

...

1 <body>

2 <div class=”title-bar”>

3 <h1>Welcome, Malik</h1>

4 <img id=”profile” src=”images/pic.png” />

5 <hr>

6 </div>

7 <div>Right

8 <ul>

9 <li>list item 1</li>

10 <li>list item 2</li>

11 <li>list item 3</li>

12 </ul>

13 </div>

14 </body>

...

body {

color: grey;

}

h1, li {

text-transform: uppercase;

display: inline-block;

color: #999999;

}

.title-bar {

padding: 5px;

background-color: #EEEEEE;

}

#profile {

width: 100px;

float: left;

margin-right: 20px;

}

14

15 of 27

JavaScript also supports element targeting...

15

Method

Example

Returns

getElementById()

document.getElementById("my_element")

single element

querySelector()

document.querySelector("#my_element")

document.querySelector("p")

document.querySelector(“.my-announcements")

single element

querySelectorAll()

document.querySelectorAll("p")

list of elements

getElementsByTagName()

document.getElementsByTagName("div")

list of elements

getElementsByClassName()

document.getElementsByClassName(".panel")

list of elements

Recall from CSS: selectors are ways of targeting elements in a web page so that we can apply styles to them.

DEMO

16 of 27

And once you target an element, �you can change it...

16

17 of 27

DOM Manipulation: Some (of the many) attributes you can set

These are but a few. You can set any element attribute using JavaScript

17

Attribute

Example

Elements

className

document.querySelector("div").className = “panel";

all

innerHTML

document.querySelector("div").innerHTML = “hi!";

all

src (for images)

document.querySelector("img").src = “some_image_url”

images only

href (for links)

document.querySelector("a").href = “http://site.com”;

links only

...

...

...

18 of 27

DOM Manipulation: Style properties that you can set

These are but a few. You can set any style property using JavaScript

18

Property

Example

width

document.querySelector("div").style.width = "200px";

height

document.querySelector("div").style.width = "200px";

background color

document.querySelector("div").style.backgroundColor = "hotpink";

border width

document.querySelector("div").style.borderWidth = "5px";

padding

document.querySelector("div").style.padding = "10px";

display

document.querySelector("div").style.display = "none";

...

...

19 of 27

A quick look-ahead...

19

20 of 27

Quick Preview of Functions and Events

We will be going over both functions and events in JavaScript next week, however we’re going to start using them today. You don’t need to know how to write them, but you do need to know how to read them...�

  1. A function is an encapsulated grouping of programming statements that you can invoke on demand...�
  2. An event handler is a way that allows you to attach a function to an event��

​

20

21 of 27

Function Example

A function is an encapsulated grouping of programming statements that you can invoke on demand...

�const sayHello = () => {� document.querySelector('h1').style.color = 'white';� document.querySelector('h1').innerText = 'Hello!';�};

const sayGoodbye = () => {� document.querySelector('h1').innerText = 'Bye!';�};

sayHello();�sayGoodbye();�sayHello();�sayGoodbye();�

​

21

22 of 27

Event Handler Example

An event handler is a way that allows you to attach a function to an event. There are many different events that a browser allows you to hook into: click, mouseover, mouseout, drag, scroll, etc.��

EXAMPLE:

​

<button onclick=”sayHello()”>click me</button>�

​

22

23 of 27

Summary of the Process of DOM Manipulation

  1. Target an element using one of the selector methods.
    1. For now, let’s use document.querySelector()
  2. Specify what you want to change about the element:
    • A style property?
    • An attribute?
    • What goes inside of the element?
  3. Also note: usually DOM manipulation happens inside of an event handler (which we’ll be talking more about next week)!

23

24 of 27

Download Today’s Code

24

25 of 27

Activity 1: Manipulating Style Properties

Open 01-style-property-demo

  1. Modify each of the event handlers so that when the button is clicked, the body’s background color changes to the corresponding color.
  2. How would you switch the font of the h1 tag when the user clicks on the button?

25

26 of 27

Activity 2: Manipulating HTML Element Attributes

Open 02-attribute-demo

  • Modify each of the event handlers so that when the image’s “src” attribute is set to a different animal image.
  • How would you also modify the paragraph text when each button is clicked?

26

27 of 27

Activity 3: Together

Open 03-all-of-the-above

​

  • Update the body of the changeColor() function so that the panel turns to hotpink.
  • Update the body of the changeTitle() function so that it changes the title of the webpage to "hi there!"
  • Update the body of the addImage() function so that it adds an image of a cat to each panel
  • update the body of the clearDivs() function so that it clears out the image of a wombat for each panel

​

​

27