- 먼저, 자바스크립트에서 변수는 변하는 값을 저장하기 위한 공간이라 할 수 있다.
- 예를 들어 두 수의 합을 계산하여 결과 출력하는 프로그램을 만들 때 사용자가 입력하는 두 수가 매번 같지 않을테니 이럴때 상황에 따라 다른 값을 입력 받아야할 경우 변수를 사용한다.
- 상수, 변수란?
- 변하지 않는 값을 상수(Constant)라고 한다.
- 상황에 따라 변할 수 있는 값을 변수(Variable)라고 한다.
변수를 선언하는 규칙
- 변수의 이름은 의미가 나타나도록 지어야한다. - 의미를 나타내고 가독성이 좋도록 명확하고 간결하게 정하는 것이 좋다. 코드를 이해하고 기억하기 쉬워진다.
- 변수의 이름은 낙타 표기법(camel case)으로 작성해야한다. - 낙타 표기법이란 여러 단어로 이루어진 변수 이름을 작성할 때 첫번째 단어를 소문자로 시작하고 이후 단어들의 첫 글자를 대문자로 쓰는 것이다. 낙타 표기법을 쓰지 않는다고 프로그램에 영향을 주지는 않지만 가독성이 좋을 뿐만아니라 개발자들은 대부분 낙타 표기법을 사용하니 낙타 표기법을 사용하는 것이 좋다.
- 변수 이름은 유효한 식별자여야 한다. - 변수 이름은 문자, 숫자, 밑줄(_) 또는 달러 기호($)로 시작해야 하며, 그 후에도 동일한 종류의 문자와 숫자를 포함할 수 있다. 변수 이름은 공백이나 특수 문자를 포함해서는 안된다.
- 예를 들어, myName, _count, totalAmount와 같은 변수 이름은 유효한 식별자이고 1name, .age, #year 이러한 변수 이름은 사용할 수 없다.
변수에 값, 식 저장
- 변수에 값을 저장하는 방법은 두가지로 나뉜다.
- 변수를 선언하면서 저장하는 방법
var dog = "woof";2. 변수를 선언한 다음에 값을 저장하는 방법
var cat;
cat = "meow";
- 변수에 식을 저장할 경우에 식에 들어있는 변수는 미리 선언해 두어야한다.
var dog = 3;
var cat = 4;
var total = dog + cat;
과목 평균 계산 프로그램 만들기
1-1. 변수 선언 - </body>태그 앞에 <script>를 열어 변수를 저장해준다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/age.css">
</head>
<body>
<button class="btn" onclick="calc()">두 과목 평균 구하기</button>
<div id="result" class="show">(결과 값 표시)</div>
<script>
function calc() {
var kor = 97; //국어 과목 점수를 저장할 변수
var eng = 50; //영어 과목 점수를 저장할 변수
var tot = kor + eng; //두 과목 합계를 저장할 변수
var avg; //계산한 평균 점수를 저장할 변수
</script>
</body>
</html>1-2. 평균을 구하는 식을 적어준다.
<script>
function calc() {
var kor = 97;
var eng = 50;
var tot = kor + eng;
var avg;
avg = tot / 2; //두 과목 합계에서 2로 나누어 avg에 저장
</script>1-3. avg에 저장된 값이 크롬 브라우저에 나타나도록 아래 소스 코드를 넣어준다.
document.querySelector("#result").innerHTML = "두 과목의 평균은 "+avg+"입니다.";document.querySelector("#result").innerHTML는 DOM(Document Object Model)을 사용하여 HTML 문서에서 특정 요소를 선택하고, 해당 요소의 내용을 가져오거나 변경하는 코드이다. 구체적인건 나중에..
이렇게 만들어 실행해보면.. 두 과목 평균 구하기 버튼을 누르면 avg에 저장된 값이 출력되게 된다.
2-1. 조금 더 나아가 사용자 입력값을 변수에 할당해보기
2023.06.09 - [JavaScript] - 1-1 자바스크립트 코드 작성, 실행
1-1 자바스크립트 코드 작성, 실행
html문서에 자바스크립트 작성하는 방법 실행 결과 2. 외부 스크립트 파일 연결하는 방법 js폴더 생성 후 Ctrl+N 눌러 새 문서 만들기 Ctrl+S 눌러 제목을 gifok.js로 설정 후 js폴더 안에 저장 색깔 바꾸
river-yun28.tistory.com
위의 게시글에서 알아보았던 prompt()함수를 이용할 것인데 prompt()함수는 사용자가 값을 입력할 수 있는 함수이다.
2-2 kor, eng에 할당했던 값을 지우고 prompt()함수를 넣어준다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/age.css">
</head>
<body>
<button class="btn" onclick="calc()">두 과목 평균 구하기</button>
<div id="result" class="show">(결과 값 표시)</div>
<script>
function calc() {
var kor = parseFloat(prompt("첫번째 과목의 점수를 입력하세요."));
var eng = parseFloat(prompt("두번째 과목의 점수를 입력하세요."));
var tot = kor + eng;
var avg = tot / 2.0;
document.querySelector("#result").innerHTML = "두 과목의 평균은 " + avg + "입니다.";
}
</script>
</body>
</html>(*여기에서 prompt() 함수를 통해 입력받은 값은 문자열로 반환되기 때문에, 숫자로 변환해주지 않고 그대로 연산을 하기 때문에 계산 중 문제가 발생한다. 따라서 입력받은 점수를 숫자로 변환해주어야 한다.
parseFloat() 함수를 사용하여 입력받은 문자열을 부동 소수점 숫자로 변환한다. 이렇게 하면 입력된 점수를 숫자로 인식하여 올바른 결과를 계산할 수 있게된다.)
'JavaScript' 카테고리의 다른 글
| 3-2 if문, if · · · else문 (0) | 2023.07.16 |
|---|---|
| 3-1 연산자 (0) | 2023.07.16 |
| 2-2 자료형 (6) | 2023.06.30 |
| 1-1 자바스크립트 코드 작성, 실행 (3) | 2023.06.09 |
| 1-0 자바스크립트란? (0) | 2023.06.09 |
