それ以降、CoffeeScriptでJSを書き続けていて、やっぱCoffeeScriptいいなーと結構思ってる。自分にとってのCoffeeScriptがいいと思う一番の理由は、「オブジェクト指向的なコードが、ストレス無く書けるから」っていう点だと感じてる。例えば、以下のような動作をするUIがあり、
Post by @hamalog
それ以降、CoffeeScriptでJSを書き続けていて、やっぱCoffeeScriptいいなーと結構思ってる。自分にとってのCoffeeScriptがいいと思う一番の理由は、「オブジェクト指向的なコードが、ストレス無く書けるから」っていう点だと感じてる。例えば、以下のような動作をするUIがあり、
最近のJavaScriptモジュールの書き方 - yo_waka's blog
サーバサイド（特にNode.js）とクライアントサイド両方で動かしたいものは最近はこんな感じで書いている。 CommonJSのwiki見ててそこに紹介されてるソースコードで（どれだったか忘れたけど。。）やってたのを見ていいなーと思って真似っこした。 (function(define) { define([], function() { 'use strict'; /** * @constructor */ var SomeClass = function() { // initialize }; /** * @type {string} * @private */ SomeClass.prototype.hoge_ = 'hoge'; /** * @return {string} */ SomeClass.prototype.getHoge = function() { return th
はてなブログ | 無料ブログを作成しよう
令和五年六月 コンデジの写真など 梅雨がどこかに行ってくれたようで嬉しい。水不足にはなってほしくはないけれど、たまにはカラッとした年があっても良いよな。今月は忙しくてあっという間に終わってしまった。いつもより今月は何をしていたっけ、なんて感覚が強い状態。スマホの中の写真やラインのや…
jQueryでスマホサイト向けに画像サイズを縮小する方法
jQueryでスマホサイト向けに画像サイズを縮小する方法を紹介します。 １．サンプル 次のようなPCサイト用のページがあります。この場合、Movable Typeでページを出力しています。ページで使っている記事内の画像サイズは幅470pxです。 このページをスマホサイト向けに別のページを作り、画像サイズを縮小して表示します。画像サイズは幅280pxに縮小しています。 ２．カスタマイズ サイズを変更するには、下記のスクリプトをページ内にあるhead終了タグの直前に追加します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(function(){ $('img').each(functio
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
Welcome购彩国际(官方)网站/网页版登录入口/手机APP
购彩大厅welcome中心 系统提示 您访问的页面未找到， 5秒后自动跳转到购彩大厅welcome中心 分享到：QQ空间新浪微博腾讯微博人人网微信 友情链接： 360 | 百度 | 搜狗 | 神马 工商营业执照 <noframes id='78e2b'><address id='307a8'></address><code id='ebbb8'></code><style id='063ed'></style> <acronym id='431ca'></acronym><center id='d8811'><center id='55225'><tfoot id='6578a'></tfoot></center><abbr id='07ab4'><dir id='5f17e'><tfoot id='30b72'></tfoot><noframes id='b1af0'> <
[JS]表示位置の微調整も可能、キュートなデザインのツールチップを実装するスクリプト -grumble
テキスト量を自動判定してサイズを大きく $('#grumble4').grumble( { text: 'Whoaaa, this is a lot of text that i couldn\'t predict', angle: 85, distance: 50, showAfter: 4000, hideAfter: 2000, } ); ); callback関数も用意されています。 $('#myElement').grumble({ showAfter: 1000, hideAfter: 2000, onShow: function(){ console.log('triggered when show animation completes'); }, onBeginHide: function(){ console.log('triggered when hide anima
jQueryでWebサイト内を無限にスクロール出来るようにする - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 ちょっと語弊があるかもですけど、無限に スクロール出来るように見せる、みたいな 方法です。これが何の役に立つんですか とか言われると困っちゃうんですけど・・・ こういうのがあってもいいかなと思ったの でちょっと作ってみました。実装にはjQuery を使います。 土曜日なのでちょっとネタ的な話題です。 数日前に「スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ」っていう記事を書いたんですが、この中に App Galaxy by Googleっていうサイトとunfoldっていうサイトがありまして、ここが無限に縦スクロールできるようになってます。 これを実装しよう、という誰得な話です。 Sample 以下サ
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
もっと少量のjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする方法
ちょっとしたコードの解説 せっかくなので、どういうコードなのかというのを、さらっとみましょう。 jQuery(function($) { //data-hrefの属性を持つtrを選択しclassにclickableを付加 $('tbody tr[data-href]').addClass('clickable') //ata-hrefの属性を持つtrをクリックしたら動作 .click( function() { //data-href属性の値をattr()メソッドで取得し、ページを遷移させる window.location = $(this).attr('data-href'); //もしtr内にa要素があれば、a要素にホバーした時に以下動作させる }).find('a').hover( function() { //a要素の先祖要素trのクリックイベントを解除 $(this).paren
[JS]アラート・ダイアログボックスの実装が簡単にできるスクリプト -Apprise
アラートボックスやダイアログボックスのスタイル、コンテンツ、ポジション、機能性を簡単にコントロールできるシンプルで軽量なjQueryのプラグインを紹介します。 apprise('Hello', {'animate':true}); アニメーション表示のアラートボックス サイトでは他にも多くのデモがあります。 Appriseの対応ブラウザ テスト済みのブラウザは、下記の通りです。 Chrome 8.0+ Firefox 3.0+ Safari 4.0+ Internet Explorer 9.0 Appriseの実装 外部ファイル スクリプト「jquery.js」「apprise.js」とスタイルシートを外部ファイルとして指定します。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"
jQuery事始めvol.2・画像にマウスオーバーして動作するアニメーションエフェクトを作ってみる - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 以前に書いたjQuery事始め、という記事の 続編のような内容の記事です。基本を理解 したら今度はコードを真似して体で覚えて みるのも勉強方法の有効な手の一つだと 思います。ご自分で改変して遊べる程度の 簡単なコードなのでぜひチャレンジしてみて ください。 内容はjQueryを覚えたいけどなかなか時間が無い、というWebデザイナーさん向けです。多くのプラグインやチュートリアルが存在しますが、jQueryの基本中の基本と少しのアイデアだけでも十分出来ることがありますので、そこまで深く追求する必要は無い気もします。 少しでもハードルが低くなればと思って、コードを真似して、そこからご自身で応用出来るような簡単な内容を記事にしてみました。今回はよくあるマウスオーバーエフェク
ドラゴンボールで学ぶオブジェクト指向
オブジェクト指向の基本亀仙流やつ鶴仙流など、世の中にはいくつかの流派（＝クラス）があり、それぞれの流派にかめはめ波やどどん波、舞空術などの技（メソッド）がいくつかあります。 実際に流派にある技を使う場合、技を覚えているZ戦士（インスタンス）が必要になります。 例）亀仙流を覚えた孫悟空を使ってかめはめ波を放って敵を倒す goku = new KamesenRyu("goku"); goku.shootKamehameha(teki); Z戦士によっては複数の流派の技が使えたり、自分の技を人に教えることが出来ます（継承）。 また悟空とクリリンのように同じ流派でも同じ技で違う性能を持っていたり、オリジナルの技を持っているなどの違いがあります。 クラスはセルを作るためのZ戦士達の遺伝子情報と言っても良いかもしれません。 例）セルを作りましょう。 class Cell extends Goku,Ve
スクロールした位置に付いてくるサイドバーを実装するjQueryプラグイン・Contained Sticky Scroll - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 気になったので備忘録。スクロール した位置に付いてくるサイドバーを 実装してくれるjQueryプラグイン・ Contained Sticky Scrollです。細 かいオプションも設定できて、IE6や IE7でも動作してくれるので覚えて おこうと思って記事にします。 Web Designer Wallがリニューアルしてサイドバーを固定していました。これはcssで実装してるみたいですが、IE6利用率が10％を超える日本では、まだ捨てるわけにもいかないのが現状ですね。（個人的には徐々に捨て始めてますがｗ） 基本的にはアニメーションで付いてきますが、ノンアニメーションも可能です。 使い方 いつもどおりjQueryとプラグインのパスを書きます。 <script type="
[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider
jQuery.TinySlider デモ [ad#ad-2] jQuery.TinySliderの実装 HTML スライドで表示されているイメージはdiv要素の背景画像です。 <div id="slider"> <div class="image" style="background-image: url(img/img1.jpg);">Simple</div> <div class="image" style="background-image: url(img/img2.jpg);">Light</div> <div class="image" style="background-image: url(img/img3.jpg);">Easy</div> </div> JavaScript 「jquery.js」と「jquery.slider.js」を外部ファイルとし、下記のスクリプト
JavaScript のデバッグ時にオブジェクトを調べるのに console.dir を使うと便利
<script type="text/javascript"><!-- function print_r(obj) { var count_obj = 0; function _output(str) { document.writeln(str + "<br/>"); } function _print_r(obj, name, level) { var s = ""; if (obj == undefined || level > 4) return; for (var i = 0; i < level; i++) { s += " | "; } s += " - " + name + ":" + typeof(obj) + "=" + obj; _output(s); if (name == "document" || typeof(obj) != "object") return;
io.js - JavaScript I/O
Run JavaScript EverywhereNode.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
history.pushStateでページ遷移するjQueryプラグイン書いた - Webtech Walker
history.pushStateでのページ遷移をやりやすくするためにjQueryのプラグインとしてjquery.smarthistory.jsというのを書いてみました。 jquery.smarthistory.js history.pushStateをサポートしてるブラウザではhistory.pushStateを使って、サポートしてないブラウザでは何もしません（普通に遷移する）。今だとchrome、safari、iOS、Firefox4で動くと思います。 こんな感じで使います。 $('a').smarthistory({ defaultData: $('html').html(), target: function() { return $(this).attr('href') }, before: function() { // ajax前の処理 }, change: function
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Perlゼミ(サンプルコードPerl入門)