Jug dynamic languages_in_jvm
Seu SlideShare está sendo baixado.
×
Confira estes a seguir
Mais Conteúdo rRelacionado
Diapositivos para si (19)
Semelhante a Week 4 css recap and js (20)
Week 4 css recap and js
- 1. Speaking in Code CSS Recap and Intro to JavaScript Professor Liel Leibovitz Brian Lee Carolynn Vu (TA)
- 2. 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"/>
- 3. Speaking in Code Why Separate? <p style=‘color:red’/></p> <p style=‘color:red’/></p> <p style=‘color:red’/></p> <p style=‘color:red’/></p> p{ color: red; }
- 4. Speaking in Code Recap: CSS – Syntax h1 { color: blue; font-size: 12px; }
- 5. Speaking in Code Recap: CSS – Selectors • Selectors are elements in HTML <head> <title>Result</title> </head> <body> <p>Check it out! I'm purple!</p> </body>
- 6. Speaking in Code Recap: Classes • Classes can be used more than once • Each tag can have multiple classes separated by space <p class=‘short cursive’>ohh I’m squiggly</p> <p class=‘red cursive’>Just another paragraph...</p> .cursive { font-family: cursive; } .red { background-color: red; }
- 7. Speaking in Code Recap: ID • ID’s can only be used once • Each tag can only have 1 ID <p id=‘cursive’>ohh I’m squiggly</p> <p id=‘red’>Just another paragraph...</p> #cursive { font-family: cursive; } #red { background-color: red; }
- 8. Speaking in Code Recap: CSS – Selectors with Classes/IDs • Be as specific as you want with selectors <p class=‘purple’>I’m different, yeah I’m different</p> <p>Just another paragraph...</p> p{ color: white; } p.purple { color: purple; }
- 9. Speaking in Code CSS: Effective Use • Apply to all span tags span { font-family: Calibri; } • Apply to all paragraphs contained within a <p> p span { font-family: Avenir; }
- 10. Speaking in Code CSS: Universal Selector • Apply globally *{ background-color: #eee9e9; }
- 11. 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 */
- 12. 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
- 13. Speaking in Code Why Learn Programming?
- 14. Speaking in Code What is programming? • Giving instructions to the computer • Similar to writing a recipe or giving directions
- 15. 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
- 16. Speaking in Code
- 17. Speaking in Code They even have a book like this:
- 18. Speaking in Code Why JavaScript? • We’re learning programming • Programming: telling a computer what to do • JavaScript: specialty in telling browser what to do
- 19. 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
- 20. Speaking in Code Let’s Nerd Out! http://bit.ly/nyujs-1
- 21. Speaking in Code Codecademy
- 22. Speaking in Code Console • Used within the browser • Able to execute code • Calculator console.log(‘hello world!’);
- 23. Speaking in Code Variables • Same concept as Algebra var x = 10; x + 10;
- 24. Speaking in Code
- 25. Speaking in Code Sync-Up! • Can try out JavaScript at – http://jsbin.com – Make sure to select JavaScript and Console
