-
JavaScript 기본개발일지/웹프로그래밍 2021. 12. 22. 21:01
JavaScript란
우선 헷갈릴 수 있어서 미리 이야기하는데
JavaScript != Java 임을 명시하자.
이름만 비슷할 뿐 서로 전혀 다른 말이다.
우선 이 JavaScript는 html에 적용되는 언어로써 동적인 부분을 맡아 쳐리한다.
동적인 부분이란 웹프로그래밍 3대장 중 html, css은 미리 텍스트로 짜여저 있고
그저 작성한대로 보여주기만 한다. 하지만 다들 알다시피 웹사이트는 계속해서 변화를 한다.
클릭을 하고 내용을 쓰고 새로고침을 하고 홈페이지로 돌아가고 등등 사용자의 입력에 따라 계속해서 다른 화면을 보여주게 된다. 이를 구현하는 것이 바로 JavaScript (이하 JS)이다.
이전에 작성한 예시의 홈페이지를 보게되면
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../static/test_style_sheet.css"> </head> <body class="wrap"> <button class="first" style="margin-top: 20px"> 버튼 1</button> <button class="second"> 버튼 2</button> <button class="first" id="button3"> 버튼 3</button> <button class="first" id="button4"> 버튼 4</button> </body> </html>
HTML + CSS 화면표시 위에 그림과 같은데 여기서는 버튼을 아무리 눌러도 뭐가 안나오고 계속해서 변화없이 있다.
여기에 JS를 추가하면
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../static/test_style_sheet.css"> <!-- JS 시작--> <script> function button1_click(){ <!-- 함수 생성 --> alert('버튼 눌림!') // 알림을 내보냄 } </script> </head> <body class="wrap"> <button class="first" style="margin-top: 20px" onclick="button1_click()"> 버튼 1</button> <button class="second"> 버튼 2</button> <button class="first" id="button3"> 버튼 3</button> <button class="first" id="button4"> 버튼 4</button> </body> </html>
반응을 한다!
이처럼 함수를 만들어 사용자에게 어떤 값을 받았고 그에 따른 결과를 보여주고 싶을 때 JS를 이용하고 필수이다.
JS는 따로 문법이 존재한다라는 사실을 알수있듯이 다양한 코드를 짤 수 있고 매우 많은 양의 기술이 존재한다.
이를 한번에 정리하는 건 말이 안되고 CSS 처럼 자주 사용하는 부분먼저 조금씩 확장하면서 공부를 해야한다.
우선 사용법만 정리하고 넘어가자!
JS도 CSS와 마찬가지로 <head>에서 작성하는 방법과 <link>를 통해 파일로 만들어 분리하는 방법이 있는데
앞서 설명했듯이 <link>를 통해 파일관리하는 것이 매우 효율적이므로 되도록 파일을 분리해서 사용하도록 하자!
정리
JavaScript는 Java와는 다른 언어이고 웹사이트를 움직여주는 역할이다.
사용법은
- <head> > <script>안에 작성하는 방법
- 파일로 만들어 <link>로 연결하는 방법
'개발일지 > 웹프로그래밍' 카테고리의 다른 글
CSS 기본 내용 (0) 2021.12.22 HTML 기본 개념 (0) 2021.12.22