웹개발 3차시 JavaScript(1)

사용자의 조작에 의해 상호작용을 위해 사용

 

▶ <script></script> 안에 작성

<h1>HTML</h1>
    1+1
<h1>JavaScript</h1>
<script>
    document.write(1+1)
</script>

-> html은 정적이지만 Javascript는 1+1의 결과값을 출력해줌.

 

 

---

<input type="button" value="hi" onclick="alert('hi')">

onclick 속성을 만나면 javascript 작동

hi 버튼을 누르면 alert창 뜸

 

<input type="text" onchange="alert('changed')">

text창에 새로운 내용 입력되면 alert창

 

<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('changed')">

onclick, onchange, onkeydown 등을 event 라고 함.

자바스크립트 작동하게해줌.

 

 

 

버튼누르면 야간모드 변경↓

<h1><a href = "index.html">WEB</a></h1>
<input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
">
<input type="button" value="day" onclick="
	document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
">
    
<ol>
    <li><a href = "1.html" class="saw">HTML</a></li>
    <li><a href = "2.html" class="saw" id="active">CSS</a></li>
    <li><a href = "3.html">JavaScript</a></li>
</ol>

night 누르면 야간모드 변경

 

 

---

<조건문>

한버튼을 누를때마다 상태 변경. 조건문 사용해서

<input id = "night_day" type="button" value="night" onclick="
        if(document.querySelector('#night_day').value === 'night'){
            document.querySelector('body').style.backgroundColor = 'black';
            document.querySelector('body').style.color = 'white';
            document.querySelector('#night_day').value = 'day';
        }
        else{
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
        document.querySelector('#night_day').value = 'night';
        }
">

value값 변경해줘서 버튼 바뀌도록.

버튼 night

버튼 day

 

리팩토링 : 중복된 코드 정돈

▶this : 자기자신

<input type="button" value="night" onclick="
        var target = document.querySelector('body')
        
        if(this.value === 'night'){
            target.style.backgroundColor = 'black';
            target.style.color = 'white';
            this.value = 'day';
        }
        else{
        target.style.backgroundColor = 'white';
        target.style.color = 'black';
        this.value = 'night';
        }
">

var target = document.querySelector('body') 로 변수를 만들어서 중복 정리.