チェ・ゲバムラの日記

脱犬の道を目指す男のブログ

JavaScript

【マウスオーバーイベント】CSS+JSで作るアンダーライン→消えて復活する

言葉だと全く伝わらないと思うが、要するにこういうことがしたい。「初期バー、マウスオンでアンダーライン伸ばし、マウスを離したら消えて初期のバーに戻る」とりあえず結論からSee the Pen XBVLbY by HiroyasuMurayama (@h-murayama-the-reactor) on CodeP…

【node.js】Gulp.js+Sass+PugでWEB制作を自動化する

Web制作では様々な仕事があり、毎回やるのが面倒だから自動化できるところは自動化して楽しちゃいましょうっていう話。ざっくり説明すると下記3つを使う。 Gulp.js(タスクランナー) ・Sass→CSS変換 ・CSS,JS,画像圧縮 などをJSで作成して自動化させる。 Sa…

inputタグとlabelタグをつなげて中身のリンクだけはクリック出来るようにする方法

タイトルがわけわからんと思うが、想定しているのはよくあるフォームの最後にある同意ボタン。こういうの ただの同意ボタンならlabel内にinputタグ書けば文字まで全部クリッカブルになるのでそれでおしまい。けど今回はそうじゃなくて画像のようにチェックボ…

【JS】今更ながらReact.js入門として触ってみた

はじめに、この記事はCodezineを見ながら手を動かして、一部自分のメモなどもしたかったので加筆修正したものなのでリンクしてきます。 Reactの概要と基礎技術要素を理解する (1/3):CodeZine(コードジン)古い記事だと記法や手順が違ったりして面倒なこと…

【JS】共通ヘッダー、フッターをjQueryを利用して簡単に実装する

PHP、SSIなどが使えない、もしくはデータ納品だから先方で使えるかわからない場合に使える。 html 任意の箇所に埋める <script type="text/javascript"> writeHeader(); </script> <script type="text/javascript"> writeFooter(); </script> JavaScript //共通ヘッダーフッター読み込み function writeHeader(){ $.ajax({ url:"/inc/header.ht…

【JSライブラリ・bxSlider】videoタグが自動再生されないとき確認すること

スライドの中でVideoタグを自動で再生させたいことがあった。 適当に入れただけだとautoplayとか入れても動かないので調べてみたら そのままでは動かないらしい。結論 bxSliderはコールバック関数が豊富に用意されているので、 その中のonSliderLoadを使えば…

【JS】オブジェクト指向〜Chapter1 ブレイクスルーJavaScript フロントエンジニアとして越えるべき5つの壁〜

今回のChapter1の概要と達成できること 優れたプログラムのための機能について理解する。 すなわち ・プロトタイプ ・クロージャ ・オブザーバー ・this を理解し、最終的にはリアルタイムバリデーションを実装するところまで本記事にてまとめた。 オブジェ…

【JS】vol. 3/3 データ表示(テンプレートエンジン)〜Chapter4 ブレイクスルーJavaScript フロントエンジニアとして越えるべき5つの壁〜

なんだか急に難しくなった気がするw 多分基本をちゃんと理解していないからだと思うのでここはすっとメモしてまたChapter1から整理してみます。 テンプレートエンジンとは テンプレートとデータを合体させて文字列を作る仕組みのこと。 いろんなライブラリ…

【JS】vol. 2/3 データ検索(Underscore.jsライブラリの便利なメソッド)〜Chapter4 ブレイクスルーJavaScript フロントエンジニアとして越えるべき5つの壁〜

Underscore.jsとは 配列を扱う上で役立つライブラリ。 JavaScriptは多言語に比べて配列操作に弱いので補完してくれる。 プロトタイプ汚染もなく、map,filter,invoke,bindAllなど便利な関数が100以上用意されている。 mapメソッド 引数として与えられた関数を…

【JS】vol. 1/3 データ取得(Deferredを使った非同期通信)〜Chapter4 ブレイクスルーJavaScript フロントエンジニアとして越えるべき5つの壁〜

1〜2は前に読んだので省略。 3はCanvasだからすぐには使わない。 ということでChapter4からスタートです。このChapterでの目的は非同期通信処理でデータを取得、 ソート及びフィルタ機能をつけてHTMLに表示するサンプルプログラムを作ること。 データ操作の3…

【JS】ハッシュタグつきのURLでアクセスしたらページの特定の場所に飛ばす

index.html#sec1とかにしておいたら 押したら通常はページのsec1のIDのところにいくが、そこがアコーディオンだったりタブだったりした場合、 それを押させるんじゃなくてJavaScriptで押させるということがしたい。 そんなときのTips <script> $(function(){ // URL…

【JS】jQueryでAjaxを実装〜JavaScript本格入門 Chapter9〜

汎用的な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…

【JS】ブラウザを自在に操る(ブラウザオブジェクト)〜JavaScript本格入門 Chapter6〜

ここからはブラウザ環境以外では利用できないため注意。 イベントが発生したら処理を行うーイベントドリブンモデルー クライアントサイドJavaScriptとイベントドリブンモデルを理解する イベントドリブンモデルとは ブラウザ上でページ読み込み完了、テキス…

【JS】大規模開発でも通用する書き方を身につけるオブジェクト指向構文(prototype,クラスライクな継承)〜JavaScript本格入門 Chapter5〜

JavaScriptにおけるオブジェクト指向の特徴 クラスではなくプロトタイプ 他言語と違ってインスタンスの概念はあるものの、クラスがなくてプロトタイプという雛形の概念だけがある。 プロトタイプとは要するに「より縛りの弱いクラスのようなもの」と思って差…

