javascript

DOMでのオブジェクトの使い方

JavaScript

Windowオブジェクト

Windowオブジェクトは、ブラウザーが持っている情報をそのまま持っています。ブラウザーの様々な情報を確認・取得する事が出来ます。
早速確認してみましょう。

<script>
console.log(window);
</script>

documentオブジェクト

documentオブジェクトとは、HTMLで表現されているコンテンツをすべて保持しているオブジェクトです。


DOMの操作

getElementById(id)

DOMで各要素を動かす場合、まず要素を取得しなければいけません。取得には、要素取得のメソッド「getElementById(id)」を使います。

<body>
<h1 id="title">DOMの練習</h1>
<p id="one">テキスト1</p>
<p id="two">テキスト2</p>
<script>
var h1 = document.getElementById('title');
console.log(h1);
</script>
</body>
要素内のテキストの取得、変更

要素の中のテキストのみをコントロールしたい場合は、「textContentプロパティ」を使います。

テキストの取得
<script>
var h1 = document.getElementById('title');
console.log(h1);

var title = h1.textContent;
console.log(title);
</script>
テキストの変更
<script>
var h1 = document.getElementById('title');
h1.textContent = "タイトルを変更";
</script>

要素を書き換える

innerHTMLというプロパティを使うと指定した要素ごと書き換わります。

<script>
var p1 = document.getElementById('one');
  p1.innerHTML = '<h2>中見出し</h2>';
</script>

要素やテキストを作成する

新しく要素を生成する場合は、「createElement(tag_type);」や「createTextNode(text);」を使います。

createElement(tag_type)
新しく要素(タグ)を生成する

createTextNode(text)
新しくテキストを生成する

しかし、これだけでは要素が生成されません。新しい要素を正しい文章構造を持ってブラウザで表示させるためには、既存の要素のどれかを親要素に指定し、子要素として追加する必要があります。新しい要素の場所を明確にして、DOMのツリー構造に正しく組みこまなければいけないわけです。
このツリー構造というのはjQueryにも共通する必要に大切な考え方なので、しっかりと理解しましょう。

特定の親要素の下に子要素を追加するためのメソッドがappendChild(element); です。
append(追加する)

今回はbodyタグの中に直接新しいpタグを生成したいので、pタグにとって親要素はbodyです。なのでbodyに対して「appendChild」を指定します。

<script>
var p = document.createElement('p');
var text = document.createTextNode('テキスト3');
document.body.appendChild(p).appendChild(text);
</script>

画像の差し替え

<body>
<p><img id="image" src="img/01.png" alt="昼間の画像"></p>
<script>
  var image = document.getElementById('image');
  image.src = 'img/02.png';
  image.alt = '夕方の画像';
</script>
</body>

関数との組み合わせ

先日使ったfunction関数と組み合わせて、ボタンをクリックしたら、テキストや画像が変わるようにしてみましょう。

switch文の使い方

JavaScript

「switch文」とはif文と少し似ていて、同じように分岐処理を行う物ですが、if文の場合、AルートもしくはBルート、というように二者択一を続ける分岐に対し、今回の「switch文」は同時に多数の分岐処理を行うことが出来ます。

switch (式or変数) {
case 値1 :
//式の結果が値1に等しい場合に実行する
break;
case 値2 :
//式の結果が値2に等しい場合に実行する
break;
default :
//式の結果がどれにも該当しない場合に実行する処理
break;
}


この「switch文」で大事なのは「break」の処理です。
繰り返し処理は条件式が満たされている間は繰り返しを実行しますがbreak文を使用すると強制的に繰り返し処理を終了させることができます。
実は「swith文」において「break文」が存在しない場合は「case」で記述されたものよりその先の処理をずっと実行していってしまいます。
なので、基本的には「swith文」と「break文」はセットで使う、と覚えて良いでしょう。


<script>
var num = 1;
 
switch(num){
    case 1:
        document.write('1です');
        break;
    case 2:
        alert('2です');
        break;
    case 3:
        alert('3です');
        break;
    default:
        alert('数値以外が入力されています。');
        break;
}
</script>

DOM (ドキュメント・オブジェクト・モデル)とは

JavaScript

Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。簡単に言い換えるとhtmlの各要素、たとえば「p」とか「img」といった要素に直接アクセスする仕組みのことです。
このDOMを操作することによって、要素の値をダイレクトに操作できます。

ここではDOMを通して、「オブジェクト指向」という、対象をオブジェクト(要素ノード)、つまり「もの」のように捉えてプログラミングを行う手法を覚えましょう。
1、命令するオブジェクトを選ぶ
2、メソッド(命令)をかける
3、どのタイミングで命令を実行するか

