BOM 객체

몇 가지 다른 개념

ESMAscript

ES3 ES5 ES6

문법을 배웠는데es는es5,es6,es3

을 가리킨다

브라우저에 넣고 실행할 수도 있고 단편기, node에 넣을 수도 있다.js에서 실행

브라우저와 관련이 없음

DOM 문서 객체 모델

js는 환경을 바꾸어 브라우저에 놓고 수조와 관련이 생겼다. js로 브라우저 간의 요소를 조작하고dom

BOM

브라우저 객체 모델을 사용하여 이러한 객체와 객체 사이의 레이어를 설명하고 페이지를 여는 요소를 나타냅니다.

브라우저 페이지

브라우저 가로

저희 윈도우와 관련이 있습니다

window

BOM의 핵심은 윈도 대상

전역 변수는 모두 window의 속성

window 객체 속성

window.innerHegiht window.innerWIth

브라우저 내부 너비로 돌아가기

scrollX、scrollY

우리도 윈도우를 통해서.scrollto 스크롤 바 window 이동.scroll(0,200)

window.frames

navgitor

브라우저에 대한 정보 저장

useragent가 브라우저의 유형을 판단하는 장치

온라인은 온라인 여부를 나타냅니다

screen

현재 화면 표시

window.getComputedStyle

현재 요소의 최종 css 속성 값 가져오기
window.getComputedStyle(요소, 위조)

URL 인코딩/디코딩 방법

decodeURL()

decodeUELComponent()

encodeURL()

encodeURLComponent()

encode URL은 다음 문자를 인코딩하지 않습니다.
ASCII 영숫자

브라우저는 특수 기호를 분별할 수 없습니다. 이때 encodeURLCompnent를 사용하여 URL을 인코딩합니다

alert() prompt() confirm()

localStorage & cookie & session

cookie

현재 도메인 이름 아래에 저장된 데이터로 페이지가 닫히거나 갱신될 때 원숭이가 기록해야 할 정보를 기록한다

js를 사용하여 브라우저에서 직접 설정하거나 http에서 쿠키를 직접 심을 수 있음

모든 요청에 쿠키가 포함됩니다

.

쿠키의 매개 변수를 설정합니다. path: 쿠키가 영향을 미치는 경로를 표시하고 이 경로와 일치해야 이 쿠키를 보냅니다.

expires와 maxAge: 브라우저 쿠키가 만료될 때를 알려 줍니다. maxAge는 쿠키가 얼마나 지나면 만료되는 상대적인 시간입니다.이 두 옵션을 설정하지 않으면session cookie가 생성되고session cookie는transient이며 사용자가 브라우저를 닫으면 지워집니다.일반적으로 세션을 저장하는 세션id.
secure: secure 값이true일 때 쿠키는 HTTP에서 무효입니다. HTTPS에서만 유효합니다. httpOnly: 브라우저에서 스크립트 조작을 허용하지 않습니다.쿠키. 쿠키 변경해.일반적인 상황에서 이것을true로 설정해야 xss공격으로 쿠키를 받지 않습니다.

역할

레코드 사용자 이름

documnet을 수정할 수 있습니다.cookie

쇼핑 카트의 정보를 쿠키에 저장

많은 사이트의 정적 자원은 CDN 주소를 사용하고 현재 사이트 도메인 이름을 사용합니다. 쿠키의 측면에서 보면 이것은 성능에 어떤 영향을 줍니까?

많은 정적 자원들이baidu로 설정되어 있습니다.com 도메인을 바꿀 수 있습니다. js를 도메인으로 바꿀 수 있습니다. 쿠키는 한 도메인에만 적용되고 다른 도메인에는 적용되지 않습니다.

section

타오바오에 로그인한 후 페이지를 갱신하면 방금 로그인한 사용자를 분별할 수 있을까요?여기에는 세션의 저장 상태를 사용해야 돼요.

session을 만들면 관련sessionid는 setCookie를 통해 http 응답 헤더에 추가됩니다.

