男子プログラマーになりたいやつ

未経験から一端のエンジニア目指し日々勉強中です。

JavaScript DOM編 vol.4

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> DOM編 vol.4 f:id:TomozQ:20201117215135j:plain

JavaScript備忘録 Vol.15

目次
  • input要素の操作
  • セレクトボックスの操作




今回もJavaScriptの記事になっています。

input要素の操作

ここではinput要素に入力された値をリストに追加していきたいと思います。

index.html
<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <input type="text">
    <button>追加</button>

    <ul>
      
    </ul>
    <script src='js/main.js'></script>
  </body>
</html>


js/main.js
'use strict'

{
  document.querySelector('button').addEventListener('click',() => {
    
  })
}

f:id:TomozQ:20201117214513p:plain

まずはli要素を作りましょう。

{
  document.querySelector('button').addEventListener('click',() => {
    const li = document.createElement('li')
  })
}


document.createElement('li')としてli要素を作ります。


次はinput要素に入力された値を取得します。

{
  document.querySelector('button').addEventListener('click',() => {
    const li = document.createElement('li');
    const text = document.querySelector('input');

    li.textContent = text.value;
  })
}


querySelector('input')としてinput要素を取得しtextという定数に代入
input要素のvalueli要素のtextに指定します。


あとはul要素にli要素を追加していけばいいですね。

{
  document.querySelector('button').addEventListener('click',() => {
    const li = document.createElement('li');
    const text = document.querySelector('input');

    li.textContent = text.value;
    
    const ul = document.querySelector('ul');
    ul.appendChild(li);
  })
}


ul要素を取得して、ul.appendChild(li)としてul要素にli要素を追加していきます。

ブラウザは...

f:id:TomozQ:20201117214449g:plain

こんな感じです。


ただ、入力した文字が消えると尚いいですよね。

{
  document.querySelector('button').addEventListener('click',() => {
    const li = document.createElement('li');
    const text = document.querySelector('input');

    li.textContent = text.value;
    
    const ul = document.querySelector('ul');
    ul.appendChild(li);

    text.value = '';
    text.focus();
  })
}


text.valueに空文字を入力してあげて、ついでにinputにfocusする様にしましょう。 f:id:TomozQ:20201117214428g:plain

いい感じですね

ですが

今のままでは空文字も追加されてしまいます。

f:id:TomozQ:20201117214411g:plain

中身が空文字の時にはulに追加せず、alertを出しましょう。

{
  document.querySelector('button').addEventListener('click',() => {
    const li = document.createElement('li');
    const text = document.querySelector('input');

    li.textContent = text.value;
    
    if(text.value !== ''){
      const ul = document.querySelector('ul');
      ul.appendChild(li);
      text.value = '';
    }else{
      alert('入力してください');
    }

    text.focus();
  })
}

こんな感じで条件分岐すればできますね。

f:id:TomozQ:20201117214348g:plain


セレクトボックスの操作

次はセレクトボックスを操作してみましょう。

index.html
<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <select>
      <option>マグロ</option>
      <option>サバ</option>
      <option>バナナ</option>
    </select>
    <button>追加</button>
    <ul>
      
    </ul>
    <script src='js/main.js'></script>
  </body>
</html>


js/main.js
'use strict'

{
  document.querySelector('button').addEventListener('click',() => {
    
  })
}

ブラウザはこんな感じです。

f:id:TomozQ:20201117214331g:plain

選択された値をリストに追加していきましょう。




まずはli要素を作っていきます。

{
  document.querySelector('button').addEventListener('click',() => {
    const li = document.createElement('li');
  })
}

さっきと同じですね。




次に選択された値を取得しましょう。

{
  document.querySelector('button').addEventListener('click',() => {
    const li = document.createElement('li');

    const food = document.querySelector('select');
    li.textContent = `${food.value}:${food.selectedIndex}`;
  })
}

select要素を取得しfoodという定数に代入
select要素の場合、valueと、selectedIndexとすることでindex番号も取得できるので、どちらも表示してみます。


あとはこれをul要素に追加していきましょう。

{
  document.querySelector('button').addEventListener('click',() => {
    const li = document.createElement('li');

    const food = document.querySelector('select');
    li.textContent = `${food.value}:${food.selectedIndex}`;

    const ul = document.querySelector('ul');
    ul.appendChild(li);
  })
}

この処理もさっきと一緒ですね。

f:id:TomozQ:20201117214314g:plain

また、select要素のvalueにはタグの中身が使われますが、別の値にしたい場合にはHTMLで指定することもできます。

<select>
  <option value='tuna'>マグロ</option>
  <option value='mackerel'>サバ</option>
  <option value='banana'>バナナ</option>
</select>

結果は...

f:id:TomozQ:20201117214257g:plain

こうなります。






今回はここまで

次回は・・・まだまだJS!

それではまた次回!

