MY MEMO
[JSP] JSP 기본개념과 간단한 예제 본문
먼저 이 부분의 코드는 이름이 white인 버튼을 클릭하였을때 alert창이 뜨는데 document.getElementById('user_input').value 즉
user_input창에 있는 내용을 가져와서 alert창으로 띄우겠다는 이야기이다.
2.html
버튼을 누르면 일정 부분이 강조되는 코드이다. 먼저 css로 underline이 생기며 강조되는 코드를 만들고 button을 만든다.
이 버튼에는 onclick 즉 이 버튼을 누르면 나타나는 효과는 target에 있는 것들을 className='em'즉 em클래스의 효과를 적용시키는 것이다.
index.html
target의 색을 변경시키고 싶어서 넣은 코드이다.
밑의 div control을 만들어 버튼 두개를 함께 위치를 이동시킨다.
onclick을 하면 즉 버튼을 실행하면 target에 white를 적용시키는 데 이는 style.css에 보면 body.white body.balck이 있다.
버튼을 누르면 신기하게 코드가 <body id ="target" class="버튼을 눌렀을때 추가되는 class이름">으로 변경된다.
이것보다 더 똑똑하게 javascript를 구현할 수 있다.
위의 코드를 보면 버튼의 id값을 각각 다르게 만들고 onclick을 없앴다 후에 body가 끝나는 지점 아래에 js파일을 넣어주었다.
js파일을 보면 white_btn이라는 id를 가진 버튼이 클릭되었으면 함수를 실행시킨다. 그 함수에는 전에 onclick에 넣었던 코드와 같은 코드를 넣어준다.
후에 black도 마찬가지로 코드를 구현한다. 그러면 긴 코드를 모든 파일에 추가할 필요 없이 우리는 코드 한줄로 모든 파일에 적용시킬 수 있다.
이후에는 php로 DB에 있는 값을 얻어와서 만들것이기 때문에 index.php한 개에 추가하면 된다. 매우쉽다!
+) web을 만드는 데 유용한 기능일 것 같아서 youtube 주소를 추가합니다!!
생활코딩 짱짱 : https://www.youtube.com/watch?v=6x3QXQy1mRk&list=LLrMY3C2G9ShhFi3y6GCkk1w
'STUDYING > WEB' 카테고리의 다른 글
| [BOOTSTRAP] 기초 공부하기 (0) | 2017.06.01 |
|---|---|
| [DATABASE] 관계형 데이터 베이스 (0) | 2017.04.21 |
| [PHP] MYSQL 연동 (0) | 2017.04.20 |
| [PHP] PHP의 기본 개념과 간단한 예제 (0) | 2017.04.20 |
| [CSS] CSS의 기본 개념과 간단한 예제 코드 (0) | 2017.04.19 |
