スポンサーサイト

  • 2017.10.31 Tuesday
  • -
  • -
  • -
  • -
  • by スポンサードリンク

一定期間更新がないため広告を表示しています


JavaScriptドキュメントを操作

ページの中にメッセージを表示してみましょう。
<script type="text/javascript">
<!--
document.write ( "JavaScript講座に、ようこそ!" );
//-->
</script>
ブラウザウインドウ内に文字列を書き出すには、document.write()メゾッドを使います。次はブラウザから情報を取得して表示します。
<script type="text/javascript">
<!--
document.write ( "JavaScript講座、背景色" + document.bgColor + "" );
document.write ( "JavaScript講座、文字色" + document.fgColor );
alert ( "OKを押すと背景色と文字色が変わります" );
document.bgColor = "#eeeeee";
document.fgColor = "#000000";
//-->
</script>
この背景色と文字色の変更の2つ操作を行っています。ページの背景色と文字色の情報を取得し表示し背景色と文字色を変えます。alertダイアログボックスで操作を区切ります。document.bgColorで背景色、document.fgColorで文字色が得られます。<body>タグ内で背景色にwhite(#eeeeee)、文字色にlime(#000000)が指定されていますが画面上にも、この通り出力されます。document.bgColorやdocument.fgColorの値は、この例のように色の16進数コードとなっています。
<script type="text/javascript">
<!--
document.write ( "ブラウザ名" + navigator.appName + "" );
document.write ( "バージョン" + navigator.appVersion );
//-->
</script>
ブラウザの名前とバージョンを取得して表示します。ソースから、わかるようにブラウザ名はnavigator.appName、バージョンはnavigator.appVersionで得られます。
<script type="text/javascript">
<!--
var dateObj = new Date();
var dateYear = dateObj.getFullYear();
var dateMon = dateObj.getMonth() + 1;
var dateDate = dateObj.getDate();
var dateHour = dateObj.getHours();
var dateMin = dateObj.getMinutes();
document.write ( "現在の日時" );
document.write ( dateYear + '年' + dateMon + '月' + dateDate + '日' );
document.write ( dateHour + ':' + dateMin + 'です' );
//-->
</script>
1行目のdateObj = newDate()で現在の日時を取得しています。この行はdateObjという日時オブジェクトを生成していますがDate()にパラメータとして日時を表す文字列が与えられて時は現在の日時を表す日時オブジェクトが生成されます。
次はdateYearからDate Minまでの5行はdateObjから、それぞれ年月日時分を取得しています。getMonth()は月-1の値を返すので注意が必要です。
<script type="text/javascript">
<!--
var dateObj = new Date( document.lastModified );
var dateYear = dateObj.getFullYear();
var dateMon = dateObj.getMonth() + 1;
var dateDate = dateObj.getDate();
var dateHour = dateObj.getHours();
var dateMin = dateObj.getMinutes();
document.write ( "最後に更新した日時" );
document.write ( dateYear + '年' + dateMon + '月' + dateDate + '日' );
document.write ( dateHour + ':' + dateMin + 'です' );
//-->
</script>
このページは最新更新日時を表示しています。前回と違うところは1行目だけです。dateObj = new Date(document.lastModified);で最終更新日時を値に持つ日付オブジェクトdateObjが生成されます。実は、document.lastModified自体最終更新日時を表す文字列なのですがブラウザによって形式が、まちまちなので、この例のように一旦日付オブジェクトに変換した方が無難です。


Javascript-メッセージを表示

メッセージを表示
JavaScriptでの各種制御文の記述形式は次の通りです。

関数
簡単にJavaScriptから始めて見ましょう。次のソースリストを入力してブラウザで表示してみましょう。

<script type="text/javascript">
<!--
alert ( "JavaScript講座に、ようこそ!" );
//-->
</script>

これは、宣言文を除くと1行しかないJavaScriptです。ブラウザに表示した途端、JavaScript講座に、ようこそ!というダイアログボックスが表示されます。このダイアログボックスは、ソース中のalert()によって表示されたものです。JavaScriptには、このようなダイアログボックスを表示する機能(メソッドと呼びます)が3種類あります。

ソースリスト中のalertの部分を次のように書き換えて表示してみてください。

confirm ("JavaScript講座に、ようこそ!");

今度はOKとキャンセルの2つのボタンを持ったダイアログボックスが表示されたでしょう。

prompt ("JavaScript講座に、ようこそ!");

今度は入力フィールドを持ったダイアログボックスが表示されます。これらは、よく使用されますので覚えておくと良いと思います。

alert
警告ダイアログボックス、ページ閲覧者に注意をする目的で使用される他にはJavaScriptのデバックの時に、使用されると思います。

confirm
確認ダイアログボックス、YESかNOかの二択の選択を求めるダイアログボックスです。フォームデータ送信の最終確認などに用いられると思います。YESボタンが押された場合はtrueで、NOボタンが押された場合はfalseが戻り値となります。

prompt
入力ダイアログボックス、入力されたテキストが戻り値として返します。キャンセルされた場合はnullとなります。


JavaScript-制御文

JavaScriptでの各種制御文の記述形式は次の通りです。

関数

functionキーワードで定義します。

function 関数名 (引数リスト) {
関数本体の記述;
return 戻り値;
}

戻り値がない場合、return文は不要です。

if文

if (条件式) {
条件がtrueの時の処理
} else {
条件がfalseの時の処理
}

switch文

switch (値または式) {
case 値1:
値が値1の時の処理
break;

case 値n:
値が値nの時の処理
break;
default:
}

各caseの処理の終わりにbreak;を置きます。

while文、do while文

while (条件式) {処理}
do {処理} while (条件式)

for文

for (カウンター変数 = 初期値 ; 繰り返し条件 ; 一回毎に実行する処理) {処理}
for (変数 in オブジェクトまたは配列) {処理}


JavaScript文法

JavaScriptも一種のプログラミング言語です。JavaScriptの文法はCやJavaとほぼ同じなので、これらの言語の知識があればすんなり覚える事ができます。
HTMLへの記述
<script></script>は<head>、<body>のどちらにも記述する事ができます。JavaScriptは、関数定義などを除いて基本的に記述された順に実行されます。<head>内に<script type="text/javascript" src="javascript.js"></script>のように拡張子.jsのファイル名をsrc属性に記述する事でそのファイルに記述されます。JavaScriptを読み込んで実行します。JavaScriptに対応していないブラウザでJavaScriptがページ本体に表示されてしまうのを防ぐためにスクリプト全体を<!--と//-->でコメントアウトするようにします。また、<noscript></noscript>を記述すると未対応ブラウザ向けの代替ページを用意できます。<noscript></noscript>内の内容はJavaScriptが実行できる時は表示されません。


Javascript項目

・オブジェクト
説明)操作対象となるもの
例)document、windowなど

