반응형
목차
자바스크립트 변수란?
자바스크립트 변수는 아래와 같이 3가지로 정의 됩니다.
- var
- let
- const
파이썬이나 C언어와 달리 정수 실수 string 등을 구분 짓지 않고 모든 변수는 var로 정의할수 있습니다.
변수의 특성에 따라 let이나 const를 사용합니다.
let은 다시 선언이 불가능 합니다. 아래와 같이 중복 선언을 하였습니다.
<script>
var i = 1;
var i = "hi";
let j = 1;
let j = "hello";
</script>
그 결과 아래처럼 var i는 문제가 없었지만 let j는 declared 문제가 발생했습니다.
Uncaught SyntaxError: Identifier 'j' has already been declared
const는 다시 할당이 안됩니다. 아래와 같이 let과 const를 할당해보았습니다.
그 결과 아래처럼 let k 는 문제가 없었지만 const k 아래와 같이 재할당 (reassigned)에 문제가 발생하였습니다.
Uncaught TypeError: Assignment to constant variable.
const는 재선언, 재할당 모두 안되는 변수입니다.
반응형
자바스크립트 함수란? 사용 방법과 예제 코드
자바스크립트 함수는 아래와 같은 구조를 가집니다.
function 함수명(파라미터1, 파라미터2, 파라미터3,...) {
실행할 코드
}
함수를 사용하는 이유는 한번 정의한 함수는 재사용이 가능하기 때문에 코드의 효율을 위해필요합니다.
예제 코드>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>https://scribblinganything.tistory.com/</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="x_value" value="x값을 입력하세요">
<input type="text" id="y_value" value="y값을 입력하세요"><br>
<button type="button" class="btn btn-success" onclick="func1();">더하기</button>
<button type="button" class="btn btn-info" onclick="func2();">빼기</button><br>
<script>
function func1() {
var x = Number(document.getElementById("x_value").value);
var y = Number(document.getElementById("y_value").value);
var z = x + y;
alert("x + y = "+ z);
}
function func2() {
var x = Number(document.getElementById("x_value").value);
var y = Number(document.getElementById("y_value").value);
var z = x - y;
alert("x - y = "+ z);
}
</script>
</body>
</html>
결과 화면 >>
주석>>
두개의 입력창을 text로 받아서 Number를 사용해서 숫자형태임을 알려주고 함수를 사용해서 계산하였습니다.
반응형
'웹관련프로그래밍(web programming) > Javascript 자바스크립트' 카테고리의 다른 글
| [Javascript] 자바스크립트에서 CSS 변경 하기 (HTML Style) (0) | 2021.10.23 |
|---|---|
| [Javascript] 타입 확인하는 방법, 정수(int)/문자(string) 변환 (0) | 2021.10.22 |
| [Javascript] HTML 이벤트 발생 시 동작 함수 (마우스 클릭, 키보드 클릭 등) (0) | 2021.10.19 |
| [Javascript] HTML 태그 사이 글짜, 요소 가져오기 (getElementById, getElementsByClassName, getElementsByName, getElementsByTagName) (0) | 2021.10.18 |
| [Javascript] HTML문서에 시간 입력하거나 글쓰기 (document.write) (0) | 2021.10.17 |