Not your computer? Use a private browsing window to sign in. Learn more
Not your computer? Use a private browsing window to sign in. Learn more
Jul 14, 2007 UKさん主催の「初心者向けJavaScript勉強会」に誘われたので、参加 & しゃべってきました。場所は東麻布の株式会社ノッキングオンの会議室。こういう場所での勉強会は経験が無かったのでなかなか新鮮。以下は気になった話などを覚え書き。 最初のお話はUKさんによるJavaScriptの基礎について。JavaScriptの連想配列 (ハッシュ) とオブジェクトの関係の話が出ていて、JavaScriptのオブジェクトのプロパティは全て連想配列の形でも参照できる事を初めて知りました。他にも、プログラムの変数名を大文字で書く事を「キャメルケース」と呼ぶなんて事も初耳でした。ちなみに、Javaなどのコードでよく見られる最初の単語の先頭は小文字、それ以降の単語の先頭は大文字で書くことは「ローワーキャメルケース」と呼ぶんですね。 他にもYUIやGoogle Gearsの解説など
2007-07-12資料公開をした人の章にリンク追加 2007-07-12 sendさんの章に追記 超長いんでショートカットメニュー作りました。 あと、JavaScriptの素人が書いてます。 あちこち間違ってたらごめんなさい。 マークアッパー・デザイナー向けJavaScript入門 マークアップエンジニア・HTMLコーダー向け、Yahoo UI Library活用術 Google Gears入門 JSの使いどころ liveプレゼン 猿でもわかる GreaseMonkey Firebugの話 総括 Twitter関連でお世話になっているukstudioが、初心者向けJavaScript勉強会を主催してくれたので、モリモリ勉強してきました! 会場は株式会社ノッキングオン様に提供して頂きました。 ありがとうございます! 僕は行ってなかったんですけど、モバイル勉強会の時もお世話になったそうです。
とりあえず資料を公開します。 資料 JavaScript ONでご覧ください。 最初のリンクをクリックするとプレゼンモードで閲覧できます。 プレゼンモードは若干大きい画面が必要になります。 基本喋りがメインなので資料だけではわかりづらい&抜けがあるかと思いますが、ご了承ください。 まぁYUIを使うメリットって クロスブラウザ対応がメインだよね。 あとYUIって結構パフォーマンスいいよ。 みんなもっとYUI使えばいいのに!! というわけで 参加されたみなさん(っていうか現在進行中だけど)お疲れ様でした>< 勉強会全体のまとめはUKStudioがきっと書いてくれると思います>< 最後に 会議室を貸してくださった上鍵さんをはじめとしたノッキングオンの皆様ありがとうございました! 会議室を利用したいかたは「ノッキングオンの会議室使いたい!」までこんにちは!こんにちはしましょう!
■ 入力文字数の制限を可視化する JavaScript 好評の、読み込ませるだけシリーズ の8番目。 maxlength 属性とかアプリケーション側とかでフォームの入力文字数を制限していても、ユーザにとっては自分が何文字くらい入力したかがわからないと不便そうなので、汎用的なのを作りました。 フォームにフォーカスが当たると、入力した文字数と入力可能な文字数が表示され、リアルタイムに更新されていきます。 動作サンプル コードは次の通りでして、prototype.js(1.5.0くらい) に依存してます。 var VisualLength = Class.create(); VisualLength.prototype = { initialize: function(attribute) { this.fields = ['INPUT', 'TEXTAREA']; this.attribute
Do you feel like you’re wasting time learning the ins and outs of all of the browsers and working around their issues? Well Chris did, too. Doing this back then secured his career and ensured that he had a great job. But we shouldn’t have to go through this trial by fire any longer. I’ve been writing JavaScript code for much longer than I care to remember. I am very excited about the language’s re
apple.comがリニューアル。 動的UIもFlashではなくJavaScript活用で、フルCSSサイトのお手本みたいになっている。 おもしろいと思ったのは、 Apple – Mac 一昔前なら、フレーム切りで作っていたUI。 フレームを使うとhtmlファイルが物理的に分離されてしまうためにいろいろ不都合があり廃れてしまったが、純粋にUIとして考えると、 選択肢はリストとして一覧したい 本文エリアは固定したい というものなので、理にかなっている。 この手のものがhtmlで作れるとなると、標準的に使い勝手はけっこう向上させられると思われる。 が、それに伴って、UI設計と実装の技術(CSS/HTML設計)もかなり難易度があがるだろう。 もう一点、パンくずナビ(Breadcrumb Naviation)が画面下端にきている。 Apple – Sfari 3 Public Beta – Dow
今日は、まだまだ Safari 3 が熱い! window オブジェクトを走査していたら、またしても面白そうな関数を見つけてしまった。 その名も getMatchedCSSRules !!! まずはデモをご覧ください 以下のブックマークレットを任意のサイトで実行すると、コンテンツの下に DOM Inspector のような要素が出現します。 そこで、要素を開いていくと Safari の場合は、どの CSS ルールが当たっているかを見る事ができます。 javascript:(function(){var d=document,s=d.createElement('script');s.className='css-inspector-script';d.body.appendChild(s);s.src='http://amachang.art-code.org/cssInspector.j
Toggler Toggler is currently just a proof of concept to mimic the functionality found in desktop programs like Adobe Photoshop ドラッグ&ドロップで複数チェックボックスの一括チェックを可能にする「Toggler」。 Togglerを使えばマウスをクリックして上からドラッグするだけでチェックボックスの一括チェックが可能になります。 使い方も次のように簡単です。 var toggle = new Toggler('elementId'); toggle.start(); // start the toggler (enabled by default) toggle.stop(); // stop the toggler これは便利ですね。
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらないので、あまり必要にならない
Interface elements for jQuery - Real examples of Interface elements jQuery版script.aculo.usの「Interface elements」。 script.aculo.us 同様、エフェクト、ドラッグ&ドロップ、アニメーション、スライダー、オートコンプリートのほか、 3Dアニメーション、アイテム選択用UI、テキストエリアリサイズ、ツールチップヒント、MacOS X の Dock 風UI を実装するためのライブラリが同梱されています。 詳しくは以下のデモを使ってみればそのすごさが分かるはず。 Effects [opens in new window] (combined showcase) Test new animate function [opens in new window] Use new func
超簡単にソートやリサイズ、その場編集が可能なテーブルを作成できるJavaScriptライブラリ「TableKit」 2007年05月31日- TableKit TableKit is a collection of HTML table enhancements using the Prototype framework. 超簡単にソートやリサイズ、その場編集が可能なテーブルを作成できるJavaScriptライブラリ「TableKit」。 次のようなExcel風テーブルが簡単に作れます。 どれぐらい簡単か、というと、必要なJavaScriptを読み込んだあと、table の class に次のように値を指定するだけ。 <table class="sortable resizable editable"> 最低幅の指定など、動作に関するカスタマイズも豊富なオプションによって指定可能です。 こ
TOPICS JavaScript 発行年月日 2007年05月 PRINT LENGTH 360 ISBN 978-4-87311-322-7 原書 Learning JavaScript FORMAT Ajaxの中心的なテクノロジでもあるJavaScriptは、これまで10年以上使われてきた(そしてこれからも10年以上使われるであろう)Web開発者にとって必須のスクリプト言語です。本書では基礎固めとしてまずこの言語の歴史的背景や基本構文、JavaScript言語の機能を学びます。後半の章では最新のWeb開発テクニックを例に、標準に準拠したWebサイトを構築するための正しいコーディング手法を解説するとともに、Ajaxなどの高度な技術の基本を紹介します。 訳者によるサポートページ。 訳者まえがき まえがき 1章 JavaScriptの第一歩 1.1 ねじれた歴史 1.2 ブラウザ間の互換性
javascriptを使ってのスタイルシートスイッチソース元を紹介。 スタイルシートの切り替え・文字サイズの切り替え・ブラウザの表示幅を検知して表示を変更するものなどいろんなものがあります。スクリプトの参考に。ついでに個人的にスタイルシートの切り替えを導入しているサイトを少し紹介。
Updated Feb 23rd, 08: Adds ability for menu to revert back to default selected tab when mouse moves out of menu. Only ddtabmenu.js changed! Description: DD Tab Menu is a standards compliant, 2 level tab menu. Move your mouse over a tab, and a 2nd level content appears beneath it. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents. Hi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く