JavaScriptの基礎3カテゴリ、コールバック関数、組み込みオブジェクト、イベント処理

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScriptの基礎3カテゴリ、コールバック関数、組み込みオブジェクト、イベント処理_基礎知識

May 16, 2016 pm 05:55 PM

javascript

コードをコピーコードは次のとおりです:

 
関数クラス名 (パラメーター リスト) { 
this .attribute; 
.... 
this.function; 
} 

このように、関数とデータメンバーは「this」を使用して実装されます。
単純なクラスの生徒を自分で定義し、それを構築して出力関数を実装してみましょう。

コードをコピーコードは次のとおりです:

 
<script LANGUAGE="JavaScript"> ; 
<!-- 
関数 Student(a,b){ 
this.name = a; 
this.output=function(){ 
document .write("student: " this.name " age: " this.age "</br>"); 
} 
} 
var stu1=new students("Zhan Bo" ,20) ; 
var stu2=新入生("胡亦菲", 23); 
stu2.output(); ;/script&gt ; 

 
(おい、単純すぎるだろ？フンダン(|||￣—￣)==o(#)￣▽￣)∕ ) 
うん。 。とにかく、大まかな意味を理解しておけば大丈夫です。 。 

匿名関数:
名前のない関数です (パラメータリスト) {....} 匿名関数は使用後破棄されます (TvT 可哀想です)
コールバック関数:
関数のパラメータが別の関数であるように見えることがよくあります。実際、この状況はよく発生します。たとえば、Java でコントロールにリスナーを追加する場合、リスナーのパラメータは実際には関数です。
この関数では、パラメーターに new を直接追加できます。これは匿名関数であるため、各応答はこのコントロールを対象としているため、通常は再度必要ありません。
しかし、例を挙げて通常の道をたどってみましょう。

コードをコピー

コードは次のとおりです: <script LANGUAGE="JavaScript"> ; <!--

function Huidiao(a){

alert(typeof a);// 関数が実行されたかどうかをテストするため
if(typeof a=='function')
a ();
}
var test=function(){
document.write("これはテストです。");
Huidiao(テスト); //- ->
</script>

(非常感谢二楼Arliang 指出错误！)
此处注意事项：
1.typeof a的类型function是小写，因为js大小写敏感，所以必须注意。
2.Huidiao(test) test不需要写出括号，因为它的参数就仅仅是一个变量，如果写成(test()),那么函数会执行test();这个函数，但是Huidao函数不执行，因为test()没有返回值，那个么Huidiao的参数其实是未定义的。
输出大家都想得到的。。
然后再说一句：Javascript中没有重载。不要痴心妄想了骚年~ㄟ(￣v￣ㄟ)

--------------------------------------------------------------------------------
接下来学习js里面的内置对象，其实我们已经接触过几个了。
常用的内置对象： String Date Math Array Number Globle
String大家都很懂的，var s="xxxxx"; 或者 var= new String("xxxx"); 意思差不多，至于String里涵盖的一些操作函数的话。。请自行下载javascript的API文档亲，我就不给连接了亲，自己搜搜吧~
提供一个在线的参考手册连接：点这里 http://www.jb51.net/w3school/js/jsref_obj_string.htm (这个网站不错，有空可以看看~)
每个对象的数据成员和函数成员就都有了，老师在这里一直讲那些个函数，我都睡着了，其实根本没必要讲，用的时候看看就行了，熟了以后都不需要看就知道有什么啦~
然后稍微说一下Array这个对象，实际上JS并没有提供二维数组，but，我们可以通过嵌套来实现，比如
var array2=new Array(new Array(4), new Array(), new Array(1,2,3,4));
JavaScriptの基礎3カテゴリ、コールバック関数、組み込みオブジェクト、イベント処理_基礎知識

JavaScriptの基礎3カテゴリ、コールバック関数、組み込みオブジェクト、イベント処理_基礎知識

最后，除了这些常用对象外，
还有一些全局的函数和事件也需要熟悉起来，
对应到文档里就是function和event两个部分。
事件处理：
事件处理是什么我觉得应该没有人不清楚吧，我也懒得写概念了，因为写了也没人会记住的╮(╯▽╰)╭
然后，指定事件处理程序有三种方法：
第一：直接在HTML标记中指定 <标记.......事件="事件处理程序" .....>
第二：编写特定对象特定之间的javascript <script LANGUAGE="JavaScript" for="对象" event="事件"> ........ </script>
第三：在javascript中说明 <事件主角 - 对象><事件>=<事件处理程序>;
常用的事件罗列一下：

鼠标事件

键盘事件

HTML事件

变动事件

onclick 单击事件

ondblClick 双击事件

onmouseover 鼠标移到上方

onmouseout 　鼠标离开事件　

onmousedown 鼠标按下事件

onmouseup 鼠标放开事件

onselect 选中事件

onkeydown 按键事件

onkeypress 按下键事件

onkeyup 放开键事件

onload 窗口加载事件

onunload 窗口离开事件

onresize 改变窗口大小触发事件

onabort 中断事件

onerror 异常事件

onreset 按下重置按钮事件

onsubmit 提交事件

onblur 失去焦点事件

onfocus 获得焦点事件

onchange 值改变触发事件

1 つ目は最も一般的に使用されるもので、送信、保存、データベース関連の操作などはすべてスクリプトで実行できます。 Web ページを書いたことのある学生なら一度は触れたことがあると思います。たとえば、

コードをコピーコードは次のとおりです:

<html> 
<head> 
<title></title> "text/javascript" src= "js/output.js"></script> 
<script LANGUAGE="JavaScript"> 
<!-- 
関数 warningW(){ 
alert("ボタンがクリックされました"); 
--> 
</head> input type="Button" value = "HTML" onclick="alertW();" > 
<!-- 
これは私の JSP ページです。 🎜></body> 
</html> 

 
これは実際には最初のメソッドです。単純に、ボタン コントロールで直接使用することもできます。 
<input type="Button" value = "HTML" onclick="window.alert('Button Clicked')" >ここでは、alert() の文字列が一重引用符を使用しています。二重引用符は使用できません) 
この 2 つは同じ効果があります。 




しかし、2 番目のタイプについては、Baidu を長い間検索し、ウィンドウ オブジェクトのイベントを確認し、多くのテストを行いましたが、実行可能なコードは onload イベントのみです。 

コードをコピー

コードは次のとおりです:

PS Baidu を使用して「完全な Web ページ制作マニュアル」を検索すると、最初に出てくる Sina ファイルをダウンロードできます。必要に応じてダウンロードしてください。 

OK、

3 番目のタイプ
は Ajax フレームワークで広く使用されていると言われていますが、ajax を知らない者として。。。そうですね、ゆっくり勉強しましょう。

3 番目のタイプには、次のパートで説明する DOM がわずかに関係します。しかし、それは問題ではありません。全体的な状況には影響しません。3 番目の形式はより複雑に見えますが、実際は非常に単純です。

コントロールを追加するときは、コントロールに ID を与え、その ID を使用して JavaScript でコントロールを取得し、次のようなさまざまなイベントを操作します。

コードをコピー
コードは次のとおりです:

<body>

<input type="text" value="JS Object" id= " input"> <script type="text/javascript"> var inpt=document.getElementById("input"); inpt.onblur=function(){ ( "どうやって私を放棄できますか?"); </script>

 このようにしてテキストを追加しました。テキスト ボックス イベント レスポンス。ここで強調すべき点が 1 つあります。

スクリプト レスポンスはコントロール宣言の後に記述する必要があります。そうしないと、コンパイラは ID に基づいてコントロールを見つけることができません。 

PS、実際には、名前に基づいてコントロールを見つけることもできますが、名前は同じであっても ID は同じであってはいけないため、やはり ID を使用することをお勧めします

 各コントロールの応答については、以前の Web サイトで参照するか、前述のマニュアルをダウンロードすることができます。下のスクリーンショットは、マニュアル内の入力テキスト コントロールのイベント リストです。もちろん、これだけではありません。クリックすると、右側にドロップダウンバーがあります~

実際、私はこのマニュアルをダウンロードすることをお勧めします。これは非常に優れたツールです。イベント処理について簡単に説明した後、Event オブジェクトについて学びましょう。イベントオブジェクトは、イベントが発生する要素、キーボードのステータス、マウスの位置、マウスボタンのステータスなどのイベントステータスを表します。

IE では window.event を使用して取得できますが、FF では取得できないため、互換性を考慮して次の戦略を採用します。。プログラマーの知恵はすごいですね。

コードをコピー

コードは次のとおりです:

 
関数eventName(event){ 
event=event|| 
..
} 

イベントプログラムバインディング:

<body event name="eventName(event);"></body>

より抽象的なため、コードを記述します。そしてもっと安心してください。

コードをコピーコードは次のとおりです。

 
<html> head> 
<style><-
.divstyle 
位置:絶対; 
高さ:80px; border:3px outset #FFFF00; 
パディング左: 4px; 
//-> 
</style> 🎜><script type="text/javascript" src="js/output.js"></script> 
<body> ="fistdiv " class= "divstyle" onmousedown="clicked(event)"></div> 
<script type="text/javascript"> 
関数がクリックされました(イベント){ 
event= イベント||window.event; 
s="座標-X :" 
s ="n" "座標-Y: " 
var obj=document.getElementById("fistdiv"); 
obj.textContent=s; 
} 
 🎜></body> 
</html> 

 
注、属性に関しては、3 階の Aleax の言葉を直接引用して例を挙げました。 div 内の innerText: 

FF の innerText は使用できません。代替方法: textContent 
IE: oDiv.innerText = aString; oDiv.innerHTML = aString; 
FF: oDiv.textContent = aString; ; oDiv.innerHTML = aString; 

ブラウザは見慣れないステートメントを無視するため、上で書いたように、これらの 2 行に対応するコードを 2 行書くだけで済みます。 obj.innerHTML=s; 

ちなみに、innerText と innerHTML の違いは次のとおりです: innerText はテキストのみを受け取り、それを直接出力しますが、innerHTML は HTML ステートメントを認識します。 
innerText="&lt ;br>Hello" ; と書くと、出力は次のようになります: <br>Hello innerHTML="<br>Hello" と書くと、改行後の出力は Hello になります。 

イベントのバブリングの問題

イベントのバブリングの問題は、実際には、1 つの操作で複数の応答をトリガーすることです。たとえば、本文で onclick イベントが定義され、その下の div でも onclick イベントが定義されます。 div をクリックすると、最初に div のイベント応答が行われ、次にバブルアップし、本文のクリックイベントもトリガーされます。
この解決策は面倒ではありませんが、IE と FF という 2 つの良い関係に対処する必要があります。
IE でのバブルを防ぐには、次のコマンドを使用します。 FF バブルでは、event object.stopPropagation(); を使用します (確認したところ、伝播 [,prɔpə'ɡeiʃən] は複製、再生産を意味します...TvT の語彙力をお許しください)
わかりました、このペアを適切なものにするためにゲイの友達は仲良く暮らしています、私たちは別の判断をする必要があります:

コードをコピー

コードは次のとおりです:

function xxxxx(event){
.....;
if(event&&event.stopPropagation) // Firefox
event.stopPropagation() であることを示します。 🎜>else
event .cancleBubble=true;

} もちろん、先ほどの例で言えば、この判定は下位ノードに書かれていなければなりません。ボディのクリックイベントに書いてある、つまり無駄な作業です。 ----------------------------------------------- --- ---------------------------------- 最後に、入力を判定する小さなアプリケーションです。ウェブサイトを登録するときによく遭遇する状況: コードは次のとおりです:

コードをコピーします

コードは次のとおりです。以下:

 
<html> 
 
 
<!-- 
#checkspan 
{ 
表示: なし; 
色: #ff0000; 
} 
//--> 
</style> 
<title>テスト</title> 
<script type="text/javascript" src="js/output.js"></script> 
</head> 
 
入力: <input type="text" onblur="blured()" id="input"><span id="checkspan"></span> 
<script type="text/javascript"> 
function Blured(){ 
var obj=document.getElementById("checkspan"); 
var s=document.getElementById("input").value; 
if(s.lengthobj.innerHTML=" 短すぎます"; 
else{ 
obj.innerHTML=" 正しい"; 
obj.style.color="green" 
} 
obj.style.display="inline"; 
} 
</script> 
</body> 
</html> 