본문 바로가기
Java Web Programming/2. JavaScript

[JavaScript] JavaScript 기초

by 파프리카_ 2020. 8. 19.
728x90
반응형

1. Java Script 기본 구조

 

기본 문법

<script type="text/javascript">
	//java script 주석 1
	/*
		java script 주석 2
	*/
	
    	//alert([value]);
    	alert("Hello, JS ! ");
	
	// console
    	//console.log("[value]");
	console.log("콘솔 테스트"); 
    	//브라우저에서 F12눌러서 console tab에서 확인할 수 있음
	
	// 변수 선언
    	// var [변수명] = [value];
	var nick = "아이유";
	console.log(nick); //console에 '아이유'뜸
	alert(nick); //alert으로 '아이유' 뜸
	
	// for문 
	// 주의할 점 : int i=0이 아니라, var i=0 으로 선언!
	for(var i = 0; i < 3; i++){
		alert(nick);
	}
</script>

 

*console , alert : java script의 진행 상황을 보여줌

 

console

alert 

 

 

 

 

2. function

 

기본 문법

<script type="text/javascript">

	//1. return값이 없는 경우
	function [function이름]([매개변수]) {
		[function 구현부];
	}

	//2. return값이 있는 경우
	function[function이름]([매개변수]){
		return [return값];
	}
</script>

 

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script Function</title>
<script type="text/javascript">
	function hello() {
		console.log("hello");
		alert("Hello!");
	}
	
	function bye(name){
		alert(name);
	}
	
	function testParam(name, age) {
		alert("이름: "+name+" | 나이: "+age+"살" +" | 리턴값 : "+ testReturn());
	}
	
	//return value
	function testReturn(){
		return "쉬는 시간";
	}
</script>
</head>
<body>
<!-- onclick 뒤 함수명 -->
<input type="button" value="함수테스트1" onclick="hello()"><br><br> 
<input type="button" value="함수테스트2" onclick="bye('여름')"><br><br> 
<input type="button" value="함수테스트3" onclick="bye('가을')"><br><br> 
<input type="button" value="함수테스트4" onclick="testParam('두유', 1)"><br><br> 
</body>
</html>

 

3. confirm 함수

: confirm 함수는 alert에서 확인을 누르면 true를 리턴, 취소를 누르면 false를 리턴한다. 

 

+ location.href = "[url path]";

: 해당 url path로 이동

 

기본 문법

<script type="text/javascript">
	function confirmTest(){
		var result = confirm("confirm 함수 테스트");
		if (result){ //alert 버튼에서 확인 누를 경우
			alert("true 반환")
		} else { //alert 버튼에서 취소 누를 경우
			//alert("false 반환")
            
			// 다른 페이지로 이동시킨다
			location.href = "http://naver.com";
		}
	}
</script>

 

4. form

:  브라우저로부터 입력받은 정보를 서버에 전송해주기 위해 필요한 html tag

 

getting value

document.[form이름].[component이름].value

 

setting value

document.[form이름].[component이름].value = "[할당할 값]" ;

 

focus() : 커서를 위치하게 하기

[component객체].focus();

 

 

기본 문법

<form name="[form이름]">
	[info] <input type="[component타입]" name="[component이름]">
	<input type="[button] or [submit]" value="[버튼에 보여줄 글씨]" onclick="[함수명]()">
</form>

 

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript form text 입력 양식 제어</title>
<script type="text/javascript">
	function accessForm(){
		console.log("함수 실행");
		
		// value getting
		//userId라는 name component(text 입력양식)에 접근해서
		//사용자가 입력한 정보 확인한다
		// idComp : 입력 양식 객체를 변수에 저장한다
		var idComp = document.testForm.userId;
		//document.form이름.coponent이름.value -> 입력한 값 반환
		//var data = document.testForm.userId.value;
		var data = idComp.value;
		alert("아이디는 "+data+ " 입니다.");
		//alert(document.testForm.userId); //component(text 입력양식) 객체가 띄워짐
		
		// value setting 
		//사용자가 입력한 text box에 정보를 지운다(초기화한다)
		//document.testForm.userId.value = "";
		idComp.value = "";
		
		//포커스를 준다 -> 커서를 위치하게 한다.
		//document.testForm.userId.focus();
		idComp.focus();
	} 
