Web Technology @ CCBC

Student driven blog for all things web.

Archive for the ‘javascript’ Category

Embedding Flash In A Strict Compliant Environment

Posted by CDowd on February 22, 2008

Ever use those little embed tags to post flash? Well, they’re not compliant.

I have to build a website for my MULT 109 class, and since I’m in WEBT I decided that I would try to make every page strict compliant. Then I got to my flash game page. What a nightmare!!!

Anyway, I did an exhaustive Google search for an answer, and I found these articles:

The third article is the one I finally went with. It was a bit of a bear, since it involves javascript, and CSS for layout, rather than just a simple cut and paste embed script, but wow it works!

Here’s my Valid XHTML 1.0 Strict webpage for proof. There are a  couple of CSS issues I’m still working on, but the page is valid, AND the flash works in both Firefox and IE. I think that’s worth a little extra credit. 😉

Advertisements

Posted in articles, design, examples, javascript, tutorials, web standards | Tagged: , , , | 6 Comments »

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

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

Create a timed stylesheet using PHP

Posted by larryrussell on September 17, 2007

Create a timed stylesheet using PHP this looks like a pretty cool ideal. Seems like it would be pretty easy to write up a bit of javascript to do the same thing.

Posted in classes, javascript, webt143xx(older section) | Leave a 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 vjnoone 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 »

Web development cheat sheet guide

Posted by mlippy on September 4, 2007

i found this site the first night of class:

http://www.realsoftwaredevelopment.com/2007/08/ultimate-web-de.html

Posted in design, fun stuff, javascript, web standards, webt143xx(older section) | 6 Comments »

Who is Jennifer Madden?

Posted by vjnoone 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 »

Basic JavaScript Reference

Posted by vjnoone on August 22, 2007

This is my absolute favorite, most basic, easy, reference page for JavaScript. Visit it often and use it as a reference when looking up syntax, objects, etc.

http://www.w3schools.com/js/default.asp

There are other more detailed tutorials out there. If you find one, please post it for others to learn and comment on!

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