JavaScript 입문 시리즈_javascript 기술의 지식 포인트 요약

JavaScript는 기본적으로 유형을 지원하는 동적 유형, 약한 유형의 프로토타입 기반 언어입니다. 해당 인터프리터는 브라우저의 일부이며 클라이언트측 스크립팅 언어에서 널리 사용되는 JavaScript 엔진이라고 합니다. 이는 HTML 웹 페이지에 동적 기능을 추가하기 위해 HTML(Standard Universal Markup Language의 응용 프로그램) 웹 페이지에서 처음 사용되었습니다. .

1. 준비:

1. 자바스크립트를 배워야 하는 이유

모든 주요 브라우저는 Javascript 전용입니다

대부분의 웹페이지는 Javascript를 사용합니다

웹페이지를 다양하고 역동적인 효과로 연출할 수 있습니다

배우기 쉬움

2. JS 삽입 방법

3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그는 쌍으로 나타나야 하며 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 사이에 JavaScript 코드를 작성해야 합니다.

4ec11beb6c39d0703d1751d203c17053는 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 사이의 텍스트 유형(텍스트)이 내부 텍스트가 JavaScript 언어에 속함을 브라우저에 알리는 데 사용됨을 의미합니다.

3. JS 외부 파일 참조

HTML 파일과 JS 코드를 분리하여 별도의 JavaScript 파일(약칭: JS 파일)을 생성할 수 있습니다. 파일 접미사는 일반적으로 .js입니다
JS 파일에서는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그가 필요 없으며 JavaScript 코드를 직접 작성하면 됩니다.

코드 복사 코드는 다음과 같습니다.

84cf5d7ad8199c88ca1d921cae010baf2cacc6d41bbb37262a98f745aa00fbf0

4. 페이지 내 JS의 위치

스크립트 언어로서 JavaScript는 HTML 페이지의 어느 곳에나 배치할 수 있습니다. 우리는 일반적으로 웹페이지의 헤드나 본문 부분에 배치합니다. 하지만 브라우저는 HTML을 순서대로 해석하므로 이전 스크립트가 먼저 실행됩니다. 예를 들어 페이지 표시 초기화를 위한 js는 초기화가 미리 이루어져야 하고(페이지 본문에 CSS 설정 등) 이벤트 호출을 통해 함수가 실행되는 경우 헤드에 배치해야 합니다. 위치에 대한 요구 사항은 없습니다.

5. 명령문 및 기호

각 JavaScript 코드의 형식: 문;

6. 주석 방법

한 줄 댓글의 경우 댓글 내용 앞에 '//' 기호를 추가하세요.

여러 줄 주석은 "/*"로 시작하고 "*/"로 끝납니다.

7. 변수

var 키워드를 사용하여 변수를 정의합니다. 구문은 다음과 같습니다.

var 변수 이름

변수 이름은 임의로 지정할 수 있지만 명명 규칙을 따라야 합니다.

1. 변수 이름은 문자나 밑줄(_)로 시작해야 합니다.

2. 변수 이름은 영문자, 숫자, 밑줄(_)을 사용해야 합니다.

3. JavaScript 키워드 및 JavaScript 예약어는 변수 이름에 사용할 수 없습니다.

8. 판단문(if...else)

구문:

if(条件)
{ 条件成立时执行的代码 }
else
{ 条件不成立时执行的代码 }

9. 기능

function 函数名()
{
函数代码;
}

설명:

1. function 키워드는 함수를 정의합니다.

2. "함수 이름"은 함수에 부여하는 이름입니다.

3. "함수 코드"를 특정 기능을 완성하는 코드로 바꿉니다.

기능 호출:

함수를 정의한 후에는 자동으로 실행할 수 없으므로 호출해야 할 경우 필요한 위치에 직접 함수를 작성하면 됩니다

2. 일반적으로 사용되는 상호작용 방법

1. 출력 내용(document.write)

document.write()를 사용하면 HTML 출력 스트림에 직접 콘텐츠를 쓸 수 있습니다. 쉽게 말하면 웹페이지에 내용을 직접 출력하는 것입니다.

첫 번째 유형: 출력 내용을 ""로 묶고 "" 안의 내용을 직접 출력합니다.

두 번째 유형: 변수를 통해 내용 출력

세 번째 유형: 여러 개의 콘텐츠를 출력하고, 콘텐츠를 + 기호로 연결합니다.

네 번째 방법: HTML 태그를 출력하고 태그를 ""로 묶습니다.

2. 경고(경고 메시지 대화 상자)

메시지 텍스트가 있는 작은 창이 나타납니다(경고는 메시지 대화 상자(확인 버튼 포함)를 나타냄): 경고(문자열 또는 변수)

참고:

1. 대화 상자에서 "확인" 버튼을 클릭하기 전에는 다른 작업을 수행할 수 없습니다.

2. 메시지 대화 상자는 일반적으로 프로그램을 디버깅하는 데 사용할 수 있습니다.

