サーチ…
備考
JavaScript（ Javaと混同しないでください）は、クライアント側およびサーバー側のスクリプトに使用される動的で弱い型の言語です。
JavaScriptは大文字と小文字を区別する言語です。これは、大文字と小文字が異なるとみなすことを意味します。 JavaScriptのキーワードはすべて小文字です。
JavaScriptは、ECMAScript標準の一般的に参照される実装です。
このタグのトピックは、特に明記しない限り、ブラウザ内のJavaScriptの使用を参照することがあります。 JavaScriptファイルだけでは、ブラウザで直接実行することはできません。それらをHTML文書に埋め込む必要があります。試したいJavaScriptコードがある場合は、このようなプレースホルダコンテンツに埋め込み、結果をexample.htmlとして保存することができexample.html ：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test page</title>
</head>
<body>
Inline script (option 1):
<script>
// YOUR CODE HERE
</script>
External script (option 2):
<script src="your-code-file.js"></script>
</body>
</html>
バージョン
| バージョン | 発売日 |
|---|---|
| 1 | 1997-06-01 |
| 2 | 1998-06-01 |
| 3 | 1998年12月1日 |
| E4X | 2004-06-01 |
| 5 | 2009-12-01 |
| 5.1 | 2011-06-01 |
| 6 | 2015-06-01 |
| 7 | 2016年06-14-14 |
| 8 | 2017-06-27 |
DOM APIの使用
DOMは、 D]で文書O bject M odelの略です。 XMLやHTMLなどの構造化文書のオブジェクト指向の表現です。
Element textContentプロパティを設定することは、Webページにテキストを出力する1つの方法です。
たとえば、次のHTMLタグを考えます。
<p id="paragraph"></p>
textContentプロパティを変更するには、次のJavaScriptを実行します。
document.getElementById("paragraph").textContent = "Hello, World";
id paragraphを持つ要素を選択し、そのテキストコンテンツを "Hello、World"に設定します。
<p id="paragraph">Hello, World</p>
JavaScriptを使用して、プログラムで新しいHTML要素を作成することもできます。たとえば、次の本文のHTMLドキュメントを考えてみましょう。
<body>
<h1>Adding an element</h1>
</body>
私たちのJavaScriptでは、 textContentプロパティを持つ新しい<p>タグを作成し、html本文の最後に追加します：
var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM
それはあなたのHTML本文を次のように変更します：
<body>
<h1>Adding an element</h1>
<p>Hello, World</p>
</body>
JavaScriptを使用してDOM内の要素を操作するには、関連する要素が文書内に作成された後に JavaScriptコードを実行する必要があります。これは、他のすべての<body>コンテンツの後に JavaScript <script>タグを置くことで実現できます。あるいは、 イベントリスナーを使用して、例えば、聴くこともできます。 windowのonloadイベントは 、そのイベントリスナーにコードを追加すると、ページ上の全コンテンツがロードされた後まで、あなたのコードを実行している遅らせます。
すべてのDOMがロードされていることを確認する3番目の方法は、DOM操作コードを0 msのタイムアウト関数でラップすることです 。この方法では、このJavaScriptコードは実行キューの最後に再キューされます。これにより、JavaScriptの新しい部分に参加する前に終了するのを待っていたJavaScript以外の処理をブラウザが完了することができます。
console.log（）を使用する
前書き
すべての最新のWebブラウザ、NodeJs、その他ほぼすべてのJavaScript環境では、一連のロギング手法を使用してコンソールにメッセージを書き込むことができます。これらのメソッドの最も一般的なものはconsole.log()です。
ブラウザ環境では、 console.log()関数は主にデバッグ目的で使用されます。
入門
ブラウザでJavaScriptコンソールを開き 、次のように入力してEnterキーを押します。
console.log("Hello, World!");これによりコンソールに次の情報が記録されます：
上記の例では、 console.log()関数はHello, World!出力しHello, World! （上記のコンソール出力ウィンドウに表示されている） undefinedを返します。これは、 console.log()に明示的な戻り値がないためです 。
ロギング変数
console.log()は任意の種類の変数のログに使用できます。文字列だけでなく、コンソールに表示したい変数を渡してください。例：
var foo = "bar";
console.log(foo);
これによりコンソールに次の情報が記録されます：
2つ以上の値をログに記録する場合は、カンマで区切ります。連結中に各引数の間にスペースが自動的に追加されます。
var thisVar = 'first value';
var thatVar = 'second value';
console.log("thisVar:", thisVar, "and thatVar:", thatVar); 
プレースホルダ
console.log()は、プレースホルダと組み合わせて使用できますconsole.log()
var greet = "Hello", who = "World";
console.log("%s, %s!", greet, who);
これによりコンソールに次の情報が記録されます：
オブジェクトのロギング
以下では、オブジェクトをログに記録した結果を示します。これは、API呼び出しからJSON応答をログに記録するのに便利です。
console.log({
'Email': '',
'Groups': {},
'Id': 33,
'IsHiddenInUI': false,
'IsSiteAdmin': false,
'LoginName': 'i:0#.w|virtualdomain\\user2',
'PrincipalType': 1,
'Title': 'user2'
});これによりコンソールに次の情報が記録されます：
HTML要素のロギング
DOM内に存在する要素をログに記録することができます 。この場合、body要素をログに記録します。
console.log(document.body);
これによりコンソールに次の情報が記録されます：
終了ノート
コンソールの機能の詳細については、 コンソールのトピックを参照してください。
window.alert（）を使う
alertメソッドは、画面上に視覚的警告ボックスを表示します。警告メソッドのパラメータは、 プレーンテキストでユーザーに表示されます。
window.alert(message);
windowはグローバルオブジェクトなので、次の省略表現も使用できます。
alert(message);
window.alert()は何をしますか？さて、次の例を考えてみましょう：
alert('hello, world');
Chromeでは、次のようなポップアップが生成されます。 
ノート
alertこの方法は、技術的の財産であるwindowオブジェクトが、すべてのことからwindowプロパティは自動的にグローバル変数であり、我々は使用することができalertグローバル変数としての代わりのプロパティとしてwindow-あなたが直接使用することができるという意味alert()代わりにwindow.alert()。
console.logを使用するのとは異なり、 alertはモーダルプロンプトとして機能し、プロンプトに応答するまでalertを呼び出すコードが停止することを意味します。伝統的にこれは、アラートが解除されるまで他のJavaScriptコードが実行されないことを意味します 。
alert('Pause!');
console.log('Alert was dismissed');
しかし、この仕様では、モーダルダイアログがまだ表示されているにもかかわらず、実際には他のイベントトリガコードの実行を継続できます。このような実装では、モーダルダイアログが表示されている間に他のコードを実行することは可能です。
alertメソッドの使用方法の詳細については、 モーダルプロンプトのトピックを参照してください。
アラートの使用は、通常、ユーザーがページを操作することを妨げない他の方法を使用することをお勧めします。ユーザーエクスペリエンスを向上させるためです。それにもかかわらず、デバッグには便利です。
Chrome 46.0以降、sandbox属性の値がallow-modalでない限り 、 window.alert()は<iframe>内でブロックされます 。
window.prompt（）を使用する
prompt()メソッドを使用すると、ユーザーからの入力を簡単に取得できprompt() 。
構文
prompt(text, [default]);
- text ：プロンプト・ボックスに表示されるテキスト。
- デフォルト ：入力フィールドのデフォルト値（オプション）。
例
var age = prompt("How old are you?");
console.log(age); // Prints the value inserted by the user
ユーザーが[ OK ]ボタンをクリックすると、入力値が返されます。それ以外の場合、このメソッドはnull返しnull 。
promptの戻り値は、ユーザが[ キャンセル]をクリックしない限り、常に文字列です。この場合、 nullが返されnull 。 Safariの例外は、ユーザーが[キャンセル]をクリックすると、関数が空の文字列を返す点です。そこから戻り値を整数などの別の型に変換することができます。
ノート
- プロンプトボックスが表示されている間、ダイアログボックスはモーダルウィンドウなので、ユーザーはページの他の部分にアクセスすることはできません。
- Chrome 46.0以降、このメソッドは、そのサンドボックス属性の値がallow-modalでない限り、
<iframe>内でブロックされます。
DOM API（グラフィカルテキスト：Canvas、SVG、またはimageファイル）を使用すると、
キャンバス要素の使用
HTMLは、ラスタベースの画像を構築するためのキャンバス要素を提供します。
まず、画像ピクセル情報を保持するキャンバスを構築します。
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
次にキャンバスのコンテキストを選択します。この場合は2次元です。
var ctx = canvas.getContext('2d');
次に、テキストに関連するプロパティを設定します。
ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);
次にcanvas要素をページに挿入して有効にします。
document.body.appendChild(canvas);
SVGの使用
SVGはスケーラブルなベクターベースのグラフィックを作成するためのもので、HTML内で使用できます。
最初に、次のディメンションを持つSVG要素コンテナを作成します。
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;
次に、目的の位置とフォントの特性を持つtext要素を作成しtext 。
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '0');
text.setAttribute('y', '50');
text.style.fontFamily = 'Times New Roman';
text.style.fontSize = '50';
次に、 text要素に表示する実際のテキストを追加しtext 。
text.textContent = 'Hello world!';
最後に、 text要素をsvgコンテナに追加し、 svgコンテナ要素をHTMLドキュメントに追加します。
svg.appendChild(text);
document.body.appendChild(svg);
画像ファイル
目的のテキストを含むイメージファイルをすでにサーバーに置いている場合は、イメージのURLを追加して、次のようにイメージをドキュメントに追加できます。
var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);
window.confirm（）を使う
window.confirm()メソッドは、オプションのメッセージとOKとCancelの2つのボタンを持つモーダルダイアログを表示します。
次に、次の例を考えてみましょう。
result = window.confirm(message);
messageはダイアログに表示されるオプションの文字列で、 resultはOKまたはCancelが選択されたかどうかを示すブール値です（trueはOKを意味します）。
window.confirm()は、通常、コントロールパネルで何かを削除するなどの危険な操作を行う前に、ユーザーの確認を求めるために使用されます。
if(window.confirm("Are you sure you want to delete this?")) {
deleteItem(itemId);
}
そのコードの出力はブラウザで次のようになります。
後で使用するために必要な場合は、ユーザーの操作の結果を変数に保存するだけです。
var deleteConfirm = window.confirm("Are you sure you want to delete this?");
ノート
- 引数はオプションであり、仕様で必須ではありません。
- ダイアログボックスはモーダルウィンドウです。ダイアログボックスが閉じられるまで、ユーザーはプログラムの残りのインターフェイスにアクセスできません。このため、ダイアログボックス（またはモーダルウィンドウ）を作成する関数を過度に使用しないでください。それにもかかわらず、確認のためにダイアログボックスを使用しないようにする理由は非常にあります。
- Chrome 46.0以降、このメソッドは、そのサンドボックス属性の値がallow-modalでない限り、
<iframe>内でブロックされます。 - ウィンドウオブジェクトが常に暗黙的であるため、ウィンドウメソッドを削除した状態でconfirmメソッドを呼び出すことは一般的に受け入れられています。ただし、同様の名前のメソッドを使用して、より低いスコープレベルで実装するために予想される動作が変更される可能性があるため、ウィンドウオブジェクトを明示的に定義することをお勧めします。
