JavaScript is a scripting language used to enable programmatic access to objects within other applications. It is primarily used in the form of client-side JavaScript for the development of dynamic websites. JavaScript is a dialect of the ECMAScript standard and is characterized as a dynamic, weakly typed, prototype-based language with first-class functions. JavaScript was influenced by many languages and was designed to look like Java, but to be easier for non-programmers to work with(From Wikipedia).

A comprehensive introduction to the JavaScript Programming Language by Douglas Crockford who is the creator of JSON.

* The Javascript Programming Language Part 1
* The Javascript Programming Language Part 2
* The Javascript Programming Language Part 3
* The Javascript Programming Language Part 4

I think it’d be really cool if someone developed a really good ECMAScript compiler that I could write server apps with.  I think the flexibility of the language and the number of people that are familiar with it (through JavaScript and ActionScript) warrants more investment in the language itself as a pure language.  I think it hands-down beats Python, for instance, in terms of ease-of-programming, power, and flexibility.  Further, variants like ActionScript show that optional type checking can be incredibly beneficial in many circumstances and allow for easier refactoring and code manipulation.

I could give examples as to why Python is very non-ideal, PERL is out-of-fashion, PHP just plain sucks, and Ruby is just another fad language that I won’t waste my time learning, but I’ll leave those as exercises for the reader…

Moving on.  Ideally, a compiler of this sort would produce a single executable that encapsulated the runtime environment in the binary so that people wouldn’t have to install a separate ECMAScript runtime library.

If a sufficiently well-supported and efficient product of this type was released, I believe it could really change the playing field for server scripting languages.  Next we just need jssp…

(If no one else works on this, I might make it a pet project of mine in a couple months — too busy at the moment.)

السلام عليكم و رحمه الله تعالى و بركاته

اعطى 3 من مهندسى جوجل محاضره بعنوان EcmaScript5 , Upcoming changes to JavaScript ، تناولت المحاضره التغيرات التى ستطرأ على اللغه فى خلال سنه ان شاء الله بعدما اتفق مصنعوا المتصفحات ادراج مواصفات EmaScript5 الجديده ، يمكنك تحميل المحاضره من هنا ، و يمكنك تحميل الشرائح من هنا .

ما هى قصه EcmaScript 5 ؟

بعدما تيقن مصنعوا انه يستحيل ادراج مواصفات EcmaScript 4 فى جافاسكربت حاليا ، لأنها تقلب اللغه رأسا على عقب مقارنه بالوضع الحالى كما انها ضخمه جداااا و ليست backward compatible ، قاموا بإنشاء مجموعه جديده لتحديد مواصفات EcmaScript 3.1 تحتاجها فعلا اللغه بوضعها الحالى بحيث تكون backward compatible و يسهل ادراجها فى وقت قصير بعدما انتهوا من المواصفات و بعد وقت كبير من المناقشات انتهوا إلى مواصفات اطلقوا عليها EcmaScript 5 ، اتفق صناع المتصفحات على ادراجها و هى حاليا فى مرحله التنقيح ، كتب john resig مطور مكتبه jQuery تدوينتين يناقش بهم بعض مزايا EcmaScript 5 الجديده هنا و هنا . او يمكنك قراءه المواصفات كامله من هنا .

خارج النص : يمكنك الان متابعه ما اقوم به يوميا من خلال حسابى على twitter .

JavaScript, being so simple to learn & use is one programming language which is not always given its proper due. I think the main reason for this is that most people who tries to undermine the language are greatly fooled by it’s simplicity. Although, it has its fare share of shortcomings but the kind of things it can accomplish is pretty amazing.  If you have any doubts, check Can Your Programming Language Do This? at Joel on Software.

There are raging and never ending debates as to whether JavaScript is even a true programming language or whether it is an object-oriented language at all but that’s beside the point.

IMHO, JavaScript does indeed exhibit object-oriented programming language features. As per Yahoo! Answers, there are two models of object orientation. One is based on classes as the templates from which to create objects (instances of classes), and the other relies on prototypes that are already objects and which can be cloned to create new instances. JavaScript (and others) takes the prototype approach.

In any case, today I am here to guide you towards few sources which should go a long way in giving you a good idea about what JavaScript is and what it isn’t. Statutory warning – most of them are of advanced nature . So, here you go, look at these sources which might quench your thirst for advance level JavaScript:

JavaScript Execution Context, Closure, Eval and “this” Keyword

Javascript Closures

The Magic Eval

Quirksmode JavaScript Tutorials

Scope in JavaScript

Variable Scope for New Programmers

Code Conventions for the JavaScript Programming Language

The JavaScript Programming Language

Douglas Crockford: JavaScript Doesn’t Suck

JavaScript as a Functional Language

Functional JavaScript – Harnessing the power of the Function Object

Yahoo! User Interface Blog has these excellent resources:

