くえびこのやうになりてしか
くえびこのやうになりてしか
helpdelete

JavaScript

はじめに

基本構文

インライン

<!DOCTYPE html>
<html>
    <head>
        <title>javascript!</title>
    </head>
    <body>
        <button onclick="alert('Hi!')">Click Me!
        </button>
    </body>
</html>

内部JavaScript

<!DOCTYPE html>
<html>
    <head>
        <title>javascript!</title>
    </head>
    <body>
        <script type="text/javascript">
            alert("This is message!");
        </script>
    </body>
</html>

外部JavaScript

<!DOCTYPE html>
<html>
    <head>
        <title>javascript!</title>
        <script type="text/javascript" src="script.js">
        </script>
    </head>
    <body>
    </body>
</html>
script.js
function average(a, b) {
    return ((a + b) / 2);
}

コメント

// 1行コメント

/*
  複数行コメント
*/

変数

const a = 1;    // ブロックスコープ（更新不可）
let b = 1;      // ブロックスコープ（更新可）
var x = 10;     // 関数スコープ
x = 5;          // グローバルスコープ
var array1 = new Array();
array1[0] = "red";
array1[1] = "blue";
array1[2] = "green";

配列

var array2 = ["red", "blue", "green"];

// 配列長
array1.length

// 配列に"white"を追加
array2.push = "white";

// 配列の2番目に"black"を挿入
array2.splice(2,1,"black");

// 配列の2番目に"black"を上書き
array2.splice(2,1,"black");

条件分岐

var x = 1;

if (x == 1) {
    // xが1の場合
} else if (x == 2) {
    // xが2の場合
} else {
    // xが1でも2でも無い場合
}

繰り返し処理

for文

for (var i = 0; i < 8; i++) {
    // 処理
}

while文

var i = 0;

while (i < 10) {
    // 処理

    // インクリメント
    i++;
}

関数

関数を事前に宣言

function average(a, b) {
    return ((a + b) / 2);
}

var a = 1;
var b = 3;
var ave = 0;
ave = average(a, b);

無名関数

var ave = function(a, b) {
    return ((a + b) / 2);
}

動的定義

var ave = new Function('a', 'b', 'return ((a + b) / 2)');
var herf = ave(1, 3);

アロー関数

// 基本形
var ave = (a, b) => {
    return ((a + b) / 2);
}  

// 処理が1行の場合は{}で囲まなくてもよい
var ave = (a, b) => return ((a + b) / 2);

// 引数が1つだけの場合、()は記載不要
var ave = a => return (a / 2);

// 引数が無い場合、()のみ記載
var ave = () => return (a / 2);

文字列操作

文字数カウント

length

サロゲートペアの文字は正しくカウントできないので注意が必要。

console.log("あ".length);
//=> 1
console.log("🍎".length);
//=> 2
console.log("𩸽".length);
//=> 2

スプレッド演算子

文字列に対してスプレッド演算子...を使うことで文字ごとに区切られた配列が得られることを利用し、文字数をカウント。
但し絵文字によっては正しくカウントできないので注意が必要。

console.log([..."あ"].length);
//=> 1
console.log([..."🍎"].length);
//=> 1
console.log([..."𩸽"].length);
//=> 1
console.log([..."👨🏻‍💻"].length);
//=> 4

Intl.Segmenter

コード量は多くなってしまうが、サロゲートペアや絵文字も考慮してカウント可能。
コード量は関数化してある程度解消できる。

function cntGrapheme(string) {
  const segmenter = new Intl.Segmenter("ja", { granularity: "grapheme" });
  return [...segmenter.segment(string)].length;
}

console.log(cntGrapheme("あ"));
//=> 1
console.log(cntGrapheme("🍎"));
//=> 1
console.log(cntGrapheme("𩸽"));
//=> 1
console.log(cntGrapheme("🏴󠁧󠁢󠁥󠁮󠁧󠁿"));
//=> 1
console.log(cntGrapheme("🇯🇵"));
//=> 1
console.log(cntGrapheme("👨🏻‍💻"));
//=> 1

Tip

要素へのアクセス

<!DOCTYPE html>
<html>
    <head>
        <title>javascript!</title>
    </head>
    <body>
        <p id="text">Hello World !</p>

        <script type="text/javascript">
            // classが"text"の内容を"Hi World !"に書き換える
            document.getElementById("text").innerHTML = "Hi World !";
        </script>
    </body>
</html>

ボタンクリックで実行

<!DOCTYPE html>
<html>
    <head>
        <title>javascript!</title>
    </head>
    <body>
        <p id="text">Hello World !</p>
        <button id="myButton">Click !</button>

        <script type="text/javascript">
            document.getElementById("myButton").onclick = function() {
                // "Hello World !"に書き換え
                document.getElementById("text").innerHTML = "Hi World !";
            }
        </script>
    </body>
</html>

文字列の追記

<!DOCTYPE html>
<html>
    <head>
        <title>javascript!</title>
    </head>
    <body>
        <p id="text">Hello World !</p>
        <button id="myButton">Click !</button>

        <script type="text/javascript">
            document.getElementById("myButton").onclick = function() {
                // 表示中の文字列に" Hi World !"を追記する
                document.getElementById("text").innerHTML += " Hi World !";
            }
        </script>
    </body>
</html>

Styleの変更

<!DOCTYPE html>
<html>
    <head>
        <title>javascript!</title>
    </head>
    <body>
        <p id="text">Hello World !</p>
        <button id="myButton">Click !</button>

        <script type="text/javascript">
            document.getElementById("myButton").onclick = function() {
                // 文字色を赤に変更
                document.getElementById("text").style.color = "red";
            }
        </script>
    </body>
</html>

テキストボックスから値を取得

<!DOCTYPE html>
<html>
    <head>
        <title>javascript!</title>
    </head>
    <body>
        <p><input type="text" id="inputForm"></p>
        <button id="myButton">Click !</button>

        <script type="text/javascript">
            document.getElementById("myButton").onclick = function() {
                var str = "";
                str = document.getElementById("inputForm").value;
                alert(str);
            }
        </script>
    </body>
</html>

checkboxの判定

<form name="form1">
    <input class="form-check-input" type="checkbox" name="chk1">
</form>
var ret = document.form1.chk1.checked;
if (ret == "true") {
    // チェックがついてる場合
}