未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく - Qiita
エンジニア不足と言われて久しいですが、できる経験者を採用するのはますます難しくなっていますね。 そんななか、弊社ではひょんな縁からエンジニア未経験の新人をエンジニアとして採用することになりました。未経験とはいえ、弱小企業の弊社には悠長に育てている余裕がないため、7日間で現場投入を目指してカリキュラムを組みました。 だいたいうまくいったので、メモがわりに晒しておきます。 前提条件 誰でも7日間でエンジニアになれると言っているわけではありません。あくまで一例として捉えていただければ幸いです。 担当してもらう予定の領域 HTML/CSS コーディング JavaScript はそこそこで（動きのエフェクトやカルーセルを仕込める程度） concrete5 テーマの開発（PHPファイルに foreach を入れていくイメージ、WordPress と変わらない） 流石にアプリケーション開発で7日間は無理
Rails 5.x標準で Ajax+(jQuery+Partial) でHTML部分更新する世界一シンプルなサンプル - Qiita
2019/12/03追記 Rails 6.0.x 版を書きました ↓ Rails 6.0.x標準で Ajax+(jQuery+Partial) でHTML部分更新する世界一シンプルなサンプル TL;DR (長い3行で) Ajaxの勉強をするにあたり，Rails上でAjaxするためのサンプルを探していたのですが，Rails 5.xがもともとテンプレとして持っている.html.erbや.coffeeではなく，.html.hamlや.js.erbを使ったものもあり，ヨコ道知識を調べながらになってしまったので，できる限りrails newした状態からの差分が少ない，世界一シンプルなサンプルコードを目指してまとめてみました． ざっくりシーケンス だいたい ↓ のようなシーケンスを実現します． Client-Server間でSession張って双方向通信とかそういうところはRails Framewor
TM Life - HTML5 File API を使ってファイル読み込み
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. HTML5 で追加された File API. これを使えば ローカルファイルの情報, 中身を取得して JavaScript でいじることができます. 今後, HTML5 の普及とクラウド化が進むにつれて重要な機能になることは間違いありません. サンプルを作ってみたのでよかったらぜひ. ドラッグ & ドロップにも対応しているよん♪♪ Chrome でローカル上で作業する場合, セキュリティ上ドラッグ & ドロップに反応しない場合があります. その場合, Chromeの起動オプションに –allow-file-access-from-files を指定することで読み込めるようになります. SAMPLE And D
Google Chromeのデベロッパーツールで使えるショートカットキー - 448.jp blog
Google Chromeには、Web開発者向けにデベロッパーツールという機能が付属していまして、まぁ簡単に言うとFirebugのChrome版的な。総合的な機能や使い勝手は、Firebugの方がいいかなーって感じなんですが、最近メインブラウザをChromeにしてるのでいちいちDOM見たりするのにFirefoxを起動するのも面倒くさい。 ちゅーわけで、デベロッパーツールをばんばん使っていくために、ショートカットキーを調べたのでポストします。 まず、デベロッパーツールを開くだけなら「F12」。実はFirebugと同じショートカットキーで動くんですねー。もしくは「Ctrl + Shift + I」でもOKです（MacはControl + Option + I）。もちろん再度「F12」を押すことで表示／非表示を繰り返すトグル動作になります。 続いて、拙者が一番使うDOMインスペクタモード（HTM
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita
はじめに Javascript開発でよく使ってるデバッグ方法についての個人的なまとめです。 当たり前の事ばかりですが、これからJavascript開発をやる方や興味がある方に少しでもお役に立てればと思います。 デバッグの鉄板 console.log Javascriptの開発でconsole.logを使わない人を探すほうが難しいくらいだと思います。
忘れっぽい人のためのjQueryでよく使う関数逆引き - Qiita
はじめに 自分の忘備録としてまとめました。 サンプルは全てこのページ上で試せます（2014/03現在）。 ※セレクタについては言及していません。 初心者向け情報 javaScriptのちょっとした動作確認はブラウザの開発者ツールを使う 結果を表示したいときはalert();じゃなくてconsole.log();が便利！ 画面上の値を取得する 画面上の値を取得します。 次の例ではこのページのタイトルを取得しています。
要素のプロパティを取得／設定するには？（prop）
任意の要素に対してJavaScriptのプロパティを設定／取得する方法を解説。また、要素の属性を設定／取得できるattrメソッドと機能を比較する。 ← 前回 連載 INDEX 次回 → propメソッドは、要素のプロパティを取得／設定します。attrメソッドと似ていますが、 1属性値とJavaScriptのプロパティとで値が異なるもの、 もしくは、 2そもそも（属性名に対応しない）JavaScriptのプロパティにしかない情報 を取得する際に利用します。 具体的には、 1はselected／checked／disabled／multipleなどの属性のこと、 2はtagName／nodeName／nodeTypeのようなJavaScriptプロパティのことです。 以下は、prop／attrメソッドを利用して、さまざまな属性／プロパティにアクセスする例です。
要素の属性を操作するには？（attr／removeAttr）
任意の要素の、任意の属性に対して値を設定／取得する方法を解説。また、複数の属性をまとめて設定する方法も説明する。
jQuery リファレンス：[ 属性名 = '値' ]
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
![jQuery リファレンス：[ 属性名 = '値' ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/786d7966b46d8ffbd13e84a6b12752a8872c4eeb/height=288;version=1;width=512/http%3A%2F%2Fwww.jquerystudy.info%2Fimages%2FforFaceBook.gif)
[jQuery] find()とchildren()の使い分け | きほんのき
jQueryのメソッドfind()とchildren()は、ともに指定した要素が持つ子要素を取得するためのものですが、children()が直下の要素だけを取得するのに対し、find()は全ての子要素を探索するという違いがあります。両者の違いと使い方についてまとめました。 //html example <div> <dl> <dt>カテゴリー</dt> <dd><a href="./foo.html">foo</a></dd> <dd><a href="./bar.html">bar</a></dd> <dd><a href="./hoge.html">hoge</a></dd> </dl> </div> find()は強力な検索機能を持っています。例えば上のhtmlのdivの中から、一番最後のリンク先を取得したい場合、このようなコードで可能になります。 var a = $("div").
jQuery . ajax( settings ) で、html形式のデータを読み込み表示
jQuery の jQuery . ajax( settings ) メソッドを使った Ajax リクエストで、html形式のデータを読み込み、表示する方法。 実装例（サンプル） 実装例（サンプル）の動作について 「toggle」ボタンをクリックすると、「jquery-sample-ajax-html.html」ファイルを読み込み、黄色のボックス要素内に表示する。「toggle」ボタンを、再度クリックすると、元に戻す。 実装例（サンプル）のソースコード JavaScript <script> <!-- jQuery( function() { jQuery( '#jquery-sample-button' ) . toggle( function() { jQuery . ajax( { url: 'jquery-sample-ajax-html.html', success: funct
jQuery.ajax()で取得したHTMLの一部を抜き出す方法
jQuery.ajax()で取得したHTMLの一部を抜き出す方法を紹介します。 １．問題点 次のように、ajax()メソッドで取得したHTMLを丸ごと埋め込むサンプルはネットで多くみかけます。 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $.ajax({ url: 'http://user-domain/foo.html', dataType: 'html', }) .done(function(data) { $("#bar").html(data); }) .fail(function(data) { // ... }); </script> <div id="bar"></div> が、取得したHTMLの一部だけを抜き出して利用したい場合、どのように記述す
jQuery の .load() で HTML ファイルを読み込む
環境：jQuery 1.10 jQuery の .load() メソッドを使って HTML ファイルを読み込み、 現在表示中のページ内に挿入することができます。 予め複数パターンの HTML を準備しておき、 条件分岐によって、表示内容を切り替えるといった場合に使用可能です。 APIドキュメントはこちら .load() - jQuery サンプルを作成したのでご覧ください。 サンプルページ - okanoworld index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery load() sample</title> </head> <body> <h1>ここに外部 HTML ファイルを表示します</h1> <div id="page"></div> <script src="http://aj
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryのセレクタメモ - Qiita