前回の続きとなります。
初めてのJavaScript その3 - Qiita
組み込みオブジェクトに関して
JavaScriptの標準（最初から用意されている）オブジェクト、下記以外にも色々な関数が用意されています。
さらに知りたい場合はこちらを参照してください。
Stringオブジェクト
文字列を扱う
index.html
<script>
var s = "hello"; // var s = new String("hello"); と同じ意味になる
alert(s.length); // 文字列の長さを取得できる ←この場合は5
alert(s.replace("h", "H")); // 該当文字を置換できる ←この場合はhがHに変換される
alert(s.substr(1, 3)); // 指定した位置内の文字を抽出してくれる ←この場合はellとなる ※0から始まる！！！
</script>
Arrayオブジェクト
配列を扱う
index.html
<script>
var a = [1, 2, 3];// var a = new Array(1, 2, 3); と同じ意味になる
alert(a.length); // 配列の要素数を取得 ←この場合は3となる
a.push(5); // 配列の最後に要素を追加 ←この場合実行後は[1,2,3,5]となる
alert(a);
a.splice(1, 2, 8, 7); // 要素を取り除いたり、追加する ←この場合は[1,8,7]となる
// index 1の位置から2つ取り除き、そこへ2つ挿入する
alert(a);
</script>
Mathオブジェクト
計算系を扱う
index.html
<script>
alert(Math.PI); // 円周率を取得してくれる
alert(Math.ceil(3.4)); // 引数として与えた数以上の最小の整数を返す ← この場合は4となる
alert(Math.floor(3.4)); // 引数として与えた数以下の最大の整数を返す ← この場合は3となる
alert(Math.round(3.4)); // 引数として与えた数を四捨五入して、もっとも近似の整数を返す ←この場合は3となる
alert(Math.random()); //（0以上、1未満）の範囲で浮動小数点の擬似乱数を返す ←例えば0.13......とか
</script>
Dateオブジェクト
日付等を扱う
index.html
<script>
var d = new Date(); // 最初にDate型の変数を宣言する(現在の日付になる)
// var d = new Date(2017, 1, 1, 10, 20, 30); で任意の日付を宣言できる
alert(d.getFullYear()); // 与えた日付の年に相当する数値を返す
alert(d.getMonth()); // 与えた日付の月に相当する数値を返す
alert(d.getTime()); // 1970/1/1 からの経過ミリ秒を取得できる
</script>
DOM について
Document Object Model」の略
JavaScriptでhtmlの要素を操作するための仕組みというイメージ
index.html
<script>
alert(window.outerHeight);
window.location.href = 'https://www.google.co.jp/'; // googleのトップページに遷移される
</script>
では実際にDOMを操作して見ましょう
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>こんにちは</title>
<style>
.myStyle {
color: red;
}
</style>
</head>
<body>
<h1>どうも</h1>
<p id="msg">こんにちは</p>
<script>
var e = document.getElementById('msg'); // idがmsgの要素を取得する
e.textContent = 'どうも!'; // idがmsgの要素のテキストを書き換え
e.className = 'myStyle'; // idがmsgの要素のスタイルを指定 ←この場合文字が赤くなる
var tuika = document.createElement('p'),
text = document.createTextNode('追加されたよ'); // pタグとtextタグの要素を用意する
document.body.appendChild(tuika).appendChild(text); // htmlのbody内に新しい要素（pタグ）を追加する
</script>
</body>
</html>
最後にイベントを追加して見ましょう
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<h1>こんにちは</h1>
<p id="msg">どうも</p>
<button id="add">クリックボタン</button> // イベントがセットされるボタン
<script>
var e = document.getElementById('msg');
e.textContent = 'hello!';
// クリックボタンを押すたびに、要素が追加される
document.getElementById('add').addEventListener('click', function() {
var tuika = document.createElement('p'),
text = document.createTextNode('追加されたよ！！');
document.body.appendChild(tuika).appendChild(text);
});
</script>
</body>
</html>
おわりに
お疲れ様でした！！
以上でJavaScriptの基本的な部分を一通りやれたかと思います。
まだまだやれていない所がいっぱいあると思いますが、基本さえわかればあとは必要に応じて調べながら進んでいけばいいと思います。
ぜひ実際何か簡単な動的なページを作ってみて、理解を深めてください。
次はreact.jsについて、共有していきたいと思います！！
では、また！！