jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下
JavaScript初級者から中級者になろう
JavaScript。「ジャヴァスクリプト」と読みます。主にWebページに動きを与えるものです。 現在では結構多くのページに使われていますが、その多くはとてもレベルが低く不適切なものです。もっと質の高いJavaScriptを使える人が増えるといいなという思いから、このページを作りました。 初級者の基礎知識 本文を理解するにはJavaScriptの知識がそれなりに要るので、JavaScriptがそもそもあまり分からない人は、この辺を読んでみましょう。 基礎第一回 基礎第二回 基礎第三回 基礎第四回 基礎第五回 基礎第六回 第一章 オブジェクト オブジェクトとは オブジェクトの実体 配列のコピー オブジェクトと関数 第二章 DOMの基礎 HTMLと木構造 DOMとは 基本的な操作とテキストノード 木構造の操作：ノードの除去 木構造の操作：ノードの追加 木構造の操作：さまざまな機能 木構造の操作
HTMLにCSSとJavaScriptを含めない方がいい理由 | エンタープライズ | マイコミジャーナル
Robert's talk - Web development and Internet trends Webサイトを構築するにあたってHTMLとCSS、JavaScriptの3者を完全にファイル分離するべきだという方法論が紹介されるケースが増えている。最近話題に上がったトピックに絞っても次のトピックが類似した内容を紹介している。紹介している内容や対象、視点に違いはあるが、どれもHTML、CSS、JavaScriptは分離してインラインで記述しない方がいいと説明している。 Unobtrusive DOM Scripting 累進的拡張 Obtrusive JavaScript Checker HTMLを綺麗に保つ12の原則 Obtrusive JavaScript Checkerの開発者でもあるRobert Nyman氏が自身のブログにおいてWhy inline CSS and JavaS
ASCII.jp：Web制作会社が作った！超使えるJavaScriptライブラリ
「Webサイトを作るときに本当によく使う機能を、自分で作らずにさくっと実装したい」――。そんなワガママな願望をかなえてくれる JavaScriptライブラリが登場した。ミツエーリンクスが今月オープンソースとして公開した「MJL（MITSUE-LINKS JavaScript Library）」は、Webサイト制作に必須の“最小限の機能”に絞ったJavaScriptライブラリだ。 昨今相次いで公開されている、リッチなUIを実現するJavaScript/Ajaxライブラリとは異なり、MJLの機能はとてもシンプルだ。もともとWeb制作会社であるミツエーリンクスが「自社標準ライブラリ」として作成したものだけあって、汎用性・実用性を重視したライブラリになっている。 具体的な機能は以下の6つ。確かにどれもよく使いそうなものばかりだ。 画像のロールオーバー Flashオブジェクト埋め込みの機能拡張 新規
JavaScriptでSLを走らせる「SL.JS」を作りました | Creazy!
開発に関わっていて、UNIX（Linux）を触った事のある人は「SLコマンド」をご存知の方が多いのではないでしょうか？ lsを間違えてslと打つとこんなのが煙を吹きながら走る sl(1) コマンドを作りました． via: 豊田正史とslコマンド (Masashi Toyoda and SL command) ファイル一覧を出力する「ls」をtypoして「sl」と打ってしまうと、文字通りSLが画面を走り抜けるというすばらしくくだらない仕組みなのだ。いわゆる、ジョークコマンドの一つとしてとても有名で、多くの開発者の気持ちを和らげた（腰を砕いた）ことでしょう。 さて、そんなくだらないジョークコマンドを懐かしんでいると、JavaScriptでSLを動かしてみたくなってしまったので作ってみました。 ・SL.JS ブックマークレット方式にしてあるので、上のSL.JSリンクをブックマークして下さい。 ど
ハタさんのブログ(復刻版) : javascriptを初めて学ぶ人についてのおさらい。その１
僕にも教える人ができた(? というか人にモノを教える立場)になったので、とりあえず、最近はもっぱらjavascriptを教えています。 もともとCやJavaなどについてはある程度の知識がある人なので、それを少しjs的な意味で、関数言語的な教えをやっている最中のメモ 変数って何ですか？変数って値もしくは式そのものに利便的な名前をつけているものです 次のhogeとfooは値をいれる箱ではなく、値そのものに別名(もしくは分かりやすい名称)を割り当てているだけに過ぎませんよ。 var hoge = 1; var foo = [1, 2, 3]; alert(hoge + 1); // 2 alert(foo[0]); // 1 alert(1 + 1); // 2 alert([1, 2, 3][0]); // 1 つまり、関数自体を変数に代入する事ができます。(functionとは特別な呼び名
オレの名は「ジェイ・スクリプト」…… - in between days
以下、郷田ほづみの声でお読みください。 オレの名は「ジェイ・スクリプト」。20世紀最末期の「第一次ブラウザ戦争」でエース部隊に徴用され、最前線で殺戮を繰り広げた。オレたちに課せられた課題は重大だった。相手方ブラウザの殲滅。オレたちはマイクロソフト帝国の最新鋭上陸艦「IE4」に搭載され、次から次へとコードを実行した。戦いは熾烈を極めた。オレたちはどんな汚いコードでも動いた。カーソルをクマさんに変える。アイコンを点滅させる。今日のお知らせをポップアップさせる。世界時計をスクロール表示させる。それが果たして本当にそのウェブページに必要なユーザビリティなのかを問うこともなかった。しかしいつしかオレたちは気づいた。敵艦「NN4」に搭載されているのもオレたちとまったく同じスクリプトなのだと。やがてオレたちが属する帝国が領土のほぼ九割を制圧するに至り、戦争は膠着状態にはいった。敵国は壊滅されたかに見えた
[Think IT] 【これならわかる！JavaScript/Ajax】やりなおしのJavaScript 第1回：そろそろ本気で学びませんか？ (1/3)
画面の一部を瞬時に切り替える方法 JavaScriptを勉強したいけど、プログラム構造がよく分からなくて、なんとなく使っている人は多いのではないかと思います。市販の本やWebサイトにはJavaScriptのサンプルがたくさん載っているので、必要なところをコピー＆ペーストしてしまうと、JavaScriptの文法が分からなくても動いてしまいます。 しかし、このような使い方をしていると、JavaScriptサンプルを少しだけ修正したいという時に対応できなくなります。これでは「JavaScriptを使える」とは言えませんよね。 そこで、本連載では、JavaScriptをもう一度やり直したい方々のために、勉強の切り口を変えて紹介していきましょう。 最初のトピックでは、JavaScriptを使ってHTMLのコンテンツを入れ替える方法について紹介してます。この技術は、最近話題になっているAjaxのベース
Latest topics > 本気でやるならprototype.jsやjQueryやYUIは避けてonclickを使うべき - outsider reflex
Latest topics > 本気でやるならprototype.jsやjQueryやYUIは避けてonclickを使うべき 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « SAIの本でコラム書きました Main 自分で自分を危険に晒す行為 » 本気でやるならprototype.jsやjQueryやYUIは避けてonclickを使うべき - May 18, 2008 タイトルは釣り。 本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記 本気でやるならクロスプラットフォームは避けてMozillaアプリを作るべき - hogehoge onclick 属性問題につ
JavaScriptのイベントハンドラ説明
本気でやるならonclick属性は避けてライブラリを活用すべき - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記 を読んで，思うところあって書いてみました（決してカウンターアーティクルではない）。 むかしむかし JavaScript を触っていた むかしむかしに書かれた JavaScript の本で勉強している／した 人向けに。大元記事（そろそろ本気で学びませんか？ | Think IT（シンクイット））の想定読者に近いかなと思います。よって以下は JavaScript の初学者にはまったくおすすめできない（余計な知識がついてしまう）です。 Step 1: はじめのいっぽ ボタンを押したらメッセージボックスが出現する HTML を書いてみます。 <html><body> <script type="text/javascript"> function ShowMes
onclick 属性問題について - IT戦記
本気でやるならonclick属性は避けてライブラリを活用すべき - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記 に関して この先、 HTML に onclick と書いても石を投げられないように書いておく＞＜ 僕も onclick 属性がダメだと思っていた時代もありました。でも、今は時々使うなあ。 （あ、でも、 HTML と JS で分業している場合は、使わないほうがいいよね＾＾；そこだけは言っておく。） JavaScript 入門の記事を書くときに onclick 属性がダメだとしたら、いろいろ本質的でないことを説明しなきゃいけない。 現状では onclick 属性が、もっとも簡単に HTML にイベントをマッピングできる方法だから、そんなに目くじらたてなくてもいいんじゃないかなあ？ たとえば 以下は、クリック時に href に GET を送るための oncli
本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記
第1回 そろそろ本気で学びませんか？ | Think IT これ、今この記事書いてる時点で650以上ものブクマがされているんだけれども、あまり内容がよろしくない。 というのも、解説はとても丁寧ですごくよい内容なのだけど、サンプルコードの書き方がどうも古くさい。 onclick属性とか、今時のフロントエンドエンジニアはそんな書き方はしない（と思う）。 なぜonclickをあまり推奨しないのか やっぱり、エンジニアとデザイナーorマークアッパーとの分業の点でHTMLの属性にスクリプトを書いちゃうのはあんまりよろしくない。 たとえばの話だけど関数の名前を変えたかったり、だとか、HTMLを変更したり、っていうときにミスが起こりやすくなってしまう。 これは分業していなくてもどちらにしろ発生してしまうことだと思う。 他にも前に書いたのだけど、aタグとかでonclickしちゃうとhrefにreturn
inputlog - yuga.js 0.6.0 - 優雅なWeb制作のためのJavaScript
時間に余裕ができたのでyuga.jsに新機能を追加しました。追加した機能は以下です。 親ディレクトリへのリンクにクラスを設定と画像の変更 簡易タブ機能の追加 そのほか、スクロール周りのソースの整理などを行いました。 yuga.js 0.6.0 ダウンロード 最低限の使い方 XHTMLのhead要素内で次のように読み込みます。これで各機能が有効になります。 <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> <script type="text
Account Suspended
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
『【いまさら感たっぷり】 画像置換について』
画像置換という方法を知っていますか？ aタグの背景画像を設定し、フォアグラウンドのテキストを何らかの方法で表示範囲から消す事で、imgタグを使わずにグラフィカルな表現を可能にする方法のことを指します。さらに、擬似クラスで背景画像を入れ替え、あたかもボタンを押しているかのような表現をさせる事もでき、特にナビゲーション部分に使われるものです。Javascriptを使わずに画像のロールオーバーをさせる画期的なアイディアでした。 具体的には下記のように設定します。 <ul> <li><a id="aaa" href="○○.html">ほげほげ</a></li> <li><a id="bbb" href="××.html">ふがふが</a></li> <li><a id="ccc" href="△△.html">もふもふ</a></li> <ul> ul { list-style-type:non
Nintendo Wii JavaScript 例文辞典 (任天堂Wii)
このページは任天堂Wiiで動作するOperaブラウザのJavaScriptについてのサンプルを扱っています。 ミスや間違い、リンクエラーなどがありましたらopenspc@alpha.ocn.ne.jpまでお願いします。 更新履歴 2007/11/23 サイトを公開しました
スムーズに画像を拡大するかなり導入が簡単なJavaScript「FancyZoom」 - GIGAZINE
IE6/IE7/Firefox/Safariに対応しているJavaScriptで、使い方もかなり簡単でページにほとんど変更を加えずに導入可能。 また、リンクの先読みにも対応しており、画像の上にマウスが乗ったことを感知して自動的に先読みすることもできますので体感的にはかなり速度アップしているように感じます。 画像をズームする機能のみに特化しているため、ほかの余計な機能付きのライブラリよりも動作は軽いのも特徴で、クリックしてズームされた後にはちゃんとドロップシャドウ効果が付いたりするなど、芸も細かい。 実際のデモと詳細は以下から。 cabel.name: FancyZoom 1.0 上記ページの下の方にある「Example」に体感できる例があります。なかなか面白い。 で、実際に設置するにはまず上記ページ中にあるZIPファイルをダウンロードしたら解凍し、出てきた2つのフォルダをFTPソフトなどで
JavaScriptライブラリの先駆け「prototype」を勉強しなおすサイト20
twitter facebook hatena google pocket 現在JavaScriptライブラリは数多くリリースされていますが、それらのさきがけとなったのは「prototype」でした。 またNASAのサイトでも使用されているように、その実力は広く認められています。 今回はprototypeの価値を見直し、勉強できるサイトを紹介します。 sponsors Reference ・prototype.js リファレンス（v1.4.0,1.5.x,1.6.0） ・prototype.js の開発者向けメモ：（v1.5.0） ・prototype.jsリファレンス HowTo / Review ・第１回：Prototypeライブラリの内部 ・いまからはじめるPrototype.js ・第１回：Prototype.jsを使う準備 ・Prototype.jsとは何か ・Prototype
Error 404 (Not Found)!!1
The requested URL /home was not found on this server. That’s all we know.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのイロハ：特集 - builder by ZDNet Japan