본문 바로가기
Frontend

07월 09일 화 | UI 화면구현 05 - Javascript 기초문법Ⅱ

by 구라미 2019. 7. 9.

Javascript 기초문법Ⅱ

2. Javascript 배열

Javascript의 배열을 작성하는 방법

 

예시 1)

<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <title>자바스크립트 배열.html</title>
  <style>
  </style>
 </head>

 <body>
 	<div id="demo">
 		
 	</div>
  	<script>
  		var points = new Array(); //bad
  		var points = [];          //good

  		//old version
  		var points = new Array(40,100,1,5,25,10);
  		document.write(points);
  		document.write('<br>');
  		document.write(points.length);
  		document.write('<hr>');

  		//new version
  		var box = [40,100,1,5,25,10];
  		for(i=0; i<box.length; i++){
  			document.write(box[i]);
  			document.write('<br>');
  		}

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

 

 

예시 2) 배열 요소 추가하기

var cars = [];
cars[0]='Saab';
cars[1]='BMW';
cars[2]='BENZ';
cars[3]='HYUNDAI';
document.write(cars); //배열요소 전체
document.write('<hr>');

var fruits = ["banana","Orange","Apple","Mango"];
document.write(fruits);
document.write(fruits.length); //4
fruits[6]="Lemon";
document.write('<hr>');
document.write(fruits);
document.write(fruits.length); //7

document.write('<hr>');
document.write(fruits[6]+'<br>'); //Lemon
document.write(fruits[5]+'<br>'); //undefined
document.write(fruits[4]+'<br>'); //undefined

자바스크립트 문법은 유연하기 때문에

비교적 유동적으로 배열의 크기를 조정할 수 있음.

cars[number] 로 번호를 매겨서 직접 배열의 요소를 추가하고 있다. 

 

 

 

예시 3) 다양한 배열 메소드의 예제

var fruits = ["banana","Orange","Apple","Mango"];
		
document.write(fruits.join("★"));
document.write('<hr>');	

fruits.pop();// 맨 뒷 요소삭제
document.write(fruits);
document.write('<hr>');
		
fruits.push("Kiwi");//맨 뒷 요소추가
document.write(fruits);
document.write('<hr>');
		
fruits.shift(); //맨 앞 요소삭제
document.write(fruits);

fruits.unshift("Lemon"); //맨 앞 요소추가
document.write(fruits);
document.write('<hr>');

fruits.splice(0,2); //0번째, 1번째 요소삭제
document.write(fruits);
document.write('<hr>');

var myGirls = ["Cecille","Lone"];
var myBoys = ["Emil","Tobias","Linus"];
var myChildren = myGirls.concat(myBoys); //배열요소 합치기
document.write(myChildren);
document.write('<hr>');

결과값:

 

 

 

예시 4) 배열 정렬하기

//문자열 정렬
var fruits = ["Banana","Orange","Apple","Mango"];
fruits.sort(); //기본 오름차순 정렬
document.write(fruits);
document.write('<hr>');

fruits.reverse(); //내림차순 정렬
document.write(fruits)
document.write('<hr>');

//수의 정렬
var code = [10,50,60,80,20,870,30,85,5,8];
code.sort(function(a,b){return a-b}); //오름차순
document.write(code);
document.write('<hr>');

code.sort(function(a,b){return b-a}); //내림차순
document.write(code);
document.write('<hr>');

결과값:

 

3. JSON

JSON이란?

JSON: JavaScript Object Notation.
JSON is a syntax for storing and exchanging data.
JSON is text, written with JavaScript object notation

- 자바스크립트 객체 표기법

- 배열을 객체화한다.

- 속성(Name), 값(Value) 쌍으로 데이터가 구성된다.

- 비동기식 통식(문자단위 통신)에서 XML을 대체하는 주요 데이터 포맷이다.

- AJAX, NoSQL에서 주로 사용되는 문법이다.

 

JSON의 문법

- name(key)과 value 한 쌍으로 구성

- name과 value는 : 기호로 구분한다.

- name 구성시 "" 기호를 생략할 수 있다. 

- {} 안에 데이터를 저장한다.

- 형식) {name:value, "name":value, name:value ~ }

- 예) {"firstName":"John", "lastName":"Doe", "age":46}

 

var person = [];
person["firstName"] ="John";
person["lastName"] ="Doe";
person["age"] = 38;
document.write(person.length+'<hr>');
document.write(person[0]+'<hr>');
document.write(person[1]+'<hr>');
document.write(person[2]+'<hr>');
document.write(person["firstName"]+'<hr>');
document.write(person["lastName"]+'<hr>');
document.write(person["age"]+'<hr>');

결과값:

 

 

예시 1)

