meta data for this page
  •  

27.08.2013 Kurssin aloitus

27.08.2013 Java Script - Codeacademy

- Ensimmäisten tehtävien tekoa ja Java Scriptin muistelemista.

- muuttujien esitelyssä niiden tyyppien esittelyn puuttumien häiritsee.

- muuttujien näkyvyyden tarkastelu tehtävä hyvä.

- kivi paperi ja sakset tehtävän iffittely (ilman casea) on hirvittävän näköistä…

28.08.2013 Java Script - Codeacademy

- For:sta ja array:stä olivat hyvät esimerkki tehtävät.

- Objectit ovat loistavia…

var phonebookEntry = {};
phonebookEntry.name = 'Oxnard Montalvo';
phonebookEntry.number = '(555) 555-5555';
phonebookEntry.phone = function() {
console.log('Calling ' + this.name + ' at ' + this.number + '...');
};

this:n käyttö

var setAge = function (newAge) {
this.age = newAge;
};// now we make bob
var bob = new Object();
bob.age = 30;
bob.setAge = setAge;

29.08.2013 Java Script - Codeacademy

Muutama hyvä huomio:

Eräs tapa metodien lisäyksestä 'luokalle'. Mielestäni parempi tapa laittaa ne suoraan luokan sisään.

  // the original Animal class and sayName method
  function Animal(name, numLegs) {
  this.name = name;
  this.numLegs = numLegs;
}
Animal.prototype.sayName = function() {
  console.log("Hi my name is " + this.name);
};

Perintä (inheritance) JS:sä

// original classes
function Animal(name, numLegs) {
  this.name = name;
  this.numLegs = numLegs;
  this.isAlive = true;
}
function Penguin(name) {
  this.name = name;
  this.numLegs = 2;
}
function Emperor(name) {
  this.name = name;
  this.saying = "Waddle waddle";
}
// set up the prototype chain
Penguin.prototype = new Animal();
Emperor.prototype = new Penguin();
var myEmperor = new Emperor("Jules");
console.log( myEmperor.saying ); // should print "Waddle waddle"
console.log( myEmperor.numLegs ); // should print 2
console.log( myEmperor.isAlive ); // should print true

Private Variables

function Person(first,last,age) {
 this.firstname = first;
 this.lastname = last;
 this.age = age;
 var bankBalance = 7500;
 this.getBalance = function() {
    // your code should return the bankBalance      
 };
}
var john = new Person('John','Smith',30);
console.log(john.bankBalance);
// create a new variable myBalance that calls getBalance()

→ = 'private' ja tulos undefined.

private methods:

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);

'luokkan memberit' nimet ja arvot

var languages = {
  english: "Hello!",
  french: "Bonjour!",
  notALanguage: 4,
  spanish: "Hola!"
};
// print hello in the 3 different languages
for (var x in languages)
{
  if (typeof languages[x] === "string") console.log(languages[x]);
}

JS:tä tehty 100%.

29.08.2013 HTML

- HTML:n perusteiden kertausta. Vanhan kertaamista. Muotoilut olivat hyvää kerrattavaa.

02.09.2013 HTML

- Taulukoiden kertaamista. <thead></<thead> , <tbody></tbody>

- CSS (Cascading Style Sheets) kertaamista.

03.09.2013 CCS

- perusperiaate: viittaus stylesheet:iin.

 
 <!--- html sivulla --->
 <link type="text/css" rel="stylesheet" href="stylesheet.css" />
 
 stylesheet.css
 /*CSS esim*/
 h1
 {
  font-family:serif;
 }
 

Muistin virkistykseksi:

