2021-11-14

【JavaScript】DOM操作

f:id:fuuengineer:20211114214558p:plain

idをキーに要素を取得

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>IDをキーに要素を取得</title>
  </head>
  <body>
    <p id="result">pタグの文字列です。</p>
    <input type="button" value="取得" onclick="show()">
    <script src="js/element_id.js"></script>
  </body>
</html>

javascript

// IDをキーに要素を取得
// getElementByIdメソッド

// 現在のid:resultの内容（テキスト）をコンソールに表示。
// id:resultの内容（テキスト）を、現在時刻（日時）に書き換え。

// show関数を実行
function show() {
  // resultのidを変数に代入
  var result = document.getElementById('result');
  // pタグの内部をコンソールに表示
  console.log(result.innerText);
  // 現在時刻を取得して変数に代入
  var nowDate = new Date();
  // 日本でよく使う日時の表現に変換
  result.innerText = nowDate.toLocaleString();
}

タグ名をキーに要素を取得

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タグ名をキーに要素を取得</title>
  </head>
  <body>
    <div>要素1(div)</div>
    <p>要素2(p)</p>
    <div>要素3(div)</div>
    <span>要素4(span)</span>
    <div>要素5(div)</div>

    <input type="button" value="取得" onclick="showElements()">  
    <script src="js/elements_tag_name.js"></script>
  </body>
</html>

javascript

// タグ名がdivの要素を取得し、その内容（テキスト）をコンソールに出力する。
function showElements() {
  var elements = document.getElementsByTagName('div');
  for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].innerText);
  }
}

name属性をキーに要素を取得

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>name属性をキーに要素を取得</title>
  </head>
  <body>
    <input type="text" name="result">
    <input type="button" value="取得" onclick="showElements()">
    
    <script src="js/elements_name.js"></script>
  </body>
</html>

javascript

// テキストボックスとボタンを配置、
// ボタンをクリックしたら、
// name属性が’result’の要素を取得して、その入力内容（テキスト）をコンソール表示する。
function showElements() {
  // 要素複数
  var elements = document.getElementsByName('result');
  // elementsのオブジェクトの中からコンソールに出力
  console.log(elements[0].value);
}

class属性をキーに要素を取得

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>class属性をキーに要素を取得</title>
  </head>
  <body>
    <ul>
      <li class="foo">要素1</li>
      <li class="bar">要素2</li>
      <li class="foo">要素3</li>
      <li>要素4</li>
      <li class="bar">要素5</li>
    </ul>
    <input type="button" value="取得" onclick="showElements()">
    <script src="js/elements_class.js"></script>
  </body>
</html>

javascript

// ボタンをクリックしたら、class名が’foo’の要素を取得し、
// その内容（テキスト）をコンソールに出力する。
function showElements() {
  var elements = document.getElementsByClassName('foo');
  for(var i = 0; i < elements.length; i++) {
    console.log(elements[i].innerText);
  }
}

ノードを追加

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ノードを追加</title>
  </head>
  <body>
    <ul id="lists">
    </ul>
    <input type="button" value="取得" onclick="append()">
    <script src="js/append_child.js"></script>
  </body>
</html>

javascript

// 空のリスト、ボタンを配置
// ボタンをクリックすると、
// リストの項目が追加される。
// 追加される文字列は”追加文字列”とする。
function append() {
  // li要素を生成
  var li = document.createElement('li');
  // テキストノードを生成
  var text = document.createTextNode('追加文字列');
  // liタグの要素に、テキストノード textを追加
  li.appendChild(text);
  // idがlistsのulタグに、liを追加。具体的には<li>追加文字列</li>が、追加される。
  lists.appendChild(li);
}

ノードの置換

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ノードの置換</title>
  </head>
  <body>
    <ul>
      <li id="oldList">古い要素です</li>
    </ul>
    <input type="button" value="置換" onclick="replace()">
    <script src="js/replace_child.js"></script>
  </body>
</html>

javascript

// リストとボタンを配置
// ボタンをクリックしたら、リストの子要素を置換する処理
function replace() {
  // 空のli要素を作成
  var newList = document.createElement('li');
  // 生成したノードにid属性"newList"を付与
  newList.setAttribute('id', 'newList');
  // テキストノードを生成
  var newText = document.createTextNode('新しい要素です');
  // 生成したノードを、空のli要素の子ノードとして追加
  newList.appendChild(newText);
  // 置換前の変数oldListの参照を変数oldListに代入。
  // (参照とは、オブジェクトへのリンクのことを言う)
  // https://developer.mozilla.org/ja/docs/Glossary/Object_reference
  var oldList = document.getElementById('oldList');
  // 親ノードulの参照を変数parentNodeに代入
  var parentNode = oldList.parentNode;
  // 既存ノードoldListを、新規に作成したli要素newListと置換
  parentNode.replaceChild(newList, oldList);
}

