不惑にしてまだ何者でもない者のブログ

Arduino関連、Raspberry Pi関連、プログラミング学習

paizaラーニング『JavaScript入門編1: JavaScriptをはじめよう (全9回) 』を受講してみた

2020-10-17 17:19:11 | paiza
さぁ契約期間中にどんどん進めて行こう。
今度は『JavaScript入門編 (全4レッスン) 』を始める。
まず、『JavaScript入門編1: JavaScriptをはじめよう (全9回)』から受講。


01:JavaScriptとは？

  • JavaScriptで何ができるのか
    • Webページの制御：ブラウザで実行
    • Webサイトの制御：サーバーで実行（Node.js）
    • デスクトップ／スマホアプリの開発
  • 採用例
    • Bootstrap：HTMLフレームワーク
    • Googleマップ：Webサービス（フロントエンド）
    • Netflix, PayPal：Webサービス（Node.js）
  • JavaScriptの特徴
    • 1990年代に登場
    • 主要なWebブラウザに搭載のスクリプト言語
    • Node.jsの登場で、サーバーサイドでも利用が広がる
    • 用途の合わせたライブラリが充実している
      （jQuery, Node.js）

02:JavaScriptでプログラムを書いてみよう

  • hello world
process.stdin.resume();
process.stdin.setEncoding('utf8');
// Here your code !
console.log("hello world");

03:コメントで、プログラムを見やすく！

  • JavaScriptでは、「//」から行末までがコメントになる
  • 複数の行をコメントアウトするときは、コメント行の先頭に「/∗」を、末尾に「∗/」を記述

04:HTMLを表示してみよう

  • JavaScriptで改行しない場合
    • process.stdout.write（スタンダードアウト ライト）関数を使う
  • 改行する場合："\n"を追加する
    • console.log("文字列")
    • process.stdout.write("文字列\n")

05:変数を使えるようになろう

  • 変数名の付け方
    • 最初の1文字目：英文字または、「_」(アンダーバー)
    • 2文字目以降　：英文字・数字または、「_」(アンダーバー)

06:サイコロを作ろう

  • Math.random()：0以上1未満のランダムな数値を出力する
  • parseInt()：小数点以下を切り捨てて整数にする

07:演算子で計算してみよう

  • 基本的な演算子
    • +：足し算
    • -：引き算
    • *：掛け算
    • /：割り算
    • %：剰余

08:値段を計算してみよう

  • ここまでの応用として、演算子とrandom関数を使って、リンゴの値段を計算する

09:データの型を覚えよう

  • データ型
    • 整数
    • 文字列

感想

簡単だったが、実際の環境で、JavaScript単体をどうやって動かすのかがわからない。
多分、HTMLに組み込んで使うんだろな。


paizaラーニング『HTML/CSS入門編3: HTML要素を学ぼう (全6回) 』を受講してみた

2020-10-17 00:21:26 | paiza
本講座最後のレッスン3『HTML/CSS入門編3: HTML要素を学ぼう (全6回)
』を受講。
最後は再びHTMLらしい。


あれ？またまた、声優さんの声が違う！？
レッスン1と同じかな？レッスン2とは違うよな？😟 

01:画像とリンクを載せよう

  • imgタグ：＜img＞タグのsrc属性で指定した画像を表示。単独で使う。
  • アンカータグ：＜a＞タグのhref属性で指定したアドレスにリンクを張る。＜a＞と＜/a＞の間のテキストや画像が、リンクとして表示される。
    • target属性は、リンク先を同じウィンドウで開くか、別ウィンドウで開くかを指定できる。
      • 「_blank」とすると別ウィンドウで開く
      • 省略すると、同じウィンドウで表示
  • Bootstrapを使って画像を自動調節する
    • ＜img class="img-responsive center-block" src="http://(URL)"＞

02:リストとナビゲーションバーを追加しよう

  • 見出し
    ＜h1>と</h1>の間が、表題になる。
    ＜h2>と</h2>の間が、大見出しになる。
    ＜h3>と</h3>の間が、中見出しになる。
    ＜h4>と</h4>の間が、小見出しになる。
  • 箇条書き
＜ul>
　＜li>ねこ</li>
　＜li>いぬ</li>
　＜li>うさぎ</li>
＜/ul>
  • Bootstrapを使ったナビゲーションバーの表示
    • ＜nav class="navbar navbar-inverse navbar-fixed-top">
  • ページ内のリンク
    • href="#"はページの先頭へのリンク
＜a href="#list">List</a>

＜h2 id="list">動物リスト</h2>

なんか次で最後のチャプターとか言ってたけど、このレッスン3はチャプター6まであるよな。
昔はチャプター3までしかなかったのだろう。

03:テーブルを表示しよう

  • テーブルの基本形
＜table>
　＜thead>＜!-- ここが表題-->
　　＜tr>＜!-- 横一行ごとに記述する-->
　　　＜th>#</th>
　　　＜th>名前</th>
　　　＜th>特徴</th>
　　　＜th>住所</th>
　　＜/tr>
　＜/thead>
　＜tbody>＜!-- ここが表の本体-->
　　＜tr>＜!-- 横一行ごとに記述する-->
　　　＜td>1</td>
　　　＜td>たま</td>
　　　＜td>くつ下</td>
　　　＜td>東京都港区南青山</td>
　　＜/tr>
　＜/tbody>
＜/table>

04:基本的なフォームを作ろう

  • フォームの基本形
＜form action="#" method="post">
　＜label for="comment_1">コメント</label>
　＜input type="text" name="comment">
　＜button type="submit">送信する</button>
＜/form>

05:フォームにパーツを追加しよう

  • 複数行のテキストエリアの基本形
＜form action="#" method="post">
　＜label for="message">メッセージ</label>
　＜textarea name="message" id="message" rows="3"></textarea>
　＜button type="submit">送信する</button>
＜/form>
  • Bootstrapでの複数行のテキストエリアの基本形
＜form action="#" method="post">
　＜div class="form-group">
　　＜label for="message">メッセージ</label>
　　＜textarea class="form-control" name="message" id="message" rows="3">　　　</textarea>
　＜/div>
　＜button type="submit">送信する</button>
＜/form>
  • プルダウンメニューの基本形
＜form action="#" method="post">
　＜select name="select" id="select">
　　＜option>タマ</option>
　　＜option>ミケ</option>
　　＜option>トラ</option>
　＜/select>
＜/form>

06:グリッドでフォームを作ろう

  • Bootstrapのグリッドの基本形
＜div class="container">
　＜div class="row">
　　＜div class="col-sm-12">
　　　＜h1>1行目</h1>
　　＜/div>
　＜/div>
　＜div class="row">
　　＜div class="col-sm-4">
　　　＜h2>2行目のA</h2>
　　＜/div>
　　＜div class="col-sm-4">
　　　＜h2>2行目のB</h2>
　　＜/div>
　　＜div class="col-sm-4">
　　　＜h2>2行目のC</h2>
　　＜/div>
　＜/div>
＜/div>
＜!-- /.container -->

感想

とりあえず、『HTML/CSS入門編 (全3レッスン)』の全3レッスンに関して、認定証を取得した。
認定証をまたみたいときはどうやってアクセスするんだろう？
まぁこれが何の役に立つかわからないけど。