3. document.write와 유사하게 문자열 또는 변수일 수 있는 경고 출력 콘텐츠입니다.

3. 확인(메시지 확인 대화 상자)

대화 상자를 표시합니다(확인 버튼 및 취소 버튼 포함). 확인(str);

매개변수 설명:

str: 메시지 대화 상자에 표시될 텍스트

반환 값: 부울 값

반환 값:

사용자가 "확인" 버튼을 클릭하면 true를 반환합니다

사용자가 "취소" 버튼을 클릭하면 false를 반환합니다

참고: 반환 값을 사용하여 사용자가 어떤 버튼을 클릭했는지 확인할 수 있습니다

참고: 메시지 대화 상자는 배타적입니다. 즉, 사용자는 대화 상자의 버튼을 클릭하기 전에는 다른 작업을 수행할 수 없습니다.

4. 질문(프롬프트 메시지 대화 상자)

메시지 대화 상자 팝업(확인 버튼, 취소 버튼 및 텍스트 입력 상자 포함) 프롬프트(str1, str2);

매개변수 설명:

str1: 메시지 대화 상자에 표시되는 텍스트는 수정할 수 없습니다

str2: 텍스트 상자의 내용을 수정할 수 있습니다

반환 값:

1. 확인 버튼을 클릭하면 텍스트 상자의 내용이 함수 반환 값으로 사용됩니다

2. 취소 버튼을 클릭하면 null이 반환됩니다

참고: 사용자가 대화 상자에서 버튼을 클릭하기 전에는 다른 작업을 수행할 수 없습니다.

5. 새 창 열기(window.open)

open() 메소드는 새 창을 여는 데 사용됩니다: window.open(258c40d94d8689854ad79c4076dd5f96, a84845efeef0053bd27f708aedbdf5b7, 5e048d71ad0b12855ece671eadf2df13)

매개변수 설명:

URL: 창을 여는 URL 또는 경로입니다.

창 이름: 열려 있는 창의 이름입니다.

"_top", "_blank", "_selft" 등이 될 수 있습니다.

매개변수 문자열: 창 매개변수를 설정합니다. 각 매개변수는 쉼표로 구분됩니다. (상단,왼쪽,너비,높이,메뉴바,툴바,스크롤바,상태)

참고:

1. 매개변수 사이에 쉼표와 등호 뒤에 공백이 있습니다. 공백을 제거해야만 정상적으로 실행될 수 있습니다.

2. 실행 결과는 브라우저 호환성 문제를 고려합니다.

6. 창을 닫습니다(window.close)

window.close(); //지정된 창을 닫습니다

.close();

3. DOM 작업

1. DOM에 대해 알아보세요

문서 개체 모델 DOM(문서 개체 모델)은 HTML 문서에 액세스하고 처리하기 위한 표준 방법을 정의합니다. DOM은 HTML 문서를 요소로 렌더링합니다.

속성과 텍스트의 트리 구조(노드 트리)입니다.

1. 요소 노드: 위 그림에서 ,

,

등은 모두 요소 노드, 즉 레이블입니다.

2. 텍스트 노드: JavaScript, DOM, CSS 및 25edfb22a4f469ecb59f1190150159c6...bed06894275b65c1ab86501b08a632eb의 기타 텍스트와 같이 사용자에게 표시되는 콘텐츠입니다.

3. 속성 노드: 3499910bf9dac5ae3c52d5ede7383485 태그의 링크 속성 href="http://www.imooc.com"과 같은 요소 속성입니다.

2. ID로 요소 가져오기

document.getElementById(“id”)

참고: 얻은 요소는 개체입니다. 요소에 대해 작업을 수행하려면 개체의 속성이나 메서드를 사용해야 합니다.

3.innerHTML 속성

.innerHTML 속성은 HTML 요소의 내용을 가져오거나 바꾸는 데 사용됩니다.

Object.innerHTML

1.Object는 document.getElementById("ID")를 통해 얻은 요소와 같이 얻은 요소 개체입니다.

2. 쓰기에 주의하세요. innerHTML은 대소문자를 구분합니다

4. HTML 스타일 변경

Object.style.property=새 스타일;

참고: 개체는 document.getElementById("id")를 통해 얻은 요소와 같이 얻은 요소 개체입니다.
기본 속성 테이블(속성)

배경색상/높이/너비/색상/글꼴/글꼴군/글꼴 크기

5. 표시 및 숨기기(표시 속성)

Object.style.display = 값

참고: 개체는 document.getElementById("id")를 통해 얻은 요소와 같이 얻은 요소 개체입니다.

값:

없음: 이 요소는 표시되지 않습니다(숨김).

block: 이 요소는 블록 수준 요소(표시)로 표시됩니다.

6. 컨트롤 클래스 이름(className 속성)

요소의 클래스 속성을 설정하거나 반환합니다

object.className = 클래스명

1. 요소의 클래스 속성을 가져옵니다

2. 웹페이지의 요소에 CSS 스타일을 지정하여 요소의 모양을 변경합니다.