meta data for this page
  •  

30.8.2013
- Tutustuttu kurssin sisältöön
- Aloitettu wikin käyttö
- Ensimmäinen JS-osio suoritettu
- Introduction to functions in JS suoritettu
__
Päivän aikana opittua:
Tutustuminen JavaScriptiin ja sen komentoihin:
console.log()
var xxx = function(x, y)
if (clause) { } else { }
xxx(x, y) funktion kutsuminen
“string”.length
merkkijonon pituus
“string”.substring(x, y)

1.9.2013
JS-intensiivikurssin suorittaminen jatkuu
for-rakenne:

  for (i = 1; i < 10; i++){\\
     console.log(i);\\
  }\\

Array on muuttujalista esim. var names = [“jussi”,“jaska”,“mikko”,1,2,3,4];
Se alkaa nollasta eli names[0] === “jussi”
Sisäkkäiset for-loopit: j=i

Sain vielä tehtyä while-loop osiot.
While on hyvin yksinkertainen. Jos ehto on tosi (true), niin loop pyörähtää niin monta kertaa,
että ehto muuttuu epätodeksi. Muussa tapauksessa syntyy infinite loop. Do-While tekee loopin ensin
kerran ja katsoo sen jälkeen onko ehto tosi.

2.9.2013
JS-osio jatkuu…
isNaN(variable) katsoo onko muuttuja numero.
prompt(x,y)
switch-rakenne: switch(muuttuja), case“blabla”: case case, default
Logical operators: and &&, or ||, not !
Objects:

var object1 = {
 type:"attribute",
 type2:"attribute
};

for-in rakenne: for(var i in object) {}

Objektit voi määritellä seuraavin tavoin:

var xxx = new Object();
xxx.attribute = "jotain";
xxx.attribute2 = 10;

tai

var xxx = {
   attribute: "jotain",
   attribute2: 10
};

Object constructor: objektit voi myös määritellä parametreinä constructorin avulla:

function Person(a1, a2) {
   this.attribute: "jotain";
   this.attribute2: jotain myös";
}

Niille voi myös antaa methodeja eli funktioita objektien sisällä.

someObj.hasOwnProperty(“propertyName”)
typeof
Objektit ovat luokkien instansseja
Kaikki luokan objektit oppivat prototyypin välittömästi kun sellainen laaditaan tai
instanssi lisätään luokkaan.
Inheritance: Luokat voivat periä ominaisuuksia toisiltaan: esim. Penguin.prototype = new Animal();
Pitkän väännön ja virheiden kautta oppimisen päätteeksi sain JavaScript osion vihdoin tehtyä.
Intensiivikurssi oli erittäin opettavainen ja eteni sopivin askelin, jotta missään vaiheessa ei
jäänyt täysin jumiin tehtävien kanssa.

5.9.2013
Html-osion aloitus Codeacademyssa.
Ensivaikutelma html:stä on leppoisan mukava verrattuna muihin kieliin mitä on tullu opeteltua.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>

Kuvien linkittäminen ja hyperlinkkien tekeminen:

<img src="kuvan URL"/>
<a href="haluttu URL">tähän tekstiä tai kuva</a>

5.9.2013
Aamupäivän harkkojen tuotosta:
HTML basics 2 ja 3 osiot:

Taulukko table:

<table border="1px">
  <thead></thead>
      <tr>
          <th colspan="3">JOTAIN DATAA TÄHÄN</th>
      </tr>
  <tbody></tbody>
      <tr> <!--rivi taulukossa-->
          <td>DATAA TAULUKKOON</td>
          <td>TOINEN SARAKE SAMALLA RIVILLÄ</td>
      </tr>
</table>

Divide-toiminto ja span:

<div style="width:10px ; height:10px; background-color: yellow"></div>
<span style="font-family: Futura; color:red"></span>

6.9.2013
CSS-osio Codeacademyssa. Ensimmäistä opittua:

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

HTML-tiedoston <head>iin tuo.

