ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」の使い方エラーチェックをする方法変数配列(Array)「DOM(Document Object Model)」の使い方関数 / Function条件分岐・繰り返しイベントハンドラー(Event Handler)文字の操作方法文字の検索方法スコープファイルの操作方法画像の操作方法情報を出力・チェックする方法ヒアドキュメントの使い方Built-in Object(ビルトインオブジェクト)ライブラリー / Library
Library
「Ajax」の使い方
Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法
Reference
数字
計算に誤差が出る時の解決方法
ファイル読み込み
「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法
イベント
ページ読み込み時に「Javascript」を実行する方法画像読み込みが完了してから、次の処理を実行する方法「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法
要素情報
HTMLタグの「class」属性値を取得、変更する方法「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法要素の配置位置を確認する方法
Style関連
スタイル属性(色・線・大きさなど)を参照・変更する方法「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
ページ関連
Webページのタイトルを変更する方法「モニター」情報を取得する方法「ブラウザ」情報を取得する方法「ページ」情報を取得する方法「イベント」情報を取得する方法「マウス」情報を取得する方法
サイズ関連
要素の縦・横サイズを参照・変更する方法「モニター」「ブラウザ」のサイズ情報を取得する方法
端末情報
スマートフォンからのアクセスを識別する方法





【Javascript】ヒアドキュメントの使い方

【Javascript】
ヒアドキュメントの使い方




「Javascript」だけでなく、
プログラミンで、記述したものをそのまま出力できる仕組みが「ヒアドキュメント」という機能。
各プログラムで、「ヒアドキュメント」が使えるようになっていますが、
「Javascript」でも使えます。

ですが、「Javascript」では、専用のメソッドは用意されていないようなので、
既存のメソッドなどを組み合わせて使用するようです。






ヒアドキュメントとは


「ヒアドキュメント」というのは、
「改行」「スペース」などを含めたものが、
記述した書式のまま、変数などに格納する技術で、
そのまま画面などに出力することも可能。

文字コードなどを駆使して、一行に記述することもで来ますが、
記述したままの状態で出力ができたら本当に便利です。


「Javascript」では、「ヒアドキュメント」は実装されていないので、
自分で、既存のメソッドなどを組み合わせて「ヒアドキュメント」を実現している。


Back



「Javascript」のヒアドキュメントの書式


「Javascript」の「ヒアドキュメント」は、
専用のメソッドではなく、
既存のメソッドを組み合わせて、「ヒアドキュメント」を実現しています。



「Javascript」の「ヒアドキュメント」サンプルコード

「function」を使用した「ヘアドキュメント」

const HereDoc = function() {/*
Hello
This is Here Document Sample!!
*/};

console.log(HereDoc);


出力結果
/*
Hello
This is Here Document Sample!!
*/


上記の出力結果から、「/*」「*/」を取り除けば、
「ヒアドキュメントとして成立するので、
下記のようなコードになる。


var HereDoc = (function () {/*
<div>
<h1>ページタイトル</h1>
</div>
*/}).toString().match(/(?:\/\*(?:[\s\S]*?)\*\/)/).pop().replace(/^\/\*/, "").replace(/\*\/$/, "");


const HereDoc = function() {/*
Hello
This is Here Document Sample!!
*/};

console.log(HereDoc);
const HereDoc_Result = HereDoc.toString().match(//*([sS]*)*//).pop();
console.log(HereDoc_Result);


「script」タグを使った「ヒアドキュメント」

「script」タグ内に記述して、Webに表示されないようにしておき、
「Javascript」で、テキスト呼び込んで出力することもできる。

<script type="text/plain" id="HereDocText">
このテキストは、「script」タグ内に記述されたテキストです。
「head」タグ内に記述しておいてもOK。
</script>

const HereDoc = document.getElementById('HereDocText').textContent;
console.log(HereDoc);


ES6のJavaScriptから利用できるようになったテンプレートリテラル

const text = `
サンプルテキスト
サンプル
サンプル サンプル`;

console.log(text);

サンプルテキスト
サンプル
サンプル サンプル


const HtmlDoc = `
<div>
<h1>こんにちは!</h1>
</div>
`;
document.getElementById('ID名').innerHTML = HtmlDoc;



Back