15、javascriptスクリプト言語

JavaScriptはNetscape社が開発したクライアントブラウザ、オブジェクト向け、イベント駆動のWebスクリプト言語です.
JavaScriptの特徴:イベント駆動式のスクリプトプログラム設計思想、動的インタラクティブな操作
Javascriptの役割:インタラクティブ操作、フォーム検証、Web特効、Webゲーム、サーバスクリプト開発など
Javaは強いタイプの変数検査を採用し、変数が使用される前に宣言しなければならない.JavaScriptは弱いタイプで、変数を使用する前に宣言する必要はありません
Javaは静的コンパイルを採用している.すなわち、Javaのオブジェクトリファレンスはコンパイル時に行わなければならない.コンパイラが強いタイプのチェックを実現でき、コンパイルしなければオブジェクトリファレンスのチェックを実現できない.JavaScriptは、実行時にJavaScriptのオブジェクトリファレンスがチェックされる動的アセンブリを使用します.
JavaScriptのフォーマット:JavaScriptは大文字と小文字を区別します;JavaScriptスクリプトプログラムはHTMLファイルに埋め込まなければならない.行ごとにスクリプト文が1つずつ表示されます.文の末尾にセミコロンを付けることができます.JAvaScriptスクリプトプログラムは、独立して外部ファイルとして保存できますが、ラベルは含まれません.
JavaScriptのライブラリ:jQuery、dojo、extJs
JavaScriptスクリプトの基本形式:
    -           document.write("hello");        
    -           document.write("hello");        
    -         document.write("hello");            -     注意:document.write(「hello」);外部ファイルとして保存する必要があります:hello.js
変数宣言:var変数名はvarを省略することもできます.関数で変数を定義し、varを使用していない場合、この変数はグローバル変数です.そうしないと、varを使用している場合はローカル変数で、関数外で定義されている変数は必ずグローバル変数です.
変数の役割ドメイン:
with文:
for...in文:
オブジェクトおぶじぇくと:既定のオブジェクトきていのおぶじぇくと
    - 日付オブジェクト:Date
    - 配列オブジェクト:new Array()
        var fruit=new Array(「りんご」,「アヒルの梨」,「りんご」);          var fruit=[「りんご」「アヒルの梨」「りんご」];        var fruit = new Array(3);    fruit.push(「りんご」);
       配列オブジェクトのメソッド:join([区切り記号]):配列要素を文字列に結合                                       toString():配列を文字列で表す                                       reverse() : shuzufanzhuan                                        valueOf():配列値を返します
    - 文字列オブジェクト:変数=new String()                               変数=文字列
      メソッド:charAt(インデックス):インデックスの位置を返す文字列                  indexOf(「文字列」[,インデックス]):オブジェクト内の文字列のインデックス位置を返します.                  LastIndexOf(「文字列」[,インデックス]):オブジェクト内の文字列のインデックス位置を返す(逆検索)                  replace("文字列1","文字列2"):文字列2置換文字列1                  search(「文字列」):オブジェクト内の文字列のインデックス位置を返します.                  substring(インデックス|i[,インデックスj])は、インデックスjからインデックスj-1のサブ列を返す
カスタムオブジェクトかすたむおぶじぇくと:コンストラクタ定義オブジェクトタイプコンストラクタていぎおぶじぇくとたいぷ      ;          オブジェクトインスタンスの作成
動的定義オブジェクト属性どうてきていぎおぶじぇくとぞくせい:コンストラクション関数定義コンストラクションかんすうていぎ
イベントハンドラ:ブラウザがイベントに応答し、ユーザーのインタラクティブな操作を実現する処理(プロセス);イベントハンドラの呼び出し:ブラウザはユーザーのインタラクティブな操作を待っており、イベントが発生したときに自動的にイベントハンドラ(関数)を呼び出し、イベントハンドラを完了します.
タイマー:特定のイベントの後にプログラムを実行するように指定します.setTimeout(): 書式:   [タイマオブジェクト名=]settimeout(<式>,ミリ秒)    機能:<式>を1回実行します.               setInterval()  :書式設定  :  [タイマオブジェクト名=]setInterval(<式>,ミリ秒)    機能:ウィンドウ、フレームが閉じるかclearIntervalが実行されるまで<式>を繰り返します.                clearInterval()clearInterval()clearInterval()clearInterval()clearInterval()clearInterval()clearInterval()clearInterval    書式:clearInterval(タイマオブジェクト名)
JavaScript組み込みオブジェクト:
    - 画像オブジェクト    - オブジェクトのナビゲーション    - ウィンドウオブジェクト    - スクリーンオブジェクト    - イベントオブジェクト    - 履歴オブジェクト    - ファイルオブジェクト    - アンカーオブジェクト    - オブジェクトの接続    - フレームオブジェクト    - フォーム・オブジェクト    - 位置オブジェクト
