JavaScript – ９９.９%の科学〜曖昧から確信へ

(Javascript) for文

JavaScript

Tweet Pocket

<!DOCTYPE html>
<html>
<body>
	<h2>For文</h2>

	<!--「show」というidを持つpタグを作成。後ほどこのpタグにjavascriptを用いて内容を書き入れる。 -->
	<p id="show"></p>

	<!-- Javascriptの記述 -->
	<script>
	var tools = ["pencil", "iphone", "case", "box", "pen", "phone"];//６個のアイテムを持つ変数（配列）
	var content = "";//for文で文章を追加していくための変数
	var i;
	
	//for文で、変数iが０からtools配列の個数（５個＝６個－１個）になるまで繰り返す。
	for(i=0; i<tools.length; i++){
		content += tools[i] + "<br>";
	}

	//「show」というidを持つタグに「content」という変数の中身を記述する。
	document.getElementById("show").innerHTML = content;
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

var tools = ["pencil", "iphone", "case", "box", "pen", "phone"];//６個のアイテムを持つ変数（配列）

var content = "";//for文で文章を追加していくための変数

var i;

//for文で、変数iが０からtools配列の個数（５個＝６個－１個）になるまで繰り返す。

for(i=0; i<tools.length; i++){

content += tools[i] + "<br>";

}

//「show」というidを持つタグに「content」という変数の中身を記述する。

document.getElementById("show").innerHTML = content;

</script>

</body>

</html>

(JavaScript)while文

JavaScript

コメントをどうぞ

Tweet Pocket

<!DOCTYPE html>
<html>
<body>
	<h2>While文</h2>

	<!--「show」というidを持つpタグを作成。後ほどこのpタグにjavascriptを用いて内容を書き入れる。 -->
	<p id="show"></p>

	<!-- Javascriptの記述 -->
	<script>
	var content = "";
	var i = 0;

	//while文で変数iが10になるまでwhile文の中のコードを繰り返す。
	while(i < 10){
		//content変数に、文章を追加する。
		content += "<br>数字は、" + i + "です。";
		i++; //i変数の数字を１増加させる。
	}

	//「show」というidを持つタグに「content」という変数の中身を記述する。
	document.getElementById("show").innerHTML = content;
	</script>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>While文</h2>

var content = "";

var i = 0;

//while文で変数iが10になるまでwhile文の中のコードを繰り返す。

while(i < 10){

//content変数に、文章を追加する。

content += "<br>数字は、" + i + "です。";

i++; //i変数の数字を１増加させる。

}

//「show」というidを持つタグに「content」という変数の中身を記述する。

document.getElementById("show").innerHTML = content;

</script>

</body>

</html>

(JavaScript)switch文

JavaScript

コメントをどうぞ

Tweet Pocket

<!DOCTYPE html>
<html>
<head>
	<title>switch文による条件分岐</title>
</head>
<body>
	<h1>switch文による条件分岐</h1>
	<h3>このプログラムの説明</h3>
	<p>「JavaScriptのDateオブジェクトのgetDay()メソッドを用いて、現在の曜日を取得する。そして、その曜日に従って、switch文によって条件分岐させて結果をidを持つpタグに表示させる。」</p>	

	<h3>結果</h3>
	<!-- 「show」というidをもつpタグを作成。ここにjavasciptの関数の結果を表示させる -->
	<p id="show"></p>

	<!--ここからJavaScriptです。-->	
	<script>
	var message;//メッセージを格納する変数を準備
	var day = new Date().getDay();//現在の日時の曜日を取得して変数dayに格納
	alert(day);//現在の曜日をアラートで表示
	//switch文。変数dayの内容にしたがって、条件分岐される。
	switch(day){
		case 3:
			//変数dayが3(水曜日のこと)の時、下の2行が実行される。
			message = "今日は水曜日です。";
			break;
			//変数dayが0(日曜日のこと)の時、下の2行が実行される。
		case 0:
			message = "今日は日曜日です。";
			break;
		default:
			//変数dayが3(水曜日のこと)でも0(日曜日のこと)でもない時、下の2行が実行される。
			message = "今日は水曜日でも日曜日でもありません。";
	}
	//idが「show」のタグを取得してきて、そのタグの中身に変数messageの内容を表示
	document.getElementById("show").innerHTML = message;
	</script>