1、命令するオブジェクトを選ぶ

DOMを使う際に覚えなければいけない事が、HTMLのツリー構造とNode(ノード)と呼ばれる単位です。

HTMLのツリー構造とは?

f:id:yachin29:20160419111754j:plain

Node(ノード)とは?

ノードとは、DOMでアクセス・変更できるブロック単位です。
HTMLタグ全てがノードで作られています。

DOMで扱うノードの種類は3種類です。

エレメントノード(HTMLタグ)
属性ノード(src や alt)
テキストノード(タグで囲まれたテキスト)

ノードの指定方法には色々ありますが、
要素のId名で指定する「document.getElementById」
要素のclass名で指定する「document.getElementsByClassName」(※IE8以下では利用できません)
指定した要素全てに命令する「document.getElementsByTagName」

2、メソッド(命令)をかける

メソッドはドットシンタックス(ドットでつなぐ文法)で記述します。

innerHTM(取得した要素の内容を変更)
style.backgroundColor(取得した要素のスタイルを変更)
image.src (取得した要素の属性を変更)
などがあります。

3、どのタイミングで命令を実行するか

window.onload(ファイルが読み込まれたタイミング)
onclick(ボタンを押したら)

記述例

<body>
<div id="box">This is box</div>
<script>
window.onload = function() {
  // id名が'box'の要素を取得する
  var box = document.getElementById('box');

  // 取得した要素の背景色を黄緑色にする
  box.style.backgroundColor = 'yellowgreen';
};
</script>
</body>

Math.randomの使い方

JavaScript

JavaScriptで乱数を取得したい場合には「random関数」を使います。

覚えるメソッド

Math.random

Math.random()は、0〜0.9999…(1未満)の間から、1つの数値をランダムで返すメソッドです。0は含みますが、1は含みません。

Math.round

Math.round()は、小数点以下を四捨五入するメソッドです。整数を取得したい場合に利用します。

Math.ceil

Math.ceil()は、小数点以下を切り上げるメソッドです。0.999なら1、3.21なら4という数値を返します。

Math.floor

Math.floor()は、小数点以下を切り捨てるメソッドです。0.999なら0、3.21なら3という数値を返します。


<script>
  var a =  Math.random();
 
  document.write(a);
</script>

0から10までの数字をランダムで取得したい場合

<script>
// 0〜10の乱数を発生 ([11]を指定する)
var a = Math.floor( Math.random() * 11 ) ;

 document.write(a);
</script>

各メソッドを実際に表示させる

<script>
 
  var a = Math.round( Math.random() * 10);  //小数点以下を四捨五入
  var b = Math.ceil( Math.random() * 10);  //小数点以下を切り上げ
  var c = Math.floor( Math.random() * 10);  //小数点以下を切り捨て

  document.write(a + '<br>');
  document.write(b + '<br>');
  document.write(c + '<br>');
</script>

任意の範囲での乱数を取得するには

<script>
// 5〜10の乱数を発生 [11-5]と[5]を指定する
var a = Math.floor( Math.random() * 6 ) + 5 ;
</script>

画像をランダムで表示する

「img0~img3」画像を準備する
「img1~」の場合は、((Math.random()*numOfImg)+1)となる

<script>

var num = Math.floor(Math.random() * 4)
document.write('<img src="img/img' + num + '.jpg">');
</script>

for文の多重ループ

JavaScript

for文でのインクリメント/デクリメント演算子

f:id:yachin29:20180412142647p:plain

上記のインクリメント演算子を使って
2から100まで2づつ増えていくfor文を作成しましょう。

一つのfor文(ループ)の中に、さらにfor文を入れることができます。 もちろん入れ子の深さを二重、三重、…と深くしていくことも可能です。 これらをまとめて多重ループと呼びます。
ここでは、for文による二重ループを使って、九九の表を表示するプログラムを作ってみましょう。

for ( 変数iの初期値 ;  繰り返し条件  ;  変数の変更  ) {
   for (   変数jの初期値 ; 繰り返し条件  ;   変数の変更 ) {
        処理の結果
   }
 処理の結果
}

この場合の処理の順序は、次のようになります

  1. まず変数iを参照します
  2. jの繰り返し条件が終了するまで処理を繰り返し行う
  3. jの処理の終了後、iの処理を行う


まずは3x3の表を作って見ましょう。

for文の使い方

JavaScript

