Week 4 css recap and js

Speaking in Code

CSS Recap and Intro to JavaScript

Professor Liel Leibovitz
Brian Lee
Carolynn Vu (TA)

Speaking in Code

Recap: Linking CSS

• Stored in a separate file

• Content vs Style

• Located inside <head>

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

Speaking in Code

Why Separate?



p{
color: red;
}

Speaking in Code

Recap: CSS – Syntax

h1 {
color: blue;
font-size: 12px;
}

Speaking in Code

Recap: CSS – Selectors

• Selectors are elements in HTML

<head>
<title>Result</title>
</head>
<body>
Check it out! I'm purple!
</body>

Speaking in Code

Recap: Classes

• Classes can be used more than once

• Each tag can have multiple classes separated by space
ohh I’m squiggly
Just another paragraph...

.cursive {
font-family: cursive;
}
.red {
background-color: red;
}

Speaking in Code

Recap: ID

• ID’s can only be used once

• Each tag can only have 1 ID
ohh I’m squiggly
Just another paragraph...

#cursive {
font-family: cursive;
}
#red {
background-color: red;
}

Speaking in Code

Recap: CSS – Selectors with Classes/IDs

• Be as specific as you want with selectors

I’m different, yeah I’m different
Just another paragraph...

p{
color: white;
}
p.purple {
color: purple;
}

Speaking in Code

CSS: Effective Use

• Apply to all span tags
span {
font-family: Calibri;
}

• Apply to all paragraphs contained within a 
p span {
font-family: Avenir;
}

Speaking in Code

CSS: Universal Selector

• Apply globally
*{
background-color: #eee9e9;
}

Speaking in Code

CSS: Pseudo-class Selectors

• Used for specifying a state or property

a:hover {
text-decoration: none;
}

a:link /* unvisited link */
a:visited /* visited link */
a:hover /* mouse over link */
a:active /* selected link */

Speaking in Code

DUN DUN DUN… Intro to Programming

• Up to now we learned HTML / CSS

• Great for describing and styling your content

• Programming is more a way of thinking

Speaking in Code

Why Learn Programming?

Speaking in Code

What is programming?

• Giving instructions to the computer

• Similar to writing a recipe or giving directions

Speaking in Code

JavaScript
Pros:
• Adds functionality and interactivity to website
• Make your site more dynamic:
– ie) what happens on a click?

Cons:
• A lot of syntax
• Not as easy to learn as Ruby or Python

Speaking in Code

They even have a book like this:

Speaking in Code

Why JavaScript?

• We’re learning programming

• Programming: telling a computer what to do

• JavaScript: specialty in telling browser what to do

Speaking in Code

Fundamental Concepts

• Every programming language has various types

• Numbers 1 or 2

• Strings – any text (surrounded by quotes)
1 vs “1”

• Booleans - true or false

Speaking in Code

Let’s Nerd Out!

http://bit.ly/nyujs-1

Speaking in Code

Console

• Used within the browser

• Able to execute code

• Calculator

console.log(‘hello world!’);

Speaking in Code

Variables

• Same concept as Algebra

var x = 10;
x + 10;

Speaking in Code

Sync-Up!

• Can try out JavaScript at
– http://jsbin.com

– Make sure to select JavaScript and Console

Week 4 css recap and js

More Related Content

What's hot

Similar to Week 4 css recap and js

Week 4 css recap and js

Editor's Notes