Douglas Crockford, a senior JavaScript Architect at Yahoo! and introducer of JavaScript Object Notation (JSON) to the world, whose  JavaScript: The World’s Most Misunderstood Programming Language is a must read, had a go at clearing the common JavaScript misgivings for you folks out there:

YUI Theater: Douglas Crockford, The JavaScript Programming Language

Video: Douglas Crockford, “An Inconvenient API: The Theory of the Dom”

Video: Douglas Crockford, “Advanced JavaScript”

Learning JavaScript Programming Language through Video Lectures

By Default ASP.Net pages communicate with the server through a mechanism call “PostBack”. Postback is very useful and efficient, except for the cases, where 1) You have a huge page, with a lot of processing required at server, so doing all that processing on every postback is not only waste of resources on the server, but also hurts the user experience. 2) You have client side variable, which will be lost on page refresh(i.e. postback).

You can avoid both these limitations by introducing Client Callbacks in your application. In a client callback a client side event makes a request to the server, at server the page is initiated, it members are created, however page runs a modified version of its life cycle and only method that is marked for invocation is called; that, then can return a value that can be read using another client side function.

Through out this process, page is available to the user and results are quick in most of the cases as on a small amount of data is being exchanged between client and the server.

To implement client callbacks you need to do some work both on server side as well as client side.

On server side, you need to:

1. Implement ICallBackEventHandler in the page, that you want to use callbacks in. It have two methods i.e. RaiseCallbackEvent and GetCallbackResults
2. Provide implementation for RaiseCallBackEvent, this is the method is invoked by the client to perform callbacks. This method accepts string as an argument.
3. Provide implementation for GetCallbackResults, this method is invoked by the server, to process the request and return the results to the client as a string
4. Retrieve a reference of a client side function (Using ClientScript.GetCallbackEventReference method), this function will be invoked as the result of server side processing, and it can be used to process any results coming back from server
5. Register a client side script, using Page.ClientScript.RegisterClientScriptBlock method, that will make a call to the server. 

On ClientSide, you need to:

1. Implement the function that you provided as an argument in step 4 above
2. Call the function you registered in step 5 above, on a client side event.

Lets look at the code that you will use to implement your client call backs. In our demo project, we have two comboboxes on our asp.net page. One contains a list of departments and other a list of employees in the selected department. What we want to do is, fill employee combobox with the respective department employees, whenever our user changes department in Department combobox, without doing a postback.

First things First; Implement ICallbackEventHandler interface

public partial class _Default : System.Web.UI.Page,ICallbackEventHandler

Implement two methods of ICallbackEventHandler

#region ICallbackEventHandler Members
    /// <summary>
    /// this method Returns the results of a callback event.
    /// </summary>
    /// <returns></returns>
    public string GetCallbackResult()
    {
        //as only strings can be sent back to the client, we are will iterate through the list of
        //employees and convert it into comma delimited string
        string employeelist="";

        foreach (Department dept in departmetList)
        {
            if (dept.Name == deptArg)
            {
                foreach (Employee emp in dept.Employeelist)
                {
                    employeelist += emp.Name;
                    employeelist += ",";
                }
            }
        }

        return employeelist;
    }

    /// <summary>
    /// This method is invoked by the client, this will be used to receive parameter values from the client
    /// </summary>
    /// <param name="eventArgument"></param>
    public void RaiseCallbackEvent(string eventArgument)
    {
        //right now all we are doing is to set the class level variable to eventArgument
        //that was sent by the client, recall that it is departments name.
        deptArg = eventArgument;
    }

In your page_load event handler, first retrieve the reference of client function that will be invoked as the result of call back using ClientScriptManager.GetCallbackEventReference,

string callbackEventReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "GetResults", "");

this method has several overloads, the one we have used takes target (in this case “page”), the “argument” that was passed by the client, name of the client side event handler that received the result of callback event and context as arguments. Context is any client script that will be evaluated prior to making a callback request. In this case we have passed an empty string.

Then you need to build and register a client side script, that will call this CallBackEventReference, this is the script that will make the call to the server.

string callbackScript;

callbackScript = "function CallServer(arg){" + callbackEventReference + ";}";

//register callbackScript with the client using ClientScriptManager.RegisterClientScriptBlock
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);

So this was all that you need to do in our server side code, and now we will look at the client side code that we need to write to complete our client Callback.

First we will write the function (using ECMAScript) in script block of our aspx file, GetResults; that we have been referencing in our code above,

    function GetResults(result)
    {
        if(result!="")
        {
        var array=result.split(",");
        for (var i=0;i<array.length;i++) {
        option = new Option(array[i],array[i]);
        var slc_target = document.getElementById("ddlEmployee");
        slc_target.options[i] = option;
        }       

        }
        else
        {
        //do something
        }
    }

This function is accepting results; which is a string and it is splitting it into an array. Then all it does is, bind “ddlEmployee” a combobox on the page, with this array.

