chrome-life.comThis domain may be for sale!
JavaScript入門講座
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
jQuery入門 - ポンクソフト
目次 jQuery入門 jQueryのインストール・簡単な使い方 クイズゲームの作り方 秘密の暗号を作ってみよう（たぬき暗号） アクションゲームを作ってみよう（ぬりかべ） 画像を使ったジグソーパズルを作ってみよう もぐらたたきっぽいゲーム ドラッグ可能なポップアップウインドウを作ろう jQuery UI Sortableで１ラインオセロゲーム ブラウザ全体をブロックしてみる Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする 発生したイベントの状態を保持・保存する6つのパターン Ajaxを利用したシンプルなイメージギャラリーを作ってみる テーブルにページ送り（ページング）を実装してみる jQuery UI Draggableを使って付箋(sticky)を作ってみる カラムでソートできるテーブルを自作してみる テーブルを使ったシンプルなドット絵エディ
jqueryでロールオーバー（マウスで触ったときに画像が変わる）する方法
ボタンを触ったときに画像を変更させるロールオーバーは良く使いますよね。 jqueryを使っての簡単ロールオーバーする方法を紹介します。 $(function(){ $("img[src=’img/button.gif’]").mouseover(function(){ $(this).attr("src","img/button_on.gif"); }).mouseout(function(){ $(this).attr("src","img/button.gif"); }); }); 解説 $("img[src='img/button.gif']").mouseover 画像を$(“img[src=’img/button.gif’]”)で選択して、 mouseoverでマウスが画像の上にのったときに下記のイベントが実行されます。 (function(){ $(this).attr("sr
jqueryを高速化させるセレクタの書き方
スピードのチェック方法 スピードをチェックしたい時に、使えるのがfirefoxのプラグインfirebugです。 例えば、 test()という関数のスピードを見たいときは <script type="text/javascript"> console.profile(); test(); console.profileEnd(); function test(){ $('div').css('color','#f00'); } </script> と書いてあげると、 画像の赤枠のように、 firebugのコンソール→全て→関数名(test)をみると、実行時の時間を見ることができます。 テスト結果 とあるプログラムでセレクタの違いでどう違うのか、そして、 1.3以降getElementsByClassNameが対応しているので、1.2のjqueryと1.5のjqueryの違いでテストしてみまし
jQueryで指定ユーザーの最新のYoutube動画を表示する方法
jQueryで指定ユーザーの最新のYoutube動画を表示する方法 最近では自社のWebサイトにYoutube動画を載せたいといったケースが増えていますね。動画単体だったら公式の埋め込みコードで簡単に表示させることができますが、更新が頻繁にあるとそのつどWebサイトの更新をしなくてはいけないので面倒です。 そこでこの記事ではjQueryで自動的に最新動画を取得する方法をご紹介します。 投稿日2012年01月19日 更新日2015年11月05日
jQueryでフォームチェックをするときのメモまとめ | helog
毎度の事ですが、Javascriptでメールフォームなどのチェックを実装する場合に、 「selectの場合はこれでよかったっけ」、「checkboxの値の取り方は。。。」と調べなおしてしまいます。 分かっているつもりでも、仕事上、使う場面が頻繁でもないのでうっかり忘れてしまいます。 困ったときの手間を省くために、ここのメモに書き留めていきたいと思います。 最近ではjQueryの組み込みがデフォルトになってきたので、サンプルはjQueryベースとなっています。ここでjQueryの使い方についての詳細は省きます。 テキストボックスの入力必須チェック このようなテキストボックスがある場合 <input type="text" name="hogehoge" value="" /> 以下のよう値が空かどうかを判定することで、必須チェックを行います。 if($('form input[name
JavaScriptによる画像切り替え
JavaScriptを使って画像を切り替えるボタンを設置する方法です。この方法だとページ自体を更新しないので比較的軽くなると思います。 <SCRIPT type="text/javascript"> <!-- function showimg1(){ document.area1.src = "画像1のURL"; } function showimg2(){ document.area1.src = "画像2のURL"; } function showimg3(){ document.area1.src = "画像3のURL"; } --> </SCRIPT> <img src="最初に表示する画像のURL" name="area1"> <input type="button" onclick="showimg1()" value="画像1"> <input type="button" o
YUI Compressorで簡単にjavascriptとCSSを圧縮 - Affamative Way
2015/04/20 追記 https://github.com/mishoo/UglifyJS 2012/02/11 追記 なんか変なまとめの影響でブクマが増えとる。。これ、2008年の記事だぞ。。 YUI Compresserも良いツールだけど最近だったらこの辺の方がいいよ。 http://dean.edwards.name/packer/ http://code.google.com/intl/ja/closure/compiler/ なぜコードの圧縮が有効か？ Webサイトの高速化 フロントエンドのパフォーマンスの重要性 (Yahoo! developer netoworkより翻訳) || パフォーマンス・チューニングBlog: インターオフィス 要するに、Webサイトをより速くするための鍵は、フロントエンドのパフォーマンスを改善することにあるということです。 まず最初にやるべきな
現在Webページを作成していますが画像サイズの扱いに困っています。…
現在Webページを作成していますが画像サイズの扱いに困っています。 縦：30～80px 横30～80pxの範囲の画像があります。 その画像のサイズがわからないときに縦横比を崩さずに ブラウザやjavascriptの縮小機能を使って 64×64内に収まるように表示させたいと考えています。 画像自体には手を加えず、あくまでどこかに配置された 画像を参照する方法でやりたいと思っています。 ＃PHPなどで画像サイズ取得しリサイズするなどの方法はありますが、 負荷がかかりすぎるので避けたいです。 皆さんだったらどうしますか？お知恵をいただけたらと思います。
JavaScript基礎文法最速マスター - gifnksmの雑多なメモ
続々と増え続ける基礎文法最速マスターシリーズ(あまりにも増えてきたので他の言語記事へのリンクは別の記事に移しました)。 JavaScript 版は誰も書いていなかったようなので書いてみます。こういう解説記事的なものを書くのは初めてなので変なところがあったら指摘して頂けるとありがたいです。 JavaScriptの基礎概念についての解説はこちら：JavaScript基本概念最速マスター - TechTalkManiacs 1/31 23:58追記 コメント欄のos0xさんのご指摘を基に一部追記・修正を行いました。 2/2 2:52追記 switch文・正規表現・例外処理について追加しました。 2/2 6:44追記 コメントでfavrilさんにご指摘頂いた点(typo & コメント・サンプル追加)を修正・加筆しました。 2/2 7:15追記 トラックバックでLiosKさんにご指摘頂いた点(cal
プログラミング言語人気TOP10の簡易解説
0-1. 前書き この世にはたくさんのプログラミング言語が存在します。Wikiepdiaのプログラミング言語一覧を見ると、実に200個以上というわけの分からない数の言語が並んでいたりします。 【参考URL】プログラミング言語一覧 - Wikipedia http://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%82%B0%... 200の中にはほとんど使われてない言語も混じってるので、実際に仕事でざくざく使われている言語は20とか30とかそういうオーダーなのですが、それでも1人の人間が把握するにはちょっと多過ぎる数です。 本記事では、そうした有り余るプログラミング言語の海の中で「どれを勉強したらいいの？」とか「どれを採用するのが適切？」という悩みをお持ちの方が「よし、この言語に決めた！」と自信を持って決断できるように背中を押すことを目的として書か
プラグインを使わずjQueryに23の機能をつける方法 | Web活メモ帳
jQueryにはたくさんのプラグインがあるので、気づけばjsフォルダがものすごいファイル数になっていたりします。今回はプラグインを使わなくても簡単に実装できる機能を「26 cool and useful jQuery tips, tricks & solutions」というエントリーから紹介します。 詳しくは以下 1.右クリックを無効にする方法 右クリックを禁止したい場合などに。コンテキストメニューが非表示になります。 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2.フォームの初期値を消す方法 検索フィールドなどに。 $(document).ready(function() { $("input.text1").val("Enter your
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Code Snippet: Keep Sidebar Elements in View When Scrolling - Developer Drive
chrome-life.com