Hello Cordova Device

Julkaistu kirjoittanut Petri Mäki

Hello Cordova Device

Tässä viestissä käydään lävitse yksinkertainen cordova api, joka tällä kertaa on connect api. Esimerkissä jos puhelimessa ei ole internet (3g/wifi) käytössä niin ohjelmaa ei käynnistetä.

Muista myös liittää cordova.js eli:

<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>

Jos et ole varma kuinka asennat Cordovan / Phonegapin voit katsoa tämän viestin tai Tero karvisen viestin

Seuraava koodi toimii Cordova 2.1.0 versiolla testatusti:

<script type="text/javascript" charset="utf-8">

    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is loaded and it is now safe to make calls Cordova methods
    //
    function onDeviceReady() {
        checkConnection();
    }

    function checkConnection() {
        var networkState = navigator.network.connection.type;

	
		if (networkState == 'none') {
       	 alert('No connection');
		} else {
			window.location.replace("varipeli.html"); // Jos netti kutsutaan haluttua sivua samassa kansiossa
       	 //alert('Connection type: ' + networkState);
        }
    }


    </script>

Koodi on suora muokkaus Phonegapin sivuilla esitetystä esimerkistä pienellä muokkauksella

Lähteet

Terokarvinen.com
http://docs.phonegap.com/en/2.0.0/index.html

Lisenssi

Tätä dokumenttia saa kopioida ja muokata GNU General Public License (versio 2 tai uudempi) mukaisesti. http://www.gnu.org/licenses/gpl.html

Jquery-remember-right-game

Julkaistu kirjoittanut Petri Mäki

Jquery remember right game

Release version

<!doctype html>
<html>
	<head>
	<title>Remember Right | Game</title>
	<script src="js/jquery-1.10.2.min.js"></script>
		<link rel="stylesheet" type="text/css" href="game.css">
	</head>
	<body>
		<center>
			
<b>Ohje:</b> Katso oikea järjestys ja valitse tämän jälkeen värit samassa järjestyksessä.
 
			<form>
				<input id="start" type="submit" value="Aloita peli" />
			</form>
		</center>
<div id="div1"><span id="w1">X<span></div>
<div id="div2"><span id="w2">X<span></div>
<div id="div3"><span id="w3">X<span></div>
<div id="div4"><span id="w4">X<span></div>
<script type="text/javascript">

		// Game made by: Petri Mäki
		// http://www.petrimaki.wordpress.com
		// This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
		// More info about license: http://creativecommons.org/licenses/by-nc-nd/3.0/

			var rungame = false;
			var level = 1;
			var ms = ["#w1", "#w2", "#w3", "#w4" ];
			var myArray = []; // contains right moves each round
			var sFull = ""; // max moves every round
			var s = 0; // current move

			$("#start").click(function(){
				$(this).hide();
				newGame();
				return false;
			});

			var move = "";
			$( "#div1" ).click(function() {	
				if(rungame) {
					move = "#w1";
					checkMove(move);
				}
			});
			$( "#div2" ).click(function() {
				if(rungame) {
					move = "#w2";
					checkMove(move);
				}
			});
			$( "#div3" ).click(function() {
				if(rungame) {
					move = "#w3";
					checkMove(move);
				}
			});
			$( "#div4" ).click(function() {
				if(rungame) {
					move = "#w4";
					checkMove(move);
				}
			});

			function checkMove(move) {
				if (myArray[ 0 ] == move) {
					s++;
					$("p").text("Oikea siirto! " + s + "/" + sFull);
					myArray.shift() //Remove 0 index from array
				} else {
					rungame = false;
					s = 0;
					$("p").text("Valitsit väärän värin! Peli ohitse. Pääsit tasolle: " +level);
					level = 1;
					$('#start').val('Haluatko yrittää uudestaan?');
					$('#start').show();
				}

				if (myArray.length == 0) { // Player won
					rungame = false;
					s = 0;
					level++;
					$("p").text("Muistit kaikki oikein! Seuraava taso on: " + level);
					$('#start').val('Siirry seuraavalle tasolle');
					$('#start').show();
					myArray = ["#w1", "#w2", "#w3", "#w4" ];
				}
			}

			function newGame() {
				myArray = [];
				for (var w =0; w < level + 3;w++) {
					var n = Math.floor((Math.random()*4));
					myArray.push(ms[n]); // Add random spans to array
				}
				sFull = myArray.length;
				var lastI = myArray.length - 1;
				$("p").text("Sinun tulee muistaa " + myArray.length+ " siirtoa. Taso: " + level);
				$.each(myArray, function(i, val) {
					setTimeout(function() {
						$(myArray[i]).fadeIn("normal", function() {
							$(this).fadeOut("normal");
							if (i == lastI) { // If last array index let player start game
								rungame = true;
								$("p").text("Aloita!");
							}
						});
					}, i * 2500);
				});
			}
		</script>	