</script>
</head>
<body>
<!-- form tag: 서버 전송을 위해 필요함 -->
<form name="testForm">
아이디 <input type="text" name="userId">
<input type="button" value="test" onclick="accessForm()">
</form>
</body>
</html>

5. isNaN 함수

: 숫자인지 확인하는 함수 (boolean으로 리턴)

 

기본 문법

<script type="text/javascript">
	function deposit(){
		
		//form 객체를 변수 f에 할당
		var f = document.testForm;
		
		if (isNaN(f.money.value.trim())){ //숫자여부 확인
			alert("숫자입니다");
		} else {
			alert("숫자가 아닙니다.")
		}	
	}
</script>

 

6. 입력양식 input - id

: input의 id는 현 웹페이지에서 유일(unique)해야 한다.

 

document.getElementById("[id 이름]")

 

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript input 입력양식 id</title>
<script type="text/javascript">
	function testId() {
		//input 입력양식에 id로 접근해서 value를 확인
		//iput의 id는 현 웹페이지에서 유일해야 한다.

		//Component 객체 변수 생성
		var nickComp = document.getElementById("nick");

		//getting value
		alert("닉네임: " + nickComp.value);

		//setting value
		nickComp.value = "변경";
	}
</script>
</head>
<body>
	<form>
		닉네임 <input type="text" value="기본" id="nick"> 
		<input type="button" value="테스트" onclick="testId()">
	</form>
</body>
</html>

7. 입력양식 input - div, span

 

form 입력 양식 정보를 set/get하는 attribute → value

div, span 입력 양식 정보를 set/get하는 attribute → innerHTML

 

기본 문법

<body>
	<div id="testDiv"><font color="green">이 부분은 div 영역입니다.</font></div>
	<span id="testSpan">이 부분은 span 영역입니다.</span>
	<span>이 부분은 id가 지정되지 않은 영역입니다.</span>
</body>

 

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script로 div/span 제어</title>

<!-- CSS 영역-->
<style type="text/css">
/*
 	# -> id를 지정할 때 사용 
 	. -> class를 지정할 때 사용
 */
 	/*id=testDiv 영역*/
	#testDiv {
		background-color: yellow;
	}
	
	/*id=testSpan 영역*/
	#testSpan {
		background-color: lime;
	}
</style>
	
<!-- JS 영역-->
<script type="text/javascript">
	function goDiv() {
		//testDiv : Div Component 객체 변수 생성
		var testDivComp = document.getElementById("testDiv");
		
		//innerHTML : div 영역 내 HTML 요소값
		// getting innerHTML
		alert(testDivComp.innerHTML); 
		
		// setting innerHTML
		// div 영역 내 html을 할당
		testDivComp.innerHTML = "<font color='blue' size='6'>하하하하</font>";
	}
	
	function goSpan() {
		//id가 testSpan인 영역의 html 정보를 
		//1. alert으로 확인하고 --getting html
		//2. <font size='3' color='red'>쉬는 시간</font> 로 할당 -- setting html
		
		//testSpanComp : Span Component 객체 변수 생성
		var testSpanComp = document.getElementById("testSpan");
		
		// getting innerHTML
		alert(testSpanComp.innerHTML);
		
		// setting innerHTML
		testSpanComp.innerHTML = "<font size='3' color='red'>쉬는 시간</font>";
		
	}
</script>
</head>
<body>
	<div id="testDiv"><font color="green">이 부분은 div 영역입니다.</font></div>
	<span id="testSpan">이 부분은 span 영역입니다.</span>
	<span>이 부분은 id가 지정되지 않은 영역입니다.</span>
	<br><br>
	<input type="button" value="testDiv" onclick="goDiv()">
	<input type="button" value="testSpan" onclick="goSpan()">
</body>
</html>

 

