7월9일 - JavaScript 2

JavaScript

6. JavaScript Arrays (배열)

- 배열이 있다는 것은 순서(index)가 있다는 뜻

- 자바의 배열과는 다르다.

- 배열의 진화된 모습은 JSON이다.

1) 표현방법, element 요소, index 순서

//old version
var points=new Array(40,100,1,5,25,10);
document.write(points);        //배열요소전체
document.write("<hr>");
document.write(points.length); //배열요소갯수 

//new version
var points = [40, 100, 1, 5, 25, 10]; 
for(idx=0;idx<points.length;idx++){
	document.write(points[idx]);
	document.write("<hr>");
}//for end

2) 배열선언

- 중간에 요소가 비어있어도 인정을 해준다.

var fruits=["Banana","Orange","Apple","Mango"];
fruits[6]="Lemon";
document.write(fruits);
document.write("<hr>");
document.write(fruits.length+"<br>");
document.write(fruits[4]);

분석-> fruit[4] 의 배열의 요소는 존재하지않지만 요소의 갯수에는 포함이 되어있기에 undefined가 뜬다.

3) 배열 관련 메소드

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits);
document.write("<hr>")
->Banana,Orange,Apple,Mango

document.write(fruits.toString());
document.write("<hr>")
->Banana,Orange,Apple,Mango

document.write(fruits.join(" * "));
document.write("<hr>")
->Banana * Orange * Apple * Mango

//배열 마지막 요소 제거
fruits.pop();
document.write(fruits.toString());
document.write("<hr>")
->Banana * Orange * Apple * Mango

//배열 마지막 요소 추가
fruits.push("Kiwi");
document.write(fruits.toString());
document.write("<hr>")
->Banana,Orange,Apple,Kiwi
           
//배열 첫번째 요소 제거
fruits.shift();
document.write(fruits.toString());
document.write("<hr>")
->Orange,Apple,Kiwi
           
//배열 첫번째 요소 추가
fruits.unshift("Lemon");
document.write(fruits.toString());
document.write("<hr>")        
->Lemon,Orange,Apple,Kiwi

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

4) Array 정렬

- 문자정렬

//array sort
var fruits = ["Banana", "Orange", "Apple", "Mango"];

//오름차순 정렬
fruits.sort();
document.write(fruits.toString());
document.write("<hr>")
->Apple,Banana,Mango,Orange

//내림차순 정렬
fruits.reverse();
document.write(fruits.toString());
document.write("<hr>")
->Orange,Mango,Banana,Apple

- 숫자정렬

//Numeric Sort
var points=[40,100,1,5,25,10];

//오름차순 정렬
points.sort(function(a,b){return a-b});
document.write(points.toString());
document.write("<hr>")
->1,5,10,25,40,100

//내림차순 정렬
points.sort(function(a,b){return b-a});
document.write(points.toString());
document.write("<hr>")
->100,40,25,10,5,1

7. JavaScript JSON (JavaScript Object Notation)

1. JSON?

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

- 배열을 객체화

- 속성(name) : 값(value) 쌍으로 데이터가 구성

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

- AJAX, NoSQL 등에서 주로 사용된다.

- 기본 배열

var person=["John","Doe",46];
document.write(person.length+"<hr>"); //3
document.write(person[0]+"<hr>") //Jhon
document.write(person[1]+"<hr>") //Doe
document.write(person[2]+"<hr>") //46

- 배열의 인덱스값에 이름을 붙일 수 있다.

var person=[];
person["firstName"]="Jhon";
person["lastName"]="Doe";
person["age"]=46;
document.write(person.length+"<hr>"); //0
document.write(person[0]+"<hr>") //undefined
document.write(person[1]+"<hr>") //undefined
document.write(person[2]+"<hr>") //undefined

document.write(person["firstName"]+"<hr>"); //Jhon
document.write(person["lastName"]+"<hr>"); //Doe
document.write(person["age"]+"<hr>"); //46

2. XML 문법

- custom tag(사용자 정의 태그) 기반

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

- 활용 예시)

</person>

3. JSON 문법

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

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

- name 구성시 "" 기호를 생략가능하다

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

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

1) 예) {}안에 한사람의 정보를 저장했다.

{"firstName": "Jhon", "lastName": "Doe", "age": 46}

- 한 사람

//1) name에 ""기호 생략가능
var person={firstName: "Jhon", lastName: "Doe", age: 46}
//2)
var person={"firstName": "Jhon", "lastName": "Doe", "age": 46};
document.write(person["firstName"]); //"Jhon"
document.write(person["lastName"]); //"Doe"
document.write(person["age"]); //46
document.write("<hr>")
document.write(person.firstName); //"Jhon"
document.write(person.lastName); //"Doe"
document.write(person.age); //46
document.write("<hr>")

->JhonDoe46

- 여러 사람

var persons=[
		{"firstName": "Jhon", "lastName": "Doe", "age": 46},
		{"firstName": "Tom", "lastName": "Joe", "age": 56},
		{"firstName": "Irene", "lastName": "Yoe", "age": 16}
];
document.write(persons.length);	//3
document.write(persons[0]);	 //[object Object]
document.write(persons[1]);	 //[object Object]
document.write(persons[2]);	 //[object Object]
document.write("<hr>");

