N予備校:プログラミング入門 Webアプリ 3日目

学んだこと

  • Web ページの企画とデザイン

Web ページの企画とデザイン

「あなたのいいところ診断」というWEBページの作成。

  • 入力欄はinputタグ(HTML)
  • type属性にtextと記載するとテキストフィールドになる。
  • margin と padding という 2 種類の余白

    • margin は境界線より 外側 の余白、padding は境界線より 内側 の余白
    • border は none(非表示)にした場合でも、あくまで見えないだけで両者の境界として存在している
  • メソッドのコメントはJSDoc形式

/**
* 名前の文字列を渡すと診断結果を返す関数
* @param {string} userName ユーザーの名前
* @return {string} 診断結果
*/
  • 正規表現で文字列置換
    • /\{userName\}/gで{userName} という文字列自身に合うものを複数回適用するという意味
  • console.assertでテスト記載可能。
    • 第一引数には、正しい時に true となるテストしたい式を記入
    • 第二引数には、テストの結果が正しくなかった時に出したいメッセージを記入
  • 何もない場所に、プログラムから利用できるエリアを確保するためには、 divタグを利用
    • このタグを使ってマークアップしておくと、そこにプログラムから何かしらの表示をさせたり、スタイルシートで表示を変更したりすることができて便利
  • () => {}という記述で無名関数を記載可能。(アロー関数)
  • JavaScript の論理評価
    • true 以外の値でも殆どの場合 true と評価される
    • 以下の値はfalseになる
      • false
      • null
      • undefined
      • 空文字列 ''
      • 数値の 0
      • 数値の NaN (非数という、数値にできないことを意味する特殊な値)
  • URIエンコード
    • encodeURIComponent 関数で 文字列を URI エンコードされたものへ変換
    • decodeURIComponent 関数で URI エンコードされた文字列から元のものへ復元

感想

第1章終了!!
第1章はjavascript,HTML,CSSについて学べた。ここまでが書籍になっているのかな?全てのコードについて記載されており、コピペでも実行できるので、初心者でも割と進めやすいんじゃないかな~と感じた。
第2章はGitの操作等なじみのない部分が入ってくるので楽しみ。