2012-01-01から1年間の記事一覧

画像置換(5)

☆★データーでの確認★☆ライブラリを利用 navの画像置換(yuga.js を導入) ソースコード【 Javascript[ yuga.js ] 】ソースコード【 Javascript[ jQuery.js ] 】 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>練習課題【天然温泉】</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </link></meta></head></html>

GIFアニメーション

アニメーションの原理は「パラパラマンガ」 人間の視覚特性(残像)を利用して動いているように見える仕組み。 画像形式「GIF」の拡張仕様の一つで、動画を扱う形式。 一つのファイルの中に複数のGIF画像を保存し、それらを順に表示していくことで動画を表現…

Flash

Flashの役割 初心者がつくる「動的コンテンツ」のパッケージ プレゼンテーションツール ビデオコンテンツなどのインターネット配信 ActionScriptを利用した「UI」 データベースと連動させたリッチコンテンツ AIRアプリの作成 ActionScript3種類のActionScri…

Flash02

描画のポイント 鉛筆ツールのオプション ストレート スムーズ インク ストレートやインクで線を描くと、描き方によっては少しガタガタした線になってしまうことがあり、ガイドレイヤーの線として描くと思い通りの動きにならないことがありますので、注意しま…

[基礎][ActionScript]Flash03

シンボルとインスタンス シンボル Flashのアニメーション内で使用する「オブジェクト(部品)」 シンボル化されたオブジェクトは、ライブラリに保管されて、そこからいつでも取り出すことができる ライブラリからステージ上にドラッグ&ドロップすることで使…

変数を理解する03

入力ダイアログボックスを表示 prompt() promptメソッドは、指定したウィンドウに文字ダイアログを表示する window.prompt('ダイアログに表示される文字列','入力欄の初期値')と指定する この結果は「文字列 + 数値」で「文字列 + 文字列」になる ソースコー…

変数を理解する04

標準体重プログラム ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>標準体重</title> </head> <body> <script> /* *標準体重計算プログラム *最終修正日:2012.06.07 */ var height;//身長 var weight;//体重 //身長を代入する height=170; //計算を行う weight=(height-100)*0.9; //結果を表示する document</body></html>…

[基礎][JavaScript]変数を理解する05

メッセージを表示するダイアログボックス ソースコード【 JavaScript 】 alert( メッセージ ); ユーザーに確認を求めるダイアログボックス ソースコード【 JavaScript 】 confirm( メッセージ ); 変数 = confirm( メッセージ ); confirmメソッドは「戻り値を…

画像置換(1)

単純なJavaScript ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>画像置換</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <nav> <ul> <li><a href="#"></a></li></ul></nav></body></html>

[JavaScript][授業]画像置換(2)

ライブラリを利用 rollover.js ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>画像置換[ rolloverの使用 ]</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> <script src="js/rollover.js"></script> </head> <body> <nav> <ul> <li><a href="#"></a></li></ul></nav></body></html>

rollover

