Web Technology @ CCBC

Student driven blog for all things web.

Archive for the ‘webt157xx(older section)’ Category

JSON 101

Posted by GPC on October 1, 2007

Introduction
JSON (JavaScript Object Notation) is a lightweight data-interchange format that’s easy for humans to read and write; and easy for machines to parse and generate. In actuality, JSON is a text format that’s completely language independent but uses conventions familiar to programmers within the C-family of languages. JSON can be used like XML to transfer information from one language to another, for instance PHP to Javascript. However, in this tutorial I will show how JSON can be used within Javascript to quickly create clean code.

Usage
Lets start with arrays. In JSON an array begins with a [ (left bracket) and ends with a ] (right bracket). Values are separated by a , (comma).

Unidimensional:

	// Normal Javascript:
	var myArray = new Array();
	myArray[0] = "Element One";
	myArray[1] = "Element Two";
	myArray[2] = "Element Three";
	myArray[3] = "Element Four";
	...

	or

	var myArray = new Array("Element One","Element Two","Element Three", ...);

	// With JSON:
	var myArray = ["Element One","Element Two","Element Three", ...];

Multidimensional:

	// Normal Javascript:
	var myArray = new Array();
	myArray[0] = new Array();
	myArray[0][0] = "Array One, Element One";
	myArray[0][1] = "Array One, Element Two";
	...
	myArray[1] = new Array();
	myArray[1][0] = "Array Two, Element One";
	myArray[1][1] = "Array Two, Element Two";
	...

	// With JSON:
	var myArray = [
		["Array One, Element One","Array One, Element Two", ...],
		["Array Two, Element One","Array Two, Element Two", ...],
		...
	];

As you can see JSON provides a somewhat short-hand approach to writing code, thereby reducing the amount of typing. Now lets move onto objects. In JSON an object begins with a { (left brace) and ends with a } (right brace). Each name is followed by a : (colon) and the name/value pairs are separated by a , (comma).

For example:

	// Normal Javascript:
	var myObj = function(){
		this.x = 1;
		this.y = 2;
		this.z = 3;
	};
	alert(myObj.x);

	// With JSON:
	var myObj = {
		x: 1,
		y: 2,
		z: 3
	};
	alert(myObj.x);

This can be used in conjunction with the prototype object to create a class structure. For example:

	var myClass = function(){ this.init.apply(this,arguments) };
	myClass.prototype = {
		init: function(y){
			this.x = 10;
			this.y = y;
		},
		calc: function(){
			with(this){
				return x*y;
			}
		}
	};

	var newClass = new myClass(5);
	alert(newClass.calc());

But that’s for another tutorial. If you wish to learn more, goto www.json.org.

Here are some additional links if anyone’s interested:
Mastering JSON
JSON Wikipedia Entry

Advertisements

Posted in javascript, tutorials, web standards, webt157xx(older section) | 2 Comments »

Now and Later

Posted by GPC on September 24, 2007

Here’s my short list of Web-tools:

Firefox Web Developer bar
by Chris Pederick
Adds a menu and a toolbar with various web developer tools.
Quick Install

Amaya
By W3C (Since 1996)
Amaya is a Web editor, i.e. a tool used to create and update documents directly on the Web. Browsing features are seamlessly integrated with the editing and remote access features in a uniform environment. This follows the original vision of the Web as a space for collaboration and not just a one-way publishing medium.
Download

Posted in articles, useful tools, webt157xx(older section) | 1 Comment »

Prototype Framework

Posted by GPC on September 11, 2007

Prototype is a JavaScript Framework that aims to ease the development of dynamic Web applications; or at least that’s what the homepage says. However, Prototype is very useful when it comes to making any Javascript solution that can, or must, be object oriented.

If you’ve ever had to call timing functions like “setInterval” or “setTimeout” from within the standard Javascript class member function (a function within a function) and you’ve found yourself near death because the”this” keyword is being used in the global scope, then this is library is for you. Altered apply, call, and bind function prototypes have been included to fix such issues. Class structures are easier to create and maintain, array manipulation is now provided by member functions, Ajax and JSON functions are included, and much more.

Check out the API documentation and see the rest for yourself.

Posted in articles, classes, javascript, useful tools, webt157xx(older section) | 1 Comment »

Creating a custom two-dimensional Array

Posted by RoniNoone on September 5, 2007

