📌 변수 선언하기
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
📌 외부 스크립트 파일로 연결해 자바스크립트 작성하기
<script src="외부 스크립트 파일 경로"></script>

ex)
<body>
	<h1 id="heading">자바스크립트</h1>
    <p id="text">위 텍스트를 클릭하세요</p>
    
    <script src="js/color.js"></script>
</body>​
🤔 JS 용어 및 기본 입출력 방법

◼︎ 식과 문 (expression. &. statement)
연산식, 문자열, 숫자도 식이다.
 
inch * 2.54	  // 연산식
"안녕하세요?";	// 문자열
5	         // 숫자


◼︎ 알림 창 출력하기 - alert(메세지)
◼︎ 확인 창 출력하기 - confirm(메세지)
◼︎ 프롬프트 창에서 입력받기 - prompt(메세지)
 
var reply = confirm("정말 창을 새로고침 하시겠습니까?");

var name = prompt("이름을 입력하세요.", "홍길동");


◼︎ 웹 브라우저 화면에 출력을 담당하는 document.write()문

<script>
	var name = prompt("이름을 입력하세요.");
    document.write("<b><big>" + name + "</big></big>님, 환영합니다.");
</script>



◼︎ 콘솔 창에 출력하는 console.log()문

<body>
	<h1>어서오세요</h1>
    
    <script>
    	var name = prompt("이름을 입력하세요.");
        console.log(name + "님, 환영합니다.");
    </script>
</body>

 

저작자표시 (새창열림)

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

<frontend> {13} </JS와 객체, 문서객체모델(DOM)>  (0) 2023.07.05
<frontend> {12} </JS기본 문법, let과 const, onclick>  (0) 2023.07.05
<frontend> {10} </반응형 웹>  (0) 2023.07.05
<frontend> {09} </transition. &. animation>  (0) 2023.07.05
<frontend> {08} </CSS 고급 선택자>  (0) 2023.07.05

+ Recent posts

티스토리툴바