var person = {"firstName":"John", "lastName":"Doe", "age":45};
var person = {firstName:"John", lastName:"Doe", age:45}; //이것도 맞는 표현임

 

 

예시 2) 

var person = {"firstName":"John", "lastName":"Doe", "age":45};
document.write(person["firstName"]);
document.write(person["lastName"]);
document.write(person["age"]);
document.write('<hr>');

//실제로 가장 많이 쓰는 방식
document.write(person.firstName);
document.write(person.lastName);
document.write(person.age);
document.write('<hr>');

 

예시 3)

var persons = [
	{"firstName":"John", "lastName":"Doe", "age":45},
	{"firstName":"Jenny", "lastName":"Lee", "age":34},
	{"firstName":"Yerim", "lastName":"Kim", "age":22},
	{"firstName":"Chris", "lastName":"Min", "age":67}];
document.write(persons.length+'<br>');
document.write(persons[0]+'<br>');
document.write(persons[1]+'<br>');
document.write(persons[2]+'<br>');
document.write(persons[3]+'<br>');

결과값:

 

[object Object]로 뜬다는 것은 JSON의 값이 바람직하게 잘 넘어왔다는 뜻이다.

그게 아닐경우 undefined가 뜬다.

이제 값을 불러오면

for(i=0; i<persons.length; i++){
	document.write(persons[i].firstName);
	document.write(persons[i].lastName);
	document.write(persons[i].age);
	document.write('<br>')
};

결과값:

 

 

예시 4) JSON.parse()

//-> String형태의 JSON문법을 분리할 때

var txt= '{"name":"John", "age":30, "city":"New york"}';
var obj = JSON.parse(txt);
document.write(obj.name);
document.write(obj.age);
document.write(obj.city);

 

 

예시 5) JSON.stringfy()

//-> JSON값을 일반 문자열로 변환

/*JSON.stringify()*/
var dat = {"name":"John", "age":30, "city":"New york"};
var myJSON = JSON.stringify(dat);
document.write(myJSON+'<br>');
document.write(myJSON.length);

 

 

예시 6) JSON Array

//JSON값으로 배열도 올 수 있다.

/*JSON Array*/
var myObj, X;
myObj = {
		"name":"John",
		"age":30,
		"city":"New york",
		"cars":["Ford","HYUNDAI","Fiat"]
};
x = myObj.cars[0];
document.write(x);

결과값: Ford

 

 

 

XML 문법

- custom tag(사용자 정의 태그) : 사용자가 만들어서 쓸 수 있는 태그이다.

- 환경설정, 안드로이드기반 앱개발시 View단 구성

<person>
 <firstName>John</firstName>
 <lastName>Doe</lastName>
 <age>38</age>
</person>

 

 

4. Javascript 배열 연습문제

연습문제) 평균, 등수, 과락, 10점당 ★ 하나, 장학생을 구해서 테이블로 출력하기.

