2015-06-01から1ヶ月間の記事一覧
イベントでタイミングを設定 意図したタイミングで処理を実行する HTMLが読み込まれたタイミングで実行する ready()イベント <script> $(document).ready(function(){ //HTMLが読み込まれたときに、実行する処理を記述 }); </script> の短縮形が以下の記述。 <script> $(function(){ /</script>…
HTML/CSSを操作するjQueryの命令 どのHTMLの要素を操作するか指定する（セレクター） 操作する内容（命令） jQueryの命令 テキストの変更と取得 HTMLの変更と取得 HTMLの挿入 HTMLの移動 他の要素で包む 親要素を取り除く 要素の置き換え 要素の削除 属性値…
メソッド セレクタで指定した箇所（要素 / 属性）に対して「何をさせる」と指示を与えること jQueryでCSSスタイルを追加・変更する １つの指示を出す場合 <script> //1つの指示を出す（記述方法1） $('セレクタ').css('color', '#f00'); //文字を赤色に </script> <script> //1つの指</script>…
テスト素材 テスト素材2 ボタンからムービークリップを動かす onハンドラからイベントハンドラメソッドに変更する過程を理解する Illustratorでイラストを作成 グループ化しない IllustratorからFlashへ、コピー＆ペースト（ただし、同一バージョンに限りま…
イベント 「いつ」を設定する部分になります。 ActionScriptでは「イベントハンドラ」という構造で、イベントでおこなう処理を管理します。 onClipEvent (イベント) { 処理１ 処理２ …onClipEventハンドラ イベント 説明 load ムービークリップインスタンス…
jQuery演習 表示結果のようになるよう記述しなさい 要素セレクタ（element） $('div') <html> <head> <meta charset="UTF-8"> <title>jQuery：要素セレクタ</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <h1>Heading</h1> <p>The quick brown fox jumps over the lazy dog.</p> <ul> <li>The …</li></ul></body></html>
JavaScriptの読み込み順序 HTMLをすべて読み込み後に、jQueryの処理を実行する <script> $(document).ready(function(){ //この中に処理を記述 }); </script> この記述であれば、bodyの終了タグの前でも、script内でも問題なく動作します。 短縮形 <script> $(function(){ //この中に</script>…
jQueryとは テキストP.204〜209 → jQueryテキスト John Resig 氏によって開発された JavaScriptのライブラリのひとつ ブラウザ依存を気にしなくてよい DOMの操作が簡単 記述の仕方は、CSSに似ている write less, do more. オープンソース（MITライセンス+GPL…
特定のタイミングで実行したいスクリプトをまとめる 関数：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>…
合言葉は、ガチョーン！ （1）新規ドキュメント作成 （2）背景色を変更 （3）文字を入力する （4）「修正」→「分解」 （5）「修正」→「タイムライン」→「レイヤーに分配」 （4）１文字づつ、「分解」→「シンボルに変換」 （5）キーフレームを挿入し、動きの…
Flashムービー PhotoshopのレイヤーをFlashのレイヤーにコンバート 各写真を「シンボルに変換」 時間を設計しながら「キーフレームの挿入」 モーションを設定 各レイヤーをクロス状態にずらしていく 必要があれば、ActionScriptを記述する Photoshopでの準備…
<html lang="ja"> <head> <meta charset="utf-8"> <title>ペンギンカフェ</title> <link rel="stylesheet" href="css/style.css"> </head> <body id="home"> <div id="container"> <div id="header"> <h1><a href=""><img src="img/logo.png" alt="ペンギンカフェ"></a></h1> <p class="billboard"></p></div></div></body></html>
イラストを描く Illustratorでの作業 素材 Flashにコピー＆ペースト シンボルに変換 制御：停止 Flashは「自動再生」が基本です。ですから、「止める」設定がされていない場合、繰り替えし再生し続けることになります。 「タイムライン」パネル「１」フレー…
PunyPNG オンラインでPNG画像を圧縮するWebサービス メタデータなどの情報消して容量を軽くするので画質が劣化しません PNGGauntlet Windows ImageAlpha Mac IE6でもこの圧縮透過PNGは適用され透明になります 447KBの透過PNGデータが「126KB」になりました W…
CSS3 ボックスシャドウ ボックスシャドウはボックスモデルの外側・内側に影を作ることができ、 「X軸・Y軸・ぼかし具合・色」を設定することができます。 また、カンマ（,）で区切ることによって複数の影を作れます。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS3 ボックスシャドウ</title> <style> #bShadow1,</meta></head></html>…
角丸（かどまる）をつける border-radius CSS3代表的なプロパティ 角丸 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS3 角丸</title> <style> #radius1, #radius2, #radius3, #radius4 { border: 4px solid #F90; width: 200px; height: 100px; margin: 30px 50px; } #radius1 { border-radius: 20px; } #radius2</meta></head></html>…
楕円形ツールを自由に使う ここまでは、ペンツールを使わなくても形にできます。 楕円を描いて、ハサミツールで切っても曲線にはなります。 アンカーポイント切り替えツールを使う 楕円の端をとがらすには、「アンカーポイント切り替えツール」でクリックし…
Q1 以下はDOMに関する説明です。空欄（A）と（B）を適切な語で埋めなさい DOMは、HTMLやXMLなどの（A）で記述された文書の要素にアクセスするための仕組みで、要素を（B）構造で扱う。 Q2 以下はHTML文書において、ｈ1要素から見てp要素はどのような関係にあ…
HTMLとJavaScriptの分離 いままでの記述では、イベントハンドラはHTML内に記述していました 定義とイベントが発生する位置がばらばらでわかりにくくなっています Webページを作成する際は、HTMLとスクリプトは分けて記述することが推奨されています イベント…
DOM操作のメソッド HTMLドキュメントの階層構造 DOMを使用すると、HTMLドキュメント内のすべての要素を「html」を頂点とする階層構造でアクセスできます この階層構造を「DOMツリー」と呼びます DOMツリー内の個々の要素を「ノード」と呼びます ノードを取得…
DOMとは DOM（Document Object Model）とは、HTML文書をオブジェクトとして読み込んで操作するための仕組み Documentオブジェクトが持つ要素の構造そのもの、あるいはそれらにアクセスしたり操作したりする機能のこと DOMは、ドキュメントをツリー構造で扱い…
正規表現とは 入力チェック処理には、正規表現が用いられます 正規表現とは、文字列のパターンを特定するための手法のことです 正規表現の書き方 《正規表現》 /パターン/オプション 数字が４桁、先頭がアルファベットなどのルールの形式を「パターン」と呼…
Q1 以下はWindowオブジェクトに関する説明です。空欄（A）（B）に適切な語を埋めなさい すべてのブラウザオブジェクトの（A）となるオブジェクトで、（B）に関する情報をもつ。 Q2 openメソッドで開いたウィンドウまたはタブを閉じるには、どのような命令を…
WebページのURL情報（Location） Locationオブジェクトは、WebページのURLを情報としてもつオブジェクトです hrefプロパティの値を変更することで、別のWebページへ移動できます location.href = 移動先URL; <html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptの練習</title> </head> <body> <h1>現在のページ</h1> <p></p></body></html>
setIntervalメソッドとclearIntervalメソッド setIntervalメソッドは、一定の間隔ごとに処理を呼び出す、タイマー機能を開始します 一定間隔で表示画像を切り替えるなどの用途で使われます タイマーを停止するには、clearIntervalメソッドを使います setInte…
Q1 以下はイベントに関する説明です空欄を埋めなさい Webページ上でボタンのクリックなどのイベントが起こると、（A）がイベントの発生を検知し、関連付けられた任意の処理を呼び出す。 このような仕組みを（B)と呼ぶ。 Q2 onloadイベントハンドラは、一般的…
Q1 以下のオブジェクトが持つメソッドを実行するときには、どのような命令を記述しますか？ <script> var obj = { x: function() { console.log( 'こんにちは' );} }; </script> Q2 メソッドの中で記述すると、オブジェクト自身を表すキーワードはなんですか？ Q3 配列はなん…
連想配列 配列の場合「０」から始まる添字で要素を指定しましたが意味的な関連性はありません その添字の代わりに、「キー」と呼ばれる文字列で要素を指定します 連想配列は、「Objectオブジェクト」というオブジェクトとして扱います 連想配列の生成 new演…
Arrayオブジェクトのメソッド 配列は、Arrayオブジェクトのインスタンスです 配列をオブジェクトとして扱うと、あらかじめ用意された便利なメソッドを利用できます 要素を joinメソッドで連結 要素の増減にかかわらず、そのまま連結して表示します <html lang="ja"> <head> <meta charset="UTF-8"> <title>Array</title></meta></head></html>…
