JavaScript初級者から中級者になろう
戻る｜基礎第二回 基礎第一回 JavaScriptの書き方 基礎とはいえ、さすがにHTMLの書き方くらいは知っているという前提で書いていきます。 さて、Webページ上でJavaScriptを動かすには、scriptという要素を使います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <script type="text/javascript"> alert("test"); </script> <p>test</p> これを適当なhtmlファイルに保存して開いてみると、「test」というアラートが出ます。 ちなみに、「<html>」とか「<head>」「<body>」といったおなじみのタグがありませんが、実はこいつらは省略ができるんです。もちろん、実際にWebページを作るときは省略しないほうがい
JavaScriptだけで画像イフェクト·PaintbrushJS MOONGIFT
PaintbrushJSはJavaScript製のオープンソース・ソフトウェア。写真は撮ったそのままよりも加工した方がより印象深くなることがある。ただ、撮りためた数百枚という写真をすべて加工するのは大変だ。そのためにオンラインで画像加工を行うサービスも存在する。 横並びの写真はすべて同じもの だが元々は同じ写真だ。加工するたびにファイル数が増えていたら容量を食ってしまう。そこで生み出された手法がPaintbrushJSだ。なんとJavaScriptを使ってクライアントサイドで画像加工を行ってしまうのだ。 PaintbrushJSで対応しているのは色調変更やグレースケールへの変換、ぼかし、ノイズといった加工だ。色調を変更するとセピアになったり、青系の色に変えることもできる。スクリーンショットに並んでいる横並びの写真はすべて同じものだが、全く違う写真に見えるくらい加工ができる。 色を変えたりノ
jQueryで実現するスライドショー&フォトギャラリーBest20「20 Best jQuery Slideshow / Photo Gallery Plugins」
jQueryで実現するスライドショー&フォトギャラリーBest20「20 Best jQuery Slideshow / Photo Gallery Plugins」 javascriptを利用した非常に高機能なライブラリjQuery。利用者も多く、日々新しいプラグインがリリースされており、便利に使えるので、WEB制作の現場でもにjQueryを利用して構築するということも多いと思います。今日紹介するのはjQueryのプラグインの中でも利用頻度の高い、ギャラリーやスライドショーのプラグインを集めたエントリー「20 Best jQuery Slideshow / Photo Gallery Plugins」。 1. Galleria 今回は紹介されているスライドショー&フォトギャラリープラグインからいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■2. Galle
あなたのWebを入力しやすくするjQueryプラグイン10選
あなたのWebを入力しやすくするjQueryプラグイン10選：CSSの書き方も分かるjQueryプラグイン実践活用法（終）（1/5 ページ） jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 前回の「画像や動画を綺麗に回転/拡大するjQueryプラグイン」では、イメージを回転させたりズームインする「jCarousel」「Zoombox」プラグインの使い方を解説しました。今回は、フォームを使いやすくするための各種プラグインを、以下のようにチェックボックス／ラジオボタン、ドロップダウンリスト、テキストボックス／テキストエリア、フォームのカテゴリ別に分類して紹介します。
JavaScriptやPHPで顔認識する場合は「face.com」のAPIが使えそう:phpspot開発日誌
JavaScriptやPHPで顔認識する場合は「face.com」のAPIが使えそうです。 先日、「1年で70億枚の顔写真をスキャンしたFace.comが顔認識APIを無料で一般公開」という記事にて知ったのですが、公式サイトのDownloadページにてPHPとJavaScriptのクライアントライブラリが公開されてるみたいです。 face.com developers site Download クラスライブラリの形なので非常に簡単に利用することができるようです。 face.comのビジネスモデルと事業の継続性については気になるところですが、お手軽に重い処理をアウトソースできるという点で魅力的ですね。 勿論、このサービスが停止しなくなれば使えなくなるので安定したサービスを提供したい場合には自前でOpenCVを入れてやった方が良さそうです。 関連エントリ PHPでOpenCVなしのピュアPH
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
べらぼうに簡単にストリートビューを表示できるJavaScript「stview.js」
twitter facebook hatena google pocket ストリートビューを表示させたいという思いがあるかもしれません。 そんな時はstview.jsを利用すると3行追加するだけで表示することが可能です。 sponsors 使用方法 stview.jsからファイルをダウンロードします。 <script type="text/javascript" src="stview.js"></script> <div class="$stview" width="400" height="300">住所</div> <script>$stview.parse();</script> 住所には緯度経度を入力しても可能です。 <div class="$stviewLatLon">42.375248, -71.115133</div> これで終りです。 べらぼうに簡単にストリートビューを
JavaScript初心者におくる24のグレイトなtips - 三等兵
私が作ったわけではなく海外の記事です。自分も学習してみました。 phpスポーツ啓発日誌や、コカトリスさんや、アイスクレアームパラダイスさんのような、品質の良い訳は私にはできませんので見出しは意訳もしくは誤訳、文章は無視して訳してません。かつ、私がいろいろコードや文章つけたしてます。内容的にはほとんどズレてはないと思いますが、適当なのでおかしいところがあるかもしれません。 うっとうしい場合は原文をどうぞ。 24 JavaScript Best Practices for Beginners 1. 等価演算子で==使うなよボケ===だろナスチン野郎 ひぃぃぃ。 ==|!= だとねー、型は自動に変換されるんすよねー。ねー。 s = '1'; i = 1; alert(s == i); // true alert(s === i); //false えーと、==は「わし、数値も文字列も中身が一緒だ
[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
[JS]フォームのエラー箇所をアニメーションでブルッとさせるスクリプト
フォームのエラー箇所にブルッとしたアニメーションのエフェクトを加えるスクリプトをJanko At Warp Speedから紹介します。 Animate validation feedback using jQuery demo デモではフィールドが空の場合にエラーとして、ブルッとしたアニメーションのエフェクトを加えます。 スクリプトのベースにはjQueryが使用されており、下記のスクリプトを記述します。 <textarea name="code" class="js" cols="60" rows="5"> $("#signup").click(function() { var emptyfields = $("input[value=]"); if (emptyfields.size() > 0) { emptyfields.each(function() { $(this).stop(
【ハウツー】強力JSフレームワーク「Ext JS」が3.0に - 主な新機能をまとめてチェック! (4) Ext JS 3.0の目玉機能!?「Ext.direct」とは | エンタープライズ | マイコミジャーナル
Hello, Ext.js! - Ext JS 3.0の目玉機能!?「Ext.direct」とは Ext.directはクライアント-サーバ間のデータ通信をより効率よくおこなうための実装。Ext JS - Blogによれば、Ext.directを活用することでコード量を30%削減できるとのことだ。Ext.directパッケージには次のクラスが用意されている。 JsonProvider PollingProvider Provider RemotingProvider もっとも強力なものはRemotingProviderクラスで、同クラスを使用することでサーバに用意してあるクラスの機能をJavaScriptからリモート実行できるようになる。サーバ側のスタックはExt.direct Remoting仕様に沿ってさえいれば、PHPやJava・RubyやPerlなど実装言語を問わない。Ext.di
JavaScriptのオブジェクトについて考察してみた - あと味
JavaScriptを勉強しているとオブジェクトとはなんぞや？ということがわからなくなってきます。選択肢が増えれば増えるほど。 JavaScriptには、同じように見えて、実は同じではないデータがあります。それらのオブジェクトについて、区別して説明が付けられるように、自分なりに考察してみました。勉強中のアウトプットなので、ここで書いた内容は事実とは大きく外れているものかもしれません。とにかく不明瞭な部分を自分なりに理由づけしたかっただけです。 サンプルコードを試される場合は、FirefoxのFireBugにあるコンソールに貼りつけて実行するか、Safariの開発ツールにあるコンソールに貼りつけて実行してください。それがわからない方は console.log の部分を alert に置き換えて確認してください。 話がややこしくなるので、今回はプロパティしか扱っていません。 名称の定義について
Sexy Drop Down Menu w/ jQuery & CSS - noupe
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key -- and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully. According t
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
JavaScriptとjQueryでデスクトップアプリに負けない操作性のWebアプリケーションを作る
はじめに 近ごろのブラウザは、パフォーマンスの面でも開発ツールや互換性の面でも大きく向上しています。大部分のWebサイトは依然としてページパラダイムに固執し、自らのコンテンツを新聞や書籍と同じような感じで表現していますが、今日のブラウザは伝統的なデスクトップアプリケーションに引けを取らない高度に対話的なアプリケーションをサポートすることができます。 これまでのアプリケーション開発の歴史では、複雑な対話や高度に視覚的な対話を実現しようとする開発者は、ユーザーのPC上に置かれるデスクトップアプリケーションとして実装するか、Flashのようなブラウザプラグインの上に構築されるアプリケーションとして実装するかの選択を強いられました。今日のJavaScriptは、こうした高度なアプリケーションもサポートできるほど進歩を遂げています。パワフルなJavaScriptライブラリが提供する抽象層は、ブラウザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ
jQueryを使ったシンプルなドロップダウンメニュー – creamu
[JS]多目的に使える、パネルを水平にスライドするスクリプト
This Document has Moved
This Document has Moved