브라우저가 페이지를 불러올 때 응답 헤더에 set-cookie 필드가 있는 것을 발견하면 이 쿠키를 브라우저가 지정한 도메인 이름 아래에 심는다.

다음에 페이지를 새로 고칠 때 보내는 요청은 이 쿠키를 가지고 갑니다. 서버는 받은 후에 이sessionid로 사용자를 식별합니다.

Local Storage

문자열만 저장

많은 물건을 저장할 수 있고, 5조 또는 10조 물건을 저장할 수 있다

통제되지 않은 곳에 보관할 수 있는 물건

localStorage['name']

대상을 문자산으로 전환해야 저장

Question

window.onload와document.onDomcontentLoaded는 어떤 차이가 있습니까?

window.onload 자원과 의존 자원이 불러올 때,load 이벤트를 터치합니다.

document.DOMContentLoaded는 초기 HTML 문서가 완전히 불러오고 해석이 끝난 후에 DOMContentLoaded 이벤트가 터치되며 스타일시트, 이미지, 하위 프레임의 불러오기를 기다리지 않습니다.

어떻게 그림의 실제 넓이를 얻습니까?

imgeonload가 모든 관련 매개 변수를 완성한 후에 넓이를 높이십시오

img.onload = function(){
    alert(img.width,img.height)
}

어떻게 원소의 실제 폭을 얻습니까?

window.getComputedStyle(document.getElementById("id")).height;
window.getComputedStyle은 현재 요소에 사용되는 css 속성 값을 가져오고 css 스타일 설명을 되돌려줍니다

var style = window.getComputedStyle(" ", " ");
 ：
var dom = document.getElementById("test"),
var style = window.getComputedStyle(dom , ":after");

URL은 어떻게 코딩합니까?왜 인코딩해야 합니까?

URL 인코딩의 원칙은 안전하지 않은 문자(특별한 용도나 의미가 없는 인쇄 가능한 문자)를 사용하여 안전하지 않은 문자를 표시하는 것이다.

브라우저는 특수 기호를 분별할 수 없습니다. 이때 encodeURLCompnent를 사용하여 URL을 인코딩합니다

다음 함수를 보완하여 사용자의 브라우저 형식을 판단합니다.

function isAndroid(){
    return /Android/.test(navigiter.userAgent)
}
function isIphone(){
    return /iPhone/.test(navigiter.userAgent)
}
function isIpad(){
    return /iPad/.test(navigiter.userAgent)
}
function isIOS(){
    return /(ipad)|(iphone)|(mac)/i.test(navigitor.userAgent)
}

쿠키 & 세션 & local Storage는 각각 무엇입니까?

쿠키는 브라우저에 저장된 작은 데이터로 일부 페이지가 닫히거나 갱신된 후에도 저장해야 하는 데이터를 기록한다

session 저장 상태, 사용자가 사용자 이름이나 비밀번호를 서버에 입력할 때 서버 검증 후 사용자의 관련 정보를 기록하는 session을 생성합니다. 이session는 서버 메모리에 저장할 수도 있고 데이터베이스에 저장할 수도 있습니다

localStorage localStorage HTML5 로컬에서 웹storage 특성을 저장하는 API 중 하나로 대량의 데이터(최대 5M)를 브라우저에 저장하는 데 사용되며, 저장된 데이터는 js로 수동으로 지우지 않으면 영원히 효력을 상실하지 않습니다.

JSON.parse() 메서드는 JSON 문자열, 구성 문자열 설명의 JavaScript 값 또는 객체를 분석합니다.결과 대상을 되돌리기 전에 변환할 수 있는 선택적인reviver 함수를 제공할 수 있습니다.

var Storage = (function(){
    return {
        set: function(key,value,expiredSeconds){
            localStorage[key] = JSON.stringify({
            value: value,
            expired: expiredSeconds===undefined?undefined:Date.now()+1000*expireSeconds
            })
        },
    get: function(key){
        if(localStorage[key] === undefined){
            return
        }
        var o = JSON.parse(LocalStorage[key])
        if(o.expired === undefined || Date.now() < o.expired){
            return o.value
        }else{
            delete localStorage[key]                
        }
    }
    }
})()