[ JAVA Script ] 기초 문법

[ Script ]/JAVA Script

[ JAVA Script ] 기초 문법

환이s 2023. 2. 22. 15:10

728x90

이전 포스팅에서 HTML/CSS에 대해 알아봤습니다. 오늘은 JAVA Scirpt의 기초 문법에 대해서 포스팅해보려 합니다.

■ JAVA Script란?

JAVA Script란 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립트 언어 또는 프로그래밍 언어입니다.

우리 일상에서 흔히 볼 수 있는 네이버 사이트를 예를 들면 페이지의 내용이 가만히 정적인 정보만 보여주는 것이 아니라 주기적으로 갱신되거나, 사용자와 상호 작용이 가능하거나, 애니메이션이 적용된 효과를 볼 수 있다면 javaScript가 관여하고 있을 거라고 생각해도 좋습니다. 간단하게 정리해서 javaScript의 특징은 다음과 같습니다.

■ JAVA Script 특징

동적인 웹페이지 작성을 위해 사용되는 클라이언트 측 프로그램 언어입니다.
모든 웹브라우저에 javascript 해석기가 내장되어 있다.

(버전 영향을 받습니다. 즉, 자바스크립트 최신버전의 코딩 기법을 쓰면 웹브라우저 엔진이 해석을 못할 수 있습니다.)

웹페이지의 동작을 정의하는 언어입니다.
인터프리터 언어입니다.
클라이언트에서 실행됩니다.
제어문은 java의 제어문들과 거의 동일합니다.

■ JAVA Script의 자료형

javaScript의 기본자료형은 문자열(String), 숫자(Number), 불린(Boolean), 언디파인드(undefined), 널(null)이 있지만 모두 가변자료형으로 자동으로 사용됩니다. 즉, 자료형을 따로 정해서 쓰지는 않습니다.

그럼 javaScript의 작성 방법을 알아봅시다.

■ JAVA Script의 작성 방법

1 ) 인라인 자바스크립트 : 태그 내부에 직접 작성합니다.

<태그 이벤트="자바스크립트 코드">
<input type="button" onclick="alert('ok')">

2 ) 내부 자바스크립트

<head> 태그 또는 <body> 태그 내부에 작성
<script>
 자바 스크립트 코드
</script>

3 ) 외부 자바스크립트

<script src="자바스크립트파일.js"></script>

■ JAVA Script의 대화 상자

javaScript에는 대화 상자로 사용되는 함수들이 있습니다. Alert, Confirm, Prompt 세 가지가 있고 새롭게 Popup 창을 띄우는 형태로써는 모두 같지만 각각 함수마다 역할이 다르며 함수 사용방법이 다릅니다.

그럼 순차적으로 알아봅시다.

1 ) Akert() 함수

Akert() 함수는 단순하게 메시지만을 전달하는 함수이며 사용된 후에 반환되는 값은 없습니다. 대부분 사용자에게 경고하는 내용이나 중요한 내용을 전달할 때 사용되는 함수입니다. 대화 상자 Popup 창 중에 가장 기본적이며 많이 사용되는 함수입니다.

alert("메시지"); 단순 메시지박스

예제 코드를 통해서 알아봅시다.

아래 코드는 파라미터 값을 if문을 통해서 값이 알맞은 문자를 반환하는 코드입니다.

<예제 1>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>parameterEx</title>
<script type="text/javascript">
function parameter() {
	var out = '';
	var length = arguments.length;
	if (length == 0) {//입력받은 매개변수가 없으면
		out +='Zero';
		
	}else if (length == 1) {
		out += 'One';
		
	}else {
		out +='More';
	}
	return out;
}
var output= parameter(1,3);
alert(output);

</script>
</head>
<body>

</body>
</html>

2 ) Prompt() 함수

Prompt() 함수는 사용자의 입력값을 받아서 입력 값을 받는 함수입니다. 사용자에게 입력이 가능한 Popup 창을 띄어주는 함수라고 알고 계시면 좋을 거 같습니다. 또한 입력한 값을 받아서 관련된 Data를 변경하여 반환이 가능하고, 만약에 사용자가 취소 버튼을 클릭하게 되면 null을 반환하게 됩니다.

var 변수 = prompt("메시지", "기본값");입력받은 값을 변수에 저장할 때

Prompt() 함수를 활용해서 예제 코드로 출력을 원하는 2~9단을 입력해서 출력해 봅시다.

<예제 2>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prompt_dan</title>
<script type="text/javascript">
var dan = prompt("단을 입력하세요(2~9)","2");
for(i=1; i<=9; i++){
document.write(dan+"x"+i+"="+dan*i+"<br>");
}
</script>
</head>
<body>

</body>
</html>

3 ) Confirm() 함수