and finally on a client side event of another combobox, “ddlDept”, we will invoke “CallServer” client side function that we registered using our serverside code and we will pass department as an argument.

<asp:DropDownList Width="100" ID="ddlDept" runat="server" OnChange="CallServer(ddlDept.value)">

I have attached the demo VS 2008 sollution here, when you run the project, you can see that, whenever you change any value in the Department Combo box, values in Employees combobox are refereshed without making a postback to the server.

Download demo project here

And Happy Programming!

if u r familiar with Javascript can u tell what will be the output of these lines ?

var src="abcd";
var dest="";
for (var i=0;i<4;i++)
{
          dest+=src[i];
}
alert(dest);

well, it’s obvious that this fragment will produce a message box holding the string “abcd” unless u r used to code Javascript for IE

in Firefox or Chrome it works like a charm

but in Internet Explorer  -i think till IE 7, i didn’t test it with 8- that will produce “undefinedundefinedundefinedundefined”

so why is that ?!!!!

that is simply because in IE u cant index char in a string using square brackets so u can not use “src[i]“

but instead u use src.charAt(i)

so the fragment would be

var src="abcd";
var dest="";
for (var i=0;i<4;i++)
{
          dest+=src.charAt(i);
}
alert(dest);

and that works fine with the rest of the browsers

i did not look for that in the ECMAscript standard but that thing in IE sucks

السلام عليكم و رحمه الله تعالى و بركاته

قد ذكرت فى موضوع المصفوفه فى جافاسكربت 1.6 انه تم اضافه مواصفات E4X للجافاسكربت ، ال E4x -اختصار ECMA for XML- هو امتداد للغه جافاسكربت يمكننها من برمجه ال XML بطريقه ابسط بكثيرررر من ال DOM ، متاحه حاليا -وقت كتابه التدوينه- فى فايرفوكس فقط ، تم معايره مواصفات E4X بناءا على مواصفات ECMA-357 standard .

قدمت E4x كائن جديد من نوع XML يمكنك من كتابه  xml literals داخل كود جافاسكربت و برمجتها بمنتهى السهوله ، عليك اولا احاطه كود جافاسكربت بتاج <script> لكن مع تغير الخاصيه type إلى text/javascript;e4x=1 كما يلى :

<script type="text/javascript;e4x=1">
    /* JavaScript code here */
</script>

إنشاء كائنات XML

يمكنك انشاء كائنات XML عن طريق E4X بطريقتين ، الطريقه الاولى عن طريق ال XML constructor كما يوضح الكود البسيط التالى :

var languages= new XML('<languages type="dynamic">\
<lang>JavaScript</lang><lang>Python</lang></languages>');

ملحوظه : ال \ التى فى اخر السطر الاول لأنى قسمت النص إلى سطرين حتى يستوعبه عرض المدونه و لا يخرج عن الاطار .
و الطريقه التانيه فى انشاء كائن XML هى استخدام XML literal كما يوضح الكود البسيط التالى :

var languages = <languages type="dynamic">
<lang>JavaScript</lang>
<lang>Python</lang>
</languages>;

فى كلتا الحالتين ينتج كائن من نوع XML كما يلى :

alert(typeof languages); //XML

إذا كان ال XML المكتوب غير صحيح -كأن تنسى غلق تاج- فسينتج عنه error .

التعامل مع المتغيرات

ال XML literal يتميز عن ال XML constructor فى انه يمكنك وضع متيغرات الجافاسكربت داخل كائن ال XML اثناء انشاءه من خلال وضع اسم المتغير داخل {  } كما يوضح الكود البسيط التالى :

var h = "html";
var text = "some text ya nas";
var doc = <{h}><body>{text}</body></{h}>;
alert(doc.toString());
// <html><body>here's some text ya nas</body></html>

يمكنك عمل attributes ديناميكا بنفس الطريقه كما يوضح الكود التالى :

var a = 2;
var b = <foo bar={a} ></foo>; //<foo bar="2" ></foo>

يتم استبدال علامات التنصيص “و’ و علامه الاصغر من < و علامه & بال entity المقابل لهم كما يوضح الكود التالى :

var b = 'he said " don\'t leave " ';
var el = <foo a={b} />;
alert(el.toString());
// <foo a="he said &quot; don't leave &quot; ">

يمكن ايضا استخدام متغيرات الجافاسكربت لعمل اسم ال attribute كما يلى :

var a = "att";
var el = <foo {a}="b" />;
alert(el.toString()); //<foo att="b">

لا يمكنك عمل التعبير كاملا عن طريق {} كما يلى :

var a = 'a="b"';
var el = <foo {a}/>;

التعامل مع ال atrributes

يمكنك تغير ال attributes و الحصول على قيمها عن طريق وضع @ قبل إسم ال attribute كما يوضح المثال البسيط التالى :

