Shibuyajs Digest

Shibuya.JS Digest Yoshinori TAKESAKO http:// namazu.org/~takesako / 日本の JavaScript 最新動向

the only JavaScript user group in (Japan) the world. Welcome to Shibuya.JS

id:secondlife x id:nagayama The founder of Shibuya.JS He is not here. (RubyConf2007)

I’m not JavaScript hacker

Shibuya.pm organizer (2 nd )

miyagawa -> TAKESAKO

Shibuya Perl Mongers

Shibuya.JS Tech Talks#1

Shibuya.JS Tech Talks#2…

Agenda

Shibuya.JS Digest : 日本の JavaScript 最新動向

Introduction x 1 <TAKESAKO>

(1) Web Polyglot (HTML/CSS & JS & Perl GIF89a)

(2) Mylingual.net (Japanize) UserJavaScript for i18n

(3) AJAJA (Server Side JS) replacement from PHP, Perl

(4) Cycal (Ajax spreadsheet)

(5) Fastladder (livedoor Reader)

(6) AutoPagerize (swdyh)

Lightning Talks x 3

(7) "orto" JavaVM on JavaScript <Yu Kobayashi>

(8) CSS3 Selectors to XPath <Piro>

(9) Fast JS XPath Engine for IE <amachang>

Introduction

Abnormal JavaScript

(1)

(1) Abnormal JS crazy hacks

Polyglot

HTML/CSS & JS & Perl in GIF89a (valid) Web Polyglot

Web Polyglot DEMO HTML/CSS & JS & Perl in GIF89a (valid)

View source

Perl in GIF89a GIF89a(q =/*.....Ä= );sub GIF89a{print "Hello Perl!"} __END__ #*/1);function GIF89a(){alert("Hello JavaScrpt!")} /*<body style=visibility:hidden> <div style=position:relative;visibility:visible> <h1>Hello HTML!</h1><img src=?> <script src=# language=JavaScript></script></div> */// ;

JavaScript in GIF89a GIF89a( q= /*.....Ä=);sub GIF89a{print "Hello Perl!"} __END__#*/ 1 );function GIF89a(){alert("Hello JavaScrpt!")} /*<body style=visibility:hidden> <div style=position:relative;visibility:visible> <h1>Hello HTML!</h1><img src=?> <script src=# language=JavaScript></script></div> */ // ;

HTML/CSS in GIF89a GIF89a(q=/*.....Ä=);sub GIF89a{print "Hello Perl!"} __END__#*/1);function GIF89a(){alert("Hello JavaScrpt!")} /* <body style=visibility:hidden> <div style=position:relative;visibility:visible> <h1>Hello HTML!</h1>  <img src=?> <script src=# language=JavaScript></script> </div> */// ;

How to break same-origin-policy. (Parallelize cross-domain access) Other GIF89a hacks GIF89a Binary Image Object for AJAX communications Protocol

GIF89a cross-domain access protocol <img src=“null.gif?q=param" onload=“ callback (this.width)"> function callback (data) { //… do action } (1) Define JS callback function (likes JSONP) (2) New Image Object CGI OK http://example.com/webapi/null.gif?q=foobar GIF Image size!

GIF can return 16bit x 2 over crossdomain

Server Side program (sample)

#!/usr/bin/perl use strict; use warnings; sub create_gif { my $size = pack "S2", @_; return "GIF89a$sizexf0x00x00x00x00x00xffxffxff," . "x00x00x00x00x01x00x01x00x00x02x02Lx01x00;"; } print "Content-Length: 35 "; print "Content-Type: image/gif "; binmode(*STDOUT); print create_gif(65535, 65535); 1;

It works!

(2)

Polyglot (i18n)

Japanese traditional life’s work on software

L10N (Localization)

I18N (Internationalization)

M17N (Multilingualization)

Japanese traditional programmer make it one's life to L10N, I18N...

Mylingual.net (Japanize)

What is Mylingual.net?

Mylingual.net

Transparent i18n to any language (Web UI only)

UserJavaScript (keeping HTML DOM structure)

Opera 9

Mozilla Firefox & Greasemonkey

Safari 2 & Creammonkey

Internet Explorer 6 & Turnabout Advanced / Trixie

Internet Explorer 7 & IE7pro

(Inspired from) Japanize

Transparent l10n to Japanese

A web browser extension, it works good

Translation data is Wiki-style

Support for Regexp & Date format

(3)

AJAJA (Server Side JS)

What is AJAJA?

Implementaion of JavaScript/ASP

cf. Legacy: MS IIS JScript/ASP

JS Engine

SpiderMonkey + a patch

CGI mode

#!/usr/bin/asp_js

Support for SQLite3 (default)

use('SQLite');

db = new SQLite('sample.db');

Sample code

Sample code of AJAJA

hello.asp

<%@ Language=JavaScript %> <% var hello = "Hello world"; %> <html> <head> <title> <%= hello %> </title> </head> <body> <h1> <%= hello %> </h1> </body> </html>

[ ソース ]

JSmarty (PHP Template on JS)

bbs.tpl (JSmarty – Smarty compatible)

View source template file

{foreach from=$rows item='row'} <dl> <dt> [ {$row[0]} ]  <strong style='color:green;'> {$row[1]} </strong>  投稿者： {$row[2]} 投稿日： {$row[3]} </dt> <dd><p> {$row[4]} </p></dd> </dl> <hr> {/foreach}

What is JSmarty?

Smarty is…

One of the famous PHP Template Engine

JSmarty is…

Smarty on JavaScript

Smarty clone

Emulate PHP strings function on JS

can use old Smarty template file

almost compatible

has a little incompatible

plug-in

Using JSAN.js to load

PMconnect (JS + Perl CPAN)

pmconnect 　 (Akira Higuchi)

SpiderMonkey (JS) <-> Perl binding library

/* GD */ Perl.Use("GD"); var im = new Perl("GD::Image",100,100); var white = im.colorAllocate(255,255,255); var black = im.colorAllocate(0,0,0); var red = im.colorAllocate(255,0,0); var blue = im.colorAllocate(0,0,255); im.transparent(white); im.interlaced('true'); im.rectangle(0,0,99,99,black); im.arc(50,50,95,75,0,360,blue); im.fill(50,50,red); var s = im.png(); Perl.Use("FileHandle"); var fh = new Perl("FileHandle", "gdout.png", "w"); fh.print(s); fh.close();

≠ JSAN

pmconnect – samples – oleexcel.js

(4)

Cycal (Ajax spreadsheet)

What is Cycal?

online Ajax spreadsheet

http://spreadsheet.sakura.ne.jp/ (by Abui Daisuke)

vs. Google

Cycal vs. Google spreadsheet cf. http://spreadsheet.sakura.ne.jp/paper/master's_paper.pdf (paper in Japanese)

vs. Excel

Cycal vs. Excel 2007  Cycal won!

You don’t need Excel 2007 any more. B.C. - Before Cycal A.D. - Abui Daisuke

other Japanese JS products

(5)

Fastladder (livedoor Reader)

Fastladder is yet another web-based feed-reader which was launched on Jul 3 2007.

Fastladder has an origin in “livedoor Reader” which has been offered for Japanese-speaking people since last year. Actually, it is an English-version of it.