☆★データーでの確認★☆rollover 「_on」と名前を付けたロールオーバー用画像を用意し、img要素にclass="btn"と設定することでロールオーバー機能を付けることができる ソースコード【 HTML 】 <script src="js/rollover.js"></script> ソースコード【 JavaScript 】 /* Standards Compliant Rollover…

警告ダイアログに表示

☆★データーでの確認★☆課題02 警告ダイアログに「ありがとう!」と表示 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ありがとう!</title> </head> <body> <script> window.alert('ありがとう!'); </script> <noscript> JavaScript対応ブラウザで表示してください。 </noscript> </body> </html> ブラウザで表示

演算の優先度

演算子の優先順位 JavaScriptでは次の優先順位に基づいて計算している。 優先順位 演算子 同順位のとき計算の流れ 1 . [] → 〃 new ← 2 ( ) → 3 ++ -- − 4 ! ~ + - typeof void delete ← 5 ∗ / % → 6 + - → 7 > >>> → 8 >= in instanceof → 9 == != === !== …

[基礎][JavaScript]演算の優先度02

式の読み方 優先度が違うときソースコード【 JavaScript 】 a + b * c + より - よりも * や / の方を先に計算する。 ソースコード【 JavaScript 】 (a + b) * c ( )でくくると、その中を先に計算する。 ソースコード【 JavaScript 】 c = a == b a と b が…

if文

if文 if文は条件によって処理を分けて行うときに使う。 条件には比較演算子や論理演算子を使った条件式を指定。 ソースコード【 JavaScript 】 a = 5; if(a % 2 == 0) { document.write(a, 'は偶数です。'); } else { document.write(a, 'は奇数です。'); } …

[基礎][JavaScript]if文02

if〜else if〜else文 複数の条件のどれにあてはまるかによって、それぞれ違う処理を行いたいときは、else ifを使う。 ソースコード【 JavaScript 】 num = 1000; document.write(num + 'は'); if (0 <= num && num <= 9) { document.write('1桁の数です。');…

変数を理解する

☆★データーでの確認★☆変数は値を格納しておく箱 変数宣言ソースコード【 JavaScript 】 var 変数名; 変数に値を入れるソースコード【 JavaScript 】 変数名 = 値; JavaScriptの変数は「データの型」に柔軟 データ型がない 変数の寿命 グローバル変数:関数の…

変数を理解する02

☆★データーでの確認★☆ダイアログボックスに値を表示する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>平成を西暦に変換する</title> </head> <body> <script> var heisei; var fullYear; var message; heisei=25; fullYear=heisei+1988; message='平成'+heisei+'年は'+'西暦'+fullYear+'年です。'; window</body></html>…

警告ダイアログと型の変換

警告ダイアログ表示 JavaScriptで警告ダイアログを表示するには、「window.alert( )」を使う。 window.alert( ) [OK]ボタンのある警告ダイアログウィンドウに( )の中の文字列を表示する。 「window.」は省略できる。 命令には引数を渡せる 以下は同じ結果…

警告ダイアログと型の変換02

異なる型の連結 文字列と数値を「+」で結合すると、数値は文字列に変換される。 ソースコード【 JavaScript 】 a = 'フィンガー'; b = 5; c = a + b; a:文字列を代入します。 b:数値を代入します。 数値と論理値を「+」で連結すると、論理値は数値に変換さ…

計算の演算子と論理演算子

算術演算子 数の計算に用いる演算子を算術演算子といい、複合代入演算子。 演算子 読み仮名 働き 使い方 結果 + プラス +(足す) a = 5 + 5 10 - マイナス −(引く) a = 5 - 5 0 ∗ アスタリスク ×(かける) a = 5 * 5 25 / スラッシュ ÷(割る) a = 5 /…

計算の演算子と論理演算子02

論理演算子とは 論理演算子を使うことにより、より複雑な条件を表すことができる。 論理演算子 演算子 働き 使い方 意味 && かつ (a >= 10) && (a aは10以上かつ50未満 || または (a == 1) || (a ==100) aは1または100 ! 〜ではない !(a == 100) aは100…

変数

変数の利用 「変数」は、数値や文字などを格納しておく「箱」。 変数に値を入れるには次のようにします。 ソースコード【 JavaScript 】 a = 2; 「a」という名前の変数に「2」という数値を入れる。 変数に値を入れることを「代入」。 変数名 変数名には半角…

変数02

数値型 数値が入る変数の型を「数値型」という。 typeof演算子では「number」で表される。 ソースコード【 JavaScript 】 a = 123; b = -5; c = 0.1; d = -2.8; 負の値には「−」をつけます。 ソースコード【 JavaScript 】 a = typeof(123); document.write(…

変数03

delete演算子 delete演算子を使うと変数を削除し、未使用状態に戻すことができる。 削除に成功すると「true」を返し、失敗すると「false」を返す。 ソースコード【 JavaScript 】 a = 1; delete a; 文字列型(string) 1つ以上の文字を並べたものを「文字列…

[基礎][JavaScript]変数04

エスケープシーケンス " "の中で「"」、' 'の中で「'」を使いたいときは、文字の前に「\(エスケープ文字)」を付けて表す「エスケープシーケンス」という特殊文字を使う。 エスケープシーケンス 働き \t タブ \n 改行 \b バックスペース \" 「"」を表示 \' …

[基礎][JavaScript]変数05

NaNとInfinity 数値型(number)には、整数と少数のほかに NaN(非数)と Infinity(無限)という値がある。 NaN(Not A Number)非数 NaNは、数ではない数という意味で、数値に変換しようとして変換できないときの値。 次のように文字列を parseInt で整数…

ブラウザに表示

文字列の表示 JavaScriptで文字列を表示するには、「window.document.write( )」を使う。 window.document.write( ) ( )の中の文字列を表示します。「window.」は省略できる。 "(ダブルクォーテーション) 表示したい文字列を " と " ではさみむ。 ;(セミ…

ブラウザに文字を表示

課題01 「Hello World!!」とブラウザに表示させる。 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Hello World!!</title> </head> <body> <script> window.document.write('Hellow World!!'); </script> <noscript> JavaScript対応ブラウザで表示してください。 </noscript> </body> </html> ブラウザで表示

オブジェクトとプロパティとメソッド03

fgColorプロパティ 文字の色を参照・設定 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>プロパティ</title> </head> <body onLoad='window.defaultStatus="色の設定"'> <script type="text/javascript"> <!-- document.fgColor='#f00'; document.bgColor='#eee'; --> </script> <p>文字色と背景色を変更しました。</p> <…</body></html>