for文は繰り返し(ループ)処理です。

for ( 変数iの初期値 ;  繰り返し条件  ;  変数の変更  ) {
 処理の結果
}


記述例

<script>
  for (var i = 1 ; i <= 100 ; i++) {
    console.log( i );
  }
  
/* for ( 変数の初期値; 繰り返し条件; 変数の変更(最後は;がいらない) ) {
  実行される処理
}*/
</script>

インクリメント

演算の中でも数値を1つだけ増加することや1つだけ減少させる処理は比較的多く使用されます。そのような時のために用意された演算子がインクリメント演算子(++)とデクリメント演算子(–)です。次のようなものが用意されています。

f:id:yachin29:20160829005852j:plain

なお「変数++」と記述する代わりに「++変数」と記述する使い方もできます。この二つは似ていますが使い方は異なります。

インクリメント演算子とデクリメント演算子にはそれぞれ前置と後置の二種類が用意されています。
インクリメント演算子の前置きと後置きは次のようになります。

前置:  ++変数
後置:  変数++


前置であっても後置であってもインクリメント演算子は対象の変数の値を1だけ増加させ、デクリメント演算子の場合は対象の変数の値を1だけ減少させることに違いはありませんが、使い方によって得られる値が変わる事があります。

このような使い方の場合、インクリメントが前置であっても後置であっても同じ結果となります。

前置の場合

var a = 10;

++a;

document.write(a); 

後置の場合

var a = 10;

a++;

document.write(a); 

しかし、このような使い方の場合、インクリメントが前置であるか、後置であるかで異なる結果となります。

前置の場合

var a = 10;

b = ++a;

document.write(b);

後置の場合

var a = 10;

b = a++;

document.write(b); 

前置の場合、aの値がbに代入される前にインクリメントが適用される為、bの値は「b = a + 1 」になります。
後置の場合、aの値がbに代入された後にインクリメントが適用される為、bの値は「b = a 」になります。

練習
フォームのselectタグを使い、生年月日を選べるプルダウンメニューを作ってみましょう。

<p>生年月日を選択してください。</p>

<select>
<option>1945年</option>
<option>1945年</option>
<option>1945年</option>
                 ・
      ・
      ・
<option>1999年</option>
<option>2000年</option>
</select>

以上の記述をfor文を使って作ってみましょう。

f:id:yachin29:20180411182151p:plain

作例

Dateオブジェクトで時間の取得

JavaScript

「 new Date()」を使う事で、現在の時間を取得することが出来ます。

f:id:yachin29:20160904223005j:plain
<script>
var date = new Date();
document.write(date);
</script>

実際に表示してみると「 new Date()」には日時についての様々なデータが収納されているのが解ります。
このままでは使いづらいので「 new Date()」の中から必要な情報だけを引っ張って来ます。

var myYear = date.getFullYear(); // 年
var myMonth = date.getMonth()+1; // 月
var myDate = date.getDate(); // 日
var myDay = date.getDay(); // 曜日
var myHours = date.getHours(); // 時
var myMinutes = date.getMinutes(); // 分
var mySeconds = date.getSeconds(); // 秒


プログラミングでは0(ゼロ)を数える

「10mの道路に1m置きに植木を植えて行きます。植木は何本必要ですか?」
始点のゼロを数えるというひとつの例です。

月の取得の際に注意が必要で、月は 1月から 12月ですが、getMonth() の値は 0月から 11月になっています。なので+1を追加し、1月~12月に直します。
また曜日の取得は0から6の数値が セットされていて 配列を使って、「×曜日」に置き換えます。

演習問題
今日の西暦年月日(〜年〜月〜日)を表示させなさい。

現在の時刻を(〜時〜分〜秒)を表示させなさい。

曜日を日本語に変更

曜日を日本語に変更するには「配列」を使います。



<script>
var date = new Date();
var myDay = date.getDay();
var days = new Array('日','月','火','水','木','金','土');
document.write(days[myDay]);
</script>

イベントハンドラによる画像置換

JavaScript

イベントとは?
イベントとは,ブラウザ上で発生した出来事全般のことを表します。例えばブラウザに表示された画像をマウスをクリックしたり、テキストボックスに文字を入力するといったように,閲覧者が何か操作したときにイベントが発生します。またHTMLがブラウザに読み込まれたり、別のページに移動したという現象もイベントとして認識されます。

イベントハンドラ
イベントをJavaScriptで扱うためには,予め決められているイベントハンドラという機能を使い、イベントの処理を行います。

