Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="description" content="JavaScript れんしゅう">
<meta charset="UTF-8">
<title>JavaScriptのれんしゅう</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body style="font-size:2em">
​
  <h1>
   Hello World !
  </h1>
​
  <div> にゅうりょく１<input type="text" id="input1" /> </div>
  <div> にゅうりょく２<input type="text" id="input2" /> </div>
​
  <button onclick="calculate();">けいさん</button>
​
  <div id="result">
    <div>けっか</div>
  </div>
<script>
// ここから JavaScript （ジャバ スクリプト）のプログラムが、はじまるよ
// 「//」はコメント。にんげんのための文で、じつはプログラムではないんだ。
// コンピュータは、ムシするから、何をかいても良いんだよ
//
// ★れんしゅう１★
// 上にかいてある Hello World ! を、じぶんの、すきな文字にかえて。
// どうなるか、ためしてみよう。
//
// ★れんしゅう２★
// 「けいさん」ボタンを押すと何がでるかな。ためしてみよう。
// alert() は、がめんに、もじをポップアップで表示する、かんすうだよ。
// そのあと、じゃまだから、「//」をあたまにつけて、コメントアウトしよう
 
 // function は、「かんすう」のはじまり。
 //「けいさん」ボタンを押すと <button onclick="calculate();"> がうごいて、
 // よびだされるよ。
 function calculate () {
  // alertは、じゃまだから、あたまに　// を付けてね。
  alert("うわっ！ビックリした。");
  var text1 = $( "#input1" ).val(); //text1 に「にゅうりょく1」をいれる
  var text2 = $( "#input2" ).val(); //text2 に「にゅうりょく2」をいれる
  var result = text1 + text2; // resultに、text1 と text2 をたして、いれる
​
// ★れんしゅう３★
// 「にゅうりょく１」と「にゅうりょく２」に、すきな文字や数字を入れて、
//「けいさん」ボタンを押そう。
// Apple と Pen をいれると、どうなるかな？
// 1 と 1 をいれると、どうなるかな？
//
// ★れんしゅう４★
// たしざんをするには、「Number()」を使って、文字を、数に変えるんだ。
// つぎの行のコメント（// result のあたまの「//」だけ）を消して、
// もういちどためしてみよう。
//   result = Number( text1 ) + Number( text2 );
//  
// ★れんしゅう５★
// うえの「+」を、べつの計算にして、どうなるか、ためしてみよう。
  // たしざんは、+
  // ひきざんは、-
  // かけざんは、*
  // わりざんは、/
  // () もつかえるよ
  
// ★れんしゅう６★
  // このあと、if ( result > 10 ) で、けっかが、10より大きかったら、
  // 文字の色をかえてるよ。
  // 「にゅうりょく」に、大きな数をいれて、ためしてみよう。
   
// ★れんしゅう６★
  // このあと style='color:red' で、色をかえているよ。
  // 好きな色に、かえてみよう。
  // 赤は red 。青は blue。ピンクは pink。きいろ yellow。みどり green。
  var result_text = "";
  if ( result > 10 ) { // もし10よりおおきかったら
    result_text = "<b style='color:blue'>" + result +"</b>";
  } else {           // そうじゃなかったら
    result_text = "<b>" + result + "</b>";
  }
​
 // ★れんしゅう７★
  // けっかが、500より大きかったとき、色がかわるようにしてみよう。
  // ( result > 10) のところを、( result > 500)にすれば良いよ。
  // プログラムをじゆうにかえて、ためしてみよう。
   
  // けっかを、ひょうじするところ
   var html = "<div> " + text1 + "　と　" + text2
    + "　で・・・うん！　" + result_text + "　</div>";
  $( "#result" ).append( html );  
 }
 
// ここでJavaScriptは、おわり
</script>
</body>
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
koichiipro
0viewers