1. HTML에서 자바스크립트 로드하기
1-1. inline 방식
- 태그에 직접 자바스크립트를 기술하는 방식이다.
- 장점 : 태그에 연관된 스크립트가 분명하게 드러난다.
- 단점 : 정보와 제어가 섞여있기 때문에 정보로서의 가치가 떨어진다.
<!-- onclick : 클릭 했을 때 -->
<input type="button" value="Hello World"
onclick="alert('Hello World')"/>1-2. script 방식
<script>태그를 만들어서 여기에 자바스크립트 코드를 삽입하는 방식- html 태그와 js코드를 분리할 수 있다.
- inline 방식에 비해 유지보수가 더 좋다.
1-3. *.js로 분류
window.onload = function(){
let hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('hello world');
});
} <script src="script.js"></script>
<body>
<input type="button" id="hw" value="Hello World2"/>
</body>1-4. window.onload = function(){}
- 웹 브라우저의 모든 구성요소에 대한 로드가 끝났을 떄 브라우저에 의해서 호출되는 함수
2. Object Model
- 웹 브라우저의 구성요소들은 하나하나가 객체화 되어 있다.
- 자바스크립트로 이 객체를 제어해서 웹 브라우저를 제어할 수 있게 된다.
- 이 객체들은 서로 계층적인 관계로 구조화 되어 있다.
- BOM, DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류
2-1. window 객체
- window 객체는 DOM을 포함한 브라우저의 창을 나타낸다.
- 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다.
2-2. DOM
- Document Object Model(Document를 관장하는 모델)
2-3. BOM
- Browser Object Model
- 웹 브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다.
- BOM은 전역객체인 Window의 프로퍼티와 메서드들을 제공하는 수단이다.
3. Location 객체
- 문서의 주소와 관련된 객체로 Window 객체의 프로퍼티이다.
- 이 객체를 이용해서 Window의 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다.
<script>
console.log(location);
console.log(location.toString());
console.log(location.href)
</script>4. Window
- 브라우저의 창을 제어하는 것과 관련된 open() 함수가 window 객체에 직접적으로 포함되어 있다.
<h1>window객체</h1>
<h3>open 메소드 확인</h3>
<div>
<a href="#" onclick="open1(); return false;">새창열기</a>
<br/>
<a href="#" onclick="open2(); return false;">팝업 창 열기</a>
<br/>
<a href="#" onclick="open3('https://www.naver.com'); return false;">팝업 창 열기2</a>
</div>
<script>
function open1(){
window.open('open.html')
}
function open2(){
window.open('open.html', '', 'width=300, height=500, scrollbars=no');
}
function open3(url){
window.open(url, '', 'width=1100, height=2200, scrollbars=no');
}
</script>5. HTML 문서 내용을 제어
- tag
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<script>
// for문, 모든 lis 태그 글자를 tomato색으로 바꾸기
let ul = document.getElementsByTagName('ul')[0];
let lis = ul.getElementsByTagName('li');
for( let i=0; i<lis.length; i++ ){
lis[i].style.color = 'tomato';
}
</script>- class
<ul>
<li>HTML</li>
<li class="active">CSS</li>
<li class="active">JavaScript</li>
</ul>
<script>
let lis = document.getElementsByClassName('active');
for( let i=0; i<lis.length; i++ ){
lis[i].style.color = "tomato";
}
</script>- id
<ul>
<li>HTML</li>
<li id="active">CSS</li>
<li>JavaScript</li>
</ul>
<script>
let li = document.getElementById('active');
li.style.color = "tomato";
</script>6. 이벤트
- Event는 어떤 사건을 의미.
- 브라우저에서의 사건이란 사용자가 클릭을 했을 때, 스크롤을 했을 때, 필드의 내용을 바꾸었을 때와 같은 것을 의미한다.
6-1. inline 방식
<body onload="insertQuestion()">
<h1 id="question"></h1>
<script>
function insertQuestion(){
let q = prompt("사칙연산의 수식을 입력하세요. (예: 100+50)");
let answer = eval(q);
let result = q + "=" + answer
document.getElementById('question').innerHTML = result;
}
</script>
</body>6-2. 프로퍼티 리스너 방식
- 프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다.
- 인라인 방식에 비해서 HTML과 Javascript를 분리할 수 있다는 점에서 선호되는 방식이다.
<body onload="insertQuestion()">
<h1 id="question"></h1>
<script>
function insertQuestion(){
let q = prompt("사칙연산의 수식을 입력하세요. (예: 100+50)");
let answer = eval(q);
let result = q + "=" + answer
document.getElementById('question').innerHTML = result;
}
</script>
</body>6-3. 이벤트 객체
- 이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다.
- 이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다.
<body>
<input type="button" id="target" value="button"/>
<script>
let t = document.getElementById('target');
t.onclick = function(event){
alert('hello world' + event.target.value);
}
</script>
</body>
6-4. addEventListener
- 가장 선호하는 방식
- 똑같은 이벤트가 계속 이어진다.
- 원본코드는 그대로 두고 이벤트에 대한 제거도 가능하다.
<body>
<input type="button" id="btn" value="button"/>
<script>
let t = document.getElementById('btn');
t.addEventListener('click', function(event){
alert('hello world, ' + event.target.id);
});
</script>
</body><body>
<input type="button" id="btn1" value="btn1"/>
<input type="button" id="btn2" value="btn2"/>
<script>
let t1 = document.getElementById('btn1');
let t2 = document.getElementById('btn2');
t1.addEventListener('click',btn_listener);
t2.addEventListener('click',btn_listener);
function btn_listener(event){
// id가 btn1일때는 alert(1)
// id가 btn2일때는 alert(2)
switch(event.target.id){
case 'btn1':
alert(1);
break;
case 'btn2':
alert(2);
break;
}
}
</script>
</body>
개발자