찾다
웹 프론트엔드JS 튜토리얼프런트 엔드 필드에서 Window 개체의 역할

프런트 엔드 필드에서 Window 개체의 역할

Nov 26, 2019 pm 05:24 PM
javascriptwindow프런트 엔드

### ## ## ## ## ## ## ## ## ## ## ## #####스페셜 창#🎜🎜 ## 🎜🎜#

창에 관해 말하면 다음과 같이 웹 페이지에서 매우 일반적입니다.

window.onload=function(){
//执行函数体
}
프런트 엔드 필드에서 Window 개체의 역할이 코드는 웹 페이지 콘텐츠가 로드될 때 수행할 작업을 의미합니다. js 분야에서 창 개체는 브라우저 창에 액세스하는 데 사용되는 인터페이스이자 전역 개체입니다. [관련 강좌 추천 :

JavaScript 동영상 튜토리얼

]이 때문에 전역 범위에 선언된 모든 변수와 함수는 윈도우 객체의 속성과 메서드가 됩니다. 예:

var age = 29;
function sayAge(){
    alert(this.age);
}
alert(window.age); //29
sayAge();         //29
window.sayAge();  //29

그러나 두 변수는 완전히 동일하지 않습니다. 전역 변수는 삭제를 통해 삭제할 수 없지만 창에 직접 정의된 속성은 가능합니다.

역사적 유산

초기 웹 페이지에서는 더 많은 창과 프레임을 사용하고 중첩된 디스플레이가 표시됩니다. 웹페이지를 동일한 창에 띄우고 알림, 확인, 안내 등 다양한 팝업창을 띄워 사용자가 정보를 입력하거나 확인할 수 있게 되었습니다. 찾기 어렵기 때문에 여기서는 다루지 않겠습니다.

위치 객체

기본 속성

#🎜 🎜#location은 현재 창에 로드된 문서에 대한 정보와 탐색 기능을 제공하는 가장 유용한 BOM 개체 중 하나입니다. 주요 용도는 URL과 관련됩니다:

 ●해시: URL에서 # 기호 뒤의 문자를 반환하고, 그렇지 않은 경우 빈 값을 반환합니다.

 ● host/hostname: 서버 이름 또는 포트 번호를 반환합니다.  ● href: 전체 URL 반환

 ● port: 지정된 포트 번호 반환

 ● protocol: 사용된 프로토콜 반환 #🎜 🎜# ●검색: 해당 URL의 쿼리 문자열, 즉 물음표의 처음부터 끝까지를 모두 반환합니다.

위치 연산

#🎜🎜 #

location 전달 가능 브라우저의 위치를 ​​변경하는 방법에는 여러 가지가 있습니다. 가장 일반적으로 사용되는 방법은 다음과 같은 할당() 메서드입니다.

location.assign("http://www.baidu.com");

이렇게 하면 새 URL이 열립니다. 즉시 검색 기록에 기록을 추가합니다. 다음 두 줄에 해당하는 코드:

window.location = "http://www.baidu.com";
location.href = "http://www.baidu.com";

가장 일반적인 것은 location.href입니다.

물론 다른 속성을 수정하면 현재 로드된 페이지도 변경될 수 있습니다. 어떤 방식으로든 URL을 수정한 후에는 사용자가 뒤로 버튼을 클릭하여 이전 페이지로 이동할 수 있습니다. , 그러나 때때로 이 작업이 발생하는 것을 원하지 않는 경우에는 replacement() 메서드를 사용할 수 있습니다. 다음과 같습니다:

location.replace("http://www.baidu.com");

탐색할 URL인 하나의 매개변수만 받습니다. 레코드가 생성되지 않으며 사용자는 이전 페이지로 돌아갈 수 없습니다.

위치와 관련된 또 다른 방법은 reload()입니다. 이는 현재 페이지를 다시 로드하는 것과 똑같은 기능을 하지만 여기서는 매개변수 없이 그냥 다시 로드하는 경우에는 페이지가 서버에서 강제로 다시 로드하는 경우 다음과 같은 매개변수를 전달해야 합니다. #

history는 각 브라우저 창과 탭 페이지를 탐색하는 사용자의 기록을 유지합니다. 보안상의 이유로 개발자는 일반적으로 사용자가 어떤 웹 페이지를 탐색했는지 알 수 없지만 앞으로 및 뒤로 기능을 구현하는 방법은 여전히 ​​있습니다. . 예:

location.reload(true);

매개변수는 숫자일 뿐만 아니라 문자열이기도 합니다. 브라우저는 앞으로 또는 뒤로 문자열을 포함하는 기록의 첫 번째 위치로 이동합니다. 예를 들어

history.go(-1);
history.go(1);

또한 앞으로 또는 뒤로 이동하는 더 직접적인 메서드인 back() 및 Forward()가 있습니다.

또한 기록에는 기록 레코드 수를 저장하는 길이 속성이 있어 사용자가 처음부터 페이지를 열었는지 확인하려는 경우 사용할 수 있습니다.

history.go("baidu.com");

히스토리 객체는 특별히 일반적으로 사용되지는 않지만 일부 특수 목적 설계에서는 문제 해결을 위해 여전히 요청해야 합니다.

Summary

모바일 인터넷의 물결 속에서 윈도우 개체의 상태는 더 이상 중요하지 않습니다. PC의 경우에는 더 많은 기능과 감지가 필요하며 더 많은 상호 작용이 필요하며 다른 측면은 더 풍부한 기능을 갖춘 사용자 정의 코드로 구현됩니다. 에도 불구하고, window 객체는 그렇게 간단할 뿐만 아니라 중요한 navigator 객체도 있는데 막상 해보면 내용이 너무 많아서 에서 공유하겠습니다. 나중에 별도의 기사.

이 기사는

js 튜토리얼

칼럼에서 가져온 것입니다. 학습을 환영합니다!

위 내용은 프런트 엔드 필드에서 Window 개체의 역할의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 ideazhao에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
JavaScript 엔진 : 구현 비교JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScript브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.