<frontend> {12} </JS기본 문법, let과 const, onclick>

V2LLAIN 2023. 7. 5. 16:19

2023. 7. 5. 16:19

📌 변수 선언하기
var age = 23;
cf. 만약 var 명령어를 빼게 된다면, 이는 전역변수를 의미한다.

🤔 HTML 파일에 코드 입력하기

<body></body> 태그 사이에 소스코드 입력

<!DOCTYPE html>
<html lang="kor">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
            var currentYear = 2023;
            var birth, age;

            birth = prompt("태어난 년도를 입ㅕ하세요. (YYYY)", "");
            age = currentYear - birth + 1;
            document.write(currentYear + "년 현재<br>");
            document.write(birth + "년 생의 현재 나이는" + age + "세 입니다.");
    </script>
</body>
</html>

📌 Javascript의 자료형

cf. undefined: 자료형이 정의되지 않을 때의 데이터 상태 (즉, 변수에 값이 할당되지 않았음을 의미)
cf. null: 데이터의 값이 유효하지 않은 상태 (즉, 할당은 되었지만 할당된 값이 유효하지 않음을 의미)

📌 Javascript의 조건문
if (조건) {
}
else {
}
📌 Javascript의 반복문
for(let i= 1; i < 6; i++) {
	sum += i;
}

while(let i < 6) {
	sum += i;
    i++;
}
📌 함수의 사용 in Javascript
function 함수명() {
	명령
}

ex) 
<script>
    function AddNum() {
        var n1=2;
        var n2=3;
        var sum = n1 + n2;
        alert("결과:" + sum);
    }

    AddNum();
</script>
<script>
    function AddNum(num1, num2) {
        var sum = num1 + num2;
        return sum;
    }
	var res = AddNum(3, 5);
    document.write(res);
</script>

🤔 let과 const
var를변수 선언시 보통 사용하며, var를 사용하지 않으면 자동으로 전역변수가 되어 버린다.
이를 방지하고자 let, const를 사용한다.

추가적으로 var, let, const의 가장 큰 차이는 scope 범위이다.
∙var: 함수영역의 스코프
∙let과 const: 블록영역{ }의 스코프
- 보통 let 은 가변변수, const는 상수변수에 사용된다.

📌 Javascript 변수사용 Tip!
1. var 변수는 함수 시작부분에서 선언!
2. for문에서 counting변수는 var 예약어 사용X (let 사용)
3. 보통 var보다 let을 주로 사용하는 것이 좋다.
4. 전역변수는 최소한으로 사용.

🤔 이벤트와 이벤트 처리기

📌 이벤트 처리기

<태그 on이벤트 = "함수명">

ex)
<body>
	<ul>
    	<li><a href="#" onclick="changeBg('green')">Green</a></li>
        <li><a href="#" onclick="alert('green')">Green</a></li>
    </ul>
</body>

저작자표시

'ETC(front,back) > React(HTML, CSS, JS)' 카테고리의 다른 글

<frontend> {14} </React_part 1. Basic> (0)	2023.07.11
<frontend> {13} </JS와 객체, 문서객체모델(DOM)> (0)	2023.07.05
<frontend> {11} </Javascript 기초용어 및 입출력 방법> (0)	2023.07.05
<frontend> {10} </반응형 웹> (0)	2023.07.05
<frontend> {09} </transition. &. animation> (0)	2023.07.05

this.code();

<frontend> {12} </JS기본 문법, let과 const, onclick>

'ETC(front,back) > React(HTML, CSS, JS)' 카테고리의 다른 글

+ Recent posts

티스토리툴바