<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <title>자바스크립트 배열.html</title>
  <style>
  	table {border: 1px solid #ddd; border-collapse: collapse; text-align: center;}
  	th {background: #eee;}
  	td {padding: 5px 10px;}
  	td:nth-child(8) {color:orange;}

  </style>
 </head>

 <body>
 	<div id="demo"> 		
 	</div>
  	<script>

  		//주어진 데이터
  		var uname = ["김예림","이보영","이민기","이종혁","박기웅"];
  		var kor= [98,100,70,60,75];
  		var eng= [100,86,80,40,56];
  		var mat= [96,100,80,77,64];
  		var avg = [0,0,0,0,0];
  		var rank = [1,1,1,1,1];
  		var size = uname.length;

  		//연습문제) 평균, 등수, 과락, 10점당 ★ 하나, 장학생을 구해서 테이블로 출력하기.

  		//평균
  		for(var idx=0; idx<size; idx++){
			avg[idx]=parseInt((kor[idx]+eng[idx]+mat[idx])/3);
		}

		//등수
		for(var a=0; a<size; a++){
			for(var b=0; b<size; b++){
				if(avg[a] < avg[b]){
					rank[a] = rank[a]+1;
				}
			}
		}

		//테이블 작성하기
		var table="";
		table+="<table border='1'>";		
  		table+="<thead>";
  		table+="<tr>";
  		table+="<th>이름</th>";
  		table+="<th>국어</th>";
  		table+="<th>영어</th>";
  		table+="<th>수학</th>";
  		table+="<th>총점</th>";
  		table+="<th>평균</th>";
  		table+="<th>합불여부</th>";
  		table+="<th>별점</th>";
  		table+="<th>장학생</th>";  		
  		table+="</tr>";
  		table+="</thead>";
  		table+="<tbody>";
  		table+="<tr>";

		for(var idx=0; idx<size; idx++){
			//1) 테이블에 점수 데이터 넣기
			table+="<td>"+uname[idx]+"</td>";
			table+="<td>"+kor[idx]+"</td>";
			table+="<td>"+eng[idx]+"</td>";
			table+="<td>"+mat[idx]+"</td>";
			table+="<td>"+avg[idx]+"</td>";
			table+="<td>"+rank[idx]+"등"+"</td>";

			//2) 테이블에 합불 데이터 넣기
			if(avg[idx]>=70){
				if(kor[idx]<40 || eng[idx]<40 || mat[idx]<40 ){
					table+="<td>"+"재시험"+"</td>";		
				} else {
					table+="<td>"+"합격"+"</td>";	
				}
			}else {
				table+="<td>"+"불합격"+"</td>";		
			}
			table+="<td>";

			//3) 테이블에 별점 데이터 넣기
			for(var star=1; star<=avg[idx]/10; star++){				
				table+="★"
			}
			table+="</td>";
			
			//4) 테이블에 장학생 데이터 넣기
			if(avg[idx]>=95){
				table+="<td>"+"장학생"+"</td>";
			}else{
				table+="<td>"+"-"+"</td>";
			}
			table+="</tr>";
			document.write('<br>');			
		}

		document.getElementById("demo").innerHTML=table;
  	</script>
 </body>
</html>

 

결과값:

나는 이렇게 해결했는데 선생님은 더 쉽게 풀이할 수도 있다.

 

■선생님풀이■

 

 

 

 

 

5. Javascript의 메소드

자바스크립트에서 메소드는?

- 함수, function, method

- 함수의 리턴값은 존재하지만, 리턴형은 없다.

- 매개변수(parameter)의 자료형은 없다.

  형식) function 메소드명(){}

 

function test(){}

 

 

예시 1)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style>
  </style>
	<title>자바스크립트 함수</title>

</head>
<body>
 	<div id="demo"> 		
 	</div>
  	<script>

  		//메소드 선언
		function test(){
			alert("안녕하세요?");			
		}

		function abs(a){
			if(a<0){
				alert(-a);
			}else {
				alert(a);
			}
		}
        
        test(); //메소드 호출
		abs(3);
		abs(-5);
		abs(1.2);
		abs(-4.6);
		abs(-4.6);
        
		//최대값 구하기
		function max(a,b,c){
		 var max = (a<b) ? a:b;
		 max = (c<max) ? max:c;
		 document.write(max+'<hr>');
		}
		//합 구하기
		function hap(a,b){
			document.write(a+b+'<hr>');
		}
		//차 구하기
		function diff(a,b){
			document.write(a-b+'<hr>');
		}
        
		max(7,8,9);
		hap(4,2);
		diff(7,3);


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

 

 

 

예시 2) 리턴값이 있는 메소드

function count(a,b){
	var cnt =0;
	for(i=a; i<b; i++){
		if(i%3==0){
			cnt++;
		}
	}
	return cnt; //리턴값의 자료형이 존재하지 않는다.
}

var result = count(1,100); //3의 배수의 갯수를 반환
alert(result);

 

 

 

예시 3) 응용하기

3의 배수갯수, 윤년평년, 재귀함수

//1)a~b내 3의배수 갯수세기 
function count(a,b){
	var cnt =0;
	for(i=a; i<b; i++){
		if(i%3==0){
			cnt++;
		}
	}
	return cnt; //리턴값의 자료형이 존재하지 않는다.
	}
var result = count(1,100); //3의 배수의 갯수를 반환
alert(result);

//2)윤년,평년 판별하기
function leap(y){
	if(y%4==0 && y%100!=0||y%400==0){
		return true;
	}else {
		return false;
	}
}
if(leap(2019)){
	alert("윤년");
} else{
	alert("평년");
}
        
//재귀적 함수 호출 관계
function fact(a){
	if(a==0){
		return 1;
	}
	else{
		return a*fact(a-1); //내가 다를 다시 불러서 이용했다.
	}
}//fact() end

result=fact(4);
alert(result);

결과값:

 

저작자표시 비영리

'Frontend' 카테고리의 다른 글

07월 11일 목 | UI 화면구현 07 - Javascript 기초문법Ⅳ  (0) 2019.07.11
07월 10일 수 | UI 화면구현 06 - Javascript 기초문법Ⅲ  (0) 2019.07.10
07월 08일 월 | UI 화면구현 04 - Javascript 기초문법Ⅰ  (0) 2019.07.08
HTML/CSS - 가상선택자  (0) 2019.07.05
HTML/CSS - float 속성  (0) 2019.07.04

관련글

댓글

티스토리툴바