자바스크립트 기초 3가지 카테고리, 콜백함수, 내장객체, 이벤트처리_기본지식

코드 복사 코드는 다음과 같습니다.

함수 클래스 이름(매개변수 목록) {
이것 .attribute;
......
this.function
}

이런 식으로 함수와 데이터 멤버는 "this"를 사용하여 구현됩니다.
간단한 수업 학생을 직접 정의한 후 구성하고 출력 기능을 구현해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

그렇다. . 어쨌든, 대략적인 의미를 이해하는 것이 좋습니다. .

익명함수 :
이름이 없는 함수입니다(매개변수목록) {.....} 익명함수는 사용후 폐기됩니다(TvT 참 불쌍합니다)
콜백함수 :
함수의 매개변수가 다른 함수인 것처럼 보이는 경우가 많습니다. 실제로 이러한 상황은 종종 발생합니다. 예를 들어 Java에서 컨트롤에 리스너를 추가할 때 리스너의 매개 변수는 실제로 함수입니다.
이 함수의 경우 익명 함수인 매개변수에 new를 직접 추가할 수 있습니다. 각 응답은 이 컨트롤을 대상으로 하기 때문에 일반적으로 다시 필요하지 않습니다.
하지만 예를 들어 일반적인 경로를 따르겠습니다.

코드 복사 코드는 다음과 같습니다.

(非常感谢二楼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));

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

鼠标事件	键盘事件	HTML事件	变动事件
onclick              单击事件 ondblClick         双击事件 onmouseover   鼠标移到上方 onmouseout 　 鼠标离开事件　 onmousedown 鼠标按下事件 onmouseup      鼠标放开事件 onselect           选中事件	onkeydown  按键事件 onkeypress  按下键事件 onkeyup       放开键事件	onload           窗口加载事件 onunload       窗口离开事件 onresize 改变窗口大小触发事件 onabort        中断事件 onerror         异常事件 onreset        按下重置按钮事件 onsubmit      提交事件	onblur        失去焦点事件 onfocus     获得焦点事件 onchange 值改变触发事件

첫 번째는 가장 일반적으로 사용되는 이벤트로 제출, 저장, 데이터베이스 관련 작업을 모두 스크립트에서 완료할 수 있습니다. 웹 페이지를 작성한 학생들이 이를 접했을 것이라고 생각합니다. 예를 들어,

코드 복사 코드는 다음과 같습니다.

"text/javascript" src= "js/output.js">

input type="Button" value = "HTML" onclick="alertW();" >
이것은 내 JSP 페이지입니다.
--> 🎜>



버튼을 정의한 다음 응답 이벤트를 제공하는 것은 실제로는 첫 번째 방법입니다. 간단하게, 버튼 컨트롤에서 직접 사용할 수도 있습니다:
여기서는 경고()의 문자열이 작은따옴표를 사용합니다. 큰따옴표를 사용할 수 없습니다.
둘은 동일한 효과를 갖습니다.

그런데 두번째 유형은 거의 사용하지 않는군요. 오랫동안 바이두를 검색해서 윈도우 객체의 이벤트를 확인하고 여러번 테스트를 해보았으나 onload 이벤트만 가능합니다.

코드 복사

코드는 다음과 같습니다.

신중하게 조사한 결과 "onbeforeunload" 등 많은 이벤트가 IE에서만 가능하므로 주저 없이 이 방법을 포기하겠습니다. 그냥 알아두세요.

PS 바이두를 이용해서 "완전한 웹페이지 제작 매뉴얼"을 검색해 보세요. 먼저 나오는 시나 파일을 다운받으시면 되는데, 필요하시면 다운받아서 참고하세요~

자,
세 번째 유형

은 Ajax 프레임워크에서 널리 사용된다고 하는데, Ajax를 모르는 사람으로서는. . . 응, 천천히 배워보자.
세 번째 유형은 다음 부분에서 논의할 DOM과 약간 관련이 있습니다. 하지만 문제가 되지 않으며 전체적인 상황에 영향을 미치지 않습니다. 세 번째 형식은 더 복잡해 보이지만 실제로는 매우 간단합니다.

컨트롤을 추가할 때 컨트롤에 ID를 부여한 다음 해당 ID를 사용하여 JavaScript로 컨트롤을 가져온 다음 다음과 같은 다양한 이벤트를 작동합니다.

코드 복사

코드는 다음과 같습니다.

이렇게 해서 텍스트를 추가했습니다. 텍스트 상자 이벤트 응답, 여기서 강조할 한 가지:

