TalkPHP - javascript question

TalkPHP (http://www.talkphp.com/forums.php)

- Javascript, AJAX, E4X (http://www.talkphp.com/javascript-ajax-e4x/)

- - javascript question (http://www.talkphp.com/javascript-ajax-e4x/4170-javascript-question.html)

allworknoplay

04-21-2009 04:49 PM

javascript question

I'm reading a bunch of tutorials on javascript. Perhaps I will learn this later but I am impatient.

1) Does javascript have version numbers? Like my currently installed PHP is 5.2.8, and soon to be 5.3.0.

Is there something like that in javascript? If so, what is the current "version"?

2) Is JS the same thing as saying javascript? Or does JS mean something else?

3) Is DOM and javascript intertwined?

4) If anyone recommends any recently published books on javascript, I'll run out and buy it immediately.

That's about it for now!

Thanks!

Kalle

04-21-2009 05:54 PM

1) Javascript does have versioning, but its not very often used clearly, its more which browser supports what and how. So what you are looking for is the DOM version supported

2) JS is javascript, except that in Microsoft world it may also referer to JScript

3) Javascript is the language, DOM is the Document Object Model which lets you alter the document

4) No clue, but Amazon must have some ;)

Salathe

04-21-2009 05:57 PM

Quote:

1) Does javascript have version numbers? Like my currently installed PHP is 5.2.8, and soon to be 5.3.0. Is there something like that in javascript? If so, what is the current "version"?

Yes. "JavaScript" (which is a trademark name) is a dialect of ECMAScript which the browsers support in various forms (to avoid trademark issues they can't call what they use "JavaScript"). As far as I'm aware the major browsers all support ECMAScript 3 (in their equivalent form: JScript for IE, JavaScript for Firefox, etc.). The current version of JavaScript in use in browsers varies; IE 8 I think is JScript 6 (equivalent to JavaScript 1.5), Firefox 3.0 has JavaScript 1.8 if memory serves. (Note: may not be 100% accurate but it gives you the idea)

Quote:

2) Is JS the same thing as saying javascript? Or does JS mean something else?

Yes. Not when talking about client-side scripting.

Quote:

3) Is DOM and javascript intertwined?

Not intertwined, but they (JavaScript and HTML DOM) do work closely together in our websites.

Quote:

4) If anyone recommends any recently published books on javascript, I'll run out and buy it immediately.

No book recommendation, I'm afraid of wasting your money! Plus, the web is the biggest, most revised and up to date book ever.

allworknoplay

04-21-2009 06:30 PM

Thanks you two....

Leave up to Salathe to provide a little history as well! haha..

I appreciate it though, the more I can absorb the better.

And I promise, soon enough I will be a pro like you guys and won't be asking so many questions..

I'm in my "catching up" phase...

As for books, I do agree, the web is better, faster and more current. I've always like to support the authors a bit, not sure how much of a cut they get though from book sales...I'm sure not very much...

This book is newly published and seems ok....

http://www.amazon.com/Professional-J...0338446&sr=1-8

So far JS code looks eerily similar to PHP....except they don't use $ signs for their variables..

PHP:

for($i=0;$<10;$i++) {

}

JS:

for(i=0;i<10;i++) {

}

I'm sure as I learn more it will start to separate itself from PHP syntax/format...

Kalle

04-21-2009 10:43 PM

Quote:

Originally Posted by allworknoplay (Post 23285)

