Marko Leso:n opintopäiväkirja kurssille www-sovellukset (2013)

---

2.9.2013

Olen suorittanut noin 75% codeacademyn javascript tehtävistä aloittaen edellisen viikon tiistaista. Javascriptistä opin sen että se muistuttaa hyvin paljon c++-ohjelmointikieltä. Opin että CodeAcademyn java-script harjoituksissa konsoliin voi tulostaa tekstiä näin: console.log(“Tekstiä!”).

---

10.9.2013

Taas tässä on tullut viimeisen viikon väsättyä CodeAcademyn tehtäviä. Tällä kertaa aiheena oli HTML-kuvauskieli ja siihen liittyvä tyylikirjasto CSS. Tehtävistä sain noin 50% tehtyä. Opin sen että HTML toimii puurakenne tyylisesti. Tagien sisään sisällytetään tageja, mikä luo syntaksista puurakenne tyylisen.

Cascading Style Sheetsistä opin sen, että se helpottaa HTML-sivujen muotoilua, vähentää työmäärää ja auttaa saman tyylisten sivujen luomisessa myöhemmin.

---

19.9.2013

 function Person(first,last,age) {
 this.firstname = first;
 this.lastname = last;
 this.age = age;
 var bankBalance = 7500;

 var returnBalance = function() {
    return bankBalance;
 };
     
 // create the new function here
 this.askTeller = function(){
     return returnBalance
    
 }
 }

 var john = new Person('John','Smith',30);
 console.log(john.returnBalance);
 var myBalanceMethod = john.askTeller();
 var myBalance = myBalanceMethod();
 console.log(myBalance);

Opin että constructor muistuttaa paljon funktion määrittelyä ja sen että funktioita voidaan myöhemmin lisätä luokkaan myös sen luonnin (constructor) jälkeen.

---

19.9.2013

CodeAcademyn JavaScript osuudet 100% tehtynä.

---

24.9.2013

Opettelin Canvas-elementin käyttöä. Opin sen että canvas-elementtejä voi manipuloida javascriptin avulla.

 var my_canvas = document.getElementById("canvas");
 var context = my_canvas.getContext("2d");
 
 context.beginPath();
 context.arc(95,85,40,0,2*Math.PI);
 context.stroke();
 
 context.fillStyle = "blue";
 context.fillRect(10,10,50,20);
 
 context.font = "30px Garamond";
 context.fillText("Hell-o!",15,175);

---

24.9.2013

Opettelin HTML ja Javascriptin yhdistämistä.

      <h3>Changing content</h3>
<p id="demo">
JavaScript can change the content of an HTML element.
</p>
<script>
function myFunction()
{
x=document.getElementById("demo");  // Find the element
x.innerHTML="Hello JavaScript!";    // Change the content
}
</script>
<button type="button" onclick="myFunction()">Change it!</button>
<br><br><br>

---

25.9.2013

Tein loppuun harjoitus nelosen. Opin että elementtejä voi kutsua javascript funktiolla getElementById(“demo”) ja kirjoittaa elementin päälle x.innerHTML=“Hello JavaScript!”. Opin myös että formeja ei voi jokaisella browserilla kutsua samalla tavalla kuin muita elementtejä. Formin kutsu tapahtuu jotenkin näin: forms[“myForm”]…

---

26.9.2013

Opettelin CSS-harkkoja CodeAcademystä. Opin sen että samannimisiä classejä ja divejä ja id:eitä voi muuttaa samaan aikaan. Opin että värit voi ilmoittaa hexadesimaaleilla. Värien ilmoittaminen voi myös tapahtua sanamaisesti (black, yellow, black and yellow… rofl). Alhaalla on jotain perusjuttuja CSS:stä.

 /*Write your CSS below!*/
 h1{
 font-family:impact;
 font-size:25px;
 color:silver;
 }
 p{
 font-family:Verdana;
 font-size:15px;
 color:brown;
 }

---

27.9.2013

CSS: div-palkkeja ja muita blokkeja voi siirrellä näin esim:

 div {
 height: 50px;
 width: 100px;
 border: 2px solid black;
 border-radius: 5px;
 background-color: #308014;
 margin: 20px 50px 10px 5px;
 }

---