Hello Cordova Device

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

Mainokset

Jquery-remember-right-game

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

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