JavaScriptを使い始める

Download javascript eBook

備考

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

console.log()を使用する

前書き

すべての最新のWebブラウザ、NodeJs、その他ほぼすべてのJavaScript環境では、一連のロギング手法を使用してコンソールにメッセージを書き込むことができます。これらのメソッドの最も一般的なものはconsole.log() です。

ブラウザ環境では、 console.log() 関数は主にデバッグ目的で使用されます。


入門

ブラウザでJavaScriptコンソールを開き 、次のように入力してEnterキーを押します。

console.log("Hello, World!"); 

これによりコンソールに次の情報が記録されます:

Google Chromeのコンソールログ出力

上記の例では、 console.log() 関数はHello, World! 出力しHello, World! (上記のコンソール出力ウィンドウに表示されている) undefined を返します。これは、 console.log() に明示的な戻り値がないためです


ロギング変数

console.log() は任意の種類の変数のログに使用できます。文字列だけでなく、コンソールに表示したい変数を渡してください。例:

var thisVar = 'first value';
var thatVar = 'second value';
console.log("thisVar:", thisVar, "and thatVar:", thatVar); 

これによりコンソールに次の情報が記録されます:

console.log()は変数とともに使用できます

2つ以上の値をログに記録する場合は、カンマで区切ります。連結中に各引数の間にスペースが自動的に追加されます。

var greet = "Hello", who = "World";
console.log("%s, %s!", greet, who);
 
これによりコンソールに次の情報が記録されます:

コンソール連動


プレースホルダ

console.log() は、プレースホルダと組み合わせて使用​​できますconsole.log()

console.log({
    'Email': '', 
    'Groups': {},
    'Id': 33,
    'IsHiddenInUI': false,
    'IsSiteAdmin': false,
    'LoginName': 'i:0#.w|virtualdomain\\user2',
    'PrincipalType': 1,
    'Title': 'user2'
}); 

これによりコンソールに次の情報が記録されます:

ここに画像の説明を入力


オブジェクトのロギング

以下では、オブジェクトをログに記録した結果を示します。これは、API呼び出しからJSON応答をログに記録するのに便利です。

console.log(document.body);
 

これによりコンソールに次の情報が記録されます:

コンソールに記録されたオブジェクト


HTML要素のロギング

DOM内に存在する要素をログに記録することができます 。この場合、body要素をログに記録します。

var foo = "bar";
console.log(foo);
 

これによりコンソールに次の情報が記録されます:

ここに画像の説明を入力


終了ノート

コンソールの機能の詳細については、 コンソールのトピックを参照してください。

DOM APIの使用

DOMは、 D]で文書O bject M odelの略です。 XMLHTMLなどの構造化文書のオブジェクト指向の表現です。

Element textContent プロパティを設定することは、Webページにテキストを出力する1つの方法です。

たとえば、次のHTMLタグを考えます。

<p id="paragraph"></p>
 

textContent プロパティを変更するには、次のJavaScriptを実行します。

<p id="paragraph">Hello, World</p>
 

id paragraph を持つ要素を選択し、そのテキストコンテンツを "Hello、World"に設定します。

<body>
   <h1>Adding an element</h1>
</body> 
 

(このデモも参照してください)


JavaScriptを使用して、プログラムで新しいHTML要素を作成することもできます。たとえば、次の本文のHTMLドキュメントを考えてみましょう。

var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM
 

私たちのJavaScriptでは、 textContent プロパティを持つ新しい<p> タグを作成し、html本文の最後に追加します:

<body>
   <h1>Adding an element</h1>
   <p>Hello, World</p>
</body>
 

それはあなたのHTML本文を次のように変更します:

document.getElementById("paragraph").textContent = "Hello, World";
 

JavaScriptを使用してDOM内の要素を操作するは、関連する要素が文書内に作成された後に JavaScriptコードを実行する必要があります。これは、他のすべての<body> コンテンツの後に JavaScript <script> タグを置くことで実現できます。あるいは、 イベントリスナーを使用して例えば、聴くこともできます。 windowonload イベントは 、そのイベントリスナーにコードを追加すると、ページ上の全コンテンツがロードされた後まで、あなたのコードを実行している遅らせます。

すべてのDOMがロードされていることを確認する3番目の方法は、DOM操作コードを0 msのタイムアウト関数でラップすることです 。この方法では、このJavaScriptコードは実行キューの最後に再キューされます。これにより、JavaScriptの新しい部分に参加する前に終了するのを待っていたJavaScript以外の処理をブラウザが完了することができます。

DOM API(グラフィカルテキスト:Canvas、SVG、またはimageファイル)を使用すると、

キャンバス要素の使用

HTMLは、ラスタベースの画像を構築するためのキャンバス要素を提供します。

まず、画像ピクセル情報を保持するキャンバスを構築します。

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;
 

