JavaScript Laboratory

JavaScriptの実験場もとい勉強部屋

writeメソッド

Hello, World!の表示

コード

document.write("Hello, World!");

出力結果

writeメソッド2

HTMLタグの出力

コード

document.write('<font color="#ff0000">Hello, World!<¥/font>');

出力結果

writeメソッド3

documentオブジェクトのプロパティ

コード

document.write('<p>あなたは<a href="' + document.referrer + '">' + document.referrer + '<¥/a>からこのページへアクセスしました。<¥/p>');
document.write('<p>このページのURLは<a href="' + document.URL + '">' + document.referrer + '<¥/a>です。<¥/p>");
document.write("<p>このページのタイトルは「" + document.title + "」です。<¥/p>");
document.write("<p>このページの更新日は" + document.lastModified + "です。<¥/p>");

出力結果

writeメソッド4

navigatorオブジェクトのプロパティ

コード

document.write("<p>あなたが現在利用しているWebブラウザのコード名は、「" + navigator.appCodeName + "」です。<¥/p>");
document.write("<p>あなたが現在利用しているWebブラウザは、「" + navigator.appName + "」です。<¥/p>");
document.write("<p>あなたが現在利用しているWebブラウザのバージョンは、「" + navigator.appVersion + "」です。<¥/p>");
document.write("<p>あなたが現在利用しているユーザエージェントは、「" + navigator.userAgent + "」です。<¥/p>");

出力結果

変数

var宣言子

コード

var midnightBlue = "#191970"
document.write('<p><font color="midnightBlue">midnightblueのカラーコードは、「' + midnightBlue + '」です。<¥/font><¥/p>');

出力結果

forループ

予め決められた回数のループ実行

コード

for(var n = 1; n <= 10; n++) {
   document.write("<p>nが10になるまで繰り返します。今nは" + n + "です。<¥/p>");
}

出力結果

条件分岐

条件による処理の振り分け

コード

var n = 5;
if(n > 0) {
   document.write("<p>nは" + n + "なので、正の値です。<¥/p>");
}
else if(n == 0) {
   document.write("<p>nは" + n + "です。<¥/p>");
}
else if(n < 0) {
   document.write("<p>nは" + n + "なので、負の値です。<¥/p>");
}
else {
   document.write("<p>nは文字列です。<¥/p>");
}

var n = 0;
if(n > 0) {
   document.write("<p>nは" + n + "なので、正の値です。<¥/p>");
}
else if(n == 0) {
   document.write("<p>nは" + n + "です。<¥/p>");
}
else if(n < 0) {
   document.write("<p>nは" + n + "なので、負の値です。<¥/p>");
}
else {
   document.write("<p>nは文字列です。<¥/p>");
}

var n = -5;
if(n > 0) {
   document.write("<p>nは" + n + "なので、正の値です。<¥/p>");
}
else if(n == 0) {
   document.write("<p>nは" + n + "です。<¥/p>");
}
else if(n < 0) {
   document.write("<p>nは" + n + "なので、負の値です。<¥/p>");
}
else {
   document.write("<p>nは文字列です。<¥/p>");
}

var n = "abc";
if(n > 0) {
   document.write("<p>nは" + n + "なので、正の値です。<¥/p>");
}
else if(n == 0) {
   document.write("<p>nは" + n + "です。<¥/p>");
}
else if(n < 0) {
   document.write("<p>nは" + n + "なので、負の値です。<¥/p>");
}
else {
   document.write("<p>nは文字列です。<¥/p>");
}

出力結果

ユーザ定義関数

関数の定義

コード

function conditionBranching() {
   if(n > 0) {
      document.write("<p>nは" + n + "なので、正の値です。<¥/p>");
   }
   else if(n == 0) {
      document.write("<p>nは" + n + "です。<¥/p>");
   }
   else if(n < 0) {
      document.write("<p>nは" + n + "なので、負の値です。<¥/p>");
   }
   else {
      document.write("<p>nは文字列です。<¥/p>");
   }
}

var n = 123;
conditionBranching();

var n = -99;
conditionBranching();

var n = 0;
conditionBranching();

var n = "text";
conditionBranching();

出力結果

documentインターフェース

documentノードを操作

コード

var number = document.getElementsByTagName("h2").length;
document.write("<p>このページでは、h2要素が" + number + "個使われています。<¥/p>");

var banner = document.createElement("img");
banner.setAttribute("src", "http://simpleism.net/banner.gif");
banner.setAttribute("width", "88");
banner.setAttribute("height", "31");
banner.setAttribute("alt", "SimpleIsmのバナー");
document.write("<span>右の画像は、SimpleIsmのバナーです。<¥/span>");
document.getElementsByTagName("span")[0].appendChild(banner);

出力結果

SimpleIsm, Markup Validation Service