Help us understand the problem. What is going on with this article?

年末まで毎日webサイトを作り続ける大学生 〜46日目 Cookieを使う、その他〜

はじめに

こんにちは!@70days_jsです。

Cookieを使ってみました。
その他色々JavaScriptの機能を使ってみました。

今日は46日目。(2019/12/3)
よろしくお願いします。

サイトURL

https://sin2cos21.github.io/day46.html

やったこと

  1. documentオブジェクトを利用する
  2. onselectionchangeイベントと、getSelectionを利用する
  3. cookieを利用する

では1からいきます。

1. documentオブジェクトを利用する

ざっとこんな感じです。↓

スクリーンショット 2019-12-03 13.39.49.png

<div id="test"></div>
// 最終更新日 lastModified
test.innerHTML += '最終更新日: ' + document.lastModified + '<br>';

// ドメイン名 domain
test.innerHTML += 'ドメイン名: ' + document.domain + '<br>';

// タイトル title
test.innerHTML += 'タイトル名: ' + document.title + '<br>';

// プラグイン数 plugins
for (var i = 0; document.plugins.length > i; i++) {
    plugins += document.plugins[i] + ',';
}

test.innerHTML += 'プラグイン数: ' + plugins + '<br>';

documentオブジェクトは色々な情報が取得できて便利ですね。
当たり前ですが、どれもdocumentの後にプロパティ名をつけるだけで呼び出せます。

2. onselectionchangeイベントと、getSelectionを利用する

名前だけじゃ分かりづらいですね。
onselectionchangeイベントは選択範囲の変更時に起きるイベントです。
getSelectionは選択範囲の文字列を調べるメソッドです。
gif↓
test2.gif

あらかじめ用意しておいた文字列を選択すると、その文字列をinnnerHTMLに加えていくように書いています。

    <div id="field2">
        <div id="charSelect">選択した文字列: </div>
        何だろう
        。
        どうしてか
        、
        僕は
        今日
    </div>
// 選択範囲に変化があったときに起こるイベント onselectionchange
document.onselectionchange = function () {
    // 選択された文字列を調べる getSelection()
    let select = document.getSelection();
    charSelect.innerHTML += select;
}

onselectionchangeイベントもdocumentから取っています。

3. cookieを利用する

では最後にcookieです。↓
test3.gif

太郎と名前を入力すれば、それをnameに入れてcookieで記録するようにしています。
もし、nameに値があれば、h2タグに値をいれて名前を表示します。

<h2 id="myName"></h2>
...

<div id="field3">
    <button id="test2">cookieを作るボタン</button>
    <div id="cookieField"></div>
</div>
test2.addEventListener('click', test3);

function test3() {
    let name = prompt('名前を入力してください。');
    document.cookie = 'name=' + name;
    document.cookie = 'your_type = shy';
    cookieField.innerHTML += 'クッキー: ' + document.cookie + '<br>';
    takeCookie();
    myName2();
}

function takeCookie() {
    if (document.cookie) {
        let cookie = document.cookie.split(';');
        cookie.forEach(function (value) {
            let content = value.split('=');
            cookieField.innerHTML += 'クッキーの値だけ: ' + content[1] + '<br>';
            if (content[0] == 'name') {
                cookieName = content[1];
            }
        })
    }
};

let myName = document.getElementById('myName');

function myName2() {
    if (cookieName) {
        myName.innerHTML = 'Hey, ' + cookieName + 'さん!';
    }
};

どうでもいいことを色々書いているので長くなっていますが、要はdocument.cookieで値を代入していて、cookie.forEachで値を取り出しているだけです。
cookieは一連の文字列なので、;で区切ってやります。
その後に=で区切って名前だけを取り出します。

感想

最近眠れなくて脳がまともに働きません。プログラムミスかな?
冗談です。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした