フィルタリング

フィルタリング特定の要素のみまたは組み合わせで、該当するもののみを表示します MixItUp プラグインをダウンロードフィルタリング機能を実装追い込みのアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>MixItUp</title> <link rel="stylesheet" href="style.css"> <script src="jquery-2.2.4.min.js"></script> <script src="jquery.mixitup.min.js"></link></meta></head></html>

2016-08-25

メガドロップダウン

メガドロップダウン手順 HTMLの文章構造を構築 CSSを記述 hover時の設定を記述メガドロップダウンメニュー WORKS PRODUCT RECRUIT BLOG CONTACT WORKS DESIGN・HTML/CSS・SYSTEM 制作について紹介します。 DESIGN ＞コンセプトワーク＞受賞リスト＞実績…

2016-08-20

アコーディオンパネル

アコーディオンパネル <html lang="ja"> <head> <meta charset="UTF-8"> <title>アコーディオンパネル</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> body, div, dl, dt, dd { margin: 0; padding: 0; } #wrapMenu { width: 500px; margin: 50px auto; } .question { padding: 10px; f…</meta></head></html>

2016-08-11

セレクタの使い方

最低限、使うものだけ覚えるすべてを覚えようとしないこと JavaScriptの読み込み順序 HTMLをすべて読み込み後に、jQueryの処理を実行する <script> $(document).ready(function(){ //この中に処理を記述 }); </script> この記述であれば、bodyの終了タグの前でも、script内で…

2016-08-10

セレクタ

セレクタとは名前、属性、状態などによりドキュメント内の要素を選択する役割セレクタの書き方先頭に「$」を記述「$」は、jQueryオブジェクトのインスタンス $( '要素' ) セレクタを使用するときの注意点セレクタを使用する場合は、jQueryへのアクセス…

2016-08-09

jQueryの基本

よく使うJavaScriptを簡単に使えるようにしたもの JavaScriptのライブラリのひとつ HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる要素に対してアニメーションできる主要なブラウザをサポート（ブラウザ依存を気にしなくてよい）記…

2016-08-08

DOM-実践演習

DOMによる書き換え DOMツリーでは、トップレベル要素は「document」オブジェクトです documentオブジェクトから、button（エレメントノード）をid属性を指定して参照しています <html lang="ja"> <head> <meta charset="UTF-8"> <title>背景色を書き換える</title> <style> body { background-color: #CAE4FF; } button { curso</style></meta></head></html>…

2016-08-07

イベントハンドラの設定

HTMLとJavaScriptの分離いままでの記述では、イベントハンドラはHTML内に記述していました定義とイベントが発生する位置がばらばらでわかりにくくなっています Webページを作成する際は、HTMLとスクリプトは分けて記述することが推奨されていますイベント…

2016-08-06

DocumentオブジェクトによるHTML要素の操作

DOM操作のメソッド HTMLドキュメントの階層構造 DOMを使用すると、HTMLドキュメント内のすべての要素を「html」を頂点とする階層構造でアクセスできますこの階層構造を「DOMツリー」と呼びます DOMツリー内の個々の要素を「ノード」と呼びますノードを取得…

2016-08-05

配列の添字を活用する

曜日を日本語で表示する曜日の文字列は、「days配列」に格納しておきます <script> var days = new Array('日', '月' ,'火', '水', '木', '金', '土'); </script> Dateオブジェクトを作成曜日は、getDayメソッドを利用する1 getDayメソッドの戻り値は「日曜日～土曜日」を「…

2016-08-04

配列はArrayオブジェクト

配列とはリストのこといくつかの情報を番号と一緒に保管するためのもの「配列」とは、添字（そえじ）と呼ばれる番号を用いて、１つの変数名で複数のデータをまとめて管理できるようにしたもの配列 - マンガで分かる JavaScriptプログラミング講座配列は…

2016-08-03

random関数

乱数の発生「random()」は、「0以上１未満の乱数を生成する」メソッド「floor()」は、「小数点以下を切り捨てる」メソッドランダムな「整数」を生成する rnd = Math.floor(Math.random() * MAX + 1); <html lang="ja"> <head> <meta charset="UTF-8"> <title>乱数の発生</title> </head> <body> <h1>乱数の発生</h1> <script> MAX = 10; var num; fo</body></html>…

2016-08-02

Math関数を使った計算

Mathとは Mathとは「数学（Mathematics）」の意味数値演算に便利なメソッドやプロパティが利用できるオブジェクトまえもってインスタンスを生成する必要はありませんスタティックメソッド（インスタンスを生成しないで関数のように使用できる） Math . メ…

2016-07-30

関数の応用

関数の代入と匿名関数関数は、数値や文字列のように変数に入れて扱うことができますこの方法を使うと、条件に応じて異なる関数を変数に設定したり、関数を引数として別の関数に渡したりと、より柔軟に関数を利用できます変数名 = 定義済みの関数名；《関…

2016-07-29

組み込み関数

組み込み関数とは JavaScriptがすでに備えている関数《組み込み関数一覧》関数名説明 parseInt 文字列型の数字列を数値型（整数）に変換する parseFloat 文字列型の数字列を数値型（実数）に変換する isNaN 指定された値がNaNであるかどうか調べる encode…

2016-07-28

変数のスコープ

スコープとは変数には、スコープ（有効範囲）が設定されていますスコープは、その変数がスクリプト中のどこからどこまでの範囲で利用できるかを表します《JavaScriptのスコープ》種類説明対象グローバルスコープスクリプト全体で変数を参照できる・…

2016-07-27

処理をまとめて名前で呼び出す - 関数の定義

関数（function）とは一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます手間のかかる処理を関数として定義しておけば、必要なときに何度も呼び出すことができます関数は「function」キーワードで定義する関数は処理の材料となる「引…

2016-07-26

条件で繰り返しを中断する - break文

break文 for文やwhile文で、指定した回数だけ処理を繰り返す途中で「中断」する switch文でのbreak文は、ブロックの外へ抜けるための構文でした break文をwhile文やfor文のブロック内に記述することで、継続条件式がtrueであっても強制的にブロックの外へ抜…

2016-07-24

配列を操作する

Arrayオブジェクトのメソッド配列は、Arrayオブジェクトのインスタンスです配列をオブジェクトとして扱うと、あらかじめ用意された便利なメソッドを利用できます要素を joinメソッドで連結要素の増減にかかわらず、そのまま連結して表示します <html lang="ja"> <head> <meta charset="UTF-8"> <title>Array</title></meta></head></html>…

2016-07-23

配列の添字を活用する

曜日を日本語で表示する曜日の文字列は、「days配列」に格納しておきます <script> var days = new Array('日', '月' ,'火', '水', '木', '金', '土'); </script> Dateオブジェクトを作成曜日は、getDayメソッドを利用する1 getDayメソッドの戻り値は「日曜日～土曜日」を「…

2016-07-20

DOMでアコーディオンパネル

表示を切り替える <html lang="ja"> <head> <meta charset="UTF-8"> <title>方丈記</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1>方丈記 - 抜粋</h1> <div class="section first"> <h2 id="section1Title">【ゆく河の流れ】</h2> <p id="section1">ゆく河の流れは絶えずして、しかももとの水にあらず。淀みに浮ぶうた…</p></div></div></body></html>

2016-07-18

for文演習課題

演習課題変数を入れてconsoleに表示入力された値を取得して、ブラウザに表示和暦（平成）と西暦の変換表平成１年は、西暦1989年 <html lang="ja"> <head> <meta charset="utf-8"> <title>和暦・西暦の変換表</title> <style> table { width: 200px; margin: 50px auto; border: 1px solid #AAA; border-collapse: collapse;</meta></head></html>…

2016-07-14

指定した回数だけ処理を繰り返す - for文

for文指定した回数だけ処理を繰り返す変数「i」の初期値（「i」は、indexの意）処理を１回実行するたびに、変数「i」の値をどのように変更するか for ( 変数の初期値；繰り返し条件；変数の変更 ) { 実行される処理 } 変数の値を１ずつ増やす演算子「+…

2016-07-13

条件分岐 - switch文

switchとは if文と同様に分岐処理を行います if文を簡略化してよりすっきり記述するための構文ですある変数の中身が一致するかという判断を行います switch（変数） { case 値1: 変数の中身が値1に一致した場合の処理 case 値2: 変数の中身が値2に一致した…

2016-07-12

if文までの授業内サンプル

消費税計算のプログラム <html lang="ja"> <head> <meta charset="utf-8"> <title>消費税計算のプログラム</title> <script> function taxPrice() { //閲覧者の入力の値を取得 var price = prompt( '価格を半角数字で入力して下さい', '' ); //prompt()で習得した値は、文字列になります //文字列は、数値に変換しないと演算には</meta></head></html>…