IT 관련/개발(Codecademy)

Javascript(생활코딩) 브라우저 제어하기

Entkommen 2023. 1. 5.

728x90

JavaScript(브라우저)

BOM DOM window

window 객체(전역객체)

alert(’ ‘), confirm(’ ‘), prompt(’ ‘)

location 객체

 location.host

location.port

location.pathway

location.search

location.hash

location.href

location.reload()

새로고침 효과의 메소드인데 , location.href=location.href 도 같은 뜻임

location.href = “url” 로 하면 해당 url 로 로드됨.

등의 속성와 메소드를 가진다.

Navigator 객체

크로스 브라우징 : 각각의 브라우저의 동작방법은 W3C , ECMA 표준화기구에서 정의한 스펙에 따라 브라우저를 만든다. 브라우저마다 다르게 동작하는 이슈를 크로스 브라우징 이슈.

Nescape 와 IE의 경쟁. 브라우저 전쟁이 일어남. 기능경쟁은 좋지만, 무질서하게 일어났다.

다른 용어를 사용함에 불만이 고조되어 웹 표준이 만들어짐 . 그 중심에 Navigator 객체가 있다. 브라우저의 정보를 불러올 수 있기 때문이다.

console.dir(navigator);
- 다음과 같다.
  1. appCodeName: "Mozilla"
  2. appName: "Netscape"
  3. appVersion: "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36"
  4. bluetooth: Bluetooth {}
  5. clipboard: Clipboard {}
  6. connection: NetworkInformation {onchange: null, effectiveType: '4g', rtt: 100, downlink: 5.05, saveData: false}
  7. cookieEnabled: true
  8. credentials: CredentialsContainer {}
  9. deviceMemory: 8
  10. doNotTrack: "1"
  11. geolocation: Geolocation {}
  12. hardwareConcurrency: 6
  13. hid: HID {onconnect: null, ondisconnect: null}
  14. ink: Ink {}
  15. keyboard: Keyboard {}
  16. language: "ko-KR"
  17. languages: (4) ['ko-KR', 'ko', 'en-US', 'en']
  18. locks: LockManager {}
  19. managed: NavigatorManagedData {onmanagedconfigurationchange: null}
  20. maxTouchPoints: 0
  21. mediaCapabilities: MediaCapabilities {}
  22. mediaDevices: MediaDevices {ondevicechange: null}
  23. mediaSession: MediaSession {metadata: null, playbackState: 'none'}
  24. mimeTypes: MimeTypeArray {0: MimeType, 1: MimeType, application/pdf: MimeType, text/pdf: MimeType, length: 2}
  25. onLine: true
  26. pdfViewerEnabled: true
  27. permissions: Permissions {}
  28. platform: "Win32"
  29. plugins: PluginArray {0: Plugin, 1: Plugin, 2: Plugin, 3: Plugin, 4: Plugin, PDF Viewer: Plugin, Chrome PDF Viewer: Plugin, Chromium PDF Viewer: Plugin, Microsoft Edge PDF Viewer: Plugin, WebKit built-in PDF: Plugin, …}
  30. presentation: Presentation {defaultRequest: null, receiver: null}
  31. product: "Gecko"
  32. productSub: "20030107"
  33. scheduling: Scheduling {}
  34. serial: Serial {onconnect: null, ondisconnect: null}
  35. serviceWorker: ServiceWorkerContainer {controller: null, ready: Promise, oncontrollerchange: null, onmessage: null, onmessageerror: null}
  36. storage: StorageManager {}
  37. usb: USB {onconnect: null, ondisconnect: null}
  38. userActivation: UserActivation {hasBeenActive: true, isActive: false}
  39. userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36"
  40. userAgentData: NavigatorUAData {brands: Array(3), mobile: false, platform: 'Windows'}
  41. vendor: "Google Inc."
  42. vendorSub: ""
  43. virtualKeyboard: VirtualKeyboard {boundingRect: DOMRect, overlaysContent: false, ongeometrychange: null}
  44. wakeLock: WakeLock {}
  45. webdriver: false
  46. webkitPersistentStorage: DeprecatedStorageQuota {}
  47. webkitTemporaryStorage: DeprecatedStorageQuota {}
  48. windowControlsOverlay: WindowControlsOverlay {visible: false, ongeometrychange: null}
  49. xr: XRSystem {ondevicechange: null}
  50. [[Prototype]]: Navigator