JavaScript DOM編 vol.3

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> DOM編 vol.3 f:id:TomozQ:20201116221020j:plain

JavaScript備忘録 Vol.14

目次
  • カスタムデータ属性
  • 要素の追加
  • 要素の複製・挿入
  • 要素の削除




今回もJavaScriptの記事になっています。

カスタムデータ属性

まずは最初の段階のindex.htmlとmain.jsの中身です

index.html
<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <h1 id='target'>プログラマー</h1>
    <p>JavaScript.JavaScript.JavaScript.</p>
    <p>React.React.React.</p>
    <p>JQuery.JQuery.JQuery.</p>
    <button id='btn'>Button</button>
    <script src='js/main.js'></script>
  </body>
</html>


js/main.js
'use strict'

{
  function upDate(){
    const target = document.getElementById('target');
    
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

f:id:TomozQ:20201116220127p:plain

ではまず、h1の値を英語で出力してみます

function upDate(){
  const target = document.getElementById('target');
  target.textContent = 'Programer';
}

f:id:TomozQ:20201116220042g:plain target.textContentとしてProgramerを出力してあげる処理ですね。

ここで

この英訳するという処理ですが、こんな書き方もできます。


HTMLでは、'data-'から始めることで独自の属性をつけることができます。

今回の場合だと...

<h1 id='target' data-transration='Programer'>プログラマー</h1>

と書きます。

これをJavaScriptで操作するには...

target.textContent = target.dataset.translation;

この様に書いてあげればOKです。

target.textContent = target.data-translation;

とは書かないことに注意しましょう。

f:id:TomozQ:20201116220042g:plain


要素の追加

次は要素を追加する方法をみていきましょう。

最初はこんな感じ

<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <ul>
      <li>li 0</li>
      <li>li 1</li>
    </ul>
    <button id='btn'>Button</button>
    <script src='js/main.js'></script>
  </body>
</html>


'use strict'

{
  function upDate(){
    
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

f:id:TomozQ:20201116220113p:plain

  1. 新たにli要素を作る
  2. li要素の中身のテキストを作る
  3. 親要素に対し、子要素の末尾に追加する

この手順でやっていきます。

まずは完成版

'use strict'

{
  function upDate(){
    const li2 = document.createElement('li');
    li2.textContent = 'li 2';
    const ul = document.querySelector('ul');
    ul.appendChild(li2);
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

細かく見ていきましょう




1.li要素を作る
const li2 = document.createElement('li');


createElement('li')とすることでli要素を作り、li2という定数に入れます。


2.li要素の中身のテキストを作る
li2.textContent = 'li 2';

textContentとして中身のテキストをli 2とします。


3.親要素に対し、子要素の末尾に追加する

最後に親要素に追加するのですが、いくつか手順を踏みます。

const ul = document.querySelector('ul');

document.querySelector('ul')として、ul要素を取得し、ulという定数に代入します。

ul.appendChild(li2);

ul.appendChild(li2)とすることで親要素のul子要素末尾li2を追加することができます。
f:id:TomozQ:20201116220021g:plain


要素の複製・挿入

次は要素を複製して任意の場所に挿入する方法を見ていきましょう。

HTMLには li 2 を追加し

<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <ul>
      <li>li 0</li>
      <li>li 1</li>
      <li>li 2</li>
    </ul>
    <button id='btn'>Button</button>
    <script src='js/main.js'></script>
  </body>
</html>

JavaScriptはこんな状態

'use strict'

{
  function upDate(){
    
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

現在の画面はこんな感じですね。 f:id:TomozQ:20201116220102p:plain

今回は li 0 をコピーして li 2 の前に挿入したいと思います。

手順は

  1. li 0をコピー
  2. コピーした li 0 を li 2 の前に追加

完成版

'use strict'

{
  function upDate(){
    const li0 = document.querySelectorAll('li')[0];
    const copy = li0.cloneNode(true);

    const ul = document.querySelector('ul');
    const li2 = document.querySelectorAll('li')[2];

    ul.insertBefore(copy, li2);
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

見ていきましょう。




1.li 0をコピー
const li0 = document.querySelectorAll('li')[0];

querySelectorAll('li')li要素を全て取得し[0]として0番目を指定し、li0という定数に代入します。

const copy = li0.cloneNode(true);

cloneNode(true)とすることでli.0をコピーし、copyという定数に代入します。
ちなみにcloneNode(false)とすると空のli要素が作られます。


2.コピーした li 0 を li 2 の前に追加
const ul = document.querySelector('ul');
const li2 = document.querySelectorAll('li')[2];

まずは今までと同じ様に、ul要素とli要素の2番目を取得します。


ul.insertBefore(copy, li2);

f:id:TomozQ:20201116220003g:plain
insertBefore(何を,どこに)とすることで挿入することができます。

今回の場合は

ul要素のli2の直前にcopyを挿入するといった処理ですね。


要素の削除

次は要素を削除する方法を見ていきましょう。

HTMLはそのまま、JavaScriptは元に戻します。

'use strict'

{
  function upDate(){
    
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

削除は簡単

今回は li 1 を消してみます。

function upDate(){
  const li1 = document.querySelectorAll('li')[1];
  li1.remove();
}

定数li1として要素を取得し、remove( )としてあげるだけです。 f:id:TomozQ:20201116215949g:plain

また

一部のブラウザではこの方法が使えない場合もあるので

function upDate(){
  const li1 = document.querySelectorAll('li')[1];
  const ul = document.querySelector('ul');

  ul.removeChild(li1);
}

親Node.removeChild(削除するNode)とする書き方もあります。

どちらも覚えておくといいかもしれませんね。






今回はここまで

次回は・・・まだまだJS!

それではまた次回!

JavaScript DOM編 vol.2

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> DOM編 vol.2 f:id:TomozQ:20201115174827j:plain

JavaScript備忘録 Vol.13

目次
  • 要素の属性を操作
  • classNameを取得
  • classList( )




今回もJavaScriptの記事になっています。

今回もDOMの操作を見ていきます。

要素の属性を操作

まずは最初の段階のindex.htmlとmain.jsの中身です

index.html
<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <h1 id='target'>男子プログラマーになりたいやつ</h1>
    <p>JavaScript.JavaScript.JavaScript.</p>
    <p>React.React.React.</p>
    <p>JQuery.JQuery.JQuery.</p>
    <button id='btn'>Button</button>
    <script src='js/main.js'></script>
  </body>
</html>


js/main.js
'use strict'

{
  function upDate(){
    document.getElementById('target').textContent = 'Chaaaaaaange!!!!'
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

f:id:TomozQ:20201115173257p:plain

前回の続きですね。


ではまず、HTMLにtitle属性を追加してみます。

<body>
  <body>
    <h1 id='target' title='見出し'>男子プログラマーになりたいやつ</h1>
    .
    .
    .
  </body>


title属性は要素に対する補助的な情報を与えるもので、マウスホバーすると表示されます。

このtitle属性をJavaScriptで操作していきます。



jsファイルを見ていきましょう。

'use strict'

{
  function upDate(){
    document.getElementById('target').textContent = 'Chaaaaaaange!!!!'
    document.getElementById('target').title = '見出しが変わりました。'
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}


1.function upDate()という関数内でidtargetの要素のテキストを変更する。

2.同じくfunction upDate()という関数内でidtargetのタイトル属性の値を変更する。

3.const btnとしてidbtnの要素を代入し、

4.btn.addEventListener('click, ')btnがクリックされたらupDate()関数を実行する

という処理ですね。

結果はこんな感じ

f:id:TomozQ:20201115173134g:plain

また、このコードでは

document.getElementById('target')

を複数回記述してしまっているので

function upDate(){
  const target = document.getElementById('target');
  target.textContent = 'Chaaaaaaange!!!!';
  target.title = '見出しが変わりました。';
}

の様に定数化しておくといいかもしれませんね。




では次はスタイルを変更してみましょう。
スタイルは.style.プロパティ = ○○の様に記述します。 具体的には...

'use strict'

{
  function upDate(){
    const target = document.getElementById('target');
    target.textContent = 'Chaaaaaaange!!!!';
    target.title = '見出しが変わりました。';
    target.style.color = 'red';
    target.style.backgroundColor = 'black';
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

こんな感じですね。

結果は...

f:id:TomozQ:20201115173115g:plain

こうなります。

なんかスタイルが変わるとUIをJSで変えてるぞー!って感じがしていいですよね。




classNameを取得

上ではJavaScriptに直接CSSを書き込んでスタイルを変更しました。



ただ、スタイルに関してはJavaScriptでこのように書いてしまうと、CSSとの役割分担があいまいになるので見た目の指定は CSS に任せて、 JavaScript では class 属性の操作だけを書く方法が一般的です。



ではどの様に変えていくのか見ていきましょう。

<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <h1 id='target'>男子プログラマーになりたいやつ</h1>
    <p>JavaScript.JavaScript.JavaScript.</p>
    <p>React.React.React.</p>
    <p>JQuery.JQuery.JQuery.</p>
    <button id='btn'>Button</button>
    <script src='js/main.js'></script>
  </body>
</html>
'use strict'

{
  function upDate(){
    
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

HTMLはtitle属性を外し、JavaScriptのfunctionの中身は空にしてあります。


まず、HTMLに直書きでmyColorというクラスのスタイルを書いていきます。

<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
    <style>
      .myColor{
        color: red;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <h1 id='target'>男子プログラマーになりたいやつ</h1>
    <p>JavaScript.JavaScript.JavaScript.</p>
    <p>React.React.React.</p>
    <p>JQuery.JQuery.JQuery.</p>
    <button id='btn'>Button</button>
    <script src='js/main.js'></script>
  </body>
</html>

次に、ボタンをクリックしたら、このクラスをh1要素に付与する様、JavaScriptを書いていきます。

.className =とすることでクラスを付与することができます。

今回の場合は

{
  function upDate(){
    const target = document.getElementById('target');
    target.className = 'myColor';
  }
}

f:id:TomozQ:20201115173056g:plain targetのクラス名をmyColorにしてねとすることでHTMLにCSSで書かれているプロパティが適用され、色が変更されています。

注意点もあります。

<style>
  .myColor{
    color: red;
    background-color: black;
  }
  .myBorder{
    border-bottom: 4px solid orange;
  }
</style>
  <body>
    <h1 id='target' class='myBorder'>男子プログラマーになりたいやつ</h1>
    .
    .
    .
  </body>
</html>

例えばこんな感じですでにh1要素にクラスがついていた場合

f:id:TomozQ:20201115173247p:plain

上記のJavaScriptのコードでボタンを押すと... f:id:TomozQ:20201115173038g:plain

こんな感じでmyBorderクラスが外れてしまいます。



classNameを使用すると、クラス属性の値が丸々変わってしまうのです。



myBorderも残したままにしたい場合には

target.className = 'myColor myBorder';

この様に、元々あるクラスも書いてあげます。

f:id:TomozQ:20201115173020g:plain

でもこれちょっとめんどくさいですよね・・・




classList( )

もう少し便利な方法を見ていきましょう。


これが上のJavaScriptのコードです。

'use strict'

{
  function upDate(){
    const target = document.getElementById('target');
    target.className = 'myColor myBorder';
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}


ここではclassList( )を使って書き換えてみましょう。
.classList.add('クラス名')とすることでクラスを追加することができます。

今回の場合は

target.classList.add('myColor');

f:id:TomozQ:20201115173020g:plain

myBorderを書く必要がなくなりましたね。




またclassList( )を使うことでクラスを調べることができます。

classList.contains( )としてあげることで、有無をtruefalseで返してくれます。

さらに、remove( )を使うことでクラスを削除することもできます。

ではこの2つを使ってコードを書いてみましょう。

function upDate(){
  const target = document.getElementById('target');
  if(target.classList.contains('myColor')){
    target.classList.remove('myColor');
  }else{
    target.classList.add('myColor');
  }
}

targetmyColorクラスがついていたら外し、ついていなかったら追加するという処理ですね。 f:id:TomozQ:20201115174421g:plain

この様な処理はよくあるので、実はもっと短い記述も用意されています。

function upDate(){
  const target = document.getElementById('target');
  target.classList.toggle('myColor');
}


toggle( )とすることで有無を切り替えてくれます。

動作は上と変わりません。






今回はここまで

次回は・・・まだまだJS!

それではまた次回!

JavaScript DOM編 vol.1

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> DOM編 vol.1 f:id:TomozQ:20201112230911j:plain

JavaScript備忘録 Vol.12

目次
  • 要素の操作
  • 複数の要素を取得
  • 要素の取得方法
  • addEventListner( )




今回もJavaScriptの記事になっています。

まだオブジェクト編は残っていますが、今回はDOMの操作を見ていきます。

要素の操作

まずは最初の段階のindex.htmlとmain.jsの中身です

index.html
<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>

    <script src='js/main.js'></script>
  </body>
</html>


js/main.js
'use strict'

{

}


ではまず、HTMLに要素を追加していきます。

<body>
  <h1>男子プログラマーになりたいやつ</h1>
  <p>JavaScript.JavaScript.JavaScript</p>
  <p>React.React.React</p>
  <p>JQuery.JQuery.JQuery</p>
  <script src='js/main.js'></script>
</body>


ブラウザに表示するとこんな感じですね。

f:id:TomozQ:20201112225619p:plain

では、h1要素をいたずらしてみましょう。

'use strict'

{
  document.querySelector('h1').textContent = '男子プログラマーになりかけのやつ';
}

ブラウザをリロードすると表示が変わってますね。

f:id:TomozQ:20201112230003g:plain

もう少しわかりやすくするために関数にして3秒後に変化する様にしてみましょう。

{
  function upDate(){
    document.querySelector('h1').textContent = '男子プログラマーになりかけのやつ';
  }
  setTimeout(upDate, 3000);
}

upDateという関数にし、その下でsetTimeout( )関数を呼び出しています。
第一引数のupDateは関数の呼び出し、第二引数の3000は3000msを意味しています。

したがって、ブラウザのリロードから3000ms後にupDate関数を呼び出す、という記述ですね。

f:id:TomozQ:20201112225948g:plain document.getSelector( )はよくCSSで使われるセレクタも指定できるのですが、 JavaScriptではHTMLの要素にidを記述し、それを指定する方法がよく使われます。

どういうことかというと

<h1 id='target'>男子プログラマーになりたいやつ</h1>

この様に要素にidを振ってあげます。
JavaScriptの方は

document.querySelector('#target').textContent = '男子プログラマーになりかけのやつ';

とすることもできますし、
別の書き方で

document.getElementById('target').textContent = '男子プログラマーになりかけのやつ';

と書くこともできます。 getElementById( )も比較的よく使われる表現です。


複数の要素を取得

ではベースは先ほどのコードのままで、次はp要素も操作していきましょう。

先ほどと同じ様にやってみると

{
  function upDate(){
    document.querySelector('p').textContent = 'Ruby.Ruby.Ruby.';
  }
  setTimeout(upDate, 3000);
}

コードはこうなりますよね。

しかし、結果は...

f:id:TomozQ:20201112225928g:plain

最初の1行しか変わっていません。

実はquerySelectorを用いてpとしても、最初の一つ目しか取得することができません。

ではどうすれば全てに適用できるでしょうか

手順をみていきます。

まず

{
  function upDate(){
    document.querySelectorAll('p')[2].textContent = 'Ruby.Ruby.Ruby.';
  }
  setTimeout(upDate, 3000);
}

querySelectorAllを使い、('p')を指定することで全てのp要素のDOM情報を取得します。
配列と同じ様に[2]とすることで3番目の要素を取得することができます。 f:id:TomozQ:20201112225912g:plain 配列と同じ様に扱うことができるので、ここでforEach( )を使うことができます。

p要素のtextContentを全て変えてみましょう。

{
  function upDate(){
    const texts = document.querySelectorAll('p');
    texts.forEach(text =>{
      text.textContent = 'Ruby.Ruby.Ruby.'
    })
  }
  setTimeout(upDate, 3000);
}


1.document.getElementById('p')としてp要素を全て取得し、textsという定数に代入します。

2.textsは配列になっているのでここにforEach( )を回していきます。

3.引数をtextと単数にして

4.それぞれのtextContentを変更しています。

結果はこうですね。

f:id:TomozQ:20201112225854g:plain

さらに、引数をもう一つ追加して

function upDate(){
  const texts = document.querySelectorAll('p')
  texts.forEach((text, index) =>{
    text.textContent = `${index}番目のpだよ`
  });
  
}
setTimeout(upDate, 3000);


それぞれの要素をtext、その順番をindexという引数で渡すことで

こんな感じにもできます。

f:id:TomozQ:20201112225839g:plain


要素の取得方法

次は色んな取得方法をみていきます。

id属性がついている => getElementById( ) // idで取得

一つの要素を取得する => querySelector( ) // idやセレクタを指定

複数の要素を取得する => querySelectorAll( ) // 指定した全ての要素

その他
  => getElementByClassName( ) // クラス名で指定
  => getElementByTagName( ) // タグで指定


などがあります。
また、DOMツリーの階層関係から取得する方法もあります。

例えば

<ul>
  <li>ToDo1</li>
  <li>ToDo2</li>
  <li>ToDo3</li>
</ul>

こんなHTMLがあったとしましょう。

ulの子Nodeを取得したい場合には
ul.childNodes

としてあげることで子Nodeを全て取得することができます。


ここで一点注意なのですが、子Nodeにはli要素などの要素Nodeの他に、改行空白を表すテキストNodeも含まれています。

したがって子要素のみを取得した場合には

ul.children
とします。

さらに、最初の子Nodeや最後の子Nodeを指定することもできます。 その場合には

firstChild //最初の子Node

lastChild //最後の子Node

firstElementChild //最初の子要素Node

lastElementChild //最後の子要素Node

としてあげることができます。


また、親Nodeを指定したい場合には li.parentNode

としてあげることで親Nodeを指定することができます。


兄弟Nodeを取得したい場合には

previousSibling //一つ前の兄弟

nextSibling //一つ後の兄弟

とします。

ここでも要素Nodeだけを取得するのであれば

previousElementSibling //一つ前の兄弟の要素Node

nextElementSibling //一つ後の兄弟の要素Node

とします。




addEventListner( )

これは割と実践的ですね。



ベースとなるコードです。

index.html
<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <h1 id='target'>男子プログラマーになりたいやつ</h1>
    <p>JavaScript.JavaScript.JavaScript.</p>
    <p>React.React.React.</p>
    <p>JQuery.JQuery.JQuery.</p>
    <script src='js/main.js'></script>
  </body>
</html>


js/main.js
'use strict'

{
  function upDate(){
    document.getElementById('target').textContent = '男子プログラマーになりかけのやつ'
  }
  
  setTimeout(upDate, 3000);
}

内容はさっきやったブラウザをリロードしたら3秒後にテキストが変わるというやつですね。




ではこれをちょっといじっていきましょう。

まずはHTMLにボタンを追加します

<body>
  <h1 id='target'>男子プログラマーになりたいやつ</h1>
  <p>JavaScript.JavaScript.JavaScript.</p>
  <p>React.React.React.</p>
  <p>JQuery.JQuery.JQuery.</p>
  <button id='btn'>Button</button>
  <script src='js/main.js'></script>
</body>

button要素を作り、idを振っておきます。

ブラウザで見るとボタンができてますね。

f:id:TomozQ:20201112225607p:plain

JavaScriptの方を触っていきましょう。

function upDate(){
  document.getElementById('target').textContent = 'Chaaaaaaange!!!!'
}

const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  upDate();
})

処理を見ていきましょう。

setTimeoutの3000は消しました。


1.function upDate( )関数の処理はさっきと同じですね。わかりやすい様にボタン押下後に出力される文字を変更しました。

2.まず、idが'btn'の要素を取得してbtnという定数に入れます。

3.addEventListener( )として第一引数にclickというイベントを指定し、第二引数にアロー関数で処理を渡します。

4.今回の場合はupDate( )としてupDate関数を呼び出しています。 f:id:TomozQ:20201112225814g:plain

JSってこういうのが面白いですよね。






今回はここまで

次回は・・・まだまだJS!

それではまた次回!

JavaScript オブジェクト編 vol.8

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> オブジェクト編 vol.8 f:id:TomozQ:20201111222526j:plain

JavaScript備忘録 Vol.11

目次
  • ランダムな整数値
  • 日時
  • alert( )・confirm( )




今回もJavaScriptの記事になっています。

ランダムな整数値

ここではランダムな整数値の出力してみましょう

前回の記事の

Math.random( )を使っていきます。

console.log(Math.floor(Math.random() * 6) + 1)

1.Math.floor( )で小数点以下を切り捨て
2.Math.random( )で0 ~ 1未満の乱数を生成
3.Math.randomに6をかける...0 ~ 6未満の整数の乱数を生成
4.最後に全体に1を足してあげる...1 ~ 7未満の整数の乱数を生成

これで1.00... ~ 6.9999.....の間で乱数が生成され、小数点以下が切り捨てられるという処理になります。


1回目

f:id:TomozQ:20201111214150p:plain

2回目

f:id:TomozQ:20201111214140p:plain

3回目

f:id:TomozQ:20201111214128p:plain


日時

ここでは日時の操作を見ていきましょう。

  1. 現在日時
  2. 特定の日時



現在日時
const d = new Date();

console.log(d);

f:id:TomozQ:20201111214119p:plain new Date()とすることで、現在の曜日西暦時間を取得することができます。

さらに

const d = new Date();

const year = d.getFullYear();
const month = d.getMonth();
const date = d.getDate();
const day = d.getDay();
const hour = d.getHours();
const minute = d.getMinutes();
const second = d.getSeconds();
const milliSecond = d.getMilliseconds();

console.log(year);
console.log(month);
console.log(date);
console.log(day);
console.log(hour);
console.log(minute);
console.log(second);
console.log(milliSecond);

f:id:TomozQ:20201111214109p:plain
dを現在日時として取得することで


d.getFullYear( )西暦

d.getMonth( )

d.getDate( )

d.getDay( )曜日

d.getHours( )時間

d.getMinutes( )

d.getSeconds( )

d.getMilliseconds( )ミリ秒


を取得することができます 0 ~ 1が出力され、0が1月になります。

何月何日と出したい場合には

console.log(`${month + 1}月${date}日`);

としてあげればいいですね。

f:id:TomozQ:20201111214100p:plain


曜日0 ~ 1が出力され、0が日曜になります。


特定の日時

決まった日時を使いたい場合もあります。

その時には引数に値を入れてあげます。

const d = new Date(2000, 10);

console.log(d);

f:id:TomozQ:20201111214050p:plain 2000年としてあげて、は10とすることで11月を出力してくれます。 日付1、時刻は0を自動で入れてくれます。


あとから時間を入れることもできます。

const d = new Date(2000, 10);
d.setHours(10, 20, 30);

console.log(d);

f:id:TomozQ:20201111214040p:plain この様にsetHours( )に引数を3つ渡してあげることで時間を設定することができます。


また、日付を入れることもできます。

const d = new Date(2000, 10);
d.setHours(10, 20, 30);
d.setDate(30);

console.log(d);

f:id:TomozQ:20201111214030p:plain 30日に変わりましたね。


さらにこのgetDate( )は自動補正もしてくれます。

例えば11月は30日までしかありませんが、

d.setDate(31);

とすると f:id:TomozQ:20201111214019p:plain

月が変わって12月の1日になりましたね。




alert( )・confirm( )

ここからちょっとだけ画面を動かしていきましょう

  1. alert( )
  2. confirm( )



alert( )
alert('Hello JavaScript');



f:id:TomozQ:20201111221952g:plain alert( )とすることでダイアログを表示することができます。


confirm( )
confirm('Are You Sure?');


confirm( )もalert( )と同じ様にダイアログを出すのですが

f:id:TomozQ:20201111221935g:plain
選択肢にOKキャンセルがあります。

これはどちらを選択したかが返り値として取得できます。

const answer = confirm('Are You Sure?');

if(answer){
  console.log('削除しました')
}else{
  console.log('キャンセルしました')
}



f:id:TomozQ:20201111221914g:plain
OKを選び、answertrueの時には削除しましたとコンソールに出力し、
キャンセルを選び、falseの時にはキャンセルしましたと出力されています。




今回はここまで

次回は・・・まだまだJS!

それではまた次回!

JavaScript オブジェクト編 vol.7

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> オブジェクト編 vol.7 f:id:TomozQ:20201110210038j:plain

JavaScript備忘録 Vol.10

目次
  • join( )
  • split( )
  • Math.floor( )
  • Math.ceil( )
  • Math.round( )
  • toFixed( )
  • Math.random( )




今回もJavaScriptの記事になっています。

今回は様々な命令のみの記事になっていますのでサクッといきます。

join( )

const d = [2020, 11, 10];

console.log(d.join('/'));


配列.join('/');

とすることで配列の中身を/で結合することができます。 f:id:TomozQ:20201110205715p:plain 間に何も入れたく無い場合には ('') として空文字を入れてあげればそのまま結合することができます。


split( )

const t = '22:00:00'

console.log(t.split(':'));

split(':')の様にカッコに引数を入れてあげることで、要素を分割して配列にすることができます。 f:id:TomozQ:20201110205705p:plain

さらに

const t = '22:00:00'

const [hour, minuite, second] = t.split(':');

console.log(hour);
console.log(minuite);
console.log(second);

console.log(`${hour}時${minuite}分${second}秒`);

分割代入を用いることで

f:id:TomozQ:20201110205655p:plain

この様な結果を出力することができます。




Math.floor( )

ここからは数値の扱いを見ていきましょう

const nums = [1, 5, 7];

まずは

数値の合計平均を見ていきます。

const nums = [1, 5, 7];

let sum = 0;

nums.forEach(num => {
  sum += num;
});

let avg = sum/nums.length;

console.log(sum);
console.log(avg);

こんな感じですね

f:id:TomozQ:20201110205640p:plain

333333333...が気になりますよね。

ここでMath.floorを使います。

console.log(Math.floor(avg));

f:id:TomozQ:20201110205624p:plain この様にMath.floor(引数)とすることで、小数点以下を切り捨ててくれます。


Math.ceil( )

ここからはチョッぱやで進みます

例文は上記通り。

consoleに渡す数字を

console.log(Math.ceil(avg));

とすることで小数点以下を切り上げてくれます。 f:id:TomozQ:20201110205610p:plain


Math.round( )

例文は上記通り。

console.log(Math.round(avg));

とすることで四捨五入てくれます。 f:id:TomozQ:20201110205558p:plain


toFixed( )

console.log(avg.toFixed(3));

とすることで小数点以下引数の値までを出力してくれます。 f:id:TomozQ:20201110205545p:plain


Math.random( )

これは以前もやりましたね。

  console.log(Math.random());

Math.random()とすることでランダムな数値を生成してくれます。

リロード1回目

f:id:TomozQ:20201110205533p:plain

リロード2回目

f:id:TomozQ:20201110205522p:plain

リロード3回目

f:id:TomozQ:20201110205511p:plain




今回はここまで

次回は・・・まだまだJS!

それではまた次回!

JavaScript オブジェクト編 vol.6

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> オブジェクト編 vol.6 f:id:TomozQ:20201109220419j:plain

JavaScript備忘録 Vol.9

目次
  • Object.keys( )
  • 変数
  • 文字列の操作




今回もJavaScriptの記事になっています。

Object.keys( )

例えば、オブジェクトのプロパティを全て取り出したいとします。

ですがオブジェクトにはforEach( )を使うことができません。

なので、一旦キーを配列として取得し、その配列に対してforEach( )を使う必要があります。

手順をみていきましょう。

const prices = {
    orange: 100, 
    apple: 200,
};

こんなオブジェクトがあったとします。

まずは

Object.keys( )を使い、キーを配列として取得します。

どうするかというと

const prices = {
  orange: 100, 
  apple: 200,
};

console.log(Object.keys(prices));

この様に

Object.keys(オブジェクト名)としてあげることで、キーを配列として取得することができます。 f:id:TomozQ:20201109215446p:plain

ではこれを応用して、配列に対しforEach( )を回して要素を一つずつ出力します。

const prices = {
  orange: 100, 
  apple: 200,
};

const keys = Object.keys(prices);

keys.forEach(key => {
  console.log(key);
});

結果はこうです。

f:id:TomozQ:20201109215434p:plain pricesキーを配列にして、keysという定数に代入します。
その後、keysという配列にforEach(key)を回し、要素分だけ値を出力しています。

ではついでに値も出力しましょう。

const prices = {
  orange: 100, 
  apple: 200,
};

const keys = Object.keys(prices);

keys.forEach(key => {
  console.log(`Key: ${key}, Value: ${prices.key}`);
});

としたいところですが、これだと・・・

f:id:TomozQ:20201109215423p:plain undifinedになってしまいます。
これはkeyが文字列で取得されているからですね。
なのでもう一つの記法のオブジェクト['キー']を使用してあげます。

console.log(`Key: ${key}, Value: ${prices[key]}`);

としてあげます。 f:id:TomozQ:20201109215405p:plain

さらにこのオブジェクトが一つの箱だったとして、他の果物が入っている箱も加え、一つの配列として管理したいとします。

配列がお店、オブジェクトがお店に並んでいる、果物が入った箱だと考えてみましょう。

const store = [
  {orange: 100, apple: 200},
  {grape: 300, pineapple: 400},
  {strawberry 500, melon: 200},
];

では各値(今回の場合は各金額)にアクセスしたい場合を考えてみましょう。

例えばmelonの金額を取り出したい場合

const store = [
    {orange: 100, apple: 200},
    {grape: 300, pineapple: 400},
    {strawberry: 500, melon: 600},
  ];
  
  console.log(store[2].melon);

この様に

配列[index番号].キー

としてあげることで取得することができます。

f:id:TomozQ:20201109215327p:plain


変数

JavaScriptを使う上での注意事項です。

JavaScriptには大きく分けて単純なデータ型と複雑なデータ型があります。

下記の様に分けられますね。

単純なデータ型
数値 文字列 真偽値 undifined Null
複雑なデータ型
配列 オブジェクト


この二つですが、変数を代入したときの挙動が異なるので見ていきましょう。


単純なデータ型

では例文

let x = 3;
let y = x;

x = 6;

console.log(x);
console.log(y);

f:id:TomozQ:20201109215312p:plain x6y3と出力されましたね。

流れを追ってみると

  1. xに3を代入...xの値は3
  2. yにxを代入...yの値は3
  3. xに6を代入...xの値は6

最終的に出力されるのは

x6y3ですね。

複雑なデータ型

では上のコードを配列に変えて見てみましょう。

let x = [3, 4];
let y = x;

x[0] = 6;

console.log(x);
console.log(y);

今度は結果を見る前に考えてみましょう。

  1. xに[3,4]という配列を代入...xは[3,4]
  2. yにxを代入...yは[3,4]
  3. x[0]として、配列xの一番目の値に6を代入...xは[6,4]

上の単純なデータ型と同じ様に考えれば、最終的に出力されるのは

x[6, 4]y[3, 4]ですね。

では結果をみてみましょう

f:id:TomozQ:20201109215258p:plain x, yとも[6, 4]となっていますね。

単純なデータ型については解説は不要ですね。

では複雑なデータ型はどうなっているのでしょうか?

x = [3, 4]とするとコンピューター上のどこかに[3, 4]という配列が作成されそこにxという名前がつきます。
次にy = xとすると、xの値がyに代入されるのではなく、xの値がどこに格納されているのかという情報が作られyという名前がつきます。
よって、x[0] = 6とするとy[6, 4]となるわけです。

複雑なデータ型はデータ量が大きくなることがあるため、丸々コピーしてシステムに負荷をかけない様にこの様な仕組みになっているみたいですね。


ちなみに、配列の値そのものをコピーしたい場合には

let x = [3, 4];
let y = [...x];

x[0] = 6;

console.log(x);
console.log(y);

の様にスプレッド演算子を使えば値を丸々コピーすることができます。

f:id:TomozQ:20201109215244p:plain


文字列の操作

おまけ?

文字列を操作してみましょう!

サクッといきますね

const str = 'Fresh';

console.log(str.length);

f:id:TomozQ:20201109215232p:plain 文字列.lengthとすることで文字列の長さを取得できます。



const str = 'Fresh';

console.log(str.substring(1, 3));

f:id:TomozQ:20201109215216p:plain substring(開始位置, 終了位置)としてあげることでその部分の文字を取得することができます。

今回の場合は

文字列も0から始まるので...Fresh1番目であるrから終了位置である3(s)の手前までとなるのでreが出力されてますね。



const str = 'Fresh';

console.log(str[1]);

f:id:TomozQ:20201109215206p:plain

この様に配列の様に文字を取得することもできます。

ただ、これは値が取得できるだけで配列と同じ様に使うことはできません。

const str = 'Fresh';
str[1] = 'g';

console.log(str);

この様に代入を使用としても

f:id:TomozQ:20201109215156p:plain

読み込み専用だよ、というエラーが出てしまいます。






今回はここまで

次回は・・・まだまだJS!

それではまた次回!