2015-12-01から1ヶ月間の記事一覧
jQuery高速化 Webサイトのパフォーマンスを重視するために、古いブラウザでは「1.x系」モダンブラウザでは「2.x系」とインクルードするjQueryファイルを分けて記述します <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 1.…
thisキーワード JavaScriptの予約語 thisは、標準の要素オブジェクト jQueryメソッドにアクセスするには、「$()関数」で「this」をラッピングする必要があります 「$()関数」を利用することで、標準の要素オブジェクトをjQueryオブジェクトに変換できます そ…
readyイベントとは イベントの中で最も大事なイベントが、readyイベントになります このイベントは、DOMの読み込み完了時に実行されます そのため、jQueryを使用する場合は必ずreadyイベントを設定することになります jQueryの実行パターン $( document ).re…
イベントとは ユーザーとWebサイトとの間でやりとりを行う処理を「イベント」と呼びます イベントには、「ユーザーイベント」と「ブラウザイベント」の2種類があります ユーザーイベントは、キーボードやマウスを操作することで実行されます ブラウザイベン…
HTMLの操作 要素内のテキストの設定・変更やHTML要素の設定・変更など テキストの設定 要素内のテキストを設定する場合は、text( )メソッドを使用します $(function(){ $( '#txt' ).text( 'テキストが変更されました' ); }); 《テキスト内容を取得する場合》…
jQueryの関数 jQueryは、関数オブジェクトです JavaScriptは、プリミティブ型とオブジェクト型で構成される プリミティブ型は、変数として使う型 それ以外はオブジェクト型です <script> $(function() { alert( typeof( jQuery ) ); }); </script> typeof 演算子を使って、引…
最低限、使うものだけ覚える すべてを覚えようとしないこと JavaScriptの読み込み順序 HTMLをすべて読み込み後に、jQueryの処理を実行する <script> $(document).ready(function(){ //この中に処理を記述 }); </script> この記述であれば、bodyの終了タグの前でも、script内で…
セレクタとは 名前、属性、状態などによりドキュメント内の要素を選択する役割 セレクタの書き方 先頭に「$」を記述 「$」は、jQueryオブジェクトのインスタンス $( '要素' ) セレクタを使用するときの注意点 セレクタを使用する場合は、jQueryへのアクセス…
よく使うJavaScriptを簡単に使えるようにしたもの JavaScriptのライブラリのひとつ HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる 要素に対してアニメーションできる 主要なブラウザをサポート(ブラウザ依存を気にしなくてよい) 記…
イラストを描く Illustratorでの作業 素材 Flashにコピー&ペースト シンボルに変換 制御:停止 Flashは「自動再生」が基本です。ですから、「止める」設定がされていない場合、繰り替えし再生し続けることになります。 「タイムライン」パネル「1」フレー…
合言葉は、ガチョーン! (1)新規ドキュメント作成 (2)背景色を変更 (3)文字を入力する (4)「修正」→「分解」 (5)「修正」→「タイムライン」→「レイヤーに分配」 (4)1文字づつ、「分解」→「シンボルに変換」 (5)キーフレームを挿入し、動きの…
画像の準備 Photoshopで、「幅600px 高さ400px」の新規ファイルを作成する 画像をレイヤーとして重ねる レイヤー名を連番にしておく レイヤーをファイルへ書き出し 「ファイル」メニュー →「スクリプト」→「レイヤーをファイルへ書き出し」 保存してから行わ…
演習課題 if文 入力した値が「60」以上なら合格、それ以外なら「不合格」とブラウザに表示させない for文 数値「1から10」までのカウンター数を、コンソールに表示させない 数値「1から10」までの総和を求め、アラートボックスに表示させない switch文 「日…
繰り返しの中のbreak文 switch文でのbreak文は、ブロックの外へ抜けるための構文でした break文をwhile文やfor文のブロック内に記述することで、継続条件式がtrueであっても強制的にブロックの外へ抜けることができます 《for文とbreak文》 <html lang="ja"> <head> <meta charset="utf-8"> <title>for文とbreak</title></meta></head></html>…
連想配列とは 連想配列は、数値の代わりに意味のある文字列をインデックスとすることで、各要素を識別しやすくすることができます 連想配列の場合、インデックスのことを「キー」と呼びます 連想配列の宣言と初期化 連想配列の要素は、キーと値のセットで1…
配列とは 配列とは、同じ用途で用いる複数の変数を1つにまとめたもの 配列は要素の集合体 配列は変数の集まりによって構成されます 個々の変数のことを「要素」と呼びます 各要素を識別するために「インデックス」と呼ばれる番号(0から始まる整数値)が割…
指定した回数だけ処理を繰り返す - for文 指定した回数だけ処理を繰り返す 変数「i」の初期値(「i」は、indexの意) 処理を1回実行するたびに、変数「i」の値をどのように変更するか for ( 変数の初期値; 繰り返し条件; 変数の変更 ) { 実行される処理 }…
while文とは 反復処理(繰り返し)を行います 同じ事を繰り返すことを「ループ」と呼びます while文は繰り返し回数が決まっていない場合に使われる場合が多い 変数の初期値; while ( 繰り返し条件; ) { 実行される処理 変数の変更 ; } 継続条件式には、if…
switchとは if文と同様に分岐処理を行います if文を簡略化してよりすっきり記述するための構文です ある変数の中身が一致するかという判断を行います switch(変数) { case 値1: 変数の中身が値1に一致した場合の処理 case 値2: 変数の中身が値2に一致した…
スクリプトには3通りの進み方がある(実行する流れ) 順次 分岐 反復 分岐処理とは ある条件に応じてその後おこなわれる処理を振り分けること プログラムの流れを変える if文 ある条件が成りたったときに、指定した処理を行うために用意されている制御文で…
あらゆるものには然るべき場所がある スクリプトはデータを格納できます ウェブブラウザが内蔵するJavaScriptインタープリターは、JavaScriptのデータのために記憶領域を確保します そのデータが何でありそれをどのように使うつもりであるか正確に記述するの…
JavaScript HTMLを拡張(HTMLのみでは不可能なことを可能にする) 呼び方は「JavaScript」ですが、記述ルールは「ECMAScript 第 5 版」 ユーザーが必要としていること インターネットを使うとき、壁に向かって話しかけているわけではないので応答が欲しい。…
特定のタイミングで実行したいスクリプトをまとめる 関数:function function myidEvent() { alert( '押されました' ); } myidEvent() という名前でスクリプトをグループ化しました。 特定のイベントに関連づける HTML内に各要素の属性のonClickなどイベント…
エレメントの位置を変更する DOMを使用したアニメーション エレメントの表示位置を、top(上端)、left(左端)プロパティで設定します エレメントの配置位置を、positionプロパティでデフォルト設定値「static」以外に設定しておく <html lang="ja"> <head> <meta charset="UTF-8"> <title>アニメーション</title> <style> #ca</meta></head></html>…
Q1 以下はDOMに関する説明です。空欄(A)と(B)を適切な語で埋めなさい DOMは、HTMLやXMLなどの(A)で記述された文書の要素にアクセスするための仕組みで、要素を(B)構造で扱う。 Q2 以下はHTML文書において、h1要素から見てp要素はどのような関係にあ…
HTMLとJavaScriptの分離 いままでの記述では、イベントハンドラはHTML内に記述していました 定義とイベントが発生する位置がばらばらでわかりにくくなっています Webページを作成する際は、HTMLとスクリプトは分けて記述することが推奨されています イベント…
DOM操作のメソッド HTMLドキュメントの階層構造 DOMを使用すると、HTMLドキュメント内のすべての要素を「html」を頂点とする階層構造でアクセスできます この階層構造を「DOMツリー」と呼びます DOMツリー内の個々の要素を「ノード」と呼びます ノードを取得…
DOMとは DOM(Document Object Model)とは、HTML文書をオブジェクトとして読み込んで操作するための仕組み Documentオブジェクトが持つ要素の構造そのもの、あるいはそれらにアクセスしたり操作したりする機能のこと DOMは、ドキュメントをツリー構造で扱い…
正規表現とは 入力チェック処理には、正規表現が用いられます 正規表現とは、文字列のパターンを特定するための手法のことです 正規表現の書き方 《正規表現》 /パターン/オプション 数字が4桁、先頭がアルファベットなどのルールの形式を「パターン」と呼…
Q1 以下はWindowオブジェクトに関する説明です。空欄(A)(B)に適切な語を埋めなさい すべてのブラウザオブジェクトの(A)となるオブジェクトで、(B)に関する情報をもつ。 Q2 openメソッドで開いたウィンドウまたはタブを閉じるには、どのような命令を…