jsを使う場面について

Question

javascript(js)を学び始めています。
if文などを勉強しているのですが、これを学んだところで実際にどういう場面で
使うかがイマイチ分かっておりません。
（例えば下記のような代入など）

実案件でjsをたくさん使っているかたにご回答頂きたいのですが
どんな場面で下記のようなコードを使っていますか？

###該当のソースコード

var str1 = "Java";
var str2 = "Script";


// 変数newStrを宣言し、変数str1と変数str2を連結したものを代入してください
var newStr = (str1 + str2);

// 変数newStrをコンソールに表示してください
console.log(newStr);

// 変数newStrと文字列を連結し、「JavaScriptの世界へようこそ」とコンソールに表示してください

console.log(newStr + "の世界へようこそ"); 

よろしくお願いいたします。

Answer 1

+演算子は入力された文字列とその他の表示したい文字列を連結するときに使うことが多いです。

str = prompt("名前を入力してください", "");
alert("あなたの名前は" + str + "です。");

Comments

[takamiii_158cm]

回答ありがとうございます。入力フォーム系ですね！

Answer 2

文字列連結は、「表示するメッセージを組み立てる」「規則正しく名前を振る」「URLやセレクタなど、何かの指示に使う文字列を組み立てる」など、およそどんなコードでも出現するような基本操作です。

console.logはデバッグ用なので、最終型のコードに使うことはあまりないですが、作成途中にはよくお世話になると思います。

Comments

[takamiii_158cm]

回答ありがとうございます。
console.logはデバッグ用なので、、、というところに驚いております。。デバッグ用なのですね＾＾

[maisumakun]

ふつうの人はコンソールを開きませんので（http://qiita.com/amoO_O/items/c63f7227730f3c15bb2f にあるように、FacebookやGoogle+のサイトでは、開くと警告文が出るようになっています）。

Answer 3

例えば、会員制サイトでログインさせるとき、必須入力や入力文字のチェック等をJavaScriptで行う事により、一々ページを移動せずに済ませる(ネットワークアクセスをなくす)事など出来ます。

<form>
<input type="text" name="mail" placeholder="例) example.com" id="mail">
<input type="submit" onClick="return check()">
</form>
<script type="text/javascript">
    function check() {
        var mailElm = document.getElementById('mail');
        if(mailElm.value.length < 1) {
            alert(mailElm.name+' は必ず入力して下さい');
        }
    }
</script>

Comments

[takamiii_158cm]

回答ありがとうございます・とてつもなく分かりやすいです。
inputで色々とIDを振るのはこのためだったのですね。

Answer 4

console.logは中身の確認のため使ってます。確認したらconsole.logの部分を他の式に変えるだけでいいので、安心して先に進めます。

Answer 5

Javascript は、HTMLとCSSだけでは表現できない「動きのあるサイト」を作ることができ、また、ユーザのストレスやサーバへの負荷を軽減することもできる技術です。

例えば、
・ボタンを押したら入力欄にフォーカスを移動させる
・入力フォームの「未入力」や「誤り」をサーバに処理させる前にチェックする
・メッセージや簡単な計算結果をサーバを介さずに出力する
・画面全体を更新することなく部分的な更新によって即時に情報を提供する
といったことが可能になります。

本質的な価値と用途を理解していれば、具体的に今勉強している if, for/while などの制御文や文字列連結などは必要に迫られて使うことになると思います。

（例）入力フォームの「未入力」や「誤り」をチェックしてユーザに知らせたい！

１．未入力であるかどうかを判定し（if文による判定）
２．メッセージを組み立てて（文字列の連結）
３．メッセージを通知する（HTML要素への代入やalert()による出力）

といった処理をプログラミングすることになるでしょう。

Answer 6

代入
代入
文字列の連結を代入
変数を引数にメソッド呼び出し
文字列の連結を引数にメソッド呼び出し

全部どこでも使いますが。