ノードの削除

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ノードの削除</title>
  </head>
  <body>
    <ul id="lists">
      <li>要素1</li>
      <li>要素2</li>
      <li>要素3</li>
      <li>要素4</li>
      <li>要素5</li>
    </ul>
    <input type="button" value="削除" onclick="remove()">
    <script src="js/remove_child.js"></script>
  </body>
</html>

javascript

// リストとボタンを設置
// ボタンをクリックすると
// リストの子要素が最後のものから削除される
function remove() {
  var parentElement = document.getElementById('lists');
  var elements = parentElement.getElementsByTagName('li');
  var removeIndex = elements.length - 1;
  parentElement.removeChild(elements[removeIndex]);
}

ノードを追加の応用

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ノードを追加</title>
  </head>
  <body>
    <ul id="lists">
    </ul>
    <input type="text" id="textBox">
    <input type="button" value="追加" onclick="append()">
    <script src="js/exercise.js"></script>
  </body>
</html>

javascript

// 「ノードを追加」のレクチャーで学習したコードを改修、
// ユーザーがテキストボックスに文字列を入力後
// ユーザーがボタンを押すと
// リストの最後の項目として文字列が追加されるプログラムを書いてみましょう。

// 補足
// テキストボックスの要素を取得するには、getElementByIDを利用できる。

function append() {
  // テキストボックスの要素を取得
  var textBox = document.getElementById('textBox');
  // li要素を生成
  var li = document.createElement('li');
  // テキストノードを生成
  var text = document.createTextNode(textBox.value);
  // liタグの要素に、テキストノード textを追加
  li.appendChild(text);
  // idがlistsのulタグに、liを追加。具体的には<li>追加文字列</li>が、追加される。
  lists.appendChild(li);
}

2021-11-08

JavaScriptで数学の計算をしよう！

f:id:fuuengineer:20211108214630p:plain
問題1. 1〜100の整数かつ偶数の値について、合計値を計算してコンソールに出力してみましょう。

ヒント : 繰り返し処理for文を利用。数値が偶数であることを判定するには、数値を2で割ったときに割り切れるかどうか（=余りが0）で確認できます。

答え. 2550

var sum = 0;
for (var i = 1; i <= 100; i++) {
  if ((i % 2) == 0) {
    sum += i;
  }
}

console.log(sum);

問題2. テストの点数の、合計値、平均値を求めよ。集計する各点数は、100, 90, 80, 70 ,60 とする。

ヒント :
1.点数を、変数scoresに配列として格納。
2.合計値を格納する変数sumを宣言し、0で初期化。
3.繰り返し処理により、配列に格納した点数を一個づつ取り出し、
4.合計値を格納する変数に足してゆく。
5.繰り返し処理が終わったら、平均値averageを求める。合計値 / 配列の長さ
6.最後に、合計値、平均値を、コンソールに出力する。

補足配列の長さを求めるには .length プロパティを使用する。例) scores.length

答え.合計値 : 400, 平均値 : 80

var scores = [100, 90, 80, 70, 60];
var sum = 0;
for (var i = 0; i < scores.length; i++) {
  sum += scores[i];
}

var average = sum / scores.length;
console.log('合計値 :' + sum);
console.log('平均値 :' + average);

問題3. 佐藤さんが1個100円(税込)のりんごを、13個買いました。りんごの単価と値段を関数の引数に渡すと、合計金額を計算して返す関数を作成。作成した関数を呼び出して、佐藤さんの支払金額はいくらになるか計算して、コンソールに出力する。
補足：関数の定義方法は、function命令を用いる。
参考：関数名はprice
参考：引数単価はの変数名は、unitPrice
参考：引数個数の変数名は、n

答え. 1300

function price(unitPrice, n) {
  return unitPrice * n;
}

console.log(price(100, 13));

数学好きな私にとって、興味深くブログに上げさせていただきました。問題1は高校生の頃、数列を使って解いていた記憶が微かにあります。コンピュータで処理するとこんなにも簡単に計算することができるのかと感心しました。プラグラミングの興味深さが探究できてとても良い機会となりました！

2021-11-07

Cafeのウェブサイトを作る②【CSS】

完成図は以下の通り。