7.9.2013
CSS-osiota Codeacademyssa:

p {
  color: purple,#A3B3FF;
  font-size: 0.5em;
  font-family: Tahoma, Times, serif;
  font-weight:bold;
}
  /*Nappulan teko:*/
div {
  height:50px;
  width:120px;
  border:2px solid #6495ED;
  background-color:#bcd2ee;
  border-radius:5px, 100% (saa ympyrän);
  margin: auto;
  text-align:center;
}
a {
  color:#ffffff;
  text-decoration:none;
}
span {
  font-size:16px;
  color:blue;
}
div > p { /*suoraan divin alla olevat p:t*/ }
.red {} viittaa class="red" elementteihin
#id {} viittaa id="id" elementteihin

Pseudo-class selectoreja: a:link, a:visited, a:hover, p:first-child, p:nth-child(2)

margin/padding-left-top-bottom-right:value;
margin:topvalue rightvalue bottomvalue leftvalue;
position:absolute;relative;static;fixed;
display:inline-block;block;inline;none;
float:left;right;
clear:left;right;both

Sain html/css-osion suoritettua loppuun asti. Mielenkiintoinen ja opettava osio, tosin en usko, että tämän
avulla vielä pystyisin minkäänlaisia nettisivuja koodaamaan, mutta ehkä se ei ollutkaan tarkoitus.

12.9.2013
JQuery-osion aloitus codeacademyssa.
Kuinka tehdään elementistä objekti

var paragraph = $("p");

html:n headiin:

<script type="text/javascript" src="script.js"></script>

näin aloitetaan jscript-koodi:

$(document).ready(function(){

});

esimerkki funktiosta:

$(document).ready(function() {
  $("div").slideDown("slow");
});

nappula, joka tummenee vain, kun hiiri saapuu sen kohdalle:

$(document).ready(function(){
  $("div").mouseenter(function(){
      $("div").fadeTo("fast", 1);
  });
  $("div").mouseleave(function(){
      $("div").fadeTo("slow", 0.5);
  });
});

Kiva koodinpätkä divin “hightlightaamiseksi” kun hiiri on sen päällä:

$(document).ready(function(){
  $("div").mouseenter(function(){
      $("div").fadeTo("fast",1);
  });
  $("div").mouseleave(function(){
      $("div").fadeTo("fast",0.25);
  });
});

$(“this”).action() viittaa vain kyseiseen elementtiin, vaikka monella olisi sama nimi.
Kokoelma event handlereita jQuery-harjoituksista:

.click()
.hover()
.fadeOut()
.fadeIn()
.fadeTo(x,y)
.hide()
.slideToggle()
.mouseenter()
.mouseleave()
.append()
.prepend()
.appendTo()
.prependTo()
.before()
.after()
.empty()
.remove()
.addClass()
.removeClass()
.toggleClass()
.height("10px")
.width("100px")
.css("element to alter", "value")
.html("set value")
$("element").val() /*get value*/

$(document).on('event', 'selector', function() {
  Do something!
});

.effect("explode")
 $(this).effect("bounce",{times:3},500);
.dblclick()
.focus()
.keydown()
$('div').animate({left:'-=10px'},500); /*vasemmalle 500 millisekunnissa*/
$('div').animate({left:'+=10px'},500); /*oikealle*/
$('div').animate({top:'+=10px'},500); /*alas*/
$('div').animate({top:'-=10px'},500); /*ylös*/

$("#menu").accordion({collapsible: true, active: false});
.draggable()
.resizable()
.selectable()
.sortable()

jQuery UI:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

Semmonen oli jQuery-osio Codeacademyssa. Mielenkiintoinen ja haastava, tosin ei yhtä haastava kuin javaScript-osio.
Totesin, ettei edes kannata yrittää muistaa kaikkia event handlereita ulkoa, vaan kiinnittää mielummin huomiota
syntaksin oikeellisuuteen ja kokonaisidean ymmärtämiseen. Event handlerit voi sitten tarvittaessa luntata checklististä.