8. 비교 연산자 operator

 

기본 문법

== : 강제 형변환 포함

=== : 염격한 비교(타입까지 포함) *===를 권장

 

문자열 형태의 숫자일 경우에는 형변환 → parseInt([variable])

 

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연산자 테스트</title>
<script type="text/javascript">
	function test() {
		var name1 = "사과";
		var name2 = "사과 ";
		
		//문자열 비교
		alert(name1.trim() == name2.trim()); //trim()을 이용해 여백은 제거
		
		//문자열 길이
		alert(name1.length); //2
		alert(name2.length); //3 (trim 포함)
		
		
		var age1 = 21;
		var age2 = '21';
		
		// == 사용 : 내부적 형변환
		alert(age1 == age2); //true 
		// === 사용 : 타입까지 비교
		alert(age1 === age2); //false
		
		var age3 = age1 + 1; 
		var age4 = age2 + 1; 
		alert(age3); //22 (21+1)
		alert(age4); //211 ('21'+'1')
		
		//문자열 형태의 숫자일 경우에는 형변환
		var age5 = parseInt(age2); //age2를 문자->숫자로 형변환
		alert(age1 === age5); //true
		
	}
</script>
</head>
<body>
<input type="button" value="연산자테스트" onclick="test()">
</body>
</html>

9. 배열 array

 

기본 문법

[ 배열의 Component 객체 생성 ]

* 동일한 component name 입력 양식은 배열로 처리

 

방법 1 : form name으로 접근

 →  document.form name.component name

 

방법 2 : getElementsByName으로 접근

 →  document.getElementsByName("component name")

<script type="text/javascript">
	
	function testArray1() {
    
		//배열 생성
		var arr = new Array(3);

		//배열 요소 할당
		arr[0] = "노랑색";
		arr[1] = "파란색";
		arr[2] = "초록색";

		//배열 alert
		for (var i = 0; i < arr.length; i++) {
			alert(arr[i]);
		}
	}

	// 모든 배열 요소 확인 
	function testArray2() {
		//form의 food Component 객체 생성
		//document.form이름.component이름
		var foodCompArray = document.foodForm.food;

		//입력 양식의 객체 길이 반환 : length
		alert(foodCompArray.length); //3

		//배열의 요소 확인 : value
		for (var i = 0; i < foodCompArray.length; i++) {
			alert(foodCompArray[i].value); //떡볶이
		}
	}

</script>

 

10. Checkbox 체크박스

 

.checked : boolean

→ Checkbox 에는 checked라는 속성이 있다

→ 체크가 되어있으면 true 반환 / 체크가 되어있지 않으면 false를 반환한다

 

기본 문법

<form>
<input type="checkbox" name="[component이름]" value="[value]"><br>
</form>

 

예시

선택한 메뉴 항목에 대해 메뉴 정보를 alert 한 번으로 모두 띄우기

만약 아무 메뉴도 선택하지 않았다면 "메뉴를 선택하세요."라는 alert 띄우기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	/* 
		선택한 메뉴 항목에 대해 메뉴 정보를 alert 한번으로 모두 출력
		만약 선택한 메뉴가 없으면 "메뉴를 선택하세요."으로 alert으로 출력
	*/
	function orderMenu() {
		
		// "menu" array component 객체 생성
		var checkboxCompArray = document.getElementsByName("menu");
		
		// order 객체 초기화 생성
		var order = "";
		
		// for문에서 각 배열 접근
		// .checked를 이용해 선택 여부 확인하여 order에 누적
		for (var i=0; i<checkboxCompArray.length; i++){
			if (checkboxCompArray[i].checked){
				order += checkboxCompArray[i].value+", ";
			} 
		}
		
		// 주문이 없을 경우(order에 값이 없을 경우)와 아닌 경우 
		if (order === ""){
			alert("메뉴를 선택하세요.");
		} else {
			//주문 누적된 order alert
			alert("주문하신 메뉴: " + order);
			//주문 완료 후 form을 초기화 (.reset())
			document.getElementById("menuForm").reset();
		}
	}//orderMenu function
