learn wpu

jscheatsheet

추가 출처 : https://developer.mozilla.org/id/docs/web/javaScript/a_re-introduction_to_javaScript

데이터 유형

• 번호 : (15 자리)

  1. 10, 123456, 3000 소수점이없는 수치
  2. 10 진수 : 3.14, 0.5, 100.00
  3. 지수 : 123E5 // 12300000, 123E-5 // 0.00123
  4. 음수 : -0.134, -2, -100.00
  5. 옥탈 번호 (기본 8)
  6. 16 진수 (기본 16)
  7. 특별한 숫자 : -Infinity, Nan

• 연산자

  1. 단술 (1 개의 피연산자) a. 유형 번호, 문자열, 부울
  2. 이진 (2 개의 피연산자) a. 산술 : +, -, _, /, % (modulus) 선행 연산자 : Kurung, Kali, Divide, Add, Less. 비. 할당 : =, +=, -=, _ =, /=, %= c. 비교 (비교) : ==,! =, ===,! ==,>,> =, <, <= D. 논리 : &&, ||,! 이자형. 문자열 : Cumatination +
  3. 3 개 (3 피연산자 필요) a. 조건부 (조건)? 오른쪽 : 잘못 (x % 2 == 0)? "심지어": "홀수"

• 문자열 탈출 문자

  • 0 = null
  • '='
  • "="
  • =
  • n = 새로운 라인
  • t = 탭
  • b Backspace
  • uxxxx = 유니 코드

변하기 쉬운

• 선언 : 변수를 적절한 범위로 등록하십시오.

• 초기화 : 변수에 대한 메모리 제공.

• 할당 : 특정 값을 변수로 결정합니다.

  변수 요구 사항 :

  • 공간없이.
  • 낙타.
  • 숫자로 시작하지 않습니다.
  • 키워드 및 예약 단어를 사용하지 마십시오.
  • 가변 범위 : 로컬 및 글로벌.

• var, let & const

Refactoring : 기능을 변경하지 않고 코드를 더 잘 변경하는 프로세스.

 Alasan:

-   Readability
-   DRY, dont repeat yourself
-   Testability
-   Performance
-   Maintainability

• 팝업 박스 기능 :

  • 알리다
  • 즉각적인
  • 확인하다

제어 흐름

• 반복 (루프)

  1. a. while (조건) {action}; 비. while의 초기 값 (종료 조건) {action; 증분/감소; }

  2. (초기 값; 종료 조건; 증분/ 감소) {action; }

  3. (문자열, 배열, 인수, typedarray, map, set, user-defined iterables) const name = 'rama'; for (name of name) {console.log (n); }

  4. in (enumerable / property from object) const mhs = {name : 'rama', age : 29, 이메일 : '[email protected]',}; for (mhs) {console.log (mhs [m]); }

  5. 한거 한만

• 선택 (선택)

  1. 다른 경우 if (조건) {action 1; } else {액션 2; }
  2. if if (조건 1) {action 1; } else if (조건 2) {액션 2; } else if (조건 n) {action n; } else {기본 조치; }
  3. 스위치 스위치 (Expression) {Case "Value 1": 동작 1; [BREAK;] CASE "Value 2": 액션 2; [BREAK;] CASE "VALUE N": ACTION N; [break;] 기본값 : 기본 조치 [break;]}

기능

• 내장 기능

  1. 알리다 ();
  2. 확인하다 ();
  3. 즉각적인 ();
  4. 나뉘다 ();
  5. 슬라이스 ();
  6. 등.

• 사용자 정의 함수 키워드 이름 표시 (매개 변수/argument *옵션) {function body; 반환 값; *옵션} console.log (namefunction (argument));

  1. 기능 선언
  • 함수 식별자 (ParameterList Opt) {function body}
  • 더 유연합니다
  • 이해하기 쉬운 초보자 예 : 함수 숫자 수 (a, b) {총 문자; 총 = a + b; 총 수익; }
  2. 기능 표현
  • 호출되기 전에 정의해야합니다
  • 더 강력한 (폐쇄, 다른 함수에 대한 인수, iife, iife) 선언 식별자 = 함수 (parameterList pest) {function body} 예 : 숫자 수를 let let het function (a, b) {let total; 총 = a + b; 총 수익; }

