JavaScript
1. JS와 DOM의 관계
브라우저에는 html 코드를 렌더링하는 기능이 있습니다. html 소스 코드는 메모리에 DOM 객체를 형성하는데, 이는 문서 객체입니다.
JS 인터프리터/실행이 있습니다. / Chrome과 같은 브라우저 엔진 내부에서는 v8 엔진을 사용합니다
우리는 HTML로 JS 코드를 작성하고, JS 코드는 엔진에 의해 실행되고, 그 실행 결과는 DOM의 연산이 됩니다.
브라우저가 실행될 때 HTML 코드를 만나면 렌더링하고 js를 만나면 해석하고 실행합니다. 일반적으로 js는 페이지 끝에 작성됩니다. 즉, 페이지가 먼저 렌더링된 다음 DOM이 조작됩니다.
2. 변수 선언
var name = 'jquery';
참고:
엄밀히 말하면 -sensitive;
변수 이름: 숫자, 문자, 밑줄. 변수 이름 앞에는 $ Start를 사용할 수 있습니다(권장하지 않음)
var를 사용하지 않으면 전역 변수가 오염됩니다.
var를 추가한다는 것은 함수 내부에 지역 변수를 선언하고 값을 할당하는 것을 의미합니다. 그렇지 않은 경우 이는 단지 할당 프로세스일 뿐이며 변수는 외부에서 검색됩니다.
Console.log(); document.write(string);
Alert(string);
3. 변수 유형
세 가지 범주(8개 데이터 유형)
- 기존 유형
숫자(숫자 유형)
String(문자열 유형) 부울 유형) }
배열(배열 유형) > ~ 변수 선언 시 할당된 초기 값이 없으면 변수 데이터 유형이 정의되지 않습니다. 함수
반복적으로 실행될 수 있는 코드입니다.
함수 구성:
1. 함수 이름
- 함수 이름 앞에 숫자, 문자, 밑줄, 숫자를 사용할 수 없습니다.
- 함수 이름은 최대한 의미가 있어야 합니다.
2. 매개변수(선택 사항), 함수는 최대 255개의 매개변수를 가질 수 있습니다.
3. 함수 본문
4. 반환 값(선택)
함수 선언
1. 함수 함수 이름([매개변수...]){
함수 본문;
반환 값;
}
2.var 함수 이름 = new Function (매개변수 ... 함수 본문)
3. 익명 함수
var test = function ([parameter ...]) {
함수 본문;
}
함수 호출
1. 코드 세그먼트에서 직접 함수 이름을 호출합니다.
2. 하이퍼링크 형태로 사용자 정의 함수를 호출합니다. 예:
])'>Text</a>
3. 사용자 정의 함수를 호출합니다.
변수 범위
전역 범위 및 로컬 범위 1. 전역 범위
함수 본문 외부 선언된 변수의 범위는 전역 범위
2. 로컬 범위
함수 본문에 선언된 변수는 로컬 범위입니다.
4. 연산
은 연산 함수에 따라 구분됩니다.
- 산술 컴퓨팅 + - * / % ++ - +(양수) -(음수)
- 논리 연산(JS, 논리 연산, 반환되는 값은 표현식 결과를 판단할 수 있는 가장 빠른 값입니다) & && !
= += -= *= /= % =
~ ㅋㅋㅋ
if
if ... else ...
if ... else if ....
스위치()
6 ... — not not been" — 루프 조건이 충족되지 않으면 루프 본문이 실행되지 않습니다.
7. JavaScript 내장 객체
js의 모든 것은 메소드로 이해될 수 있습니다. 호출되면 그 순간 객체로 패키징됩니다
1. 객체 선언
var o = new Object();
var o = {};
var o = {name:'tom',age: 10}
2. 객체의 멤버에 액세스하는 방법
객체 이름. 객체의 멤버(속성 및 메소드)
- String 객체
var s = new String();
var s = new String(" hello");
var s = "hello";
속성 및 메서드
속성:
length 문자열의 길이를 가져옵니다.
메서드:
Object.indexof(하위 문자열)
함수: 결정 하위 문자열이 개체에 처음 나타나는 위치 0부터 Start
반환: 위치. 개체에 하위 문자열이 나타나지 않으면 -1을 반환합니다.
Object.toUpperCase();
함수: 개체를 다음으로 변환합니다. 대문자
Object.toLowerCase();
함수: 객체를 소문자로 변환
Object.substr(start [,length])
함수: 시작 위치에서 길이 길이를 가로챕니다. 선택적 매개변수는 기본적으로 문자열 끝까지 가로채지 않습니다.
Object.slice(start[,end])
함수: 문자열 가로채기 시작 위치부터 끝 위치까지 가로채기입니다. 기본적으로 문자열 끝까지 가로채지 않습니다.
Object.replace(str1,str2)
- 배열 객체
선언:
var a = new Array();
var a = [];
var a = new Array('team',1) ;
var a = ['team',1...];
var a = new Array(7); //7은 배열의 길이입니다.
배열의 출력:
document.write( 배열 이름 ); 배열 할당
a [0] = 'nico';
속성:
길이의 LENGTH 배열
메서드:
array object.concat(배열 개체)
함수: 두 개의 배열 연결 Object.
반환: 새로 병합된 배열의 요소 순서는 병합 시 두 배열의 순서에 따라 달라집니다.
Array object.pop()
함수: 마지막 요소를 팝합니다.
반환: 팝된(삭제된) 배열 요소.
배열 object.push(배열 요소)
함수: 배열의 끝에 요소를 추가합니다.
반환:
Array Object.shift()
함수: 배열의 선두에서 요소를 팝합니다.
반환: 팝된 배열 요소를 팝합니다.
Array object.unshift(요소 이름)
함수 : 배열의 선두에 요소를 추가합니다.
반환: 요소가 추가된 후 배열의 길이
Array object.join(',')
Array object.split(',') 배열 개체 .reverse()
Array object.sort()
- 날짜 객체
var d = new Date()
메서드:
Object.getFullYear()
함수: 4자리 연도 가져오기
Object.getMonth()
함수: 월 가져오기, 월(0~11)
Object.getDate()
함수: 일 가져오기
Object.getHours()
함수: 시간 가져오기
Object.getMinutes()
함수: 분 가져오기
Object.getSeconds()
함수: 초 값을 가져옵니다. Object.getDay()
함수: 현재 주 값 가져오기(0 일요일 ~ 6 토요일)
- 수학 객체
인스턴스화 없음, PHP의 클래스 이름을 통한 정적 호출과 동일
속성:
PI 할당 방법
방법 :
Math.ceil(변수)
기능 : 반올림
Math.floor(변수)
기능 : 반올림
Math.round(변수)
기능 : Rounding
Math.abs(변수)
함수: 절대값을 취합니다.
Math.random()
함수: 0보다 크거나 같고 1보다 작은 [0,1).
Math.max( 변수입니다. .)
함수: 변수 중 더 큰 값을 반환합니다.
Math.min(Variable..)
함수: 변수 중 더 작은 값을 반환합니다.
8. 브라우저 창 개체
참고: 창 개체는 브라우저 호스트 개체이며 JS 언어와 아무 관련이 없습니다
창 개체의 메서드:
window.alert(message);
window.confirm(message);
window.prompt();
window.open();
window.close();
window.print();
window.setInterval();
window.setTimeout();
window.clearInterval();
창 .clearTimeout( ;
3.history History
4.screen 화면 개체
5.document 개체(DOM 개체)
6. Storage 개체
웹 저장소 API 제공 세션스토리지( 세션 저장소) 및 localStorage(로컬 저장소) 두 개의 저장소 웹 페이지의 데이터를 추가, 삭제, 수정 및 쿼리하는 개체입니다.
sessionStorage는 동일한 창(또는 탭)의 데이터를 임시로 저장하는 데 사용됩니다. 해당 창이나 탭을 닫은 후에는 데이터가 삭제됩니다.
LocalStorage는 전체 웹사이트의 데이터를 장기간 저장하는 데 사용됩니다. 저장된 데이터는 수동으로 제거할 때까지 만료 시간이 없습니다.对 om 9.DOM 개체 작업
DOM(DOCUME 개체 모델 문서 개체 모델)
문서 HTML/XML
XML
확장 가능한 마크업 언어
.
> > > 반환됨: 객체로 구성된 배열
- document.getElementsByName(HTML 태그의 이름 속성 값)
반환: 개체 배열
- document.getElementById(HTML 태그의 id 속성 값)
반환: object.getElementsByClassName(HTML 태그 클래스 속성) value)
반환: 객체의 배열.
window.document가 이전 창을 생략할 수 있는 이유는 무엇입니까?
답변: 여전히 범위의 문제입니다. 내부에서 찾을 수 없다면 외부 레이어에서 찾으세요. .전역적으로 window.document가 있습니다.
Model Model
노드 중 하나를 찾으면 모든 노드를 찾을 수 있습니다.
참고: 공백과 주석은 모두 노드입니다.
노드: 노드 이름(nodeName), O 노드 유형(nodetype) .
일부 노드에는 노드 값이 있습니다.
아버지 노드: 노드 객체. Parentnode
하위 노드:
노드 개체 .Childnodes 반환 배열(빈 노드 포함)
H 노드 개체.어린이 비표준 속성, 하지만 빈 노드를 제외하면 잘 호환됩니다
ㅋㅋㅋ 노드 개체. 마지막 하위 노드
형제 노드:
노드 개체.previousSibling
이전 형제 노드
~ > 부모
부모 object.removeChild (부모 object.lastChild)
함수: 개체의 마지막 자식 노드를 삭제합니다.
작업 개체
속성
1. 속성 읽기
객체 .속성 이름
2. 속성 수정
Object.Attribute 이름 = 속성 값
텍스트
1. 읽기
Object.innerText
Object.innerHTML // 태그의 모든 html 코드
2. 수정
Object.innerText = 수정된 텍스트
Object.innerHTML = 수정된 텍스트
innerHTML은 HTML 태그를 구문 분석하고, innerText는 HTML 태그를 구문 분석하지 않습니다.
Style
1 .Read(style 속성 뒤에는 여전히 객체가 오기 때문에) 따라서 계속 액세스하려면 .을 사용해야 하며, 내부 스타일의 값만 읽을 수 있고 <style>의 값은 읽을 수 없습니다.)
개체 스타일. .style.속성 이름 = 속성 값;
속성 이름 참고: background-color에서는 "-"를 제거하고 다음 단어의 첫 글자를 대문자로 사용해야 합니다. 즉, 작은 낙타 표기 속성 이름입니다. 3. 일괄적으로 스타일 수정
Object.className = 클래스 스타일 이름
런타임 시 스타일 개체 가져오기:
Obj.currentStyle[attr] 및 getCompulatedStyle(obj, null)[attr]은
를 얻는 데 사용됩니다. 전자는 IE 및 Opera에서만 지원되고 후자는 IE9 이상을 사용하는 표준 브라우저에서도 지원됩니다. 두 번째 매개변수는 다음과 같습니다. 는 의사 요소입니다
10 .Events
1. 이벤트 소스
모든 HTML 태그는 이벤트 소스로 간주될 수 있습니다
2. 이벤트
마우스 클릭 이벤트
dblclick 더블 클릭 이벤트
마우스 오버 Cross in
|||||||||||| with| with with with with with with with with with the mouse Y Keyup 키보드 키보드 리프트
Keydown 키보드 키 누르기 문서 누르기 문서 로드
UNLOAD 문서가 전면을 닫았습니다.
Form Focus 제출 제출(양식 요소에 속함 반환 false로 제출 방지)
3. 이벤트 핸들러
- <tag on event="event handler">
이벤트 핸들러는 자바스크립트 코드이거나 자동일 수 있습니다.
>
clearTimeout() 메소드의 매개변수는 setTimeout()에서 반환된 ID 값이어야 합니다.
참고: ClearTimeout() 메서드를 사용하려면 예약된 작업을 생성하고 실행할 때 전역 변수를 사용하세요.
n초마다 실행되는 타이머
setInterval() 메서드는 지정된 기간(in)에 따라 사용할 수 있습니다. 밀리초) 함수를 호출하거나 표현식을 평가합니다.
setInterval() 메서드는 clearInterval()이 호출되거나 창이 닫힐 때까지 함수를 계속 호출합니다. setInterval()에서 반환된 ID 값은clearInterval() 메서드에 대한 인수로 사용될 수 있습니다.
팁: 1000밀리초 = 1초.
팁: 한 번만 실행하려면 setTimeout() 메서드를 사용하면 됩니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
