JavaScript
取り急ぎメモ用として。JavaScript 寺子屋 1 / アローファンクションの使い方 全くの初心者には向かないと思うが、まあまあJavaScript書いてきたけど、最近同じようなコードしか書いてないなー とか JavaScriptむずい。。もっと書けるようになりたい。。。 …
前回の記事でタスクランナーのススメを書いたが、少しアップデートしたので紹介する。前回のタスクランナーの記事 hiromode.hatenablog.com 内容としては ・PUG削除 ・HTMLのパラメータ付与の上出力 を追加した。 理由はPUGの書き方を習得するのが面倒だし、…
言葉だと全く伝わらないと思うが、要するにこういうことがしたい。「初期バー、マウスオンでアンダーライン伸ばし、マウスを離したら消えて初期のバーに戻る」とりあえず結論からSee the Pen XBVLbY by HiroyasuMurayama (@h-murayama-the-reactor) on CodeP…
Web制作では様々な仕事があり、毎回やるのが面倒だから自動化できるところは自動化して楽しちゃいましょうっていう話。ざっくり説明すると下記3つを使う。 Gulp.js(タスクランナー) ・Sass→CSS変換 ・CSS,JS,画像圧縮 などをJSで作成して自動化させる。 Sa…
タイトルがわけわからんと思うが、想定しているのはよくあるフォームの最後にある同意ボタン。こういうの ただの同意ボタンならlabel内にinputタグ書けば文字まで全部クリッカブルになるのでそれでおしまい。けど今回はそうじゃなくて画像のようにチェックボ…
はじめに、この記事はCodezineを見ながら手を動かして、一部自分のメモなどもしたかったので加筆修正したものなのでリンクしてきます。 Reactの概要と基礎技術要素を理解する (1/3):CodeZine(コードジン)古い記事だと記法や手順が違ったりして面倒なこと…
PHP、SSIなどが使えない、もしくはデータ納品だから先方で使えるかわからない場合に使える。 html 任意の箇所に埋める <script type="text/javascript"> writeHeader(); </script> <script type="text/javascript"> writeFooter(); </script> JavaScript //共通ヘッダーフッター読み込み function writeHeader(){ $.ajax({ url:"/inc/header.ht…
スライドの中でVideoタグを自動で再生させたいことがあった。 適当に入れただけだとautoplayとか入れても動かないので調べてみたら そのままでは動かないらしい。結論 bxSliderはコールバック関数が豊富に用意されているので、 その中のonSliderLoadを使えば…
今回のChapter1の概要と達成できること 優れたプログラムのための機能について理解する。 すなわち ・プロトタイプ ・クロージャ ・オブザーバー ・this を理解し、最終的にはリアルタイムバリデーションを実装するところまで本記事にてまとめた。 オブジェ…
なんだか急に難しくなった気がするw 多分基本をちゃんと理解していないからだと思うのでここはすっとメモしてまたChapter1から整理してみます。 テンプレートエンジンとは テンプレートとデータを合体させて文字列を作る仕組みのこと。 いろんなライブラリ…
Underscore.jsとは 配列を扱う上で役立つライブラリ。 JavaScriptは多言語に比べて配列操作に弱いので補完してくれる。 プロトタイプ汚染もなく、map,filter,invoke,bindAllなど便利な関数が100以上用意されている。 mapメソッド 引数として与えられた関数を…
1〜2は前に読んだので省略。 3はCanvasだからすぐには使わない。 ということでChapter4からスタートです。このChapterでの目的は非同期通信処理でデータを取得、 ソート及びフィルタ機能をつけてHTMLに表示するサンプルプログラムを作ること。 データ操作の3…
index.html#sec1とかにしておいたら 押したら通常はページのsec1のIDのところにいくが、そこがアコーディオンだったりタブだったりした場合、 それを押させるんじゃなくてJavaScriptで押させるということがしたい。 そんなときのTips <script> $(function(){ // URL…
汎用的なAjax実装 $.ajaxメソッド <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $( function (){ $('#btnsend').click( //通信開始時にメッセージ表示 $('#result').html('通信中.....'); //Ajax通信開始 $.ajax({ url:'yahooJson.php', type:'GET', dataType:'json', //フォーム内容ハッシュ変換 data…
ここからはブラウザ環境以外では利用できないため注意。 イベントが発生したら処理を行うーイベントドリブンモデルー クライアントサイドJavaScriptとイベントドリブンモデルを理解する イベントドリブンモデルとは ブラウザ上でページ読み込み完了、テキス…
JavaScriptにおけるオブジェクト指向の特徴 クラスではなくプロトタイプ 他言語と違ってインスタンスの概念はあるものの、クラスがなくてプロトタイプという雛形の概念だけがある。 プロトタイプとは要するに「より縛りの弱いクラスのようなもの」と思って差…
3-1 オブジェクトとは 「モノ」である。例 Memberオブジェクト [name]山田 [sex]男 [birth]2007/6/25 [address]千葉県JSの構文的には連想配列とオブジェクトは同じであり、名前付きの配列であるが、 言葉の意味としては別のもの。 オブジェクト= プロパティ…
配列内の要素を順に処理する オブジェクトの作り方 var book = new Object(); book.title = 'javascript 本格入門'; book.publish = '技術評論社'; book.price = '3000';for(var k in book){ document.writeln(k + 'は' + book[k]); } 結果titleはjavascript…
要所のみ。 JSでimgタグの数を拾ってきて、一つずつ読み込む。 読み込んだらそれをProgressBarのWidthとして吐き出していく。ProgressBarのCSSは適当に色をつけておけば、画像をすべて読み込み終わった時点でLoadingが消える。 HTML <div id="loading"> <div class="logo"> <img src="img/loading.png"> <div class="bar"> <span></span> </div> </div> </div> JavaScript /* *…
Webサイトやアプリなどへ複数人によるリアルタイムコラボレーション機能 Mozilla Labs : TogetherJS グリッドレイアウトを究極にカスタマイズできるライブラリ Muuri - Responsive, sortable, filterable and draggable grid layouts 参考 面倒な作業不要で…
今更ながら便利なbxsliderのこと。さんざん使ってきたが、割と簡単且つ有用且つ良く使うんじゃなかろうかと思うのでメモ。 やりたいこと サムネイル(今いる位置以外のはグレースケール) ■ □ □メインスライド(前後微妙に見えてる。今いる位置以外のはグレ…
やりたい事は、ボタンを押したら初めて音楽流れ始めてループ再生させるだけ。PCではうまくいくがスマホだとほとんどダメだった。 とりあえず下記だと上手くいった。 時間無いので下記コピペ。JS // オブジェクトを生成 var url = "./music.mp3"; var audio =…
普通にanimateとかならcompleteとかを使うけど、 動きではない場合とかでも使える。これやらないと下記のようなコードだとスクロールトップに行くと同時にrelativeになったりして、 上手く表示される場合とそうでない場合がある。 $.when( $('#mamaGroup').c…
何かいろいろとやり方はあるだろうけど、こんな感じにかけばGAとかの解析でもリファラ―拾ってくれるみたいなのでこれでいいんじゃなかろうか。詳細はググってください。 結論、下記の●●を変えるだけ。 <script> $(function(){ //現在時刻を取得 var date_obj = new D…
ソース的に分かるかと。 CSS省略するけど、body初期値をopacity:0にしておくくらい。 JS function Animation() { "use strict"; this.initialize(); } Animation.prototype.initialize = function() { this.$window = $(window); this.$document = $(documen…
おそらくは になっていない。これがないとブラウザにしっかりとhtml5であるということをお知らせ出来ないので変な挙動になるらしい。ちなみに自分はeachで順番にスクロールに合わせて文字が出てくるだけという簡単なスクリプトにおいて、 ちょっとスクロール…
とりあえず長方形を描くのはこんなん。htmlは JS //要素の取得 var canvas = document.getElementById( "canvas" ); //canvas要素から描画コンテキスト取得 var ctx = canvas.getContext( "2d" ); //パス初期化 ctx.beginPath(); //rect(x,y,横、高さ) 長方…
コンストラクタ関数、プロトタイプの考え方で書いたやつ。HTMLではリンクにdata属性で番号を付与、画像を押して拡大した画像が次へボタンとかでちゃんと移動できる。 ウィンドウのロード、リサイズ時も対応済み。ただしあくまで静的なHTMLにのみ対応してる。…
例 html <a href----------><img src -------></a> ■まるごととってくる JS var $target = $(e.currentTarget); 結果 <a href----------><img src -------></a> ■中身をとってくる JS var $target = $(e.target); 結果 <img src ------->
コードを見れば理解できるかと。 要は継承できるってこと。 よくわからん人は前の記事を先に参照して。 hiromode.hatenablog.com 本題というかコード。 var Animal = function(){};//コンストラクタ Animal.prototype = { walk:function(){ document.writeln…