범위

• 글로벌 / 창 범위 a = 1; Console.log (a);
• 함수 범위 기능 test () {let b = 2; } 시험 (); Console.log (b);
• 블록 스코프 함수 test () {c = 3하자; Console.log (C); } 시험 ();

재귀 : 자신을 부르는 기능.

구현:

• 루핑 교체
• Fibonacci 시리즈
• 데이터 목록의 검색 및 검색 목록 및 트리 예제 : Factorial Function (N) {if (n === 0) 반환 1; 반환 n * factorial (n -1); }

데이터 구조

• 배열 : 각 요소에 인덱스가있는 요소 모음 (값 / 변수). 배열 기능 :

  • 관리 / 가치 / 데이터 관리를 용이하게합니다
  • 메모리 관리 예 : 하리 = [ "월요일", "화요일", "수요일", 1];

• 배열 조작

  • 요소 수 : 길이
  • 결합 : 가입
  • 추가 및 삭제 : 마지막에 : 밀고, 처음에는 팝 : 시프트, 시프트
  • 연결 및 절단 :
    1. Splice nameralarray.splice (Indexawal, Maudihausu, ElementBaru1, New Element2, ...);
    2. 슬라이스는 arraybaru = namerarray.slice (indexawal, end)를 보자;
  • 루핑 :
    1. 배열 형태가 아닌 : foreach nameraray.foreach (function (parameter) {action;})
    2. 배열 형태 : map nameraray.map (function (parameter) {action;})
  • 정렬 배열 : 정렬 namerarray.sort ();
  • 배열 요소 찾기 :
    1. 하나의 값 : LET ARRAYBARU = NAMERARRAY.FIND (function (parameter) {return;})을 찾으십시오.
    2. 많은 값 : 필터는 arraybaru = namerarray.filter (function (parameter) {return;})을 놔두겠습니다.

• 개체 : 각 요소에 속성이있는 요소 (값/ 변수) 모음.

  • 문자 그대로 : 많은 물체에 효과적이지 않습니다. NameBject = {property1 : value1, property2 : value2, method1 : function1로하자
    }
  • 함수 선언 객체 함수 namebject (param1, param2) {선언 객체 = {}; object.prperty1 = param1; object.prperty2 = param2; 리턴 객체; } 개체 새 선언 = nameBject (value1, value2);
  • 객체 생성자 함수 함수 namebject (param1, param2) {this.prperty1 = param1; 이것. progricrty2 = param2; } 객체 새 선언 = 새 namebject (value1, value2); 이것은 글로벌 범위 객체입니다.
  • object.create () 함수 namebject (param1, param2) {object = object.create {}; object.prperty1 = param1; object.prperty2 = param2; 리턴 객체; } 개체 새 선언 = nameBject (value1, value2);
  • 프로토 타입 상속 함수 namebject (param1, param2) {this.prperty1 = param1; 이것. progricrty2 = param2; } nameobject.pototype.method1 = function1; nameobject.pototype.method2 = function2; nameobject.pototype.method3 = function3;
  • 클래스 버전 클래스의 프로토 타입 Namaklas {생성자 (param1, param2) {this.property1 = param1; 이것. progricrty2 = param2; } 방법 1; 방법 2; 방법 3; }

문맥

1. 글로벌 범위의 생성 단계 var name = 정의되지 않은 이름 함수 = fn (),이 기능 자체입니다.
   • Hoisting Window = 글로벌 객체 this = 창입니다
2. 실행 단계 함수는 로컬 실행 컨텍스트를 만듭니다

폐쇄

