티스토리 뷰

Programming/JavaScript, jQuery

[javascript 2강] 입출력 및 기본문법

국브 2019. 2. 9. 12:55

 [javascript 2강] 입출력 및 기본문법



이번글에서는 자바스크립트의 입출력 및 기본문법에 대해서 알아보겠습니다.

브라우져에서 사용자가 입력을하면 화면에 출력이 되는것과 

콘솔창출력, 문장마침, 주석, 자바스크립트 변수사용법에 대해서 알아보겠습니다.

자바스크립트가 어디에 쓰이고.. 개발환경을 구축하지 않으셧다면..

이전글을 참고해 주시길 바랍니다^^


 이전 글 링크 


2019/02/07 - [Programming/JavaScript, jQuery] - [javascript 1강] 자바스크립트 개요 및 개발환경설정




 1.입출력 (prompt, confirm, alert)


자바스크립트를 통해 문장을 출력하고 값을 받을수 있습니다.

prompt 를 통해서 질문 및 답을 받을수 있고

confirm 를 통해서 질문을 하고 true 또는 false 값을 리턴받을수 있다.

마지막으로 alert 는 메시지를 사용자에게 출력해줄수 있습니다.


 사용문법 

prompt("String","String");


confirm("String");


alert("String");


 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            prompt("출력내용","입력내용");
            confirm("진행하겠습니까?");
            alert("안녕하세요");
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 



prompt("출력내용","입력내용"); 실행 결과로 위와 같이 입력창이 나오는것을 확인할수 있습니다.

입력창에 내용을 입력하고 "확인" 버튼을 누르면 retrun 값으로 String 값을 반환해 줍니다.

하지만 "취소" 버튼을 누르면 retrun 값이 없습니다.

prompt 를 활용하여 브라우저를 사용하고 있는 사용자에게 값을 받아 사용할수 있습니다.



confirm("진행하겠습니까?"); 실행 결과로 위와 같이 선택창이 나오는것을 확인할수 있습니다.

선택창에서는 "확인" 또는 "취소" 를 선택할수 있습니다.

"확인"을 누르면 return 값으로 true 의 값을 얻을수 있고..

"취소"를 누르면 return 값으로 false 의 값을 얻을수 있습니다.

즉, 무조껀 리턴값이 있습니다.

confirm 을 활용하여 브라우저를 사용하고 있는 사용자에게 boolean 형태의 값인 true/false 값을 받아 사용할수 있습니다.



alert("안녕하세요"); 실행결과로 위와같이 경고창이 나오는것을 확인할수 있습니다.

경고창에서는 위와같이 내용을 출력만 해줍니다. (return 값은 없음)

인터넷을 사용하면서 아마 한번쯤은 보셧을것입니다.

예를들어 회원가입에서 비밀번호 조합이 틀리면 조합이 틀렸다고 나오거나..

아이디가 짧으면 "x자리 이상 입력해주세요." 라고 출력해줄때 많이들 사용합니다.




 2.콘솔창 출력 (console.log)


자바스크립트를 통해 콘솔창으로 자신이 원하는 내용을 출력할수 있습니다.

브라우저에서 F12 키를 누르면 개발자 도구 가 열립니다.

개발자 도구에서 Console 창을 들어가보시면 자바스크립트로 출력한 내용을 확인할수 있습니다.

자바를 하시는 분이시라면 쉽게 생각하면 system.out.println() 이라고 생각하시면 됩니다.


 사용문법 

 console.log("String");


 예제 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            console.log("내가출력한 내용");
            
            //입력창 및 선택창 응용
            console.log(prompt("출력내용","입력내용"));
            console.log(confirm("진행하겠습니까?"));
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 



console.log(prompt("출력내용","입력내용")); 실행결과 위와같이 입력창이 나옵니다.

prompt("출력내용","입력내용") 에서 내용을 받아 console.log 을 통해 입력받은 내용을 출력합니다.