alert()ウィンドウはモードです.つまり、処理しなければなりません.そうしないと、入力を続行できません.
スクリーンオブジェクト:screen
≪イベント・オブジェクト|Event Objects|emdw≫:jsでオブジェクト(コントロール)にイベントをバインドするには、通常2つの手段を使用します.       1)        2)
               
                var v = document.getElementById("button1");
                 v.onclick = clickHandler;
                
イベントが発生すると、ブラウザは自動的にオブジェクトを作成し、イベントのタイプ、マウス座標などを含む
履歴オブジェクト:history
ロケーションオブジェクト:特定のウィンドウを表すURL情報  location
接続オブジェクト:Webページのリンクは、自動的にリンクオブジェクトとみなされ、document.links[0]、document.links[1]....リンク・オブジェクトのフォーマットの定義:文字列.link(プロパティ)
Cookieオブジェクト:クライアントハードディスクのCookiesフォルダにファイル(Cookieファイル)として保存されるユーザデータ情報(Cookieデータ)である.Cookieファイルは、クライアントとウェブサイトとの間のセッションデータを長く保存するためにアクセスされたWebサイトによって確立され、このCookieデータは、アクセスされたウェブサイトのみが読み取ることを可能にする.          Cookieファイルのフォーマット:NS:Cookie.txt           IE:ユーザ名@ドメイン名.txt
クッキーの書き込み:   書式:  document.cookie=「キーワード=値[;expires=有効日];...」
2種類のcookie:1)持続性cookieがあり、クライアントのハードディスクに格納されます.   2)セッションクッキー:クライアントのハードディスクに格納されず、ブラウザプロセスのメモリに格納され、ブラウザが閉じるとセッションクッキーが破棄されます.
例:javascriptでページ要素の表示を制御するかどうか:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'begin.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">
	function validate()
	{
		var num = document.getElementsByName("number")[0];
		if(num.value.length < 1)
		{
			alert("    ");
			num.focus();
			return false;
		}

		for(var i = 0; i < num.value.length; i++)
		{
			var param = "0123456789";
			if(param.indexOf(num.value.charAt(i)) == -1)
			{
				alert("       ");
				num.focus();
				return false;
			}
		}
		if(parseInt(num.value) < 5 || parseInt(num.value) > 15)
		{
			num.value = 10;
			
		}
		return true;
	}
	
	</script>
  </head>
  
  <body>
  
    <form action="js/end.jsp" name="form1" method="post" onsubmit="return validate();">
         （5——15）:<input type="text" name="number"><br/>
    <input type="submit" value="submit">
    
    </form>
  </body>
</html>



<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'end.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">
	function checkAll()
	{
		var s = document.getElementsByName("check");
		var m = document.getElementsByName("all")[0];
		if(m.checked)
		{
			for(var i = 0; i < s.length; i++)
			{
				s[i].checked = true;
			}
		}
		else
		{
			for(var i = 0; i < s.length; i++)
			{
				s[i].checked = false;
			}
		}
	}

	function turn()
	{
		with(document)
		{
			var m = getElementById("change");
			var n = getElementById("table");

			if(m.value =="  ")
			{
				n.style.display = "none";
				m.value = "  ";
			}
			else
			{
				n.style.display = "block";
				m.value = "  ";
			}
		}
	}
	</script>
  </head>
  
  <body>
  <table border="1" align="center" width="60%">
  	<tr>
  		<td>
  			<input type="checkbox" name="all" onclick="checkAll();" >  
  		</td>
  		<td>
  			<input type="button" value="  " id="change" onclick="turn();">
  		</td>
  	</tr>
  </table>
  
    <% int number = Integer.parseInt(request.getParameter("number")); %>
    <table border="1" align="center" width="60%" id="table">
    <% for(int i = 1; i<=number;i++)
    	{%>
    <tr>
    	<td>
    		<input type="checkbox" name="check">
    	</td>
    	<td>
    		<%= i %>
    	</td>
    </tr>
    <% } %>
    </table>
  </body>
</html>