【ゼロからはじめるプログラミング】JavaScript学習 #28

ゼロからはじめるプログラミング講座の第四十回です。前回に引き続きDOMの操作を解説していきます。今回はライブラリにも触れてみようと思います。

DOMの属性を変更してみよう。
jQueryを使ってみよう。
innerHTMLを書き換えてみよう。

DOMの属性を変更してみよう。

おさらいしますと属性はidやhrefなどのことです。まずはindex.htmlに追加します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>JavaScript</title>
</head>
<body>
  <span>JavaScriptを学ぼう。</span>
  <div id="box">
    <button type="button" onclick="alert('ボタンでJavaScriptのコードを実行します。')">アラートボタン</button>
    <button type="button" id="btn1">ボタン1</button>
    <button type="button" id="btn2">ボタン2</button>
    <a id="a1" href="google.co.jp">a1link</a>
    <p id="p1">Pテキスト1</p>
    <p class="ptext">Pテキスト2</p>
    <p>Pテキスト3</p>
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
    </ul>
  </div>
  <script src="test.js"></script>
</body>
</html>

<a>のidとhrefの中身を変えてみます。

var a = document.querySelector("a")
a.setAttribute("href","https://yahoo.co.jp")
a.setAttribute("id","aone")
var id = a.getAttribute("id")
console.log(id)

a1link

aone

これは簡単ですね。

setAttribute(属性名、属性値)

getAttribute(属性名)

これで要素の生成削除、テキストの変更、属性の追加変更ができるようになりました。

jQueryを使ってみよう。

jQueryとはとても便利なJavaScriptのライブラリです。

ライブラリとは

プログラミング言語に新たな関数を追加するもの。

もちろん関数なので素のJavaScriptができることの範囲内での機能拡張になります。JavaScriptではjQueryというライブラリが有名で機能も凄いです。とくにDOM操作が格段に簡単になります。jQueryを使うにはまずライブラリを読み込ませる必要があります。

index.htmlを書き換えます。

<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <title>JavaScript</title>
</head>
<body>
  <span>JavaScriptを学ぼう。</span>
  <div id="box">
    <button type="button" onclick="alert('ボタンでJavaScriptのコードを実行します。')">アラートボタン</button>
    <button type="button" id="btn1">ボタン1</button>
    <button type="button" id="btn2">ボタン2</button>
    <a id="a1" href="google.co.jp">a1link</a>
    <p id="p1">Pテキスト1</p>
    <p class="ptext">Pテキスト2</p>
    <p>Pテキスト3</p>
    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
    </ul>
  </div>
  <script src="test.js"></script>
</body>
</html>

ライブラリの関数が読み込まれていない状態でライブラリの関数を使おうとしても見つからないということですね。

jqueryを読み込ませたのでさっそく使ってみましょう。

var p = $('p')
p.css("border","1px solid black")

Pテキスト1

Pテキスト2

Pテキスト3

まず要素の選択には$(”要素”)と書くだけで良いです。要素が単一でも複数でもメソッドを使い分ける必要がありません。そしてスタイルを書き換える場合は.css()メソッドを使います。素JavaScriptと違うところは複数の要素でも全てにスタイルが適用される所です。

ライブラリは人が楽するための機能がたくさんあるのですが、人が楽をするということは機械の負担が増えるということなので当然処理速度は遅くなります。

それとライブラリの追加を行えない場合もあります。とても便利なのですがまずは素のJavaScriptをマスターしましょう。以降の解説でもjqueryを使うときはその都度<script>で宣言しますので今はindex.htmlから削除しておいてください。

innerHTMLを書き換えてみよう。

innerHTMLとは要素<tag>の中身のhtmlコードです。

この場合<p>のinnerHTMLはtextです。

<ul>

</ul>

この場合<ul>のinnerHTMLは<li>test1</li><li>test2</li>です。

.innerHTMLというプロパティでinnerHTMLの情報を操作することができます。

つまりhtmlコードを直接文字で書き換えることができます。実際にやってみましょう。

var ul = document.querySelector("ul")
ul.innerHTML = '<li style="border:1px solid red">list1</li><li style="border:1px solid blue">list2</li>'
console.log(ul.innerHTML)

list1
list2

文字列で直接HTMLコードの編集ができました。これは非常に強力な操作方法です。

今まで使ってきたDOMの生成追加削除、スタイルの書き換え、テキストの書き換えなど全てのことがinnerHTMLだけで行なえます。そして正しく使えば処理速度も早く軽いです

欠点はJavaScriptのコードが汚くなるということです。コードをシンプルにするのは重要なことです。読みやすくなり管理がしやすくなり、再利用もしやすくなります。

長い文字列を使うことになるので文字列を改行して書くテクニックを紹介します。

ul.innerHTML = '<li style="border:1px solid red">list1</li>'+
               '<li style="border:1px solid blue">list2</li>'

改行には自動で;セミコロンが入るのがJavaScriptの特徴なので改行前に文字列を区切り、プラスで結合しましょう。

またinnerHTMLでコードに改行を加えたい場合はエスケープ文字で書きましょう。

var str = '<li style="border:1px solid red">list1</li>'+
          '<li style="border:1px solid blue">list2</li>'
var str2 = '<li style="border:1px solid red">list1</li>\n'+
           '<li style="border:1px solid blue">list2</li>'
console.log(str)
console.log(str2)

\nが改行を表すエスケープ文字です。

「\」「￥」バックスラッシュもしくは半角の円マークがエスケープ文字です。

エスケープ文字の後ろに続く文字は通常の文字とは違う意味でJavaScriptが解釈します。

nが改行の意味になるというわけです。\sとするとスペース1個分になります。

他にもタブ文字などいろいろあるのですがとりあえず\nと\sを覚えておきましょう。

お疲れ様でした。次回は文字の置き換えと正規表現を解説します。

次も頑張って記事を作るのでチャレンジしてください！