출력내용은 밑에서 설명하도록 하겠습니다.



console.log(confirm("진행하겠습니까?")); 실형결과 위와같이 선택창이 나옵니다.

confirm("진행하겠습니까?") 에서 선택된내용을 console.log 을 통해 입력받은 내용을 출력합니다.

출력내용은 밑에서 설명하도록 하겠습니다.



위의 이미지는 브라우져에서 F12를 눌러 개발자 도구의 콘솔창 내용입니다.

console.log("내가출력한 내용"); 의 내용이 출력되어 콘솔창에서 제일 위에 출력된것을 확인할수 있습니다.

또한 console.log(prompt("출력내용","입력내용")); 을통해 입력창에 "입력내용!" 이라고 입력한 내용이 return 되어 콘솔창에 출력되었습니다.

그리고 console.log(confirm("진행하겠습니까?")); 을통해  선택창에서 "확인" 버튼을 눌러 return 되어 true 가 출력되는것을 확인할수 있습니다.




 3.문장 마침 및 주석(세미콜론(;), //, /* 내용 */)


자바스크립트의 문법은 변수선언 및 함수 등등 모든 선언 뒤에는 세미콜론(;) 을 입력해 주어야 합니다.

또한 자바스크립트로 주석을 제공합니다. 

주석을 사용하여 잠시 내용을 실행하지 않게 할수 있습니다.


 사용문법 

자바스크립트 문장 마침은 세미콜론(;) 을 입력


주석은 


한줄주석 : //

여러줄 주석 : /* 내용 */


 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            //console.log("내가출력한 내용");
            
            //입력창 및 선택창 응용
            /* console.log(prompt("출력내용","입력내용"));
            console.log(confirm("진행하겠습니까?")); */
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 


위에서 사용하던 내용을 주석처리후 실행하였을때 콘솔창에 아무것도 없는것을 확인할수 있습니다.




 4.변수사용법 및 문자열 숫자 불리언 (var, String, Int, boolean)


자바스크립트 변수선언은 필요없이 변수에 값을 넣어주면 자동적으로 변수의 값에 맞는 형태로 변수가 주어진다.

문자열을 사용하고 싶다면 변수 선언후 String 의 값을 넣어주면 되고..

숫자형태의 변수를 사용하고 싶다면 Int 의 값을 넣어주면 됩니다.

또는 참/거짓의 값인 불린형태의 변수를 사용하고 싶다면 true 나 false 의 값을 넣어주면 됩니다.


 사용문법 

var 변수명 = "String";


var 변수명 = INT;


var 변수명 = true/false;


 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            
            var st= "문자열";
            var it= 1;
            var vl= true;
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 


var st= "문자열"; 과같이 입력하여 String 타입의 변수가 생성됩니다.

var it= 1; 과같이 입력하여 Int 타입의 변수가 생성됩니다.

var vl= true; 과 같이 입력하여 boolean 타입의 변수가 생성됩니다.

변수타입을 확인하기 위해서는 함수를 통해 확인할수있지만..

아직 함수를 배우지 않았기에 함수를 배우는 부분에서 정말 형태가 제대로 되었는지 확인하는 방법을 알아보겠습니다.




 글을 마치며..


이상으로 이번글을 통해 자바스크립트의 기초에 해당하는 내용을 살펴보았습니다.

기초문법인만큼 잘알아두고 다음글로 넘어가시길 추천드립니다 ㅎㅎ

모두 수고하세요!


도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 



저작자표시 비영리 변경금지

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[javascript 5강] 배열  (0) 2019.02.10
[javascript 4강] 연산자  (0) 2019.02.10
[javascript 3강] 변수와 자료형  (0) 2019.02.09
[javascript 1강] 자바스크립트 개요 및 개발환경설정  (0) 2019.02.07
자바스크립란 무엇인가요?(javaScript)  (2) 2016.01.13
댓글