목차

1. 분기 구조

1. if 분기 구조

2. switch 문장

2. 순환 구조

1. for 순환

2. while 순환

3. do... while 순환

4, for... in 순환

5, for... of 순환

6, break, contine 키워드

3. 이상 처리

4. 함수

2. 함수 호출

3. 함수 의 매개 변수

4. 반환 값

5. 사건

6. js 선택 기

1. getElement 시리즈

2. query Select 시리즈

3. id 명

7. js 조작 내용

8. js 작업 스타일

분기 구조
1. if 분기 구조
문법:
if (조건 식) {코드 블록;}
else if (조건 식) {코드 블록;}
else {코드 블록;}
요약:

조건 식 은 일반 표현 식 이 될 수 있 습 니 다.

표현 식: 상수, 변수 로 구 성 된 합 법 적 인 식

0 "" null undefined NaN 은 가짜

else 분기 생략 가능

else if 분기 가 여러 개

일 수 있 습 니 다.

한 갈래 에 논리 문 만 있 으 면 {}

을 생략 할 수 있 습 니 다.
2. switch 문장
문법:
switch (표현 식) {case 값 1: 코드 블록 1; break; case 값 2: 코드 블록 2; break; default: 코드 블록 3;}

var month = prompt('     :');
month = + month;
switch (month) {
        case 1: case 3: case 5: case 7: case 8: case 10: case 12: {
            alert('31 ');
            break;
        };

        case 4:
        case 6:
        case 9:
        case 11:
            alert("30 "); break;

        default: alert("28 ");
    }

요약:

break 최근 케이스 종료, switch 구조 뛰 기

표현 식 과 값 을 모두 비교 하기 때문에 표현 식 과 가치 유형 은 통일 되 어야 합 니 다 (문자열 | 정수)

여러 개의 case 는 논리 코드 블록

을 공유 할 수 있다.

default 가 지 는 기본 분기 로 모든 케이스 에 나타 나 야 하 며 생략 할 수 있 습 니 다

순환 구조
1. for 순환
문법

//for (    ①;      ②;       ③) {
//         ④;
//  }
//        ① ②④③ ... ②④③ ②  (②④③  [0, n])

for (var i = 0; i < 5; i++) {
        document.write("
      !
");
    }

2. while 순환
문법

var i = 0;
while (i < 5) {
    document.write("
      !
");
    i++;
}
//while                       

3. do... while 순환
문법

var i = 0;
do {
    document.write("
      !
");
    i++;
} while (i < 5);
//do..while  ,         ,      

4, for... in 순환
문법

obj = {"name": "zero", "age": 8}
for (k in obj) {
    console.log(k, obj[k])
}
//       ：      key，  []       value

5, for... of 순환
문법

iter = ['a', 'b', 'c'];
for (i of iter) {
    console.log(iter[i])
}
// 1.         ：     index，  []       value
// 2.ES6  ，          、  、Map、Set、Anguments、NodeList 

6. break, continue 키워드

break: 이층 순환 종료

contine: 이번 순환 을 끝내 고 다음 순환

이상 처리

try {
         ;
} catch (err) {
           ;
} finally {
           ;
}
// 1.err          
// 2.finally              

throw "     "
//             ，      try...catch  

함수
1. 함수 의 정의

ES5

function     (    ) {
       ;
}

var     = function (    ) {
       ;
}

ES6

let     = (    ) => {
       ;
}

익명 함수

(function (    ) {
       ;
})

//          
(function (    ) {
       ;
})(    );

2. 함수 호출

함수 명 (매개 변수 목록)

3. 함수 의 매개 변수

개 수 는 통일 이 필요 없다

function fn (a, b, c) {
    console.log(a, b, c);  // 100 undefined undefined
}
fn(100);

function fn (a) {
    console.log(a)  // 100
}
fn(100, 200, 300)  // 200,300   

임의의 위치 에 기본 값

을 가 질 수 있 습 니 다.

function fn (a, b=20, c, d=40) {
    console.log(a, b, c, d);  // 100 200 300 40
}
fn(100, 200, 300);

... 문법 으로 여러 값 받 기

function fn (a, ...b) {
    console.log(a, b);  // 100 [200 300]
}
fn(100, 200, 300);
// ...             

4. 반환 값

function fn () {
    return    ;
}
// 1.   return  ，      
// 2.        js    
// 3.             

사건

onload: 페이지 로 딩 완료 이벤트, window 대상 만 첨부

원 클릭: 마우스 클릭 시간

onmouseover: 마우스 부상 사건

onmouseout: 마우스 이동 이벤트

onfocus: 폼 요소 획득 초점

onblur: 폼 요소 가 초점 을 잃 었 습 니 다

js 선택 기
1. getElement 시리즈

// 1.  id              
document.getElementById('id ');
//       document  

// 2、  class              
document.getElementsByClassName('class ');
//       document           
//     HTMLCollection (          ，       )
//             HTMLCollection   ([])

// 3.  tag              
document.getElementsByTagName('tag ');
//       document           
//     HTMLCollection (          ，       )
//             HTMLCollection   ([])

2, query Select 시리즈

// 1.             
document.querySelector('css     ');
//       document         

// 2.            
document.querySelectorAll('css     ');
//       document         
//     NodeList (          ，       )
//             NodeList   ([])

3. id 이름

id 이름 을 통 해 해당 하 는 페이지 요소 대상 을 직접 가 져 올 수 있 으 나 사용 하 는 것 을 권장 하지 않 습 니 다

7. js 작업 내용

innerText: 일반 탭 내용 (자체 텍스트 와 모든 하위 탭 텍스트)

innerHTML: 탭 을 포함 한 내용 (자체 텍스트 및 하위 탭 의 모든 것)

value: 폼 라벨 의 내용

outerHTML: 자신의 라벨 을 포함 한 내용 (자신의 라벨 및 아래 의 모든 것)

8. js 작업 스타일

읽 기와 쓰기 style 속성 스타일

div.style.backgroundColor = 'red';
// 1.       
// 2.    
// 3.             

계산 후 스타일 만 읽 기

// eg:     
//   
getComputedStyle(      ,   ).getPropertyValue('background-color');
//    
getComputedStyle(      ,   ).backgroundColor;

// IE9  
      .currentStyle.getAttribute('background-color');
      .currentStyle.backgroundColor;

// 1.       JS     
// 2.         null  
// 3.        
// 4.               (         )

css 작업 스타일 결합

      .className = "";  //     
      .className = "  ";  //     
      .className += "   ";  //     

다음으로 전송:https://www.cnblogs.com/xvchengqi/p/9780364.html