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

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

JavaScript

<!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

コメントをどうぞ

JavaScriptで、関数を用いてボタンを押すと日時を表示するプログラム [crayon-5ecf … Continue reading →

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

JavaScript

コメントをどうぞ

JavaScriptで、ボタンを押すと日時を表示するプログラム [crayon-5ecfc5e513 … Continue reading →

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

JavaScript

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

<!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

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

<!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

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

<!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

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

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

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

	<!--JavaScriptの記述-->
	<script type="text/javascript">
		function create(){
			//<h2>タグをhtml出力します。
			document.writeln("<h2>h2タグが生成されました。</h2>")
		}		
	</script>

</head>
<body>
	<h1>タグの生成</h1>
	<script>
		//<h2>タグを生成するcreate()関数をよびだす。
		create();
	</script>
</body>
</html>

<!DOCTYPE html>

<head>

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

h1{background-color: #99CC33}

</style>

function create(){

//<h2>タグをhtml出力します。

document.writeln("<h2>h2タグが生成されました。</h2>")

}

</script>

</head>

<body>

<h1>タグの生成</h1>

//<h2>タグを生成するcreate()関数をよびだす。

create();

</script>

</body>

</html>

JavaScriptでなんちゃって天気予報をするプログラム（ボタンで関数よびだし。）

JavaScript

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

H1タグをクリックすると、なんちゃって天気予報がウィンドウアラート上に表示されるプログラムです。 f … Continue reading →

JavaScriptで見出しをクリックするとあたらしいページが出現するプログラム

JavaScript

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

見出しなどのタグをクリックすると、新しいページがポップアップで出現するプログラムの例です。 newp … Continue reading →

Javascriptで画面をクリックするとアラート画面がでる方法

JavaScript

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

Javascriptで、見出しタグをクリックすると、アラート画面がポップアップするプログラムです。 … Continue reading →

カテゴリアーカイブ: JavaScript

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

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

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

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

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

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

JavaScriptで見出しタグを関数から呼び出して生成するプログラム

JavaScriptでなんちゃって天気予報をするプログラム（ボタンで関数よびだし。）

JavaScriptで見出しをクリックするとあたらしいページが出現するプログラム

Javascriptで画面をクリックするとアラート画面がでる方法

言語

お勧め

リンク

カテゴリー

メタ情報