meta data for this page
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; }