console.log로도 할 수 있다.
하면 네비게이터 객체 안의 정보를 나열할 수 있다.

보통 appName은 Netscape를 거의 가지므로 변별력은 없음

appVersion에서 브라우저 이름이 적혀있고 버전이 적혀있음

OS도 나오고, Webkit이라고 레이아웃 엔진도 나옴

userAgent는 브라우저를 달리 이르는 말

WB가 WS에 전달을 요청할 때, WB가 어떤 브라우저인지 담긴 정보 ,

브라우저에 따라 appVersion과 userAgent 정보가 다를 수 있다. 다만 userAgent는 WS(서버)에 실제 전달되는 것

platform 브라우저가 동작하고 있는 운영체제

기능테스트

실행하고자 하는 브라우저가 어떤 기능을 가지고 있는지 확인하는 것

i.e ) Object.keys는 최신 기능이므로 동작하지 않는 브라우저가 있을 수 있다.

그런 경우에 이런 메소드가 존재하는지 체크하는 방법.

없다면 같은 이름의 메소드를 직접 만들어 주는 것 .

if(!Object.keys) {

Object.keys = (function ()

‘use strict’;

var hasOwnProperty = Object.prototype.hasOwnProperty,

}

다만 이것도 브라우저마다 다르게 동작하는 부분을 얘가 보정할 수는 없다. ?

크로스 브라우징 이슈가 있다는 정도만 .

창제어

Window 객체는 전역객체이고, Window라고 하는 가장 큰 객체를 제어하는 것.

window open 이라고 하는 메소드, window close 라고하는 메소드가 있다.

input 에서 onclick=”함수이름” 으로 정해서 아래 js파일 혹은 script를 호출한다.

_self는 같은 창 내에서 해당 페이지를 로드

_blank는 새로운 창에서 해당 페이지를 로드

‘ot’는 임의로 지정한 텍스트인데, 이것은 그 페이지가 ot라는 이름을 가진 페이지가 되는데 해당 창에 갱신만 될 뿐이다. ? open을 재실행 했을 때 동일한 이름의 문서가있다면 그 창으로 로드가 된다고 한다. → 직접해보면 클릭 할 때마다 그 창으로 연결이 됨 (새로 생성하지는 않음)

세번 째 인자는 새 창의 모양과 관련된 속성이 온다.

window.open() 예시

function open1(){
            window.open('demo2.html');
        }

        function open2(){
            window.open('demo2.html', '_self');
        }

        function open3(){
            window.open('demo2.html', '_blank');
        }

        function open4(){
            window.open('demo2.html', 'ot');
        }

        function open5(){
            window.open('demo2.html', '_blank', 'width=200 height=200, resizable=no');
        }

새로운 창과 상호작용

<!DOCTYPE html>
<html>
<body>
    <input type="button" value="open" onclick="winopen();" />
    <input type="text" onkeypress="winmessage(this.value)" />
    <input type="button" value="close" onclick="winclose()" />
    
    <script>
    function winopen(){
        win = window.open('demo2.html', 'ot', 'width=300px, height=500px');
    }
    function winmessage(msg){
        win.document.getElementById('message').innerText=msg;
    }
    function winclose(){
        win.close();
    }
    </script>
</body>
</html>

보안

사용자의 인터랙션 없이 창을 열려고 하면 차단된다. 명시적인 클릭 등과 같은 인터랙션이 있으면 자동 차단이 되지 않음

팝업 차단. 사용자의 인터랙션 없이 새 창이 열려고하면 기본 브라우저에서는 차단을 하게됨 - 사용성 저해하기 때문에 사용자의 허가가 있어야 팝업이 뜰 수 있게 함.

보안>

두 개의 웹페이지(위의 예시) 가 같은 domain이면 같은 주인이 만든 것.

만약 도메인 즉 만든사람이 다르다면 , 악의적인 조작을 타인이 가할 수 있기 때문에

막아놓는다.

제어 대상을 찾기

제어 대상을 찾고 그 다음에 제어가 이루어진다. 이 두가지 과정으로 작업이 이루어진다.

먼저 제어 대상을 찾는 법이다.

문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다.

document.getElementsByTagName

여러개의 엘리먼트를 태그의 이름을 통해 가져온다.

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    var lis = document.getElementsByTagName('li');
    for(var i=0; i < lis.length; i++){
        lis[i].style.color='red';   
    }
</script>
</body>
</html>

강조 대상을 좁혀서 찾기

다시 , 위의 경우에는 모든 il가 색깔이 바뀌게 된다. 만약 아래처럼 ul 하위에 있는 li만 색깔이 바뀌게 하고 싶다면 어떻게 할까? 아래처럼 ul을 호출하여 [0]을 붙여서 쓰면 된다.

대괄호를 붙이는 것이 이해가 안되었었는데, 이리저리 출력을 해보면 HTMLcollection이라는 것이 ul만 넣을 때는 출력이 된다.

이 명령어 자체는 문서 내의 모든 ul들을 찾아 주는 것이고, 그 중에서 우리는 첫 번째 오는 ul을 찾기 위해 하는 것이니까 [0]을 붙이는 것으로 이해했다.

실제로 [0]을 붙인 것과 아닌것을 출력해보면 [0]을 붙이면 우리가 아는 li의 목록이 나오고, 아닌 것을 출력하면 HTMLcollection이라고 하는 것이 나온다.

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
<script>
    var ul = document.getElementsByTagName('ul')[0]; 
    console.log(document.getElementsByTagName('ul'))
    var lis = ul.getElementsByTagName('li'); // 다시 위의 ul이라는 객체에서 li를 뽑아내서 lis에 할당
    for(var i=0; lis.length; i++){
        lis[i].style.color='red';   
    }
</script>
</body>
</html>

Class로 접근하기

js에선 ClassName으로 접근, class는 다른 뜻이 있기 때문

document.getElementsByClassName

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li class="active">CSS</li>
    <li class="active">JavaScript</li>
</ul>
<script>
    var lis = document.getElementsByClassName('active');
    for(var i=0; i < lis.length; i++){
        lis[i].style.color='red';   
    }
</script>
</body>

ID로 접근하기

차이점은 이 명령은 getElement로 단수라는 점

성능면에서 가장 우수하다.

id는 유일무이한 것.

document.getElementById

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li id="active">CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    var li = document.getElementById('active');
    li.style.color='red';
</script>
</body>
</html>

Queryslector

선택자를 인자로 받아서 엘리멘트를 디자인함

document.querySelctor()

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<ol>
    <li>HTML</li>
    <li class="active">CSS</li>
    <li>JavaScript</li>
</ol>
 
<script>
    var li = document.querySelector('li'); //먼저나타나는 하나만(즉 첫번쨰 HTML 글자 하나만)
    li.style.color='red';
    var li = document.querySelector('.active');
    li.style.color='blue';
</script>
</body>
</html>

document.querySelctorAll()

이것은 for 문을 통해 꺼내서 바꿀 수 있다.

모든 ~에 해당하는 요소들이 바뀐다.

JavaScript(브라우저)

BOM DOM window

window 객체(전역객체)

alert(’ ‘), confirm(’ ‘), prompt(’ ‘)

location 객체

 location.host

location.port

location.pathway

location.search

location.hash

location.href

location.reload()

새로고침 효과의 메소드인데 , location.href=location.href 도 같은 뜻임

location.href = “url” 로 하면 해당 url 로 로드됨.

등의 속성와 메소드를 가진다.

Navigator 객체

Nescape 와 IE의 경쟁. 브라우저 전쟁이 일어남. 기능경쟁은 좋지만, 무질서하게 일어났다.

다른 용어를 사용함에 불만이 고조되어 웹 표준이 만들어짐 . 그 중심에 Navigator 객체가 있다. 브라우저의 정보를 불러올 수 있기 때문이다.

console.dir(navigator);
- 다음과 같다.
  1. appCodeName: "Mozilla"
  2. appName: "Netscape"
  3. appVersion: "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36"
  4. bluetooth: Bluetooth {}
  5. clipboard: Clipboard {}
  6. connection: NetworkInformation {onchange: null, effectiveType: '4g', rtt: 100, downlink: 5.05, saveData: false}
  7. cookieEnabled: true
  8. credentials: CredentialsContainer {}
  9. deviceMemory: 8
  10. doNotTrack: "1"
  11. geolocation: Geolocation {}
  12. hardwareConcurrency: 6
  13. hid: HID {onconnect: null, ondisconnect: null}
  14. ink: Ink {}
  15. keyboard: Keyboard {}
  16. language: "ko-KR"
  17. languages: (4) ['ko-KR', 'ko', 'en-US', 'en']
  18. locks: LockManager {}
  19. managed: NavigatorManagedData {onmanagedconfigurationchange: null}
  20. maxTouchPoints: 0
  21. mediaCapabilities: MediaCapabilities {}
  22. mediaDevices: MediaDevices {ondevicechange: null}
  23. mediaSession: MediaSession {metadata: null, playbackState: 'none'}
  24. mimeTypes: MimeTypeArray {0: MimeType, 1: MimeType, application/pdf: MimeType, text/pdf: MimeType, length: 2}
  25. onLine: true
  26. pdfViewerEnabled: true
  27. permissions: Permissions {}
  28. platform: "Win32"
  29. plugins: PluginArray {0: Plugin, 1: Plugin, 2: Plugin, 3: Plugin, 4: Plugin, PDF Viewer: Plugin, Chrome PDF Viewer: Plugin, Chromium PDF Viewer: Plugin, Microsoft Edge PDF Viewer: Plugin, WebKit built-in PDF: Plugin, …}
  30. presentation: Presentation {defaultRequest: null, receiver: null}
  31. product: "Gecko"
  32. productSub: "20030107"
  33. scheduling: Scheduling {}
  34. serial: Serial {onconnect: null, ondisconnect: null}
  35. serviceWorker: ServiceWorkerContainer {controller: null, ready: Promise, oncontrollerchange: null, onmessage: null, onmessageerror: null}
  36. storage: StorageManager {}
  37. usb: USB {onconnect: null, ondisconnect: null}
  38. userActivation: UserActivation {hasBeenActive: true, isActive: false}
  39. userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36"
  40. userAgentData: NavigatorUAData {brands: Array(3), mobile: false, platform: 'Windows'}
  41. vendor: "Google Inc."
  42. vendorSub: ""
  43. virtualKeyboard: VirtualKeyboard {boundingRect: DOMRect, overlaysContent: false, ongeometrychange: null}
  44. wakeLock: WakeLock {}
  45. webdriver: false
  46. webkitPersistentStorage: DeprecatedStorageQuota {}
  47. webkitTemporaryStorage: DeprecatedStorageQuota {}
  48. windowControlsOverlay: WindowControlsOverlay {visible: false, ongeometrychange: null}
  49. xr: XRSystem {ondevicechange: null}
  50. [[Prototype]]: Navigator
console.log로도 할 수 있다.
하면 네비게이터 객체 안의 정보를 나열할 수 있다.

보통 appName은 Netscape를 거의 가지므로 변별력은 없음

appVersion에서 브라우저 이름이 적혀있고 버전이 적혀있음

OS도 나오고, Webkit이라고 레이아웃 엔진도 나옴

userAgent는 브라우저를 달리 이르는 말

WB가 WS에 전달을 요청할 때, WB가 어떤 브라우저인지 담긴 정보 ,

브라우저에 따라 appVersion과 userAgent 정보가 다를 수 있다. 다만 userAgent는 WS(서버)에 실제 전달되는 것

platform 브라우저가 동작하고 있는 운영체제

기능테스트

실행하고자 하는 브라우저가 어떤 기능을 가지고 있는지 확인하는 것

i.e ) Object.keys는 최신 기능이므로 동작하지 않는 브라우저가 있을 수 있다.