</body>

<!DOCTYPE html>

<html>

<head>

<title>switch文による条件分岐</title>

</head>

<body>

<h1>switch文による条件分岐</h1>

<h3>このプログラムの説明</h3>

<p>「JavaScriptのDateオブジェクトのgetDay()メソッドを用いて、現在の曜日を取得する。そして、その曜日に従って、switch文によって条件分岐させて結果をidを持つpタグに表示させる。」</p>

var message;//メッセージを格納する変数を準備

var day = new Date().getDay();//現在の日時の曜日を取得して変数dayに格納

alert(day);//現在の曜日をアラートで表示

//switch文。変数dayの内容にしたがって、条件分岐される。

switch(day){

case 3:

//変数dayが3(水曜日のこと)の時、下の2行が実行される。

message = "今日は水曜日です。";

break;

//変数dayが0(日曜日のこと)の時、下の2行が実行される。

case 0:

message = "今日は日曜日です。";

break;

default:

//変数dayが3(水曜日のこと)でも0(日曜日のこと)でもない時、下の2行が実行される。

message = "今日は水曜日でも日曜日でもありません。";

}

//idが「show」のタグを取得してきて、そのタグの中身に変数messageの内容を表示

document.getElementById("show").innerHTML = message;

</script>

</body>

(JavaScript)if文

JavaScript

コメントをどうぞ

Tweet Pocket

<!DOCTYPE html>
<html>
<head>
	<title>if文による条件分岐</title>
</head>
<body>
	<button onclick = "condition()">押す</button>	

	<!-- 「show」というidをもつpタグを作成。ここにjavasciptの関数の結果を表示させる -->
	<p id="show"></p>

	<!--ここからJavaScriptです。-->	
	<script>
	//Javascriptの関数
	function condition(){
		var time = new Date().getHours();//現在の時刻の時間を取得して変数timeに格納
		alert(time)//現在時間をアラートで表示
		var message;//メッセージを格納する変数を準備
		//if文による条件分岐。時間が12時前の時は「おはようございます。」12時以降は「こんにちは」と変数messegeに格納
		if (time < 12){
			message = "おはようございます。";
		}else{
			message = "こんにちは";
		}
		//idが「show」のタグを取得してきて、そのタグの中身に変数messageの内容を表示
		document.getElementById("show").innerHTML = message;
	}
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>if文による条件分岐</title>

</head>

<body>

//Javascriptの関数

function condition(){

var time = new Date().getHours();//現在の時刻の時間を取得して変数timeに格納

alert(time)//現在時間をアラートで表示

var message;//メッセージを格納する変数を準備

//if文による条件分岐。時間が12時前の時は「おはようございます。」12時以降は「こんにちは」と変数messegeに格納

if (time < 12){

message = "おはようございます。";

}else{

message = "こんにちは";

}

//idが「show」のタグを取得してきて、そのタグの中身に変数messageの内容を表示

document.getElementById("show").innerHTML = message;

}

</script>

</body>

</html>

(JavaScript)文字列、配列、日時の操作

JavaScript

コメントをどうぞ

Tweet Pocket

<!DOCTYPE html>
<html>
<head>
	<title>文字列</title>
