値に名前をつけて使う「変数」とは

2015年10月29日

値に名前をつけて使う「変数」とは

変数って？？

javaScriptだけではないのですが、プログラミング言語で重要なものがあります。値を一時的に格納しておく変数というものです。変数は。値を入れる箱のようなものだと思ってください。

それぞれの箱には変数名という名前でアクセスします。変数に入れた値いは自由に取り出して使うことができます。変数の箱に値を入れることを、変数に値を代入するといったり変数に値をいれるといいます。

変数というのは文字の通り、変わる数値のことです。箱の中の値を必要に応じて後から変更できます。たとえば「year」という変数の値を１を加えて、その結果を再び変数「year」にいれると行ったことができます。

サンプルコードを実行してい見ると分かるかと思います。
実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>variableStr</title>
</head>
<body>
    
<script>
var name = "山田";
    
name = name +"太郎";
    
document.write("私は" + name + "です。");
    

</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>variableStr</title>

</head>

<body>

var name = "山田";

name = name +"太郎";

document.write("私は" + name + "です。");

</script>

</body>

</html>

-javaScript
-変数

comment コメントをキャンセル

: javaScript

処理をまとめて、その名前を書くと呼び出せるようにする

ユーザー定義関数関数とは、何かしらの粗利を１つにまとめて、後から関数名という名前で呼び出せるようにしたものです。以前の記事で触れました。文字列を数値に変換する「Number」など、javaScrip ...

javaScript

サーバーとデータのやりとりをする

Ajaxで重要なものは、XmlHttpRequestオブジェクトを利用した非同期通信です。サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ajaxを使ってサーバーとやりとりを行う</title>
   
</head>
<body>
    <form name="testForm"><p>
        <input type="button" value="load" 
               onclick="getFile('data/test.txt');">
    </p></form>
    <div id="testResult">
    </div>
<script>

    var req;

function getFile(path){
    /*
    new演算子とコンストラクタでXMLHttpRequestオブジェクトを
    生成します。非同期通信では、リクエストを送ってからデータ取得が
    完了するまでの間、別の処理を行うことが可能です。
    そのため、いつデータを取得したかを知らなければいけません。
    そのために使用されるのがコールバック関数です。
    */
    req = new XMLHttpRequest();
    
    /*
    コールバック関数は、onreadystatechangeプロパティで
    設定します。
    */
    req.onreadystatechange = showData;

    /*
    openメソッドは、サーバーに送るHTTPリクエストの内容を指定
    第1引数：HTTPプロトコルのコマンド
        「GET」はデータを取得するためのコマンドです。
    第2引数：データファイルのパス
    第3引数：非同期・同期の指定
         true:非同期通信
        false:　同期通信
    */
    req.open("GET",path,true);
    
    /*
    sendメソッドが実行されたときに、サーバーに
    HTTPリクエストが送信される。
    GETコマンドの場合は、引数に何もないことを示す「null」を指定
    */
    //HTTPリクエストを送信
    req.send(null);
}
function showData(){
    
    /*
    下記のif文でデータの取得が完了したかを判定します。
    readtState：通信状態を表すプロパティ
        status：サーバー側がリクエストに対して返す
        　　　　　ステータスコードと呼ばれる値を表すプロパティ
             　　詳細は記事をご覧ください。
    */
    if( req.readyState == 4 &&
        req.status == 200 ){
        
        /*
        サーバーから取得したテキストが格納されている
        プロパティです。その値を要素div「testResult」の
        innerHTMLプロパティに代入し、HTMLと解釈して
        表示します。
        */
        document.getElementById("testResult")
            .innerHTML = req.responseText;
    }
}

</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Ajaxを使ってサーバーとやりとりを行う</title>

</head>

<body>

<input type="button" value="load"

onclick="getFile('data/test.txt');">

</p></form>

</div>

var req;

function getFile(path){

new演算子とコンストラクタでXMLHttpRequestオブジェクトを

生成します。非同期通信では、リクエストを送ってからデータ取得が

完了するまでの間、別の処理を行うことが可能です。

そのため、いつデータを取得したかを知らなければいけません。

そのために使用されるのがコールバック関数です。

req = new XMLHttpRequest();

コールバック関数は、onreadystatechangeプロパティで

設定します。

req.onreadystatechange = showData;

openメソッドは、サーバーに送るHTTPリクエストの内容を指定

第1引数：HTTPプロトコルのコマンド

「GET」はデータを取得するためのコマンドです。

第2引数：データファイルのパス

第3引数：非同期・同期の指定

true:非同期通信

false:　同期通信

req.open("GET",path,true);

sendメソッドが実行されたときに、サーバーに

HTTPリクエストが送信される。

GETコマンドの場合は、引数に何もないことを示す「null」を指定

//HTTPリクエストを送信

req.send(null);

}

function showData(){

下記のif文でデータの取得が完了したかを判定します。

readtState：通信状態を表すプロパティ

status：サーバー側がリクエストに対して返す

　　　　　ステータスコードと呼ばれる値を表すプロパティ

　　詳細は記事をご覧ください。

if( req.readyState == 4 &&

req.status == 200 ){

サーバーから取得したテキストが格納されている

プロパティです。その値を要素div「testResult」の

innerHTMLプロパティに代入し、HTMLと解釈して

表示します。

document.getElementById("testResult")

.innerHTML = req.responseText;

}

</script>

</body>

</html>

HTTPリ ...

javaScript

ダイアログボックスを表示する。

今回はjavaScriptについて書いてきます。まずはサンプルコード

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>dialogbox</title>

</head>
<body>
    
<script>
    /*
        このsctiptタグ内に実際の処理を
        書いていきます。
    */
    alert("ここにjavaScriptｗの処理を書きます！！！");
    
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>dialogbox</title>

</head>

<body>

このsctiptタグ内に実際の処理を

書いていきます。

alert("ここにjavaScriptｗの処理を書きます！！！");

</script>

</body>

</html>

実行結果はこちら実行して頂ければ分かりますが、ダイアログボッ ...

javaScript

曜日を日本語で表示してみる

前回にて配列について触れました。今回は、配列を活用した例として、曜日を日本語で表示していきます。まずは準備を・・・

　var days = new Array("日","月","火","水","木","金","土");

1	var days = new Array("日","月","火","水","木","金","土");

他に利用するオブジ ...

: javaScript

変数の有効範囲を知る

変数のスコープとは個々の変数には、その変数が使える範囲が定まっています。そのことを、変数のスコープと言います。例えば、関数内で宣言した変数のスコープは、その関数の内部だけです。ということは、その変 ...

WebブラウザにHTMLを出力する

画像にマウスを乗せるとポンと出るjQuery