Since I murdered the array lecture in class today I thought you mind find this useful. It is a simple write up of multidimensional arrays. If you find any others post them or add a link in the comments.

Posted in javascript, tutorials, webt157xx(older section) | 3 Comments »

Blog Updates

Posted by RoniNoone on September 4, 2007

Hi All! The blog is going strong! It’s nice to see a lot of action and we are already getting a good collection of links and examples! A few notes…

  1. When you go to post you will only be able to save not publish. I actually am the only on with rights to publish to the blog.
  2. PLEASE give more info then.. “I found this link”. I’ll let them slide this week but I won’t accept posts like that anymore. Give a litte more info about the link, why should be visit it, why is it cool? Did it help you understand something? How did you find it? Think of things like that.

All that being said I’d like to post another link. This one about blogging!

Should we be teaching people how to blog? and education. I wonder if I should be teaching you this blog stuff anyways?

OH! and what do you think of the new design?

Posted in classes, news, webt143xx(older section), webt143xx(older section), webt157xx(older section) | 9 Comments »

An interesting article

Posted by hcarter on September 4, 2007

It isn’t about JavaScript, but it is about Web Technology.

http://tech.yahoo.com/blogs/patterson/3667

Posted in articles, webt157xx(older section) | Leave a Comment »

Who is Jennifer Madden?

Posted by RoniNoone on August 29, 2007

I’m not sure but her site sure is COOL!  It has great JavaScript tutorials and a fabulous plug-in for firefox perfect to help WEBT 143 students visual an HTML document.

Check it out and I’ll show her when we start to talk about HTML files structure.  Remind me if I forget!

http://jennifermadden.com

Posted in javascript, tutorials, useful tools, webt143xx(older section), webt143xx(older section), webt157xx(older section) | 1 Comment »

SVG Images 101

Posted by GPC on August 29, 2007

Introduction
SVG (Scalable Vector Graphics) is a language for describing two-dimensional graphics, with possible animation, in XML. The standard specifications for this language can be found here.

Background
To understand why SVG images are useful, we need to first discuss how they differ from bitmap images:

A Bitmap graphic is a representation, consisting of rows and columns of dots (pixels), of an image in computer memory. They do nothing more than archive an image one square at a time. You’ve seen these images everywhere, and have probably created a few yourself. GIF, BMP, JPEG, these are all bitmap image types.

On the other hand a vector graphic is an image made up of individual objects instead of pixels; and these objects are defined by mathematical equations. These equations are rendered on demand, meaning the image is completely generated when you ask for it. SVG images fall into this category, however the mathematical equations are being represented by XML tags.

Features
Since SVG images are plain-text XML code, they can be scaled, manipulated, or even created dynamically on Websites by PHP, ASP, Javascript, and more:

  • Image scaling without pixelation, blur, or compression.
  • Default anti-aliasing.
  • Animation.
  • Future support for XHTML integration through foreign namespaces (SVG code directly in the XHTML page).

And best of all, they can be created easily in professional art programs like Adobe Illustrator and Inkscape (Linux).

Examples
This is the SVG image code of a red circle outlined in blue:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="600" cy="200" r="100"
fill="red" stroke="blue" stroke-width="10" />
</svg>

This should give you an idea of how the SVG image is written. You can even save this code in a text file, named something like “circle.svg”, and it will actually render in a Web browser as an image!

Resources
If you wish to learn more about how you can create and use SVG images on Websites and more, check out the links below:

SVG at W3CSchools
Basic Shapes in SVG
SVG images in HTML
Dynamic graphs with SVG
SVG at Wikipedia

Posted in classes, tutorials, webt157xx(older section) | 7 Comments »

WEBT 157 Test Post

Posted by RoniNoone on August 27, 2007

This is a test post from class.

Posted in news, webt157xx(older section) | 1 Comment »

Welcome Message

Posted by RoniNoone on August 22, 2007

Welcome to the WEBT Courses Blog! This is the experimental blog of all WEBT courses at CCBC written and maintained by the students in those classes. Stop back and check out what the WEBT students are into this semester.

If you are in one of my WEBT classes and do not have access to the blog email me (vnoone@ccbcmd.edu) your name and course number for access. This blog is for WEBT 143 and WEBT 157.

Posted in classes, news, webt143xx(older section), webt143xx(older section), webt157xx(older section) | Leave a Comment »