タグ

javascriptとTipsに関するgorton-labのブックマーク (34)

  • getElementsByClass(IE,Firefox対応版) - 技術情報メモ

    function getElementsByClass(searchClass) { if (document.all) { var classElements = new Array(); var allElements = document.all; for (i = 0, j = 0; i < allElements.length; i++) { if (allElements[i].className == searchClass) { classElements[j] = allElements[i]; j++; } } } else if (document.getElementsByTagName) { var classElements = new Array(); var allElements = document.getElementsByTagName("*");

    getElementsByClass(IE,Firefox対応版) - 技術情報メモ
  • $(document).ready() source

    gorton-lab
    gorton-lab 2011/04/30
    jQueryの$(document).ready()だけを抜き出したもの
  • サイボウズで学んだこと - IT戦記

    はじめに 2010 年 9 月 15 日を持ちまして、サイボウズ・ラボを退職いたしたました。 報告も兼ねて、久しぶりにブログを書いてみたいと思います。 (写真はゆうすけべーさんです) この会社に入って、たくさんの学びと思い出がありました。 その一つ一つをまとめていければ、素晴らしい記事になるのかもしれませんが、僕は文章が苦手です。 ですので、うまく退職のエントリを書き上げることができません。 言葉にできない。そんな感じです。 なので、このエントリはサイボウズ・ラボやサイボウズ社の仲間たちへのありがとうの気持ちをこめて、自分らしく最後まで JavaScript のことを書きたいと思います。 サイボウズでの最後の仕事 僕にとって、サイボウズでの最後の仕事は「JavaScript で新しいユーザーインタフェースを作ること」でした。 そして、その中で始めて複数人による大規模な JavaScrip

    サイボウズで学んだこと - IT戦記
    gorton-lab
    gorton-lab 2010/09/17
    amachang退社。次はどこ?
  • ASCII.jp:jQueryで作る多階層ドロップダウンメニュー|Web制作の現場で使えるjQuery UIデザイン入門

    のドロップダウンメニュー メインメニューにマウスカーソルを重ねると、すぐ下にサブメニューを表示するドロップダウン型メニューから作りましょう。サブメニューの1回層目までの表示に対応したメニューです。 メニューバーのHTML/XHTML(以下、HTML)は以下のように記述します。メインメニューをul/li要素で記述し、メインメニューに対応するサブメニューをli要素の中にul/li要素で入れ子に記述していきます。メインメニューのul要素にはclass属性「menu」を、子カテゴリーのul要素にはclass属性「sub」を付けて親子関係を分かりやすくしておきます。 ▼サンプル01(HTML部分) <ul class="menu"> <li><a href="#">メニューA</a> <ul class="sub"> <li><a href="#">サブメニューA</a></li> <li><a

    ASCII.jp:jQueryで作る多階層ドロップダウンメニュー|Web制作の現場で使えるjQuery UIデザイン入門
  • blogpartsでjQueryを使うときの読み込み方 - KAYAC engineers' blog

    最近blogpartsでもjQueryを使うようになったので、blogpartsでjQueryを使うときのコードをまとめてみました。 (function () { //script tagのsrcの先頭部分を記述(自分のscript tagを取得するのに使用) var domain = 'http://example.com/bp/'; //asから呼び出されるときの名前を指定(外部からはこの名前のみ見える) var name_space = 'blogparts_name_spase'; //各ライブラリをfunction scopeへ展開 var lib = loadLib(), $ = lib.$, jQuery = lib.jQuery, swfobject = lib.swfobject; //読み込まれた時点での最後のscript tagを取得 var $script = $(

    blogpartsでjQueryを使うときの読み込み方 - KAYAC engineers' blog
  • 細かいJavaScriptの仕様や習慣やテク集 - 三等兵

    気づいたことやミスしたことなどメモしていたので確認作業。細かい仕様だったり暗黙のルールだったり、テクニックだったり。JSに慣れていたら当たり前なことばかりかもしらん。 追記のところはid:os0xさんより。ありがとうございます! undefined var a; alert(a) // undefined 宣言だけだとundefined。undefinedというのは、宣言している変数に値が入っていませんよ、ということ。 そしてオブジェクトには無いプロパティとか参照すると出てくる。 var a = 100; alert(a.length); // undefined さらに引数も。 function func(val) { alert(val); } func() // undefined 引数はCallオブジェクトってのに格納される。このオブジェクトはローカルの変数が格納されるオブジェクト

    細かいJavaScriptの仕様や習慣やテク集 - 三等兵
    gorton-lab
    gorton-lab 2010/04/28
    知ってるようで忘れてるJavascriptの基本的なこと。型についてなど
  • JavaScript Rangeの使い方 - とみぞーノート

    DOM仕様書にこれらのプロパティについて図解入りで説明がありわかりやすい。 文字を選択した時に表1のプロパティがどのように変化するかを表示するサンプル。 http://www.bit-hive.com/~tomita/RangeDump/ JavaScriptのソースはhttp://www.bit-hive.com/~tomita/RangeDump/range.js 3. 現在の選択範囲の取得の仕方(IEの場合) IEのRangeオブジェクトにはテキストの選択範囲を表すTextRangeと画像などのコントロールオブジェクトの選択を表すControlRangeの2種類が存在する。 3.1 TextRange,ControlRangeの取得 IEの場合Selectionはdocument内に既にあるので以下のようにして取得できる。 var range = document.selection

    gorton-lab
    gorton-lab 2010/04/14
    JSで選択範囲を取得する
  • 【コラム】そろそろきっちりJavaScript 第1回 "Firebug"の導入〜関数リテラルとは? (MYCOMジャーナル)

    多彩な演出効果をカンタンに導入できる事で脚光を浴びたprototype.jsの登場を皮切りに、インターネットで公開されているJavaScriptライブラリの数は、この一年で急激に増加した。何かやりたいことがあったときはWebで検索すれば、大抵、どこかにライブラリが転がっている。便利な世の中になったものだ。 一方、Webを通じて提供されるサービスは多様化の一途を辿っている。JavaScriptライブラリは整ってきたが、当然、置くだけでは機能しない。ライブラリのサポートページには簡単なサンプルが載っているものの、サンプルがそのまま適用できるケースはごくわずかだ。しかたなく、他の誰かが似たような事をやっていないかとWeb検索するはめになる。 思えば、これまでJavaScriptを言語としてとらえ、きっちり向き合う機会は少なかったのではないだろうか。 1995年の終わり、Netscape Navi

  • Javascript/HTML特殊文字のエスケープ - 俺の基地

    HTMLと解釈される文字文字列を画面に表示するときはその文字をエスケープしないといけない。 ・・・そのやり方 prototype.jsに面白いやりかたがのってたのでそれを単体で切り出すと↓こういう感じになる //htmlな文字をエスケープ var escapeHTML = function(_strTarget){ var div = document.createElement('div'); var text = document.createTextNode(''); div.appendChild(text); text.data = _strTarget; return div.innerHTML; } 何かHTML要素の中のテキストノードにエスケープされていない文字列を突っ込んで、それを要素のinnerHTMLとして取り出すと、エスケープされた文字列を得ることができる。 タ

  • 2010-02-20

    友達と鍋をべに行く。しかもべ放題。 お腹が強烈にすいていたので美味しく頂きました。しかも飲み放題なので、ビール・日酒・ウイスキー立て続けに飲んで大いに満足。 店員さんの対応がおそらくチェーン店ながら、きちんとしていて好印象。 帰りがけにゲームセンターによってUFOキャッチャーで格闘。取れそうで取れない…。 で、結局今日は取れなかった。まぁ、こういう日もある。 ajaxで画面の一部を更新する際、通常だとブラウザの「戻る」でユーザが所望する画面遷移が実現できないことがあるのだけれど、このライブラリを利用すると問題を解決することができる。 Really Simple History (RSH): Ajax history and bookmarking library http://code.google.com/p/reallysimplehistory/ 使い方は、ソースをダウンロード

    2010-02-20
    gorton-lab
    gorton-lab 2010/04/03
    Real Simple History
  • IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」

    >> 詳細な使用法と注意点を追加エントリーしました。 いまだ絶大なシェアを誇るIE6(Internet Exproler 6)ですが、WEB制作者ならご存知の通り、さまざまなバグ・不具合を内包しております。 ・CSSでfloatしたブロックのmarginが倍になる。 ・後方互換モードの場合、text-alignが子要素にまで影響する。 ・透過png画像が透過されない。 上記以外にも、それはいくつもの制作者泣かせの問題があり、業界内では「IE6氏ねばいいのに」とまで言われているブラウザですが、前述の通りシェアは絶大なので、対応しないワケにもいかず。 すでにいくつもの対応策が出回っておりますが、その中でも自分的に一番オススメするのが、「DD_belatedPNG.js」を使用する方法です。 有名どころの対応策を併記・比較しながら、どこがオススメなのかを含めてエントリーしたいと思います。 有名な

    IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
    gorton-lab
    gorton-lab 2010/01/26
    ie6で透過png。googleのie6調教jsが便利そう。ていうかie6爆発しろ
  • http://で始まる文字を自動リンクしよう

    【jQueryのプラグインを作ろう!】 第8回「http://で始まる文字を自動リンクしよう」 *これはascii.jpで連載した記事の続きです。このため、このページを読む前にあらかじめascii.jpで連載した記事をお読み下さい。 text : 古籏一浩 ■URLがあれば自動リンク ページ内にhttp://www.openspc2.org/などのURLがある場合、自動的にリンクしてくれると便利です。そこで、今回は文章内にhttp://で始まる文字列があればURLとみなして自動的にリンクするプラグインを作成しましょう。 ■正規表現で置換 今回はURLを自動的にリンクに置換します。このような場合、JavaScriptの正規表現を使うと簡単に処理できます。JavaScriptでの正規表現の置換処理を行うのはreplace()です。最初のパラメータに検索したい正規表現を、2番目のパラメータに置換

    gorton-lab
    gorton-lab 2010/01/26
    httpの文字列に自動リンクを付ける
  • JavaScript/クロスドメイン制限の解除 - WebTips

    Prev Next JavaScript クロスドメインというのは、違うドメイン(yahoo.comやgoogle.comのようなURLのホスト部分)間で諸々行なう事です。AJAXではXMLHttpRequestというメソッドを使って外部のファイルを読みこむ事が出来ますが、セキュリティの関係上、ドメインが違うファイルを読込む事は出来ない仕様になっています*1。これらを回避しなければ、スクリプトが置いてあるサーバ以外からファイルを読込む事は出来ないと言う事になります。いわゆるWEBサービスでは、さまざまなAPIが公開されていますが、せっかく公開されていてもココに制限があっては使えません。クロスドメイン制限を解除する方法を下記にまとめました。 PHPCGI経由にする † 比較的安全かつ設定等も簡単なので、最も一般的な方法かもしれません。ただ、CGI等が使用出来る環境でなければならないし、外部

    gorton-lab
    gorton-lab 2009/12/11
    jsonpでのコールバック関数の処理とか
  • JavaScriptとPHPのURLエンコード

    ※文字コードはUTF8で実験しています。 ※半角スペースは表示されているかわからないので、「(※半角スペース)」と表記しています。 URLエンコード表(無変換は空白) rawurlencodeurlencodeescapeencodeURIencodeURIComponent !

  • Math.round()メソッド 少数点 以下X桁を四捨五入します.

    サイトやブログをJavaScriptを使って動きのあるページに、スタイルシートで見栄え良く装飾してみませんか? コピーしてご自由にご利用ください。 少数点 以下 Χ桁を四捨五入する Javascript 数値: 演算結果: ★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★ 月額263円で容量1GB Movable TypeやWordpressだって使えるよ。 サンプルソース <html> <head> <title>少数点 以下X桁を四捨五入します。</title> <script language="JavaScript"> <!-- function calc() { keta=100; var n =document.getElementById('in').value; n = n * keta; // 小数点以下2桁を整数部分にする n = Math.ro

    Math.round()メソッド 少数点 以下X桁を四捨五入します.
  • 第4回 JavaScriptでオブジェクト指向プログラミング ― @IT

    JavaScriptが、いま注目を浴びている。 JavaScriptがこれだけの注目を浴びた理由の1つとして、Ajax技術の登場とも相まって、JavaScriptに対する確かな理解の必要性が高まったという事情は否定できない。しかし、それだけでは説明できない急速な注目の理由として、もう1つ、JavaScriptという言語そのものが持つユニークさが開発者の目を引いたという点は看過できないだろう。 もっとも、このユニークさは同時に、多くの開発者が感じているJavaScriptに対する苦手意識と同義でもある。これまでVisual BasicやC#、Javaといった言語でオブジェクト指向構文になじんできた開発者にとって、JavaScriptのオブジェクト指向構文はいかにも奇異なものに映るのだ。ようやくクラスという概念を理解した開発者が、JavaScriptという言語の背後にたびたび見え隠れする「プロ

    第4回 JavaScriptでオブジェクト指向プログラミング ― @IT
  • Nothing found for Wordpress 2009 05 %E3%80%90Ajax%E3%80%91Javascript%E3%81%Ae%E3%83%8F%E3%83%83%E3%82%B7%E3%83%A5%E3%82%92%E3%83%80%E3%83%B3%E3%83%97%E3%81%A7%E3%81%8D%E3%82%8Bjquery%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%8E

    お探しのページが見つかりませんでした。 この度は、八千代産業株式会社WEBサイトご来訪いただきありがとうございます。 お客様のアクセスしようとしたページ、またはファイルは、下記のような理由によりご覧いただくことができません。 ・入力したURLが間違っているため ・2016年4月のサイトリニューアルに伴い、該当するURLのページが移転し、URLが変更されたため ・ページが削除されたため ・現在、メンテナンス中のため一時的に表示していないため ブラウザの再読み込みを行ってもこのページが表示される場合は、URLをご確認いただくか、 または以下よりサイトマップページへアクセスし目的のページをお探しください。 > サイトマップ

  • javascriptを理解するためのたった2つの大切なこと

    9割ぐらいはハッシュ何がハッシュなのかjavascriptで存在するほとんどのオブジェクトの実体はハッシュだよ。 var arr = [0,1,2,3]; とかをみると配列(人によってはリスト)に見えると思う。でも実際は違うんだ。 これは var has = {0:0,1:1,2:2,3:3}; と基的には等価なんだ。ただちょっと束縛されているメソッド(インターフェイス)が違うだけ。 ためしに arr[4] = 4; arr['x'] = 'string'; arr[-1] = -1; としてみよう。 Firebugで確認してみると[0, 1, 2, undefined, 4]というような値がかえってくるよ。 でもarr[-1]やarr['x']の値は保存されてないのかな?そんなことはないちゃんとアクセスできるんだ。 それどころかarr.xで'string'がかえってくるんだ。 別の例を

    javascriptを理解するためのたった2つの大切なこと
    gorton-lab
    gorton-lab 2009/09/05
    javascriptにおける配列(hash)のこと
  • JavaScript OOP におけるクラス定義方法 - IT戦記

    クラスを定義する方法です。考え付くだけでも、これだけたくさんの方法があります。やっぱり、 JavaScript って柔軟であり複雑な言語ですね。 ちなみに、以下のすべての例はこのクラスを定義しています。 ちなみに、僕は一番下の書き方ですね。 皆さんはどのようにプログラミングしていますか? プロトタイプを使わない。クロージャを使う。 // プロトタイプを使わない。 // クロージャを使う。 function Item(price) { this.showPrice = function() { alert(price); }; } プロトタイプを使わない。クロージャを使わない。 // プロトタイプを使わない。 // クロージャを使わない。 function Item(price) { this.price = price; this.showPrice = function() { aler

    gorton-lab
    gorton-lab 2009/08/30
    Class定義
  • JS オレオレ言語ブーム - IT戦記

    オレオレ言語ブームについては以下 OreScript時代の幕開け - yukobaのブログ で。 scriptタグ - ロックスターになりたい を見て思いついたんだけど <script src="俺のスクリプトインタプリタなんだぜ.js"></script> <script type="text/俺の"> : : </script> ってやるより <script src="俺のスクリプトインタプリタなんだぜ.js"> : : </script> のほうがシンプルでいいかもー。 とか思った。 これだと onload 待たなくても取れるんじゃないかなー。たぶん

    JS オレオレ言語ブーム - IT戦記
    gorton-lab
    gorton-lab 2009/08/29
    どういう挙動になるのか試す