Hi,

Today, the Web is a much more sophisticated place (dynamic shopping carts, blogs, DOM scripting, Ajax etc) … a Web that requires much more sophisticated web designers. To be a competitive and modern web designer these days, you have to learn more than just HTML and CSS .

The ‘foundation’ languages of web design today are:

1. HTML
2. CSS
3. Javascript
4. PHP

You don’t have to become a full-fledged nerd coder but you should at least understand the basic concepts and be able to read and write basic scripts. This way, when a client or your boss comes to you with some shopping cart script that he wants you to install … you wont be freaking out because you don’t understand a thing.

So in keeping with my goal of training you guys and girls up, I just wanted to announce my latest video tutorial; a course on Javascript: Beginners Javascript.

… OK, not the most exciting title, but the video tutorials are perfect for people new to programming. Some details:

Beginners Javascript is designed to teach total beginners Javascript programming. By the end of the 5 hrs of video training (over 39 individual videos) you will feel comfortable reading and writing usable Javascript code for everyday web tasks like spawning windows, validating forms and creating simple page effects.

The table of contents:

Introduction (10:09)
First Javascript (10:21)
What is a programming language (6:18)
Javascript event handlers part 1 (8:58)
Javascript event handlers part 2 (6:40)
Javascript event handlers part 3 (4:50)
Javascript errors part 1 (6:39)
Javascript errors part 2 (4:39)
Javascript variables part 1 (10:53)
Javascript variables part 2 (10:01)
Javascript execution (4:21)
Javascript functions part 1 (8:46)
Javascript functions part 2 (6:22)
Javascript functions part 3 (6:32)
Javascript functions part 4 (9:27)
if statements part 1 (7:33)
if statements part 2 (6:52)
if statements part 3 (8:55)
Javascript loops part 1 (8:25)
Javascript loops part 2 (5:58)
Javascript object; a birds eye view (8:31)
Javascript arrays part 1 (3:36)
Javascript arrays part 2 (7:44)
Javascript arrays part 3 (5:28)
Javascript functions cont. part 3 (8:13)
Javascript functions cont. part 4 (10:16)
Javascript functions cont. part 4-b (9:57)
Javascript functions cont. part 5 (9:18)
Introduction to the DOM part 1 (8:31)
Introduction to the DOM part 2 (3:37)
Javascript forms part 1 (14:50)
Javascript forms part 2 (15:10)
Javascript forms part 3 (6:58)
Javascript forms part 4 (8:51)
Creating a toggle menu part 1 (6:59)
Creating a toggle menu part 2 (10:39)
Linking to external Javascript files (5:46)
Spawning windows with Javascript (9:24)
Javascript frameworks, conclusion to course (4:24)

That’s it for now.

Stefan Mischook
www.killersites.com

The DOM is short for: Document Object Model. This is basically a virtual map of the currently loaded web page. You can use this map along with the help of Javascript, to travel about your web page and do things like:

• Insert tags
• Remove tags
• Insert text

… And a whole lot more.

The DOM is the key to all those cool Javascript and Ajax affects that we now see all over the Web. Check out my new video that introduces you to the DOM and I also teach you an exercise I came up with to help you better understand the DOM:

You can find the entire Javascript beginners course at killerjavascript.com.

Thanks for watching.

Stefan Mischook

www.killersites.com

I recently put out a few new videos on Javascript event handlers:

Javascript Event Handlers Part 1

Javascript Event Handlers Part 2

Javascript Event Handlers Part 3

These are part of my new growing collection of Javascript video tutorials that aim to teach total beginners how to read and write practical Javascript.

I would like to point out that I’ve invested in making the sound for these videos as clear as possible … so let me know what you think.

Thanks,

Stefan Mischook

www.killersites.com

I just wanted to make a quick announcement: I’ve released about 40 minutes of new video tutorials on beginners Javascript. Check out my new micro-site:

www.killerjavascript.com

This is a ’sneak peak’ of a new video tutorial course that targets total beginners to Javascript and programming in general. If you want to learn Javascript, I think these videos will be helpful.

Let me know what you think.

Stefan Mischook

www.killersites.com

I just wanted to announce that I am now giving away a series of video lectures on Ajax – about 3 hrs worth.

The Videos:

Ajax Videos

These videos are not designed to be a tutorial, but rather, they are a lecture. None the less, these videos can help give you at least a basic understanding of what Ajax is all about.

Anyway, they are free, so what do you have to loose!

If you guys want a proper killersites style (simple, practical and to the point) video tutorial, please let me know.

Thanks,

Stefan Mischook

www.killersites.com
www.killerphp.com

Anyway, someone recently sent me an updated version of the script. You will probably want to read the original article before looking at these changes.

From the email:

I did some simplification on the code for zebrastripes. I don’t bother with the last array bit because TR elements have the bgColor attribute.

trs[i].bgColor = ( i & 1 ) ? stripe_colour_even : stripe_colour_odd;

Greetings,

tarjei

The complete function:

function stripe_table(id_name) {

var my_table = document.getElementById(id_name);

/* For debugging */
if ( !my_table ) {
alert(”The ID ” + id_name + ” is not found.”);
return;
}

/* Table may have more than one tbody element */
var tbodies = my_table.getElementsByTagName(”tbody”);

for (var cnt = 0; cnt < tbodies.length; cnt++) {
var trs = tbodies[ cnt ].getElementsByTagName("tr");

/* Walk table row for row */
for (var i = 0; i < trs.length; i++) {
if (! hasClass(trs[i]) && ! trs[i].style.backgroundColor) {
trs[i].bgColor = ( i & 1 ) ? stripe_colour_even : stripe_colour_odd;
}
}
}
}
}

CIAO.

Stefan Mischook

I decided to create another blog post to make it easier to find the updated version of the important matching columns script – it was buried in the originals article’s comments.

Notes:

• The original matching columns video tutorial
• The original discussion on the web design forum

-

Updated script by: Jonathan del Mar

I have modified the script to work with multiple class groups also with elements with multiple class names

/*
Derived from a script by Alejandro Gervasio.
Modified to work in FireFox by Stefan Mischook for Killersites.com

Modified to work with multiple class groups also with elements with multiple class names
by Jonathan del Mar (dec-14-2006)

How it works: just apply the CSS class of ‘column’ to your pages’ main columns.

to work with different classes
add

var columns = new Array(’class_name1′, ‘class_name1′…);

by Jonathan del Mar

by default the script will call
matchColumns();
and the default class_name is ‘column’
(see the bottom of this script)
by Jonathan del Mar

*/
matchColumns=function(my_class){

var divs,contDivs,maxHeight,divHeight,d;

// get all elements in the document

divs=document.getElementsByTagName(’div’);

contDivs=[];

// initialize maximum height value
maxHeight=0;
if (!my_class) {
my_class = ‘column’;
}

my_regex = new RegExp(’(.* |^)’ + my_class + ‘( .*|$)’);

// iterate over all elements in the document

for(var i=0;i elements with class attribute ‘container’

//if(/\bcolumn\b/.test(divs[i].className)){
// modified by Jonathan del Mar to match ‘column’ in multiple classes

if(my_regex.test(divs[i].className)){
d=divs[i];

contDivs[contDivs.length]=d;

// determine height for element

if(d.offsetHeight){

divHeight=d.offsetHeight;

}

else if(d.style.pixelHeight){

divHeight=d.style.pixelHeight;

}

// calculate maximum height

maxHeight=Math.max(maxHeight,divHeight);

}

}

// assign maximum height value to all of container elements

for(var i=0;i
var columns = new Array(’class_name1′, ‘class_name2′, …);

to your html header.