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

In this video I introduce you to two things:

1. Basic object oriented concepts.
2. The Javascript object hierarchy.

The goal of this video is to give you a birds eye view of Javascript, to hopefully make it easier to understand how to use this language in later videos.

This video is from my very soon to be released Javascript basics video tutorial course.

Thanks,

Stefan Mischook
www.killersites.com

Hi,

I just released and brand new course on the Javascript framework called jQuery. JQuery is a very popular Javascript library that many web designers will find themselves working with.

You can find about 40 minutes of free videos from the course here:

www.killerjavascript.com/beginners-jquery/

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 released a podcast where discuss the differences between Ajax and Flash.

You can read more about it in the killersites.com Magazine.

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.

I’ve reviewed several AJAX books and each has their own slant on the subject. Build Your Own AJAX Web Applications is the first that actually got me to think of AJAX based applications as a replacement for the traditional desktop applications.

… You’d figure I would have clued into this reality before, but for some reason, it only clicked while reading chapter 2!

WHO IS THIS BOOK FOR

Clearly you need to have a web programming background to understand this book. If you’re shaky with programming and object oriented programming is a great mystery to you, then you might find aspects of this book challenging.

On the flip side, if you want a refined and advanced approach to injecting AJAX into your web work, and you are comfortable with Javascript and a server-side language like PHP, then this is a very good book.

TOPICS COVERED

• An overview of the basic technologies you’ll need to use to build Ajax applications.
• Understand the XMLHttpRequest object, the core of Ajax applications.
• Build a cross-browser XMLHttpRequest wrapper that you can use in all of your Ajax projects – using OO Javascript.
• Build an Ajax application site monitor that works in real time.
• Learn how to use Ajax without breaking older browsers or causing accessibility issues.
• Fix the “Back button” problem.
• Use JSON, YAML, and XML to communicate with the server.
• Create an Ajax search application that pulls data from Amazon, del.icio.us, and Google.

.. yes, I got this list from amazon, but why reinvent the wheel!

MY CONCLUSION

I like the fact that the book does a good job of teaching AJAX while not getting bogged down in useless code and text – the book is concise, to the point and thin.

Get the book.

Stefan Mischook