</head>
<body>
	<h2>文字列、配列、日時の操作</h2>

	<p id="text"></p>
	<p id="show"></p>

	<p>(2)最初に「お」が出現する位置は以下の通りです。</p>
	<p id="position"></p>

	<p>(3)5番目から８番目までの部分文字列を取り出す。</p>
	<p id="substring"></p>

	<p>(4)配列の要素を連結する。</p>
	<p id="connect"></p>

	<p>(5)今日の日時は以下の通りです。</p>
	<p id="showdate"></p>	


	<script>
		var txt = "こんにちはおはようございます";
		document.getElementById("text").innerHTML = "(1)「" + txt + "」の文字列の長さは以下の通りです。";	
		document.getElementById("show").innerHTML = txt.length;	
			
		var p = txt.indexOf("お")
		document.getElementById("position").innerHTML = p;

		var sub = txt.substring(5,9);
		document.getElementById("substring").innerHTML = sub; 	

		var cars = ["トヨタ","日産","マツダ","BMW"];
		document.getElementById("connect").innerHTML = cars.join("と"); 

		var d = new Date();
		document.getElementById("showdate").innerHTML = d; 	
	</script>	

</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>文字列、配列、日時の操作</h2>

<p>(2)最初に「お」が出現する位置は以下の通りです。</p>

<p>(3)5番目から８番目までの部分文字列を取り出す。</p>

<p>(4)配列の要素を連結する。</p>

<p>(5)今日の日時は以下の通りです。</p>

var txt = "こんにちはおはようございます";

document.getElementById("text").innerHTML = "(1)「" + txt + "」の文字列の長さは以下の通りです。";

document.getElementById("show").innerHTML = txt.length;

var p = txt.indexOf("お")

document.getElementById("position").innerHTML = p;

var sub = txt.substring(5,9);

document.getElementById("substring").innerHTML = sub;

var cars = ["トヨタ","日産","マツダ","BMW"];

document.getElementById("connect").innerHTML = cars.join("と");

var d = new Date();

document.getElementById("showdate").innerHTML = d;

</script>

</body>

</html>

(JavaScript)関数を用いて、イベント操作で日時を表示させるプログラム

JavaScript

コメントをどうぞ

Tweet PocketJavaScriptで、関数を用いてボタンを押すと日時を表示するプログラム … Continue reading →

(JavaScript)イベント操作。ボタンを押すと日時を表示するプログラム

JavaScript

コメントをどうぞ