・プロパティ
説明)オブジェクトの持つ特徴
例)fgColorなど
説明)オブジェクト、プロパティのようにして参照、設定
例)document、fgColorなど

・メソッド
説明)オブジェクトの動作
例)writeなど
説明)オブジェクト、メソッドで動作させる
例)document、write()など


JavaScript

JavaScriptはHTML上で動作するスクリプト言語です。スクリプト言語とは命令を組み合わせる事で簡単にプログラムを記述するための言語です。ワードやエクセルなどを使用する事のあるかたは、ご存知のマクロ言語もスクリプトの一種です。JavaScriptでは、マウスポインタを動かす、フォーム入力する、ボタンやリンクをクリックする、といったページ閲覧者の操作に応じたページ内容を変化させる事ができます。JavaScriptと類似した名前のJava言語というものがありますが両者は違うものです。JavaScriptは、Netscape社が開発したもので、JavaはSunMicrosystems社が開発したものです。こんにちのJavaScriptとはECMAという標準規格に基づいています。ECMAに基づいていると言われても分かり難いのですが・・・簡単に言えばJavaScriptはオブジェクト指向に基づいた言語と言う事です。JavaScriptには、オブジェクト、プロパティ、メソッドと言う概念があります。


フレームワークとは

フレームワークとは、プログラミングに必要な特定の機能を持たせようとする枠組みのことです。はっきり定義されたAPIを持ち、コードを再利用可能な形で隠蔽しているという点ではライブラリと似ていますが、フレームワーク最大の特徴である、「呼び出し側がプログラム全体の制御構造を指定可能」がライブラリでは不可能なため、別のものとして分けられています。


JavaScriptとは

JavaScriptとは、プロトタイプベースのオブジェクト指向スクリプト言語ですが、クラスベースに見られる機能も取り込まれております。HTML内にJavaScriptを埋め込むことにより動的なWebページを実現させることが可能です。Javaと名前に入っていますが、別物のプログラミング言語になります。


JavaScriptのフレームワーク

JavaScriptのフレームワークは、ライブラリのことを指す場合があります。
フレームワークとは、プログラミングに必要な特定の機能を持たせようとする枠組みのことです。はっきり定義されたAPIを持ち、コードを再利用可能な形で隠蔽しているという点ではライブラリと似ています。


ホームページ制作 スマホでユーザビリティが高いとは

Webサイトの閲覧の6割がスマートフォンユーザーと言われ、最近依頼のあるホーム―ページもほとんどがスマートフォン対応サイトです。
私がスマホサイトをデザインするときに特に気を付けていることの1つが「ユーザビリティ」です。
ユーザーが自分に必要な情報をすぐに見つけられるように、どのようなWEBサイト設計が良いのかを考えて制作をしています。