f:id:fuuengineer:20211103185626p:plain — 完成図①

f:id:fuuengineer:20211103185745p:plain — 完成図②

こちらのcssは以下の通り。

@charset "utf-8";

/* common */
html {
  font-size: 100%;
}

body {
  /* font-familyは左からmac, windows, その他 */
  font-family: "Hiragino Kaku Gothic proN", "メイリオ", sans-serif;
  color: #555;
  /* 行間を空ける */
  line-height: 1.5;
}

img {
  width: 100%;
}

.wrapper {
  max-width: 940px;
  /* 0は上下の指定、autoは左右の指定(コンテンツが中央に来るように設定) */
  margin: 0 auto;
  /* スマホの画面設定(左右に余白がつく) */
  padding: 0 10px;
}
/* ここまでが共通部分 */

/* header */
header {
  border-top: 8px solid #8c6239;
}

.header_logo {
  width: 90px;
}

.header_content {
  /* 子要素を横並びにする */
  display: flex;
  align-items: center;
  /* 子要素を両端に離す */
  justify-content: space-between;
  margin: 10px auto;
}

header nav ul {
  display: flex;
}

header nav ul li {
  margin-left: 30px;
}

header nav ul li a {
  /* アンダーライン消す */
  text-decoration: none;
  color: #555;
}

header nav ul li a:hover,
header nav ul li a:active,
header nav ul li.current a {
  color: #8c6239;
}

#main_image {
  width: 100%;
  height: 50vh;
  background-image: url(../images/cafe.jpg);
  background-repeat: no-repeat;
  background-position: center;
  /* 画像をできるだけ拡大 */
  background-size: cover;
}
/* ここまでがheader */

/* contents */
.contents {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

#main_content {
  width: 65%;
}

#sidebar {
  width: 31%;
}

#home h2 {
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid #8c6239;
  /* 親要素のサイズを基準の1として1.2倍 */
  font-size: 1.2rem;
}

#info dl {
  display: flex;
  /* itemを改行 */
  flex-wrap: wrap;
  margin-bottom: 50px;
}

#info dt {
  width: 7em;
}

#info dd {
  /* 横幅を計算 */
  width: calc(100% - 7em);
}

#info dt,
#info dd {
  margin-bottom: 10px;
}

#campain ul li {
  margin-bottom: 10px;
  /* 丸ブロを消す */
  list-style-type: none;
}

#sidebar ul li {
  margin-bottom: 20px;
  list-style-type: none;
}

/* footer */
footer {
  margin-top: 100px;
  padding: 30px;
  text-align: center;
  color: #fff;
  background-color: #a67c52;
}

footer ul {
  margin-bottom: 20px;
  font-size: 0.9rem;
}

footer ul li {
  /* 子要素を横並びにし、幅を臨機応変に変える */
  display: inline-block;
  margin: 5px;
}

footer ul li a {
  color: #fff;
}

footer ul li a:link {
  text-decoration: none;
}

footer ul li a:hover,
footer ul li a:active {
  /* 不透明度 */
  opacity: .7;
}

small {
  font-size: 0.7rem;
}

/* responsive(スマホ対応) */
@media(max-width: 600px) {
  html {
    font-size: 87.5%;
  }

  .header_logo {
    width: 60px;
  }

  .contents {
    /* 子要素を縦に並ぶようにする */
    flex-direction: column;
    margin-top: 10px;
  }

  #main_content,
  #sidebar {
    width: 100%;
  }
}

CSS部分は一つ一つ理解していくことが重要だなと感じました。今自分が書いているコードを実際に実行させてみて、どういうデザインになるのか一つ一つ確かめながら勉強していくことで上記のコードを理解することができました。このブログは備忘録としても活用し、常日頃見返していこうと思います。

参考文献 : 中村祐太. ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！

ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！ | Udemy

2021-11-03

Cafeのウェブサイトを作る①【HTML】

完成図は以下の通り。

こちらのhtmlは以下の通り。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <!-- 実務上は大抵このviewportを設定 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- ディスクリプション -->
  <meta name="description" content="CSS Cafeの公式ウェブサイトです。商品情報、店舗紹介、アクセス、会社情報など"> 
  <title>CSS Cafe</title>
  <link rel="stylesheet" href="css/html5reset-1.6.1.css">
  <link rel="stylesheet" href="css/base.css">
