They also allow you to make decisions, like working out what a variable is, or if something is right true or wrong false. If statements The most basic conditional statement is the if statement. It allows you to make a true or false decision about something; if true, then the code within the if statement runs, if false, then nothing happens. We set a variable called age and then create an if statement to perform a true or false decision on that variable.
Our code has become intelligent, sort of. This double equals symbol is nothing like the single equals the assignment operator that you use to assign values to a variable. Getting the two confused can lead to all sorts of problems. For example, using a single equals symbol in the if statement in the previous example would lead to the statement always running:. Another common use of an if statement is to explicitly check a variable for truth by using the boolean data type, which can only ever contain the values true or false.
Here is an example using boolean values:. Thank you! We then construct an if statement that uses boolean values to see if the user would like a cup of tea and, if so, output an alert. We could actually take a shortcut and rewrite the example like this:.
We can do this because if statements check for truth by default. If the variable being checked is true then the code inside the statement will run. In JavaScript, you change the way a conditional statement checks something by changing the comparison operator that it uses. Table shows a list of the most common operators available:. Multiple truth checks within an if statement As well as comparison operators, you also have logic operators.
These operators allow you to check more than one thing in a single conditional statement. To run the if statement if only one of the checks is true, you would use the or operator :.
Else and else if statements Now, if statements are great if you only care about the true outcome, but what if you want to do something else when the outcome is false? This is where the else and else if statements come in. You can take things further by performing a further check if the original if statement is false. Well what about this? And so on. Now, anyone with their head screwed on is probably wondering why you would ever duplicate code. The simple answer is that some pieces of code will be used over and over again because you want to perform a similar action multiple times.
For example, a piece of code that lets you output a full name by combining a first name and last name:. The only difference is that they use different variables. Now imagine if you needed to change the way those names were formatted so the last name came first, it would be mayhem.
What if you missed one out? This is what a function does. Creating functions Using functions is quite straightforward. You just need to understand how they work. You can also feed information into them, and get information back out of them. The easiest way to explain this is by showing you how a function works. The words inside the parentheses are called arguments or parameters — they are variables that declare values that are being inputted into the function.
If your function has no arguments, you still need to include the parentheses; but in such a case you just leave them empty.
All the code that you want to run in the function is placed within the curly brackets. To do this you use the return keyword, which returns whatever value comes after it.
The return keyword also quits the function, so any code after the return will not run. Calling functions A function is pointless unless you can actually use it, or call it, in developer-speak. Calling a function allows you to run the code that has been packaged up inside of it, and allows you to access any values that are returned from the function.
When calling a function you can also include values arguments that will be used as input. By putting this all together we can call our new formatName function like this:. Calling a function is a little like accessing a variable, you just use the name that you used when creating it in the first place. The difference is that when calling a function you need to include a pair of parentheses after the function name.
Inside of the parentheses you place the input values for the function, in our case we use the first and last name variables. In the first example we call the formatName function and send it the first name Rob and last name Hawkes. The function takes these strings as input arguments, called firstName and lastName, which we can refer to as normal variables.
Our function is really simple and returns the formatted name right back, no messing around. The returned value is then stored in the fullName variable, just like it was when we weren't using functions. To do the same for the second name we call the function in the same way, just replacing the input variables with a different first name and a different last name.
The benefits to using this method are huge. Secondly, if we want to edit the way a name is formatted we now only have to change the code in one place, rather than multiple places. This is a really, really good thing. For example, you could easily reverse the function to output the last name, followed by the first name:.
Objects Some people would argue that objects are a fairly advanced topic for a foundation book, but I tend to disagree. Objects will make things easier for us in the long run, so why should I teach you a bad habit when you can learn the right way from the start?
What are objects? A technical reference would describe objects as a collection of properties variables and methods functions that deal with related values and tasks. The best way to think of objects in JavaScript is to imagine them like real-world objects, like a car, or a rocket — I like rockets. An object in JavaScript has properties and methods, as does our real-world rocket object. If we take this example further, the properties of a rocket would be things like the number of engines it has, the amount of thrust it has, the number of astronauts on board, or even something as simple as its color.
A property is essentially a value that describes something about the object. On the other hand, the methods of a rocket would be things like turning the engines on and off, opening the door for the astronauts, or sending a message to ground control. A method is an action of some sort that is performed either on or by the object at hand. So what is an object in a nutshell? And why are nutshells so great for explaining things?
JavaScript objects are templates, they describe the features of something, and they define the actions that it can perform. Creating and using objects There are a few ways to create an object in JavaScript, the simplest being:. I do hope not. Declaring these descriptive elements of an object its properties is no more complicated that creating variables:.
Unfortunately, there is a big problem with this method, being that our object is unique. Both rocket objects are seemingly identical, apart from the second rocket has a new property called wings. The first rocket has no wings, they were never created for it. So how do we overcome this issue of objects being unique and unpredictable? By creating our own rocket object template with all the properties and methods of a rocket already declared inside, of course.
We want to declare properties, not variables, so we use the this keyword instead of var. The this keyword just means that the property is assigned to this instance of the object, allowing different instances to have different property values. The other benefit is that we can trust that our rocket objects have the same properties:.
But properties are pretty static, how do we make our rocket object actually do something? The name of the method will take the name of the property the method is assigned to, this will make sense when we come to calling the method later on.
For our purposes we have declared a new rocket property called enginesOn that tells us whether the engines are on true , or off false. My hope is that this brief overview of them will at least give you the necessary knowledge to not get scared by our use of objects in the games.
I mean, those variables are just too damn restrictive, right? Fortunately, there is a perfect feature in JavaScript that allows you to continue your disruptive streak. That feature is the Array object. Arrays created using the Array object are essentially containers that allow you to store multiple values.
So one variable with an Array object assigned to it can effectively hold countless values known as elements — pretty cool stuff! The purpose of an array is to stop you having to write out a huge amount of variables when you want to store lots of related data, like a list of planets in the solar system. An array acts like a list, keeping a number of related values happily contained inside a single variable. Creating arrays There are a few methods available for creating an Array object, the most verbose of which looks like this:.
The second line assigns a planet name, as a string, to the first element of the array. Notice again how the index number for elements in an array starts at 0, so the second value would be 1, not 2. And to access the fourth element in the array? For example, want to run a function 5 times? Then call it 5 times. Want to run it times? Call it times. As you can see, writing lines of code to call the same function is a little pointless.
It would seem a bit odd for JavaScript to let us down now after being so awesome with functions and arrays. As a really simple example, imagine if we had a list of names in an array and wanted to run our good friend the formatName function 5 times, once for each name.
Without loops it would look something like this:. The main array being a list of 5 other arrays, those 5. Inside the parentheses we have three main areas of importance, each separated by a semi-colon. If this check returns true we move on to the third and final area, if not, we exit the loop.
The result of all this is a counter variable that loops from 0 to 4, allowing us to access the 5 elements of the names array with just a single line:. This is a much simpler way of doing things! Timers As the name implies, timers are methods that allow you to run blocks of code once after a certain amount of time has passed like a cooking timer , or many times after a repeating interval like the indicator in your car.
Both methods are incredibly useful, and will actually form an integral part of the games later in the book. Setting one-off timers The setTimeout method allows us to run a block of code after a specific delay in milliseconds.
This is because if we left the parentheses in, the function would be called immediately when setting up the timer — not what we want to happen. The second argument is the delay in milliseconds, which in our case is , or 3 seconds. Remember that there are milliseconds in a second, forgetting that has caught me out a few times.
To unset a timer created using setTimeout you need to use the clearTimeout method. For these situations you want to use the setInterval method, which is set in an identical way to setTimout:. The only difference between this and the setTimeout method is that the function we pass to the setInterval method will be run every milliseconds, forever.
So be warned, running this in your browser will cause an alert box to pop up every 3 seconds! Unsetting repeating timers Just like the clearTimeout method, we have a similar way of clearing intervals, the clearInterval method.
Leaving it running would just be a waste of resources, and would also be really annoying. Anything else can be found easily online or in other books, some dedicated entirely to teaching the DOM.
The way we do this is by using the document object, which is the root of your web page that contains all of the HTML elements. As well as containing elements, the document object also provides a few methods that allow you to access specific elements, based on their attributes or tag name.
For example, the following would give you access to the first HTML element with the id blogArticles:. Another document object method allows you to access all the elements with a specific tag name. In our example, we can access the p elements like this:.
In our case it returns an array containing one p element from the header element, and another from the article element. The really interesting stuff happens when you dig a little deeper into the HTML elements they both return. The result is an alert box that outputs the text inside of the h2 element.
Still, jQuery allows us to access the DOM in a simple, yet ridiculously powerful way. For example, the jQuery equivalent of the getElementById method is:. It goes beyond belief that so few characters can do so much, but do much those 7 characters can. JavaScript in your browser and looking at the page again — the heading will be back to what it was originally.
As I mentioned at the beginning of this section, we have only scratched the surface with what the DOM can really do. If you want to learn more about the DOM or JavaScript then I definitely recommend picking up a book that focuses on them, or checking out the W3Schools website at www. Perhaps you should take a little break now. In this chapter, we will take a proper look at the features of canvas, from learning how to actually get it into a HTML document to drawing shapes and other kinds of objects on it.
We will also look at how to change how shapes and objects are drawn on canvas, as well as finding out how to erase it. I hope by the end of this chapter that you feel even more excited about HTML5 canvas and the possibilities that it opens up in front of you.
Getting friendly with the canvas element Just like video and audio , the canvas element uses absolutely no external plug-ins or voodoo to do its thing. Using the canvas element is simple—and I mean really, really simple. The following code is all you need to get started with it:. These attributes obviously define the size of the canvas element, which in turn define the size of the 2d. Without defining a size like this the canvas element and the 2d rendering context would be set to the default width and height of by , respectively.
The other option is to use the fantastic ExplorerCanvas script, which has been developed by some boffins at Google. The beauty of this method is that you only need to include one script into your Web page and the canvas element will work in Internet Explorer browsers prior to version 9.
The purpose of the canvas element is to act as a wrapper around the 2d rendering context, providing you with all the necessary methods and juicy functionality to draw on and manipulate it. You access and display the 2d rendering context through the canvas element. The coordinate system The 2d rendering context is a standard screen-based drawing platform. Like other 2d platforms, it uses a flat Cartesian coordinate system with the origin 0, 0 at the top left.
Moving to the right will increase the x value, and moving downwards will increase the y value see Figure Understanding how the coordinate system works is integral if you want to have things draw in the right place. Figure A single unit in the coordinate system is usually equivalent to 1 pixel on the screen, so the position 24, 30 would be 24 pixels right and 30 pixels down.
There are some occasions where a unit in the coordinate system might equal 2 pixels, like with high definition displays, but the general rule of thumb is that 1 Download from Wow! Place the following inside of the jQuery statement, just like we did with the previous JavaScript examples:. Now we have a variable that contains the 2d rendering context we can start to draw stuff. Exciting times! Add the following line after declaring the context variable:. There are four arguments needed to create a rectangle.
The first two are the x, y coordinate values for the origin of the square its top left corner , and the final two are the width and height of the rectangle. The width of a rectangle is drawn to the right of the x, y position, and the height of the rectangle is drawn downwards from the x, y position. The fillRect method could be rewritten like this to visualise the arguments:.
For the sake of clarity, change the width value of our square to , save the file, and refresh the page see Figure And to draw the rectangle in a different position? Yup, just change the x, y position values. For example, an x position of and a y position of see Figure Only shapes drawn with an origin point, or some part of the shape inside of the canvas element will be visible to you.
Alongside fillRect is the strokeRect method, the evil twin. Whereas fillRect draws a rectangle and fills it with a color in our case black , the strokeRect method draws a rectangle and strokes it. Now this is fun and all, but how about we try something a little more adventurous, like a full-blown line? Why not. Lines Lines are created a little differently to shapes. Following this is a call to lineTo with the x, y of the destination of our line, with a call to closePath to finish drawing the path.
Finally, a call to stroke will make the line visible by drawing its outline. By putting this all together you come with something like this:. How about drawing circles? However, knowing this goes some way to explaining why creating a circle in canvas is very different to creating a rectangle. What there is is a method for drawing arcs, which is all a circle really is—an arc joined at both ends. The juicy part is the second line, which does everything necessary to draw a circle.
It may look a bit complicated, so let me break it down for you. There are six arguments used in the creation of an arc; the x, y coordinate values for the origin of the arc the centre of the circle in our case , the radius of the arc, the start angle, the end angle, and finally a boolean value that draws the arc anti-clockwise if true, or clockwise if false.
The arc method could be rewritten in a more readable way like so:. The start angle and end angle arguments are seemingly simple, but they deserve some explaining to properly understand how they work. In short, an arc in canvas is defined as a curved path that starts at a distance from the x, y origin equal to the radius, and is at the angle defined by the start angle. The path ends at the end angle one radius away from the x, y origin see Figure People much cleverer than me have worked out how to convert from degrees to radians and they have come up with the following formula written in JavaScript for our purposes :.
So now you know how angles work in canvas. You can see now that the start angle is 0 , the beginning of our arc, and the end angle is Math. Note: To get access to the value of pi in JavaScript you use the Math object, which is a special object that allows you to do all sorts of cool math-based stuff. A circle, hooray! Now, what would the end angle be if you wanted to draw half a circle instead?
Check Figure if you want. Although the sixth argument in the arc method is meant to be optional, Firefox will throw an error if it is left out.
You could fiddle with the angles all day to create quarter circles, pizza slices—all sorts really. Style Black is so last season. If only there was a way to change the color of our shapes and lines.
Wait, there is? Like one line of code easy? In the previous example, an rgb red, green, and blue color value is assigned, although you could also use any valid CSS color value, like a hex code eg. In the example, the color is set to red full red, no green, no blue and your square should look something like Figure Changing the fill color to red.
The issue is that setting the fillStyle property means that everything you draw after setting it will be in that color. You can also do the same thing with stroked shapes and paths by using the strokeStyle property. Changing line width Changing color is good fun, but our line examples have been a bit on the thin side.
Fortunately in canvas, there is a method of fattening them up a bit, and that is the lineWidth property of the 2d rendering context. By default the lineWidth property is set to 1, but you can set it to anything you want. The result of this is a slightly thicker red line and an overly thick black line see Figure Drawing text Canvas is not just for graphics and images, you can also use it to display text.
The benefit to drawing text in canvas is that you can use all the wonderful transformations and other functionality that comes with drawing in canvas. The point here is that HTML was built to deal with text content , whereas canvas has been built to deal with pixels and graphics. That is all you need to draw a string of text. I told you it was easy. To do this you need to set the font property of the 2d rendering context, like so:. In the previous example, you give the pixel size to want the font to be, followed by the name of the font family you want to use.
When put together it should look something like Figure You could even make the text italic if you really wanted by doing this:. As the font property goes there are many more settings you can use, like the line height, and fallback font families. Note: As I hope you can see, the basics of canvas are very much self-explanatory. The reason for this is that the 2d rendering context API uses methods and properties that are named in a way that makes them easy to understand. It should now make sense why I stressed the importance of naming variables properly back in Chapter 2.
It should look a little something like Figure 3- Erasing the canvas Drawing on to the canvas is really fun, but what do you do when you make a mistake or want to wipe the slate clean and draw something else? To do this all you need to do is call clearRect with the x, y origin of our canvas, its width, and its height.
If the canvas was pixels wide and pixels tall then the call to clearRect would look like this:. For example, if we wanted to remove only the square in the example then you would call clearRect like so:. Erasing a particular area of the canvas. The way this works is that the arguments in clearRect can be changed so a very specific area is cleared. The result is that only a specific area around the square is set to be cleared.
You could quite easily remove the circle instead by changing the arguments of clearRect to the following:. Remember that the origin of an arc is its centre, so to get the correct origin for the clearRect method we need to take the origin of the arc and subtract its radius for both the x and y.
This technique is sometimes used to draw complex shapes quickly and easily by drawing a basic shape and chopping bits off of it. The idea is that when the width and height attributes of a canvas element are set, at any point, the canvas should be cleared back to its original state.
This method does have some drawbacks, so let me give you an example:. You need to change the width and height attributes of the canvas element, so to do this you use the attr method in jQuery. My hope is that by now you should be comfortable enough to guess what is going on. If all went well you should see a blank canvas. Remember: we set the fillStyle property previously. So why on earth is it drawing a black square see Figure ? Drop your files to convert them.
File Size Warning. You are attempting to upload a file that exceeds our 50MB free limit. No, thanks Continue uploading file. Files to Convert. File Name File Size Progress. Games can now be created and interacted with directly within HTML with no need for users to download extra plugins, or for developers to learn new languages. Important new features such as the Canvas tag enable drawing directly onto the web page, the Audio tag allows sounds to be triggered and played from within your HTML code, the web sockets API brings the facility for real-time communication.
This book gets you up to speed on the new HTML5 elements and CSS3 features you can use right now, and backwards compatible solutions ensure that you don't leave users of older browsers behind.
Gone are the days of adding additional markup just to style a button differently or stripe tables. In this book, developers will learn how to use the latest cutting-edge HTML5 web technology-available in the most recent versions of modern browsers-to build web applications with unparalleled functionality, speed, and responsiveness.
The book explains how you can create real-time HTML5 applications that tap the full potential of modern browsers, provides practical, real-world examples of HTML5 features in action, etc. This workshop will help you get to grips with the new features in HTML5, from audio and video to more powerful forms and new structural elements.
With 'Smashing HTML5', you have everything you need to get up and running quickly with great new HTML5 features, including new content-specific elements, audio and video playback, canvas for drawing, and many others. You will learn how to use text, graphics, audio, video, and navigation in HTML5 web pages running in compatible browsers.
With 'HTML5: Designing Rich Internet Applications' eBook that will be easy to implement the powerful new multimedia and interactive capabilities offered by HTML5, including style control tools, illustration tools, video, audio, and rich media solutions.
You will reinforce your practical understanding of the new standard with demo applications and tutorials, so that execution is one short step away. Padding is an amount of space around a content and its edge. With other words, padding is a white space or a clear area around a text or an image. It generates the white space inside of the element's edges. The padding comprises padding-top , padding-right , padding-bottom and padding-left properties.
In such a way you get complete power over the padding. The thing is that the padding values can be set up in px, pt, cm, em , etc. The thing is that such relative units perform great on different screen sizes and browsers. However, negative values are false.
The padding property can point out one, two, three, or four values. In case you need a boxed element with all four sides equal, set one value which will apply to all sides. If two values are used, the first will apply to [top-and-bottom] , and the second will set to [left-and-right] values. Three values define first to [top] , then to [left-and-right] and third to [bottom]. If you set each side using unique four values , it will start applying clockwise to [top], [right, bottom ] and [left ].
Use shortcuts to make your coding simpler. When the value is set as a percentage, it is relevant to the [width] of an element. Keep in mind, the total breadth of the element corresponds to the width property plus the width of any padding area.
In light of this, the width is recalculated each time the padding is adjusted. Unlike margin, any padding can have a background color or image.
The color of the padding area is defined via a [background] property. In case the element has a background color, the padding will inherit that color. Thus, if you need your background color to continue on into the space you design, the background will continue on behind the padding.
Image resolution is the number of detail an image holds. The term applies to raster digital images. Higher resolution means more image detail. A raster image is an image consisting of the array of pixels. A pixel is the basic element of the two-dimensional digital image. At the same time, a pixel is also the physical element of the display matrix.
In the raster format images are displayed on the most of the image output devices: monitors, printers, cell phones, etc. The width and height of the image in pixels are the image size. And the number of pixels per inch PPI is the resolution of the image. The higher is the resolution, the more pixels are located in one inch. And the smaller a single one will be. Thus, the more precise will be the details of the image. High definition images are a consequence of a greater resolution.
Resolution determines the clarity of the objects and text on the monitor. At high resolution objects on the screen become smaller and look sharper. Monitors usually have standard 4: 3 or widescreen 9 and dimensions. This is the screen ratio. The number of pixels horizontally and vertically is the screen size.
In printing the resolution is measured in DPI, dots per inch. For the photo to be of a normal quality, a resolution must be at least dpi. For example, to print a photo on the A4 piece of paper xmm or 8x11 inches, we need to multiply 8 by and 11 by And get xpx.
This should be the minimum size of the picture for printing on A4 sheet. If the size will be smaller, the printed image will be fuzzy and blurry. RGB color model stands for Red, Green and Blue is an additive color model in which those three main colors are mixed together to create other colors. RGB color system is suited for surfaces that produce their own light. The screen surface of a computer monitor or a TV set is originally dark, so its original color is black. All other colors are obtained by using a combination of the three main colors, which in their mixture must create a white color.
Experimentally it was proven that red, green and blue are the most suited for human eyes. As we know, the surface of the screen is not solid, it consists of small dots called pixels. Each pixel consists of three blocks, red, green and blue. By varying the brightness level of each block we can get different colors.
The information about the brightness level is encoded using binary code. For example, the most common for modern displays bit True Color system uses three bytes with values from 0 to for each pixel on the screen. Absolutely red color will have a value This means that the amount of red color is full, of the green is 0 and of the blue is also 0.
Absolutely blue color will have a value of 0. With different combinations different colors are formed: bright-violet is RGB color can also be encoded with the help of the hexadecimal system. Here are some standard colors:. This color system is called additive. In other words, we take black color no color and add primary colors to it, mixing them all the way up to white. This way we can encode 16 colors, which is more than enough for human eyes. In a word, alt tag is an abbreviation of what is essentially an alt attribute on an image tag showing a nature or a content of its image.
That is why each image on any successful website has its alt tag that describes what is actually on it. As we believe in becoming the incomparable way of distributing php knowledge, we provide instances where PHP learners can find the best live examples.
These HTML tutorial for beginners with examples are made approachable for the convenience of the new trainees, who are willing to find the best HTML tutorial point pdf. So, now without stepping out of the house just one click can make you an php expert. No fee costs no downloading costs, the only thing which is needed your pc and our free samples.
0コメント