Xiaoqiang의 HTML5 모바일 개발 로드(26) - JavaScript 검토 1
- 黄舟원래의
- 2017-02-04 14:13:571162검색
오랫동안 JavaScript를 사용하지 않아서 조금 낯설게 느껴집니다. 최근 HTML5 모바일 개발에 대한 정보를 읽다가 어제도 오늘도 JavaScript가 매우 중요하다는 직감이 들었고 앞으로도 그럴 것입니다. 내일은 더욱 중요합니다. 요즘에는 많은 JavaScript 기반 프레임워크가 우리 개발에 큰 편리함을 가져다 주었지만 이러한 도구를 더 잘 사용하려면 JavaScript에 대한 더 높은 이해를 갖고 이전 노트를 열고 검토를 시작해야 합니다.
1. JavaScript의 역할
1. 데이터 검증
2. 웹페이지의 동작(웹페이지의 동적 효과)
3. window
4. Ajax 기술의 핵심 중 하나
2. JavaScript의 구성
ECMAScript는 데이터 유형, 키워드, 예약어, 연산자, 객체 및 명령문 등과 같은 JavaScript 스크립트의 핵심 구문은 어떤 브라우저에도 속하지 않습니다.
ECMAScript 표준은 JavaScript 스크립트의 "골격"인 JavaScript 스크립트의 핵심 콘텐츠를 정의합니다. "골격"을 사용하면 DOM(Document Object Model) 및 BOM(Browser Object Model)과 같이 확장할 수 있습니다. 모델).
역사: 1995년 12월 Sun Microsystems와 Netscape Communications Corporation은 JavaScript를 도입했습니다. 1996년 3월 Netscape Communications는 JavaScript를 지원하는 Netscape Navigator 2.0을 출시했습니다. 웹 페이지용 클라이언트측 스크립팅 언어로서 JavaScript의 성공으로 인해 Microsoft는 1996년 8월 Internet Explorer 3.0을 출시했습니다. 이 소프트웨어는 JavaScript와 호환되는 JScript "about"을 지원합니다.
1996년 11월 Netscape Communications는 표준화를 위해 유럽 컴퓨터 제조업체 협회에 JavaScript를 제출했습니다. ECMA-262의 첫 번째 버전은 1997년 6월 Ecma 조직에 의해 채택되었습니다.
ECMAScript는 ECMA-262에 의해 표준화된 스크립트 언어의 이름입니다. JavaScript 및 JScript는 ECMAScript와 호환되지만 ECMAScript 이상의 기능을 포함합니다.
2. DOM
DOM은 "Document Object Model"의 약자로 "Document Object Model"이라고도 하며 W3C에서 표준화한 것입니다.
DOM은 HTML 문서를 작동하기 위한 JavaScript용 인터페이스를 정의하여 HTML 문서(예: 본문, 양식, div, 텍스트 영역 등)에 액세스하는 방법과 작업 방법을 제공합니다.
3. HTML DOM
html dom은 표준이 아니고(각 브라우저마다 다름) 더 일찍 나타났습니다. dom은 아직 나타나지 않았습니다(dom 0)
많은 브라우저도 일부 개체를 지원합니다
Select
Option
Table
TableRow
TableCell
BOM
BOM은 "Browser Object Model"의 약자로 "Browser Object Model"이라고도 합니다.
BOM은 브라우저를 작동하기 위한 JavaScript용 인터페이스를 정의하여 특정 기능(예: 브라우저 창 크기, 버전 정보, 검색 기록 등)에 액세스하는 방법과 작동 방법을 제공합니다.안타깝게도 BOM은 관련 표준이 없는 ECMAScript의 확장일 뿐입니다. W3C에서는 이 부분을 표준화하지 않았습니다. 각 브라우저 제조업체에는 BOM의 약점이라고 할 수 있는 자체 BOM 구현이 있습니다.
일반적으로 브라우저별(예: W3C 표준이 아닌) JavaScript 확장은 주로 다음을 포함하여 BOM의 일부로 간주됩니다.
- 닫기, 모바일 브라우저 및 브라우저 창 크기 조정
- 새 브라우저 창을 띄웁니다.
- 브라우저 세부정보를 제공하는 위치 개체입니다. 브라우저 창에 로드된 문서에 대한 세부 정보를 제공하는 앵커 개체
- 쿠키 지원 제공
- ActiveXObject 클래스를 추가하여 BOM을 확장하고 JavaScript를 통해 ActiveX 개체를 인스턴스화합니다.
- 3. 자바스크립트 데이터 유형
- 1. 기본 데이터 유형숫자
부울
null
정의되지 않음
2. 복합 데이터 유형
배열
함수
수학
날짜
숫자
문자열
RegExp
오류
Aguments
객체
4. JavaScript의 이벤트 처리 메커니즘
1. 이벤트 처리 코드 바인딩 방법(1) HTML에 바인딩 tag
(2) dom 노드에 바인딩
var obj = document.getElementById(id); obj .onclick = f1; //dom 노드에 바인딩
<html>
<!-- 绑定事件处理代码 -->
<head>
<script>
<!--这部分代码保存到活动对象里面，script里面执行完还没有生成树-->
function f1(){
alert('hello');
}
</script>
</head>
<body style="font-size:30px;">
<input id="b1" type="button" value="点我吧"/>
<script>
var obj = document.getElementById('b1');
obj.onclick = f1; //绑定到dom节点上
//好处：可以将js代码和html代码分开
</script>
</body>
</html>html 코드와 자바스크립트 코드가 별도로 저장됩니다. function f1(){
alert('hello');
}
//window.onload表示当整个html文档全部解析完毕，
//也就是说整个dom树已经生成之后，浏览器会产生一个load事件
window.onload = function(){
var obj = document.getElementById('b1');
obj.onclick = f1;
};
//load事件不是用户参与产生的，是浏览器自己产生的
//下面事件是用于触发的
//click blur mouseover submit change<html>
<!-- 绑定事件处理代码 -->
<head>
<script src="myjs2.js"></script>
</head>
<body style="font-size:30px;">
<input id="b1" type="button" value="点我吧"/>
</body>
</html>이 바인딩 방법의 장점은 다음과 같습니다. js 코드는 html 코드와 분리될 수 있어 코드 유지관리가 용이합니다
그러나 이 방법의 단점은 매개변수 전달이 불편하고 매개변수 전달을 위해 익명 함수를 사용해야 한다는 것입니다
//如果想传参数可以写一个匿名函数
function f1(info){
alert('hello'+info);
}
//window.onload表示当整个html文档全部解析完毕，
//也就是说整个dom树已经生成之后，浏览器会产生一个load事件
window.onload = function(){
var obj = document.getElementById('b1');
obj.onclick = function(){ //匿名函数
f1('zs'); //传参数
};
};
//load事件不是用户参与产生的，是浏览器自己产生的
//下面事件是用于触发的
//click blur mouseover submit change( 3) 각 브라우저 고유의 바인딩 방법
을 사용하는 것은 브라우저 호환성 문제로 인해 아껴서 사용하는 것이 좋습니다
2. 이벤트 객체
버튼 클릭---> 이벤트 객체 생성---> 이벤트 소스 찾기
IE: 이벤트를 직접 사용
IE와 동시에 호환되도록 하려면 Firefox에서는 이벤트 매개변수
만 추가하면 됩니다. (2) 이벤트 객체의 역할
clientX,clientY获得鼠标点击的坐标
<html>
<head>
<script>
//只能在IE上运行
function f1(){ //输出用户点击时鼠标的坐标
//window省略不写
alert(event.clientX + ' ' + event.clientY);
}
//在firefox上面运行,IE也支持
function f2(event){
alert(event.clientX + ' ' + event.clientY);
}
</script>
</head>
<body style="font-size:30px;font-style:italic;">
<a href="javascript:;" onclick="f1();">only ie not firefox</a><br/><br/>
<a href="javascript:;" onclick="f2(event);">ie and firefox</a>
</body>
</html>找到事件源（产生事件的那个对象）
ie: event.srcElement
firefox: event.target
<html>
<head>
<script>
//只能在火狐上运行
function f3(e){
//通过事件对象找到事件源
var obj = e.target; //obj就是那个链接<a>
alert(obj.innerHTML);
}
//只能在IE上面运行
function f4(e){
var obj = e.srcElement;
alert(obj.innerHTML);
}
//可以在IE和火狐上面运行
function f5(e){
//js当中任意数据类型都可以转换成true或者false
var obj = e.target || e.srcElement;
alert(obj.innerHTML);
}
</script>
</head>
<body style="font-size:30px;font-style:italic;">
<a href="javascript:;" onclick="f5(event);
">get the first resorce</a><br/><br/>
<a href="javascript:;" onclick="f5(event);
">get the second resorce</a>
</body>
</html>3、事件冒泡
当一个事件产生后，浏览器会在该事件的节点上查找有没有相应的事件处理代码，如果有则浏览器调用相应的事件处理代码来处理，处理完成后，该事件会继续向上抛给父节点继续处理如果没有，也会将事件继续向上抛给父节点继续处理
<html>
<head>
<script>
function clickA(){
alert('你点击了连接');
}
function clickDiv(){
alert('你点击了Div');
}
</script>
<style>
#d1{
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body style="font-size:30px;font-style:italic;">
<div id="d1" onclick="clickDiv();">
<a href="javascript:;" onclick="clickA();">click5</a>
</div>
</body>
</html>如何取消事件冒泡：event.cancelBubble = true;
<html>
<head>
<script>
function clickA(e){
alert('你点击了连接');
e.cancelBubble = true;
}
function clickDiv(e){
alert('你点击了Div');
}
</script>
<style>
#d1{
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body style="font-size:30px;font-style:italic;">
<div id="d1" onclick="clickDiv(event);">
<a href="javascript:;" onclick="clickA(event);">click5</a>
</div>
</body>
</html>以上就是 小强的HTML5移动开发之路（26）—— JavaScript回顾1的内容，更多相关内容请关注PHP中文网（www.php.cn）！