4月16日(木)1、2コマ目
今日、やったこと
- JavaScriptの基本文法(配列まで)
- 練習問題1
今日のホワイトボード
この授業では
JavaScriptを扱います。
後期にはJavaScriptを使ったWebアプリケーションを作成します。
今まで作ってきたWebアプリケーション、これから作るWebアプリケーション
1年次に作ったASP.NET CoreのWebアプリケーションは、サーバー側だけでプログラムが動く。
![]() |
| 図 ASP.NET CoreのWebアプリケーション |
クライアントがWebブラウザだけならいいが、HTMLが使えないスマホアプリの場合、データだけを送信してほしい。
ただ、サーバーはデータを返すだけにすると、Webブラウザは対応できない。
そこで、Webブラウザでのプログラムを動かして、データを表示するようにしたい。
Webブラウザ上ではJavaScriptを使ってデータを表示する。
|
| 図 これから作るWebアプリケーション |
この授業はJavaScriptを使って、
- ブラウザ入力値をサーバーに送信する
- サーバーから返信されたデータをブラウザ上で表示
ことがゴール。
プログラム実行
Webブラウザ(Google Chrome)の開発者ツールを使う。
開発者ツールのコンソールでプログラム入力、実行する。
変数
非厳密モード(デフォルト)なら宣言不要。
宣言時に型指定不要。値を代入時に型が決まる。
この授業ではlet、constで変数宣言。varは使わない。
![]() |
| 図 JavaScriptの変数 |
等価演算子
C言語に近いのは===。
でも、==も意外と便利。
![]() |
| 図 2つの等価演算子 |
for in、for of
for inは添字を順に取り出し。
for ofは要素を順に取り出し。
![]() |
| 図 for inとfor ofの違い |
連想配列
配列は添字と要素が紐づく。
連想配列はキーと要素が紐づく。
![]() |
| 図 連想配列 |
連想配列は要素に順番がない。よって、for ofが使えない。
※for ofは要素を順に取り出す
練習問題1
演習問題は
①エディタに入力、コピー
②Chromeのコンソールに貼り付け、実行
でやってください。
また、厳密モードON('use strict';)にしてください。
1-1
1-2
1-3
1-4
連想配列を使うと便利。
文字列に変数を埋め込む
+演算子で文字列と変数を結合することもできるが、``内に${変数名}で変数を埋め込むこともできる。
![]() |
| 図 文字列中に変数を埋め込む |
!!注意!!
`はバッククォート。シングルクォーテーションではない。
次回は
関数をやります。






