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

連想配列を使うと便利。


文字列に変数を埋め込む

+演算子で文字列と変数を結合することもできるが、``内に${変数名}で変数を埋め込むこともできる。

図 文字列中に変数を埋め込む

!!注意!!

`はバッククォート。シングルクォーテーションではない。

次回は

関数をやります。

このブログの人気の投稿

5月28日(木)1、2コマ目

5月21日(木)1、2コマ目

5月14日(木)1、2コマ目