Bits & Bytes

Posts Tagged ‘code’

A Simple JavaScript Code Example

To begin, create an HTML file and copy the code from our post A Basic HTML Page Template, and we will paste our JavaScript into it. You can use a simple text editor, like Notepad, to create the file. I will use “SimpleJavascriptExample.html” as the name of my file and paste this code inside the body tags:

<script type="text/javascript">
  document.write("Welcome to XoaX.net!");
</script>

After pasting the JavaScript code above into the HTML file, the code in the file should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>XoaX.net</title>
</head>
<body>

<script type="text/javascript">
  document.write("Welcome to XoaX.net!");
</script>

</body>
</html>

Now, if we open the file with a browser, we will see the message “Welcome to XoaX.net!” printed out. This exact message could be written without JavaScript by just putting the message inside the body tags by itself. However, we are preparing the way to write more complex JavaScript examples.

In this example, we have one line of JavaScript code inside of the script tags. The script tags, along with the type designation “text/javascript,” tell the browser that the enclosed code is JavaScript. The single line of JavaScript code inside the tags tells the browser to call the write() function on the document object with the argument “Welcome to XoaX.net!”. The semicolon at the end of the line signals the end of the command.

A Basic HTML Page Template

Below, is a template for a basic HTML page or, more truthfully, a basic XHTML page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>XoaX.net</title>
</head>
<body>

</body>
</html>

This is the template that we will use for coding HTML, Cascading Style Sheets (CSS), and Javascript. Between the head tags, we will put things like style specifications and function definitions: generally, things which are not directly visible. On the other hand, we will put the items that are visible between the body tags.

The code above can be copied and pasted, as is, into a blank text document that you can create with any text editor. Then save it out with a .html file extension. Once you save the file, it should open automatically with your default browser when you double-click the file. If it does not, you can right-click and use “Open with” to select a program to set as your default program for opening .html files.

Note that this is a blank HTML page. So, it will not display anything on the page until you add something to it. It is simply a template.

Capturing and Playing Video From a Camera in Actionscript 3.0

This program gives a simple demonstration of how to display video that is captured by a camera. If you have a camera attached to your computer (most laptops do), then you can click the box above to display the video capture from your camera. Note that you will need click the “Allow” button to see the video. To stop the video, refresh the page.

The code for this program is simple and is listed below. The first three lines display the message “Click To Play.” The next line, sets the function CaptureVideo() as a callback to respond to mouse clicks.

After that, we have the CaptureVideo() function, which attempts to get access to a camera and checks whether the attempt was successful. If there is a camera, a Video object is created, attached to the camera, and added to the stage for display.

// Output the initial instructions to user
var qInstructions:TextField = new TextField();
qInstructions.text = "Click To Play";
addChild(qInstructions);

stage.addEventListener(MouseEvent.CLICK, CaptureVideo);

function CaptureVideo(e:Event):void {
	var qCamera:Camera = Camera.getCamera();
	if (qCamera != null) {
		var qVideo:Video = new Video(320, 240);
		qVideo.attachCamera(qCamera);
		addChild(qVideo);
	}
}
 

© 2007–2024 XoaX.net LLC. All rights reserved.