자바 스크립트 치트 시트

JavaScript 치트 시트 PDF아래의 .pdf 및 텍스트에서 Javascript 치트 시트를 찾을 수 있습니다..


자바 스크립트 치트 시트

  • 다운로드 링크

자바 스크립트 기본 사항

웹 사이트에 JavaScript를 포함시키는 방법 – 기본부터 시작하겠습니다..

HTML 페이지에 JavaScript 포함

페이지 안에 JavaScript를 포함 시키려면 자바 스크립트를

이 입력으로 브라우저는 코드를 올바르게 식별하고 실행할 수 있습니다.

외부 JavaScript 파일 호출

JavaScript를 자체 파일에 배치하고 HTML 내에 이름을 지정할 수도 있습니다. 이렇게하면 서로 다른 유형의 코드를 서로 분리하여보다 잘 정리 된 파일을 만들 수 있습니다. 코드가라는 파일에있는 경우 myscript.js, 당신은 그것을 부를 것입니다 :

주석 포함

주석은 다른 사람들이 코드에서 무슨 일이 일어나고 있는지 이해하거나 자신이 무언가를 잊었을 때 생각 나게하기 때문에 중요합니다. 브라우저가이를 실행하려고하지 않도록 올바르게 표시되어야합니다..

JavaScript에는 두 가지 옵션이 있습니다.

  • 한 줄 주석 — 한 줄로 제한된 설명을 포함하려면 앞에 주석을 추가하십시오 //
  • 여러 줄 주석 — 여러 줄 사이에 더 긴 주석을 쓰려면 줄 바꿈하십시오. / ** / 실행되지 않도록

자바 스크립트의 변수

변수는 작업을 수행하는 데 사용할 수있는 독립형 값입니다. 수학 수업에서 익숙해 져야합니다.

var, const, 허락하다

JavaScript에서 변수를 선언 할 수있는 세 가지 다른 가능성이 있으며 각각 고유 한 특성을 갖습니다.

  • var — 가장 일반적인 변수. 재 할당 할 수는 있지만 기능 내에서만 액세스 할 수 있습니다. 로 정의 된 변수 var 코드가 실행될 때 맨 위로 이동.
  • const — 코드 내에 나타나기 전에 재 할당 및 액세스 할 수 없음.
  • 허락하다 - 비슷하다 const, 그만큼 허락하다 변수를 재 할당 할 수는 있지만 다시 선언 할 수는 없습니다..

데이터 타입

변수는 다른 유형의 값과 데이터 유형을 포함 할 수 있습니다. 너는 사용한다 = 그들에게 할당 :

  • 번호 - 바 나이 = 23
  • 변수 - var x
  • 텍스트 (문자열) — var a = "init"
  • 작업 — var b = 1 + 2 + 3
  • 참 또는 거짓 진술 — var c = true
  • 상수 — const PI = 3.14
  • 사물 - var name = {firstName : "John", 성 : "Doe"}

더 많은 가능성이 있습니다. 변수는 대소 문자를 구분합니다. 그 의미는 두 개의 다른 변수로 처리됩니다.

사물

객체는 특정 종류의 변수입니다. 이들은 고유 한 값과 방법을 가질 수있는 변수입니다. 후자는 객체에 대해 수행 할 수있는 작업입니다..

var person = {
firstName : "존",
성 : "도",
나이 : 20,
국적 : "독일어"
};

다음 단계 : 배열

다음은 JavaScript 치트 시트에서 배열입니다. 배열은 다양한 프로그래밍 언어의 일부입니다. 변수와 속성을 그룹으로 구성하는 방법입니다. JavaScript로 작성하는 방법은 다음과 같습니다.