• 함수의 함수와 어휘 범위의 조합입니다.
• 부모의 범위가 완료 되었음에도 불구하고 부모 범위에 액세스 할 때의 함수. 예 : 함수 NameFunction (param1) {return namalocalfunction (param2) {function body}} 선언 namafiable = namafunction (argument1); namevariable (argument2);

화살표 기능

• 기능 표현보다 더 간결한 또 다른 형태. 예 : 선언 식별자 = (parameterList opt) => {함수 바디} 예 : 숫자 숫자를하자 = (param1, param2) => {function body}; // 암시 적 반환
• 화살표 함수에서 화살표 기능을 적용 할 수 없습니다. 예 : 선언 namebject = function (param1) {this.prperty1 = string; this.property2 = () => {function body}; } 선언 nameVariable = new namebject ();

고차 기능

다른 함수 (인수 / 반환 값)에서 작동하는 함수. JavaScript는 객체로 기능합니다. 이유 : 프로그램을 단순화하는 추상화는 프로그램이 클수록 복잡성이 높을수록 프로그래머가 더 혼란스러워지기 때문입니다.

• Array.pototype.map ()
• Array.pototype.filter ()
• Array.pototype.reduce ()

문자 그대로의 템플릿

표현식을 허용하는 문자 그대로 문자열입니다. 사용할 수 있습니다 : ''; "";; 그리고 ;

백 틱으로 ( ) 할 수 있습니다 :

• 단일 라인 문자열 : string text
• 멀티 라인 문자열 : string text 1 string text 2 string text 3
• 내장 표현식 : string text ${expression} string text
• HTML 조각
• 표현 보간
• 태그 템플릿 :
  • ESCAPING / SONITIZE HTML 태그
  • 번역 및 국제화 (I18N)
  • 스타일링 된 구성 요소

파괴 과제

Dr. Array / Property Dr. Object의 값을 별도의 변수로 해체 할 수있는 JS에 대한 표현.

• 배열 const try = [ 'One', 'Two', 'Three']; const [a, b, c] = 시도;
• Object const mhs = {이름 : 'Ramadyan', Age : 25, 이메일 : '[email protected]',}; const {이름, 나이, 이메일} = MHS;
• 기능
  • 반품 값에
  • 논쟁에

스프레드 운영자

반점을 단일 요소로 나누는 연산자.

REST 매개 변수

어레이에 무제한 주말이있는 함수의 인수를 나타냅니다.

동기 대 비동기

• 단일 스레드 vs 다중 스레드 환경 실행 작업
• 차단 대 비 블로킹 Ngoding 기술 (입력 출력 관련)
• 동기 대 비동기 Ngoding 엔지니어링 (HTTP 요청 관련)
• 동시 대 병렬 환경 실행 작업 작업 (인프라, 하드웨어 및 가상화 관련)

콜백

다른 함수에서 매개 변수로 전송 된 함수.

예 : 함수 NameFunction (namacallback) {name valis = value의 선언; 콜백 (이름); } namefunction ((namevar) => {console.log (execution);});

약속하다

향후 비동기 이벤트의 성공 / 실패를 나타내는 객체. 약속 (이행 / 거부 / 보류 중). Callback => action을 사용합니다 (resolve => 그런 다음 / 거부 => catch / pending => 마지막으로).

예 : 이름 선언 var1 = value; const namevar2 = new Promise ((Resolve, Reject) => {if (namevar1) {resolve (value);} else {reject (value);}}); namesVar2. that ((응답) => console.log (execution)) .catch ((응답) => console.log (execution));

Ajax & Fetch

Fetch는 네트워크에서 리소스를 가져 와서 사용할 수있는 응답이있을 때 완전한 약속 (완전한 약속)을 ​​반환하는 API JS의 방법입니다. 표기법 : Fetch (Resources, Init);

• 리소스 : URL / 요청 객체 (소스 요청 표현).
• Init : 객체 요청의 추가 구성 (예 : Get, Post, Method, Header, Cache 등)
• 응답 : 약속의 형태 (재산 및 방법)로 Dr. Fetch의 결과.

비동기 및 기다립니다