Tweet PocketJavaScriptで、ボタンを押すと日時を表示するプログラム [crayo … Continue reading →

(JavaScript)でテキストボックスを作りさらに関数を呼び出す。

JavaScript

コメントを受け付けていません。

Tweet Pocket

<!DOCTYPE html>
<html lang="ja">
<head>
	<title>テキスト入力</title>

	<!--スタイルシートで<h1>タグに色をつける-->
	<style type="text/css">
		h1{background-color: #99cc33}
	</style>

	<!--JavaScriptの記述-->
	<script type="text/javascript">
		//購入ボタンを押すと呼び出されるdisplay関数を定義する。
		function display()
		{
			//フォーム(info)のテキストボックス(product)の内容を取得
			var pd = info.product.value;
			//アラート画面に表示
			window.alert(pd + "をお買い上げです。");
		}	
	</script>
</head>
<body>
	<h1>商品</h1>
	<!--フォームの作成-->
	<form name="info">

	<!--テキストボックスの作成-->
	<input type="text" name="product">
	
	<!--購入ボタンの作成。ボタンを押すとdisplay関数が呼び出されてアラート画面がでる。-->
	<input type="button" value="購入" onclick="display()">
	</form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>テキスト入力</title>

h1{background-color: #99cc33}

</style>

//購入ボタンを押すと呼び出されるdisplay関数を定義する。

function display()

{

//フォーム(info)のテキストボックス(product)の内容を取得

var pd = info.product.value;

//アラート画面に表示

window.alert(pd + "をお買い上げです。");

}

</script>

</head>

<body>

</form>

</body>

</html>

(JavaScript)ドロップダウンメニューを作り関数を呼び出す。

JavaScript

コメントを受け付けていません。

Tweet Pocket

<!DOCTYPE html>
<html lang="ja">
<head>
	<title>ドロップダウンメニュー入力</title>

	<!--スタイルシートで<h1>タグに色をつける-->
	<style type="text/css">
		h1{background-color: #99cc33}
	</style>

	<!--JavaScriptの記述-->
	<script type="text/javascript">
		//購入ボタンを押すと呼び出されるdisplay関数を定義する。
		function display()
		{
			//フォーム(info)のドロップダウンメニュー(product)の内容を取得
			var pd = info.product.value;
			//アラート画面に表示
			window.alert(pd + "をお買い上げです。");
		}	
	</script>
</head>
<body>
	<h1>商品</h1>
	<!--フォームの作成-->
	<form name="info">

	<!--ドロップダウンメニューの作成-->
	<select name="product">
		<option value="テレビ">テレビ</option>
		<option value="洗濯機">洗濯機</option>
		<option value="アイロン">アイロン</option>
	</select>
	
	<!--購入ボタンの作成。ボタンを押すとdisplay関数が呼び出されてアラート画面がでる。-->
	<input type="button" value="購入" onclick="display()">
	</form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>ドロップダウンメニュー入力</title>

h1{background-color: #99cc33}

</style>

//購入ボタンを押すと呼び出されるdisplay関数を定義する。

function display()

{

//フォーム(info)のドロップダウンメニュー(product)の内容を取得

var pd = info.product.value;

//アラート画面に表示

window.alert(pd + "をお買い上げです。");

}

</script>

</head>

<body>

</select>

</form>

</body>

</html>

JavaScriptでウェブ履歴の前後を参照するボタンを設置するプログラム

JavaScript

コメントを受け付けていません。

Tweet Pocket

<!DOCTYPE html>
<html lang="ja">
<head>
	<title>履歴の前後を参照</title>

	<!--スタイルシートで<h1>タグに色をつける-->
	<style type="text/css">
		h1{background-color: #99CC33}
	</style>

	<!--JavaScriptの記述-->
	<script type="text/javascript">
		function hp(){
			//グーグル（http://google.co.jp）に移動する
			location.href="http://google.co.jp"
		}

		function forward(){
			//ウェブ閲覧の履歴を一つ進む
			history.forward();
		}

		function backward(){
			//ウェブ閲覧の履歴を一つ戻る
			history.back();
		}
	</script>

</head>
<body>
	<!--<h1>タグをクリックしたときに、グーグルのページに移動する-->
	<h1 onclick="hp()">グーグルに移動します。</h1>

	<!--戻るボタンをクリックしたときに、履歴を一つもどる-->	
	<input type="button" value="戻る" onclick="backward()">

	<!--進むボタンをクリックしたときに、履歴を一つ進む-->	
	<input type="button" value="進む" onclick="forward()">
</body>
</html>

<!DOCTYPE html>

<head>

<title>履歴の前後を参照</title>

h1{background-color: #99CC33}

</style>

function hp(){

//グーグル（http://google.co.jp）に移動する

location.href="http://google.co.jp"

}

function forward(){

//ウェブ閲覧の履歴を一つ進む

history.forward();

}

function backward(){

//ウェブ閲覧の履歴を一つ戻る

history.back();

}

</script>

</head>

<body>

<h1 onclick="hp()">グーグルに移動します。</h1>

</body>

</html>

カテゴリアーカイブ: JavaScript

(Javascript) for文

(JavaScript)while文

(JavaScript)switch文

(JavaScript)if文

(JavaScript)文字列、配列、日時の操作

(JavaScript)関数を用いて、イベント操作で日時を表示させるプログラム

(JavaScript)イベント操作。ボタンを押すと日時を表示するプログラム

(JavaScript)でテキストボックスを作りさらに関数を呼び出す。

(JavaScript)ドロップダウンメニューを作り関数を呼び出す。

JavaScriptでウェブ履歴の前後を参照するボタンを設置するプログラム

言語

お勧め

リンク

カテゴリー

メタ情報