alert(languages.@type); // Alerts "dynamic"
languages.@type = "agile";
alert(languages.@type); // Alerts "agile"
alert(languages.toString());
<languages type="agile">
    <lang>JavaScript</lang>
    <lang>Python</lang>
</languages>

عليك ملاحظه انه لابد من تحويل قيمه ال attribute إلى نص عن طريق toString قبل مقارنته بنص اخر كما يلى :

if(languages.@type.toString() == "agile"){
    // do something
}

التعامل مع الكائن XML

الكائن XML الذى يتم انشاءه عن طريق E4X يحتوى على العديد من الوظائف التى تمكنك من التعامل معه و الحصول على المعلومات منه و تحديث قيمه ، هيا بنا ننشأ كائن XML جديد كما يوضح الكود التالى :

var person = <person>
    <name>Mostafa Farghaly</name>
    <likes>
        <os>Windows Vista</os>
        <browser>FireFox</browser>
        <language>JavaScript</language>
        <language>PHP</language>
    </likes>
</person>

يمكنك الحصول على معلومات الكائنات التى يحتويها الكائن person عن طريق dot notation و عن طريق معامله الكائنات كأنها داخل associative array كما يوضح الكود البسيط التالى :

alert(person.name); //Mostafa Farghaly
alert(person["name"]); //Mostafa Farghaly
alert(person.likes.browser); //FireFox
alert(person["likes"].browser); //FireFox

الكائن الذى يتكرر اكثر من مره يدخل داخل كائن من نوع XMLList يحتوى على مجموعه مرتبه من هذه الكائنات المتشابهه و له الوظيفه length التى تبلغ عن عدد تلك الكائنات كما يلى :

alert(person.likes.language);
<language>JavaScript</language>
<language>PHP</language>
alert(person.likes.length()); //2

عليك ملاحظه ان length وظيفه و ليست خاصيه كما فى حاله المصفوفه .

و كما فى ال DOM يمكنك استخدام ال * للحصول على كل ال Child nodes كما يوضح المثال البسيط التالى :

alert(person.likes.*.length()); //4

المعامل . يستخدم للتعامل مع الكائنات الفرعيه مباشرا من الكائن الحالى direct child nodes ، انا المعامل .. فيستخدم للتعامل مع الكائنات الفرعيه بالنسبه للكائن الحالى مهما كان عمقها او مهما كانت متفرعه من كائنات اخرى فرعيه كما يوضح المثال البسيط التالى :

alert(person..*.length()); //11

الكود السابق ارجع 11 لأنه ناتج ال element node و ال text node داخل الكائن person .

هناك ايضا وظائف اخرى للكائن XML كما يوضح الكود البسيط التالى :

alert(person.name.text()); //Mostafa Farghaly
var xml = person.name.toXMLString();
//<name><Mostafa Farghaly/name>
var personCopy = person.copy(); //new person XML object
var child1 = person.child(1); // <likes> ... </likes> element

التعامل مع الكائن XMLList

كما ذكرت من قبل الكائن XMLList الذى ينتج من الاستعلام عن العناصر المتشابهه له الوظيفه length الذى ترجع عدد هذه الكائنات ، كما يمكن عمل loop على هذه الكائنات من خلال for كما يوضح الكود البسيط التالى :

var languages = person.likes.language;
for(var i=0; i<languages.length(); i+=1){
    alert(languages[i]);
}

كما يمكنك ايضا استخدام الجمله for each in الجديده فى جافاسكربت 1.6 -و مدعومه فى فايرفوكس فقط- للإستعلام عن قيم الكائنات كما يوضح الكود البسيط التالى :

var languages = person.likes.language;
for each(var lang in languages){
    alert(lang);
}

عليك ملاحظه ان for in تقوم بالحصول على ال key -الخصائص و الوظائف- ، انا for each in تقوم بالحصول على القيم فقط value .

يمكنك عمل XMLList ببساطه بإستخدام طريقه ال XML literal عن طريق احاطه الكائنات الجديده ب <> و </> كما يوضح الكود البسيط التالى :

var xml_list = <>
<language></language>
<language></language>
</>;

و يمكنك الاضافه كائنات جديده على ال XMLList عن طريق المعامل =+ كما يوضح المثال البسيط التالى :

var languages = person.likes.language;
languages += <language>Ruby</language>;

ال XMLList الناتج يكون Static بمعنى انه اذا اضيف عليه كائنات جديده فإن الوظيفه length لن تبلغ عن زياده كائن جديد ، عليك اعاده انشاء ال XMLList كما يوضح المثال التالى :

var languages = person.likes.language;
alert(languages.length()); //2
languages += <language>Ruby</language>;
alert(languages.length()); //2
languages = person.likes.languages;
alert(languages.lenght()); //3

البحث و التنقيح

يمكنك إضافه فلتر بين قوسين () للحصول على كائن معين من بين عناصر ال XML ، يمكن اختبار ال attributes كما يوضح المثال البسيط التالى :

