JavaScript 入門 基礎編 | TM LifeTM Life!!(ティーエム ライフ) 「Time is money」をモットーとしたサイトです. 主にプログラミングについて描いています.日本国民全員プログラマ化計画進行中!! http://tmlife.io に引っ越しました. こちらでWebやプログラミングに関する情報をバンバン発信, 更新しているのでよかったら rss 登録していただけると幸いです.
5分で分かる JavaScript を知らない人が JavaScript の便利さを学べる記事を書いたよ - ginpeiのブログ
JavaScript を知らない人に JavaScript の話して欲しいと言われる夢を見たのでブログ書きました。*1 難しい話は抜きにして JavaScript は <script> と </script> で囲えば動きます。*2 HTML をコードレベルで編集できるサービスなら、設定は一切不要です。 <script> JavaScriptのコード </script> 拡張子にも制限はありません。最終的にHTML文書として出力されるのであれば、htmlでもphpでもcgiでも構いません。なおフレームの代わりにPHPを使うという為になる記事があるのですが、ここでは関係ないので読むのは後ででよいです。 ついでに JavaScript を少しでも使えるようになれば、こんなことができるという一例を紹介します。 コピーライトの西暦を自動更新 JavaScript を使えばページフッタの西暦も自動更
YourFileHost の簡単な FLV 保存方法
YourFileHost で動画再生している時に下の文字をアドレスバーにコピペして、Enterキー押すと簡単にflvファイル落とせるね! javascript:if(document.body.innerHTML.match(/<param\sname=\"movie\"(.*?)%2526cid%253D(.*?)%2526(.*?)%2526cdnkey%253D(.*?)%2526/)){location.href="http://cdn.yourfilehost.com/unit1/flash8/"+RegExp.$2.substr(0,2)+"/"+RegExp.$2+".flv?key="+decodeURIComponent(RegExp.$4)}else{alert("Failed");} ブックマークのURLに登録して再生中にそのブックマーク開くと、同じように落とせるしこ
たった3行加えるだけで、ページの読み込み時間を劇的に改善させる『class.compressor.php』 - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
Ajaxのキソのキソまとめ - builder by ZDNet Japan
Ajaxパワーの活用方法 Ajaxは、ウェブアプリケーションの開発方法や利用方法を大きく変えた破壊的な技術だ。Ajaxによってインタラクティブなページの作成が可能になったのである。Ajaxは現在もウェブの流行の最先端を走り続けている。 Ajaxという用語は比較的最近生まれたものだが、Ajaxを支えている技術は以前から存在していた。ブラウザに送られたウェブページの内容をあとから変更する機能自体は、何年も前からあったのである。たとえば、JavaScriptでiframeのsrc属性を変更するのもそのような技術の一つだ。 しかし、XMLHttpRequestオブジェクトが主要なブラウザで実装され、GmailやGoogle Mapsが公開され始めると、開発者はそれをきっかけとしてウェブページの構築方法をもう一度考えるようになったのである。 XMLHttpRequestオブジェクト Ajaxを可能に
アスタリスクで隠されたパスワードを確認する方法 [K'conf]
ログインが必要なサイトの多くは、IDとパスワードを入力するフォームが設置されています。 通常、このようなフォーム内のパスワード部分に入力した文字は盗み見防止のため、「********」のようなアスタリスクになって文字が隠されるようになっていますが、しばしば、この入力したパスワードを確認したい状況になる場合も少なくありません。 このようなケースに役立つハックの紹介。 以下のJavaScriptをアドレスバーに入力すると、次のようなダイアログ内にパスワードが表示されます。 javascript:(function(){var s,F,j,f,i; s = ""; F = document.forms; for(j=0; j<F.length; ++j) { f = F[j]; for (i=0; i<f.length; ++i) { if (f[i].type.toLowerCase() ==
![アスタリスクで隠されたパスワードを確認する方法 [K'conf]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a87d5887c466cccb0b849babb90931bdfa1b8c8/height=288;version=1;width=512/http%3A%2F%2Fkenz0.s201.xrea.com%2Fimage%2Fweblog%2F071121%2F2.gif)
これはかっこいいぞ・・・スライドショーに激しく使えるjQuery用プラグイン『jQuery Cycle Plugin』 | i d e a * i d e a
ドットインストール代表のライフハックブログ
404 Blog Not Found:怠翻 - JavaScriptでありがちな9つのシマッタ
2007年08月17日01:15 カテゴリ翻訳/紹介Lightweight Languages 怠翻 - JavaScriptでありがちな9つのシマッタ 私自身結構シマッタしちゃうので。 Nine Javascript Gotchas 尻カンマ注意 以下のコードはFireFoxでは動きますが、Internet Explorer (以下IE)では問題になります。 var theObj = { city : "Boston", state : "MA", } 最後にカンマが入らないよう注意しましょう。 浮気なthisは何を見てるやら 以下のコードで、thisは何を指しているでしょうか。 <input type="button" value="Gotcha!" id="MyButton" > <script> var MyObject = function () { this.alertMess
404 Blog Not Found:Digest - 今日にでも使うべきJavaScriptの7つのテクニック
2007年04月25日12:00 カテゴリLightweight LanguagesBlogosphere Digest - 今日にでも使うべきJavaScriptの7つのテクニック 良質の記事だけに全訳したかったのだけど、時間もないので紹介と抄録。 Digital Web Magazine - Seven JavaScript Techniques You Should Be Using Today サンプルコードは、適宜書き換えてあります。 1. Branch when possible - 分岐はなるはやで これは実例を見た方が早いでしょう。クロスブラウザー対応のaddListener()を考える。機能だけを考えれば、以下でOK。 function addListener(el, type, fn) { if ( window.addEventListener ) { el.addE
社内勉強会資料 - IT戦記
今回の趣旨 あまり JavaScript を書いたことのない人用に講義をしました。 内容 一つ一つ例を見せながら質問を聞き、参加者全員が JavaScript のオブジェクト指向を理解できるまでやりました。時間は当初 40 分の予定でしたが、結局 1.5 時間になりました。 成果 最終的にガイアックスのほとんどの開発者（マークアップエンジニアから、インフラの人まで）が JavaScript を読めるというレベルまでは、到達したのではないかと思います。 まあここからは、テクニックとバッドノウハウの世界ですが・・・。 資料 大切なことは言葉で話して、資料はほとんど例とかソースとかだけですが。教える手順とか参考になるところもあるかもしれないので公開します。 http://usrb.in/amachang/static/gaiax01/
ウノウラボ Unoh Labs: 1時間で作る簡易スクリプト言語(JavaScript)
さかとくです。最近では、JavaScript上でJavaバイトコードが実行できたり(Orto)、JavaScriptでScheme(jsScheme)が動いたりと、とても楽しい状況ですね。ブラウザさえあれば、その上でいろんなプログラミング言語を体験することができるのですから！ 私も、これまで、マクロ言語やスクリプト言語をいくつか作ってきました。（代表作は、音楽のプログラミング言語「サクラ」や、日本語プログラミング言語「なでしこ」などです。）今は、ブラウザ上で動く日本語プログラミング言語を開発中ですが、これはまだ見せられる状況ではありません。 そこで、ウノウラボを書くのに与えられただろう時間(約１時間)で、オリジナルのプログラミング言語を作ってみようと思います。もちろん、JavaScriptだけで。 では、はじめてみましょう！ (1) コンパイラコンパイラをゲットする はじめに用意するのは、
超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」:phpspot開発日誌
Programming and Designing for the Web FrogJS Javascript Gallery FrogJS is a simple, unobtrusive javascript gallery. It is not a replacement for other thumbnail galleries such as Lightbox JS, but rather a different way of showing galleries. 超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」。 以下のデモサイトを見ると分かりますが、今までにない超クールなスライドショーを実装できます。 実装方法は、まずスクリプトを読み込みます。 <script type="text/javascript" src="scripts/p
JavaScript でソートアルゴリズムを可視化 - bkブログ
JavaScript でソートアルゴリズムを可視化 JavaScript でソートアルゴリズムを可視化するプログラムを書いてみました。元ネタは Jon Bentley による ソートアルゴリズムを可視化する Java アプレットです。 アルゴリズム 要素数 動作確認は Firefox 2, IE 7, Opera 9 で行いました。要素数は最大で200まで選べますが、かなり重くなるので遅いマシンで実行すると危険です。 English version is also available. ソースコード: sort-animation.js 解説 X軸が配列の添え字、Y軸が配列の要素の値を示しています。最初に要素がランダムに並んでいる配列 (値に重複なし) を作って、それを各種のソートアルゴリズムでソートする様子をアニメーションで表示します。 ただし、要素のあらゆる変更に対して毎回表示を更新し
忘れてはいけない超絶JavaScriptライブラリ「BlueShoes:JavaScript Collection」:phpspot開発日誌
BlueShoes: JavaScript Collection Get all the above components in one package. There is an example that uses most of the components.忘れてはいけない超絶JavaScriptライブラリ「BlueShoes:JavaScript Collection」。 既に紹介したと思っていたJavaScriptライブラリであるBlueShoesの紹介。 ご存知の方も多いと思いますが、知らない人も多いようですね。 ライブラリ、というより、リッチなコンポーネント集といったイメージで、次のような様々なコントロールが使えます。 WYSIWYGエディタ Excel風スプレッドシート ツリービュー スライダーコントロール 他にも下記の様々なリッチコンポーネントが使えます。 入力系コンポーネ
ブラウザ上で画像やテキストを自由に編集する方法 | P O P * P O P
ご存知の方も多いかと思いますが、ご存知ない方のためにちょっとしたTipsをご紹介。Internet Explorer5.5以上限定ですが。 Webサイトをブラウザ上で自由に編集できてしまうテクニックです。やり方は簡単。下記のJavaScriptをアドレスバーに打ち込むだけ。 javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 こんな（↓）感じです。 ドラッグ＆ドロップで画像を動かせる他、テキストも自由に書きかえることができます。これはコンテンツをブラウザ上で編集できる「contentEditable」というタグを活用したTipsですね。 » contentEditableについて スクリーンショットを取る時にいらない画像を簡単に消したりできるのは便利かも。diggからの情報でした
便利すぎて困る程のFireBug1.0系を使ってみよう:phpspot開発日誌
Firebug - Web Development Evolved 便利すぎて困る程のFireBug1.0系を使ってみよう、ということで、広く使われているであろう0.4系と変わった点をプレビュー。 Googleなどの検索エンジンで、addons.mozilla.org にUPされている0.4系が上に表示されているため、まだ1.0系を使っていない人も多いのではないでしょうか？(という私もそうでした) FireBug1.0系のインストール方法の紹介〜その追加された強力すぎる機能について見ていきましょう。 FireBug1.0系インストール http://www.getfirebug.com/ にてFireBug1.0系のインストール。 FireFox - DOMインスペクタのインストール FireFoxインストール時にDOMインスペクタが入っていない場合は、FireBug1.0系の機能を最大限
ウノウラボ Unoh Labs: Web2.0時代のJavaScriptで注意することを5つほげほげ
Keitaです。 Ajaxが流行していますが、まだ、僕個人では実装レベルまでライブラリの蓄積が追いついていません。 各種ライブラリがWebフレームワークレベルでそろったら（そろえたら）使いたいなと思っていますが、なかなかそこまで手が出てないのが現状です。 とはいえ、社内でもDojoや、MochiKitなどのフレームワークがはやりつつあるので、そろそろつかいたいかなーと思いセキュリティを含めたリスクを調査しています。 とはいえ、まだまだ勉強中の身であるので、突っ込みいただけると助かります。 (1) クロスサイトスクリプティングに注意する 基本的な対策は、サーバサイドのときと同じく、描画を行うタイミングでエスケープ処理を行うことになります。 だだし、HTTPヘッダではなくBodyにエスケープしてない文字列をおいた場合にはAjaxではなく直接アクセスすると、XSSになる場合があるので注意が必
ウノウラボ Unoh Labs: Web2.0エンジニアのためのJavaScriptリファレンス集
こんにちは、hideです。 近年のAjax技術の台頭により、Web2.0時代のエンジニアにとってJavaScriptは欠かすことのできない技術となってきました。しかし、2000年頃のWeb1.0時代には低機能な言語として認知されていました。このことは、"Rediscover the JavaScript"と題された次の文章に良く表れていると思います。 10 年。世界が JavaScript の真の実力を発見するのに要した時間である。 1995 年、Netscape 社の Brendan Eich により開発・設計された JavaScript は、「世界で最も誤解されたプログラミング言語」などと呼ばれもした、ともすれば不遇とすらいい得る歳月を経て、あたりのそこここに満ち充ちていた「Web の旧来的なインタラクションの窮屈さを革命したい」という思いによって、ふたたび表舞台に招来された。(S
JavaScript で文字をトリミングする
JavaScript を用いてエントリータイトル等の文字をトリミング（指定した文字数だけ表示する）するカスタマイズです。 以前、「Movable Type のようなトリミングを、他のブログで実現できないでしょうか」というご質問の回答です。大変遅くなりましたが、このエントリーで回答に替えさせて頂きます。 ここでは文字数でトリミングする方法を紹介していますが、半角・全角が混在している場合のサイズを調整したい場合は、下記のエントリーを参照ください。 JavaScript で文字をトリミングする（改善版） とりあえず「id 属性名」と「要素名+ class 属性名」で指定したタグの中に記述された文字列をトリミングする、簡単な JavaScript を書いてみました。 Windows + IE6/Firefox 2 で実験した限りでは、全角・半角いずれも1文字で計算してトリミングしてくれるようですが
ウノウラボ Unoh Labs: JavaScript 初心者が MochiKit にさわってみました！
naoya です。今回は、1 人のエンジニアがフォト蔵リニューアルを通して学んだことの後編をエントリする予定だったのですが、今日の勉強会で Mochikit の入門編について説明したので、その資料を公開します。 MochiKit は、開発版の 1.4 系のすべてのコンポーネントをさわってみたときの資料で、デモとソースコード付きです。 MochiKit をさわってみた ※この資料は、Firefox でのみしか閲覧できないので注意してください。 JavaScript プログラミング、楽しいですね！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