Esim.

 selector{ border: 2px solid red;}
 td{ height: 50px; border: 1px dashed blue; }
 table{ border: 1px solid black; }
 a { color:#cc0000; text-decoration:none;}
 h1 {font-family:Verdana,serif; color:#576D94;}
 p {font-size:18px;color:#4A4943;font-family:Garamond;}

Jos ensimmäistä ei löydy niin sitten toinen…

 p {font-size:18px;color:#4A4943;font-family:Garamond,serif;}
 img {height:100px;width:300px;border:1px solid #4682b4;}
 a {text-decoration:none;}
 img {
 	display: block;
 	height: 100px;
 	width: 300px;
 	margin: auto;
 }

Kommentit:

 /*Start adding your CSS below!*/

Sisäkkäiset rakenteet:

 div div div h3 { color:red;}
 ul li a {text-decoration:none;font-family:cursive; }

Kaikki:

  • { border: 1px dashed #3A5FCD; }

class

 <ul class="fancy">
 .fancy
 {
     font-family:cursive;
     color:#0000CD;
  
 }

ID:t

 <ul ID="top">
 #top
 {
     font-family:cursive;
     color:#0000CD;
  
 }

Linkit:

 a:link: An unvisited link.
 a:visited: A visited link.
 a:hover: A link you're hovering your mouse over.

p-first:

 p:first-child {
     color: red;
     font-family:cursive;
 }

4.9.2013

 p:nth-child(2) {
     color: red;
 }

5.9.2013

z-index property. You can think of the z-index as a measure of importance: the higher an element's z-index, the higher it will be “stacked” on the page.

100% tehty.

12.9.2013

Käyttöönotto ja skriptin linkkaus.

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

Perusteita:

 $(document).ready(function() {
     $('div').slideDown('howfast'slow'');
 });
 
 $(document).ready(function() {
     $('div').click(function() {
         $('div').fadeOut('slow');
     });
 });
 $(document).ready(function() {
     var $item = $('div ul li ol li');
     $item.fadeOut('fast');
 });
 :nth-child(4n)
 $(document).ready(function() {
     var $target = $('div ul li ol :nth-child(4n)')
     $target.fadeOut('fast');
 });
 html
 <br/><button>Click Me!</button>
 
 $(document).ready(function() {
  $('button').click(function() {
      $('div').fadeOut('slow');
  });
 });

Selecting by ID

 html
 <div id="blue"></div>
 .js
 $(document).ready(function() {
 
  $('button').click(function() {

       $('#blue').fadeOut('slow');
  });
 });
 

Jos CSS:n on vaikea 'päästä tiettyihin html objektihin'. Voi jQueryllä päästä sivun osiin kiinni.

this

 $(document).ready(function() {
     $('div').click(function() {
         $(this).fadeOut('slow');
     });
 });

Hyvä linkki http://learn.jquery.com/

Creating HTML Elements Inserting Elements

 <p class="info"></p>

$(document).ready(function () {

     $('<p>').append('I'm a paragraph!');
 });

13.9.2013

Elementtien lisäys ja poisto

 $(document).ready(function(){
     $('#one').after("<p>I'm a paragraph!</p>");
     $('#two').after($('p'));
  
     $('p').remove()
 });

Elementin muokkaus.

 $(document).ready(function() {
 $("div").height("200px");
 $("div").width("200px");
 $('div').css('border-radius', '10px');
 });

Elementin arvon hakeminen

 $(document).ready(function() {
 $('#button').click(function() {
 var toAdd = $('input[name=checkListItem]').val();
 });
 });

Dynaaminen

 $(document).ready(function() {
 $('#button').click(function() {
 var toAdd = $('input[name=checkListItem]').val();
 $('.list').append('<div class="item">' + toAdd + '</div>');
 });
 });

ja toinen dynaamien

 $(document).ready(function() {
     $('button').click(function() {
     	var toAdd = $("input[name=message]").val();
         $('#messages').append("<p>"+toAdd+"</p>");
     });
 });
 
 

kutsutaan css:n osia

 $(document).ready(function() {
     $('div').click(function() {
         $(this).fadeOut('fast');
         $(this).addClass('red');
     });
 });

Näppäimistön luku.

 $(document).ready(function() {
  $(document).keydown(function(key) {
      switch(parseInt(key.which,10)) {
		case 65:
			$('img').animate({left: "-=10px"}, 'fast');
			break;
		case 83:
			$('img').animate({down: "-=10px"}, 'fast');
			break;
		case 87:
			$('img').animate({up: "=10px"}, 'fast');
			break;
		case 68:
			$('img').animate({right: "=10px"}, 'fast');
			break;
		default:
			break;
	}
});

});

animate, explode,bounce,slide,draggable,resizable,ready:

animate

$(document).ready(function() {
    $('img').animate({top:'+=100px'},1000);
});

räjädys efekti

$(document).ready(function() {
    $('div').click(function() {
      	$(this).effect('explode');
  	});
});

bounce

$(document).ready(function() {
  	$('div').click(function() {
      	$(this).effect('bounce',{times:3}, 500);
      });
});

slide

$(document).ready(function() {
    $('div').click(function() {
      	$(this).effect('slide',{times:3}, 500);
  	});
});

draggable

$(document).ready(function() {
  	$('#car').draggable(function() {
  	});
  });

resizable

$(document).ready(function() {
  	$('div').resizable(function() {
  	});
});

sortable

$(document).ready(function() {
  	$('ol').sortable(function() {
});
});

100% tehty.

18.09.2013 Harjoitus 4:n tekoa

Tärkeä havainto, eli tarvitaan hakea jqueryn ajoon sopiva kirjasto esim. seuraavalta palvelimelta tai sitten tuo haetaan paikallisesti.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Ja toteutuksen periaate:

index.html:

<input name="Go" type="button" value="Add" onclick="doIt();"/>

script.js:

$(document).ready(function()
{ 
	  doIt = function() { 
      
  	var toAdd = $('input[name=checkListItem]').val();
$('.list').append('<li>' + toAdd + '</li>');
      
    };
}
)

24.09.2013 Harjoitus 5:n teko

Muutama hyvä linkki aiheeseen:

http://stackoverflow.com/questions/4996002/jquery-get-index-of-element-as-child-relative-to-parent

http://api.jquery.com/toggleClass/

25.09.2013 Canvas

HTML elements. But we can—and will!—manipulate the <canvas> element directly with JavaScript. No jQuery needed!

      <body>
      <canvas id="a" width="200" height="200">
          This text is displayed if your browser does not support HTML5 Canvas.
      </canvas>
      </body>
      var a_canvas = document.getElementById("a");
      var context = a_canvas.getContext("2d");
      // Draw the face
      context.fillStyle = "yellow";
      context.beginPath();
      context.arc(95, 85, 40, 0, 2*Math.PI);
      context.closePath();
      context.fill();
      context.lineWidth = 2;
      context.stroke();
      context.fillStyle = "black";

Loista linkki: http://www.benjoffe.com/code/demos/canvascape Tuolta löytyy hyviä demoja ja lähdekoodit niihin.

27.09.2013 PHP

Palvelin puolen ohjelmointia PHP:llä.

PHP (originally Personal Home Page, but now PHP: Hypertext Preprocessor) was created by Rasmus Lerdorf in 1995. Lerdorf came up with PHP just to maintain his personal home page (hence the name), but it has since grown to become one of the most popular programming languages in use today.

You might have noticed that our main file is now index.php instead of index.html. This is important! It tells the PHP interpreter that there's PHP code in the file to evaluate.

Hello World:

    <?php
    $welcome = "Let's get started with PHP!";
    echo $welcome;
    ?>

concat:

    <?php echo "Hello," . " " . "world" . "!";?>

Muuttujat:

    $year = 2013;

Kommentit:

    // I don't! I'm a comment.

if:

    <?php
      $teabags = 3;
      
      if ($teabags > 0) {
        echo "There are tea bags! I'll have a cup!";
      } else {
        echo "No more tea! I guess I won't have a cup.";
      }
    ?>

Vertailu:

      <, less than (e.g., 6 < 7)
      > greater than (e.g, 7 > 6)
      == equal to (e.g., 2 == 2)
      <= less than or equal to (e.g, 2 <= 3)
      >= greater than or equal to (e.g., 3 >= 2)
      != not equal to (e.g., 6 != 3)

if/elseif/else

      if (condition) 
      {
      
      } elseif (condition) 
      {
      
      } else 
      {
      }
      

switch case

  switch (2) {
      case 0:
          echo 'The value is 0';
          break;
      case 1:
          echo 'The value is 1';
          break;
      case 2:
          echo 'The value is 2';
          break;
      default:
          echo "The value isn't 0, 1 or 2";
  }

Taulukot:

  <?php
    $array = array("Egg", "Tomato", "Beans");
  ?>
  
  vaihtoehtonen sytaksi
      
      $tens = array(0, 20, 30, 40, 50);
      echo $tens{2};
      
      

<?php

// Create an array and push 5 elements on to it, then 
      // print the number of elements in your array to the screen
            $fav_bands = array();
            array_push($fav_bands, "Maroon 5");
            array_push($fav_bands, "Bruno Mars");
            array_push($fav_bands, "Nickelback");
            array_push($fav_bands, "Katy Perry");
            array_push($fav_bands, "Macklemore");
            print count($fav_bands); // prints 5

elementtien poisto taulukosta:

      <?php
              $array = array("red", "blue", "green");
              unset($array[2]);
      ?>

Tai koko taulukkon poisto:

      <?php
        unset($array);
      ?>

for loop:

  <?php
    for ($leap = 2004; $leap < 2050; $leap = $leap + 4) {
      echo "<p>$leap</p>";
    }
  ?>

foreach:

        $langs = array("JavaScript",
        "HTML/CSS", "PHP",
        "Python", "Ruby");
      
        foreach ($langs as $lang) {
            echo "<li>$lang</li>";
        }

while:

while ($headCount < 3) {
	$flip = rand(0,1);
	$flipCount ++;
	if ($flip){
		$headCount ++;
		echo "<div class=\"coin\">H</div>";
	}
	else {
		$headCount = 0;
		echo "<div class=\"coin\">T</div>";
	}
}
echo "<p>It took {$flipCount} flips!</p>";

Do while:

$flipCount = 0;
do {
	$flip = rand(0,1);
	$flipCount ++;
	if ($flip){
		echo "<div class=\"coin\">H</div>";
	}
	else {
		echo "<div class=\"coin\">T</div>";
	}
} while ($flip);

String:n käsittelyä:

$length = strlen("jussi");
$myname = "Jussi";
  	$partial = substr($myname, 0, 3);      
 	$lowercase = strtolower($partial);
      $uppercase = strtoupper($partial);
      
      $pos = strpos("david", "v");
print $pos;  // prints 2

pyöristys:

      $round = round(M_PI);
      print $round;  // prints 3

sort / rsort - funktiot:

<html>
 	<p>
<?php
	// Create an array with several elements in it,
	// then sort it and print the joined elements to the screen
	$names = array("david","alana","violet","rory");
	sort($names);
	print join(", ", $names);
?>
</p>
<p>
<?php
	// Reverse sort your array and print the joined elements to the screen
	$names = array("david","alana","violet","rory");
	rsort($names);
	print join(", ", $names);
?>
</p>
</html>

php:n funktiot

        function helloWorld() {
          echo "Hello world!";
        }
        
        // ...and here we call it!
        helloWorld();

Luokan esittely:

    <?php
      // The code below creates the class
      class Person {
          // Creating some properties (variables tied to an object)
          public $isAlive = true;
          public $firstname;
          public $lastname;
          public $age;
          
          // Assigning the values
          public function __construct($firstname, $lastname, $age) {
            $this->firstname = $firstname;
            $this->lastname = $lastname;
            $this->age = $age;
          }
          
          // Creating a method (function tied to an object)
          public function greet() {
            return "Hello, my name is " . $this->firstname . " " . $this->lastname . ". Nice to meet you! :-)";
          }
        }
        
      // Creating a new person called "boring 12345", who is 12345 years old ;-)
      $me = new Person('boring', '12345', 12345);
      
      // Printing out, what the greet method returns
      echo $me->greet(); 
      ?>
      

Luokan ominaisuuksien tarkastelua:

      $me = new Person("Shane");
      if (is_a($me, "Person")) {
        echo "I'm a person, ";
      }
      if (property_exists($me, "name")) {
        echo "I have a name, ";
      }
      if (method_exists($me, "dance")) {
        echo "and I know how to dance!";
        

Perintä:

      class Shape {
        public $hasSides = true;
      }
      
      class Square extends Shape {
      
      }
      
      $square = new Square();
      // Add your code below!
      if ( ) {
        echo "I have sides!";
      }
      

Ylikirjoittamisen esto alaluokassa:

        final public function honk() {
          return "HONK HONK!";
        }

staattiset functiot:

      class King {
        // Modify the code on line 10...
        public static function proclaim() {
          echo "A kingly proclamation!";
        }
      }
      // ...and call the method below!
      King::proclaim();
    ?>
    
  <?php
    class Person{
        public static function say(){
            echo "Here are my thoughts!";
        }
    }
    class Blogger extends Person{
        const cats = 50;
    }
    Blogger::say();
    echo Blogger::cats;
    ?>
    

Taulukot:

      $fruits = array("bananas","apples","pears");  
      echo 'I love eating ' . $fruits[1]/* Your code here! */ . ' too!';
      

Avain arvoparit: Associative Arrays

      $myArray = array(2012, 'blue', 5);
      // ...and this is an associative array:
      $myAssocArray = array('year' => 2012,
                      'colour' => 'blue',
                      'doors' => 5);
          
      // This code will output "blue"...
      echo $myArray[1];
      echo '<br />';
          
      // ... and this will also output "blue"!
      echo $myAssocArray['colour'];
      

Moniulotteiset taulukot:

    <?php
      $deck = array(array('2 of Diamonds', 2),
                    array('3 of Diamonds', 3),
                    array('5 of Diamonds', 5),
                    array('7 of Diamonds', 7));
      
    // Imagine the first chosen card was the 7 of Diamonds.
    // This is how we would show the user what they have:
    echo 'You have the ' . $deck[2][0] . '!';
    ?>
    $myArray2 = array('Oakley','Telford');
    $myArray = array ('Oakley' => 'Arran', 'Telford' => 'Sinclair', 'Stafford' => 'Crooked Bridge', 'Cheadle' => 'Victoria');
    echo $myArray['Stafford'] . ','. '<br /><br />' ;
     $count = count($myArray2);
     for ($i=0; $i<$count; $i++){
         echo $myArray2[$i] . ', <br />';
     }
     foreach ($myArray as $town=>$road){
           echo $town . ', ' . $road . '<br />'; 
     }

100% PHP:stä. tehty.