그런 경우에 이런 메소드가 존재하는지 체크하는 방법.

없다면 같은 이름의 메소드를 직접 만들어 주는 것 .

if(!Object.keys) {

Object.keys = (function ()

‘use strict’;

var hasOwnProperty = Object.prototype.hasOwnProperty,

}

다만 이것도 브라우저마다 다르게 동작하는 부분을 얘가 보정할 수는 없다. ?

크로스 브라우징 이슈가 있다는 정도만 .

창제어

Window 객체는 전역객체이고, Window라고 하는 가장 큰 객체를 제어하는 것.

window open 이라고 하는 메소드, window close 라고하는 메소드가 있다.

input 에서 onclick=”함수이름” 으로 정해서 아래 js파일 혹은 script를 호출한다.

_self는 같은 창 내에서 해당 페이지를 로드

_blank는 새로운 창에서 해당 페이지를 로드

세번 째 인자는 새 창의 모양과 관련된 속성이 온다.

window.open() 예시

function open1(){
            window.open('demo2.html');
        }

        function open2(){
            window.open('demo2.html', '_self');
        }

        function open3(){
            window.open('demo2.html', '_blank');
        }

        function open4(){
            window.open('demo2.html', 'ot');
        }

        function open5(){
            window.open('demo2.html', '_blank', 'width=200 height=200, resizable=no');
        }

새로운 창과 상호작용

<!DOCTYPE html>
<html>
<body>
    <input type="button" value="open" onclick="winopen();" />
    <input type="text" onkeypress="winmessage(this.value)" />
    <input type="button" value="close" onclick="winclose()" />
    
    <script>
    function winopen(){
        win = window.open('demo2.html', 'ot', 'width=300px, height=500px');
    }
    function winmessage(msg){
        win.document.getElementById('message').innerText=msg;
    }
    function winclose(){
        win.close();
    }
    </script>
</body>
</html>

보안

사용자의 인터랙션 없이 창을 열려고 하면 차단된다. 명시적인 클릭 등과 같은 인터랙션이 있으면 자동 차단이 되지 않음

보안>

두 개의 웹페이지(위의 예시) 가 같은 domain이면 같은 주인이 만든 것.

만약 도메인 즉 만든사람이 다르다면 , 악의적인 조작을 타인이 가할 수 있기 때문에

막아놓는다.

제어 대상을 찾기

제어 대상을 찾고 그 다음에 제어가 이루어진다. 이 두가지 과정으로 작업이 이루어진다.

먼저 제어 대상을 찾는 법이다.

문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다.

document.getElementsByTagName

여러개의 엘리먼트를 태그의 이름을 통해 가져온다.

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    var lis = document.getElementsByTagName('li');
    for(var i=0; i < lis.length; i++){
        lis[i].style.color='red';   
    }
</script>
</body>
</html>

강조 대상을 좁혀서 찾기

대괄호를 붙이는 것이 이해가 안되었었는데, 이리저리 출력을 해보면 HTMLcollection이라는 것이 ul만 넣을 때는 출력이 된다.

실제로 [0]을 붙인 것과 아닌것을 출력해보면 [0]을 붙이면 우리가 아는 li의 목록이 나오고, 아닌 것을 출력하면 HTMLcollection이라고 하는 것이 나온다.

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
<script>
    var ul = document.getElementsByTagName('ul')[0]; 
    console.log(document.getElementsByTagName('ul'))
    var lis = ul.getElementsByTagName('li'); // 다시 위의 ul이라는 객체에서 li를 뽑아내서 lis에 할당
    for(var i=0; lis.length; i++){
        lis[i].style.color='red';   
    }
</script>
</body>
</html>

Class로 접근하기

js에선 ClassName으로 접근, class는 다른 뜻이 있기 때문

document.getElementsByClassName

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li class="active">CSS</li>
    <li class="active">JavaScript</li>
</ul>
<script>
    var lis = document.getElementsByClassName('active');
    for(var i=0; i < lis.length; i++){
        lis[i].style.color='red';   
    }
</script>
</body>

ID로 접근하기

차이점은 이 명령은 getElement로 단수라는 점

성능면에서 가장 우수하다.

id는 유일무이한 것.

document.getElementById

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li id="active">CSS</li>
    <li>JavaScript</li>
</ul>
<script>
    var li = document.getElementById('active');
    li.style.color='red';
</script>
</body>
</html>

Queryslector

선택자를 인자로 받아서 엘리멘트를 디자인함

document.querySelctor()

<!DOCTYPE html>
<html>
<body>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<ol>
    <li>HTML</li>
    <li class="active">CSS</li>
    <li>JavaScript</li>
</ol>
 
<script>
    var li = document.querySelector('li'); //먼저나타나는 하나만(즉 첫번쨰 HTML 글자 하나만)
    li.style.color='red';
    var li = document.querySelector('.active');
    li.style.color='blue';
</script>
</body>
</html>

document.querySelctorAll()

이것은 for 문을 통해 꺼내서 바꿀 수 있다.

모든 ~에 해당하는 요소들이 바뀐다.

출처 : 생활코딩

728x90

저작자표시

'IT 관련 > 개발(Codecademy)' 카테고리의 다른 글

Javascript(callback function과 higher order function) (1)	2023.01.05
Javascript(반복 메소드, iteration method) 어레이 메소드 .forEach() .map() 등등 (0)	2023.01.05
자바스크립트(object 심화) this 키워드 , 오브젝트 빌트인 메소드 등 (1)	2023.01.04
javascript error : SyntaxError: Invalid left-hand side in assignment . 할당 에러 발생시 해결법 (2)	2023.01.04
Javascript 자바스크립트 Object / 오브젝트 정리 / for in 구문 오브젝트 정리 (3)	2023.01.03

현재글Javascript(생활코딩) 브라우저 제어하기

모든 것을 공부 및 기록 하는 곳

대명에너지, 넷플릭스 추천, 성광벤드, 모아데이타, CSS, PN풍년, 코리아에스이, 상신이디피, 독일어 a2, ADN, 에스티큐브, 현대에너지솔루션, 독일어 독학, 추세추종, 주식공부, 넷플릭스 드라마 추천, HPSP, 키르기스스탄, 한독커플, 매매일지,

Today :
Yesterday :

Escape

Javascript(생활코딩) 브라우저 제어하기

JavaScript(브라우저)

BOM DOM window

window 객체(전역객체)

alert(’ ‘), confirm(’ ‘), prompt(’ ‘)

location 객체

Navigator 객체

기능테스트

창제어

새로운 창과 상호작용

보안

제어 대상을 찾기

Class로 접근하기

ID로 접근하기

JavaScript(브라우저)

location 객체

Navigator 객체

기능테스트

창제어

새로운 창과 상호작용

보안

제어 대상을 찾기

Class로 접근하기

ID로 접근하기

'IT 관련 > 개발(Codecademy)' 카테고리의 다른 글

'IT 관련/개발(Codecademy)'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Javascript(생활코딩) 브라우저 제어하기

JavaScript(브라우저)

BOM DOM window

window 객체(전역객체)

alert(’ ‘), confirm(’ ‘), prompt(’ ‘)

location 객체

Navigator 객체

기능테스트

창제어

새로운 창과 상호작용

보안

제어 대상을 찾기

Class로 접근하기

ID로 접근하기

JavaScript(브라우저)

location 객체

Navigator 객체

기능테스트

창제어

새로운 창과 상호작용

보안

제어 대상을 찾기

Class로 접근하기

ID로 접근하기

'IT 관련 > 개발(Codecademy)' 카테고리의 다른 글

'IT 관련/개발(Codecademy)'의 다른글

관련글

티스토리툴바