</head>
<body id="home">
  <header id="top">
    <div class="header_content wrapper">
      <h1><img class="header_logo" src="images/logo.png" alt="CSS Cafe"></h1>
      <nav>
        <ul>
          <li class="current"><a href="index.html">Home</a></li>
          <!-- #はダミーのURL -->
          <li><a href="#">Menu</a></li>
          <li><a href="#">Access</a></li>
        </ul>    
      </nav>
    </div>  
    <div id="main_image">

    </div>
  </header>

  <div class="contents wrapper">
    <main id="main_content">
      <section id="info">
        <h2>お知らせ</h2>
        <dl>
          <dt>2020/3/10</dt>
          <dd>リニューアルオープンしました。</dd>
          <dt>2020/4/15</dt>
          <dd>4/27（金）は設備メンテナンスのため休業いたします。</dd>
          <dt>2018/4/20</dt>
          <dd>ゴールデンウィークは休まず営業いたします</dd>
          <dt>2020/6/20</dt>
          <dd>こだわりのパンに合わせたスペシャルデザートが登場</dd>
          <dt>2020/7/10</dt>
          <dd>営業時間の一部変更について</dd>
        </dl>    
      </section>

      <section id="campain">
        <h2>キャンペーン情報</h2>
        <ul>
          <li>日頃の感謝を込めて、パスタ全品がいつもよりお得に！</li>
          <li>平日11時から14時までお得なランチタイムを実施中。</li>
          <li>バイオリン演奏付きのスペシャルディナーイベントの早期予約受付中。</li>
          <li>夏限定のスペシャルフルーツサンドを楽しもう！</li>
        </ul>       
      </section>
    </main>

    <aside id="sidebar"> 
      <ul>
        <li>
          <a href="#">
            <img src="images/banner01.png" alt="季節のおすすめ商品はこちら">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/banner02.png" alt="コーヒー豆の知識">
          </a>
        </li>
      </ul>      
    </aside>
  </div>

  <footer>
    <ul>
      <li><a href="index.html">ホーム</a></li>
      <li><a href="#">商品情報</a></li>
      <li><a href="#">店舗紹介</a></li>
      <li><a href="#">アクセス</a></li>
      <li><a href="#">会社情報</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
    <small>&copy; 2020 CSS Cafe</small>
  </footer>
</body>
</html>

参考文献 : 中村祐太. ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！

ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！ | Udemy

2021-10-27

HTML 備忘録

入力フォーム

f:id:fuuengineer:20211026210519p:plain — 図1 入力フォーム

図1の入力フォームのHTMLは以下の通り。

<form action="#" method="POST">
    <dl>
      <dt><label for="username">お名前</label></dt>
      <dd><input id="username" type="text" name="username"></dd>

      <dt><label for="email">メールアドレス</label></dt>
      <dd><input  id="email" type="text" name="email"></dd>
    </dl>
</form>

labelを加えることによって、お名前またはメールアドレスの文字をクリックしても、入力可能とすることができる。

プルダウン

f:id:fuuengineer:20211026211704p:plain — 図2 プルダウン

図2のプルダウンのHTMLは以下の通り。

<form action="#" method="POST">
    <dl>
      <dt><label for="area">お住まいの地域</label></dt>
      <dd>
        <select id="area" name="area">
          <option value="" selected>選択してください</option>
          <option value="hokkaido">北海道</option>
          <option value="tohoku">東北</option>
          <option value="kanto">関東</option>
          <option value="tyubu">中部</option>
          <option value="kinki">近畿</option>
          <option value="shikoku">四国</option>
          <option value="kyushu">九州</option>
          <option value="okinawa">沖縄</option>
        </select>
      </dd>
    </dl>
</form>

option要素にselectedオプションをつけることによって、その部分が最初に選択されている状態に設定できる。

ラジオボタン

f:id:fuuengineer:20211026212749p:plain — 図3 ラジオボタン

図3のラジオボタンのHTMLは以下の通り。

<form action="#" method="POST">
    <dl>
      <dt>性別</dt>
      <dd>
        <label><input type="radio" name="gender" value="male" checked>
          男性
        </label>
        <label><input type="radio" name="gender" value="female">
          女性
        </label>
      </dd>
    </dl>
</form>

ここでのlabelの使い方は今までと違う。labelでinput要素を囲むような使い方もあることに注意。checkedオプションを使うことにより、その部分が最初に選択されている状態に設定できる。

テキストエリア

f:id:fuuengineer:20211026214040p:plain — 図4 テキストエリア

図4のテキストエリアのHTMLは以下の通り。

<form action="#" method="POST">
    <dl>
      <dt><label for="contents">お問い合わせ内容</label></dt>
      <dd><textarea id="contents" name="contents"></textarea></dd>
    </dl>
