タグ

javascriptに関するnorix31のブックマーク (35)

  • フォームで離脱させないためのjQueryプラグイン50選|designaholic -Creative Column-

    最近では、エントリーフォーム最適化(EFO)という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。   まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと   入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。   です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。   必須入力か

  • JavaScript入門講座

    今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2

  • node.jsの衝撃とWebSocketが拓く未来

    node.jsの衝撃とWebSocketが拓く未来:WebSocketで目指せ! リアルタイムWeb(1)(2/2 ページ) WebSocketと最初のnode.jsアプリ「Activity Monitor」 「いや~、node.jsってすごいよね」。カンファレンス参加後、しばらくの間はNew Bamboo社内ではnode.jsの話題が何度も上がってきたのですが、実際にnode.jsを使って何をすれば良いかはちょっと考えあぐねていました。その頃は、node.jsを使用したWebフレームワークなどが雨後のタケノコのように出てきていたのですが、「今までのWebサーバで出来ることをただ置き換えるだけっていうのはあんまり面白くないよね」というのが正直な気持ちだったと思います。 それから1カ月ほど経った2009年の12月、Webの世界に新たなニュースがありました。Googleが開発するブラウザのオー

    node.jsの衝撃とWebSocketが拓く未来
  • JavaScriptは盗んで学べ! 知識0のデザイナーでもできるjsdo.itの遊び方

    jsdo.itではInternetExplorerやFirefoxなどのWebブラウザだけでコードが書けちゃいます。

  • [作って学ぶ!jQuery] 第1回 セレクタを学ぶ | バシャログ。

    「作って学ぶ!jQuery連載」の2回目なんだけど、1回目。今回はセレクタについてです。 jQueryを理解するで欠かせないのがセレクタ。セレクタの種類は数多くありますが、今回は現場でよく使うであろうものについてご紹介します。 基系 要素セレクタ DOM要素(htmlタグ)を指定する方法です。 $('h1') $('ul') $('div') IDセレクタ = $('#myid') #で始まるセレクタは、id名を指定する方法です。なおidはページ内にて常にユニークである必要があります。 $('#header') CLASSセレクタ = $('.myclass') ドット(.)で始まるセレクタは、class名を指定する方法です。class名のみでの指定は、ドキュメント内を全て探しにいくので表示速度に影響もあります。IDセレクタと併用するのが望ましいです。 $('.link') グループセレ

    [作って学ぶ!jQuery] 第1回 セレクタを学ぶ | バシャログ。
  • [JS]設置も簡単なテーブルのデータをソートする超軽量のスクリプト | コリス

    leigeberから、既存のテーブルにも簡単に設置できる、データをソートする超軽量(1.7KB)のスクリプトを紹介します。 jQueryやPrototypeなど他のスクリプトは必要ありません。 JavaScript Table Sorter demo 動作確認ブラウザは、IE 6/7/8, Fx2/3, Op, Safari, Chromeとなっています。 設置方法は簡単で、既存のものにも簡単に組み込めます。 「script.js」と「style.css」を外部ファイルとして記述します。 tableに「class="sortable" id="sorter"」を記述します。 テーブルの下に下記のスクリプトを記述します。 <textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript">

  • 二度押し防止の onsubmit で disable にするやつ :: Drk7jp

    もう2年ほど前に話題になったアレなんですけど、今更ながらあるサービスでこの仕組みの導入を検討しています。 onsubmit で submit ボタンを disable にしてユーザビリティを良くする - naoyaのはてなダイアリー submit ボタン disable 技の罠 - naoyaのはてなダイアリー onsubmit で submit ボタンを < disable にしてユーザビリティを悪くするのはやめてください - のヮの うんこ♥ onsubmit で disable にするやつ - 鷹の島 onsubmit の disable 化ですが既に議論が終わっているように、onsubmit disable の実装方法として、 onsubmit イベント発生時に submit 要素を disable にして値をサーバへ渡すための hidden 要素を生成する方法 setTimeou

  • http://youmos.com/news/packer

  • グラフ描画機能が追加されたJavaScriptライブラリ「Dojo 0.4」:phpspot開発日誌

    dojo, the Javascript Toolkit: brought to you by the Dojo Foundation グラフ描画機能が機能追加されたJavaScriptライブラリ「Dojo 0.4」。 次のようなグラフがJavaScriptで描画することが可能です。曲線も美しいですね。一見Flashを使っているようにも見えます。 グラフ描画するためには、dojo.jsを読み込んで、次のようなコードを書きます。 dojo.require("dojo.collections.Store"); dojo.require("dojo.charting.Chart"); dojo.require('dojo.json'); // our sample data for our line chart. var json = [ { x: 0, y: 110, size:20, x2:

  • JavaScriptでグラフを描画出来るライブラリ『WebFX』:phpspot開発日誌

    Chart Usage (WebFX) In web applications developed now days a lot of the logic that previously resided on the server side is now being implemented on the client side. This is especially true for information presentation, components such as trees and columnlist makes it possible for users to interact with the application, or web site if you wish, without contacting the server. However the ability to

  • Enjoy×Study - JavaScriptを書き始めるとき

    JavaScriptを書き始めるとき、いきなり*.jsやHTMLに書いたりするのではなく、大抵下記に試しに書いて実行してみます。 JavaScript Development Environment JavaScript Shell Web Development Bookmarklets 上記2つのブックマークレット版 JavaScript Shell は、補完機能なんかもあって高機能ですが、IE、Operaだとどうもうまく動きません。 JavaScript Development Environment は、ブックマークレット版じゃないほうはIE、Operaでも動くので、どちらかというとこっち使うときの方が多いです。(Operaでのエラー表示が出来てないみたいだけども…) ブラウザ上で簡単に試せるってのはすばらしいですね。 で、その後に*.jsやHTMLに書いて、後はFireBug使い

    Enjoy×Study - JavaScriptを書き始めるとき
  • ITmedia エンタープライズ:実は、Ajaxのウラにこそ勝算がある (1/5)

    実は、Ajaxのウラにこそ勝算がある:Web 2.0で変わるWebプログラミングの常識(1/5 ページ) 見た目にインパクトが大きいAjax利用のWebアプリケーション。しかし、その見た目を支える要となるものは、背後にある有益な情報処理と活用方法だ。Ajaxのインパクトに負けないWebアプリはどのように作られるのか? このオンライン・ムックPlus「Web 2.0で変わるWebプログラミングの常識」では、これまでにAjaxの概要(第1回)から発展系としてどのような取り組みあるのか(第2回)、そして、効率的な組み込み方法の一つとしてJSONと呼ばれるデータ形式のやり取り(第3回)について解説した。 この一連の特集を読むことで、プログラミングノウハウを一から十まですべてを学べるほどのボリュームは詰め込めないが、それでも最低限押さえておくべきポイントが理解できるはずだ。今回の記事でテーマとなるの

    ITmedia エンタープライズ:実は、Ajaxのウラにこそ勝算がある (1/5)
  • FireBug に JavaScript デバッガが付いて便利すぎる件について - IT戦記

    Firebug を更新したら、またもや凄いことになってました。 まずはこれを見てください。 http://sample.ecmascript.jp/20060526.htm 要は JavaScriptをステップ実行しながら結果を確認できる。 変数の値をウォッチできる。 適当にブレークポイントを貼ってスタックを追えば、他人のサイトを簡単にハックできる。 うれしい!たのしい!こんにちわ! FireBug のインストール https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&id=1843

    FireBug に JavaScript デバッガが付いて便利すぎる件について - IT戦記
  • Qooqle

    アニメ『盾の勇者の成り上がり(2期)』の「あらすじ」や「動画を無料視聴する方法」をご紹介していきます! ↓『盾の勇者の成り上がり(2期)』の動画を今すぐ無料で見たい方はこちらをクリック↓ 盾の勇者の成り上がり(2期)を無料で視聴する! アニメ『盾の勇者の成り上がり(2期)』とは?(あらすじ・見どころ) まずは、『盾の勇者の成り上がり(2期)』とはどんな作品なのか?、作品の概要をご紹介します。 あらすじ 尚文が次の「波」への準備を進めていると、謎の魔物たちが現れ、同時に「波」へのカウントダウンが停止してしま ... アニメ『RPG不動産』の「あらすじ」や「動画を無料視聴する方法」をご紹介していきます! ↓『RPG不動産』の動画を今すぐ無料で見たい方はこちらをクリック↓ RPG不動産を無料で視聴する! アニメ『RPG不動産』とは?(あらすじ・見どころ) まずは、『RPG不動産』とはどんな作品な

  • Google Calendar の使い方 | グーグル・カレンダーの便利な機能や特徴を紹介します

    ネットで検索してたら、ルシアクリニックの京都駅前院がめっちゃ気になるなぁ。 医療脱毛なのにすごい安くていい評判も聞くけど、ほんとに痛くないのかな? 通っている人の口コミをみてみたいなぁー。 なんて気になったので、ルシアクリニックの京都駅前院についてSNSやネットで調べてみました。 そう思ってSNSを中心に調べてみたら、、、口コミや評判も良いじゃない♪ ちなみに、似たようなサービスや商品があるかも?なので、今回調べてみたのはこちらになります。 オープンしました! ルシアクリニックの京都駅前院ですが、すでにオープンしています!(2020年8月20日オープン済) もちろんですが、オープンしたてなんでめっちゃ予約が取りやすいです。 ただし!!人気のある医療脱毛院なので早めの予約が良いかも?!

  • Prototype.js を使った JavaScript OOP 講座 #03

    社内の勉強会の資料をここに公開していきます。社内の人も社外の人も読んでください。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 ※信念は「教わるのではなく、必死に着いていきませう」 前回までの内容で Prototype.js でどのようにプログラムを書いていくか理解できたと思います。 ここからは、関数やクラスを覚えた数だけ Prototype.js を使えるようになると思います。 しかし、それではいつか必ず躓きます。他人の書いた JavaScript を使うためにはそのコードを読める必要があります。 JavaScript は、言語の仕様レベルの部分までかなり書き換えることが出来ます。 そのため、もし、動作がおかしくなった場合に、どこがどう影響したか自分で調べられなければならないのです。 今回は、 Prototype.js を読むために必要な知識を

    Prototype.js を使った JavaScript OOP 講座 #03
  • GPSログ活用ツール『轍 Wadachi』について - 轍 Wadachi

    最新情報 Version 4.26 リリース (2023.6.20) 『轍』の概要 『轍』は2006年、当時画期的であったGoogleマップにGPSで取得したログを描画させるために開発されました。以後改良を重ね、写真をリンクして地図上に表示させたり、Google Earthのコンテンツも作成できるようになりました。またログの解析・編集機能も強化され、単にGoogleマップを作成するだけでなく、ログ加工ツールとしても広く使われるようになりました。 2013年からはクラウド型サービス『轍 ONLINE』を開設し、これまで上級者だけに限られていたウェブ上へのマップ公開を誰でも簡単にできるようにしました。SNS時代の幕開けとともに、『轍』も時代の変化に合わせて進化を続けています。 『轍』でできること Leaflet APIに対応したスクリプトを自動生成 ハンディGPSやスマートフォンで取得したトラ

  • Ajax開発環境を無償にしたTIBCOは勝ち組? - @IT

    Ajaxがリッチクライアントの中で不動の地位を築いたことは、誰の目にも明らかになった。現在リッチクライアント業界で最も熱いのは、Ajax統合開発環境&フレームワークの開発合戦だろう。SOA/BPMベンダとして知られるTIBCOソフトウェア(以下、TIBCO)は、Ajax開発環境「TIBCO General Interface Version 3.1 Professional Edition」(以下、GI)の無償提供を始めた(2006年2月13日付のプレスリリース、米国時間)。米TIBCO プロダクト・マーケティング・ディレクター、Jeff Kristick氏に、Ajaxにいち早く対応したGIの開発背景について話を伺った。 ── 今回出荷されたGIは、Ajaxの開発ツールとフレームワークを組み込んだことで話題になっています。TIBCOのAjaxへの取り組みは、どのように始まったのですか。 多

  • Prototype.js を使った JavaScript OOP 講座 #01

    社内の精鋭エンジニアを中心に定期的に勉強会をすることになった。んで、 JavaScript の講義は僕がやることになった。 資料を社内だけでとどめておくのはもったいないので、ここに公開していきます。社内の人も社外の人も読んでください。 講義の内容は基的にソース嫁。ソースレビュー形式。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 Section 00 Prototype.js の前に JavaScript のオブジェクトの概要・・・ オブジェクトを作ってみる。 var object = {};オブジェクトにメソッドとかプロパティを追加してみる。 var object = { field: 'IT戦士', method: function() { alert('hello ' + this.field); } }; object.method()

    Prototype.js を使った JavaScript OOP 講座 #01
  • A library of DHTML and Ajax scripts - DHTMLgoodies.com

    - March, 28th, 2017: DHTML Chess for WordPress. DHTML Chess is now available as a WordPress plugin in a free and PRO version. Learn more. - January, 16th, 2017: LudoJS Progress Bar. Samples of progress bars in the LudoJS Javascript framework on my site ludojs.com. - January, 13th, 2017: DHTML Chess 3.0. The new DHTML Chess 3 has been ported to jQuery. New demos are also available. The home of DHTM