感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

【プログラミング155時間目】JavaScriptの変数のまとめ。文字数の取得サンプル

スポンサーリンク

JavaScriptの変数
JavaScriptの変数はvarを使ってきちんと宣言するべき。
なぜかというと、varの有る無しでスコープに影響するから。
なお、変数を宣言するルールとして、変数はなるべき早く、それを必要とするスコープの中で宣言するようにする。

var無しの宣言はグローバルなスコープを持つ。

グローバルな変数を避けるべき理由は以下の通りである。
①アプリケーションは必要とされる最低限のことだけ行うべきだから。つまり、確固たる必要性がない場合はグローバルにすべきではない。

グローバル変数はたえずその存在を管理しなければならないから

③別のグローバル変数と競合する可能性があるから。


JavaScriptなどのオブジェクト指向言語では、変数の宣言はキャメルケースと呼ばれる書き方が慣習的に使用される。キャメルケースとは、らくだのこぶのように、名前に使用する単語の最初を大文字にする方法である。

手続き型プログラミング言語では単語の区切りにアンダースコアが利用されることが多い。

■数値
JavaScriptには数値の型は1つしか無い。そして、JavaScriptの数はNumber型のオブジェクトである。

■エスケープシーケンス

・\n 改行(ニューライン)
・\r  復帰(キャリッジリターン)

キャリッジリターンとは、行末から先頭に戻すこと

■JavaScritを使って、テキストエリアに入力した文字数を数えるサンプル

<html lang="ja">
<head>
	<meta charset="Shift_JIS">
	<title> ツイッターの文字数を入力するテスト</title>
	<!--
	<link rel="stylesheet" href="css/styles.css">
	-->
<head>
<body>
	<form action="" method="post" id="theForm">
		<fieldset>
			<p>入力文字は140字以内にしてください。</p>
			<div>
				<label for="tweet">つぶやきを入力</label>
				<textarea name="tweet" id="tweet" maxlength="140" required></textarea>
			</div>
			<div>
				<label for="count">文字数</label><input type="number" name="count" id="count">
			</div>
			<div>
				<label for="result">結果</label>
				<textarea name="result" id="result"></textarea>
			</div>
			<div>
				<input type="submit" value="Submit" id="submit"></div>
		</fieldset>
	</form>
	<script src="js/text.js"></script>
</body>
</html>

・文字数を数えるJavaScriptのサンプル

function limitText() {
	'use strict';
	
	var limitedText;
	//idがtweetの内容をオリジナルのテキストとして保存する
	var originalText = document.getElementById("tweet").value;
	
	//lastIndexOfはストリングを後ろから前に向かって検索する。
	//140から前の方に遡って最初のスペースがあるインデックスを取得する
	var lastSpace = originalText.lastIndexOf(' ',140);
	
	//テキストの区切りまでの文字列を取得
	limitedText = originalText.slice(0, lastSpace);
	
	//オリジナルのテキストの文字数を取得し、id = countのところに表示する
	document.getElementById('count').value = originalText.length;
	
	document.getElementById('result').value = limitedText;
	
	return false;
}
	
function init() {
	document.getElementById('theForm').onsubmit = limitText;
}
window.onload = init;

【参考】

入門 モダンJavaScript

入門 モダンJavaScript