セレクタ・メソッド・イベント - まとめ

jQuery高速化 Webサイトのパフォーマンスを重視するために、古いブラウザでは「1.x系」モダンブラウザでは「2.x系」とインクルードするjQueryファイルを分けて記述します <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 1.…

2015-12-30

thisキーワード

thisキーワード JavaScriptの予約語 thisは、標準の要素オブジェクト jQueryメソッドにアクセスするには、「$()関数」で「this」をラッピングする必要があります「$()関数」を利用することで、標準の要素オブジェクトをjQueryオブジェクトに変換できますそ…

2015-12-29

readyイベント

readyイベントとはイベントの中で最も大事なイベントが、readyイベントになりますこのイベントは、DOMの読み込み完了時に実行されますそのため、jQueryを使用する場合は必ずreadyイベントを設定することになります jQueryの実行パターン $( document ).re…

2015-12-28

イベント

イベントとはユーザーとWebサイトとの間でやりとりを行う処理を「イベント」と呼びますイベントには、「ユーザーイベント」と「ブラウザイベント」の２種類がありますユーザーイベントは、キーボードやマウスを操作することで実行されますブラウザイベン…

2015-12-27

HTML・CSSの操作

HTMLの操作要素内のテキストの設定・変更やHTML要素の設定・変更などテキストの設定要素内のテキストを設定する場合は、text( )メソッドを使用します $(function(){ $( '#txt' ).text( 'テキストが変更されました' ); }); 《テキスト内容を取得する場合》…

2015-12-26

関数とメソッド

jQueryの関数 jQueryは、関数オブジェクトです JavaScriptは、プリミティブ型とオブジェクト型で構成されるプリミティブ型は、変数として使う型それ以外はオブジェクト型です <script> $(function() { alert( typeof( jQuery ) ); }); </script> typeof 演算子を使って、引…

2015-12-25

セレクタの使い方

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

2015-12-24

セレクタ

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

2015-12-23

jQueryの基本

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

2015-12-22

時間の制御とボタンの作成

イラストを描く Illustratorでの作業素材 Flashにコピー＆ペーストシンボルに変換制御：停止 Flashは「自動再生」が基本です。ですから、「止める」設定がされていない場合、繰り替えし再生し続けることになります。「タイムライン」パネル「１」フレー…

2015-12-21

リップル（さざなみ）効果

合言葉は、ガチョーン！（1）新規ドキュメント作成（2）背景色を変更（3）文字を入力する（4）「修正」→「分解」（5）「修正」→「タイムライン」→「レイヤーに分配」（4）１文字づつ、「分解」→「シンボルに変換」（5）キーフレームを挿入し、動きの…

2015-12-19

新-画像置換

画像の準備 Photoshopで、「幅600px 高さ400px」の新規ファイルを作成する画像をレイヤーとして重ねるレイヤー名を連番にしておくレイヤーをファイルへ書き出し「ファイル」メニュー →「スクリプト」→「レイヤーをファイルへ書き出し」保存してから行わ…

2015-12-18

まとめ（10）チェックテスト

演習課題 if文入力した値が「60」以上なら合格、それ以外なら「不合格」とブラウザに表示させない for文数値「1から10」までのカウンター数を、コンソールに表示させない数値「1から10」までの総和を求め、アラートボックスに表示させない switch文「日…

2015-12-17

まとめ（9）繰り返しの制御

繰り返しの中のbreak文 switch文でのbreak文は、ブロックの外へ抜けるための構文でした break文をwhile文やfor文のブロック内に記述することで、継続条件式がtrueであっても強制的にブロックの外へ抜けることができます《for文とbreak文》 <html lang="ja"> <head> <meta charset="utf-8"> <title>for文とbreak</title></meta></head></html>…

2015-12-16

まとめ（8）連想配列

連想配列とは連想配列は、数値の代わりに意味のある文字列をインデックスとすることで、各要素を識別しやすくすることができます連想配列の場合、インデックスのことを「キー」と呼びます連想配列の宣言と初期化連想配列の要素は、キーと値のセットで１…

2015-12-15

まとめ（7）配列

配列とは配列とは、同じ用途で用いる複数の変数を１つにまとめたもの配列は要素の集合体配列は変数の集まりによって構成されます個々の変数のことを「要素」と呼びます各要素を識別するために「インデックス」と呼ばれる番号（０から始まる整数値）が割…

2015-12-14

まとめ（6）for文

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

2015-12-13

まとめ（5）while文

while文とは反復処理（繰り返し）を行います同じ事を繰り返すことを「ループ」と呼びます while文は繰り返し回数が決まっていない場合に使われる場合が多い変数の初期値； while ( 繰り返し条件； ) { 実行される処理変数の変更 ; } 継続条件式には、if…

2015-12-12

まとめ（4）switch文

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

2015-12-11

まとめ（3）if文

スクリプトには３通りの進み方がある（実行する流れ）順次分岐反復分岐処理とはある条件に応じてその後おこなわれる処理を振り分けることプログラムの流れを変える if文ある条件が成りたったときに、指定した処理を行うために用意されている制御文で…

2015-12-10

まとめ（2）関数

あらゆるものには然るべき場所があるスクリプトはデータを格納できますウェブブラウザが内蔵するJavaScriptインタープリターは、JavaScriptのデータのために記憶領域を確保しますそのデータが何でありそれをどのように使うつもりであるか正確に記述するの…

2015-12-09

まとめ（1）変数

JavaScript HTMLを拡張（HTMLのみでは不可能なことを可能にする）呼び方は「JavaScript」ですが、記述ルールは「ECMAScript 第 5 版」ユーザーが必要としていることインターネットを使うとき、壁に向かって話しかけているわけではないので応答が欲しい。…

2015-12-08

イベントと実行タイミング

特定のタイミングで実行したいスクリプトをまとめる関数：function function myidEvent() { alert( '押されました' ); } myidEvent() という名前でスクリプトをグループ化しました。特定のイベントに関連づける HTML内に各要素の属性のonClickなどイベント…

2015-12-07

DOMでアニメーション

エレメントの位置を変更する DOMを使用したアニメーションエレメントの表示位置を、top（上端）、left（左端）プロパティで設定しますエレメントの配置位置を、positionプロパティでデフォルト設定値「static」以外に設定しておく <html lang="ja"> <head> <meta charset="UTF-8"> <title>アニメーション</title> <style> #ca</meta></head></html>…