Week 2

37

Week 1 Review

In the URL: https://abc.org/contact

org is the ________
https is the ________
With an SPA, after accessing a resource on the server, the page does not need to
__________
In the HTML: <h1 style=‘text-align: center’>This is my page title</h1>
style is a/an _____________
In an HTML list, a bulleted list is created with ______ and each bulleted text is
created with ______

38

1
 CSS (Cascading Style Sheets)

▪ Allows formatting to be separate from content

▪ Define style instructions through style rules
▪ Each rule has a selector and a set of property/value pairs
selector { style-property1:value; style-property2:value }

▪ The selector indicates what the rule applies to.

▪ The properties are the style characteristics that are being modified.
▪ The value is the new value for that property.
▪ Multiple property/value pairs are separated by ;

39

Example

h1 {text-align:center; color: #ff0000;}

▪ Selector: h1
▪ Property: text-align, Value: center
▪ Property: color, Value: #ff0000
▪ This rule states that all h1 tags should be centered on the page and colored red.
▪ !important
at the end of any property-value pair, !important indicates priority
– text-align:center !important;

40

2
 Style rule placement

▪ Inline  External: In a separate file

– “at the tag”
 By convention, style.css
– <p style=“color:#ff0000”>
 No style tag

▪ Internal: within <style> tag  Include on a page using:

– Less “important” than inline <link rel="stylesheet" href="styles.css">
– The closer a rule is to the selected
element, the stronger the precedence
<style type= 'text/css’>
h1 {text-align:center;
color: #ff0000;}
</style>

41

Selectors

Type of selector Example

An HTML tag h1
Applies to any instances of that tag on the page
A style class .my-class
(starts with a ‘.’) Applies for: class=“x”
<tag class=“x” …
An id #the-id
(starts with a ‘#’) Applies for: id=“x”
<div id=“x” …
A pseudo-element li:first-child
(starts with a ‘:’)
modifies another selector

42

3
 Common Selector combinations

▪ a:hover rule applies when mouse is over the link

▪ a,b rule applies to all (note: no space after comma)
▪ ab rule applies when b is contained within a
ex: “h1 em” applies for
“<h1> <em>here is text</em></h1>”
▪ tag.x rule applies for tag when its class=“x”
<h1 class=“x” …
▪ tag [attr=value] rule applies to specified tag only when the attribute
is set to the given value

43

Combining Selectors: Both

▪ Use a,b for a rule to apply to 2 or more selectors.

▪ Example:
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>

▪ Goal:
– h2 and h3 are both red

▪ CSS rule:
h2,h3 {color: #DD191C}

44

4
 Combining Selectors: Follows
▪ Use a + b for a rule to apply to b only when it comes after a.
▪ Example:
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h3>Here is another h3</h3>

▪ Goal:
– When an h3 follows an h2 (perhaps it is a subheading) make its size, 30px
– In this case, the rule should affect the first h3, not the second one

▪ CSS rule:
h2 + h3 {font-size: 30px}

45

Combining Selectors: All

▪ Use ab for a rule to apply to an element with both a and b selectors.
This can apply to a tag with a particular class, id or both.
▪ Example:
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h3 class='section-head'>Here is another h3</h3>

▪ Goal:
– Make the h3 with a class of section-head be blue

▪ CSS rule:
h3.section-head {color: #3836CD}

46

5
 Combining Selectors: Contained Within
▪ Use a b for a rule to apply to b when b is contained hierarchically within a

▪ Example:
<a href="https://accuweather.com">
<img src="images/goat.png" height='250’ />
</a>
<p><img src="images/goat.png" height='350’ /></p>

▪ Goal:
– Place a border around images that are contained within an <a> tag – but
not any other images

▪ CSS rule:
a img {border: 1px solid #3836cd}}

47

Combining Selectors: Attributes

▪ Use b [attr] for a rule to apply only when the b tag has the attr attribute set
Use b [attr=value] for a rule to apply only when the b tag has the attr attribute set to the value

▪ Example:
<form>
<p>State: <input type='text' value='Massachusetts'></p>
<p><input type='submit'></p>
</form>

▪ Goal:
– Set the font size of all input elements to 20px.
Change the submit button to have a blue background with a font color of white

▪ CSS rules:
input {font-size: 20px}
input[type="submit"] {background-color: #3836cd; color: #fff}

48

6
 Combining Selectors: Pseudo-Elements

▪ last-child the last element hierarchically in a group

first-child the first element hierarchically in a group
nth-child(x) x is the index of the element positioned hierarchically in a group
hover mouse is hovering over an element

▪ Example:
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>

▪ Goal: Put a border below each item, except for the last one. Items are centered and 100px wide.

▪ CSS rules:
ul {list-style-type: none}
ul li {border-bottom: 1px solid #999; width: 100px; text-align:center}
ul li:last-child {border-bottom: none}

49

Combining Selectors: !important

▪ !important add after any property value pair to give it priority. This will override the usual
“cascade” effect which is especially important when working with 3rd party code.

▪ Example:
<h2 style='font-size:12px'>This is tiny - or is it?</h2>
▪ Goal: All h2’s have a font size of 30px

▪ CSS rule:
h2 {font-size: 30px !important}

Without important With important

50

7
 Colors
▪ Use hex, rgb or rgba colors
▪ Hexadecimal colors
– RGB: red green blue
– Begin with #
– #rrggbb
– Each section ranges from 00 to FF (#FF0000 is red)
Colors can be used for:
▪ rgb() color  Text color (color)
– rgb(12, 120, 255)  Backgrounds (background-color)

▪ rgba() adds transparency  Border

– rgba(12, 120, 255, .4)  Border-color
 border: 2px solid #123456;

51

Font & text properties

▪ font-family
▪ font-size
▪ font-style (italic)
▪ color
▪ text-align
▪ text-transform (case)
▪ text-decoration
▪ line-height

52

8
 <head>
<title>Demo Page</title>
<style type="text/css">
body,html{font-size: 18px}
p {color: #19A74D}
p.yellow {color:#D5DE20}
h1 {
font-size:30px;
font-family:"Gill Sans", Helvetica, Arial, "sans-serif“
}
</style>
</head>
Example <body>
<h1>Welcome to my page</h1>
<h2>This is a subheading</h2>
<p>And here is some text</p>
<p class = "yellow">And here is more text</p>
<p style="color:#ff0000">Want more ideas?</p>
<a href="https://www.w3schools.com" target="_blank">
Try www.w3schools.com
</a>
</body>

53

HTML Blocks and the Box Model

Blocks are often used to facilitate styling
▪ <p> <div> <span>
▪ Other than line spacing, there is no default styling

content
The Box Model
▪ Border - around an item
padding margin
▪ Padding – space between content and boundary
of item
▪ Margin – space between items

54

9
 position

▪ Absolute <div id=‘one’>

– Relative to the first parent element with position set
<div id=‘two’>
▪ Fixed
dib
– Relative to the page <div id=‘three’>
– May also want to use “z-index” property
▪ Relative
– Where it would normally go on the page
– You may need to set position to relative in order to one is parent for two
make position absolute work for a child element two is parent for three

55

ProTricks
▪ margin or padding: specify up to values - top, left, bottom, right
– padding: 3px
– padding: 3px 5px
– margin: 2px 3px 4px 5px;
▪ box-sizing: border-box
– Forces height/width to be specified size
▪ margin: 0 auto
– center a block
▪ Given position: absolute
– left: 0; right: 0;
▪ centers a block
– Top: 0; bottom: 0;
▪ full column height

56

10
 <head>
<title>Blocks Demo</title>
<style type="text/css">
#top {background-image: url(banner1.jpg);
background-size:cover; height: 200px; width: 100%;
text-align:center; font-size: 40px; padding-top: 100px;
box-sizing: border-box; }
.left-col,.right-col {display:inline-block; width: 49%; margin: 0;}
.left-col {background-color: #ccc;}
</style>
Example </head>
<body>
<div id='top’> This is the banner </div>
<div id='content’>
<div class='left-col’> this goes on the left </div>
<div class='right-col’> this goes on the right </div>
</div> <!-- end content-->
</body>

57

Responsive design: how to

▪ Viewport
▪ Adaptive elements
▪ Media Queries
▪ Emulators: ex, Mobiletest.me
▪ Inspect
▪ Flex box

58

11
 viewport

▪ Defines the area of the screen where the browser can render content
▪ <meta name=‘viewport’ content=“width=device-width, initial-scale=1”>
▪ Reflows content to match the device size
▪ Put this in the <head> section

59

Media queries

▪ @media queries override style rules based on browser width

▪ Syntax:
@media (max-width: 900px) { /* styles go here for width up to 900px */ }

▪ Determine breakpoints using “inspect”

Device Approx Size

Desktop 1900px
Tablet 980px
Phone 300px to 600px

60

12
 Duplicate Content
▪ Sometimes the changes to a section from “desktop” to “mobile” are too drastic

▪ It doesn’t always make sense just to “squeeze” the page and see where things fall

▪ Example- menus, headers, footers

▪ One option is to have two div’s with versions for different sizes.

<div class=‘no-mobile’>Full width stuff goes here</div>

} <div class=‘is-mobile’>Mobile friendly stuff goes here</div>

.is-mobile {display:none;}
@media (max-width: 600px) {
.is-mobile {display:block;
.no-mobile {display:none;}

61

JavaScript Programming

62

13
 Programming with JavaScript

▪ Similar to C/C++ Incorporate into HTML page using <script> tag:

▪ Scripting language
▪ Interpreted <script>
▪ Supports OOP document.write(‘hello world’);
</script>
▪ Object libraries: DOM (Document
Object Model)
▪ We will be learning ES6, the version
used by React
▪ ES6 (also known as ECMAScript 6 )
was published in 2015

We will limit our discussion to constructs consistent

with what you are likely to encounter in React
63

63

I/O

▪ Output to the page

– document.write(), document.writeln()
– document.write (“hello”);

▪ Pop-up window
– alert(‘hey’);

▪ Output to the console window

– console.log()

▪ Concatenation using +
– var x = 6; document.write("The answer is: " + x + " <br /> ");

64

64

14
 Input / Output

▪ Write to an element on the page

– The item must be loaded on the page
– document.getElementById(“result”).innerHTML = “hello”;

▪ Read from a text box (within a form)

HTML: <input type='text' id='my-input'>
JS: data = document.getElementById('my-input').value;

65

65

Variables in JavaScript

▪ Declare a variable  Scope of var vs let vs const

– Use the keyword “var”, “let”, “const”, or  var is function scoped
just assign a value.  let and const are block scoped
▪ var x; x = 10;  Declare several variables at the same time
▪ let x = 10;  var x, y;
▪ const x=10;  let x = 10, y;
▪ x = 10;  null assigns a non-value to a variable
▪ const is read only – it cannot be reassigned.  var x = null;
▪ Scope
– Global, Local, Block

66

66

15
 <script>
var globalScope=0;
function foo() {
if (true) {
var funcScope = 1;
let blockScope = 2;
console.log(funcScope); // will print 1
console.log(blockScope); // will print 2
Scope Demo
let globalScope = 3;
if (true) {
console.log(funcScope); // will print 1
console.log(blockScope); // will print 2
console.log(globalScope); // will print 3
}
}
console.log(funcScope); // will print 1
console.log(globalScope); // will print 0
console.log(blockScope); // error
}
foo();
</script>

67

Data Types in JavaScript

▪ JavaScript is loosely typed- data types

are deduced.
(Variables in JavaScript are shape shifters!)
▪ Numbers
– Integral (no decimal point)
– Floating point (may have a decimal point)
▪ Text (Strings)
– Enclosed in quotes
– Both single and double quotes are valid (end with
what you start with)
▪ Boolean
– True or false
68

68

16
 Working with Data

▪ parseInt converts a string to a

number alert(parseInt(“1 is the loneliest number”));
//result is 1
▪ The converted value is returned -
the original value is not changed alert(parseInt(“The loneliest number is 1”));
// result is NaN
▪ parseInt vs parseFloat
alert(parseInt(“3.14 is my favorite kind of pi”));
▪ NaN (not a number) // result is 3

▪ Note: the result of prompt and alert(parseFloat(“3.14 is my favorite kind of pi”));

reading a form is always a string // result is 3.14

69

69

Strings and Numbers

▪ Use + to concatenate (glue) strings
– x = “hello “; y = “ there”;
z = x + y; // z is “hello there”

▪ If you concatenate a string with a number,

the result is a string
– x = “hello “; y = “12”; z = x + y; // z is “hello 12”
– n = 4; n = n + ""; // n is “4”
– n = 4; z = "The answer is " + n + 2); // z is “The answer is 42”
– n =4; z = "The answer is " + (n + 2)); // z is The answer is 6”

When using + … strings “eat” numbers

70

70

17
 Try it

Create an HTML page as follows:

▪ Add an h1 to the page that displays: “My JavaScript Page”
▪ In a script section:
– Create a variable called name using var.
– Set the value of the variable to your name
– Display the name on the page using document.write
– Display the name in the console using console.log
– Create a variable called age using let, and set it to 42
– Display the name and the value of the age in 2 years using document.write

71

71

Operators

▪ Arithmetic
▪ Arithmetic with assignment
▪ Assignment x + y
▪ Comparison
▪ Logical operand operator

▪ Concatenation

72

72

18
 Arithmetic

+ addition Adds numeric operands.

- subtraction Used for negating or subtracting.
++ increment Add 1 to the operand.
-- decrement Subtract 1 from the operand.
* multiplication Multiplies two numerical operands.
/ division Divides first operand by second operand
% modulus Calculates the remainder of first operand
divided by second operand.

73

73

Operator Precedence
▪ JS follows PEMDAS
▪ “Please Excuse My Dear Aunt Sally”
▪ Parentheses
▪ Exponent
▪ Multiplication, Division
▪ Addition, Subtraction
▪ See:
https://www.dummies.com/article/technology/programming-
web-design/general-programming-web-design/javascript-
operator-precedence-254119

74

74

19
 Example: Tip Calculator

var checkAmount, tipAmount;

const TIP_PERCENT=.17;
checkAmount = prompt("What is the check amount? ","20");
document.write("Check amount: $"
+ checkAmount
+ "Tip: $ "
+ checkAmount * TIP_PERCENT);

// why isn’t parseInt needed?

75

75

Example: Is a number even?

var num, result;

num = prompt("Enter a number", "5");
result = num % 2;
document.write ("The remainder of " + num + “divided by 2 is " + result);

76

76

20
 Compound Assignment Operators

▪ +=, -=, *=, /=, %=

Four ways to add 1 to a value
▪ Performs the operation and does
the assignment x = x+ 1;
x++;
▪ Example:
++x;
x = x + 3;
is the same as x += 1;
x += 3;

77

77

21