Confirm() 함수는 Alert() 함수와는 다르게 변수에 참/거짓을 저장한 후에 반환하는 함수이며, 사용자의 결과에 따라서 Popup창을 반환하는 함수입니다.

confirm("메시지"); 사용자의 확인을 받을 경우

예제 코드를 통해서 알아봅시다.

<예제 3>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>confirm</title>
<script type="text/javascript">
var user=confirm("계속할까요?");
if(user == true){
	document.write('확인 버튼을 눌렀습니다.');
	
}else{
	document.write("취소 버튼을 눌렀습니다.");
	
}

</script>
</head>
<body>

</body>
</html>

■ HTML 요소에 접근하는 방법

javaScript에서 HTML 요소에 접근할 때 document 객체를 통해서 접근할 수 있습니다.

document 객체는 DOM 포스팅할 때 좀 더 깊게 알아볼 예정입니다. 오늘 포스팅에서는 간단하게 설명을 드리자면 문서에 있는 모든 태그를 객체로 보며, 모든 객체화된 태그는 document 객체 안에 포함되어 있습니다. 즉, 각 객체에 접근하려면 document객체의 메서드를 이용해서 찾아야 합니다.

- id 로 접근 : document.getElementById("태그의 id")
- name으로 접근 : document.getElementsByName("태그의 name")
- class로 접근 : Document.getElementsByClassName("태그의 class")

아래 코드는 ID로 접근하는 방식으로 사원의 이름, 직급, 부서를 출력하는 예제 코드입니다.

<예제 4>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>func</title>
<script type="text/javascript">
function greeting(name,position) {
	alert(name + " "+ position+ "님 안녕하세요?");
	
}
function greeting2() {
	var name = document.getElementById("name").value;
	var position = document.getElementById("position").value;
	if (name =="") {
		alert("이름을 입력하세요.");
		document.getElementById("name").focus();//입력커서 이동
		return; //함수 종료
	}
	if (position =="") {
		alert("직급을 입력하세요.");
		document.getElementById("position").focus();//입력커서 이동
		return; //함수 종료
	}
	if (dept =="") {
		alert("부서를 입력하세요.");
		document.getElementById("dept").focus();
	}
	var str = name + " " + position +"님 안녕하세요?";
	alert(str);
	// 수동 submit
	document.getElementById("form1").submit();
}

</script>
</head>
<body>
<button onclick="greeting('홍길동','부장')">클릭하세요</button>

<form action="func_result.jsp" method="post" id="form1">
이름 : <input id="name" name="name"> <br>
직급 : <input id="position" name="position"> <br>
부서 : <input id="dept" name= "dept"> <br>
<button type="button" onclick="greeting2()">확인</button>

</form>
</body>
</html>

■ 배열

javaScript에서 배열은 java와 동일합니다.

다른 점은 java는 int, String 값을 정확한 값을 넣어줘야 하지만, javaScript에서는 변수를 var로 표현합니다.

1) 배열 선언 방법 1
var 배열 = ["값", "값", "값"];
var fruits = ["apple", "banana", "peach"];

2) 배열 선언 방법 2
var fruits = new Array();
fruits[0] = "apple";
fruits[1] = "banana";
fruits[2] = "peach";

예제 코드를 통해서 자세하게 알아봅시다.

<예제 5>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>arrayObject</title>
<script type="text/javascript">
var fruits=new Array(); //배열 선언
fruits[0]="사과";
fruits[1]="바나나";
fruits[2]="오렌지";

for(i=0; i<fruits.length; i++){
	document.write(fruits[i]+ "<br>");
}
var textFruits = new Array();
textFruits["a"]="수박";//자바스크립트는 인덱스에 문자도 사용 가능
textFruits["b"]="참외";
textFruits["c"]="딸기";

//for each문
for(var f in textFruits){ // f에는 인덱스가 넘어옴
	document.write(textFruits[f] + "<br>");
}

</script>
</head>
<body>

</body>
</html>

마치며

오늘은 JAVA Script의 기초 문법에 대해서 알아봤습니다.

다음 포스팅 [함수]로 뵙겠습니다.

728x90

'[ Script ] > JAVA Script' 카테고리의 다른 글

[ JAVA Script ] Mobile Web UI구현 (0)	2023.02.28
[ JAVA Script ] Ajax (0)	2023.02.27
[ JAVA Script ] jQuery (0)	2023.02.25
[ JAVA Script ] DOM (0)	2023.02.24
[ JAVA Script ] 함수 (2)	2023.02.23

현재글[ JAVA Script ] 기초 문법

환이의 개발일지

JAVA 개발자로 일을 하면서 해당 내용들을 공유해 드리려고 합니다! 개발을 처음 접하시는 분들에게 업계 선배 혹은 길잡이가 되어드리고 싶습니다! :)

Today :
Yesterday :

환이의 개발일지