for(idx=0;idx<persons.length;idx++){
	document.write(persons[idx].firstName);
	document.write(persons[idx].lastName);
	document.write(persons[idx].age);
	document.write("<hr>");
}

2) JSON.parse()

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

- txt에 ' ' 형태의 string을 JSON.parse(txt)를 해주어 JSON문법으로 변환해 해석해준다.

var txt='{"name":"Irene", "age":16, "city":"New York"}';
var obj=JSON.parse(txt); //JSON문법으로 변환
document.write(obj.name); 
document.write(obj.age);
document.write(obj.city);

->Irene16New York

3) JSON.stringify()

- JSON값을 일반 문자열로 반환

var obj={name:"Irene", age:16, city:"New York"};
var myJSON=JSON.stringify(obj);
document.write(myJSON+"<br>");
document.write(myJSON.length);

->{"name":"Irene","age":16,"city":"New York"}
->43

4) JSON Array

- 배열안에 있는 배열을 찾기

- myObj 배열 안에 있는 cars의 배열의 값을 묻는다.

var myObj, x;
myObj = {
	 "name":"John",
	 "age":30,
	 "cars":[ "Ford", "BMW", "Fiat" ]
};
x = myObj.cars[0];
document.write(x);

->Ford

8. JavaScript Method

함수, function, Method

- 함수 정의(작성), 함수 호출

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

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

- 형식) function 함수명(){}

1) 리턴값이 없는 경우

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>08_함수.html</title>
	<style></style>
</head>
<body>
	<script>
	//1) 리턴값이 없는 경우
	function test(){
		alert("안녕~!~!");
	}//test() end	

	function abs(a){ //매개변수의 자료형이 없다.
		if(a<0){
			alert(-a);
		}else{
			alert(a);
		}
	}//abs() end

	function max(a,b,c){
		var result1=(a>b)?a:b;
		var result2=(result1>c)?result1:c;
		alert(result2);
	}//max() end

	function hap(a,b){
		if(a>b){
			var tmp=a, a=b, b=tmp;
		}
		var sum=0;
		for(n=a; n<=b; n++){
			sum+=n;
		}
		alert(sum);
	}//hap() end

	function diff(a,b){
		var c=a-b;
		if(c<0){
			c=-c;
		}
		alert(c);
	}//diff() end

        //1) 리턴값이 없는 경우
	test(); //함수호출
	abs(3);     //3
	abs(-5);    //5
	abs(-5.6);  //5.6
	abs(8.5);   //8.5
	max(7,8,9); //9
	hap(4,6);   //두수 사이의 합
	diff(7,1);  //두수의 차 6
	</script>
</body>
</html>

2) 리턴값이 있는 경우

1) 카운트함수
function count(a,b){
	var cnt=0;
	for(idx=a; idx<b; idx++){
		if(idx%3==0){
			cnt++;
		}
	}
	return cnt; //리턴값의 자료형이 존재하지 않는다
}//count() end

2) 평년, 윤년 구하기
function leap(y){
	if(y%4==0 && y%100!=0 || y%400==0){
		return true;
	}else{
		return false;
	}
}//leap() end

3-1) 팩토리얼 구하기
function fact(a){
	var gop=1;
	for(idx=a; idx>=1; idx--){
		gop=gop*idx;
	}
	return gop;
}

3-2) 팩토리얼 구하기
function fact(a){
	if(a==0){
		return 1;
	}else{
		return a*fact(a-1);
	}
}//fact() end
	
//----------------------------------------------------------------------
	//2) 리턴값이 있는 경우
	var result=count(1,100); //3의 배수의 갯수를 반환
	alert(result);

	if(leap(2019)){
		alert("윤년");
	}else{
		alert("평년");
	}//if end

	//재귀적 함수 호출 관계
	result=fact(4);
	alert(result);

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

9. JavaScript Math Method

document.write(Math.PI+"<br>");
document.write(Math.round(4.7)+"<br>");
document.write(Math.round(4.4)+"<br>");
document.write(Math.abs(-4.7)+"<br>");
document.write(Math.ceil(4.4)+"<br>");
document.write(Math.pow(8,2)+"<br>");
document.write(Math.floor(4.7)+"<br>");
document.write(Math.min(0, 150, 30, 20, -8, -200)+"<br>");
document.write(Math.max(0, 150, 30, 20, -8, -200)+"<br>");
document.write(Math.random()+"<br>");

저작자표시

'공부 > 화면구현 UI' 카테고리의 다른 글

7월11일 - JavaScript 4 (0)	2019.07.11
7월10일 - JavaScript 3 (1)	2019.07.10
7월8일 - JavaScript 1 (0)	2019.07.08
7월4일 - UI 구현 CSS (0)	2019.07.04
7월3일 - UI 구현 HTML3 + CSS (1)	2019.07.03

3XL

7월9일 - JavaScript 2

JavaScript

'공부 > 화면구현 UI' 카테고리의 다른 글

티스토리툴바

7월9일 - JavaScript 2

JavaScript

'공부 > 화면구현 UI' 카테고리의 다른 글

'공부/화면구현 UI' Related Articles

티스토리툴바