HTML5+JavaScript



エディタ

  • 単純なテキストエディタならmiが使いやすい。
→タブで複数テキストを保持出来て、HTML・JavaScriptが打ちやすい。
→Windows版ではCSSモードが存在しない為、標準モード(通常のテキスト)で記述する。
  • もしくはEclipseにプラグインでJSDTを導入する。



HTML5概説

  • HTMLとはウェブ上の文書を記述するためのマークアップ言語である。
  • HTMLでマークアップされたドキュメントは他のドキュメントへのハイパーリンクを設定できる(名に付くように)ハイパーテキストであり、画像・リスト・表などの高度な表現力を持つ。
  • HTML5とは第5回目となる大幅な改訂版となる。
  • なお、現在も策定中であり、完全版ではない。

ルールが確定していない機能は取り入れないInternetExplorerでもIE9に大部分を取り入れている。

HTML5




JavaScript概説

オブジェクト指向のスクリプト言語。
  • 主にウェブブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられる。


テキストボックスとボタンをJavaScriptで提供する


  • HTMLファイル内の記述
+ ...
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.  
  5. <meta charset="SHIFT-JIS"/>
  6. <title>お名前をどうぞ!</title>
  7.  
  8. </head>
  9.  
  10. <body>
  11.  
  12. <form name="js">
  13. 苗字:<input type="text" name="Num1" value=""><br>
  14. 名前:<input type="text" name="Num2" value=""><br>
  15.  
  16. <input type="button" value="表示" onclick="tboxPlus()"><br>
  17. <input type="button" value="消去" onclick="clr()"><br>
  18. </form>
  19.  
  20. <script>
  21.  
  22. // テキストボックスの文字を取得する
  23. function tboxPlus()
  24. {
  25. var str1 = document.js.Num1.value + document.js.Num2.value;
  26. alert(str1);
  27. }
  28.  
  29.  
  30. // テキストボックスの文字を操作する
  31. function clr()
  32. {
  33. document.js.Num1.value="";
  34. document.js.Num2.value="";
  35. }
  36.  
  37. </script>
  38.  
  39.  
  40. </body>
  41. </html>

  • JavaScript部分を表示
+ ...
苗字:
名前:


最終更新:2013年07月04日 14:13