[JAVASCRIPT] 자바스크립트 기초 문법

JAVASCRIPT 2021. 7. 18. 18:30

공부 날짜 : 2021.07.18

참조 : Do it! 자바스크립트+제이쿼리 입문

1. 자바스크립트 기초 문법

1) 자바스크립트 선언문

선언문은 자바스크립트 코드를 작성할 영역으로 <script>와 </script> 태그 사이에 기술된다.

<!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>Document</title>
</head>
<body>

    <script> //여기가 자바스크립트!
        document.write("환영합니다!");
    </script>
    
</body>
</html>

그 후 크롬으로 파일을 실행시키면 웹 브라우저에 해당 문자가 출력된다.

document : 문서 객체

write() : 문서 출력 메소드

2) 내부 스크립트 외부로 분리하기

//js파일 js/example.js
document.write("환영합니다!")

<!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>외부 자바 스크립트 연동</title>
    <script src="js/example.js"></script>
</head>
<body>
</body>
</html>

src 속성으로 js파일을 내부로 연동시킬 수 있다.

js폴더 밑에 example.js 파일을 연동시킨다.

이렇게 소스를 분리하면 소스를 손상시킬 가능성도 낮아진다.

2. 변수

자바 스크립트의 변수 선언

var 변수명;

var 변수명 = 값;

변수에 저장할 수 있는 자료형

문자형	var 변수 ="사용할 문자나 숫자";
숫자형	var 변수 =숫자; var 변수 =Number("문자형 숫자");
논리형	var 변수 =true or false; var 변수 =Boolean(데이터);
빈 데이터	Undefined

* 자바스크립트로 html 문서 작성하기

<!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>Document</title>
</head>
<body>
    <script>
        var str="<table border='1'>";
            str+="<tr>";
            str+="<td>1</td><td>2</td><td>3</td>";
            str+="</tr>";
            str+="</table>";
            document.write(str);
    </script>
</body>
</html>

3. 제어문

*confirm 객체

confirm 객체는 확인 버튼을 누르면 true를 반환하고 취소버튼을 누르면 false를 반환한다.

<!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>Document</title>
</head>
<body>
    <script>
        var result=confirm("정말로 회원을 탈퇴하시겠습니까?");

        if(result){
            document.write("탈퇴 처리되었습니다!")
        }else{
            document.write("탈퇴 취소되었습니다!")
        }
    </script>
</body>
</html>

1) 중첩 if문

<!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>Document</title>
</head>
<body>
    <script>
        var id ="easy1234";
        var pwd="112233";

        var user_id=prompt("아이디는?","");
        var user_pwd=prompt("비밀번호는?","");

        if(id==user_id){
            if(pwd==user_pwd){
                document.write(user_id+"님 반갑습니다!")
            }else{
                alert("비밀번호가 일치하지 않습니다.");
                location.reload();
            }
        }else{
            alert("아이디가 일치하지 않습니다.");
                location.reload();
        }
    </script>
</body>
</html>

alert 객체 : 경고창(확인 버튼만 존재)

location.reload() : 브라우저 새로고침

2) switch-case 문

<!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>Document</title>
</head>
<body>
    <script>
        var site=prompt("네이버, 다음, 네이트, 구글 중\
 즐겨 사용하는 포털 검색 사이트는?","");
        var url;

        switch(site){
            case "구글": url="www.google.com";
            break;
            case "다음": url="www.daum.net";
            break;
            case "네이버": url="www.naver.com";
            break;
            case "네이트": url="www.nate.com";
            break;
            default:alert("보기 중에 없는 사이트입니다.");
        }

        if(url) location.href="http://"+url;
    </script>
</body>
</html>

location.href : 해당 주소로 페이지 이동

3) for문

<!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>Document</title>
    <style>
        .red{color: red;}
        .green{color: green;}
        .aqua{color: aqua}

    </style>
</head>
<body>
    <script>
        for(var i =1;i<=100;i++){
            if(i%5==0&&i%7!=0){
                document.write("<p class='red'>"+i+"</p>");
            }else if(i%7==0&&i%5!=0){
                document.write("<p class='green'>"+i+"</p>");
            }else if(i%7==0&&i%5==0){
                document.write("<p class='aqua'>"+i+"</p>");
            }
        }
    </script>
</body>
</html>

해당 조건에 부합하면 색이 스타일이 적용된다.

스타일이 적용되기 위해서는 style 태그 안에서 css 적용을 해 주어야 한다.

'JAVASCRIPT' 카테고리의 다른 글

[JAVASCRIPT] 객체(브라우저 객체 모델) (0)	2021.07.21
[JAVASCRIPT] 객체(내장 객체) (0)	2021.07.21

ABOUT ME

끄적끄적 끄적끄적

'JAVASCRIPT' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'JAVASCRIPT' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바