次にキャンバスのコンテキストを選択します。この場合は2次元です。

ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);
 

次に、テキストに関連するプロパティを設定します。

document.body.appendChild(canvas);
 

次にcanvas 要素をページに挿入して有効にします。

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;
 

SVGの使用

SVGはスケーラブルなベクターベースのグラフィックを作成するためのもので、HTML内で使用できます。

最初に、次のディメンションを持つSVG要素コンテナを作成します。

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 要素に表示する実際のテキストを追加しtext

svg.appendChild(text);
document.body.appendChild(svg);
 

最後に、 text 要素をsvg コンテナに追加し、 svg コンテナ要素をHTMLドキュメントに追加します。

var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);
 

画像ファイル

目的のテキストを含むイメージファイルをすでにサーバーに置いている場合は、イメージのURLを追加して、次のようにイメージをドキュメントに追加できます。

var ctx = canvas.getContext('2d');
 

window.alert()を使う

alert メソッドは、画面上に視覚的警告ボックスを表示します。警告メソッドのパラメータは、 プレーンテキストでユーザーに表示されます。

window.alert(message);
 

window はグローバルオブジェクトなので、次の省略表現も使用できます。

alert('hello, world');
 

window.alert() は何をしますか?さて、次の例を考えてみましょう:

alert('Pause!');
console.log('Alert was dismissed');
 

Chromeでは、次のようなポップアップが生成されます。 アラート

ノート

alert この方法は、技術的の財産であるwindow オブジェクトが、すべてのことからwindow プロパティは自動的にグローバル変数であり、我々は使用することができalert グローバル変数としての代わりのプロパティとしてwindow -あなたが直接使用することができるという意味alert() 代わりにwindow.alert()

console.log を使用するのとは異なり、 alert はモーダルプロンプトとして機能し、プロンプトに応答するまでalert を呼び出すコードが停止することを意味します。伝統的にこれは、アラートが解除されるまで他のJavaScriptコードが実行さないことを意味します

alert(message);
 

しかし、この仕様では、モーダルダイアログがまだ表示されているにもかかわらず、実際には他のイベントトリガコードの実行を継続できます。このような実装では、モーダルダイアログが表示されている間に他のコードを実行することは可能です。

alert メソッドの使用方法の詳細については、 モーダルプロンプトのトピックを参照してください。

アラートの使用は、通常、ユーザーがページを操作することを妨げない他の方法を使用することをお勧めします。ユーザーエクスペリエンスを向上させるためです。それにもかかわらず、デバッグには便利です。

Chrome 46.0以降、sandbox属性の値がallow-modalでない限りwindow.alert()<iframe> 内でブロックされます

window.confirm()を使う

window.confirm() メソッドは、オプションのメッセージとOKとCancelの2つのボタンを持つモーダルダイアログを表示します。

次に、次の例を考えてみましょう。

result = window.confirm(message);
 

messageはダイアログに表示されるオプションの文字列で、 resultはOKまたはCancelが選択されたかどうかを示すブール値です(trueはOKを意味します)。

window.confirm() は、通常、コントロールパネルで何かを削除するなどの危険な操作を行う前に、ユーザーの確認を求めるために使用されます。

var deleteConfirm = window.confirm("Are you sure you want to delete this?");
 

そのコードの出力はブラウザで次のようになります。

確認ダイアログは非常に単純です:メッセージ、OK、キャンセル

後で使用するために必要な場合は、ユーザーの操作の結果を変数に保存するだけです。

if(window.confirm("Are you sure you want to delete this?")) {
    deleteItem(itemId);
}
 

ノート

  • 引数はオプションであり、仕様で必須ではありません。
  • ダイアログボックスはモーダルウィンドウです。ダイアログボックスが閉じられるまで、ユーザーはプログラムの残りのインターフェイスにアクセスできません。このため、ダイアログボックス(またはモーダルウィンドウ)を作成する関数を過度に使用しないでください。それにもかかわらず、確認のためにダイアログボックスを使用しないようにする理由は非常にあります。
  • Chrome 46.0以降、このメソッドは、そのサンドボックス属性の値がallow-modalでない限り、 <iframe> 内でブロックされます。
  • ウィンドウオブジェクトが常に暗黙的であるため、ウィンドウメソッドを削除した状態でconfirmメソッドを呼び出すことは一般的に受け入れられています。ただし、同様の名前のメソッドを使用して、より低いスコープレベルで実装するために予想される動作が変更される可能性があるため、ウィンドウオブジェクトを明示的に定義することをお勧めします。

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> 内でブロックされます。

Stats

15071 Contributors: 179
Monday, August 7, 2017
ライセンスを受けた: CC-BY-SA

所属していない Stack Overflow
Rip Tutorial: info@zzzprojects.com

eBookをダウンロード