今回は

  • onmouseover(指定した要素にマウスカーソルが乗ったとき)
  • onmouseout(指定した要素からマウスカーソルが外れたと)
  • onclick(指定した要素をクリックした時)

の3つを使って画像置換を行います。

今回はイベントハンドラを要素内に記述していますが、Webページを作成する際は、HTMLとスクリプトは分けて記述することが推奨されているので、今後は徐々にスクリプト部分は分けて記述するようにしていきます。

またイベントを指定したその要素自身に命令をかけたい場合と、イベントを指定した要素と違うものに命令をかけたい場合の指定方法をしっかりと覚えましょう。

指定した要素自身に命令をかけたい時は「this」
違う要素に命令したい時は「名前=ID属性」

thisの場合

<img src="img/01.png" alt="" onMouseOver="this.src='img/01_h.png'" onMouseOut="this.src='img/01.png'"></li>

ID指定の場合

<img src="img/01.png" alt="" onClick="main.src='img/01_h.png'"></li>

変数の使い方

JavaScript

JavaScriptでまず覚える事は変数の使い方です。変数とは値を入れておくことができる箱のようなものです。
処理結果などの値を変数に格納したり、それをまた別の処理へ引き渡したりすることができます。

変数宣言

変数を使用する上で、まず行うのが変数宣言です。ようは「こういった変数を使います」とまず宣言します。1回宣言すれば、その変数はいくらでも使い回す事が出来ます。

基本的に変数名は任意の文字で構いませんが、絶対に使ってはいけないワードがあります。それらの事を予約語といいます。
JavaScriptとして特別な意味を持つ単語は予約語として登録されています。例えば条件分岐を記述する時に使用される「if」などが予約語です。今後変数名など識別子として使う時にはJavaScript予約語は使用することができません。

f:id:yachin29:20160822111937j:plain

var 変数名 = ‘値、もしくは文字列’;

それでは変数を使って文字を表示させてみましょう。

<script>
var x = 'Hellow World!!';

document.write(x);
</script>

console.log

console.log関数とは文字通り、コンソール画面にログ(記述したスクリプト内容)を表示させる為に使う関数です。
自身の好きなタイミングで変数やオブジェクトの中身の値を確認できる為、正しい道順でプログラムが動いているか、途中途中で確認する事が出来ます。CSSの時と同じように、まずは「ミスをしない」よりも「ミスを自身で見つけられる」ようになりましょう。

使い方

確認したい変数などを「console.log( );」の中に入れて、Webブラウザの開発ツールのコンソールを立ち上げて各種ログを確認できます。

例えばChromeではデバッグしたいWebページを表示した状態でF12キー(もしくは検証モード)を押下し,上部のメニューからconsoleを選択します。

記述例

<script>
 
var a = 10

console.log(a);
 
</script>

プログラムとは

Javascript

プログラムとは?

いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。
プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解しましょう。

プログラム

コンピュータプログラム(英:computer programs)とは、コンピュータに対する命令(処理)を記述したものである。コンピュータが機能を実現するためには、CPUで実行するプログラムの命令が必要である。プログラミング言語と呼ばれるコンピューターのための言語。

要はコンピューターに命令し、動かす為に使う物(言語)です。


機械語
f:id:yachin29:20180405100930j:plain

本来、コンピューターは機械語と呼ばれる、0と1のみで構成されている言葉で動くように設定されています。しかし、人間が機械語を使ってコンピューターに命令するのは人間側に負担が多いので、人にとって比較的使い易い「プログラム言語」を使ってコンピューターに命令していきます。


プログラム学習

2020年以降、プログラミング教育が小学校で必修化されます。現在IT業界が抱えている問題として、今後さらにIT化していく社会に対しWebエンジニアをはじめとするIT人材の不足があります。
しかし、小学校のプログラミング教育は「プログラマーの育成」が目的ではありません。小学校段階におけるプログラミング教育の目的は、プログラミング言語の使い方を覚えることで無く、文部科学省は、プログラミング教育を通じて育成すべき資質・能力を「プログラミング的思考」という言葉で表現しています。

この事は初学者にとってのこのクラスでのプログラム授業と同じで、まずは「プログラミング的思考」を理解する事を目標にしましょう。

IT人材の需給に関する推計
http://www.meti.go.jp/press/2016/06/20160610002/20160610002.pdf

webで学ぼう|FIFkids(エフアイエフキッズ)

www.mext.go.jp

code.org

JavaScript とは – Web 開発を学ぶ | MDN

<body>
<script>
  alert('初めてのJavascript!');
</script>
</body>