</script>
</head>
<body>
	<form id = "menuForm">
		<input type="checkbox" name="menu" value="1번">1번<br> 
		<input type="checkbox" name="menu" value="2번">2번<br> 
		<input type="checkbox" name="menu" value="3번">3번<br> 
		<input type="button" value="주문" onclick="orderMenu()">
	</form>
</body>
</html>

 

 

11. action / submit 

 

* action

: action은 처리할 서버 프로그램의 url을 명시한다.

: onsubmit = "return [function]"

 - 해당 function이 false를 리턴하면 정보가 전송되지 않고, 

    true 혹은 리턴값을 따로 명시해놓지 않았다면 기본 submit으로 전송된다.

 

* form 내의 submit

: button과 다르게, 서버에 form정보를 전송할 때 사용한다.

 

 

기본 문법

<form action = "FindServlet" onsubmit="return [함수명]">
	아이디 <input type="text" name="[component name]">
	
    	<!-- button과 다르게, 서버에 form정보를 전송할 때 사용한다. -->
	<input type="submit" value="[value]">
</form>

 

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Servlet</title>
<script type="text/javascript">
	function checkForm() {
		var idComp = document.getElementById("userId");
		
		if(idComp.value != ""){
			alert("서버로 전송되겠군요!")
			idComp.reset();
		} else {
			alert("아이디를 입력하세요.")
			//전송하지 않기 위해 false를 리턴한다
			return false;
		}
	}
	</script>
</head>
<body>
	<!-- action은 처리할 서버 프로그램의 url을 전송한다. -->
	<form action="FindServlet" onsubmit="return checkForm()">
		아이디 <input type="text" name="userId" id="userId">
		<!-- button과 다르게, 서버에 form정보를 전송할 때 사용한다. -->
		<input type="submit" value="전송">
	</form>
	<hr>
</body>
</html>

총 정리

 

[조건]

입금하기 submit 버튼을 누르면
금액 부분이 공란이면 
  -> '금액을 입력하세요' alert
금액이 공란이 아니지만 숫자가 아닐 경우 (isNaN()) 
  -> '숫자로 입력하세요' alert
  -> 입력란에 정보 지워주기
위 두 경우는 submit 시키지 않음

위 두 경우가 아닌 경우,
  -> 전송을 시키되, 
  -> confirm을 이용해서 '확인'을 누를 경우에만 전송시키기
  -> 취소 누르면 전송시키지 않기

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>submit 연습</title>
<!-- 
	입금하기 submit 버튼을 누르면
	금액 부분이 공란이면 
	  -> '금액을 입력하세요' alert
	금액이 공란이 아니지만 숫자가 아닐 경우 (isNaN()) 
	  -> '숫자로 입력하세요' alert
	  -> 입력란에 정보 지워주기
	위 두 경우는 submit 시키지 않음
	
	위 두 경우가 아닌 경우,
	  -> 전송을 시키되, 
	  -> confirm을 이용해서 '확인'을 누를 경우에만 전송시키기
	  -> 취소 누르면 전송시키지 않기
 -->
<script type="text/javascript">
	function depositAction() {
		var moneyComp = document.getElementById("money");
		var flag = false;
		
		if (moneyComp.value === "") {
			alert("입금액을 입력하세요.");
		} else if (isNaN(moneyComp.value)){ //숫자가 아니면 true
			alert("숫자로 입력하세요.")
			moneyComp.value = "";
		} else {
			//confirm함수는 확인누르면 true, 취소누르면 false 반환
			flag = confirm("입금하시겠습니까?");
		}
		return flag;
	}//function
	
</script>
</head>
<body>
	<form action="depositForm" onsubmit="return depositAction()">
		금액<input type="text" name="money" id="money">
		<input type="submit" value="입금하기">
	</form>
</body>
</html>
728x90
반응형

'Java Web Programming > 2. JavaScript' 카테고리의 다른 글

[JavaScript] 팝업창 띄우기  (0) 2020.09.03

관련글

티스토리툴바