</form>

チェックボックス

f:id:fuuengineer:20211026214658p:plain — 図5 チェックボックス

図5のチェックボックスのHTMLは以下の通り。

<form action="#" method="POST">
    <dl>
      <dt><label for="privacy">プライバシーポリシーに同意する</label></dt>
      <dd><input id="privacy" type="checkbox" name="privacy" value="1"></dd>
    </dl>
</form>

送信ボタン

図6 送信ボタン

図6の送信ボタンのHTMLは以下の通り。

<form action="#" method="POST">
    <input type="submit" name="submit" value="送信">
</form>

最後に

これら全てを組み合わせたもの(お問い合わせフォーム)が以下の図となる。

f:id:fuuengineer:20211026215728p:plain — 図7 お問い合わせフォーム

2021-10-07

$ git configの重要性

私は最初のGitの初期設定を疎かにしてしまい、学習を進めていく上で途中で詰まってしまいました。ここで基本的なGitの初期設定についてコマンドを用いて解説します。

$ git config --global user.name "githubに登録したユーザーネーム"
$ git config --global user.email githubに登録したメールアドレス
$ git config --global core.editor "これから使うエディタ名 --wait"

ここでのconfigというのは「設定」という意味です。--globalは「Gitはその後、そのシステム上で行う全ての操作に対して常にこの情報を使う」ということです。

私が疎かにしたのは3番目のcore.editorを設定していなかったことです。何を思ったか、この設定がされていなかったのです。このことに気づいたのは学習を進めていく中で、ブランチを切り替える方法について学習している時でした。ブランチを2つ作り、その片方に新しいファイルを作って保存しました。その変更を$ git addでステージに追加し、$ git commitで変更を記録しました。ほっとしてもう一方のブランチに切り替え、$ lsで中身を確認するとその中に先程の新しく作ったファイルがあるのです。「ブランチって同時に並行に開発できる便利なツールなのに、これじゃ2つのブランチがあっても意味ないじゃん」と思いました。その時のコマンドは以下の通りです。

$ git checkout feature
Switched to branch 'feature'
$ git branch
* feature
  main
$ git status
On branch feature
Untracked files:
  (use "git add <file>..." to include in what will be committed)
    feature.html

nothing added to commit but untracked files present (use "git add" to track)
$ git add .
$ git commit
$ ls
feature.html    home.html   index.html  secret.txt
$ git checkout main
A   feature.html
Switched to branch 'main'
Your branch is up to date with 'origin/main'.
$ git branch
  feature
* main
$ ls
feature.html    home.html   index.html  secret.txt

まさかと思い、$ rmを実行し、feature.htmlファイルを消して再度挑戦しました。やはり同じ結果でした。根本的にエディタが機能していないのではないかと勘ぐりました。そこでGitのエディタを確認してみるとやはり設定されてませんでした。ここで初期設定の重要性を改めて感じました。こういうミスは珍しいとは思いますが、初期設定の重要さを知れた良い機会だと思ってこれからも学習していこうと思います。

補足 : 初期設定の確認方法

$ git config user.name
$ git config user.email
$ git config core.editor

2021-10-03

error: failed to push some refs to 'URL'.gitの対処法【git】

下記のエラーは私がコミットしたローカルの変更をリモートにプッシュした際にでたエラーです。

$ git push origin main
To https:///githubのURL 
[rejected]main -> main (non-fast-forward)error: failed to push some refs to 'https://githubのURL'.git

hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

私が先にgithubのindex.htmlの内容を変更し、その後にコミットしたことがエラーの原因となったと考えます。リモートとローカルの整合性が取れず、プッシュできないとのこと。

解決方法

リモートの変更をマージしてから、改めてpushする。
方法1

$ git pull origin main

方法2

$ git fetch origin main
$ git merge origin/main

最終手段

$ git push -f origin main

この-fは「強制的に」という意味。

fuuengineerのブログ

エンジニアになります。

【JavaScript】DOM操作

idをキーに要素を取得

タグ名をキーに要素を取得

name属性をキーに要素を取得

class属性をキーに要素を取得

ノードを追加

ノードの置換

ノードの削除

ノードを追加の応用

JavaScriptで数学の計算をしよう！

Cafeのウェブサイトを作る②【CSS】

Cafeのウェブサイトを作る①【HTML】

HTML 備忘録

入力フォーム

プルダウン

ラジオボタン

テキストエリア

チェックボックス

送信ボタン

最後に

$ git configの重要性

error: failed to push some refs to 'URL'.gitの対処法【git】

解決方法