But Javascript variables may contain $ (its called a sigil, PHP and PERL's sigil is $ for example. But in Javascript you may choose to prefix with a sigil or not) if you want, the following is perfectly valid:

javascript Code:

for($i = 0; $i < 10; ++$i)
{
    /* ... */
}

var $closure = function()
{
    alert('Hello World');
};

$closure();

allworknoplay

04-21-2009 10:50 PM

Quote:

Originally Posted by Kalle (Post 23291)

But Javascript variables may contain $ if you want, the following is perfectly valid:

javascript Code:

for($i = 0; $i < 10; ++$i)
{
    /* ... */
}

var $closure = function()
{
    alert('Hello World');
};

$closure();

Really??? That's great! I'm going to do that then so that I can be more consistent with PHP....

Now that looks even more like PHP....or should say, PHP looks more like JS... :-D

Good stuff!!! ^^

CoryMathews

04-22-2009 12:23 PM

I would suggest going to w3schools.com and learning how the html dom works. Then javascript will become much easier. But I would not spend to much time with the basic javascript and would jump right into a framework such as jquery.

sketchMedia

04-22-2009 02:11 PM

Quote:

Now that looks even more like PHP....or should say, PHP looks more like JS...

Well, most languages these days have syntax that look similar to C, including PHP. However with Javascript there are a few things that differ to PHP (well in the current version of PHP in any case) like closures, lambda functions,o bject literals etc

javascript Code:

obj = {
    var : 'test',
    print: function() { 
        alert(this.var);
    }
};
obj.print();

javascript Code:

var obj = function () {  
    function doAlert(str) {
        alert(str);
    }
    return {  
        var : 'test',  
        print : function() {  
            doAlert(this.var);  
        }  
    };  
}();
obj.print();

javascript Code:

obj = function(){alert('Self invoked!'); }();

javascript Code:

getName = function(){
        namesArray = ['sam', 'ben', 'john','dave'];
        
        return function(n){
            return namesArray[n];
        };
    }();
    alert(getName(2));

Quote:

But I would not spend to much time with the basic javascript and would jump right into a framework such as jquery.

Can't say I agree, I think a good understanding of how the language works (and ultimately how the framework works) is essential for performance if nothing else.

allworknoplay

04-22-2009 03:45 PM

Quote:

Originally Posted by CoryMathews (Post 23302)

that's exactly where I've been the last couple of days. I need to learn the fundamentals and get a complete understanding before I jump into a framework. I'm not sure which is a good one out there, there are so many!!

Quote:

Originally Posted by sketchMedia (Post 23304)

javascript Code:

obj = {
    var : 'test',
    print: function() { 
        alert(this.var);
    }
};
obj.print();

javascript Code:

var obj = function () {  
    function doAlert(str) {
        alert(str);
    }
    return {  
        var : 'test',  
        print : function() {  
            doAlert(this.var);  
        }  
    };  
}();
obj.print();

javascript Code:

obj = function(){alert('Self invoked!'); }();

javascript Code:

getName = function(){
        namesArray = ['sam', 'ben', 'john','dave'];
        
        return function(n){
            return namesArray[n];
        };
    }();
    alert(getName(2));

Can't say I agree, I think a good understanding of how the language works (and ultimately how the framework works) is essential for performance if nothing else.

Thanks for the examples, I'll have to break those down and try to understand them. The format looks pretty foreign to me...

Kalle

04-22-2009 03:48 PM

sketchMedia, I sometimes miss that loose syntax from javascript in PHP, especially when I've been coding Javascript for a few days without PHP. But atleast PHP 5.3 now got Closures!

allworknoplay, I would suggest using Mootools, a nice and easy small framework:
http://www.mootools.net/

allworknoplay

04-22-2009 04:39 PM

Quote:

Originally Posted by Kalle (Post 23311)

I've heard of Mootools mentioned around here. It goes up against jQuery and Prototype right? I feel like there's so many things out there, it's kinda overwhelming so I'm trying to take things one step at a time..

What is JSON? And if Mootools is a framework, does it go up against scriptalulous also? And what about joomla?

Sorry, for throwing out a lot of names...

Also one more thing, I assume that mootools can do the greybox effect? I'm not sure if that's the correct name of it...but it's when you want to view images and the whole browser becomes gray and the image appears in the middle, and it has that animated look...

Oh and one more thing... :-D

Where can I learn the proper procedures for utilizing the "ajax" loader...

Is it normally used when you're querying a DB and waiting for a result? I've seen this around so much and have never really looked into it...

Thank you!!!!!!!!!!!!!!!

^^^^^^^^^^

Kalle

04-22-2009 06:23 PM

Quote:

Originally Posted by allworknoplay (Post 23313)

jQuery, scriptaculous, etc. is all implementations pointing to solve the "same problem". I like mootools because, its small, compact, does the job and is easy to write. Ofcourse any jQuery developer may say the same about jQuery, so it differs from the persons point of view.

Quote:

Originally Posted by allworknoplay (Post 23313)

What is JSON? And if Mootools is a framework, does it go up against scriptalulous also? And what about joomla?

Sorry, for throwing out a lot of names...

JSON is data-interchange format, just like XML but it basiclly uses the same syntax as javascript closure objects, making it possible to eval json most of the times without a parser (but not recommeded to eval).

Quote:

Originally Posted by allworknoplay (Post 23313)

Also one more thing, I assume that mootools can do the greybox effect? I'm not sure if that's the correct name of it...but it's when you want to view images and the whole browser becomes gray and the image appears in the middle, and it has that animated look...

I don't think mootools comes with that "out-of-the-box", but it surely shouldn't be hard to implement.

Quote:

Originally Posted by allworknoplay (Post 23313)

Oh and one more thing... :-D

Where can I learn the proper procedures for utilizing the "ajax" loader...

Is it normally used when you're querying a DB and waiting for a result? I've seen this around so much and have never really looked into it...

Thank you!!!!!!!!!!!!!!!

^^^^^^^^^^

I've seen the last question quite a few times, the technique is pure simple. For example:

HTML Code:

<input type="button" id="request" value="Request" />

<div id="response"></div>

Thats our HTML, where we want the response to be put at and the button to trigger the request. The following code is mootools API, but I'm sure you can figure the idea out:

javascript Code:

/* The mootools must have domready for this to work */
window.addEvent('domready', function()
{
    /* Binds the event to the request button */
    $('request').addEvent('click', function()
    {
        getResponse('response');
    });
});

function getResponse(node)
{
    /* And now for the ajax loader! */
    $(node).set('text', 'Loading...');

    /* And now call the ajax request */
    /* ... */
}

So the "trick" is to change the value of the response area to the ajax loader before sending the request ;)

