通信ネットワーク演習 2024（1）

2024/09/17　1限　DL502

本授業は、Webのおける通信技術の基礎の習得を目的とした演習で、主にJavaScriptを扱います。最終的には各自サイトをアップロードし、ブラウザ上で動作するインタラクティブな機能を持つWebサイトを制作します。

JavaScriptでできること

• HTMLやCSSの書き換え
  • テキストの書き換え
  • 画像の変更
  • 色の変更
• ユーザーのアクションに応じた動きを付ける
  • スクロールすると表示
  • 入力フォームのチェック（フォームバリデーション）

…など、HTML+CSSで制作したサイトに様々機能を追加できるようになります。

※「JavaScript入門講座」より

スケジュール

1. オリエンテーション、作業環境の確認
2. JavaScriptにおける変数や四則演算の扱い
3. 配列
4. 条件分岐と繰り返し
5. 関数
6. オブジェクト
7. ブラウザの操作方法
8. DOM（HTML・CSSの操作）
9. イベント
10. 通信を扱う基本的な内容
11. これまでに扱った内容の確認、応用
12. 課題制作1　アイデア発表、計画立て
13. 課題制作2　動作確認
14. 課題制作3　成果発表、ブラッシュアップ

※扱う文法事項は内容によって前後することがあります
※進捗により調整することがあります

授業資料の提示方法

• 授業用サイト（本サイト）
• Microsoft Teams（授業に関するお知らせ）
• 学科サイト（課題の公開）

評価方法

• 成果物（内容、ビジュアル、ユーザビリティ、技術水準） 70%
• 企画報告等のプレゼンテーション　30%

条件

• 学科サイトの個人ページに、演習の内容を全て記録すること
• 成果物を学科サイト上からリンクし、閲覧できるようにすること

授業の演習では、様々なプログラムのサンプルを作り、GitHubにアップロードしていきます。また、最終課題では、自分で内容を決めて、作品を制作します。

これらの成果を学科サイト上からリンクして見られるようにしてください。

参考書籍

• 「スラスラわかるJavaScript新版」桜庭洋之, 望月幸太郎, 翔泳社, 2022
• 「1冊ですべて身につくJavaScript入門講座」Mana, SBクリエイティブ, 2023

出席簿

出席簿（確認用）

今日の内容

• 作業環境の確認
  • Visual Studio Code
  • Github
  • Google Chrome
• 演習で使用する空のファイルの準備
  • JavaScriptを書くための準備
• 参考：HTML・CSSの基本
  • Web制作に関する基本用語・技術
  • Webページ制作の練習
  • CSSの基本
  • JavaScriptの体験

JavaScriptの体験：コンソールを使う

GoogleChromeのコンソールを使って、直接JavaScriptを入力してみます。

console.log('Hello world!');

console.log(1+2);

初回アンケート

今後、授業の中で取り組んでみたい技術について、アイデアを募集します。ただし、授業は基礎→応用の順に進行するため、難易度が高い場合には、取り扱えないこともあります。

→初回アンケート　※9/17（火）9:00以降

※これまでの例

• ハンバーガーメニュー
• スクロールアニメーション
• マップ

授業の録画

授業の解説部分の録画はMoodleに掲載しています。
※第１回分を掲載しました（2024.09.18）

Moodle　※要ログイン