ライブラリを使わない素のJavaScriptでDOM操作 - Qiita
jQueryやその他ライブラリを使わない、素のJavaScriptでのDOM操作関連をまとめてみました。 要素の検索 //id指定 document.getElementById('id'); //class指定 document.getElementsByClassName('class'); //タグ指定 document.getElementsByTagName('div'); //cssセレクタで指定 document.querySelector('#main .posts h1'); //最初の一つを取得 document.querySelectorAll('a'); //すべて取得 //親要素 element.parentNode; //子要素 element.firstElementChild; //最初の子要素 element.lastElementChild; //最後の
今どきのJavaScriptで使われているインデント規約まとめ - ICS MEDIA
みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか？ タブ、スペース2個、スペース4個・・・などいくつかの選択肢があります。 個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。 本記事はそんなインデント論争の1つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました。 この記事のポイント* 海外のJS界隈ではスペース2個のインデントが多数派 ESLINTなどの設定ファイルからコーディングルールを調べられる なぜインデント論争が起こるのか？ そもそもなぜインデント論争が起こってしまうのでしょうか？ それはそれぞれ一長一短のため好みが分かれてしまうか
jQueryで動的に作った文字列の幅を取得してみる | SRIA BLOG – 宮城県仙台市のWEBシステム開発・スマホアプリ開発
こんにちは！先日健康診断で脂肪肝と診断された橋浦です！ 先日Web案件で、文字列の幅を取得してwidthに設定したい場面がありました。 しかし、その文字列はjQueryで動的に生成していたため単純なwidth();などでは取得できず…。 結局2通り方法を試して、2つ目の方法でやっと上手くいったのでした。 今回は、せっかくなのでその方法を紹介してみたいと思います。 ① 文字数を数えて、数から判断しちゃう プログラミングに関してチンパンジー並の経験と知識しかない僕が浅知恵を絞って最初に思いついた方法です。 幅は取れないけど、consoleで調べたら文字列の内容は取得できている模様。 なら、文字数を取得して、その数を幅にしちゃえばいいじゃないッ！！！！！ ということで書いたソースがこちら。 DEMO
jQueryでparseInt()を使ってCSSプロパティの値を取得する｜BLACKFLAG
以前ここで「jQueryでCSSプロパティの値を取得する方法」と題して jQueryでCSSプロパティの値を取得する方法を紹介しましたが、 「parseInt()」を使って同様にCSSプロパティ値を取得する方法も 結構必要になったりすることがあるので、メモ書きとして紹介してみます。 前回のサンプルと同じ内容でのサンプルで動作させてみると。。。 ＜div id=”box”＞とID名が付けられたボックス要素に CSSで幅「width」と高さ「height」を指定。 変数「boxWidth」「boxHeight」にそれぞれ値を入れた後、 アラートで値を表示するサンプルの場合。 ◆HTML <div id="box"></div><!--/#box--> ◆CSS #box { width: 300px; height: 100px; } ◆SCRIPT <script type="text/ja
[JavaScript]textareaを1行づつ処理する
splitByLine = function() { var text = document.getElementById('srcTextArea').value.replace(/\r\n|\r/g, "\n"); var lines = text.split( '\n' ); var outArray = new Array(); for ( var i = 0; i < lines.length; i++ ) { // 空行は無視する if ( lines[i] == '' ) { continue; } outArray.push( lines[i] ); } return outArray; } textarea内の改行文字は,クライアント側のOSによってCR,LF,CR+LFの場合があります。 この為、1行目で正規化(全て\nに統一)させています。その後、正規化後の文字列に対
![[JavaScript]textareaを1行づつ処理する](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
【jQuery】テキストをシャッフルさせるエフェクトを加えるプラグイン［chaffle］を紹介します。
【jQuery】テキストをシャッフルさせるエフェクトを加えるプラグイン［chaffle］を紹介します。 今日紹介する［chaffle］は超簡単に実装できるjQueryプラグインで、テキストにマウスカーソルを当てると、文字をランダムにシャッフルして表示させることができます。 言葉の説明では難しいので、まずはサンプルをご覧ください。 ［chaffle］の実装サンプル：https://on-ze.com/demo/jquery-chaffle/ お試しいただいたように、英語・漢字・ひらがな・カタカナに対応。それぞれの文字をシャッフルさせています。 導入方法は超簡単なのでjQuery初心者にもオススメです。 まずは以下の公式サイトより必要なファイルをダウンロードしてきましょう。 chaffle：公式サイト いくつかのファイルが一緒にダウンロードされますが、必要なのは「jquery.chaffle.
JSLintとJSHintとhoisting - くろまほうさいきょうでんせつ
↓こんな記事を発見。(私がJSLintをフォークしてJSHintを作った理由) http://anton.kovalyov.net/2011/02/20/why-i-forked-jslint-to-jshint/ ここで話題になってるJSLintを作った人が、今読んでるJavaScript:Good Partsの著者らしいのでちょっと興味が沸いて読んでみた。 JSLint でのチェックができない！ よくあるコードだと思うんですが↓のようなコードをJSLintすると var myfunc = function() { for ( var i = 0; i < 3; i++ ) { /* something */ } }; ↓こんなふうに言われてそれ以降のチェックが行われない。 Error: Problem at line 2 character 11: Move 'var' declara
戻り値で関数から値を返すreturnを今一度勉強しなおしてみた
JavaScriptとかjQueryとか使っていろいろしてきていたんですが、今一度ちゃんと基礎を勉強＆復習しておかないとやばそう。覚えていないこととか多々あるので、基礎から勉強しなおしてみることにしました。 まずは「return」について。戻り値とか値を返すとかはわかるのですが、どう使うの？使いどころは？どうなるの？いろいろやってみた。 とりあえず、Firebugを使って色々入力してみることにします。 return; //SyntaxError いきなりreturnだけしてもエラーだよということですね。何かに値とか返すよ～って時に使うものとのこと。 それならってことで、関数の中に入れてみた。 function test(){ return; }; test(); //undefined でも、returnだけしても、何も返すものがないので、undefined。 じゃあ、trueってのをいれ
エフェクト操作：基本｜jQuery APIリファレンス｜Ajax｜PHP & JavaScript Room
マッチした要素をアニメーションしながら表示します。 オプションの第2引数callbackを指定した場合は、要素のアニメーション完了時に指定したコールバック関数を実行します。 マッチした各要素の高さ・幅・透明度は、指定した速度にしたがって動的に変更されます。 jQuery v1.3からは、paddingとmarginがより滑らかにアニメーションされるようになりました。 第1引数speedには、要素を表示時のアニメーション速度を指定します。 数値（ミリ秒）あるいは文字列を指定可能です。 数値の場合、例えば3秒なら「3000」を指定します。 文字列の場合、あらかじめ定義されている速度（「slow」（ゆっくり）、「normal」(通常）、「fast」（速く））のいずれかを指定します。 オプションの第2引数callbackには、アニメーションが完了した時に実行する関数を指定します。 関数が実行される
jQuery の animate の縦方向の出現や隠す動作
jQuery の animate の縦方向の出現や隠す動作は、height に、show、hide、toggle などを指定することで可能。 指定方法 animate( properties, [duration], [easing], [complete] ) メソッド、もしくは、animate( properties, options ) メソッドの1つ目の引数である properties 内の height: *** に指定する。 toggle toggle を指定。 赤いブロック部分を、クリックすると、グレーのブロック部分が、上方向へ動きながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、下方向へ動きながら出現。速度( duration )は、slow を指定してある。
JSCompress - The JavaScript Compression Tool
About JSCompress JSCompress is an online JavaScript compressor that allows you to compress and minify all of your JS files by up to 80% of their original size. Copy and paste your code or you can upload and combine multiple files and then compress. We use UglifyJS 3 and babel-minify for all JavaScript minification and compression. Why You Should Compress JavaScript There are a number of reasons wh
HTML minifier
Case-sensitive Treat attributes in case sensitive manner (useful for custom HTML tags) Collapse boolean attributes Omit attribute values from boolean attributes Collapse inline tag whitespace Don't leave any spaces between display:inline; elements when collapsing. Must be used in conjunction with collapseWhitespace=true Collapse whitespace Collapse white space that contributes to text nodes in a d
Compress javascript and css. Amazing code compression. Quick,easy and free!
Compress javascript or css code and reduce their size and improve page load times. Quick,easy and free!Best way to compress javascript and css Make your code faster for freeVersion 0.5.7
【JavaScript】onmouse属性を使った簡単なロールオーバーの作り方。 - 株式会社オンズ
JavaScriptを使った初歩的なテクニック。マウスオーバーした際に画像を切り替える方法を紹介します。 使用するのはJavaScriptの［on mouse］属性です。 今回は［onmouseover］と［onmouseout］を使い、それぞれ、画像にマウスカーソルが乗ったとき（マウスオーバー）と画像からポインタが離れたとき（マウスアウト）の動作を指定していきます。 具体的な例としてサンプルのコードを書いてみましょう。 <a href="https://on-ze.com"> <img src="images/sample-01.png" onmouseover="this.src='images/sample-02.png'" onmouseout="this.src='images/sample-01.png'" /> </a> コードの中の［this］は、「イベントが発生した場所」
2013 UnmatchedStyle CSSOff
Submissions are closed Thank you to everyone who took part in this year's CSSOff! Stay tuned as we work through all the grading.
iPhoneやiPadでドラッグやリサイズ可能なコンテンツを容易に実装出来る・jQuery.ui.touch-punch.js - かちびと.net
iPhoneやiPadのタッチイベントに 対応させるjQueryプラグインです。 軽量なんですが、jQueryUI併用な ので一応軽量とは謳わないように しておきます。導入も結構簡単 なので覚えておいて損は無いかも。 iPhoneやiPadでドラッグやリサイズを可能にするライブラリです。もちろんiPhoneだけでなく、PC側でも動かせます。 ただ、要素をドラッグしたりリサイズしたり、だけではなくドラッグ可能なコンテンツをネストしたりドラッグコンテンツ内にスライダー入れたりとかも出来る。 試しにjQueryMobileと併用しました。サンプルどうぞ。QRコードも用意しときました。 sample 使い方 <script src="http://code.jquery.com/jquery-1.7.0.min.js"></script> <script src="http://code.jque
集え変態プログラマ！JavaScriptの最短コードに挑んだコードゴルフ大会 in Code 2013 | DX.univ
8月3日〜4日に開催されたプログラマのためのお祭り的イベント集え変態プログラマ！JavaScriptの最短コードに挑んだコードゴルフ大会 in Code 2013 by Yoshiaki Sato in Tech — 2013/08/06 フロントエンド担当のヨシアキです。 8月3日〜4日に開催された"Code 2013"に参加してJavaScriptのコードゴルフの問題を出題してきましたので、そのレポートを兼ねて、JavaScriptのショートコーディングについて語ってみようと思います。 Codeとは プラットフォーム・言語・コミュニティの壁を超えてプログラマが達が集う、プログラマのためのお祭り的イベントです。 開催地はこれまでのところ、温泉郷で有名な札幌の定山渓で開催されています。 そのため、ゆったりと温泉に浸かりながらプログラミングについて語り、美味しいお料理とお酒に舌鼓を打ちなが
HTML.jsについて | ykzts.blog
HTML.jsというJavaScriptで楽にDOM操作を行えるようにするライブラリーがあります。結論から申しますと、このライブラリーは絶対に使うべきではないライブラリーとなっています。 この記事は執筆時点の最新バージョンであるHTML.js 0.9.3を元にして書いており、今後なんらかの変更がHTML.jsに加えられることによって、次に書く内容は陳腐化してしまう可能性はないわけではありません。ですが、ひとまづこの記事を執筆している時点では使うにあたって不都合ばかりが多く発生してしまう非常に邪悪なライブラリーです。 HTML.jsはMutationObserverを使えるウェブブラウザーではMutationObserverを用いて、MutationObserverが使えない環境ではDOMSubtreeModifiedイベントを用いてHTML文書の変更を検知しています。そしてHTML文書に変
log · console.log with style · Adam Schwartz
log console.log with style Github Console Sources topDefault levels log.js:19 Bold & italics log.js:19 this is italic and this is bold. log.js:19 Inline code log.js:19 this is code: a == b == c log.js:19 Color log.js:19 this is red. this is green. log.js:19 Learn more log.js:19 https://github.com/adamschwartz/log
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Very-Very Simple LetteringJS - JSFiddle - Code Playground