var fruit = [ "바나나", "사과", "배" ";

이제 배열이라는 과일 향후 작업에 사용할 수있는 세 가지 항목이 포함되어 있습니다..

배열 방법

배열을 만든 후에는 몇 가지 작업을 수행 할 수 있습니다.

  • concat () — 여러 배열을 하나로 결합
  • indexOf () — 주어진 원소가 배열에서 나타나는 첫 번째 위치를 반환
  • 붙다() — 배열의 요소를 단일 문자열로 결합하고 문자열을 반환
  • lastIndexOf () — 주어진 원소가 배열에 나타나는 마지막 위치를 제공합니다
  • 팝() — 배열의 마지막 요소를 제거합니다
  • 푸시() — 끝에 새로운 요소를 추가
  • 역전() — 내림차순으로 요소 정렬
  • 시프트() — 배열의 첫 번째 요소를 제거
  • 일부분() — 배열의 일부를 새 배열로 가져옵니다.
  • 종류() — 알파벳 순으로 요소 정렬
  • 접착() — 지정된 방식과 위치에 요소를 추가합니다
  • toString () — 요소를 문자열로 변환
  • unshift () — 처음에 새로운 요소를 추가
  • valueOf () — 지정된 객체의 프리미티브 값을 반환

연산자

변수가 있으면 변수를 사용하여 다른 종류의 작업을 수행 할 수 있습니다. 그러려면 운영자가 필요합니다.

기본 연산자

  • + — 추가
  • - — 빼기
  • * — 곱셈
  • / — 부문
  • (...) — 그룹화 연산자, 대괄호 안의 작업은 외부의 작업보다 먼저 실행됩니다.
  • % — 모듈러스 (나머지)
  • ++ — 증가 번호
  • -- — 숫자 감소

비교 연산자

  • == - 동일
  • === — 동등한 가치와 동등한 유형
  • != — 같지 않음
  • !== — 같지 않거나 같지 않은 유형
  • > - 보다 큰
  • < — 이하
  • > = — 이상
  • <= — 이하
  • ? — 삼항 연산자

논리 연산자

  • && — 논리 및
  • || — 논리 또는
  • ! — 논리적이지 않음

비트 연산자

  • & — AND 문
  • | — OR 진술
  • ~ — 아님
  • ^ — XOR
  • << — 왼쪽 교대
  • >> — 오른쪽 교대
  • >>> — 제로 필 오른쪽 시프트

기능

JavaScript 함수는 특정 작업을 수행하는 코드 블록입니다. 기본 기능은 다음과 같습니다.

함수 이름 (parameter1, parameter2, parameter3) {
// 함수의 기능
}

보시다시피, 그것은 함수 키워드와 이름 함수의 매개 변수는 괄호 안에 있으며 함수의 수행 주위에 중괄호가 있습니다. 당신은 당신 자신을 만들 수 있지만, 당신의 인생을 더 쉽게 만들 수 있습니다 – 또한 많은 기본 기능이 있습니다.

데이터 출력

함수의 일반적인 응용 프로그램은 데이터 출력입니다. 출력에는 다음과 같은 옵션이 있습니다.

  • 경보() — 브라우저 창의 경고 상자에 데이터 출력
  • 확인 () — 예 / 아니오 대화 상자를 열고 사용자 클릭에 따라 참 / 거짓을 반환합니다
  • console.log () — 디버깅 목적으로 유용한 정보를 브라우저 콘솔에 기록
  • document.write () — HTML 문서에 직접 쓰기
  • 신속한() — 사용자 입력을위한 대화를 만듭니다

글로벌 함수

전역 함수는 JavaScript를 실행할 수있는 모든 브라우저에 내장 된 함수입니다..

  • decodeURI () — 디코드 URI (Uniform Resource Identifier) 만든 사람 encodeURI 또는 유사
  • decodeURIComponent () — URI 구성 요소를 디코딩합니다
  • encodeURI () — URI를 UTF-8로 인코딩
  • encodeURIComponent () — 동일하지만 URI 구성 요소
  • eval () — 문자열로 표시된 JavaScript 코드를 평가합니다
  • isFinite () — 전달 된 값이 유한 수인지 결정
  • isNaN () — 값이 NaN인지 여부를 결정합니다
  • 번호() —- 인수에서 변환 된 숫자를 반환
  • parseFloat () — 인수를 구문 분석하고 부동 소수점 숫자를 반환
  • parseInt () — 인수를 파싱하고 정수를 반환

자바 스크립트 루프

루프는 대부분의 프로그래밍 언어의 일부입니다. 다른 값으로 원하는 코드 블록을 여러 번 실행할 수 있습니다.

for (루프 전; 루프 조건; 루프 후 실행) {
// 루프 중에해야 할 일
}

루프를 작성하기위한 여러 매개 변수가 있습니다.

  • ...에 대한 — JavaScript에서 루프를 만드는 가장 일반적인 방법
  • 동안 — 루프가 실행되는 조건을 설정합니다
  • 하는 동안 —와 유사 동안 루프하지만 적어도 한 번 실행되고 조건이 다시 실행되도록 충족되는지 확인하기 위해 마지막에 검사를 수행합니다.
  • 단절 — 특정 조건에서 사이클을 중지하고 종료하는 데 사용
  • 계속하다 — 특정 조건이 충족되면 사이클의 일부를 건너 뜁니다.

만약그밖에 진술

이러한 유형의 진술은 이해하기 쉽습니다. 그것들을 사용하여 코드가 실행될 때의 조건을 설정할 수 있습니다. 특정 조건이 적용되는 경우, 그렇지 않은 경우 수행 – 다른 것이 실행 됨.

if (조건) {
// 조건이 충족되면해야 할 일
} else {
// 조건이 충족되지 않으면해야 할 일
}

비슷한 개념 다른 경우라면 입니다 스위치 성명서. 그러나 스위치를 사용하여 실행할 여러 코드 블록 중 하나를 선택합니다.

문자열은 JavaScript가 텍스트를 호출하여 기능을 수행하지 않지만 화면에 나타날 수있는 것입니다..

var person = "John Doe";

이 경우, 존 도우 문자열입니다.

탈출 캐릭터

JavaScript에서 문자열은 작은 따옴표 나 큰 따옴표로 표시됩니다. 문자열에 따옴표를 사용하려면 특수 문자를 사용해야합니다.

  • \ ' — 작은 따옴표
  • \ " — 큰 따옴표

그 외에도 추가 이스케이프 문자가 있습니다.

  • \\ — 백 슬래시
  • \비 — 백 스페이스
  • \에프 — 용지 공급
  • \엔 — 줄 바꿈
  • \아르 자형 — 캐리지 리턴
  • \티 — 수평 테이블 레이터
  • \V — 수직 테이블 레이터

문자열 메소드

문자열을 다루는 방법에는 여러 가지가 있습니다.

  • charAt () — 문자열 내부의 지정된 위치에있는 문자를 반환
  • charCodeAt () — 해당 위치에서 문자의 유니 코드를 제공합니다
  • concat () — 둘 이상의 문자열을 하나로 연결 (결합)
  • fromCharCode () — 지정된 UTF-16 코드 단위 시퀀스에서 생성 된 문자열을 반환합니다.
  • indexOf () — 문자열 내에서 지정된 텍스트가 처음 나타나는 위치를 제공합니다.
  • lastIndexOf () —와 동일 indexOf () 그러나 마지막 발생에서 뒤로 검색
  • 시합() — 검색 패턴과 일치하는 문자열을 검색합니다
  • 바꾸다() — 문자열에서 지정된 텍스트를 찾아서 바꿉니다.
  • 검색() — 일치하는 텍스트를 검색하고 위치를 반환합니다
  • 일부분() — 문자열의 한 부분을 추출하여 새 문자열로 반환
  • 스플릿() — 문자열 객체를 지정된 위치에서 문자열 배열로 분할합니다
  • substr () - 비슷하다 일부분() 지정된 문자 수에 따라 하위 문자열을 추출합니다.
  • 하위 문자열 () — 또한 일부분() 하지만 부정적인 지수는 받아 들일 수 없습니다
  • toLowerCase () — 문자열을 소문자로 변환
  • toUpperCase () — 문자열을 대문자로 변환
  • valueOf () — 문자열 객체의 기본 값 (속성 또는 메서드가 없음)을 반환합니다

정규식 구문

정규식은 문자열에서 문자 조합을 일치시키는 데 사용되는 검색 패턴입니다. 검색 패턴은 텍스트 검색 및 텍스트 대체 작업에 사용될 수 있습니다..

패턴 수정 자

  • 이자형 — 교체 평가
  • 나는 — 대소 문자를 구분하지 않는 일치 수행
  • — 글로벌 매칭 수행
  • 미디엄 — 여러 줄 일치 수행
  • 에스 — 문자열을 한 줄로 취급
  • 엑스 — 패턴에 주석과 공백을 허용
  • — 불명확 한 패턴

브라켓

  • [알파벳] — 대괄호 사이의 문자를 찾으십시오
  • [^ abc] — 괄호 안에없는 문자를 찾으십시오
  • [0-9] — 0에서 9까지의 숫자를 찾는 데 사용됩니다
  • [A-z] — 대문자 A에서 소문자 z까지의 문자를 찾습니다
  • (a | b | c) — 다음으로 구분 된 대안을 찾습니다. |

메타 문자

  • . — 줄 바꾸기 또는 줄 종결자를 제외한 단일 문자 찾기
  • \ w — 단어 문자
  • \ W — 비 단어 문자
  • \디 — 숫자
  • \디 — 숫자가 아닌 문자
  • \에스 — 공백 문자
  • \에스 — 공백이 아닌 문자
  • \비 — 단어의 시작 / 끝에서 일치하는 항목을 찾습니다
  • \비 — 단어의 시작 / 끝에없는 일치
  • \ 0 — NUL 캐릭터
  • \엔 — 줄 바꿈 문자
  • \에프 — 용지 공급 문자
  • \아르 자형 — 캐리지 리턴 문자
  • \티 — 탭 문자
  • \V — 세로 탭 문자
  • \트리플 엑스 — 8 진수로 지정된 문자 xxx
  • \ xdd — 16 진수 dd로 지정된 문자
  • \ uxxxx — 16 진수 XXXX로 지정된 유니 코드 문자

수량 자

  • 엔+ — 하나 이상의 n을 포함하는 모든 문자열과 일치
  • 엔* — 0 이상의 n을 포함하는 문자열
  • 엔? — n이 0 또는 1 번 포함 된 문자열
  • n {X} — 일련의 X n을 포함하는 문자열
  • n {X, Y} — X부터 Y n까지의 시퀀스를 포함하는 문자열
  • n {X,} — Xn 이상의 시퀀스를 포함하는 모든 문자열과 일치
  • n $ — 끝에 n이있는 문자열
  • ^ n — 시작 부분에 n이 포함 된 문자열
  • ?= n — 특정 문자열 다음에 오는 문자열 n
  • ?!엔 — 특정 문자열이 뒤 따르지 않는 문자열 ni

숫자와 수학

JavaScript에서는 숫자, 상수로 작업하고 수학 함수를 수행 할 수도 있습니다.

숫자 속성

  • MAX_VALUE — JavaScript로 표현할 수있는 최대 숫자 값
  • MIN_VALUE — JavaScript로 표현할 수있는 가장 작은 양수
  • NaN —“Not-a-Number”값
  • NEGATIVE_INFINITY — 음의 무한대 값
  • POSITIVE_INFINITY — 양의 무한대 값

숫자 방법

  • toExponential () — 지수 표기법으로 작성된 둥근 숫자가있는 문자열을 반환합니다.
  • toFixed () — 지정된 소수 자릿수를 가진 숫자의 문자열을 반환합니다
  • toPrecision () — 지정된 길이로 쓴 숫자의 문자열
  • toString () — 숫자를 문자열로 반환
  • valueOf () — 숫자를 숫자로 반환

수학 속성

  • 이자형 — 울러 번호
  • LN2 — 자연 대수 2
  • LN10 — 자연 로그 10
  • LOG2E — E의 밑이 2 인 로그
  • LOG10E — E의 밑이 10 인 로그
  • PI — 숫자 PI
  • SQRT1_2 — 1/2의 제곱근
  • SQRT2 — 2의 제곱근

수학 방법

  • 복근 (x) — x의 절대 (양수) 값을 반환합니다
  • 아 코스 (x) — x의 아크 코사인 (라디안)
  • 아신 (x) — x의 아크 사인 (라디안)
  • 아탄 (x) — x의 아크 탄젠트를 숫자 값으로
  • atan2 (y, x) — 논쟁의 몫의 아크 탄젠트
  • ceil (x) — x의 값은 가장 가까운 정수로 올림
  • 코스 (x) — x의 코사인 (x는 라디안 단위)
  • exp (x) — E의 가치엑스
  • 바닥 (x) — x의 값은 가장 가까운 정수로 내림
  • 로그 (x) — x의 자연 로그 (기본 E)
  • 최대 (x, y, z, ..., n) — 가장 높은 값을 가진 숫자를 반환
  • 최소 (x, y, z, ..., n) — 가장 낮은 값을 가진 숫자와 동일
  • pow (x, y) — X를 y의 거듭 제곱
  • 랜덤 () — 0과 1 사이의 난수를 반환합니다
  • 라운드 (x) — x의 값은 가장 가까운 정수로 반올림
  • 죄 (x) — x의 사인 (x는 라디안)
  • sqrt (x) — x의 제곱근
  • 황갈색 (x) — 각도의 탄젠트

JavaScript에서 날짜 다루기

JavaScript를 사용하여 날짜 및 시간으로 작업하고 수정할 수도 있습니다. 이것은 자바 스크립트 치트 시트의 다음 장입니다.

날짜 설정

  • 데이트() — 현재 날짜와 시간으로 새 날짜 객체를 만듭니다.
  • 날짜 (2017, 5, 21, 3, 23, 10, 0) — 사용자 정의 날짜 개체를 만듭니다. 숫자는 년, 월, 일,시, 분, 초, 밀리 초를 나타냅니다. 1 년과 1 개월을 제외하고 원하는 것을 생략 할 수 있습니다.
  • 날짜 ( "2017-06-23") — 문자열로 날짜 선언

날짜 및 시간 값 가져 오기

  • getDate () — 월의 일을 숫자로 구합니다 (1-31).
  • getDay () — 요일을 숫자로 표시합니다 (0-6)
  • getFullYear () — 네 자리 숫자로 된 연도 (yyyy)
  • getHours () — 시간을 내십시오 (0-23)
  • getMilliseconds () — 밀리 초 (0-999)
  • getMinutes () — 분을 얻으십시오 (0-59)
  • getMonth () — 숫자 (0-11)
  • getSeconds () — 두 번째 받기 (0-59)
  • getTime () — 1970 년 1 월 1 일 이후 밀리 초 가져 오기
  • getUTCDate () — 표준시 (일, 월, 1 년,시, 분 등으로도 제공됨)에 따라 지정된 날짜의 월 (일)입니다.
  • 파싱 — 날짜의 문자열 표현을 구문 분석하고 1970 년 1 월 1 일 이후의 밀리 초 수를 반환합니다

날짜의 일부 설정

  • setDate () — 일을 숫자로 설정하십시오 (1-31)
  • setFullYear () — 연도를 설정합니다 (선택적으로 월과 일)
  • setHours () — 시간 설정 (0-23)
  • setMilliseconds () — 밀리 초 설정 (0-999)
  • setMinutes () — 분을 설정합니다 (0-59)
  • setMonth () — 월 설정 (0-11)
  • setSeconds () — 초를 설정합니다 (0-59)
  • setTime () — 시간 설정 (1970 년 1 월 1 일 이후의 밀리 초)
  • setUTCDate () — 표준시에 따라 지정된 날짜의 날짜를 설정합니다 (일, 월, 1 년,시, 분 등도 사용 가능).

DOM 모드

DOM은 문서 객체 모델 페이지의. 웹 페이지 구조의 코드입니다. JavaScript에는 HTML 요소 (노드라고 함)를 만들고 조작하는 다양한 방법이 있습니다..

노드 속성

  • 속성 — 요소에 등록 된 모든 속성의 라이브 컬렉션을 반환
  • baseURI — HTML 요소의 절대 기본 URL을 제공합니다
  • childNodes — 요소의 자식 노드 모음을 제공합니다
  • firstChild — 요소의 첫 번째 자식 노드를 반환
  • 막내 — 요소의 마지막 자식 노드
  • next 형제 — 같은 노드 트리 수준에서 다음 노드를 제공합니다
  • nodeName — 노드의 이름을 반환
  • nodeType — 노드의 타입을 반환
  • nodeValue — 노드의 값을 설정하거나 반환
  • owner 문서 —이 노드의 최상위 문서 객체
  • parentNode — 요소의 부모 노드를 반환
  • 이전 형제 — 현재 노드 바로 앞에있는 노드를 반환합니다.
  • textContent — 노드와 그 자손의 텍스트 내용을 설정하거나 반환

노드 방법

  • appendChild () — 새 자식 노드를 마지막 자식 노드로 요소에 추가
  • cloneNode () — HTML 요소 복제
  • compareDocumentPosition () — 두 요소의 문서 위치를 비교합니다
  • getFeature () — 특정 기능의 API를 구현하는 객체를 반환
  • hasAttributes () — 요소에 속성이 있으면 true를, 그렇지 않으면 false를 반환
  • hasChildNodes () — 요소에 자식 노드가 있으면 true를, 그렇지 않으면 false를 반환
  • insertBefore () — 지정된 기존 자식 노드 앞에 새 자식 노드를 삽입합니다
  • isDefaultNamespace () — 지정된 namespaceURI가 기본값이면 true를, 그렇지 않으면 false를 반환
  • isEqualNode () — 두 요소가 같은지 확인
  • isSameNode () — 두 요소가 같은 노드인지 확인
  • isSupported () — 요소에서 지정된 기능이 지원되면 true를 반환합니다.
  • lookupNamespaceURI () — 주어진 노드와 관련된 네임 스페이스 URI를 반환
  • lookupPrefix () — 주어진 네임 스페이스 URI에 대한 접두사가 포함 된 DOMString을 반환합니다 (있는 경우).
  • normalize () — 인접한 텍스트 노드를 결합하고 요소에서 빈 텍스트 노드를 제거합니다
  • removeChild () — 요소에서 자식 노드를 제거합니다
  • replaceChild () — 요소에서 자식 노드를 교체합니다

요소 방법

  • getAttribute () — 요소 노드의 지정된 속성 값을 반환
  • getAttributeNS () — 지정된 네임 스페이스 및 이름을 가진 속성의 문자열 값을 반환합니다.
  • getAttributeNode () — 지정된 속성 노드를 가져옵니다
  • getAttributeNodeNS () — 주어진 네임 스페이스와 이름을 가진 속성의 속성 노드를 반환
  • getElementsByTagName () — 지정된 태그 이름을 가진 모든 자식 요소의 컬렉션을 제공합니다
  • getElementsByTagNameNS () — 지정된 네임 스페이스에 속하는 특정 태그 이름을 가진 요소의 라이브 HTMLCollection을 반환합니다.
  • hasAttribute () — 요소에 속성이 있으면 true를, 그렇지 않으면 false를 반환
  • hasAttributeNS () — 지정된 네임 스페이스의 현재 요소에 지정된 속성이 있는지 여부를 나타내는 true / false 값을 제공합니다.
  • removeAttribute () — 요소에서 지정된 속성을 제거합니다
  • removeAttributeNS () — 특정 네임 스페이스 내의 요소에서 지정된 속성을 제거합니다.
  • removeAttributeNode () — 지정된 속성 노드를 제거하고 제거 된 노드를 반환합니다
  • setAttribute () — 지정된 속성을 지정된 값으로 설정하거나 변경합니다
  • setAttributeNS () — 새로운 속성을 추가하거나 주어진 네임 스페이스와 이름을 가진 속성의 값을 변경합니다
  • setAttributeNode () — 지정된 속성 노드를 설정하거나 변경합니다
  • setAttributeNodeNS () — 새로운 네임 스페이스 속성 노드를 요소에 추가

사용자 브라우저로 작업

HTML 요소 외에도 JavaScript는 사용자 브라우저를 고려하여 해당 속성을 코드에 통합 할 수 있습니다.

창 속성

  • 닫은 — 윈도우가 닫혔는지 확인하고 true 또는 false를 반환합니다.
  • defaultStatus — 창의 상태 표시 줄에 기본 텍스트를 설정하거나 반환합니다
  • 문서 — 창의 문서 객체를 반환합니다
  • 프레임 — 모두 반환