First commit

Apress · Oct 16, 2016 · ec02472 · ec02472
commit ec02472
Show file tree

Hide file tree

Showing 101 changed files with 3,005 additions and 0 deletions.
diff --git a/9781430232919.jpg b/9781430232919.jpg
diff --git a/Chapter 1/Basic HTML5 Page.html b/Chapter 1/Basic HTML5 Page.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<title>A basic HTML5 blog homepage</title>
+		<meta charset="utf-8">
+		<!-- CSS and JavaScript to go here -->
+	</head>
+
+	<body>
+		<header>
+			<!-- Website name and navigation -->
+			<h1>My amazing blog</h1>
+
+			<nav>
+				<ul>
+					<li><a href="/">Home</a></li>
+					<li><a href="/archive/">Archive</a></li>
+					<li><a href="/about/">About</a></li>
+					<li><a href="/contact/">Contact</a></li>
+				</ul>
+			</nav>
+		</header>
+
+		<section>
+			<!-- Blog articles - repeat as many times as required -->
+			<article>
+				<header>
+					<hgroup>
+						<h1><a href="/blog/first-post-link/">Main heading of the first blog post</a></h1>
+						<h2>Sub-heading of the first blog post</h2>
+					</hgroup>
+					<p>Posted on the <time pubdate datetime="2010-10-30T13:08">30 October 2010 at 1:08 PM</time></p>
+				</header>
+
+				<p>Summary of the first blog post.</p>
+			</article>
+
+			<article>
+				<header>
+					<hgroup>
+						<h1><a href="/blog/second-post-link/">Main heading of the second blog post</a></h1>
+						<h2>Sub-heading of the second blog post</h2>
+					</hgroup>
+					<p>Posted on the <time pubdate datetime="2010-10-26T09:36">26 October 2010 at 9:36 AM</time></p>
+				</header>
+
+				<p>Summary of the second blog post.</p>
+			</article>
+
+			<article>
+				<header>
+					<hgroup>
+						<h1><a href="/blog/third-post-link/">Main heading of the third blog post</a></h1>
+						<h2>Sub-heading of the third blog post</h2>
+					</hgroup>
+					<p>Posted on the <time pubdate datetime="2010-10-21T17:13">21 October 2010 at 5:13 PM</time></p>
+				</header>
+
+				<p>Summary of the third blog post.</p>
+			</article>
+
+			<!-- Blog sidebar -->
+			<aside>
+				<h2>Subscribe to the RSS feed</h2>
+				<p>Make sure you don't miss a blog post by <a href="/rss">subscribing to the RSS feed</a>.</p>
+			</aside>		
+		</section>
+
+		<footer>
+			<!-- Copyright and other stuff -->
+			<p>My amazing blog &copy; 2010</p>
+		</footer>
+	</body>
+</html>
diff --git a/Chapter 2/Adding JavaScript.html b/Chapter 2/Adding JavaScript.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<title>Adding JavaScript to a HTML page</title>
+		<meta charset="utf-8">
+
+		<!-- CSS to go here -->
+
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
+		<script type="text/javascript">
+			$(document).ready(function() {
+				//alert("Hello, World!");
+
+				var userName = "Rob Hawkes";
+				var age = 24;
+				alert(userName+" is "+age+" years old");
+			});
+		</script>
+	</head>
+
+	<body>
+
+	</body>
+</html>
diff --git a/Chapter 2/The DOM.html b/Chapter 2/The DOM.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<title>The DOM</title>
+		<meta charset="utf-8">
+
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
+		<script type="text/javascript">
+			$(document).ready(function() {
+				// JavaScript will go in here
+				var secondaryHeadings = $("h2");
+				secondaryHeadings.html("Now we've change the content");
+			});
+		</script>
+	</head>
+
+	<body>
+		<section id="blogArticles">
+			<article>
+				<header>
+					<hgroup>
+						<h1><a href="/blog/first-post-link/">Main heading of the first blog post</a></h1>
+						<h2>Sub-heading of the first blog post</h2>
+					</hgroup>
+					<p>Posted on the <time pubdate datetime="2010-10-30T13:08">30 October 2010 at 1:08 PM</time></p>
+				</header>
+
+				<p>Summary of the first blog post.</p>
+			</article>
+		</section>
+	</body>
+</html>
diff --git a/Chapter 3/2D Rendering Context.html b/Chapter 3/2D Rendering Context.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<title>Learning the basics of canvas</title>
+		<meta charset="utf-8">
+
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
+		<script type="text/javascript">
+			$(document).ready(function() {	
+				var canvas = $("#myCanvas");
+				var context = canvas.get(0).getContext("2d");
+
+				context.fillRect(40, 40, 100, 100);
+			});
+		</script>
+	</head>
+
+	<body>
+		<canvas id="myCanvas" width="500" height="500">
+			<!-- Insert fallback content here -->
+		</canvas>
+	</body>
+</html>
diff --git a/Chapter 3/Adding text.html b/Chapter 3/Adding text.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<title>Learning the basics of canvas</title>
+		<meta charset="utf-8">
+
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
+		<script type="text/javascript">
+			$(document).ready(function() {	
+				var canvas = $("#myCanvas");
+				var context = canvas.get(0).getContext("2d");
+
+				var text = "Hello, World!"; // String of text to display
+				context.font = "italic 30px serif";// Change the size and font
+				context.fillText(text, 40, 40); // Draw the text
+			});
+		</script>
+	</head>
+
+	<body>
+		<canvas id="myCanvas" width="500" height="500">
+			<!-- Insert fallback content here -->
+		</canvas>
+	</body>
+</html>
diff --git a/Chapter 3/Changing Colour and Style.html b/Chapter 3/Changing Colour and Style.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<title>Learning the basics of canvas</title>
+		<meta charset="utf-8">
+
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
+		<script type="text/javascript">
+			$(document).ready(function() {	
+				var canvas = $("#myCanvas");
+				var context = canvas.get(0).getContext("2d");
+
+				context.lineWidth = 5; // Make lines thick
+
+				context.strokeStyle = "rgb(255, 0, 0)";
+				context.strokeRect(40, 40, 100, 100); // Red square
+				context.strokeRect(180, 40, 100, 100); // Red square
+
+				context.lineWidth = 20; // Make lines even thicker
+
+				context.strokeStyle = "rgb(0, 0, 0)";
+				context.strokeRect(320, 40, 100, 100); // Black square
+
+				context.lineWidth = 5; // Make lines thick
+
+				context.strokeStyle = "rgb(255, 0, 0)";
+				context.beginPath();
+				context.moveTo(40, 180);
+				context.lineTo(420, 180); // Red line
+				context.closePath();
+				context.stroke();
+
+				context.lineWidth = 20; // Make lines even thicker
+
+				context.strokeStyle = "rgb(0, 0, 0)";
+				context.beginPath();
+				context.moveTo(40, 220);
+				context.lineTo(420, 220); // Black line
+				context.closePath();
+				context.stroke();
+			});
+		</script>
+	</head>
+
+	<body>
+		<canvas id="myCanvas" width="500" height="500">
+			<!-- Insert fallback content here -->
+		</canvas>
+	</body>
+</html>
diff --git a/Chapter 3/Drawing Basic Shapes.html b/Chapter 3/Drawing Basic Shapes.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<title>Learning the basics of canvas</title>
+		<meta charset="utf-8">
+
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
+		<script type="text/javascript">
+			$(document).ready(function() {	
+				var canvas = $("#myCanvas");
+				var context = canvas.get(0).getContext("2d");
+
+				context.fillRect(40, 40, 100, 100); // Square
+				context.strokeRect(200, 300, 200, 100); // Rectangle
+
+				context.beginPath(); // Start the path
+				context.moveTo(40, 40); // Set the path origin
+				context.lineTo(340, 40); // Set the path destination
+				context.closePath(); // Close the path
+				context.stroke(); // Outline the path
+
+				context.beginPath(); // Start the path
+				context.arc(230, 90, 50, 0, Math.PI*2, false); // Draw a circle
+				context.closePath(); // Close the path
+				context.fill(); // Fill the path
+			});
+		</script>
+	</head>
+
+	<body>
+		<canvas id="myCanvas" width="500" height="500">
+			<!-- Insert fallback content here -->
+		</canvas>
+	</body>
+</html>
diff --git a/Chapter 3/Erasing the canvas.html b/Chapter 3/Erasing the canvas.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<title>Learning the basics of canvas</title>
+		<meta charset="utf-8">
+
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
+		<script type="text/javascript">
+			$(document).ready(function() {	
+				var canvas = $("#myCanvas");
+				var context = canvas.get(0).getContext("2d");
+
+				context.fillStyle = "rgb(255, 0, 0)";
+
+				context.fillRect(40, 40, 100, 100);
+
+				context.beginPath();
+				context.arc(230, 90, 50, 0, Math.PI*2, false);
+				context.closePath();
+				context.fill();
+
+				//context.clearRect(230, 90, 50, 50);
+
+				canvas.attr("width", canvas.width());
+				canvas.attr("height", canvas.height());
+
+				context.fillRect(40, 40, 100, 100);
+			});
+		</script>
+	</head>
+
+	<body>
+		<canvas id="myCanvas" width="500" height="500">
+			<!-- Insert fallback content here -->
+		</canvas>
+	</body>
+</html>
diff --git a/Chapter 3/Making canvas fill the browser window.html b/Chapter 3/Making canvas fill the browser window.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<title>Learning the basics of canvas</title>
+		<meta charset="utf-8">
+
+		<link href="canvas.css" rel="stylesheet" type="text/css">
+
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
+		<script type="text/javascript">
+			$(document).ready(function() {	
+				var canvas = $("#myCanvas");
+				var context = canvas.get(0).getContext("2d");
+
+				$(window).resize(resizeCanvas);
+
+				function resizeCanvas() {
+					canvas.attr("width", $(window).get(0).innerWidth);
+					canvas.attr("height", $(window).get(0).innerHeight);
+					context.fillRect(0, 0, canvas.width(), canvas.height());
+				};
+
+				resizeCanvas();
+			});
+		</script>
+	</head>
+
+	<body>
+		<canvas id="myCanvas" width="500" height="500">
+			<!-- Insert fallback content here -->
+		</canvas>
+	</body>
+</html>
diff --git a/Chapter 3/canvas.css b/Chapter 3/canvas.css
@@ -0,0 +1,3 @@
+* { margin: 0; padding: 0; }
+html, body { height: 100%; width: 100%; }
+canvas { display: block; }
diff --git a/Chapter 4/.DS_Store b/Chapter 4/.DS_Store