JavaScript는 웹 개발에서 동적인 기능을 추가하고 사용자와 상호 작용하는 데 필수적인 프로그래밍 언어이다. HTML 문서에서JavaScript를 사용하는 방법에 대해 알아보자.
1.HTML에서 Javascript 적용하는 방법
a. <script> 태그 사용
HTML 문서에 JavaScript를 포함시키려면 <script> 태그를 사용한다. 이 태그는 다양한 위치에 배치할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 예제</title>
</head>
<body>
<!-- 방법 1: <body> 태그 내에 스크립트 삽입 -->
<script>
// JavaScript 코드 작성
alert("안녕하세요, JavaScript!");
</script>
<!-- 방법 2: 외부 파일 연결 -->
<script src="파일경로.js"></script>
</body>
</html>b. 외부 파일에서 JavaScript 사용
복잡한 JavaScript 코드는 외부 파일로 분리하여 관리하는 것이 일반적이다. 이는 유지보수성을 향상시키고 코드 재사용성을 높이는 방법이다.
예시:
1) hello.js 파일 생성:
// hello.js
// JavaScript 코드 작성
function welcomeMessage() {
alert("외부 파일에서 안녕하세요!");
}2) HTML 파일에서 외부 파일 연결:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 예제</title>
<!-- 외부 파일 연결 -->
<script src="hello.js"></script>
</head>
<body>
<script>
// 외부 파일의 함수 호출
welcomeMessage();
</script>
</body>
</html>2.Javascript 사용하기
1) 자바스크립트란?
자바스크립트는 클라이언트 측 웹 브라우저에서 동작하는 스크립트 언어로, 주로 웹 페이지의 동적인 부분을 제어하는 데 사용된다. Javascriprt는 아래와 같은 다양한 특징을 갖고 있다.
- 클라이언트 측 스크립트 언어: 주로 웹 브라우저에서 실행되며, 사용자 상호 작용에 동적으로 응답한다.
- 이벤트 기반: 사용자의 행동에 반응하여 특정 동작을 수행하도록 설계되어 있다.
- 다양한 플랫폼 지원: 주로 웹 브라우저에서 사용되지만, Node.js와 같은 환경에서도 서버 측에서 실행될 수 있다.
- 객체 기반 프로그래밍: 객체를 생성하고 이를 통해 코드를 구조화하는 객체 지향 언어이다.
- 인터프리터 언어: 코드를 한 줄씩 해석하고 실행하는 인터프리터 언어로, 미리 컴파일하지 않고 즉시 실행된다.
자바스크립트는 HTML 및 CSS와 함께 웹 개발의 핵심 요소이며, 최근에는 다양한 분야에서 활용되고 있다. 웹 애플리케이션, 서버 개발, 모바일 앱 등에서 다양하게 활용되고 있다.
2) 기본 문법 예제
- 변수
변수는 데이터를 저장하는 데 사용되며, var, let, const 키워드를 사용하여 선언할 수 있다.
// 변수 선언과 할당
var greeting = "안녕하세요";
let count = 3;
const pi = 3.14;
// 변수 사용
console.log(greeting); // "안녕하세요"
console.log(count); // 3
console.log(pi); // 3.14- 조건문
조건문을 사용하여 특정 조건에 따라 다른 코드 블록을 실행할 수 있다.
var hour = 12;
if (hour < 12) {
console.log("좋은 아침!");
} else if (hour < 18) {
console.log("안녕하세요!");
} else {
console.log("안녕히 주무세요!");
}- 함수 (Functions)
함수는 코드를 묶어 재사용 가능한 블록으로 만들어준다.
// 함수 정의
function sayHello(name) {
return "안녕, " + name + "!";
}
// 함수 호출
var message = sayHello("철수");
console.log(message); // "안녕, 철수!"- 반복문 (Loops)
반복문을 사용하여 동일한 코드 블록을 여러 번 실행할 수 있다.
// for 반복문
for (var i = 0; i < 5; i++) {
console.log("현재 인덱스는 " + i);
}
// while 반복문
var counter = 0;
while (counter < 3) {
console.log("카운터 값: " + counter);
counter++;
}
3.ong-market에서의 Javascript 적용
ong- market의 로그인 페이지를 살펴보면 password 항목에 show 버튼이 존재한다.
show 버튼을 누르면 입력한 비밀번호가 숫자로 보이게 된다. 이때 버튼의 show 텍스트는 hide로 바뀐다. hide 버튼을 누르면 비밀번호가 다시 *형태로 보이지 않게 된다.
해당 버튼에 대한 작동을 head 태그 안에 script태그를 이용하여 적용하였다. 버튼을 클릭하면 script태그 안에 작성된 function show( )가 작동하게 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>로그인 화면</title>
<link
rel="stylesheet"
href="{{ url_for('static', filename='login.css') }}"
/>
</head>
<body>
<header class="header"></header>
<img src="../static/images/logo.png" alt="logo image" width="375px;" />
<h1>로그인</h1>
<p><br /><br /></p>
<!-- 플래시 메시지 표시 -->
{% with messages = get_flashed_messages() %}
{% if messages %}
<script>alert("{{ messages[0] }}");</script>
{% endif %}
{% endwith %}
<div id="box">
<div id="login">
<form action="/login_confirm" method="post">
<br />
<h4>Id</h4>
<input id="id" type="text" name="id" style="border: none" required />
<hr />
<br />
<h4>Password</h4>
<button id="show_button" type="button" onclick="show()">show</button>
<input
id="password"
type="password"
name="password"
style="border: none"
required
/>
<script>
/*비밀번호 show or hide 구현 함수*/
function show() {
var btn = document.getElementById("show_button");
var password = document.getElementById("password");
if (btn.innerText == "show") {
password.type = "text";
btn.innerText = "hide";
} else {
password.type = "password";
btn.innerText = "show";
}
}
</script>
<br />
<hr />
<p class="find">
<a href="/find_id">아이디 찾기</a> /
<a href="/find_password">비밀번호 재설정</a>
</p>
<button
id="login_button"
type="submit"
>
<b>로그인</b>
</button>
</form>
<p>
<a id="회원가입" href="/mem_register"><b>회원가입</b></a>
</p>
</div>
</div>
<br /><br /><br />
</body>
</html>