Diskussion:HTML, CSS och Javascript - Versionshistorik

Hakan: /* Bortplockat */

2019-09-03T09:24:35Z

Bortplockat

← Äldre version		Versionen från 3 september 2019 kl. 09.24
Rad 31:		Rad 31:

	== Bortplockat ==		== Bortplockat ==

			=== Inlämning ===

			Det räcker med att lämna in ritprogrammet. Därför har denna rad tagits bort:
			: Du ska lämna in koden.Kopiera koden till Anteckningar och spara den med ändelsen .html. Den lämnar du in på Canvas - Teknik 1.

	= Ritprogrammet =		= Ritprogrammet =

Hakan: /* Bortplockat */

2019-08-27T21:31:18Z

Bortplockat

← Äldre version		Versionen från 27 augusti 2019 kl. 21.31
Rad 31:		Rad 31:

	== Bortplockat ==		== Bortplockat ==

			= Ritprogrammet =

			=== Enkel kod för ritprogram på spelprogrammering.nu ===

			Den här koden går inte att köra på w3school men den funkar fint på spelprogrammering.nu i deras [http://koda.nu/labbet/ Kodlabbet].

			Det här är en bra '''komplettering''' om du inte har lyckats så bra med uppgifterna ovan.

			==== Kod för spelprogrammering.nu ====

			{{uppgruta \| '''Ritprogrammet'''
			[[Fil:Skärmavbild 2016-11-10 kl. 08.59.40.png\|200px \| right]]

			Ta koden nedan och förbättra till ett fantastiskt ritprogram.

			Det innebär att du lägger in fler färger, förklarande bokstäver och mousover-funktioner. Du kommer att kopiera från den befintliga koden och ändra vissa parametrar. När du gör detta kommer du att lära dig mer programmering. Lägg in en text som förklarar viilka funktioner ditt ritprogram har.

			Spara koden som en fil av typen .html.

			}}

			Observera att denna kod inte fungerar riktigt i Safari. Använd '''Chrome'''.

			{{Lista \|
			<pre>
			<!DOCTYPE html>
			<html>
			<head>
			<title>Page Title</title>
			</head>
			<body>

			<canvas id="myCanvas" width="400" height="500"
			style="border:1px solid #d3d3d3;">
			Your browser does not support the canvas element.
			</canvas>

			<script src="http://spelprogrammering.nu/simple.js">

			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");

			var x0 = 50;
			y0 = 30;
			bredd =40;
			hojd = 40;
			distance = 40;
			color = "green";
			radie = 10;
			size = 22;

			function myRectangle(x, y, w, l, color) {
			ctx.fillStyle = color;
			ctx.fillRect(x, y, w, l);
			}

			function myCircle(x, y, r, t, color) {
			ctx.beginPath();
			ctx.arc(x,y,r,t, 2.2*Math.PI);
			ctx.fillStyle = color;
			ctx.fill();
			}

			function myText(x, y, size, text, color)
			{
			ctx.font = size + "pt Helvetica";
			ctx.fillStyle = color;
			ctx.fillText(text, x, y);
			}

			function update()

			{
			// rita de färgade rutorna
			this.myRectangle(x0, y0, bredd, hojd, "green");
			this.myRectangle(x0, y0 + distance, bredd, hojd, "blue");
			this.myText(x0-30, y0 + distance+25, 18, "b", "blue");
			this.myRectangle(x0, y0 + 2 * distance, bredd, hojd, "yellow");
			this.myRectangle(x0, y0 + 3 * distance, bredd, hojd, "pink");

			// rita med vald färg
			if(mouse.left)
			{
			this.myCircle(mouse.x, mouse.y, radie, 2,color);
			}
			// sudda med vit färg genom högerklick

			if(mouse.right)
			{
			this.myCircle(mouse.x, mouse.y, radie, 2,"white");
			}
			// välj färg att rita med
			if ((mouse.x > x0) && (mouse.x < x0 + bredd) && (mouse.y > y0)
			&& (mouse.y < y0 + hojd)) { color = "green"; }
			if (keyboard.g) { color = "yellow"; }
			if (keyboard.b) { color = "blue"; }

			// Välj radie på cikeln du ritar med
			if (keyboard.one) { radie = 2; }
			if (keyboard.two) { radie = 4; }
			if (keyboard.three) { radie = 8; }
			}
			</script>

			</body>
			</html>
			</pre>
			}}



			<headertabs />


	=== Ett spel med klickbara knappar ===		=== Ett spel med klickbara knappar ===

Hakan: /* CSS */

2019-08-25T16:07:29Z

CSS

← Äldre version		Versionen från 25 augusti 2019 kl. 16.07
Rad 24:		Rad 24:
	Exempel		Exempel

	Javascript		=== Javascript ===

	Här kör vi rita hus-uppgiften i canvas mode.		Här kör vi rita hus-uppgiften i canvas mode.

Hakan: /* Ett spel med klickbara knappar */

2019-08-24T20:30:52Z

Ett spel med klickbara knappar

← Äldre version		Versionen från 24 augusti 2019 kl. 20.30
Rad 29:		Rad 29:

	Visa på vägar att lära mer på W3School		Visa på vägar att lära mer på W3School

			== Bortplockat ==

	=== Ett spel med klickbara knappar ===		=== Ett spel med klickbara knappar ===
Rad 35:		Rad 37:
	Om du vill bygga spel kan du pröva denna tutorial som startar [http://www.w3schools.com/graphics/game_intro.asp här]. Det kan vara möjligt att klippa in din egen gubbe i denna kod men '''det verkar svårt'''.		Om du vill bygga spel kan du pröva denna tutorial som startar [http://www.w3schools.com/graphics/game_intro.asp här]. Det kan vara möjligt att klippa in din egen gubbe i denna kod men '''det verkar svårt'''.
	{{clear}}		{{clear}}



	=== Fler kodexempel ===		=== Fler kodexempel ===

Hakan den 24 augusti 2019 kl. 19.01

2019-08-24T19:01:25Z

← Äldre version		Versionen från 24 augusti 2019 kl. 19.01
Rad 1:		Rad 1:
			== Lektionsplan ==

			=== Intro om vad hemsidor består av. ===


			Titta på koden till några sidor.

			Hur redigerar man?

			Server och ftp.

			WordPress finns

			Hur lär man sig programmera? Visa Codecademy, Coursera, m fl.

			=== Html ===

			Gör guiden på W3School

			=== CSS ===

			Kurs på W3School

			Exempel

			Javascript

			Här kör vi rita hus-uppgiften i canvas mode.

			Visa på vägar att lära mer på W3School

	=== Ett spel med klickbara knappar ===		=== Ett spel med klickbara knappar ===
	[[Fil:Flyttknappar.PNG\|400px\|höger]]		[[Fil:Flyttknappar.PNG\|400px\|höger]]

Hakan: /* Det nya ritprogrammet */

2017-09-27T06:55:28Z

Det nya ritprogrammet

← Äldre version		Versionen från 27 september 2017 kl. 06.55
Rad 6:		Rad 6:


	~~== Det nya ritprogrammet ==~~
	~~Funkar inte!~~

	~~{{uppgruta \| '''Ritprogrammet'''~~
	~~[[Fil:Skärmavbild 2016-11-10 kl. 08.59.40.png\|200px \| right]]~~

	~~Ta koden nedan och förbättra till ett fantastiskt ritprogram.~~

	Det innebär att du lägger in fler färger, förklarande bokstäver och mousover-funktioner. Du kommer att kopiera från den befintliga koden och ändra vissa parametrar. När du gör detta kommer du att lära dig mer programmering.

	~~Spara koden som en fil av typen .html.~~

	~~Lämna in på Progress, '''F3'''.~~
	}}

	~~Observera att denna kod inte fungerar riktigt i Safari. Använd '''Chrome'''.~~

	~~{{Lista \|~~
	~~<pre>~~
	~~<!DOCTYPE html>~~
	~~<html>~~
	~~<head>~~
	~~<title>Page Title</title>~~
	~~</head>~~
	~~<body>~~

	~~<canvas id="myCanvas" width="400" height="500"~~
	~~style="border:1px solid #d3d3d3;">~~
	~~Your browser does not support the canvas element.~~
	~~</canvas>~~

	~~<script src="http://spelprogrammering.nu/simple.js">~~

	~~var canvas = document.getElementById("myCanvas");~~
	~~var ctx = canvas.getContext("2d");~~

	~~var x0 = 50;~~
	~~y0 = 30;~~
	~~bredd =40;~~
	~~hojd = 40;~~
	~~distance = 40;~~
	~~color = "green";~~
	~~radie = 10;~~
	~~size = 22;~~

	~~function myRectangle(x, y, w, l, color) {~~
	~~ctx.fillStyle = color;~~
	~~ctx.fillRect(x, y, w, l);~~
	}

	~~function myCircle(x, y, r, t, color) {~~
	~~ctx.beginPath();~~
	~~ctx.arc(x,y,r,t, 2.2*Math.PI);~~
	~~ctx.fillStyle = color;~~
	~~ctx.fill();~~
	}

	~~function myText(x, y, size, text, color)~~
	{
	~~ctx.font = size + "pt Helvetica";~~
	~~ctx.fillStyle = color;~~
	~~ctx.fillText(text, x, y);~~
	}

	~~function update()~~

	{
	~~// rita de färgade rutorna~~
	~~this.myRectangle(x0, y0, bredd, hojd, "green");~~
	~~this.myRectangle(x0, y0 + distance, bredd, hojd, "blue");~~
	~~this.myText(x0-30, y0 + distance+25, 18, "b", "blue");~~
	~~this.myRectangle(x0, y0 + 2 * distance, bredd, hojd, "yellow");~~
	~~this.myRectangle(x0, y0 + 3 * distance, bredd, hojd, "pink");~~

	~~// rita med vald färg~~
	~~if(mouse.left)~~
	{
	~~this.myCircle(mouse.x, mouse.y, radie, 2,color);~~
	}
	~~// sudda med vit färg genom högerklick~~

	~~if(mouse.right)~~
	{
	~~this.myCircle(mouse.x, mouse.y, radie, 2,"white");~~
	}
	~~// välj färg att rita med~~
	~~if ((mouse.x > x0) && (mouse.x < x0 + bredd) && (mouse.y > y0)~~
	~~&& (mouse.y < y0 + hojd)) { color = "green"; }~~
	~~if (keyboard.g) { color = "yellow"; }~~
	~~if (keyboard.b) { color = "blue"; }~~

	~~// Välj radie på cikeln du ritar med~~
	~~if (keyboard.one) { radie = 2; }~~
	~~if (keyboard.two) { radie = 4; }~~
	~~if (keyboard.three) { radie = 8; }~~
	}
	~~</script>~~

	~~</body>~~
	~~</html>~~
	~~</pre>~~
	}}

	~~=== Exempel ===~~

	~~[http://liam.hodi.se/ Liam i TE16A gjorde detta ritprogram]. Det är mycket bra och förstås A.~~

	=== Fler kodexempel ===		=== Fler kodexempel ===

Hakan den 19 september 2017 kl. 21.48

2017-09-19T21:48:38Z

← Äldre version	Versionen från 19 september 2017 kl. 21.48
Rad 1:	Rad 1:
		=== Ett spel med klickbara knappar ===
		[[Fil:Flyttknappar.PNG\|400px\|höger]]

		Om du vill bygga spel kan du pröva denna tutorial som startar [http://www.w3schools.com/graphics/game_intro.asp här]. Det kan vara möjligt att klippa in din egen gubbe i denna kod men '''det verkar svårt'''.
		{{clear}}

Hakan den 19 september 2017 kl. 21.46

2017-09-19T21:46:55Z

← Äldre version		Versionen från 19 september 2017 kl. 21.46
Rad 117:		Rad 117:

	Det verkar som att simple.js hämtar in ett script till, http://spelprogrammering.nu/advanced.js. Det vore bra om man kunde ta in den koden på ett överblickbart sätt i scriptet men det verker inte praktiskt möjligt.		Det verkar som att simple.js hämtar in ett script till, http://spelprogrammering.nu/advanced.js. Det vore bra om man kunde ta in den koden på ett överblickbart sätt i scriptet men det verker inte praktiskt möjligt.

			== HTML DOM Game Example ==

			Det finns många exempel på KeyDown där man inte påverkar objekten på Canvasen utan "bara" skriver i en textruta eller skapar popup-fönster etc.

			Exempelvis: [http://www.w3schools.com/js/js_htmldom_eventlistener.asp DOM EventListener]

			== Diverse Javascript ==

			: [[Javascript - Introduktion]] med inlärningsmål och bedömningskriterier

			: [http://www.w3schools.com/js/js_intro.asp JS Introduction på W3Schools] där du kan testa koden för att '''tända och släcka en glödlampa'''. Kopiera sedan koden till en textredigerare (Noterad) och spara som .html i en mapp på din dator. Högerklicka på de två bilderna på glödlampan (pic_bulbon.gif och pic_bulboff.gif). Nu kan du öppna filen från din dator och det funkar. nästa sak är att byta bilderna (lägg två nya bilder i mappen på din dator och ändra namnen i koden i html-filen).

			== Spelprogrammering.nu ==

			::[[Spelprogrammering.nu - Intro]]
			:: [[Spelprogrammering.nu - Ditt egna projekt]]
			:: [[Lite_javascript]] - Javascript lokalt på egna datorn. Här hittar du även den användbara filen '''library.js'''.
			:: [[Javascript_med_animering]]
			:: [[Javascript:_Interaktion_med_användare]]
			:: [[Julkortet]]
			:: [[Räta_linjen]]
			:: [[Javascript i Wordpress]]

			== API:er ==

			: [[Google API]]

Hakan: Skapade sidan med ' == Det nya ritprogrammet == Funkar inte! {{uppgruta | '''Ritprogrammet''' right Ta koden nedan och förbättra til...'

2017-09-19T21:43:45Z

Skapade sidan med ' == Det nya ritprogrammet == Funkar inte! {{uppgruta | '''Ritprogrammet''' 200px | right Ta koden nedan och förbättra til...'

Ny sida

== Det nya ritprogrammet ==
Funkar inte!

{{uppgruta | '''Ritprogrammet'''
[[Fil:Skärmavbild 2016-11-10 kl. 08.59.40.png|200px | right]]

Ta koden nedan och förbättra till ett fantastiskt ritprogram.

Det innebär att du lägger in fler färger, förklarande bokstäver och mousover-funktioner. Du kommer att kopiera från den befintliga koden och ändra vissa parametrar. När du gör detta kommer du att lära dig mer programmering.

Spara koden som en fil av typen .html.

Lämna in på Progress, '''F3'''.
}}

Observera att denna kod inte fungerar riktigt i Safari. Använd '''Chrome'''.

{{Lista |
<pre>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<canvas id="myCanvas" width="400" height="500"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>

<script src="http://spelprogrammering.nu/simple.js">

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var x0 = 50;
y0 = 30;
bredd =40;
hojd = 40;
distance = 40;
color = "green";
radie = 10;
size = 22;

function myRectangle(x, y, w, l, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, l);
}

function myCircle(x, y, r, t, color) {
ctx.beginPath();
ctx.arc(x,y,r,t, 2.2*Math.PI);
ctx.fillStyle = color;
ctx.fill();
}

function myText(x, y, size, text, color)
{
ctx.font = size + "pt Helvetica";
ctx.fillStyle = color;
ctx.fillText(text, x, y);
}

function update()

{
// rita de färgade rutorna
this.myRectangle(x0, y0, bredd, hojd, "green");
this.myRectangle(x0, y0 + distance, bredd, hojd, "blue");
this.myText(x0-30, y0 + distance+25, 18, "b", "blue");
this.myRectangle(x0, y0 + 2 * distance, bredd, hojd, "yellow");
this.myRectangle(x0, y0 + 3 * distance, bredd, hojd, "pink");

// rita med vald färg
if(mouse.left)
{
this.myCircle(mouse.x, mouse.y, radie, 2,color);
}
// sudda med vit färg genom högerklick

if(mouse.right)
{
this.myCircle(mouse.x, mouse.y, radie, 2,"white");
}
// välj färg att rita med
if ((mouse.x > x0) && (mouse.x < x0 + bredd) && (mouse.y > y0)
&& (mouse.y < y0 + hojd)) { color = "green"; }
if (keyboard.g) { color = "yellow"; }
if (keyboard.b) { color = "blue"; }

// Välj radie på cikeln du ritar med
if (keyboard.one) { radie = 2; }
if (keyboard.two) { radie = 4; }
if (keyboard.three) { radie = 8; }
}
</script>

</body>
</html>
</pre>
}}

=== Exempel ===

[http://liam.hodi.se/ Liam i TE16A gjorde detta ritprogram]. Det är mycket bra och förstås A.

=== Fler kodexempel ===

Här finns fler kodexempel som du kan ha nytta av i ditt ritprogram. Bland annat kod för tusentals färger:

: [[Spelprogrammering.nu - Ritprogram]]

=== Advanced.js ===

Det verkar som att simple.js hämtar in ett script till, http://spelprogrammering.nu/advanced.js. Det vore bra om man kunde ta in den koden på ett överblickbart sätt i scriptet men det verker inte praktiskt möjligt.