2025/09/16 1限 DL502
本授業は、Webのおける通信技術の基礎の習得を目的とした演習で、主にJavaScriptを扱います。最終的には各自サイトをアップロードし、ブラウザ上で動作するインタラクティブな機能を持つWebサイトを制作します。
JavaScriptでできること
- HTMLやCSSの書き換え
- テキストの書き換え
- 画像の変更
- 色の変更
- ユーザーのアクションに応じた動きを付ける
- スクロールすると表示
- 入力フォームのチェック(フォームバリデーション)
…など、HTML+CSSで制作したサイトに様々機能を追加できるようになります。
※「JavaScript入門講座」より
スケジュール
3Q
基礎・文法中心
- オリエンテーション、作業環境の確認
- DOM/変数・定数/イベント
- 条件分岐
- 配列・繰り返し
- 関数
- オブジェクト
- Web API
4Q
応用・課題制作
- 通信を扱う基本的な内容1
- 通信を扱う基本的な内容2
- これまでに扱った内容の確認、応用
- 課題制作1 アイデア・計画立て
- 課題制作2 プロトタイプ
- 課題制作3 ブラッシュアップ
- 課題制作4 成果発表
※扱う文法事項は内容によって組み合わせたり前後したりすることがあります
※進捗により調整することがあります
授業資料の提示方法
- 授業用サイト(本サイト)
- Microsoft Teams(授業に関するお知らせ)
- 学科サイト(課題の公開)
評価方法
- 成果物(内容、ビジュアル、ユーザビリティ、技術水準) 70%
- 企画報告等のプレゼンテーション(学科サイトの編集を含む) 30%
条件
- 学科サイトの個人ページに、演習の内容を全て記録すること
- 成果物を学科サイト上からリンクし、閲覧できるようにすること
授業の演習では、様々なプログラムのサンプルを作り、GitHubにアップロードしていきます。また、最終課題では、自分で内容を決めて、作品を制作します。
これらの成果を学科サイト上からリンクして見られるようにしてください。
参考書籍
- 「スラスラわかるJavaScript新版」桜庭洋之, 望月幸太郎, 翔泳社, 2022
- 「1冊ですべて身につくJavaScript入門講座」Mana, SBクリエイティブ, 2023
- 「独習JavaScript 新版」外村将大, 翔泳社, 2021
出席簿
出席簿(確認用)
今日の内容
- 作業環境の確認
- 演習で使用する空のファイルの準備
- 参考:HTML・CSSの基本
- Web制作に関する基本用語・技術
- Webページ制作の練習
- CSSの基本
- JavaScriptの体験
- 過去の演習内容(JavaScriptの項を参照)
- データ型・演算子
JavaScriptの体験:コンソールを使う
ブラウザの「コンソール」を使って、直接JavaScriptを入力してみます。
※コンソールとは…ブラウザの開発機能の一種。エラーログを確認したりプログラムを実行したりすることができます。JavaScriptの演習では頻繁に使いますので、各ブラウザでの動作を確認しておきます。
console.log('Hello world!');
console.log(1+2);
→資料:データ・演算子
授業の録画
授業の解説部分の録画はMoodleに掲載します。
Moodle ※要ログイン