</body>
<html>

Demo

Pelaa peliä

Lähteet

* Terokarvinen.com
* Jquery.com

Lisenssi

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
More info about license: http://creativecommons.org/licenses/by-nc-nd/3.0/

JQuery aloitus

Julkaistu kirjoittanut Petri Mäki

Tässä viestissä käydään lävitse JQueryn asennus ja käyttöönotto, sekä yksinkertainen Hello World JQuerylla. Kaikki allaolevat koodit ovat vapaasti käytettävissä.

JQuery asennus ja käyttöönotto
Aluksi lataa JQuery osoitteesta http://www.jquery.com ja tallenna se. Itse tallensin kyseisen tiedoston /js kansioon index.html tiedoston alle, jonka loin samalla. Nyt olet asentanut JQueryn.

JQuery hello world

<!DOCTYPE html>
<html>
    <head>
		<title>Hello JQuery world</title>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>
	<body>
			<script type ="text/javascript">
				$(document).ready(function(){
					$("#msgid").html("Hello world from JQuery");
				});

			</script>
			<p>HTML text</p>

			<div id="msgid"></div>
	</body>
</html>

Fadeout & Lomakkeen arvon lukeminen

Seuraavassa esimerkissä luetaan lomakkeesta arvo. Mikäli arvo on ”salainen” niin kerrotaan käyttäjälle että se on oikein. Muistathan että kyseinen ratkaisu ei ole tietoturvallinen salasanojen kyselyyn!

<!DOCTYPE html>
<html>
    <head>
		<title>Hello JQuery world</title>
		<style>span {display:none;}</style>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>
	<body>
  <form action="javascript:alert('Oikein!');">
    <div>

	  <p>Salainen sana: <input type="password" /><br> <span id="vinkki" ></span></p>
      <input type="submit" />
    </div>
  </form>
  <span id="result"></span>
<script>

$("form").submit(function() {
  if ($("input:first").val() == "salainen") {
    $("#result").text("Oikein...").show(); //Tulostetaan span id="result" kenttään
    return true;
  }
  $("#result").text("Pieleen meni! Muista salainen").show().fadeOut(1000); //fadeOut = 1000 ms
  return false;
});

$("p").focusin(function() {
	$("#vinkki").text("Vinkki: Salaisen sanan tulee olla salainen").show().fadeOut(6000); //fadeOut = 6000 ms
});
</script>

</body>
</html>

Yksinkertaista lukujen kertomista

Syöttämällä 2 lukua JQuery kertoo ne.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Yksinkertaista kertomista</title>
  <style>

  p { color:blue; margin:8px; }
  	</style>
  <script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
  Anna luku1: <input id="first" type="text" value="2"/><br><br>
  Anna luku2:<input id="second" type="text" value="3"/>
  <p></p>
<script>
    $("input").keyup(function () {
      var firstValue = $("#first").val();
	  var secondValue = $("#second").val();
	  if($.isNumeric(firstValue)&&$.isNumeric(secondValue)) //Vain numeerisia arvoja
	  {
		var result = firstValue * secondValue;
	        $("p").text("Tulos: " + result);
	  } else {
		$("p").text("Vain numeroita!");
	  }
    }).keyup();
</script>

</body>
</html>

Lähteet

http://api.jquery.com/
http://www.terokarvinen.com

Lisenssi

Tätä dokumenttia saa kopioida ja muokata GNU General Public License (versio 2 tai uudempi) mukaisesti. http://www.gnu.org/licenses/gpl.html