meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
courses:ct30a3201:janne_foehr [2013/09/05 20:33]
c0341043
courses:ct30a3201:janne_foehr [2013/09/16 22:35] (current)
c0341043
Line 81: Line 81:
 } - läpikäynti for-in } - läpikäynti for-in
  
-// konstruktori+konstruktori
 function Person(name,​ age) { function Person(name,​ age) {
  this.name = name;  this.name = name;
Line 90: Line 90:
  
 **Ke 4.9.2013** **Ke 4.9.2013**
- 
  
 Codeacademy HTML osio tehty. Codeacademy HTML osio tehty.
- 
  
 HTML-muistiinpanot:​ HTML-muistiinpanot:​
 + <​!DOCTYPE HTML> -alkuun
  
 +<​html>​ </​html>​ -koko roska 
  
- <​!DOCTYPE HTML> -alkuun +<​head>​ </​head>​ -sivun tietoja  
-   +<​title>​ </​title>​ -title of the page  
- <​html>​ </​html>​ -koko roska + 
-   +<​body>​ </​body>​ -sivun sisältö  
- <​head>​ </​head>​ -sivun tietoja +<h1> </h1> -header (h1-h6)  
- <​title>​ </​title>​ -title of the page +<p> </p> -paragraph <img src=url” /> -kuva  
-   +<a href=URL> <​klikattava>​ </a> -linkin teko  
- <​body>​ </​body>​ -sivun sisältö +<ol> <li> </li> </ol> -ordered list (li → list item)  
- <​h1>​ </h1> -header (h1-h6) +<ul> <li> </li> </ul> -unordered list  
- <​p>​ </p> -paragraph + 
- <img src="url" ​/> -kuva +<!– This is an example of a comment! ​> -kommentti  
- <a href="URL"> <​klikattava>​ </a> -linkin teko + 
- <​ol>​ <li> </li> </ol> -ordered list (li -> list item) +<p style=font-size: 12px> </p> -fontin koon muuttaminen  
- <​ul>​ <li> </li> </ul> -unordered list +style=color:​green;​ font-size:​16px” -puoli pisteellä useita stylejä kerralla  
-   +style=font-family:​ red” -fontin vaihto  
- <!-- This is an example of a comment! ​--> -kommentti +style=background-color:​ red”  
-   +<h1 style=text-align:​center> -(left, right)  
- <p style="font-size: 12px"> </p> -fontin koon muuttaminen + 
- ​style="color:​green;​ font-size:​16px" ​-puoli pisteellä useita stylejä kerralla +<​strong>​ </​strong>​ -bold  
- ​style="font-family:​ red" ​-fontin vaihto +<em> </em> -italicize 
- ​style="background-color:​ red" +  
- <​h1 style="text-align:​center"> -(left, right) +<​table>​ </​table>​ (<​thead></​thead>​ (<​th></​th>​),​ <​tbody></​tbody>​)  
-   +<tr> </tr> -row  
- <​strong>​ </​strong>​ -bold +<td> </td> -data  
- <​em>​ </em> -italicize +<th colspan=3>3 columns across!</​th>​  
-   + 
- <​table>​ </​table>​ (<​thead></​thead>​ (<​th></​th>​),​ <​tbody></​tbody>​) +<div> </​div>​ 
- <​tr>​ </tr> -row + 
- <​td>​ </td> -data +<​span>​ </​span>​
- <​th colspan="3">3 columns across!</​th>​ +
-   +
- <​div>​ </​div>​ +
-   +
- <​span>​ </​span>​+
  
 **To 5.9.2013** **To 5.9.2013**
  
-Codeacademy CSS osio käyty läpi.+Codeacademy CSS osio käyty läpi. ​
  
-CSS +CSS  
-[[http://​www.codecademy.com/​glossary/​css]] +http://​www.codecademy.com/​glossary/​css 
-[[http://​w3schools.com/​css/​default.asp]]+http://​w3schools.com/​css/​default.asp ​
  
-html tiedostossa:​ +html tiedostossa:​  
-<​style>​ css kama </​style>​ +<​style>​ css kama </​style>​  
-erillisenä tiedostona:​ +erillisenä tiedostona:  
-headiin <link type="text/css"; rel="stylesheet"; href="stylesheet.css"/>+headiin <link type=text/css; rel=stylesheet; href=stylesheet.css/>
  
-selector { +selector {  
-    property: value;+ property: value; ​
 } }
- +  
-/*I'm a comment!*/+/*I'm a comment!*/ ​
  
 font-style: em -relative font-style: em -relative
  
-border-radius -kulmien pyöristys+border-radius -kulmien pyöristys ​
  
-margin: auto; is the CSS you use to tell the browser: ​"Hey! Make sure to set equal margins on each side of this HTML element." ​When the margins are equal, the object is centered. +margin: auto; is the CSS you use to tell the browser: ​Hey! Make sure to set equal margins on each side of this HTML element.” When the margins are equal, the object is centered.  
-text-align: center; is how you center text elements.+text-align: center; is how you center text elements. ​
 There'​s also a very special selector you can use to apply CSS styling to every element on the page: the * selector. ​ There'​s also a very special selector you can use to apply CSS styling to every element on the page: the * selector. ​
  
-<div class="square"></​div>​ +<div class=square></​div>​  
-<img class="square"/> +<img class=square/>  
-<td class="square"></​td>​ +<td class=square></​td>​ 
-.square { +.square {  
-    height: 100px; + height: 100px;  
-    width: 100px; + width: 100px; 
-}+
  
-<div id="first"></​div>​ +<div id=first></​div>​  
-<div id="second"></​div>​ +<div id=second></​div>​  
-<p id="intro"></​p>​ +<p id=intro></​p> ​
-#first { +
-    height: 50px; +
-}+
  
-#second ​+#first {  
-    height: ​100px+ height: ​50px;  
-}+
  
-#intro +#second ​{  
-    color#FF0000+ height100px;  
-}+
  
-selector:​pseudo-class_selector { +#intro {  
-    property: value;+ color: #FF0000;  
 +}  
 + 
 +selector:​pseudo-class_selector {  
 + property: value; ​
 } }
 +
 +**Ma 16.09.2013**
 +
 +Codeacademy jQuery osio tehty.
 +
 +jQuery
 +[[http://​learn.jquery.com/​]]
 +[[http://​jqueryui.com/​]]
 +
 +<script type="​text/​javascript"​ src="​src"></​script>​
 +
 +$(document).ready(function() {
 +    $('​div'​).action(howfast);​
 +});
 +
 +
 +$('​target'​).after('<​tag>​To add</​tag>'​);​
 +
 +$('​selector'​).addClass('​className'​);​
 +$('​selector'​).removeClass('​className'​);​
 +
 +$("​div"​).height("​100px"​);​
 +$("​div"​).width("​50px"​);​
 +
 +$("​div"​).css("​background-color","#​008800"​);​
 +
 +var variable = $('​input[name=fieldName]'​).val();​
 +
 +$(document).on('​event',​ '​selector',​ function() {
 +    Do something!
 +});
 +
 +$(document).ready(function() {
 +   ​$('​div'​).animate({left:'​+=10px'​},​500);​
 +});