CS 105

Week 4

Fall is here!

Fall + Starbucks

(Not sponsored, but if you want to give me free coffee....)

Fall + Starbucks

var coffee = "Pumpkin Spice Latte";

var coffee = "Pumpkin Spice Latte";
//    Index:  0123456789012345678
//                      111111111

Strings

coffee.length

A) 0
B) 1
C) 2
D) 18
E) 19

Strings

coffee[2]

A) "p"
B) "u"
C) "m"
D) "k"
E) "i"

Strings

__________________ == "c"

A) 10
B) 11
C) 12
D) 13
E) 14

Big 10

var b10 = ["UIUC", "IU", "Iowa",
"UMD", "UMich", "MSU", "Minnesota",
"Nebraska", "Northwestern", "OSU",
"Penn State", "Purdue", "Rutgers" ];

Big 10

b10.length

A) 10
B) 11
C) 12
D) 13
E) 14

Big 10

b10[2]

A) "UIUC"
B) "IU"
C) "Iowa"
D) "UMD"
E) "UMish"

Big 10

_______________ == "Purdue"

A) b10[10]
B) b10[11]
C) b10[12]
D) b10[13]
E) b10[14]

Big 10

b10[0] == _______________________

Big 10

b10[0].length

A) 1
B) 2
C) 3
D) 4
E) 5

Big 10

b10[0][1]

A) "U"
B) "I"
C) "C"
D) "UIUC"
E) "UIC"

Big 10

var count = 0;
for (var i = 0; i < b10.length; i++) {
  var b10school = b10[i];
  if (b10school[0] == "U") {
    count = count + 1;
  }
}

Big 10 Meme

"UIUC #1!"
"Boo Iowa!"
"Boo IU!"

Big 10 Meme

var b10meme = function (school) {
  ...
}

Review: Data Types

Review: Data Types

  • Strings
  • Numbers
  • Functions
  • Arrays
  • SimpleImage

New data type: object

JavaScript Objects

Objects allow us to assoicate data in a dictionary.

JavaScript Objects

Imagine a wade object in a computer, it will have several properties about it. We call these key-value pairs: 

name: "Wade"
netId: "waf"
office: "2215 SC"

We can define wade: 

var wade = {
  name: "Wade",
  netId: "waf",
  office: "2215 SC"
};

We can refer to wade using the dot operator: 

wade.name
wade.netId
wade.office

HTML

HTML is HyperText Markup Language

  • HTML is not a programming language.
  • HTML does not contain conditionals, loops, or variables.

  • HTML is a markup language -- it tells the computer how to arrange the content.

HTML

<html>
  <head>
    <title>CS 105</title>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

HTML

<div class="cs105"
     onclick="jsFunction();">
  ...
</div>

HTML

<div class="cs105"
     onclick="jsFunction();"
     id="cs105div">
  ...
</div>

HTML to JavaScript

var e = document.getElementById("cs105div");

Looking Forward