JavaScript 실습
만들 웹 페이지.
while를 누르면 화면이 하얗게
black을 누르면 화면이 검게
실습 1. 버튼넣기
버튼을 넣기 위해 필요한 코드
<input type="button" value="while" />
- 여기서 마지막 / => 끝나는 태그가 없는 태그에서는 닫는 괄호에 /를 붙여도 되고 안 붙여도 된다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" value="white" />
</body>
</html>
type을 text로 바꾸면
type을 checkbox로 바꾸면
prompt와 alert
<script>
alert("hello world");
</script>
prompt는 입력을 받는 것 까지 포함이지만 alert는 창만 보여준다.
prompt와 alert는 script 코드 안에서 사용되지만 HTML 코드에서 사용할 수도 있다.
<input type="button" value="white" onclick="alert('Hello world')/>
==> white를 누르면 Hello world가 나온다.
text 타입에서 활용
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" value="white" onclick="alert('Hello world')"/>
<input type="text" onfocus="alert('focus')" onblur="alert('blur')"/>
</body>
</html>
text창을 눌러 입력이 시작되기 전에 focus 라고 나오고 입력이 끝나면 blur 라고 나온다 .
실습 2. 왼쪽 빈칸에 입력한 내용이 white 버튼을 누르면 alert 창으로 나오게 하기
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="text" />
<input type="button" value="white" onclick="alert('Hello world')"/>
</body>
</html>
alert 괄호 안에 들어가야 할 내용은 ?
위의 input에 id 값을 정해주고
괄호 안에는 id값을 나타내는 태그를 입력하면 된다.
=> getElementById 이용 (Element == 태그와 같은 의미로 사용된다)
getElementById => document안에 들어가 있다.
작성해야 하는 코드
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="text" id="user_input" />
<input type="button" value="white" onclick="alert(document.getElementById('user_input'))"/>
</body>
</html>
이렇게 나온다.
끝에 .value를 추가하면
추가한 코드
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="text" id="user_input" />
<input type="button" value="white" onclick="alert(document.getElementById('user_input').value)"/>
</body>
</html>
제대로 출력된다.
- Ctrl + Alt + 우 화살표 => 편집하는 곳으로 바로 이동한다.
복습겸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
li{
color:blue;
}
ul li{
font-size:40px;
}
</style>
</head>
<body>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ul>
<li>최진혁</li>
<li>최유빈</li>
<li>한이람</li>
<li>한이은</li>
</ul>
</body>
</html>
여기서 html과 최유빈 에만 밑줄을 긋고 싶다면?
=> 그 두 개의 것을 그룹핑(class로 지정하는 것) 하면 된다.
<ol>
<li class="em">html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ul>
<li>최진혁</li>
<li class="em">최유빈</li>
<li>한이람</li>
<li>한이은</li>
</ul>
여기서 em은 임의로 지정한 것이다.
CSS에서 설정은
<style>
li{
color:blue;
}
ul li{
font-size:40px;
}
.em{
text-decoration:underline;
}
</style>
.은 class를 선택할 수 있게 해주는 것.
실습 3. 강조 버튼을 가장 아래에 만들어서 강조 버튼을 누르면 ol부분에 밑줄이 그어지게 만들기
- ol에 id값을 준다.
- input에서 이전에 배웠던 것처럼 document.getElementById('id값')을 작성한다.
- 그 바로 뒤에 .classname='em'을 작성한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
li{
color:blue;
}
ul li{
font-size:40px;
}
.em{
text-decoration:underline;
}
</style>
</head>
<body>
<ol id="target">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ul>
<li>최진혁</li>
<li>최유빈</li>
<li>한이람</li>
<li>한이은</li>
</ul>
<input type="button" value="강조" onclick="document.getElementById('target').className"/>
</body>
</html>
- 개발자도구는 F12
실습4. 오른쪽 맨 위에 버튼 넣기
위치는 맨 위의 그림에서 JavaScript가 있는 list와 변수와 상수 라는 h2 태그 사이에 있어야 그림과 같은 위치에 넣을 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<header>
</header>
<nav>
<ol>
</ol>
</nav>
<input type="button" value="white" />
<input type="button" value="black" />
<article>
<h2>JavaScript란?</h2>
JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
</article>
</body>
</html>
버튼 넣기 까지 실습.
두 버튼을 둘다 오른쪽 끝으로 옮기기 위해 하나의 태그로 묶는다 -> div라는 태그 (태그와 태그를 grouping 해서 css적인 효과를 주기 위한 태그.
div의 id값을 주고 그 id값으로 제어한다.
그리고 css 에서 #id값 으로 하면 된다.
실습 5. 완성
CSS에서 body{ 의 의미 => 화면 전체
body{
background-color:white;
color:black;
}
body{
background-color:black;
color:white;
}
위의 값은 default 값
black을 누르면 위의 값 실행
white를 누르면 아래 값 실행
=> 위의 코드에서 body.white, body.black 과 같이 해서 지정 가능
=> .은 class 값의 의미
<body class="black"> 으로 body.black 실행
버튼을 누르면 이 값을 바꾸도록 하게 하자.
input ... onclick = 자바스크립트 문법에 따라 실행시킬 내용
onclick="document.getElementById('target').className='white'
의미해석 : 버튼을 클릭하면 태그 id값이 target인 것의 className을 white로 지정한다. 라는 뜻이다.
추가
"document.getElementById('target').className='white'
이 코드는 너무 길어서 HTML의 가치를 현저히 떨어뜨릴 가능성이 있다.
위의 코드를 지우고 거기에 id 값을 준다
<input type="button" value="white" id = "while_btn"/>
<input type="button" value="black" id = "black_btn"/>
그리고 닫히는 바디 위쪽에 script 태그를 만들고 그 정보를 넣는다.
wbtn = document.getElementById('white_btn');
wbtn.addEventListener('click',function(){
document.getElementById('target).className='white';
})
white_btn이 가리키는 태그를 wbtn이라는 변수에 담고
그 변수에 EventListener를 설치한다. => 이 것은 클릭이 일어나면 function이 포함하고 있는 구문을 실행하라는 의미이다.
마찬가지로 black도 가능
bbtn = document.getElementById("black_btn');
bbtn.addEventListener('click',function(){
document.getElementById('target').className='white';
})
이런 코드를 모든 파일에 복사 붙여넣기 하면 되는데
중복의 냄새가 난다.
=> CSS처럼 script 파일을 만들어서 저장할 수 있다.
<script src="http://localhost/script.js"></script>
로 쓰고 다 지우고
이 파일을 생성해서 위의 코드를 넣으면 된다.
'웹 프로그래밍' 카테고리의 다른 글
| 데이터베이스 MYSQL 이론 (0) | 2017.12.23 |
|---|---|
| PHP 실습 (0) | 2017.12.22 |
| JavaScript 실습 (0) | 2017.12.20 |
| UI vs API (0) | 2017.12.19 |
| 함수 (0) | 2017.12.19 |