meta data for this page
  •  

CT30A3201 WWW-sovellukset 2013 - Oppimispäiväkirja - Janne Föhr

Ke 28.08.2013 - Puolet JavaScript tehtävistä tehty. JS-muistiinpanoja:

Eri popuppeja:

  • confirm(question); popup, confirmation
  • prompt(question); popup, input
  • alert(); popup

“some word”.substring(x, y); where x is where you start chopping and y is where you finish chopping the original string.

var nameOfFunction = function(parameter) {

functionCode

} - funktion luonti

if (typeof(x) != 'number') return 0; -tyypin chekkaus

Eri loopit:

for (var i = 0; i < x; i++) {

code

}

while (true) {

ends with false

}

do {

code that runs atleast once

} while (condition);

var arrayName = [data, data,…]; -array

Math.floor(Math.random() * 2); 0 tai 1 Math.floor(Math.random() * 5 + 1); 1 ja 5 välistä kokonaisluku

Ma 2.9.2013 Loput JS-tehtävät tehty. Muistiinpanot:

switch (/*Some expression*/) {

  case 'option1':
      // Do something
      break;
  case 'option2':
      // Do something else
      break;
  case 'option3':
      // Do a third thing
      break;
  default:
     // Do yet another thing

}

var color = prompt(“What's your favorite primary color?”,“Type your favorite color here”); -promptiin auto text täyttö fieldiin

logical operators. JavaScript has three: and (&&), or (||), and not (!).

var myObject = {

  key: value,
  key: value,
  key: value

};

var myObj = new Object(); myObj[“name”] = “Charlie”; myObj.name = “Charlie”;

var friends = {

  bill: {
      firstName: "Bill",
      lastName: "Gates",
      number: "(206) 555-5555"
  }

}; -object inside an object

for (var something in object) {

  // Do something

} - läpikäynti for-in

konstruktori function Person(name, age) {

this.name = name;
this.age = age;

}

var family = new Array(); - Arrayn luonti new komennolla

Ke 4.9.2013

Codeacademy HTML osio tehty.

HTML-muistiinpanot: <!DOCTYPE HTML> -alkuun

-koko roska

<head> </head> -sivun tietoja <title> </title> -title of the page

<body> </body> -sivun sisältö <h1> </h1> -header (h1-h6) <p> </p> -paragraph <img src=“url” /> -kuva <a href=“URL”> <klikattava> </a> -linkin teko <ol> <li> </li> </ol> -ordered list (li → list item) <ul> <li> </li> </ul> -unordered list

<!– This is an example of a comment! –> -kommentti

<p style=“font-size: 12px”> </p> -fontin koon muuttaminen style=“color:green; font-size:16px” -puoli pisteellä useita stylejä kerralla style=“font-family: red” -fontin vaihto style=“background-color: red” <h1 style=“text-align:center”> -(left, right)

<strong> </strong> -bold <em> </em> -italicize

<table> </table> (<thead></thead> (<th></th>), <tbody></tbody>) <tr> </tr> -row <td> </td> -data <th colspan=“3”>3 columns across!</th>

To 5.9.2013

Codeacademy CSS osio käyty läpi.

CSS http://www.codecademy.com/glossary/css http://w3schools.com/css/default.asp

html tiedostossa: <style> css kama </style> erillisenä tiedostona: headiin <link type=“text/css”; rel=“stylesheet”; href=“stylesheet.css”/>

selector {

property: value; 

}

/*I'm a comment!*/

font-style: em -relative

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. 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.

<img class=“square”/> <td class=“square”></td> .square {

height: 100px; 
width: 100px;

}

<p id=“intro”></p>

#first {

height: 50px; 

}

#second {

height: 100px; 

}

#intro {

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

});