javaScript

ハイ。今日からいよいよjavaScript

先日ⅩHTML/CSSは終わりました。

今回は、それにjavaScriptをつけ足していきますｗｗｗ

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

まず、javaScriptとは何か？から説明します。

javaScriptとは？
JavaScriptは、ブラウザ上で動作するプログラムを作成するためのプログラム言語です。

JavaScriptを使うことで、ⅩHTMLでは実現できない動的なWebページを作成できます。

例えば

画像を自動的に入れ替えてアニメーションのように見せる、文字列をスクロールさせる、ユーザーの操作に大路手メッセージを表示するという表現が可能になります。

javaScriptで、できること。
　ウインドウを開いたり閉じたりできます。

ボタンをクリックするだけでウインドウを開いたり閉じたりできます。

新しく開くウインドウの位置やサイズを指定したりメニューバーやスクロールバーを非表示にすることも可能です。

　画像に動きを出す
画像をポイントしたときに色を変えたり変形したりするロールオーバー効果を設定できます。

また、複数の画像を自動的に入れ替えてアニメーションのような効果を出すこともできます。

　文字列に動きを出す
文字列を1文字ずつ順番に表示したりスクロールしたりして動きを出すこともできます。

　日時を表示・計算する

Webページの最終更新日を自動的に表示したり、ユーザーがWebページにアクセスした日時を表示したりできます。

また、ある時期からある時期までの経過時間を計算することも可能です。

　フォーム上の計算やチェックを行う
ユーザーがフォーム上で入力した数値をもとに計算できます。

また、フォームの必須入力項目に記入漏れがないか入力した内容にミスがないかなどをチェックできます。

JavaScriptの特徴

JavaScriptは手軽に利用できます。

Web制作の現場では欠かせないものになっています。

メモ帳やTeraPadなどのテキストエディタを使ってプログラムを記述します。

HTMLを編集する感覚で記述していきます。

JavaScriptの記述と実行
JavaScriptはscript要素を使って記述します。

例えばこんな感じに

Internet　Explorer　で表示してみます。

スクリーンショット 2020-04-20 14.21.18

ここがJavaScriptで記述したプログラムの結果

とび森という部分にマウスを持っていくと日付と時間が出ますねｗｗｗ何日か前ですが…

scriptの要素を記述する

プログラムの記述

すると皆が夢中な・・・のところにマウスを持っていくと下のほうに日付が出てきますね。

ここで今回のプログラムの確認

window.status=new Date();
Windowsのstatusをnew Dateつまり今日の日付にするという意味です。

もう一つ試してみます

今度は文章を表示してみます。

スクリーンショット 2020-04-21 13.46.30

先ほどのところを少し変えただけですが

これでInternet Explorerを開きます。

同じように操作すれば下に文字が表示されるわけです。

ここまでご覧いただきありがとうございました。

BY　おこ助

参考書は

よくわかる

ゼロからはじめるJavaScript

発行者　　大森　康文

著作/制作　富士通エフオーエム株式会社