• 비동기식 작동 (이벤트 루프를 통해),
• 반환 값으로서의 (암시 적) 약속을 생성하고,
• 그러나 동기 쓰기 (표준)를 사용하여 코드를 작성하는 방법.

Async 함수는 약속이 완료되기를 기다리는 동안 기능의 실행을 일시적으로 중지하기 위해 AWAIT 키워드를 가질 수 있습니다 (Resolve).

dom (문서 개체 모델) : 문서에서 HTML 요소의 표현이 객체가됩니다. 돔 트리에 저장.

DOM 혜택 :

• 웹 문서를 나타내는 객체 기반 프로그래밍 인터페이스로

• DOM은 웹 페이지의 모든 구성 요소에 액세스 할 수 있고 조작합니다.

• 구성 요소 : HTML 요소, 속성, 텍스트 등

• 돔 트리

  1. 노드리스트 : 노드가 포함 된 컬렉션.
  2. htmlcollection : html 요소를 포함하고 라이브 인 컬렉션.

• 계층:

  • 루트 노드 (문서) : DOM의 다른 모든 노드의 소스 인 노드.
  • 상위 노드 : 다른 노드 위의 한 레벨 인 노드. 예 : 신체는 부모 박사 H1, P, Div & A입니다.
  • 하위 노드 : 다른 노드 아래의 한 레벨 인 노드. 예 : H1은 Child Dr. Body입니다.

• 노드 유형 유형/ 노드 :

  1. 요소
  2. 기인하다
  3. 텍스트
  4. CDATA 섹션
  5. 엔티티 참조
  6. 실재
  7. 처리 명령
  8. 논평
  9. 문서
  10. 문서 유형
  11. 문서 조각
  12. 표기법

• DOM 선택

  • HTML에서 요소를 사용하는 것처럼 :
    1. getlementByid () = 요소를 생성합니다.
    2. getElementsByTagName () = htmlCollection을 생성합니다.
    3. getElementsByClassName () = htmlCollection을 생성합니다.
  • CSS에서 선택기를 착용하는 것과 같습니다.
    1. QuerySector () = 요소를 생성합니다.
    2. QuerySectorall () = Nodelists를 생성합니다.

• DOM 조작

  • 요소 조작
    1. 요소 .innerhtml = 선택한 요소의 내용을 변경합니다.
    2. 요소. 스타일. = 선택한 요소의 스타일 변경.
    3. 요소 .getAttribute () = 속성의 내용을 알고 있습니다.
    4. 요소 .setttribute () = 속성 추가.
    5. 요소 .removeattribute () = 삭제 속성을 삭제합니다.
    6. 요소 ClassList :
       • add () = 클래스 추가.
       • 제거 () = 클래스 삭제.
       • toggle () = 클래스 추가가 없으면 클래스 추가,있는 경우 삭제하십시오.
       • item () = 색인이있는 클래스 확인.
       • 포함 () = 해당 클래스를 확인하십시오.
       • 대체 () = 클래스 변경.
  • 노드 조작
    1. document.createElement ()
    2. document.createtextnode ()
    3. node.ppendchild ()
    4. node.insertbefore ()
    5. parentnode.removechild ()
    6. parentnode.replacechild ()

• DOM 이벤트

  • 이벤트 핸들러 = 마지막 명령 만 실행할 수 있습니다.
    1. 인라인 HTML 속성
    2. 요소 방법
  • addventListener () = 여러 번 실행할 수 있습니다.

• Dom Traversal

  • parentnode = 결과 노드.
  • ParentElement = 요소의 결과.
  • nextibling = 결과 노드.
  • NextElementsibling = 요소의 결과.
  • adcefibling = 노드 결과.
  • previousElementsibling = 요소의 결과.

• 기본 방지

  • 기본 조치를 방지하려면 방법 : event.preventDefault ();

• 버블 링 이벤트

  • 이벤트가 실행되면 아이에게 가기 전에 부모의 이벤트가 진행됩니다. event.stoppropagate () 사용;