YunDev

JavaScript - 쉽게 알아보는 여러가지 기능들 본문

Programming/JavaScript

JavaScript - 쉽게 알아보는 여러가지 기능들

S준 2020. 3. 24. 22:49

 

오늘은 자바스크립트에서 사용하는 몇 가지 기능들을 알아보도록 하겠습니다.

 

 

1.대문자, 소문자 

대문자를 입력하면 소문자로, 소문자를 입력하면 대문자로 출력하는 코드입니다!

 


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>여러 기능들!!</title>
  </head>
  <body>
    <script type="text/javascript">
    var t = prompt("대문자를 입력하시면 소문자로 바꿔드립니다.", "");

    document.write(t.toLowerCase());

    </script>
  </body>
</html>

 

toLowerCase는 소문자를 대문자로 변환합니다.

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>여러 기능들!!</title>
  </head>
  <body>
    <script type="text/javascript">
    var t = prompt("소문자를 입력하시면 대문자로 바꿔드립니다.", "");

    document.write(t.toUpperCase());

    </script>
  </body>
</html>

 

toUpperCase는 소문자를 대문자로 변환합니다.

 

 

 

 

 

 

2.replace, indexOf

 

replace는 찾을 문자와 바꿀 문자를 넣고 왼쪽에서부터 찾아 치환합니다.

 

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>여러 기능들!!</title>
  </head>
  <body>
    <script type="text/javascript">
    var t = "Hello Nice To Meet You!";


   document.write(t.replace("Hello", "Hi"));

    </script>
  </body>
</html>

 

replace를 하지 않을 때

 

replace를 할 때

 

 

 

indexOf는 찾을 문자를 넣고 왼쪽에서부터 찾은 문자의 멘 앞글자 인덱스(순서)값을 반환합니다.

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>여러 기능들!!</title>
  </head>
  <body>
    <script type="text/javascript">
    var t = "Hello Nice To Meet You!";


   document.write(t.indexOf("Nice"));

    </script>
  </body>
</html>

 

 

0부터 시작하기 때문에 Nice의 N값 6을 반환합니다.

 

 

 

 

3.응용 코드

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>여러가지 기능들</title>
</head>
<body>
<script>

	var userName = prompt("당신의 이름을 입력하세요.");
	var userEmail = prompt("당신의 이메일 주소는?","");

	var arrUrl = [".co.kr" , "com" , ".net" , "or.kr" , ".go.kr"];

	var check1 = false;
	var check2 = false;

		if(userEmail.indexOf("@") > 0) {check1 = true;}

	for(var i = 0; i < arrUrl.length;i++) {
		if(userEmail.indexOf(arrUrl[i]) > 0) {
				check2 = true;
		}
	}

	if (check1 && check2) {
			document.write(userName, "님 방문을 환영합니다!!");
	}

	else {
		alert("이메일 형식이 잘못되었습니다.");
		location.reload();
	}
</script>
</body>
</html>

 

코드가 길어서 헷갈리실 수도 있지만 한번 같이 알아보죠.

arrUrl에는 이메일의 5가지의 뒷자리가 있고 자신이 입력한 이메일에서 @이가 있다면 true, 없다면 check1은 false가 됩니다.

arrUrl의 길이는 5이고 i가 5번 for문을 돌 때 indexOf를 통해 만약 이메일 뒷자리의 해당하는게 있다면 값을 반환하니 check2도 true가 됩니다.

 

&& 연산자는 비교하는 대상이 둘다 true여야 실행이 됩니다. 그래서 하나라도 false라면 이메일을 잘못 입력한 것이죠.

 

 

 

 

 

 

 

 

자 이렇게 간단한 기능과 응용한 코드를 알아보았습니다~~

저작자표시 비영리 동일조건

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

JavaScript - 난수(랜덤 수)를 출력해보자!  (0) 2020.03.16
JavaScript - 함수, 인자 값  (0) 2020.03.14
JavaScript - 입력, if문 사용하기  (0) 2020.03.12
JavaScript - 알아보기  (0) 2020.03.11
'Programming/JavaScript' Related Articles more