JavaScript Window - The Browser Object Model
brower object model - 브라우저에 내장되어 있다.
기본적인 객체는 window객체이다.
window는 최상위 객체이다.
종류
widow.screen
window.location: 이동하는데 쓰인다.
- window.location.href 현재 페이지의 href(URL)을 반환
- window.location.hostname웹 호스트의 도메인 이름을 반환
- window.location.pathname현재 페이지의 경로와 파일 이름을 반환
- window.location.protocol 사용된 웹 프로토콜(http: 또는 https:)을 반환
- 윈도우의 기본 포트 HTTP의 경우 80, 보안 웹인 HTTPS의 경우 443
- window.location.assign()새 문서를 로드합니다
window.history: 객체에는 브라우저의 기록
window.navigator: 객체에는 방문자의 브라우저에 대한 정보가 포함
💡들어오는 모든 데이터는 비신뢰 데이터이다.
그러면 뭘 해야하냐? 한발 더 어렵게 하기위해 보안을 한다.
⚠️ 경고
Navigator 객체의 정보는 종종 오해를 불러일으킨다.
Navigator 객체를 사용하여 브라우저 버전을 감지하면 안 되는 이유:
서로 다른 브라우저가 동일한 이름을 사용할 수 있음브라우저 소유자가 Navigator 데이터를 변경할 수 있음일부 브라우저는 사이트 테스트를 우회하기 위해 자신을 잘못 식별함브라우저는 출시 이후 등장한 새로운 운영 체제를 정확하게 보고할 수 없음
window.timming: 시간 간격으로 실행될 수 있다.
- setTimeout(function, milliseconds)
지정된 밀리초 동안 기다린 후 함수를 실행합니다. - setInterval(function, milliseconds)
setTimeout()과 동일하지만, 함수 실행을 계속해서 반복합니다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Timing</h2>
<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p>
<button id ="myBtn"> Try it</button>
<button onclick="setTimeout(myFunction, 3000);">Try it</button>
<script>
console.log(1);
document.getElementById("myBtn").addEventListener('click',a);
function myFunction() {
alert('Hello');
}
function a() {
// myFunction은 콜백함수
setImeout(myFunction, 3000);
}
</script>
</body>
</html>
사용자가 읽는 순서와 시스템이 읽는 순서가 다르다.
자바스크립트 쿠키 🍪
쿠키: 사용자의 컴퓨터에 작은 텍스트 파일로 저장되는 데이터 <- 클라이언트 쪽에 저장되는 정보
웹 서버가 웹 페이지를 브라우저로 전송하면 연결이 끊어지고 서버는 사용자에 대한 모든 것을 잊어버린다.
jwt는 왠만해서는 안사용하는게 좋다. 역사를 알면서 공부하면 좋다..
쿠키는 최소한의 정보를 담는다.
HTML 요소 찾기
| Method | 설명 |
| document.getElementById(id) | 요소의 ID를 이용해 요소를 찾음 |
| document.getElementsByTagName(name) | 태그 이름을 이용해 요소들을 찾음 |
| document.getElementsByClassName(name) | 클래스 이름을 이용해 요소들을 찾음 |
HTML 요소 변경
| Property / Method | 설명 |
| element.innerHTML = new html content | 요소의 내부 HTML을 변경 |
| element.attribute = new value | 요소의 속성 값을 변경 |
| element.style.property = new style | 요소의 스타일을 변경 |
| element.setAttribute(attribute, value) | 요소의 속성 값을 변경하는 메서드 |
요소 추가 및 삭제
| Method | 설명 |
| document.createElement(element) | 새로운 HTML 요소를 생성 |
| document.removeChild(element) | HTML 요소를 삭제 |
| document.appendChild(element) | HTML 요소를 추 |
| document.replaceChild(new, old) | 기존 HTML 요소를 새로운 요소로 변경 |
| document.write(text) | HTML 문서에 내용을 출력 |
이벤트 핸들러 추가
| Method | 설명 |
| document.getElementById(id).onclick = function(){code} | onclick 이벤트에 핸들러 추가 |
document.getElemedentBy(id) => 여기까지 element 객체
그외 다양한 속성이있다.
졸립다 😪
JavaScript HTML DOM 이벤트
https://www.w3schools.com/jsref/dom_obj_event.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
이벤트 종류 참고하기
이벤트 핸들러가 되는 애들을 콜백함수라고 한다.
화살표 함수
const x = (x, y) => x * y;
화살표 함수는 this를 조심해야한다.
let obj={
myVar: 'foo',
myMeth: function jes(){ //obj가 메모리에 만들어질 때 같이 만들어진다
console.log(this.myVar); //수행 컨텍스트가 obj
}
}
obj.myMeth(); // foo
윈도우에 obj객체가 생긴다. -> myVar가 foo라는 메서드가 생기고 -< function 객체가 생긴다.
function의 주소를 0x2000가 생겨 myMeth가 그 주소를 갖는다 .
this는 자기를 호출하는 시점의 window이다.
for of -> objcect (x)
문자열도 반복가능하다.
for in -> object(o)
map은 생성자로 주어진 function이다. funtcion은 new를 이용하여 생성자 함수를 만든다.
자바스크립트 콜백
내가 어려워하는 부분 중 하나.. 뭐 다 어렵긴하지만 🥲
콜백 함수
다른 함수에 인수로 전달되는 함수이다.
즉! 함수가 다른 홤수를 호출할 수 있다. 콜백함수는 다른 함수가 완료 후에 실행될 수 있다.
비동기 함수
코드 실행이 완료될때 까지 기다리지 않고, 다른 작업을 동시에 처리할 수 있도록 만들어진 함수
'💡 URECA' 카테고리의 다른 글
| [URECA] DAY08 | TS(2) (0) | 2025.02.05 |
|---|---|
| [Day 07] JS(4), TS(1) (1) | 2025.02.04 |
| [URECA] DAY 5 | JavaScript(2) (0) | 2025.01.24 |
| [URECA] DAY 4 | 부트스트랩(2), JavaScript(1) (0) | 2025.01.23 |
| [URECA] DAY 3 | CSS(2), 부트스트랩(1) (3) | 2025.01.22 |
