자바 스크립트 웹 프레임 워크 (python3 항목)

JS 도입 한

< HTML > 
    < 몸 > 
    </ 몸 > 
    < 스크립트 SRC = "JS / xxx.js" > </ 스크립트 > 
    < 스크립트 > 
        // JS代码块
    </ 스크립트 > 
</ HTML >

JS 도입

2 JS 기본 데이터 형식

// 값 유형 : 번호 문자열 부울 정의되지 않은 

// 참조 유형 : 기능 개체 (DIC)은 

특정 개체 유형을 // : 널 배열 날짜 정규식 수학을

3 JS 어레이 및 사전 작업

// 배열 
var에 ARR = [5, 2 ,. 3 ,. 1 ,. 4.] 
// 취소] () | 푸시 () 
// 시프트 () | POP () 
(newArgs beginIndex의, ctrlCount) // 접합부; 
// 정렬 () 

// 사전 
var에 DIC = { 
    K1 : V1, 
    ... 
    KN : VN 
} 
// 키는 문자열 유형, 값은 어떤 유형이 될 수 있어야합니다 
// 방법을 사전에 회원 : dic.key | DIC [ '키' ] 
// 삭제 dic.key 삭제

JS 어레이 및 사전 작업

4 JS 함수

1. 정의 // 함수 함수 함수명 코드 블록 (파라미터리스트) {} 
기능을 Fn1 () { 
    CONSOLE.LOG ( 'I가 기능을 Fn1입니다'); 
} 
VAR Fn2를 = 함수 () { 
    CONSOLE.LOG ( 'I 기능 Fn2를 '); 
}; 
// 익명 함수를 JS : 정의 만 단계에서 한 번 호출 할 수 있습니다 
(함수 () { 
    을 console.log ('나는 익명 함수입니다 '); 
}) (); //합니다 (FN 정의 () ) 제 () FN이 메모리 주소를 얻기 위해 전체로서 정의된다) (제는 함수 호출 

함수 이름 호출 // (인수리스트) 2 기능 
을 Fn1 (); 
Fn2를 () 

/ / 3 리턴 값 JS 함수 반환 값 만 
기능 Fn3는 () { 
    // 리턴 리턴 값이 명시 적으로 정의하지 않다 

    널 정의 리턴 // 
    // 리턴 

    정상 값 리턴 // 
    // 10 반환; 

    / / 반환 값이 여러 경우 JS가 최종 값 (20)이 반환 만 수 
    20, 10을 리턴 //되고 

    사전 및 배열에 의해 달성 여러 값을 리턴 // 방법 
    에 반품 [10, 20] 
}
Fn3 RES = VAR (); 
CONSOLE.LOG (RES) 

파라미터 함수 // 4 
// I)의 형상과 관련된 인자 수가 균일 한 필요는없고, 그 위치를 기준으로 통과해야 
함수 fn4 (a, b) { / / 저역 인수, 파라미터는 형상, 멀티 패스 인자가 할당되지 멀티 패스 인자를 폐기한다 
    CONSOLE.LOG를 (A, B) 
} 
Fn4 (10, 20, 30) 

// II) 벨트 형상의 기준 값은 디폴트 파라미터의 값을, 임의의 위치이다 
(a, B = 10 함수 fn5 D, C = 20) {// B는 소정의 할당 (C)가 부여되므로, 작은 의미까지 C에 상응하는 디폴트 값을 갖는다 위에 B 할당 
    CONSOLE.LOG (A는 B, C, D) 
} 
Fn5 (100, 200, 300); 

// III) ... 인수 무한정 파라미터 
함수 fn6 (A, B ...) {/ / 가변 길이 매개 변수들의 어레이에 저장된 
    CONSOLE.LOG (A, B) 
} 
Fn6 ({이름 : '밥'} ,. 1, 2, 3 ,. ,. 4 ,. 5)

JS 함수 연산

5 JS 완전한 대화 형 페이지

JS 선택 라벨 객체에 의해 // 1. 가져 오기 페이지 
오브젝트 // 2. 바인딩 이벤트, 태그는 이벤트가 바인딩 함수를 호출 할 때 트리거 
의 결합 내에서 지정된 기능을 완료 // 3 비즈니스 로직

JS는 몸의 아래쪽에 작성해야합니다 페이지와 // JS 완벽한 상호 작용을 
JS 선택하여 // 1. 가져 오기 페이지 레이블 객체 
// 첫 번째 레이블 객체를 선택 CSS 구문 매개 변수와 일치 할 수 없다 이다 
VAR = document.querySelector 박스 ( '몸 .box'); 
// 레이블에 일치하는 모든 오브젝트를 결코, CSS를 선택 구문에 대한 매개 변수 (얼마나 많은 것은 아니다 반드시 결과는 배열입니다) 
var에 박스 = document.querySelectorAll은 ( '.box'); 

CONSOLE.LOG (박스) 
CONSOLE.LOG (박스) 
CONSOLE.LOG (박스 [1]) 

// 2 타겟 라벨 오브젝트 (자신의) 방식으로 상호 결합 (이벤트) 
/ 비즈니스 로직 내부 / 3. 완전한 특정 상호 작용 이벤트 
box.onclick = 함수 () {//이 시스템 상자가 내부에 상자 있어야이 기능에있는 모든 개체를 얻기 위해 콜백을 클릭하다 
    '합니다 (CONSOLE.LOG를 ; BOX1는이), '클릭 된 

    // 얻을 컨텐츠 
    var에 MSG = this.innerText, 
    을 console.log (MSG); 
    // 내용 
    this.innerHTML = " < B > 아 </ B> "; 
    //의 .js 스타일 이름 문법 실시 (NULL 가상 클래스로 채워지지 페이지 오브젝트)를 getComputedStyle 형태 오기 
    , VAR은 = getComputedStyle fontSize는 (은이 널) .fontSize 
    CONSOLE.LOG합니다 (fontSize는가) 
    스타일 설정을 // 
    = this.style.backgroundColor "레드"; 
    this.style.marginLeft = '100 픽셀'; 
    // 클래스 이름 가져 
    VAR를 클래스 명 = this.className, 
    을 console.log (클래스 명); 
    // 설정 클래스 이름 
    this.className + = " "큰 // 스페이스를 생략 할 수 없다 
} 


[. 1] // 박스는 .onmouseover = 함수 () { 
// CONSOLE.LOG ( '현탁액 BOX2이었다') 
//}

JS 완전한 대화 형 페이지

계속하려면

자바 스크립트 웹 프레임 워크 (python3 항목)

추천