스크립트 응답은 컨트롤 선언 뒤에 작성해야 합니다. 그렇지 않으면 컴파일러가 ID를 기반으로 컨트롤을 찾을 수 없습니다.

PS, 사실 이름으로 컨트롤을 찾을 수도 있지만, 이름은 같을 수 있지만 ID는 같을 수 없기 때문에 ID를 사용하는 것이 좋습니다

각 컨트롤의 응답은 이전 홈페이지에서 찾아보시거나 제가 말씀드린 매뉴얼을 다운로드 받으실 수 있습니다. 아래 스크린샷은 매뉴얼에 있는 입력 텍스트 컨트롤의 이벤트 목록입니다~ 물론 이것만은 아닙니다. 클릭하시면 오른쪽에 드롭다운바가 있어요~




사실 저는 이 매뉴얼을 다운로드하는 것이 매우 좋습니다.

이벤트 처리에 대한 간략한 소개를 마치고 이벤트 객체에 대해 알아봅시다이벤트 객체는 이벤트가 발생한 요소, 키보드 상태, 마우스 위치, 마우스 버튼 상태 등 이벤트 상태를 나타냅니다. IE에서는 window.event를 사용하여 얻을 수 있지만 FF에서는 얻을 수 없으므로 호환성을 위해 다음 전략을 채택합니다. . 프로그래머의 지혜는 위대합니다.

코드 복사

코드는 다음과 같습니다.

함수 eventName(이벤트){
event=event|| window.event
.............
}

이벤트 프로그램 바인딩:



더 추상적이므로 코드를 작성합니다. 그리고 더 마음이 편해집니다.

코드 복사 코드는 다음과 같습니다.

머리>

!--
.divstyle
{
위치:절대값
높이:80px; border:3px outset #FFFF00;
여백: 4px;
//->
🎜>< ;script type="text/javascript" src="js/output.js">

="fistdiv " class= "divstyle" onmousedown="clicked(event)">

🎜>< ;/body>



참고로 3층에 있는 Aleax의 말을 직접 인용하고 속성에 대한 예를 들었습니다. div의 innerText:

FF의 innerText를 사용할 수 없습니다. 대체 방법: textContent
IE: oDiv.innerText = aString;
FF: oDiv.textContent = aString; ; oDiv.innerHTML = aString;

브라우저는 익숙하지 않은 명령문을 무시하므로 위에서 작성한 것처럼 두 줄의 코드만 작성하면 됩니다. obj.innerHTML=s;

그런데 innerText와 innerHTML의 차이점은 다음과 같습니다. innerText는 텍스트만 받아들인 다음 직접 출력하지만 innerHTML은 HTML 문을 인식합니다. ,
innerText="< ;br>Hello" 라고 쓰면 출력은 다음과 같습니다:
Hello innerHTML="
Hello"라고 쓰면 줄바꿈 후 Hello가 출력됩니다.


이벤트 버블링 문제

이벤트 버블링 문제는 실제로 하나의 작업이 여러 응답을 트리거하는 것입니다. 예를 들어 본문은 onclick 이벤트를 정의하고 본문 아래의 div도 onclick 이벤트를 정의합니다. div를 클릭하면 div의 이벤트 응답이 먼저 이루어진 다음 버블링되고 본문의 클릭 이벤트도 트리거됩니다.
해결책은 번거롭지는 않지만 여전히 좋은 친구인 IE와 FF 사이의 충돌을 수용해야 합니다.
IE에서 버블링을 방지하려면 다음을 사용하세요. event object.cancelBubble=true; FF Bubble에서는 다음을 사용합니다. event object.stopPropagation(); (방금 확인했는데, propagation [,prɔpə'ɡeiʃən]은 재생산, 재생산을 의미합니다... 제 어휘를 용서해주세요, TvT)
좋아, 이 쌍을 좋게 만들려면 게이 친구들은 화목하게 살아요, 우리는 또 다른 판단을 내려야 합니다:

코드 복사
코드는 다음과 같습니다:


function xxxxx(event){
..........;
if(event&&event.stopPropagation) //Firefox임을 나타냅니다

event.stopPropagation(); 🎜>else event .cancleBubble=true; } 물론 이 판단은 하위 노드에 작성해야 합니다. 예를 들어 지금의 예에서는 본문의 클릭 이벤트에 쓰여진 것, 즉 쓸모없는 작업입니다. ---------------------------------- --- ----------------------------------

마지막으로 작은 응용 프로그램은 입력을 판단하는 것입니다. 웹사이트를 등록할 때 흔히 발생하는 상황:

코드는 다음과 같습니다.




코드를 복사하세요


코드는 다음과 같습니다. 다음:

입력: