Subscribed unsubscribe Subscribe Subscribe

アコーディオンに矢印をつける

<dl id="Menu"> <dt>aaa</dt> <dd>bbb</dd> <dt>ccc</dt> <dd>ddd</dd> </dl> active classが付いている時とついていないときで表示を分ける. #Menu dt { display: block; height: 50px; text-align: left; cursor: pointer; font-weight: 300; background-image: url("../images/xxx.png"); background-position: ri…

ZeroClipboardを使ってテキストをクリップボードにコピー

ボタンをタップすることで、テキストをクリップボードへコピーする(スマホ除く ZeroClipboard読み込み HTML JS <script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script> </head> <p>コピーされます</p> <input id="textcp" type="hidden" value="コピーされます"> <div id="btn">Click me</div>

imgLiquidを使い画像をトリミング

imgLiquidを使って画像をトリミングし、マルチデバイスでセンター寄せにする 外部ファイル読み込み <script src='//code.jquery.com/jquery-1.10.2.min.js'></script> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/app.js"></script>

外部APIの整形

(function($){ $(function(){ $('#btn a').click(function(){ // Insert text to #r $('#result').empty().append('Finding matches..'); var endpoint = 'http://api.gnavi.co.jp'; var apiName = 'RestSearchAPI'; var version = '20150630'; // Set searc…

即時関数とfunction式とfunction文

即時関数 無名関数を用いてブロックスコープ(に似ているもの)を作り出す(JavaScriptにはブロックスコープがない)。 関数を定義すると同時に実行、再利用はされない。 再利用はせず、外部の関数や変数にも影響を与えない。 privateやpublicなどのアクセス…

値渡しと参照渡し

値渡し 値そのものを受け渡しすること 値を関数に渡す 関数内で値を上書きしても、呼び出し側(関数外)の変数には影響がない 互いに別物で一方の変更はもう一方へ影響しない

ナビゲーションバーのJSライブラリ

http://formstone.it/components/naver PC表示 SP表示 SP表示

オブジェクトリテラル

オブジェクトリテラルとは、プロパティ名と値のペアのリストであり波括弧で扱われます。 var a = {b: "ccc", d: "eee", f:{g: "hhh", i: "jjj"} }; // 入れ子にも出来ます。 console.log(a.f.g); // fff var k = {l: "mmm", n: "ooo", p:{8: "qqq", r: "sss"…

即時関数

以下は全て同一です。 即時関数の場合、呼び出さなくてもすぐ実行されます。 なので、即時関数でローカル変数を定義して、他人の作成した変数に影響を与えないようにしましょう。 function foo(bar){ console.log(bar); } foo(baz); // 即時関数 (function f…

変数 | 演算子 | for | while

変数の宣言 var value // 変数の宣言 value = "Hello!!"; // 変数への代入 console.log(value); console.logを確認するには、FireFoxでは、開発者ツール > コンソール > ロギングで確認出来ます。 演算子 var x = 5; x % 3; // 2 x ++; // 3 x += 2; // 5 三…

confirm | prompt | 文字コード

confirm ダイアログ表示 var foo = confirm("OK???"); // OKだとtrue キャンセルだとfalse prompt テキストボックス付きダイアログ表示 var foo = prompt("OK???", "うーーん"); // OKだとtrue キャンセルだとnull 第二引数で空欄にテキスト入力 文字化けし…

function 関数

処理を汎用的に使用するために、関数を用います。 function 関数名(引数の変数) { // 関数定義 処理; } 関数名("値"); // 関数呼び出し function comeon(name) { return "comeon" + name; // 返り値 } var foo = comeon("baby"); console.log(foo); // comeo…

setInterval setTimeout

setInterval(関数, 何秒毎か) var foo = 0; function bar() { console.log(foo++); } setInterval(function() { bar(); }, 3000); // 3秒毎に1ずつ増えていく。 var baz = 0; function qux() { console.log(baz++); } setTimeout(function() { console.log(b…

const | 定数 | JavaScript

const 定数 読み取りのみ アルファベット or アンダースコアから開始 全体ではアルファベット、数値、アンダースコアから成るようにします 値を変えることは出来ません const foo = 500; foo = 200; console.log(foo); // 500 function foo() { const bar = …

JavaScript | setTimeout | カウント

setTimeout 一定時間後に一度処理を実行します。 var foo = 0; function bar() { console.log(foo++); // 0のfooを1ずつ加算 var baz = setTimeout(function() { bar(); }, 5000); // 5秒毎 if (foo > 10) { clearTimeout(baz); // 処理を止める } } bar(); …

条件演算子 var foo = (条件)? 正:誤;

bar = 10; var foo = (bar >= 20) ? "A" : "B"; // barが20以上だったらA、以下だったらB console.log(foo); // B OathCher LloydPop¥200provided courtesy of iTunes

delete オブジェクトやプロパティ、配列の要素を削除する

オブジェクトやプロパティ、配列の要素を削除します。 以下は削除出来ません。 varで宣言されたもの 定義済みプロパティ foo = 100; delete foo; console.log(foo); // ReferenceError: foo is not defined var foo = 100; delete foo; console.log(foo); //…

in 配列の数字・プロパティを判定する

inで配列インデックスの何番目にあるかを指定し、true || falseを返します。 配列の中の値は指定出来ません。 プロパティも指定出来ます。 var foo = new Array("a", "b", "c", "d", "e"); bar = 1 in foo; console.log(bar); // true // 定義済みプロパティ…

配列の取得

var foo = ["A", , "C"]; console.log(foo[0]); // A console.log(foo[1]); // undefined console.log(foo[2]); // C [0]:添字 A:値 空白の要素を参照しようとすると、undefinedになります。 以下全て同じで、「1」を返します。 var foo = new Array(0,1,2…

Stringオブジェクト

// 定義済みの定数なので、newを使う // var foo = new String("AAAAAAA"); // Stringオブジェクト foo = "AAAAAAA"; // 文字列リテラル console.log(foo.length + "文字です。"); // 7文字です。 文字列リテラルは、0個以上の文字列を単一引用符か二重引用…

Arrayオブジェクト

length:要素の個数を返します。 var foo = new Array(1, 2, 3); console.log(foo.length); // 3 unshift:要素を先頭に追加する。 push:末尾に追加する。 splice:途中に追加する。 shift:先頭から除去する。 pop:末尾から削除する。 push var foo = new…

プロパティの定義

既存の変数を用いるbazプロパティ var foo = "AAA"; var bar = { baz: AAA }; console.log(bar.baz); // AAA 関数qux(引数"BBB")を呼び出すbazプロパティ function qux(name){ return (name == "BBB")? name:"failed" + name + "."; } var bar = { baz: qux(…

オブジェクトとメソッド

オブジェクトとは、プロパティ名と値のペアをグループ化したものです。 {}で囲みます。 var foo = { artist: "AAA", place: "tokyo" }; // プロパティの値にアクセス console.log(foo["artist"]); // "AAA" console.log(foo.artist); // "AAA" artist:プロ…

Mathオブジェクト

Mathは変数への代入なしで、そのまま利用できます。 ceilメソッド:切り上げ floorメソッド:切り捨て roundメソッド:四捨五入 randomメソッド:ランダム console.log(Math.PI); // 3.141592653589793 console.log(Math.ceil(5.3)); // 6 console.log(Math.…

Dateオブジェクト

new Date(year, month, day [, hour, minute, second, millisecond]) monthは0から始まるのに気をつけて下さい。1月は0、12月は11です。 var d = new Date(); console.log(d.getFullYear()); // 2014 console.log(d.getMonth()); // 5 console.log(d.getTime…

DOMを利用する

オブジェクトのプロパティを表示 <script> console.dir(window); </script> windowの高さを表示します。 <script> console.log(window.outerHeight); </script> 指定のページへ遷移 <script> window.location.href = "http://google.co.jp"; </script> document object model(DOM) documentにアクセスするための…

イベント設定

<body> <button id="quux">DDD</button> <script type= "text/javascript" src="myscript.js" charset="utf-8"></script> </body> // ドキュメントからid quuxを取得し、クリックでイベント発生 document.getElementById('quux').addEventListener('click', function() { var baz = document.createElement('p'), // p要素を作成し、bazへ代入 text = document…

iteratorとは #イテレータ

iteratorとは、複数の要素(コレクション)を扱うオブジェクトを繰り返し処理することです。 iteratorオブジェクトを直接利用する必要はなく、普段利用するfor, for eachなどによりオブジェクトのキーや値への繰り返し処理は出来ています。 詳しくは、こちらへ…

JavaScript予約語

今後可能性のあるものも含まれます。 abstract boolean byte break char class const case catch continue default double debugger delete do enum extends export else finally final float for function goto if in instanceof implements import int int…

足し算

parseInt + parseInt <html la="ja"> <head> <meta charset="utf-8"> <title>JS</title> <style> input { width: 50px; } </style> </head> <body> <form name="f"> <input type="text" name="f1">+ <input type="text" name="f2"> <input type="button" name="submit" value="計算" onclick="x()"> </form></body></html>

Uncaught ReferenceError: $ is not defined

Uncaught ReferenceError: $ is not defined <head> <meta charset="utf-8"> <title>JS</title> <script type="text/javascript" src="./jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="./custom.js"></meta></head>

document.write

document.writeは色々な書き方がありますが、何度も繰り返しdocument.writeと書くとその分処理が重くなってしまうので、以下のようにするのがよいかと思います。 document.write( '<p>', 'ありがとう', '</p>' );