var html = <html>
    <p id="p1">the 1st paragraph</p>
    <p id="p2">the 2nd paragraph</p>
</html>;

alert(html.p.(@id=="p1")); // the 1st paragraph

و يمكنك عمل فلتر على العصنر كما يوضح المثال التالى :

var people = <people>
    <person>
        <name>mostafa</name>
        <age>21</age>
    </person>
    <person>
        <name>mohamed</name>
        <age>31</age>
    </person>
</people>;

alert(people.person.(name == "mohammed").age); //31

و يمكنك تمرير وظيفه للفلتر كما يوضح المثال البسيط التالى :

function overs30(age){
    return age>30;
}
alert(people.person.(over30(parseInt(age)).name); //mohammed

للمزيد :

Mozilla E4X
Mozille E4X tutorial
Mozilla Processing XML with E4X

Here’s a few JavaScript libraries and experimental demos using SVG and VML vector graphics in addition to CSS3 border-radius property to create cross-browser rounded corners without images:

Curvy Corners JavaScript Library
Cornerz JavaScript Library
DD Roundies JavaScript Library
SVG and VML Round Boxes
Rounded Corners using VML
SVG Multiple Images and Rounded Corners
border-radius for all
Rounded Corners for Image Elements in Firefox with SVG
Rounded Corner Generator for CSS3/SVG
Vector Corners using SVG, VML, and CSS
Emulating CSS border-radius using VML

Here’s a collection of articles on JavaScript games and animation demos that push the limits of browser-based graphics using sprites and canvas, SVG, or VML based vector graphics:

3D Corridor Game
HTML5 Canvas JavaScript FPS
Wolfenstein 5K
Unreal Soccer
Nihilogic JavaScript Games
Def-Logic JavaScript/ActionScript Arcade Games
JavaScript Drum Machine
JavaScript Battleship! Game
JavaScript Chess Game
JavaScript Checkers Game
JavaScript Arkanoid Port
JavaScript 3D PacMan Port
Pre3D JavaScript Engine
25 Amazing JavaScript Games
Fifty Websites that Make Amazing use of JavaScript
Chrome Experiments
3D Games with HTML5
3D Games with HTML5 Part 2
JavaScript Game Programming
JsMSX Emulator
wxJavaScript UI Library
Gamelib JavaScript Library
GameQuery JavaScript Library
GameJS JavaScript Library

Here’s a collection of articles on the W3C standards compliance enhancements and modern features introduced in IE8:

IE8 Web Developer Readiness Summary

Web Standards Support in IE8

Overview of Changes in IE8

CSS Improvements in IE8

Versioning Language Features in JScript

DOM Object Prototypes in IE8

Selectors API in IE8

Circular Memory Leak Mitigation in IE8

Accessor Support in IE8

HTML Enhancements in IE8

Differences between IE8 Compatibility View and IE7

Using Filters in IE8

IE8 Alpha Opacity Filter

IE8 CSS Bugs

IE8 Compatibility Mode Triggers Diagram

WebBrowser Control Rendering Modes in IE8

IE Compatibility List Pruning

Compatibility List FAQ

Here’s a collection of articles detailing the uses and limitations of event propagation in JavaScript, ActionScript and the frameworks based on them.

Event Delegation without a JavaScript Library

Event Delegation with JavaScript

Delegating the focus and blur events

onfocus and onblur Implementation in YUI

Event Capture Explained

Using Events in the Document Object Model

Event Delegation is Easier than you Think

JavaScript Event Order

XML DOM Events

Tree Menu using Event Delegation and YUI

Event Delegation in jQuery

jQuery Live Events

Reglib Event Delegation Library

Event Delegation with YUI

Supporting Three Event Models at Once

XUL Event Propagation

Event Propagation in Flex

Flex Event Object

Flex Event Propagation Visualization

Introduction to Event Handling in ActionScript 3.0

Button Capturing in ActionScript 1 and Actionscript 2

Here’s a few articles explaining memoization techniques in JavaScript and ActionScript:

Memoization in ActionScript 3
Memoization in JavaScript with an Expiration Time
Basic JavaScript Memoization
Variations of JavaScript Memoization

JavaScript is the global web version of the unix shell script, simply increadibly useful. With tools like ubiquity and greasemonkey you can do lots of cool stuff. Also all the nice frameworks, GUI components and the JSON APIs makes it a very useful language.

So to help you learn JavaScript and for my own reference I have listed some really good resources

The JavaScript Programming Language
http://video.yahoo.com/watch/111593/1710507
http://video.yahoo.com/watch/111594/1710553
http://video.yahoo.com/watch/111595/1710607
http://video.yahoo.com/watch/111596/1710658

Advanced JavaScript
http://video.yahoo.com/watch/111585/1027823
http://video.yahoo.com/watch/111586/1027832
http://video.yahoo.com/watch/111587/1027854

JavaScript – The Good Parts
http://video.yahoo.com/watch/630959/2974197

Interactive tutorial by John Resig:
http://ejohn.org/apps/learn/

JavaScript best practices
http://www.slideshare.net/cheilmann/javascript-best-practices-1041724

Blogs:
http://www.robertnyman.com/
http://www.wait-till-i.com/
http://remysharp.com/
http://frontendbook.com/
http://mattsnider.com/
http://ejohn.org/

Setelah beberapa hari yang lalu gw mempost Google Chrome, kali ini gw bakal mempost sesuatu yang tertanam di dalem Chrome atopun Browser laen : JavaScript Engine atau kalau kita mau mengikuti standar para pengembang Engine adalah EcmaScript Engine.

Mungkin kalian tau kalau sekarang mungkin semua browser uda mensupport javascript, tapi mungkin ada yang bingung kenapa kalo web nya dibuka pake IE beda hasilnya sama dibuka sama Mozilla ato Opera, malah ga cuma beda, bisa juga code javascript kita ga jalan, alias Crash Total,  nah untuk hal itu, bukan salah programmer, tapi kesalahan si pembuat JavaScript Engine nya  (pokoke, programer web ga mau disalahin T_T)

Nah ada beberapa engine yang tenar and dipake di browser-browser kenamaan.. kaya Opera, Mozilla, IE, en tentu aja Chrome. En beberapa engine tersebut bakal gw bahas disini, kl ga lengkap bahasannya sori ya.. soalnya susah loh browsing cari artikel + coding kerjaan kantor + inet dengan cap “semoga kebuka”   ..hoho

Disini gw cuma bahas 4 browser, and 2 engine, soalnya ada 2 browser yang gw ga tau pake engine apa, Opera 9.63 and IE 6.0 mungkin kl ada yang tau bisa share disini.. So ada 4 browser yang bakal gw bahas, yaitu:

· IE 6.0

· Goggle Chrome 1.0.154.48

· Mozilla 3.06

· Opera 9.63

Rhino

Rhino adalah engine JS yang dibuat pake bahasa JAVA, (jangan keliru ya antara JAVA dan JavaScript adalah 2 hal yang berbeda) oleh Mozilla Foundation, selain Rhino, juga ada engine JS laen buatan Mozilla yaitu Spider Monkey yang dibuat pake bahasa C, and juga Carakan yang sedang dikembangin en bakal diimplement pada versi Opera 10.

Cara kerja Rhino adalah, javascript diconvert menjadi Java Class and setelah itu baru lah script dijalankan oleh Java Virtual Machine (JVM). Menurut wiki, Rhino 1.6r2 uda dibundled dengan J2SE 6 keluaran SUN, so buat para developer lebih gampang buat gunain javascript di program mereka. Tapi harus diperhatiin, cuma J2SE 6 keluaran SUN yang ngebundled Javascript engine ini, en JVM keluaran vendor laennya ga ngebundled Rhino, seperti Apache Harmony, Excelsior JET ,Microsoft JVM , IBM J9, JRockit (BEA/Oracle), dll.

V8

V8 adalah Engine Javascript yang terpasang pada browser Google Chrome. V8 adalah buatan Google sendiri, dikembangkan secara khusus oleh Team yang berbasis di Denmark. Engine ini diklaim sebagai Engine Java Script tercepat dibanding para kompetitornya. V8 dikembangkan secara open source dengan lisensi BSD, so kalo ada yang mau utak atik enginenya.. monggo diunduh dari: http://code.google.com/p/v8/ jangan lupa, kudu bisa C++ buat utak atiknya

Benchmarking

Ga puas kaynya kalo ga liat sendiri adu performance JS Engine masing-masing browser, so gw benchmark JS pake 3 benchmarker yang uda cukup tenar:

• V8 Benchmarker: http://v8.googlecode.com/svn/data/benchmarks/v3/run.html
• Dromaeo:http://www.dromaeo.com
• SunSpider: http://www2.webkit.org/perf/sunspider-0.9/sunspider-driver.html

Suprisingly, berdasar benchmark yang gw lakuin di 3 engine benchmark berbeda: SunSpider, Dromaeo, en V8, hasilnya nunjukkin hasil yang relatif sama, Chrome di posisi 1 and IE jadi juru kunci, pos 2 and 3 ganti-gantian, antara mozilla and opera..

1. Chrome: engine V8
2. Mozilla: engine Rhino  (pos 2 ato 3)
   
3. Opera 9.63:      (pos 2 ato 3)
   
4. IE 6:
   

And ini graph perbandingannya

Emank, dari ketiga benchmark itu, Chrome dengan V8 nya jadi jawara dengan perbedaan yang banget signifikan, en IE kali ini jadi pihak yang kalah telak (sori loh buat penggemar IE =d), hasil graph juga nunjukkin kalo performance javascript engine punya IE bener2 kaco.. khusus untuk testing dromaeo, IE gw sampe crash and ga bisa di test benchmarknya.. so untuk urusan JS, IE is a crap…

Back to V8, menurut keterangan yang gw dapet dari http://code.google.com/apis/v8/design.html, V8 bisa unggul karena 3 fitur utama mereka:

• Source code JavaScript yang dikompilasi langsung menjadi native machine code saat pertama kali
• Sistem manajemen memori efisien yang menghasilkan alokasi obyek cepat dan jeda waktu yang sangat kecil dalam proses garbage collection.
• Penggunaan hidden class dan inline cache yang mempercepat function call.

Mungkin untuk lebih jelas soal tekniknya, bisa liat dari http://code.google.com/apis/v8/design.html

So mo pake yg mana? kalian sendiri yang menentukan, emank seh IE cupu soal JS, tapi mungkin ada fitur laen di IE yang kalian suka, ya silakan aja pake, wong gw sendiri lebih prefer pake mozilla =d

Test machine:

Celeron D 331 2,66Ghz
512MB DDR 400Mhz
Windows XP SP3

Chrome ( Chrome/0.2.149.29 )
http://dromaeo.com/?id=41149

Firefox Nightly Build with JIT ( Gecko/20080910043000 )
http://dromaeo.com/?id=41155

Opera 9.60 Beta 1 ( Presto/2.1.1 )
http://dromaeo.com/?id=41166

Summary:

http://dromaeo.com/?id=41149,41155,41166

Svenska F-I (Fantasy Interactive) har tagit sig an utmaningen att ersätta HTML med Flash. De gillar inte AJAX eller Silverlight, liksom.

Utöver den sedvanliga filmvisaren har de i sommar byggt upp en egen Flashbaserad bloggmotor (Propod) och ett eget Flashbaserat publiceringssystem (verkar främst vara för f-i.com).

F-I har med E4X (ECMAScript for XML) i Actionscript 3 lyft Flash till nya nivåer. De har t ex byggt upp fullskalig navigering genom XHTML-filer i Flash som läses via Javascript. Stöd för browser “back” “forth” finns, likväl som scrollning samt delvis copy-paste. RSS-stöd och vissa sociala bokmärken likså. Och 83 sidor har SEO anpassats för bl a Google.

Några övriga, “trevliga” detaljer med arbetet är egen högermeny och – så klart – trevliga animationer vart administratören än önskar.

APE is open source 2D physics engine for Flash or Flex. Written by Alex Cove.

Demo:

Resources:

• APE main page
• Crab robot demo
• APE SVN repository

When starting off with jQuery, you obviously need to know the basics, like the most common functions, the way you lay out the code, and the chaining.

1. Reason for use – jQuery is a widely used JavaScript library because it ‘closes the gap’ with common cross-browser compatibilty in JavaScript. It simplifies many functions that are already available in JavaScript and also adds it’s own ones that are easily used.

2. Chaining – If you have ever been reccomended jQuery by someone else, I am sure they used the term ‘chaining’ somewhere in their persuasive speech. Why? Because chaining is the most useful advantage the jQuery library gives you. Here is an example of chaining:

$(“#submenu”).html(“Hello World”).remove();

In the above ’snippet’, I have changed the innerHTML of the element with the ID ’submenu’ to ‘Hello World!’ and then removed it from the page.
The plain JavaScript variation of this is as follows:

var submenu = document.getElementById(“submenu”);
submenu.innerHTML = “Hello World!”;
submenu.parentNode.removeChild(submenu);

Now that’s a noticeable difference. When using jQuery effects like sliding and fading, the difference does become a lot greater, which we will work on later.

3. Basic Functions – As you have seen in the example I gave, I used 3 different functions.

1. $(“”);
2. .html(“”);
3. .remove();

1. This is what starts the jQuery. From here on out, I’ll call it the selector. This nifty thing allows you to grab either one element from the page, or an array of elements and then reference it to any functions that follow in the chain. If you were to use:
   

   $(“.CSSclass”);

   That would select every element on the page that has the class CSSclass, notice the period ( . ).

   $(“#CSSid”);

   That selects every element on the page that has the ID CSSid although it should be noted that you should only use the same ID once, i.e no repititions of IDs. Notice the hash ( # ).

   So we’ve looked at the jQuery alternatives to document.getElementById() and document.getElementsByClassName() (which is not in the DOM actually). The only other one is document.getElementsByTagName(). This also has an alternative in jQuery, much like the ID selector and the className selector, but you only use the name of the element. For example, if I wanted to grab all instances of the paragraph element, I would use:

   $(“p”);

   Notice that there is no period, hash, or anything else added, just the element name.

2. This is the innerHTML function. It works exactly as the plain JavaScript, .innerHTML.
3. This doesn’t have it’s own function in JavaScript, but it is normally referenced like so:
   

   var element = document.getElementById(“id”);
   element.parentNode.removeChild(element);

   This was also shown before, but just a little recap.

Recap on everything learned :

1. $(“”)
2. .html(“”);
3. .remove();

Sometimes, you need to set some HTML attributes automatically with a batch declaration.
By example imagine you want to set an mouseover over hundred of <a> links, in order to display their title content in an alert box. How to proceed ?

You could try to achieve this using a loop. Something like:

<html>
<a id="0" href="./0" title="the first"> link number 0 </a>
<a id="1" href="./1" title="the second"> link number 1 </a>
<a id="2" href="./2" title="the third"> link number 2 </a>
<a id="3" href="./3" title="the fourth"> link number 3 </a>
<a id="4" href="./4" title="the fifth"> link number 4 </a>
</html>


<script>
var number_of_link = 5;
for(i=0;i<number_of_link;i++){
document.getElementById(i).onmouseover =
function(){
alert("I'm the number "+i+" link")
};
}
</script>


Just try this tiny snippet: have you seen the problem ?
Every link has a function showing the last value of the i variable!

So, what does happened ?

We start iterating over a integer called i. This variable is in a global socpe. For each element found, we set a new function, wich display the i value. But the variable is passed by raference, and we want it to be passed by value !

Fortunately, we have a solution: we will dynamically add a new Function object, which will result in “statically” defined function.


<html>
<a id="0" href="./0" title="the first"> link number 0 </a>
<a id="1" href="./1" title="the second"> link number 1 </a>
<a id="2" href="./2" title="the third"> link number 2 </a>
<a id="3" href="./3" title="the fourth"> link number 3 </a>
<a id="4" href="./4" title="the fifth"> link number 4 </a>
</html>


<script>
var number_of_link = 5;
for(i=0;i<number_of_link;i++){
document.getElementById(i).onmouseover =
new Function("alert("I'm the number "+i+" link)");
}
</script>


The Function constructor allow us to take a String, and declaring it as a function. This tip forces the js interpetor to build the string, and only after, to build the function itself. So we achieve to have a static number written in each function we defined and desired omouseover effect.

For further information about function creation, i should recommend you this page:

www.howtocreate.co.uk/tutorials/javascript/functions

Have a look too, to some article describing the javascript closure:

www.jibbering.com/faq/faq_notes/closures.html

Le comité ECMAScript vient de décider de stopper les travaux sur la version 4 d’ECMAScript pour se concentrer sur l’ECMAScript 3.1 (mise à jour du JavaScript actuel). Depuis plusieurs années, Macromedia puis Adobe ont énormément travaillé avec le comité pour définir et faire évoluer cette norme. Les différentes actions et innovations pour améliorer la puissance de calcul et la rigueur dans le coding côté client ont amené Adobe à caler l’ActionScript 3 aux spécifications de la norme ECMAScript 4, de rendre Open Source la machine virtuelle (projet Tamarin chez Mozilla) et de continuer à faire évoluer la norme. Les standards figent des spécifications mais ne sont pas des moteurs d’innovation. On peut donc regretter ce recul du comité approuvé par MicroSoft, Apple, Yahoo et DOJO. La blogoshère tend à accuser ces gros acteurs de vouloir freiner la montée en puissance de Tamarin et de l’AS3. Je pense que le problème est plus complexe et que de nombreux développeurs JavaScript/web ne souhaitaient pas voir leur langage trop se complexifier pour tendre fortement vers Java (le même fossé que nous connaissons entre un développeur AS2 et un développeur AS3).

Mais peu importe la raison qui a motivé cette décision, il faut aujourd’hui analyser l’impact que cela aura sur le langage AS3. En fait, cette annonce n’aura aucun effet sur le langage et Adobe ne compte pas faire régresser sa syntaxe (packages, namespaces, etc…). Le fait que l’AS3 ne corresponde plus officiellement à un standard n’aura à mon avis aucun impact sur la communauté de développeurs. Si l’on se projette quelques années en arrière, Java n’était ni standard, ni open source, mais ce langage a su convaincre un public de développeurs passionnés grâce à sa puissance et ses innovations.

A l’opposé, je sais que l’équipe de développement du langage continuera de tenir compte des évolutions de l’ECMAScript et restera très attentive. Mais un standard est aussi un canvas limité, et le langage AS3 a du parfois se contraindre pour éviter de sortir du standard (overload natif, static class…). J’espère donc qu’Adobe fera évoluer de façon encore plus vive le langage pour qu’il réponde aux demandes des développeurs objets exigeants (et habitués à des POO en Java par exemple) mais aussi aux designers un peu oubliés avec la sortie de l’AS3. Le langage va aller de l’avant et c’est au final une bonne nouvelle, qui a suscité des posts très vifs sur le web… j’espère que vous serez calmes et sages sur mon blog.