【JS】基本データを操作する〜組み込みオブジェクト〜JavaScript本格入門 Chapter3〜

3-1 オブジェクトとは 「モノ」である。例 Memberオブジェクト [name]山田 [sex]男 [birth]2007/6/25 [address]千葉県JSの構文的には連想配列とオブジェクトは同じであり、名前付きの配列であるが、 言葉の意味としては別のもの。 オブジェクト= プロパティ…

【JS】基本的な書き方を身につける〜JavaScript本格入門 Chapter2〜

配列内の要素を順に処理する オブジェクトの作り方 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】jQueryを使って簡単にLoading画面をつくる

要所のみ。 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 /* *…

【JS】いつか使えそうなJavaScriptライブラリのメモ(随時更新予定)

Webサイトやアプリなどへ複数人によるリアルタイムコラボレーション機能 Mozilla Labs : TogetherJS グリッドレイアウトを究極にカスタマイズできるライブラリ Muuri - Responsive, sortable, filterable and draggable grid layouts 参考 面倒な作業不要で…

【JSライブラリ】bxsliderでサムネイル連動して前後スライドが見えて、現在スライドだけ色を変える

今更ながら便利なbxsliderのこと。さんざん使ってきたが、割と簡単且つ有用且つ良く使うんじゃなかろうかと思うのでメモ。 やりたいこと サムネイル(今いる位置以外のはグレースケール) ■ □ □メインスライド(前後微妙に見えてる。今いる位置以外のはグレ…

【JS】Audio要素をスマホでも上手く再生する方法

やりたい事は、ボタンを押したら初めて音楽流れ始めてループ再生させるだけ。PCではうまくいくがスマホだとほとんどダメだった。 とりあえず下記だと上手くいった。 時間無いので下記コピペ。JS // オブジェクトを生成 var url = "./music.mp3"; var audio =…

【JS】アニメーション以外でも順番に処理する方法

普通にanimateとかならcompleteとかを使うけど、 動きではない場合とかでも使える。これやらないと下記のようなコードだとスクロールトップに行くと同時にrelativeになったりして、 上手く表示される場合とそうでない場合がある。 $.when( $('#mamaGroup').c…

【JS】ローカル時刻によってリダイレクトさせる(リファラ―付)

何かいろいろとやり方はあるだろうけど、こんな感じにかけばGAとかの解析でもリファラ―拾ってくれるみたいなのでこれでいいんじゃなかろうか。詳細はググってください。 結論、下記の●●を変えるだけ。 <script> $(function(){ //現在時刻を取得 var date_obj = new D…

【JS】良く使うJSメモ(全体をふわっと表示してその間はスクロール禁止、ワンホイールでスルスルスクロール)

ソース的に分かるかと。 CSS省略するけど、body初期値をopacity:0にしておくくらい。 JS function Animation() { "use strict"; this.initialize(); } Animation.prototype.initialize = function() { this.$window = $(window); this.$document = $(documen…

【JS】スクロールイベントの挙動、each functionが上手く動作しないときに確認すること

おそらくは になっていない。これがないとブラウザにしっかりとhtml5であるということをお知らせ出来ないので変な挙動になるらしい。ちなみに自分はeachで順番にスクロールに合わせて文字が出てくるだけという簡単なスクリプトにおいて、 ちょっとスクロール…

【JS】はじめてのcanvas入門

とりあえず長方形を描くのはこんなん。htmlは JS //要素の取得 var canvas = document.getElementById( "canvas" ); //canvas要素から描画コンテキスト取得 var ctx = canvas.getContext( "2d" ); //パス初期化 ctx.beginPath(); //rect(x,y,横、高さ) 長方…

【JS】モーダルウィンドウをモダンに書く勉強

コンストラクタ関数、プロトタイプの考え方で書いたやつ。HTMLではリンクにdata属性で番号を付与、画像を押して拡大した画像が次へボタンとかでちゃんと移動できる。 ウィンドウのロード、リサイズ時も対応済み。ただしあくまで静的なHTMLにのみ対応してる。…

【JS】クリックしたら対象のhtmlタグをそのまま拾ってくるやり方

例 html <a href----------><img src -------></a> ■まるごととってくる JS var $target = $(e.currentTarget); 結果 <a href----------><img src -------></a> ■中身をとってくる JS var $target = $(e.target); 結果 <img src ------->

【JS】インスタンスの継承-プロトタイプチェーン-

コードを見れば理解できるかと。 要は継承できるってこと。 よくわからん人は前の記事を先に参照して。 hiromode.hatenablog.com 本題というかコード。 var Animal = function(){};//コンストラクタ Animal.prototype = { walk:function(){ document.writeln…

【JS】javascriptにおけるコンストラクタ(クラス)、プロトタイプ、インスタンス作成の説明

■流れ 1.クラス(コンストラクタ)作成 2.インスタンス化 3.実行 ■コンストラクタについて ・あくまでオブジェクトを作るための準備、つまり初期化が目的なのでコンストラクタからオブジェクトを返してはならない。 ・オブジェクト生成するのを想定し…

【JS】エラーを厳格にチェック

知らんかった。 "use strict"; と、関数内に最初に書くとエラーを厳格にチェック出来るらしいので開発中には入れた方がよさげ。 例 "use strict";var greet = "Hello World."; 参考というか詳細は下記 JavaScriptでの”use strict”宣言によるStrict モードの…