allworknoplay

04-22-2009 06:38 PM

Thanks Kalle,

That absolutely cleared things up. I will stick with mootool's since you suggested it. I hate anything that is bloated and from what I read quickly, mootool's is pretty compact.

Maybe I can get good enough to offer a "grey-box" effect one day for mootool's!!

CoryMathews

04-23-2009 01:43 AM

Quote:

Originally Posted by allworknoplay (Post 23321)

Maybe I can get good enough to offer a "grey-box" effect one day for mootool's!!

They have a million and one of these. Usually called lightbox, thickbox, [insert word here]box. They have them for all frameworks.

My personal choice is jQuery, I have not used mootools before but I would recommend jQuery to any new js user. Its real easy to learn and there is a plugin for almost anything you need to do. I would avoid prototype/scriptulous as well as any others.

Also stated above was the use of ajax. I would recommend writting one in regular javascript (only about 20 lines) so that you really understand what is going on. Then when you implement it in mootools/jquery you will see how great and simple they have made it.

...IMO objects in js is generally overkill. In all my projects I have never had a need for creating my own javascript objects, i'm sure there are reasons just I have never used them.

allworknoplay

04-23-2009 01:51 AM

Quote:

Originally Posted by CoryMathews (Post 23343)

Thanks Cory:

Quote:

I would recommend writting one in regular javascript (only about 20 lines) so that you really understand what is going on. Then when you implement it in mootools/jquery you will see how great and simple they have made it.

Exactly!! I am grinding everything out right now so that when I pick a framework, I won't get totally lost. In one of the books I read about a month ago on OO, the author mentioned that a lot of people don't truly understand the fundamentals of OO, and that's why they get lost when projects become bigger and more complex.

I've been coding PHP since it was PHP 3.0 and when it was called Pretty Home Page...LOL...

But never really sat down to grasp how everything works fundamentally. Same with JS......

I don't have a problem learning both mootools and jquery, but I would probably stop at 2 frameworks....

When I am ready for a JS framework, you'll definitely hear from me....

:-D

sketchMedia

04-23-2009 09:30 AM

Quote:

Originally Posted by Kalle (Post 23311)

Yea I too love the loose syntax it can be powerful but also it can be awkward if your not careful.

Looking forward to 5.3, closures, namespaces and late static binding are gonna be very useful indeed!

For the lightboxes, there are 1000's of plugins for more or less all frameworks
http://www.phatfusion.net/multibox/ - is one for mootools

http://leandrovieira.com/projects/jquery/lightbox/ - jquery

For the loader, in jQuery we could do something like this:

javascript Code:

$(function(){
    $("#loader").bind("ajaxSend", function(){
        $(this).show();
    }).bind("ajaxComplete", function(){
        $(this).hide();
    });
    $("#load").click(function(){
        $("#response").load('somethingHereToLoad.html');
    });
});

you need html like this:

html Code:

<div id="loader" style="display: none">Loading content ... </div>
<div id="response"></div>
<a href="#" id="load">Load!</a>

There are lots of ways of doing this in either framework.

Quote:

Agree, there is no point in learning a framework and not having a firm understanding of the language. An exercise like that will really hammer it home and also highlight why I use a framework more often than not!

All times are GMT. The time now is 06:36 PM.