カテゴリー: 学科 JavaScript基礎

-本日のアジェンダ-

1限目
学科 JavaScript基礎③
Webアプリケーションについて

2限目
学科 JavaScript基礎③
Webアプリケーションの作成方法

3限目
学科 JavaScript基礎③
課題制作

4限目
学科 JavaScript基礎③
課題制作

5限目
学科 JavaScript基礎③
課題制作

本日のテーマ

Webアプリケーションを理解しましょう。

Webアプリケーション とは

Webアプリケーションは、簡単に言うとインターネットを利用してブラウザ上から操作できるアプリケーションのこと示します。Webアプリケーションと対比する用語としてネイティブアプリケーションというものがあります。

ネイティブアプリケーションは、PCやスマホなどの端末にインストールして使用しますが、Webアプリケーションは端末へのインストールが不要でブラウザがあれば使用できます。

一般的には、高機能なアプリケーションは、ネイティブアプリケーションでの提供が多い状況でしたが、端末の高性能化により高機能なアプリケーションもWebアプリケーションとして提供されることが多くなりました。

参考サイト

• 【図解】WEBアプリケーションとは？仕組みと開発言語を解説！
• Webアプリとは？サービスの仕組みや開発の流れを理解しよう
• Webアプリの開発はどのように行われる？開発に使われる言語と合わせて解説！

本日の課題

WordPressサイトに、本日学んだ内容を投稿ページにまとめてください。

第5回成績考査について

8月30日(火)の5限目までに、Webページを提出してください。
※WEBページはFFFTPでHTMLサーバーにアップしてください。
※サイト内容は自由です。是非、就職活動に活かせる作品を作成してみてください。

-本日のアジェンダ-

1限目
学科 JavaScript基礎②
動的処理について

2限目
学科 JavaScript基礎②
動的処理の組み込み方法

3限目
学科 JavaScript基礎②
課題制作

4限目
学科 JavaScript基礎②
課題制作

5限目
学科 JavaScript基礎②
課題制作

本日のテーマ

Webページに動的処理を組み込みましょう。

動的処理とは

Webページには、静的ページと動的ページがあります。静的ページは、いつ、どこでアクセスしても同じ内容しか表示されないページです。一方、動的ページは、アクセスする時の環境や操作内容によって表示される内容が変化するページです。動的ページを作成するためには、サーバー側で処理する方式と端末側で処理する方式があります。

端末側で処理する方式の動的ページの例は、以下の通りです。（一部の例は、HTMLとCSSだけで実現できるものもあります）

• 複数の画像をスライダー方式で切り替える
• 画像をクリックしてポップアップ（拡大）させる
• Webブラウザのようにページ内にタブを設置する
• ページにアニメーションをつける
• 図表などのソート（並び替え）を行う
• 投稿フォームの項目を入力内容によって変更する
• リアルタイムのチャートグラフを作成する
• カレンダーを設置する
• 電卓機能を設置する　など

参考サイト

• 静的ページと動的ページの違いとメリット・デメリット
• 動的ページ制作術｜PHPとJavaScriptでwebデザインの幅を広げよう
• JavaScriptの動的って何？誰でも分かるHTML要素の書き換え手法

本日の課題

WordPressサイトに、本日学んだ内容を投稿ページにまとめてください。

第5回成績考査について

8月30日(火)の5限目までに、Webページを提出してください。
※WEBページはFFFTPでHTMLサーバーにアップしてください。
※サイト内容は自由です。是非、就職活動に活かせる作品を作成してみてください。