https://getcodingkids.com/mission/mission-2/
Mission 2 - Get Coding!
In Mission 2 you are going to learn how to code in a new programming language called JavaScript. JavaScript allows you to build web pages that are interactive, which means they respond to the user. In this mission you are first going to learn how to use hy
getcodingkids.com
목표
- 하이퍼링크로 웹페이지와 웹페이지 연결하기
- 자바스크립트 동작 방식 이해
- 자바스크립트로 웹 프로그래밍 작성
- 암호 입력 기능으로 웹페이지 보호
하이퍼링크 사용하기
하이퍼링크는 웹페이지에서 다른 웹페이지 링크로 이동할 수 있는 기능이다.
앵커태그 <a> 와 </a> 를 이용하며 다음과 같은 형태로 사용된다.
<a href="https://www.google.co.uk">Click here</a>
Click here 를 클릭하면 href속성 값으로 설정된 google.co.uk 로 이동하는 코드이다.
웹페이지와 웹페이지 연결하기
두 웹페이지를 하이퍼링크로 연결해 간단한 웹 사이트를 만드는 방법이다.
href 속성에 연결할 웹페이지를 넣으면 클릭했을때 해당 웹페이지로 이동하게 된다.
<a href="page2.html">Page 2</a>
자바스크립트로 코딩하기
자바스크립트는 HTML과 CSS로 만든 웹페이지를 대화형 웹페이지로 바꿀 수 있다.
예를 들면 사용자가 클릭할 수 있는 버튼을 만들거나 중요한 일을 알려주는 경고창을 띄울 수 있다.
1. 변수및 연산자 사용
<!DOCTYPE html>
<html>
<head>
<title>Variables</title>
</head>
<body>
<script>
var diamondCarats = 300;
alert(diamondCarats);
var teamMembers = 2 + 1;
alert(teamMembers);
var jewelThieves = "The Bond Brothers";
alert(jewelThieves);
</script>
</body>
</html><script> </script> 태그 사이의 코드는 자바스크립트 언어로 실행된다.
<head></head> 또는 <body></body> 태그 사이 어디에나 넣을 수 있다.
var : 변수 선언(변수는 내용을 잠깐 저장할 때 사용한다)
alert : 경고 메시지 출력
연산자
= : 대입연산자(오른쪽 데이터가 왼쪽 변수에 대입된다.)
+ : 덧셈연산자
- : 뺄셈연산자
* : 곱셈연산자
% : 나머지 연산자
/ : 나누기 연산자 (값으로 나오므로 몫을 연산할 때 Math.floor 과 같이 사용해야 됨)
비교연산자
== : 같으면 참, 다르면 거짓
!= : 다르면 참, 같으면 거짓
> : 왼쪽이 오른쪽보다 클때 참
< : 왼쪽이 오른쪽보다 작을 때 참
>= : 왼쪽이 오른쪽보다 크거나같으면 참
<= : 왼쪽이 오른쪽보다 작거나 같으면 참
2. if 구문
<script>
var dogName = "Ernest";
if(dogName == "Ernest") {
alert("You discovered the Monk Diamond!");
}
</script>if 문은 () 안의 값이 참일때 { } 를 실행한다.
3. ELSE 구문
<script>
var diamondValue = 10;
if(diamondValue <= 9.9) {
alert("Value: Under £10 million!");
}
else {
alert("Value: Over £10 million!");
}
</script>else 구문은 언제나 if 구문과 함께 사용한다.
if() 가 참이 아니라면 else 구문을 실행하게 된다.
4. 함수및 인자
함수는 자바스크립트 구문 여러개를 모아 정의 후 이 함수를 호출하면 여러개의 구문이 실행된다.
함수를 정의하기 위해서는 function 을 사용한다. 함수명 뒤에는 중괄호가 나오며 중괄호 안에 매개변수가 넘어온다.
<script>
function checkAccess(name) {
return "Hello" + name;
}
var webPage = checkAccess("Hong");
alert(webPage);
</script>여기서 alert 는 빌트인 함수로 자바스크립트 안에 이미 만들어진 함수이고 checkAccess 는 사용자정의함수로 사용자가 임의로 만드는 함수이다.
checkAccess 를 호출하면 return 을 통해서 호출한 곳에 값을 반환해 준다. 위의 예에서 webPage 변수의 값에 "Hello Hong" 값이 대입 된다. 여기서 name은 매개변수 또는 함수에서 사용할 인자이다.
HTML 코드 안에서 자바스크립트 코드 실행하기
위에서는 <script></script> 태그 안에 코딩해서 추가하였다.
여기서는 HTML 객체를 클릭했을 때 자바스크립트 코드가 실행되도록 해 보자.
<!DOCTYPE html>
<html>
<head>
<title>Onclick</title>
</head>
<body>
<a href="https://www.google.com" onclick="alert('Redirecting to Google');">
Google
</a>
<br/>
<a href="https://www.google.com" onclick="return false;">
Google
</a>
</body>
</html>
onClick 속성으로 자바 스크립트를 실행한다.
위의 Google를 실행하면 메시지를 띄운 후 google.com 으로 이동한다.
아래는 false 를 리턴하게 되므로 아무런 동작을 하지 않게 된다.
미션
비밀번호를 입력하도록 요청하는 웹페이지를 만들자.
사용자가 비밀번호를 정확히 입력하면 MonkDiamond 웹페이지로 이동하도록 하자.
<!DOCTYPE html>
<html>
<head>
<title>Password</title>
<style>
body {
background-color: lightblue;
padding: 30px;
}
</style>
</head>
<body>
<p style="font-size: 30pt;">THE MONK DIAMOND DISCOVERY</p>
<p>Please enter the password to view this website.</p>
<p>Password:<input id="passwordBox" type="password"/></p>
<a href="monkdiamonddiscovery.html" onclick="return checkPassword();">
Click here to submit password and view website
</a>
</body>
</html><input/> 태그 - 입력 태그로 type="password" 인 경우 화면에 *** 과 같이 숨겨져 나온다.
type에는 다음과 같은 속성이 있다.
text - 글입력상자
password - 암호입력상자
button - 클릭 가능한 버튼
checkbox - 체크박스
위의 html 에서 checkPassword() 함수를 만들어 보자.
<script>
function checkPassword() {
var password = document.getElementById("passwordBox");
var passwordText = password.value;
if(passwordText == "Ernest300") {
return true;
}
alert("Access denied! Incorrect password!");
return false;
}
</script>
document.getElementById 는 HTML 에서 ID로 개체를 찾는 함수이다.
'웹프로그래밍 > HTML5+CSS3+JavaScript' 카테고리의 다른 글
| [do it]프런트엔드UI개발 7. SPA 기본골격 만들기2 (0) | 2023.12.29 |
|---|---|
| 미션3.할일 목록 관리 앱 개발 (1) | 2023.11.22 |
| 미션1. 웹페이지 구축 (1) | 2023.11.13 |
| 부트스트랩 강의 및 템플릿 사이트 (0) | 2023.11.06 |
| 부트스트랩 사용법 6 (0) | 2022.03.04 |